**Local Occlusion** -- `Html`: A `Toggle { onlyInCurrentRegion = True }` should not switch off its contingent descendants in other regions

[upsiflu]

Situation: When a toggle is switched off, then none of its descendants are rendered (except when they have been visible before -- then they should be disappearing)

Intended outcome: A Toggle { onlyInCurrentRegion = True } should hide exactly all descendants in its current region.

Use case: A collapsible TOC should not affect the visibility of the pages linked from there.

Discussion: As of now, this would require some state awareness in Ui or region awareness in Html. We can implement the use case by making the GoTo twice per each page: once in a global menu without labels (think "Jump-to" for assistive tech) plus once in the Toc. The actual page content would then not be decendant of the TOC.

Compare:

With local occlusion

Less.Ui.Html.toggle []
                { flag = "❡"
                , isInline = True
                , label = [ Html.b [] [ Html.text "❡ Table of Contents" ] ]
                }
                (chapter1 ++ chapter2)

chapter1 =
            Less.Ui.singleton [ Html.text "Chapter 1" ]
                |> Less.Ui.at Content
                |> Less.Ui.Html.goTo []
                    { destination = "chapter1"
                    , isInline = True
                    , label = [ Html.li [] [ Html.text "Chapter 1: GoTo and Toggle" ] ]
                    }

With global occlusion, and atLocation

Less.Ui.Html.toggle []
                { flag = "❡"
                , isInline = True
                , label = [ Html.b [] [ Html.text "❡ Table of Contents" ] ]
                }
                ( Less.Ui.Html.goTo []
                    { destination = "chapter1"
                    , isInline = True
                    , label = [ Html.li [] [ Html.text "Chapter 1: GoTo and Toggle" ] ]
                    } []
                ++ Less.Ui.Html.goTo [] .. []
               )

chapter1 =
     Less.Ui.singleton [ Html.text "Chapter 1" ]
                |> Less.Ui.at Content
                |> Less.Ui.Html.atLocation "chapter1"

With a "Generator" style page instead of goTo:

Less.Ui.Html.toggle []
        { flag = "❡"
        , isInline = True
       , label = [ Html.b [] [ Html.text "❡ Table of Contents" ] ]
       }
       (chapter1.link ++ chapter2.link)
       ++ chapter1.page ++ chapter2.page

chapter1 : { link : Ui, content : Ui }
chapter1 = 
   Less.Ui.singleton [ Html.text "Chapter 1" ]
       |> Less.Ui.at Content
       |> Less.Ui.page
          { destination = "chapter1"
          , isInline = True
          , label = [ Html.li [] [ Html.text "Chapter 1: GoTo and Toggle" ] ]
          }

Same, plus list comprehension:

chapters = [chapter1, chapter2,...] -- can be inlined!
toc = toggle [] {...} (List.concatMap .link chapters)
in
toc++List.concatMap .page chapters