[{"name":"Lustre.Ui.Accordion","comment":" An accordion is made up of one or more collapsible sections with content.\nEach accordion item is made up of a header and a trigger button, and the\npanel that contains the collapsible content.\n\n Lustre.Ui.Accordion.view []\n [ Lustre.Ui.Accordion.item\n \"...\"\n []\n (Lustre.Ui.Accordion.heading []\n [ Lustre.Ui.Accordion.trigger []\n [ Html.span [] [ Html.text \"...\" ] ]\n ]\n )\n (Lustre.Ui.Accordion.panel []\n [ Html.p [] [ Html.text \"...\" ]\n , Lustre.Ui.Accordion.close []\n [ Html.text \"...\" ]\n ]\n )\n ]\n\n - [`accordion.view`](#view) is the container for all accordion items. It\n manages keyboard interaction and open state for each item.\n\n - Each [`accordion.item`](#item) represents a single collapsible section\n within the accordion. It must have a unique name within the accordion to\n identify it.\n\n - An [`accordion.heading`](#heading) contains the trigger button for the\n item as its only child.\n\n - The [`accordion.trigger`](#trigger) is the button that toggles the open\n state of an accordion item. It must not contain any other interactive\n elements.\n\n - The [`accordion.panel`](#panel) contains the collapsible content for the\n item.\n\n - The optional [`accordion.close`](#close) trigger can be placed within the\n panel content to provide an additional way to close the accordion item.\n\n\n## Accessibility\n\nThe accordion component follows the WAI-ARIA Authoring Practices for the\n[accordion pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/).\nThis means appropriate roles, ARIA attributes, and keyboard interactions are\nhandled for you, including:\n\n - `role` \"region\" on the accordion root, with managed `aria-orientation`\n for horizontal or vertical accordions.\n\n - `role` \"heading\" on each accordion item heading, with a default `aria-level`\n of 3.\n\n - `role` \"button\" on each accordion item trigger, with managed `aria-expanded`,\n and `aria-controls` attributes.\n\n - `role` \"region\" on each accordion item panel, with managed `aria-labelledby`\n attribute.\n\n - Keyboard interactions for navigation between accordion item triggers using\n Arrow Up/Down, Arrow Left/Right, Home, and End keys.\n\n - Retention of focus when accordion items are closed.\n\n\n## Usage notes\n\nAvoid accordions with only one item, as they do not provide any functionality\nnot already provided by the native `
` HTML element.\n\n\n## Recipes\n\nYou can use these recipes as starting points to build common types of\naccordions. Copy and paste them into your apps and adapt them as needed!\n\n\n### Basic use\n\nThe basic scaffold for any accordion. In this default configuration, the state\nof the accordion is uncontrolled and managed internally. Only one item can\nopen at a time and keyboard navigation does not loop when reaching the first\nor last item.\n\n Lustre.Ui.Accordion.view []\n [ Lustre.Ui.Accordion.item \"...\"\n []\n (Lustre.Ui.Accordion.heading []\n [ Lustre.Ui.Accordion.trigger [] [ Html.span [] [ Html.text \"...\" ] ] ]\n )\n (Lustre.Ui.Accordion.panel []\n [ Html.p [] [ Html.text \"...\" ]\n , Lustre.Ui.Accordion.close [] [ Html.text \"...\" ]\n ]\n )\n , Lustre.Ui.Accordion.item \"...\"\n []\n (Lustre.Ui.Accordion.heading []\n [ Lustre.Ui.Accordion.trigger [] [ Html.span [] [ Html.text \"...\" ] ] ]\n )\n (Lustre.Ui.Accordion.panel []\n [ Html.p [] [ Html.text \"...\" ]\n , Lustre.Ui.Accordion.close [] [ Html.text \"...\" ]\n ]\n )\n ]\n\n\n### Multiple open items, looping navigation\n\nThis configuration allows multiple accordion items to be open at once, and\nkeyboard navigation will loop back to the first item after the last, and vice\nversa.\n\n Lustre.Ui.Accordion.view\n [ Lustre.Ui.Accordion.multiple, Lustre.Ui.Accordion.loop True ]\n [ Lustre.Ui.Accordion.item \"...\"\n []\n (Lustre.Ui.Accordion.heading []\n [ Lustre.Ui.Accordion.trigger [] [ Html.span [] [ Html.text \"...\" ] ] ]\n )\n (Lustre.Ui.Accordion.panel []\n [ Html.p [] [ Html.text \"...\" ]\n , Lustre.Ui.Accordion.close [] [ Html.text \"...\" ]\n ]\n )\n , Lustre.Ui.Accordion.item \"...\"\n []\n (Lustre.Ui.Accordion.heading []\n [ Lustre.Ui.Accordion.trigger [] [ Html.span [] [ Html.text \"...\" ] ] ]\n )\n (Lustre.Ui.Accordion.panel []\n [ Html.p [] [ Html.text \"...\" ]\n , Lustre.Ui.Accordion.close [] [ Html.text \"...\" ]\n ]\n )\n ]\n\n\n### Force item open\n\nBy explicitly setting the `open` attribute on an accordion item, it becomes\ncontrolled and will always be open unless the the `open` attribute is changed.\nThis lets you pin certain items open or closed regardless of user interaction.\n\n Lustre.Ui.Accordion.view\n [ Lustre.Ui.Accordion.open True ]\n [ Lustre.Ui.Accordion.item \"...\"\n [ Lustre.Ui.Accordion.open True ]\n (Lustre.Ui.Accordion.heading []\n [ Lustre.Ui.Accordion.trigger [] [ Html.text \"...\" ] ]\n )\n (Lustre.Ui.Accordion.panel [] [ todo ])\n , Lustre.Ui.Accordion.item \"...\"\n []\n (Lustre.Ui.Accordion.heading []\n [ Lustre.Ui.Accordion.trigger [] [ Html.text \"...\" ] ]\n )\n (Lustre.Ui.Accordion.panel [] [ Html.text \"...\" ])\n ]\n\n\n## Types\n\n@docs AccordionItem, AccordionPanel, AccordionTrigger\n\n\n## Elements\n\n@docs view, item, heading, trigger, panel, close\n\n\n## Attributes\n\n@docs label, loop, open, default_open, value, default_value, single, multiple, horizontal, vertical, level\n\n\n## Events\n\n@docs on_value_change, on_open_change, on_show, on_hide\n\n","unions":[{"name":"AccordionItem","comment":" ","args":["a"],"cases":[]},{"name":"AccordionPanel","comment":" ","args":["a"],"cases":[]},{"name":"AccordionTrigger","comment":" ","args":["a"],"cases":[]}],"aliases":[],"values":[{"name":"close","comment":" The optional accordion close trigger can be placed within the panel content\nto provide an additional way to collapse the containing accordion item without\nnavigating back to the item header.\n\n\n#### Tag\n\n```html\n\n```\n\n\n#### Attributes\n\n[`label`](#label).\n\n\n#### Styling\n\nThis element has a default display of `inline`.\n\nThe following CSS custom states can be used to style this element:\n\n - `:state(open)` is applied when the containing accordion item is expanded.\n\n\n#### Managed attributes\n\nThe following attributes **must not** be set manually on the accordion, as\nthese are managed by the component and are necessary for accessibility:\n\n - `aria-controls`\n - `aria-expanded`\n - `role`\n\n","type":"List.List (Html.Attribute a) -> List.List (Html.Html a) -> Html.Html a"},{"name":"default_open","comment":" Set whether an individual [accordion item](#item) is open by default when\nfirst rendered in an _uncontrolled_ accordion. This value is only taken into\naccount if the containing accordion does not have its own [`default_value`](#default_value)\nattribute.\n","type":"Basics.Bool -> Html.Attribute a"},{"name":"default_value","comment":" Set the default open items for an _uncontrolled_ accordion. This is a list\nof item names that should be open when the accordion first renders.\n\n> **Note**: an uncontrolled component is responsible for managing its own state\n> and subsequent changes to the `default_value` will not be reflected in the\n> component after the initial render.\n>\n> To control the accordion's state from your application, use the [`value`](#value)\n> attribute instead.\n\n","type":"List.List String.String -> Html.Attribute a"},{"name":"heading","comment":" An accordion heading heading contains the trigger button for an accordion\nitem as its only child.\n\n\n#### Tag\n\n```html\n\n```\n\n\n#### Attributes\n\n[`level`](#level).\n\n\n#### Styling\n\nThis element has a default display of `block`.\n\nThe following CSS custom states can be used to style this element:\n\n - `:state(open)` is applied when the containing accordion item is expanded.\n\n\n#### Managed attributes\n\nThe following attributes **must not** be set manually on the heading, as\nthese are managed by the component and are necessary for accessibility:\n\n - `role`\n\n","type":"List.List (Html.Attribute a) -> Lustre.Ui.Accordion.AccordionTrigger a -> Html.Html a"},{"name":"horizontal","comment":" Set an [accordion's](#view) orientation to horizontal. This changes keyboard\nnavigation to use Arrow Left and Right keys instead of Up and Down.\n","type":"Html.Attribute a"},{"name":"item","comment":" Each accordion item represents a single collapsible section within the\naccordion. It must have a unique name within the accordion to identify it.\n\n\n#### Tag\n\n```html\n\n```\n\n\n#### Attributes\n\n[`default_open`](#default_open), [`open`](#open).\n\n\n#### Events\n\n[`on_hide`](#on_hide), [`on_open_change`](#on_open_change), [`on_show`](#on_show).\n\n\n#### Styling\n\nThis element has a default display of `block`.\n\nThe following CSS custom states can be used to style this element:\n\n - `:state(open)` is applied when the accordion item is expanded.\n\n","type":"String.String -> List.List (Html.Attribute a) -> Html.Html a -> Lustre.Ui.Accordion.AccordionPanel a -> Lustre.Ui.Accordion.AccordionItem a"},{"name":"label","comment":" Provides an accessible label to an [accordion](#view) or an [item trigger](#trigger).\nWhen used on an accordion, it is announced by assistive technologies to help\nidentify the accordion.\n\nIt should be used on an accordion item trigger if the trigger's content does\nnot contain that can be used to automatically generate an accessible label.\n\nIn both cases, the label is used for assistive technolgies only and is not\nvisible to sighted users.\n\n","type":"String.String -> Html.Attribute a"},{"name":"level","comment":" Set the heading level for an accordion item's [heading](#heading). This sets\nthe `aria-level` attribute on the heading element to help assistive technologies\nunderstand the structure of the page. The value is clamped between 1 and 9.\n","type":"Basics.Int -> Html.Attribute a"},{"name":"loop","comment":" Controls whether keyboard navigation in an [accordion](#view) loops from the\nlast item back to the first and vice versa.\n","type":"Basics.Bool -> Html.Attribute a"},{"name":"multiple","comment":" Allow multiple accordion items to be open at the same time.\n","type":"Html.Attribute a"},{"name":"on_hide","comment":" An event emitted by an individual [accordion item](#item) when it is collapsed.\n\n> **Note**: like other DOM events, this event bubbles and can be listened for\n> on the containing accordion.\n\n","type":"(String.String -> a) -> Html.Attribute a"},{"name":"on_open_change","comment":" An event emitted by an individual [accordion item](#item) when its open state\nchanges. The handler is passed the name of the item and its new open state.\n\n> **Note**: like other DOM events, this event bubbles and can be listened for\n> on the containing accordion.\n\n","type":"(( String.String, Basics.Bool ) -> a) -> Html.Attribute a"},{"name":"on_show","comment":" An event emitted by an individual [accordion item](#item) when it is expanded.\n\n> **Note**: like other DOM events, this event bubbles and can be listened for\n> on the containing accordion.\n\n","type":"(String.String -> a) -> Html.Attribute a"},{"name":"on_value_change","comment":" An event emitted by an [accordion](#view) when the open state of any of its\nitems changes. The handler is passed a list of the names of all currently\nopen items.\n\nIn a controlled accordion, this event should be used to update your application\nstate with the new open items. Your application may ignore this event to\nprevent the open state of the accordion from changing.\n\nIn an uncontrolled accordion, this event can be used to respond to changes\nin the accordion's open state, for example by loading content dynamically when\nan item is opened.\n\n","type":"(List.List String.String -> a) -> Html.Attribute a"},{"name":"open","comment":" Set the open state of an individual [accordion item](#item), making it\ncontrolled by your application and overriding any state managed by the\ncontaining accordion.\n\nWhere possible, it is preferable to manage the open state of accordion items\ncentrally using the [`value`](#value) attribute on the containing accordion,\nbut this attribute can be useful when you need to pin certain items open or\nclosed regardless of user interaction.\n\n> **Note**: in a controlled component, the state is managed by your application\n> and must be updated in response to user interaction by handling the\n> [`on_open_change`](#on_open_change) event.\n>\n> To set whether an accordion item is initially open when first rendered,\n> consider using the [`default_open`](#default_open) attribute instead.\n\n","type":"Basics.Bool -> Html.Attribute a"},{"name":"panel","comment":" The accordion panel contains the collapsible content for the containing\naccordion item.\n\n\n#### Tag\n\n```html\n\n```\n\n\n#### Styling\n\nThis element has a default display of `block`.\n\nThe following CSS custom states can be used to style this element:\n\n - `:state(open)` is applied when the containing accordion item is expanded.\n\nThe following CSS custom properties can be used to style this element or\nits children:\n\n - `--accordion-panel-width`\n - `--accordion-panel-height`\n\n\n#### Accessibility notes\n\nWhen the panel is collapsed, any content within is made [inert](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/inert).\nThis prevents focus from moving into the hidden content and ensures screen\nreaders and other assistive technologies do not announce it. Because of this,\nit's important to make sure that the accordion panel is made _visually hidden_\nwhen collapsed so that sighted users do not try to interact with the panel's\ncontent.\n\n\n#### Managed attributes\n\nThe following attributes **must not** be set manually on the accordion, as\nthese are managed by the component and are necessary for accessibility:\n\n - `aria-labelledby`\n\n","type":"List.List (Html.Attribute a) -> List.List (Html.Html a) -> Lustre.Ui.Accordion.AccordionPanel a"},{"name":"single","comment":" Constrain an accordion to only allow a single item to be open at a time.\n","type":"Html.Attribute a"},{"name":"trigger","comment":" The accordion trigger is the button that toggles the open state of an\naccordion item. It must not contain any other interactive elements.\n\n\n#### Tag\n\n```html\n\n```\n\n\n#### Attributes\n\n[`label`](#label).\n\n\n#### Styling\n\nThe following CSS custom states can be used to style this element:\n\n - `:state(open)` is applied when the containing accordion item is expanded.\n\n\n#### Managed attributes\n\nThe following attributes **must not** be set manually on the accordion, as\nthese are managed by the component and are necessary for accessibility:\n\n - `aria-controls`\n - `aria-expanded`\n - `role`\n\n","type":"List.List (Html.Attribute a) -> List.List (Html.Html a) -> Lustre.Ui.Accordion.AccordionTrigger a"},{"name":"value","comment":" Set the current open items for a _controlled_ accordion.\n\n> **Note**: in a controlled component, the state is managed by your application\n> and must be updated in response to user interaction by handling the\n> [`on_value_change`](#on_value_change) or [`on_open_change`](#on_open_change)\n> events.\n>\n> To let the component manage its own state, use the [`default_value`](#default_value)\n> attribute to set the initial open items instead.\n\n","type":"List.List String.String -> Html.Attribute a"},{"name":"vertical","comment":" Set an [accordion's](#view) orientation to vertical. This is the default\nbehaviour for an accordion and uses Arrow Up and Down keys for keyboard\nnavigation.\n","type":"Html.Attribute a"},{"name":"view","comment":" The root accordion element is a container for multiple accordion items.\n\n\n#### Tag\n\n```html\n\n```\n\n\n#### Attributes\n\n[`default_value`](#default_value), [`horizontal`](#horizontal), [`label`](#label),\n[`loop`](#loop), [`multiple`](#multiple), [`single`](#single), [`value`](#value),\n[`vertical`](#vertical).\n\n\n#### Events\n\n[`on_value_change`](#on_value_change)\n\n\n#### Styling\n\nThis element has a default display of `block`.\n\n\n#### Accessibility notes\n\nThe accordion supports keyboard navigation between accordion item triggers\nusing the following keys _in addition_ to the standard tabbing behaviour:\n\n - Home moves focus to the first accordion item trigger.\n - End moves focus to the last accordion item trigger.\n - When in a vertical accordion...\n - Arrow Up moves focus to the previous accordion item trigger.\n - Arrow Down moves focus to the next accordion item trigger.\n - When in a horizontal accordion...\n - Arrow Left moves focus to the previous accordion item trigger.\n - Arrow Right moves focus to the next accordion item trigger.\n\nAuthors may provide an accessible [`label`](#label) for the accordion to\nhelp assistive technologies identify it, but this is not required.\n\n\n#### Managed attributes\n\nThe following attributes **must not** be set manually on the accordion, as\nthese are managed by the component and are necessary for accessibility:\n\n - `role`\n\n","type":"List.List (Html.Attribute a) -> List.List (Lustre.Ui.Accordion.AccordionItem a) -> Html.Html a"}],"binops":[]},{"name":"Lustre.Ui.Tabs","comment":" Tabs are made up of one or more panels of content each with an associated\ntrigger. Only one panel is visible at a time, and can be changed by selecting\nthe associated trigger.\n\n Lustre.Ui.Tabs.view []\n (Lustre.Ui.Tabs.list []\n [ Lustre.Ui.Tabs.trigger \"wibble\" [] [ Html.text \"Wibble\" ]\n , Lustre.Ui.Tabs.trigger \"wobble\" [] [ Html.text \"Wobble\" ]\n , Lustre.Ui.Tabs.indicator [] []\n ]\n )\n (Lustre.Ui.Tabs.content []\n [ Lustre.Ui.Tabs.panel \"wibble\" [] [ Html.text \"Wibble content...\" ]\n , Lustre.Ui.Tabs.panel \"wobble\" [] [ Html.text \"Wobble content...\" ]\n ]\n )\n\n - [`tabs.view`](#view) is the root container for the tab triggers and\n panels. It controls the current active tab.\n\n - The [`tabs.list`](#list) is a container for one or more tab triggers. It\n manages keyboard interaction and focus between the triggers.\n\n - Each [`tabs.trigger`](#trigger) is a button that activates its associated\n panel. It must not contain any other interactive children.\n\n - The [`tabs.indicator`](#indicator) can be styled to match the position of\n the currently active tab. It is typically animated for smooth transitions.\n\n - [`tabs.content`](#content) is a container for one or more tab panels.\n\n - Each [`tabs.panel`](#panel) is a container for content that corresponds to\n one trigger. When the associated trigger is active, that panel's content\n will be visible.\n\n\n## Accessibility\n\nThe tabs component follows the WAI-ARIA Authoring Practices for the\n[tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/). This means\nappropriate roles, ARIA attributes, and keyboard interactions are handled for\nyou, including:\n\n - `role` \"tablist\" on the tabs list container with managed `aria-orientation`\n for horizontal or vertical layouts.\n\n - `role` \"tab\" on each tab trigger, with managed `aria-selected`, `aria-controls`,\n and `tabindex` attributes.\n\n - `role` \"tabpanel\" on each tab panel, with managed `aria-labelledby` and\n content visibility.\n\n - `role` \"presentation\" on the tabs indicator.\n\n - Keyboard interactions for navigating between tab triggers using Arrow Up/Down,\n Arrow Left/Right, Home, and End keys, as well as the ability to activate\n tabs when focus moves (automatic activation) or when a tab is selected with\n Enter or Space (manual activation).\n\n - Retention of focus when the active panel changes.\n\n\n## Recipes\n\nYou can use these recipes as starting points for common tabs configurations.\nCopy and paste them into your apps and adapt them as needed!\n\n\n### Basic use\n\nThe basic scaffold for using the tabs component. In this default configuration,\nthe state of the active tab is uncontrolled and managed internally by the\ncomponent.\n\n Lustre.Ui.Tabs.view []\n (Lustre.Ui.Tabs.list []\n [ Lustre.Ui.Tabs.trigger \"wibble\" [] [ Debug.todo \"...\" ]\n , Lustre.Ui.Tabs.trigger \"wobble\" [] [ Debug.todo \"...\" ]\n ]\n )\n (Lustre.Ui.Tabs.content []\n [ Lustre.Ui.Tabs.panel \"wibble\" [] [ Debug.todo \"...\" ]\n , Lustre.Ui.Tabs.panel \"wobble\" [] [ Debug.todo \"...\" ]\n ]\n )\n\n\n## Types\n\n@docs TabsContent, TabsList, TabsListItem, TabsPanel\n\n\n## Elements\n\n@docs view, list, trigger, indicator, content, panel\n\n\n## Attributes\n\n@docs value, default_value, horizontal, vertical, automatic_activation, loop\n\n\n## Events\n\n@docs on_value_change, on_select, on_open, on_close\n\n","unions":[{"name":"TabsContent","comment":" ","args":["a"],"cases":[]},{"name":"TabsList","comment":" ","args":["a"],"cases":[]},{"name":"TabsListItem","comment":" ","args":["a"],"cases":[]},{"name":"TabsPanel","comment":" ","args":["a"],"cases":[]}],"aliases":[],"values":[{"name":"automatic_activation","comment":" It is possible to configure how tabs are activated when using the keyboard\nto navigate between tab triggers. By default, tabs use automatic activation,\nmeaning that when a tab trigger receives focus, it is automatically activated.\n\nThis behaviour can be disabled by setting this attribute to `False`. Manual\nactivation requires the user to press Enter or Space (or use a pointer device\nto click) to activate the focused tab trigger.\n\n> **Note**: it is important to consider the accessibility implications of\n> enabling or disabling automatic activation. The Web Accessibility Initiative\n> (WAI) have [some guidelines](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_selection_follows_focus)\n> on which option to prefer and when.\n\n","type":"Basics.Bool -> Html.Attribute a"},{"name":"content","comment":" The content element contains one or more [panels](#panels) and manages which\nis visible based on the currently active tab.\n\n\n#### Tag\n\n```html\n\n```\n\n\n#### Events\n\n[`on_open`](#on_open), [`on_close`](#on_close).\n\n\n#### Styling\n\nThis element has a default display of `block`.\n\n","type":"List.List (Html.Attribute a) -> List.List (Lustre.Ui.Tabs.TabsPanel a) -> Lustre.Ui.Tabs.TabsContent a"},{"name":"default_value","comment":" Set the default active tab for _uncontrolled_ tabs. This should correspond to\nthe name of one of the [tab triggers](#trigger) present in the [tabs list](#list).\n\n> **Note**: an uncontrolled component is responsible for managing its own state\n> and subsequent changes to the `default_value` will not be reflected in the\n> component after the initial render.\n>\n> To control the tabs component's state from your application, use the [`value`](#value)\n> attribute instead.\n\n","type":"String.String -> Html.Attribute a"},{"name":"horizontal","comment":" Set a [tabs list's](#list) orientation to horizontal. This changes how keyboard\nnavigation between tab triggers works, using Left/Right arrow keys instead of\nUp/Down arrow keys. This is the default orientation for tabs lists.\n","type":"Html.Attribute a"},{"name":"indicator","comment":" A visual indicator that can be styled to match the size and position of the\ncurrently active tab.\n\n\n#### Tag\n\n```html\n\n```\n\n\n#### Styling\n\nThis element has a default display of `inline`.\n\nThe following CSS custom properties can be used to style this element or\nits children:\n\n - `--indicator-x`\n - `--indicator-y`\n - `--indicator-width`\n - `--indicator-height`\n\n\n#### Accessibility notes\n\nThe indicator should only be used as a visual aid for sighted users. It should\nnot contain any meaningful content or interactive elements as it will be\nignored by assistive technologies and unavigable via keyboard.\n\n\n#### Managed attributes\n\nThe following attributes **must not** be set manually on the element, as\nthese are managed by the component and are necessary for accessibility:\n\n - `role`\n\n","type":"List.List (Html.Attribute a) -> List.List (Html.Html a) -> Lustre.Ui.Tabs.TabsListItem a"},{"name":"list","comment":" The tabs list is a container for one or more tab triggers. It manages keyboard\ninteraction and focus between the triggers.\n\n\n#### Tag\n\n```html\n\n```\n\n\n#### Attributes\n\n[`automatic_activation`](#automatic_activation), [`horizontal`](#horizontal),\n[`loop`](#loop), [`vertical`](#vertical).\n\nOn attributes that are valid for both this element and the [root tabs](#view)\nelement, attributes set directly on this element will take precedence.\n\n\n#### Events\n\n[`on_select`](#on_select).\n\n\n#### Styling\n\nThis element has a default display of `block`.\n\n\n#### Managed attributes\n\nThe following attributes **must not** be set manually on the element, as\nthese are managed by the component and are necessary for accessibility:\n\n - `aria-orientation`\n - `role`\n\n","type":"List.List (Html.Attribute a) -> List.List (Lustre.Ui.Tabs.TabsListItem a) -> Lustre.Ui.Tabs.TabsList a"},{"name":"loop","comment":" Controls whether keyboard navigation in a [tabs list](#list) loops from the\nlast tab back to the first and vice versa.\n","type":"Basics.Bool -> Html.Attribute a"},{"name":"on_close","comment":" An event emitted by an individual [panel](#panel) when it is hidden.\n\n> **Note**: like other DOM events, this event bubbles and can be listened for\n> on the containing accordion.\n\n","type":"(String.String -> a) -> Html.Attribute a"},{"name":"on_open","comment":" An event emitted by an individual [panel](#panel) when it is first made\nvisible.\n\n> **Note**: like other DOM events, this event bubbles and can be listened for\n> on the containing accordion.\n\n","type":"(String.String -> a) -> Html.Attribute a"},{"name":"on_select","comment":" An event emitted by the [tabs list](#list) when a tab trigger is activated.\nThis does not account for the current active tab, so multiple select events\nmay be emitted without the active tab changing.\n\n> **Note**: like other DOM events, this event bubbles and can be listened for\n> on the containing accordion.\n\n","type":"(String.String -> a) -> Html.Attribute a"},{"name":"on_value_change","comment":" An event emitted by the root [tabs](#view) element when the active tab changes.\nThis will only be emitted when the active tab actually changes, not when the\nsame tab is re-selected.\n\nIn a controlled tabs, this event should be used to update your application\nstate with the new active tab. Your application may ignore this event to\nprevent the open state of the tabs from changing.\n\nIn an uncontrolled tabs, this event can be used to respond to changes\nin the tabs' open state, for example by loading content dynamically when\na trigger is activated.\n\n","type":"(String.String -> a) -> Html.Attribute a"},{"name":"panel","comment":" A panel is a container for content that corresponds to one trigger. When the\nassociated trigger is active, that panel's content will be visible.\n\nEach panel inside the [`tabs.content`](#content) container must have a unique\nname that matches one of the triggers inside the [`tabs.list`](#list) container.\nDuplicate names, names without an associated trigger, or empty names will be\nignored.\n\n\n#### Tag\n\n```html\n\n```\n\n\n#### Events\n\n[`on_open`](#on_open), [`on_close`](#on_close).\n\n\n#### Styling\n\nThis element has a default display of `block`.\n\nThe following CSS custom states can be used to style this element:\n\n - `:state(active)` is applied when the panel is active and visible.\n\n\n#### Accessibility notes\n\nWhen a panel is active it is automatically assigned a tabindex of `0` if it\nhas no interactive children. This is important to make sure the panel itself\nis included in the tab sequence of the page.\n\nIf a panel does not have an explicit `id` attribute set, it will be assigned\none automatically. This is necessary to establish the `aria-controls` relationship\non the trigger.\n\n\n#### Managed attributes\n\nThe following attributes **must not** be set manually on the element, as\nthese are managed by the component and are necessary for accessibility:\n\n - `aria-labelledby`\n - `role`\n - `tabindex`\n\n","type":"String.String -> List.List (Html.Attribute a) -> List.List (Html.Html a) -> Lustre.Ui.Tabs.TabsPanel a"},{"name":"trigger","comment":" A tabs trigger is a button that activates its associated panel. It must not\ncontain any other interactive children.\n\n\n#### Tag\n\n```html\n\n```\n\n\n#### Events\n\n> **Note**: only the parent [tabs list](#list) will emit the [`on_select`](#on_select)\n> event. To listen for activation of an individual trigger, you can listen for\n> standard events like `click` or `keydown`.\n\n\n#### Styling\n\nThis element has a default display of `inline`.\n\nThe following CSS custom states can be used to style this element:\n\n - `:state(active)` is applied when the active tab matches this trigger's name.\n\n\n#### Managed attributes\n\nThe following attributes **must not** be set manually on the element, as\nthese are managed by the component and are necessary for accessibility:\n\n - `aria-controls`\n - `aria-selected`\n - `role`\n - `tabindex`\n\n","type":"String.String -> List.List (Html.Attribute a) -> List.List (Html.Html a) -> Lustre.Ui.Tabs.TabsListItem a"},{"name":"value","comment":" Set the current active tab for _controlled_ tabs.\n\n> **Note**: in a controlled component, the state is managed by your application\n> and must be updated in response to user interaction by handling the\n> [`on_value_change`](#on_value_change) or [`on_select`](#on_select) events.\n>\n> To let the component manage its own state, use the [`default_value`](#default_value)\n> attribute to set the initial active tab instead.\n\n","type":"String.String -> Html.Attribute a"},{"name":"vertical","comment":" Set a [tabs list's](#list) orientation to vertical. This changes how keyboard\nnavigation between tab triggers works, using Up/Down arrow keys instead of\nLeft/Right arrow keys.\n","type":"Html.Attribute a"},{"name":"view","comment":" The root tabs element is a container for both the list of triggers and the\nmain tabs content.\n\n\n#### Tag\n\n```html\n\n```\n\n\n#### Attributes\n\n[`automatic_activation`](#automatic_activation), [`default_value`](#default_value),\n[`horizontal`](#horizontal), [`loop`](#loop, [`value`](#value),\n[`vertical`](#vertical).\n\n\n#### Events\n\n[`on_value_change`](#on_value_change), [`on_select`](#on_select),\n[`on_open`](#on_open), [`on_close`](#on_close).\n\n\n#### Styling\n\nThis element has a default display of `block`.\n\n","type":"List.List (Html.Attribute a) -> Lustre.Ui.Tabs.TabsList a -> Lustre.Ui.Tabs.TabsContent a -> Html.Html a"}],"binops":[]},{"name":"Lustre.Ui.Toggle","comment":" A toggle is a special kind of two-state button that can either on or off.\nUnlike the native checkbox element, a toggle must be styled appropriately to\ncommunicate on/off status to sighted users.\n\n Lustre.Ui.Toggle.view [] [ Html.text \"B\" ]\n\n Lustre.Ui.Toggle.group []\n [ Lustre.Ui.Toggle.item \"b\" [] [ Html.text \"B\" ]\n , Lustre.Ui.Toggle.item \"i\" [] [ Html.text \"I\" ]\n ]\n\n - [`toggle.view`](#view) is an individual toggle button. When activated it\n toggles between pressed and unpressed states.\n\n - [`toggle.group`](#group) is a container for one or more toggle items. It\n manages selection state among its children - similar to a radio group -\n and handles keyboard navigation between them.\n\n - Each [`toggle.item`](#item) in a group is an individual toggle button with\n a unique value that identifies it within the group.\n\n\n## Accessibility\n\nThe toggle component follows the WAI-ARIA Authoring Practices for the\n[toggle button pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/).\nThis means appropriate roles and ARIA attributes are handled for you,\nincluding:\n\n - `role` \"button\" on the toggle element, as well as managed `aria-pressed`\n and `aria-disabled` attributes.\n\n - `role` \"group\" on the toggle group element, as well as managed `aria-orientation`.\n\n\n## Usage notes\n\nBecause a toggle has no innate indicator of its pressed state, it's essential\nthat any toggle has appropriate visual styling to communicate its state to\nsighted users.\n\nToggles and toggle groups can participate in HTML form submission the same\nas native form controls by giving the control a [`name`](https://hexdocs.pm/lustre/lustre/attribute.html#name).\n\n\n## Types\n\n@docs Item\n\n\n## Elements\n\n@docs view, group, item\n\n\n## Attributes\n\n@docs disabled, default_pressed, pressed, value, default_selected, selected, loop\n\n\n## Events\n\n@docs on_press, on_selected_change\n\n","unions":[{"name":"Item","comment":" ","args":["a"],"cases":[]}],"aliases":[],"values":[{"name":"default_pressed","comment":" Set whether an individual [toggle](#root) is pressed when it is first rendered.\nThis is only useful for uncontrolled toggles or for server-side rendering. To\ncontrol the pressed state of a toggle in your app, use the [`pressed`](#pressed)\nattribute instead.\n\n> **Note**: an uncontrolled component is responsible for managing its own state\n> and subsequent changes to `default_pressed` will not be reflected in the\n> component after the initial render.\n>\n> To control the toggle component's state from your application, use the\n> [`pressed`](#pressed) attribute instead.\n\n","type":"Basics.Bool -> Html.Attribute a"},{"name":"default_selected","comment":" Set the default selected item in a [toggle group](#group) by value. This is\nonly useful for uncontrolled groups or for server-side rendering. To control\nthe selected item in your app, use the [`selected`](#selected) attribute instead.\n","type":"Maybe.Maybe String.String -> Html.Attribute a"},{"name":"disabled","comment":" Disable a [toggle](#root) or [toggle group](#group). Disabled toggles cannot\nbe interacted with and should be styled appropriately to communicate this to\nsighted users. When a group is disabled, the user will still be able to navigate\nto each item using the keyboard, but they will not be able to activate any of\nthe items.\n","type":"Basics.Bool -> Html.Attribute a"},{"name":"group","comment":" A group of toggle buttons. Only one toggle may be pressed at a time.\n\n\n#### Tag\n\n```html\n\n```\n\n\n#### Attributes\n\n[`default_pressed`](#default_pressed), [`disabled`](#disabled), [`loop`](#loop),\n[`pressed`](#pressed), [`value`](#value).\n\n\n#### Events\n\n[`on_selected_change`](#on_selected_change).\n\n\n#### Styling\n\nThis element has a default display of `inline`.\n\nThe following CSS custom states can be used to style this element:\n\n - `:state(disabled)` is applied when the entire group is disabled.\n\n\n#### Accessibility notes\n\nThe toggle group supports keyboard navigation between individual toggles\nusing the following keys _instead of_ to the standard tabbing behaviour:\n\n - When in a vertical group...\n - Arrow Up moves focus to the previous toggle.\n - Arrow Down moves focus to the next toggle.\n - When in a horizontal group...\n - Arrow Left moves focus to the previous toggle.\n - Arrow Right moves focus to the next toggle.\n\n\n#### Managed attributes\n\nThe following attributes **must not** be set manually on the element, as\nthese are managed by the component and are necessary for accessibility:\n\n - `aria-orientation`\n - `role`\n\n","type":"List.List (Html.Attribute a) -> List.List (Lustre.Ui.Toggle.Item a) -> Html.Html a"},{"name":"item","comment":" An individual toggle as part of a [`group`](#group). Each item should have a\nunique value in the group: empty or duplicate values will be ignored.\n\nFor more detailed documentation, refer to the [`toggle.view`](#view) element.\n\n","type":"String.String -> List.List (Html.Attribute a) -> List.List (Html.Html a) -> Lustre.Ui.Toggle.Item a"},{"name":"loop","comment":" When `True`, the loop attribute allows users to cycle through the toggle\nitems in a group by navigating past the first or last item using the keyboard.\n\n> **Note**: be mindful of the accessibility implications of this attribute.\n> If the toggle group exists inside another container that also relies on\n> keyboard navigation, like a menu or toolbar, you may trap users inside\n> the toggle group by enabling looping.\n\n","type":"Basics.Bool -> Html.Attribute a"},{"name":"on_press","comment":" An event emitted by individual [toggles](#view) when they are pressed.\n\n> **Note**: like other DOM events, this event bubbles and can be listened for\n> on a parent [toggle group](#group).\n\n","type":"(Basics.Bool -> a) -> Html.Attribute a"},{"name":"on_selected_change","comment":" This event is emitted by a [toggle group](#group) when any of its child items\nare pressed. The provided handler is called with either the value of the\npressed item, or `None` if an already-selected item is deselected.\n","type":"(Maybe.Maybe String.String -> a) -> Html.Attribute a"},{"name":"pressed","comment":" Sets the pressed state for a _controlled_ toggle.\n\n> **Note**: in a controlled component, the state is managed by your application\n> and must be updated in response to user interaction by handling the\n> [`on_press`](#on_press) event.\n>\n> To let the component manage its own state, use the [`default_pressed`](#default_pressed)\n> attribute to set the initial pressed state of a toggle instead.\n\n","type":"Basics.Bool -> Html.Attribute a"},{"name":"selected","comment":" Set the selected item in a _controlled_ [toggle group](#group) by its value,\nor `None` to clear any selection.\n\n> **Note**: in a controlled component, the state is managed by your application\n> and must be updated in response to user interaction by handling the\n> [`on_selected_change`](#on_selected_change) event.\n\n","type":"Maybe.Maybe String.String -> Html.Attribute a"},{"name":"value","comment":" Sets the value to be included in form submission for a pressed [toggle](#view).\nIf this attribute is not set, a toggle behaves like a HTML checkbox input and\nsends the value `\"on\"` when pressed.\n","type":"String.String -> Html.Attribute a"},{"name":"view","comment":" An individual toggle button. When activated it toggles between pressed and\nunpressed states.\n\n\n#### Tag\n\n```html\n\n```\n\n\n#### Attributes\n\n[`default_pressed`](#default_pressed), [`disabled`](#disabled), [`pressed`](#pressed),\n[`value`](#value).\n\n\n#### Events\n\n[`on_press`](#on_press).\n\n\n#### Styling\n\nThis element has a default display of `inline`.\n\nThe following CSS custom states can be used to style this element:\n\n - `:state(pressed)` is applied when the toggle is pressed.\n - `:state(disabled)` is applied when the toggle is disabled.\n\n\n#### Accessibility notes\n\nA toggle can receive focus and be activated using the keyboard by pressing\neither the Enter or Space keys.\n\nThe toggle must have an accessible text label for non-sighted uses. This can\nbe text content inside the toggle element itself, an associated `