[{"name":"Material.Button","comment":" Buttons allow users to take actions and make choices with a single tap.\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Configuration](#configuration)\n      - [Configuration Options](#configuration-options)\n  - [Button Variants](#button-variants)\n  - [Button with Icons](#button-with-icons)\n      - [Button with Leading Icon](#button-with-leading-icon)\n      - [Button with Trailing Icon](#button-with-trailing-icon)\n  - [Disabled Button](#disabled-button)\n  - [Dense Button](#disabled-button)\n  - [Link Button](#link-button)\n\n\n# Resources\n\n  - [Demo: Buttons](https://aforemny.github.io/material-components-web-elm/#buttons)\n  - [Material Design Guidelines: Button](https://material.io/go/design-buttons)\n  - [MDC Web: Button](https://github.com/material-components/material-components-web/tree/master/packages/mdc-button)\n  - [Sass Mixins (MDC Web)](https://github.com/material-components/material-components-web/tree/master/packages/mdc-button#sass-mixins)\n\n\n# Basic Usage\n\n    import Material.Button as Button\n\n    type Msg\n        = Clicked\n\n    main =\n        Button.text\n            (Button.config |> Button.setOnClick Clicked)\n            \"Text\"\n\n\n# Configuration\n\n@docs Config, config\n\n\n## Configuration Options\n\n@docs setOnClick\n@docs setIcon, setTrailingIcon\n@docs setDisabled\n@docs setDense\n@docs setHref, setTarget\n@docs setAttributes\n\n\n# Button Variants\n\nButtons may appear in different variants. Use `text` or `outlined` if you want\na button that is flush with the surface, and use `raised` or `unelevated` for a\nbutton that is contained.\n\n@docs text, outlined, raised, unelevated\n\n\n# Button with Icons\n\nTo add an icon to a button, use its `setIcon` configuration option to specify\nthe name of a [Material Icon](https://material.io/icons). If you want the icon\nto be positioned after the button's label, also set the `setTrailingIcon`\nconfiguration option to `True`.\n\n\n## Button with Leading Icon\n\n    Button.text\n        (Button.config |> Button.setIcon (Just \"favorite\"))\n        \"Like\"\n\n\n## Button with Trailing Icon\n\n    Button.text\n        (Button.config\n            |> Button.setIcon (Just \"favorite\")\n            |> Button.setTrailingIcon True\n        )\n        \"Like\"\n\n\n# Disabled Button\n\nTo disable a button, use its `setDisabled` configuration option. Disabled\nbuttons cannot be interacted with and have no visual interaction effect.\n\n    Button.text\n        (Button.config |> Button.setDisabled True)\n        \"Disabled\"\n\n\n# Dense Button\n\nTo make a button's text and container margins slightly smaller, use its `setDense`\nconfiguration option.\n\n    Button.text\n        (Button.config |> Button.setDense True)\n        \"Dense\"\n\n\n# Link Button\n\nTo make a button essentially behave like a HTML anchor element, use its\n`setHref` configution option. You may use its `setTarget` configuration option\nto specify a target.\n\n    Button.text\n        (Button.config\n            |> Button.setHref (Just \"https://elm-lang.org\")\n        )\n        \"Visit\"\n\nNote that link buttons cannot be disabled.\n\n","unions":[],"aliases":[{"name":"Config","comment":" Configuration of a button\n","args":["msg"],"type":"Material.Button.Internal.Config msg"}],"values":[{"name":"config","comment":" Default configuration of a button\n","type":"Material.Button.Config msg"},{"name":"outlined","comment":" Outlined button variant (flush with outline)\n","type":"Material.Button.Config msg -> String.String -> Html.Html msg"},{"name":"raised","comment":" Raised button variant (contained with elevation)\n","type":"Material.Button.Config msg -> String.String -> Html.Html msg"},{"name":"setAttributes","comment":" Specify additional attributes\n","type":"List.List (Html.Attribute msg) -> Material.Button.Config msg -> Material.Button.Config msg"},{"name":"setDense","comment":" Specify whether a button is _dense_\n\nDense buttons feature smaller than normal padding.\n\n","type":"Basics.Bool -> Material.Button.Config msg -> Material.Button.Config msg"},{"name":"setDisabled","comment":" Specify whether the button is disabled\n\nDisabled buttons cannot be interacted with and do not have no visual\ninteraction effect.\n\n","type":"Basics.Bool -> Material.Button.Config msg -> Material.Button.Config msg"},{"name":"setHref","comment":" Specify whether a button is a _link button_.\n\nLink buttons behave like normal HTML5 anchor tags. Note that link buttons\ncannot be disabled and ignore that configuration option.\n\n","type":"Maybe.Maybe String.String -> Material.Button.Config msg -> Material.Button.Config msg"},{"name":"setIcon","comment":" Specify whether the button features an icon\n","type":"Maybe.Maybe String.String -> Material.Button.Config msg -> Material.Button.Config msg"},{"name":"setOnClick","comment":" Specify a message when the user clicks a button\n","type":"msg -> Material.Button.Config msg -> Material.Button.Config msg"},{"name":"setTarget","comment":" Specify the target for a link button.\n\nNote that this configuration option will be ignored by buttons that do not also\nset `setHref`.\n\n","type":"Maybe.Maybe String.String -> Material.Button.Config msg -> Material.Button.Config msg"},{"name":"setTrailingIcon","comment":" Specify whether a button's icon is a _trailing icon_.\n\nTrailing icons are displayed after the button's label rather than before.\n\n","type":"Basics.Bool -> Material.Button.Config msg -> Material.Button.Config msg"},{"name":"text","comment":" Text button variant (flush without outline)\n","type":"Material.Button.Config msg -> String.String -> Html.Html msg"},{"name":"unelevated","comment":" Unelevated button variant (contained without elevation)\n","type":"Material.Button.Config msg -> String.String -> Html.Html msg"}],"binops":[]},{"name":"Material.Card","comment":" Cards contain content and actions about a single subject.\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Configuration](#configuration)\n      - [Configuration Options](#configuration-options)\n  - [Card](#card)\n      - [Outlined card](#outlined-card)\n  - [Card Blocks](#card-blocks)\n      - [Generic Block](#generic-block)\n      - [Media Block](#media-block)\n      - [Primary Action Block](#primary-action-block)\n  - [Card Actions](#card-actions)\n      - [Full Bleed Actions](#full-bleed-actions)\n\n\n# Resources\n\n  - [Demo: Cards](https://aforemny.github.io/material-components-web-elm/#cards)\n  - [Material Design Guidelines: Cards](https://material.io/go/design-cards)\n  - [MDC Web: Card](https://github.com/material-components/material-components-web/tree/master/packages/mdc-card)\n  - [Sass Mixins (MDC Web)](https://github.com/material-components/material-components-web/tree/master/packages/mdc-card#sass-mixins)\n\n\n# Basic Usage\n\n    import Html exposing (Html, text)\n    import Material.Button as Button\n    import Material.Card as Card\n    import Material.IconButton as IconButton\n\n    main =\n        Card.card Card.config\n            { blocks =\n                [ Card.block <|\n                    Html.div []\n                        [ Html.h2 [] [ text \"Title\" ]\n                        , Html.h3 [] [ text \"Subtitle\" ]\n                        ]\n                , Card.block <|\n                    Html.div []\n                        [ Html.p [] [ text \"Lorem ipsum…\" ] ]\n                ]\n            , actions =\n                Just <|\n                    Card.actions\n                        { buttons =\n                            [ Card.button Button.config \"Visit\" ]\n                        , icons =\n                            [ Card.icon IconButton.config\n                                \"favorite\"\n                            ]\n                        }\n            }\n\n\n# Configuration\n\n@docs Config, config\n\n\n## Configuration Options\n\n@docs setOutlined\n@docs setAttributes\n\n\n# Card\n\n@docs card, Content\n\n\n## Outlined Card\n\nA card may display a border by setting its `setOutlined` configuration option\nto `True`.\n\n    Card.card\n        (Card.config |> Card.setOutlined True)\n        { blocks =\n            [ Card.block <|\n                Html.div [] [ Html.h1 [] [ text \"Card\" ] ]\n            ]\n        , actions = Nothing\n        }\n\n\n# Card Blocks\n\nA card's primary content is comprised of _blocks_. Blocks may be comprised of\narbitrary HTML or a media element. Optionally, a group of card blocks can be\nmarked as the card's primary action which makes that group of blocks\ninteractable.\n\n@docs Block\n\n\n## Generic Block\n\nGeneric card blocks are the most common and allow you to specify card content\nusing arbitrary HTML. Note that you will have to carefully adjust styling such\nas padding and typography yourself.\n\n    Card.block <|\n        Html.div []\n            [ Html.h2 [] [ text \"Title\" ]\n            , Html.h3 [] [ text \"Subtitle\" ]\n            ]\n\n@docs block\n\n\n## Media Block\n\nCards may contain a media block usually as the first content block. The media\nwill be displayed using a background image, and you may chose from square or a\n16 to 9 aspect ratio.\n\n@docs squareMedia, sixteenToNineMedia, media\n\n\n## Primary Action Block\n\nA group of card blocks can be marked as the primary action of the card. A\nprimary action block may be clicked upon and displays a visual interaction\neffect.\n\n    Card.primaryAction\n        [ Html.Events.onClick CardClicked ]\n        [ Card.block <|\n            Html.h2 [] [ text \"Title\" ]\n        , Card.block <|\n            Html.p [] [ text \"Lorem ipsum…\" ]\n        ]\n\n@docs primaryAction\n\n\n# Card Actions\n\nCard actions are comprised of buttons and icons. These are exposed as variants\nto the standard buttons and icons, but they do share the same configuration.\n\n    Card.actions\n        { buttons =\n            [ Card.button Button.config \"View\" ]\n        , icons =\n            [ Card.icon IconButton.config \"favorite\" ]\n        }\n\n@docs Actions, actions\n@docs Button, button\n@docs Icon, icon\n\n\n## Card Full Bleed Actions\n\nWhile a card's action buttons are usually left-aligned, a special case exists\nwhen there is only a single button as card action.\n\n@docs fullBleedActions\n\n","unions":[{"name":"Actions","comment":" Card actions type\n","args":["msg"],"cases":[]},{"name":"Block","comment":" A card's content block\n","args":["msg"],"cases":[]},{"name":"Button","comment":" Card action's button type\n","args":["msg"],"cases":[]},{"name":"Config","comment":" Configuration of a card\n","args":["msg"],"cases":[]},{"name":"Icon","comment":" Card action's icon type\n","args":["msg"],"cases":[]}],"aliases":[{"name":"Content","comment":" The content of a card is comprised of _blocks_ and _actions_.\n","args":["msg"],"type":"{ blocks : List.List (Material.Card.Block msg), actions : Maybe.Maybe (Material.Card.Actions msg) }"}],"values":[{"name":"actions","comment":" Card actions\n\nA card may contain as actions buttons as well as icons.\n\n","type":"{ buttons : List.List (Material.Card.Button msg), icons : List.List (Material.Card.Icon msg) } -> Material.Card.Actions msg"},{"name":"block","comment":" Card block containing arbitrary HTML\n\n    Card.block <|\n        Html.div [] [ text \"Lorem ipsum…\" ]\n\n","type":"Html.Html msg -> Material.Card.Block msg"},{"name":"button","comment":" A card action button\n\n    Card.button Button.config \"Visit\"\n\n","type":"Material.Button.Config msg -> String.String -> Material.Card.Button msg"},{"name":"card","comment":" Card view function\n","type":"Material.Card.Config msg -> Material.Card.Content msg -> Html.Html msg"},{"name":"config","comment":" Default configuration of a card\n","type":"Material.Card.Config msg"},{"name":"fullBleedActions","comment":" Card full bleed action\n\nIf a card's action is comprised of a single button, that button can be made\nfull width by using `cardFullBleedActions`.\n\n    Card.fullBleedActions\n        (Card.button Button.config \"Visit\")\n\n","type":"Material.Card.Button msg -> Material.Card.Actions msg"},{"name":"icon","comment":" Card action icon\n\n    Card.icon IconButton.config \"favorite\"\n\n","type":"Material.IconButton.Config msg -> String.String -> Material.Card.Icon msg"},{"name":"media","comment":" Card media block of unspecified aspect ratio\n","type":"List.List (Html.Attribute msg) -> String.String -> Material.Card.Block msg"},{"name":"primaryAction","comment":" A card's primary action block\n","type":"List.List (Html.Attribute msg) -> List.List (Material.Card.Block msg) -> List.List (Material.Card.Block msg)"},{"name":"setAttributes","comment":" Specify additional attributes\n","type":"List.List (Html.Attribute msg) -> Material.Card.Config msg -> Material.Card.Config msg"},{"name":"setOutlined","comment":" Specify whether a card should have a visual outline\n","type":"Basics.Bool -> Material.Card.Config msg -> Material.Card.Config msg"},{"name":"sixteenToNineMedia","comment":" Card media block with a 16:9 aspect ratio\n","type":"List.List (Html.Attribute msg) -> String.String -> Material.Card.Block msg"},{"name":"squareMedia","comment":" Card media block with a square aspect ratio\n","type":"List.List (Html.Attribute msg) -> String.String -> Material.Card.Block msg"}],"binops":[]},{"name":"Material.Checkbox","comment":" Checkboxes allow the user to select one or more items from a set.\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Configuration](#configuration)\n      - [Configuration Options](#configuration-options)\n  - [Checkbox](#checkbox)\n  - [Checked Checkbox](#checked-Checkbox)\n  - [Indeterminate Checkbox](#indeterminate-checkbox)\n  - [Disabled Checkbox](#disabled-checkbox)\n\n\n# Resources\n\n  - [Demo: Checkboxes](https://aforemny.github.io/material-components-web-elm/#checkbox)\n  - [Material Design Guidelines: Selection Controls – Checkbox](https://material.io/go/design-checkboxes)\n  - [MDC Web: Checkbox](https://github.com/material-components/material-components-web/tree/master/packages/mdc-checkbox)\n  - [Sass Mixins (MDC Web)](https://github.com/material-components/material-components-web/tree/master/packages/mdc-checkbox#sass-mixins)\n\n\n# Basic Usage\n\nNote that checkboxes are usually used in conjunction with form fields. Refer to\n[FormField](Material-FormField) for more information.\n\n    import Material.Checkbox as Checkbox\n\n    type Msg\n        = Changed\n\n    main =\n        Checkbox.checkbox\n            (Checkbox.config\n                |> Checkbox.setState (Just Checkbox.unchecked)\n                |> Checkbox.setOnChange Changed\n            )\n\n\n# Configuration\n\n@docs Config, config\n\n\n## Configuration Options\n\n@docs setOnChange\n@docs State, setState\n@docs setDisabled\n@docs setAttributes\n\n\n# Checkbox\n\n@docs checkbox\n\n\n# Checked Checkbox\n\nTo set the state of a checkbox, use its `setState` configuration option.\n\n    Checkbox.checkbox\n        (Checkbox.config\n            |> Checkbox.setState (Just Checkbox.checked)\n        )\n\n@docs checked, unchecked\n\n\n# Indeterminate Checkbox\n\nTo set the state of a checkbox, use its `setState` configuration option.\n\n    Checkbox.checkbox\n        (Checkbox.config\n            |> Checkbox.setState (Just Checkbox.indeterminate)\n        )\n\n@docs indeterminate\n\n\n# Disabled Checkbox\n\nTo disable a checkbox, use its `setDisabled` configuration option. Disabled\ncheckboxes cannot be interacted with and have no visual interaction effect.\n\n    Checkbox.checkbox\n        (Checkbox.config |> Checkbox.setDisabled True)\n\n","unions":[],"aliases":[{"name":"Config","comment":" Configuration of a checkbox\n","args":["msg"],"type":"Material.Checkbox.Internal.Config msg"},{"name":"State","comment":" State of a checkbox\n","args":[],"type":"Material.Checkbox.Internal.State"}],"values":[{"name":"checkbox","comment":" Checkbox view function\n","type":"Material.Checkbox.Config msg -> Html.Html msg"},{"name":"checked","comment":" Checked state\n","type":"Material.Checkbox.State"},{"name":"config","comment":" Default configuration of a checkbox\n","type":"Material.Checkbox.Config msg"},{"name":"indeterminate","comment":" Indeterminate state\n","type":"Material.Checkbox.State"},{"name":"setAttributes","comment":" Specify additional attributes\n","type":"List.List (Html.Attribute msg) -> Material.Checkbox.Config msg -> Material.Checkbox.Config msg"},{"name":"setDisabled","comment":" Specify whether a checkbox is disabled\n\nDisabled checkboxes cannot be interacted with and have no visual interaction\neffect.\n\n","type":"Basics.Bool -> Material.Checkbox.Config msg -> Material.Checkbox.Config msg"},{"name":"setOnChange","comment":" Specify a message when the user changes a checkbox\n","type":"msg -> Material.Checkbox.Config msg -> Material.Checkbox.Config msg"},{"name":"setState","comment":" Specify a checkbox' state\n\nA checkbox may be in `checked`, `unchecked` or `indeterminate` state.\n\n","type":"Maybe.Maybe Material.Checkbox.State -> Material.Checkbox.Config msg -> Material.Checkbox.Config msg"},{"name":"unchecked","comment":" Unchecked state\n","type":"Material.Checkbox.State"}],"binops":[]},{"name":"Material.Chip.Choice","comment":" Chips are compact elements that allow users to enter information, select a\nchoice, filter content, or trigger an action.\n\nChoice chips are a variant of chips which allow single selection from a set of\noptions.\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Configuration](#configuration)\n      - [Configuration Options](#configuration-options)\n  - [Choice Chips](#choice-chips)\n\n\n# Resources\n\n  - [Demo: Chips](https://aforemny.github.io/material-components-web-elm/#chips)\n  - [Material Design Guidelines: Chips](https://material.io/go/design-chips)\n  - [MDC Web: Chips](https://github.com/material-components/material-components-web/tree/master/packages/mdc-chips)\n  - [Sass Mixins (MDC Web)](https://github.com/material-components/material-components-web/tree/master/packages/mdc-chips#sass-mixins)\n\n\n# Basic Usage\n\n    import Material.Chip.Choice as ChoiceChip\n\n    type Msg\n        = ChipClicked String\n\n    main =\n        ChoiceChip.set []\n            [ ChoiceChip.chip\n                (ChoiceChip.config\n                    |> ChoiceChip.setSelected True\n                    |> ChoiceChip.setOnClick (ChipClicked \"One\")\n                )\n                \"Chip One\"\n            , ChoiceChip.chip\n                (ChoiceChip.config\n                    |> ChoiceChip.setOnClick (ChipClicked \"Two\")\n                )\n                \"Chip Two\"\n            ]\n\n\n# Configuration\n\n@docs Config, config\n\n\n## Configuration Options\n\n@docs setOnClick\n@docs setIcon\n@docs setSelected\n@docs setAttributes\n\n\n# Choice Chips\n\n@docs set, chip, Chip\n\n","unions":[{"name":"Chip","comment":" Choice chip type\n","args":["msg"],"cases":[]},{"name":"Config","comment":" Configuration of a choice chip\n","args":["msg"],"cases":[]}],"aliases":[],"values":[{"name":"chip","comment":" Choice chip view function\n","type":"Material.Chip.Choice.Config msg -> String.String -> Material.Chip.Choice.Chip msg"},{"name":"config","comment":" Default configuration of a choice chip\n","type":"Material.Chip.Choice.Config msg"},{"name":"set","comment":" Choice chip container\n","type":"List.List (Html.Attribute msg) -> List.List (Material.Chip.Choice.Chip msg) -> Html.Html msg"},{"name":"setAttributes","comment":" Specify additional attributes\n","type":"List.List (Html.Attribute msg) -> Material.Chip.Choice.Config msg -> Material.Chip.Choice.Config msg"},{"name":"setIcon","comment":" Specify whether the chip displays an icon\n","type":"Maybe.Maybe String.String -> Material.Chip.Choice.Config msg -> Material.Chip.Choice.Config msg"},{"name":"setOnClick","comment":" Specify a message when the user clicks on a chip\n","type":"msg -> Material.Chip.Choice.Config msg -> Material.Chip.Choice.Config msg"},{"name":"setSelected","comment":" Specify whether a chip is selected\n","type":"Basics.Bool -> Material.Chip.Choice.Config msg -> Material.Chip.Choice.Config msg"}],"binops":[]},{"name":"Material.Chip.Filter","comment":" Chips are compact elements that allow users to enter information, select a\nchoice, filter content, or trigger an action.\n\nFilter chips are a variant of chips which allow multiple selection from a set\nof options. When a filter chip is selected, a checkmark appears as the leading\nicon. If the chip already has a leading icon, the checkmark replaces it.\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Configuration](#configuration)\n      - [Configuration Options](#configuration-options)\n  - [Filter Chips](#filter-chips)\n\n\n# Resources\n\n  - [Demo: Chips](https://aforemny.github.io/material-components-web-elm/#chips)\n  - [Material Design Guidelines: Chips](https://material.io/go/design-chips)\n  - [MDC Web: Chips](https://github.com/material-components/material-components-web/tree/master/packages/mdc-chips)\n  - [Sass Mixins (MDC Web)](https://github.com/material-components/material-components-web/tree/master/packages/mdc-chips#sass-mixins)\n\n\n# Basic Usage\n\n    import Material.Chip.Filter as FilterChip\n\n    type Msg\n        = ChipClicked String\n\n    main =\n        FilterChip.set []\n            [ FilterChip.chip\n                (FilterChip.config\n                    |> FilterChip.setSelected True\n                    |> FilterChip.setOnClick\n                        (ChipClicked \"Tops\")\n                )\n                \"Tops\"\n            , FilterChip.chip\n                (FilterChip.config\n                    |> FilterChip.setOnClick\n                        (ChipClicked \"Shoes\")\n                )\n                \"Shoes\"\n            ]\n\n\n# Configuration\n\n@docs Config, config\n\n\n## Configuration Options\n\n@docs setOnClick\n@docs setIcon\n@docs setSelected\n@docs setAttributes\n\n\n# Filter Chips\n\n@docs set, chip, Chip\n\n","unions":[{"name":"Chip","comment":" Filter chip type\n","args":["msg"],"cases":[]},{"name":"Config","comment":" Configuration of a filter chip\n","args":["msg"],"cases":[]}],"aliases":[],"values":[{"name":"chip","comment":" Filter chip view function\n","type":"Material.Chip.Filter.Config msg -> String.String -> Material.Chip.Filter.Chip msg"},{"name":"config","comment":" Default configuration of a filter chip\n","type":"Material.Chip.Filter.Config msg"},{"name":"set","comment":" Filter chip container\n","type":"List.List (Html.Attribute msg) -> List.List (Material.Chip.Filter.Chip msg) -> Html.Html msg"},{"name":"setAttributes","comment":" Specify additional attributes\n","type":"List.List (Html.Attribute msg) -> Material.Chip.Filter.Config msg -> Material.Chip.Filter.Config msg"},{"name":"setIcon","comment":" Specify whether a chip displays an icon\n","type":"Maybe.Maybe String.String -> Material.Chip.Filter.Config msg -> Material.Chip.Filter.Config msg"},{"name":"setOnClick","comment":" Specify a message when the user clicks on a chip\n","type":"msg -> Material.Chip.Filter.Config msg -> Material.Chip.Filter.Config msg"},{"name":"setSelected","comment":" Specify whether a chip is selected\n","type":"Basics.Bool -> Material.Chip.Filter.Config msg -> Material.Chip.Filter.Config msg"}],"binops":[]},{"name":"Material.Chip.Input","comment":" Chips are compact elements that allow users to enter information, select a\nchoice, filter content, or trigger an action.\n\nInput chips are a variant of chips which enable user input by converting text\ninto chips.\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Configuration](#configuration)\n      - [Configuration Options](#configuration-options)\n  - [Input Chips](#input-chips)\n\n\n# Resources\n\n  - [Demo: Chips](https://aforemny.github.io/material-components-web-elm/#chips)\n  - [Material Design Guidelines: Chips](https://material.io/go/design-chips)\n  - [MDC Web: Chips](https://github.com/material-components/material-components-web/tree/master/packages/mdc-chips)\n  - [Sass Mixins (MDC Web)](https://github.com/material-components/material-components-web/tree/master/packages/mdc-chips#sass-mixins)\n\n\n# Basic Usage\n\n    import Material.Chip.Input as InputChip\n\n    type Msg\n        = ChipSelected String\n\n    main =\n        InputChip.set []\n            [ InputChip.chip InputChip.config \"Chip One\"\n            , InputChip.chip InputChip.config \"Chip Two\"\n            ]\n\n\n# Configuration\n\n@docs Config, config\n\n\n## Configuration Options\n\n@docs setOnClick\n@docs setOnTrailingIconClick\n@docs setIcon\n@docs setAttributes\n\n\n# Input Chips\n\n@docs set, chip, Chip\n\n","unions":[{"name":"Chip","comment":" Input chip type\n","args":["msg"],"cases":[]},{"name":"Config","comment":" Configuration of an input chip\n","args":["msg"],"cases":[]}],"aliases":[],"values":[{"name":"chip","comment":" Input chip view function\n","type":"Material.Chip.Input.Config msg -> String.String -> Material.Chip.Input.Chip msg"},{"name":"config","comment":" Default configuration of an input chip\n","type":"Material.Chip.Input.Config msg"},{"name":"set","comment":" Input chip container\n","type":"List.List (Html.Attribute msg) -> List.List (Material.Chip.Input.Chip msg) -> Html.Html msg"},{"name":"setAttributes","comment":" Specify additional attributes\n","type":"List.List (Html.Attribute msg) -> Material.Chip.Input.Config msg -> Material.Chip.Input.Config msg"},{"name":"setIcon","comment":" Specify whether a chip displays an icon\n","type":"Maybe.Maybe String.String -> Material.Chip.Input.Config msg -> Material.Chip.Input.Config msg"},{"name":"setOnClick","comment":" Specify a message when the user clicks on a chip\n","type":"msg -> Material.Chip.Input.Config msg -> Material.Chip.Input.Config msg"},{"name":"setOnTrailingIconClick","comment":" Specify a message when the user clicks on a chip's trailing icon\n","type":"msg -> Material.Chip.Input.Config msg -> Material.Chip.Input.Config msg"}],"binops":[]},{"name":"Material.DataTable","comment":" Data tables display information in a way that’s easy to scan, so that users\ncan look for patterns and insights.\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Configution](#configuration)\n      - [Configuration Options](#configuration-options)\n  - [Basic Usage](#basic-usage)\n  - [Data Table](#data-table)\n  - [Row](#row)\n      - [Selected Row](#selected-row)\n  - [Cell](#cell)\n      - [Numeric Cell](#numeric-cell)\n      - [Checkbox Cell](#checkbox-cell)\n\n\n# Resources\n\n  - [Demo: Data Table](https://aforemny.github.io/material-components-web-elm/#data-table)\n  - [Material Design Guidelines: Data tables](https://material.io/go/design-data-tables)\n  - [MDC Web: Data Table](https://github.com/material-components/material-components-web/tree/master/packages/mdc-data-table)\n  - [Sass Mixins (MDC Web)](https://github.com/material-components/material-components-web/tree/master/packages/mdc-data-table#sass-mixins)\n\n\n# Basic Usage\n\n    import Material.DataTable as DataTable\n\n    main =\n        DataTable.dataTable DataTable.config\n            { thead =\n                [ DataTable.row []\n                    [ DataTable.cell [] [ text \"Desert\" ] ]\n                ]\n            , tbody =\n                [ DataTable.row []\n                    [ DataTable.cell [] [ text \"Frozen yogurt\" ]\n                    ]\n                ]\n            }\n\n\n# Configuration\n\n@docs Config, config\n\n\n## Configuration Options\n\n@docs setLabel\n@docs setAttributes\n\n\n# Data Table\n\n@docs dataTable\n\n\n# Row\n\n@docs Row, row\n\n\n## Selected Row\n\n    DataTable.row DataTable.selected []\n\n@docs selected\n\n\n# Cell\n\n@docs Cell, cell\n\n\n## Numeric Cell\n\n    DataTable.numericCell [] [ text \"9.000,00\" ]\n\n@docs numericCell\n\n\n## Checkbox Cell\n\n    import Material.Checkbox as Checkbox\n\n    DataTable.checkboxCell [] Checkbox.config\n\n@docs checkboxCell\n\n","unions":[{"name":"Cell","comment":" Cell type\n","args":["msg"],"cases":[]},{"name":"Config","comment":" Configuration of a data table\n","args":["msg"],"cases":[]},{"name":"Row","comment":" Row type\n","args":["msg"],"cases":[]}],"aliases":[],"values":[{"name":"cell","comment":" Data table cell\n","type":"List.List (Html.Attribute msg) -> List.List (Html.Html msg) -> Material.DataTable.Cell msg"},{"name":"checkboxCell","comment":" Data table cell that contians a checkbox\n","type":"List.List (Html.Attribute msg) -> Material.Checkbox.Config msg -> Material.DataTable.Cell msg"},{"name":"config","comment":" Default configuration of a data table\n","type":"Material.DataTable.Config msg"},{"name":"dataTable","comment":" Data table view function\n","type":"Material.DataTable.Config msg -> { thead : List.List (Material.DataTable.Row msg), tbody : List.List (Material.DataTable.Row msg) } -> Html.Html msg"},{"name":"numericCell","comment":" Numeric data table cell (right-aligned contents)\n","type":"List.List (Html.Attribute msg) -> List.List (Html.Html msg) -> Material.DataTable.Cell msg"},{"name":"row","comment":" Row view function\n","type":"List.List (Html.Attribute msg) -> List.List (Material.DataTable.Cell msg) -> Material.DataTable.Row msg"},{"name":"selected","comment":" Attribute to mark a row as selected\n\nThis has no effect on a header row.\n\nNote that this is a list of attributes because it actually sets two HTML\nattributes at once.\n\n","type":"List.List (Html.Attribute msg)"},{"name":"setAttributes","comment":" Specify additional attributes\n","type":"List.List (Html.Attribute msg) -> Material.DataTable.Config msg -> Material.DataTable.Config msg"},{"name":"setLabel","comment":" Specify the data table's HTML5 aria-label attribute\n","type":"Maybe.Maybe String.String -> Material.DataTable.Config msg -> Material.DataTable.Config msg"}],"binops":[]},{"name":"Material.Dialog","comment":" Dialogs inform users about a task and can contain critical information,\nrequire decisions, or involve multiple tasks.\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Configuration](#configuration)\n      - [Configuration Options](#configuration-options)\n  - [Dialog](#dialog)\n\n\n# Resources\n\n  - [Demo: Dialogs](https://aforemny.github.io/material-components-web-elm/#dialog)\n  - [Material Design Guidelines: Dialogs](https://material.io/go/design-dialogs)\n  - [MDC Web: Dialog](https://github.com/material-components/material-components-web/tree/master/packages/mdc-dialog)\n  - [Sass Mixins (MDC Web)](https://github.com/material-components/material-components-web/tree/master/packages/mdc-dialog#sass-mixins)\n\n\n# Basic Usage\n\n    import Material.Button as Button\n    import Material.Dialog as Dialog\n\n    type Msg\n        = Closed\n\n    main =\n        Dialog.dialog\n            (Dialog.config\n                |> Dialog.setOpen True\n                |> Dialog.setOnClose Closed\n            )\n            { title = Nothing\n            , content = [ text \"Discard draft?\" ]\n            , actions =\n                [ Button.text\n                    (Button.config |> Button.setOnClick Closed)\n                    \"Cancel\"\n                , Button.text\n                    (Button.config |> Button.setOnClick Closed)\n                    \"Discard\"\n                ]\n            }\n\n\n# Configuration\n\n@docs Config, config\n\n\n## Configuration Options\n\n@docs setOnClose\n@docs setOpen\n@docs setAttributes\n\n\n# Dialog\n\n@docs dialog, Content\n\n","unions":[{"name":"Config","comment":" Configuration of a dialog\n","args":["msg"],"cases":[]}],"aliases":[{"name":"Content","comment":" Dialog content\n","args":["msg"],"type":"{ title : Maybe.Maybe String.String, content : List.List (Html.Html msg), actions : List.List (Html.Html msg) }"}],"values":[{"name":"config","comment":" Default configuration of a dialog\n","type":"Material.Dialog.Config msg"},{"name":"dialog","comment":" Dialog view function\n","type":"Material.Dialog.Config msg -> Material.Dialog.Content msg -> Html.Html msg"},{"name":"setAttributes","comment":" Specify additional attributes\n","type":"List.List (Html.Attribute msg) -> Material.Dialog.Config msg -> Material.Dialog.Config msg"},{"name":"setOnClose","comment":" Specify a message when the user closes the dialog\n","type":"msg -> Material.Dialog.Config msg -> Material.Dialog.Config msg"},{"name":"setOpen","comment":" Specify whether a dialog is open\n","type":"Basics.Bool -> Material.Dialog.Config msg -> Material.Dialog.Config msg"}],"binops":[]},{"name":"Material.Drawer.Dismissible","comment":" The drawer is used to organize access to destinations and\nother functionality on an app.\n\nDismissible drawers are by default hidden off screen, and can slide into view.\nDismissible drawers should be used when navigation is not common, and the main\napp content is prioritized.\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Configuration](#configuration)\n      - [Configuration Options](#configuration-options)\n  - [Dismissible Drawer](#dismissible-drawer)\n  - [Drawer with Header](#drawer-with-header)\n\n\n# Resources\n\n  - [Demo: Drawers](https://aforemny.github.io/material-components-web-elm/#drawer)\n  - [Material Design Guidelines: Navigation Drawer](https://material.io/go/design-navigation-drawer)\n  - [MDC Web: List](https://github.com/material-components/material-components-web/tree/master/packages/mdc-drawer)\n  - [Sass Mixins (MDC Web)](https://github.com/material-components/material-components-web/tree/master/packages/mdc-drawer#sass-mixins)\n\n\n# Basic Usage\n\n    import Html exposing (Html, text)\n    import Html.Attributes exposing (style)\n    import Material.Drawer.Dismissible as DismissibleDrawer\n    import Material.List as List\n    import Material.ListItem as ListItem\n\n    main =\n        Html.div\n            [ style \"display\" \"flex\"\n            , style \"flex-flow\" \"row nowrap\"\n            ]\n            [ DismissibleDrawer.drawer DismissibleDrawer.config\n                [ DismissibleDrawer.content []\n                    [ List.list List.config\n                        [ ListItem.listItem ListItem.config\n                            [ text \"Home\" ]\n                        , ListItem.listItem ListItem.config\n                            [ text \"Log out\" ]\n                        ]\n                    ]\n                ]\n            , Html.div [ DismissibleDrawer.appContent ]\n                [ text \"Main Content\" ]\n            ]\n\n\n# Configuration\n\n@docs Config, config\n\n\n## Configuration Options\n\n@docs setOnClose\n@docs setOpen\n@docs setAttributes\n\n\n# Dismissible Drawer\n\n@docs drawer, content\n@docs appContent\n\n\n# Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the\ndrawer content. Things like account switchers and titles should live in the\nheader element.\n\n@docs header, title, subtitle\n\n","unions":[{"name":"Config","comment":" Configuration of a dismissible drawer\n","args":["msg"],"cases":[]}],"aliases":[],"values":[{"name":"appContent","comment":" Dismissible drawer's app content marker\n\nApply this attribute to the page's content for the open/close animation to\nwork. The page content has to be the next sibling of the dismissible drawer.\n\n","type":"Html.Attribute msg"},{"name":"config","comment":" Default configuration of a dismissible drawer\n","type":"Material.Drawer.Dismissible.Config msg"},{"name":"content","comment":" Drawer content\n","type":"List.List (Html.Attribute msg) -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"drawer","comment":" Dismissible drawer view function\n","type":"Material.Drawer.Dismissible.Config msg -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"header","comment":" Drawer header view function\n\n    DismissibleDrawer.drawer DismissibleDrawer.config\n        [ DismissibleDrawer.header []\n            [ Html.h3 [ DismissibleDrawer.title ]\n                [ text \"Title\" ]\n            , Html.h6 [ DismissibleDrawer.subtitle ]\n                [ text \"Subtitle\" ]\n            ]\n        , DismissibleDrawer.content [] []\n        ]\n\n","type":"List.List (Html.Attribute msg) -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"setAttributes","comment":" Specify additional attributes\n","type":"List.List (Html.Attribute msg) -> Material.Drawer.Dismissible.Config msg -> Material.Drawer.Dismissible.Config msg"},{"name":"setOnClose","comment":" Specify message when the user closes the drawer\n","type":"msg -> Material.Drawer.Dismissible.Config msg -> Material.Drawer.Dismissible.Config msg"},{"name":"setOpen","comment":" Specify whether the drawer is open\n","type":"Basics.Bool -> Material.Drawer.Dismissible.Config msg -> Material.Drawer.Dismissible.Config msg"},{"name":"subtitle","comment":" Attribute to mark the subtitle text element of the drawer header\n","type":"Html.Attribute msg"},{"name":"title","comment":" Attribute to mark the title text element of the drawer header\n","type":"Html.Attribute msg"}],"binops":[]},{"name":"Material.Drawer.Modal","comment":" The drawer is used to organize access to destinations and\nother functionality on an app.\n\nModal drawers are elevated above most of the app's UI and don't affect the\nscreen's layout grid.\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Configuration](#configuration)\n      - [Configuration Options](#configuration-options)\n  - [Modal Drawer](#modal-drawer)\n  - [Drawer with Header](#drawer-with-header)\n\n\n# Resources\n\n  - [Demo: Drawers](https://aforemny.github.io/material-components-web-elm/#drawer)\n  - [Material Design Guidelines: Navigation Drawer](https://material.io/go/design-navigation-drawer)\n  - [MDC Web: List](https://github.com/material-components/material-components-web/tree/master/packages/mdc-drawer)\n  - [Sass Mixins (MDC Web)](https://github.com/material-components/material-components-web/tree/master/packages/mdc-drawer#sass-mixins)\n\n\n# Basic Usage\n\n    import Html exposing (Html, text)\n    import Html.Attributes exposing (style)\n    import Material.Drawer.Modal as ModalDrawer\n    import Material.List as List\n    import Material.ListItem as ListItem\n\n    main =\n        Html.div\n            [ style \"display\" \"flex\"\n            , style \"flex-flow\" \"row nowrap\"\n            ]\n            [ ModalDrawer.drawer ModalDrawer.config\n                [ ModalDrawer.content []\n                    [ List.list List.config\n                        [ ListItem.listItem ListItem.config\n                            [ text \"Home\" ]\n                        , ListItem.listItem ListItem.config\n                            [ text \"Log out\" ]\n                        ]\n                    ]\n                ]\n            , ModalDrawer.scrim [] []\n            , Html.div [] [ text \"Main Content\" ]\n            ]\n\n\n# Configuration\n\n@docs Config, config\n\n\n## Configuration Options\n\n@docs setOnClose\n@docs setOpen\n@docs setAttributes\n\n\n# Modal Drawer\n\n@docs drawer, content\n@docs scrim\n\n\n# Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the\ndrawer content. Things like account switchers and titles should live in the\nheader element.\n\n@docs header, title, subtitle\n\n","unions":[{"name":"Config","comment":" Configuration of a model drawer\n","args":["msg"],"cases":[]}],"aliases":[],"values":[{"name":"config","comment":" Default configuration of a modal drawer\n","type":"Material.Drawer.Modal.Config msg"},{"name":"content","comment":" Drawer content\n","type":"List.List (Html.Attribute msg) -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"drawer","comment":" Modal drawer view function\n","type":"Material.Drawer.Modal.Config msg -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"header","comment":" Drawer header view function\n\n    ModalDrawer.drawer ModalDrawer.config\n        [ ModalDrawer.header []\n            [ Html.h3 [ ModalDrawer.title ] [ text \"Title\" ]\n            , Html.h6 [ ModalDrawer.subtitle ]\n                [ text \"Subtitle\" ]\n            ]\n        , ModalDrawer.content [] []\n        ]\n\n","type":"List.List (Html.Attribute msg) -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"scrim","comment":" Modal drawer's scrim element\n\nPrevents the application from interaction while the modal drawer is open. Has\nto be the next sibling after the `modalDrawer` and before the page's content.\n\n","type":"List.List (Html.Attribute msg) -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"setAttributes","comment":" Specify additional attributes\n","type":"List.List (Html.Attribute msg) -> Material.Drawer.Modal.Config msg -> Material.Drawer.Modal.Config msg"},{"name":"setOnClose","comment":" Specify message when the user closes the drawer\n","type":"msg -> Material.Drawer.Modal.Config msg -> Material.Drawer.Modal.Config msg"},{"name":"setOpen","comment":" Specify whether the drawer is open\n","type":"Basics.Bool -> Material.Drawer.Modal.Config msg -> Material.Drawer.Modal.Config msg"},{"name":"subtitle","comment":" Attribute to mark the subtitle text element of the drawer header\n","type":"Html.Attribute msg"},{"name":"title","comment":" Attribute to mark the title text element of the drawer header\n","type":"Html.Attribute msg"}],"binops":[]},{"name":"Material.Drawer.Permanent","comment":" The drawer is used to organize access to destinations and\nother functionality on an app.\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Configuration](#configuration)\n      - [Configuration Options](#configuration-options)\n  - [Permanent Drawer](#permanent-drawer)\n  - [Drawer with Header](#drawer-with-header)\n\n\n# Resources\n\n  - [Demo: Drawers](https://aforemny.github.io/material-components-web-elm/#drawer)\n  - [Material Design Guidelines: Navigation Drawer](https://material.io/go/design-navigation-drawer)\n  - [MDC Web: List](https://github.com/material-components/material-components-web/tree/master/packages/mdc-drawer)\n  - [Sass Mixins (MDC Web)](https://github.com/material-components/material-components-web/tree/master/packages/mdc-drawer#sass-mixins)\n\n\n# Basic Usage\n\n    import Html exposing (Html, text)\n    import Html.Attributes exposing (style)\n    import Material.Drawer.Permanent as PermanentDrawer\n    import Material.List as List\n    import Material.ListItem as ListItem\n\n    main =\n        Html.div\n            [ style \"display\" \"flex\"\n            , style \"flex-flow\" \"row nowrap\"\n            ]\n            [ PermanentDrawer.drawer PermanentDrawer.config\n                [ PermanentDrawer.content []\n                    [ List.list List.config\n                        [ ListItem.listItem ListItem.config\n                            [ text \"Home\" ]\n                        , ListItem.listItem ListItem.config\n                            [ text \"Log out\" ]\n                        ]\n                    ]\n                ]\n            , Html.div [] [ text \"Main Content\" ]\n            ]\n\n\n# Configuration\n\n@docs Config, config\n\n\n## Configuration Options\n\n@docs setAttributes\n\n\n# Permanent Drawer\n\n@docs drawer, content\n\n\n# Drawer with Header\n\nDrawers can contain a header element which will not scroll with the rest of the\ndrawer content. Things like account switchers and titles should live in the\nheader element.\n\n@docs header, title, subtitle\n\n","unions":[{"name":"Config","comment":" Configuration of a permanent drawer\n","args":["msg"],"cases":[]}],"aliases":[],"values":[{"name":"config","comment":" Default configuration of a permanent drawer\n","type":"Material.Drawer.Permanent.Config msg"},{"name":"content","comment":" Drawer content\n","type":"List.List (Html.Attribute msg) -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"drawer","comment":" Permanent drawer view function\n","type":"Material.Drawer.Permanent.Config msg -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"header","comment":" Drawer header view function\n\n    PermanentDrawer.drawer PermanentDrawer.config\n        [ PermanentDrawer.header []\n            [ Html.h3 [ PermanentDrawer.title ]\n                [ text \"Title\" ]\n            , Html.h6 [ PermanentDrawer.subtitle ]\n                [ text \"Subtitle\" ]\n            ]\n        , PermanentDrawer.content [] []\n        ]\n\n","type":"List.List (Html.Attribute msg) -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"setAttributes","comment":" Specify additional attributes\n","type":"List.List (Html.Attribute msg) -> Material.Drawer.Permanent.Config msg -> Material.Drawer.Permanent.Config msg"},{"name":"subtitle","comment":" Attribute to mark the subtitle text element of the drawer header\n","type":"Html.Attribute msg"},{"name":"title","comment":" Attribute to mark the title text element of the drawer header\n","type":"Html.Attribute msg"}],"binops":[]},{"name":"Material.Elevation","comment":" Shadows provide important visual cues about objects’ depth and directional\nmovement. They are the only visual cue indicating the amount of separation\nbetween surfaces. An object’s elevation determines the appearance of its\nshadow. The elevation values are mapped out in a \"z-space\" and range from 0\n(flush with the surface) to 24dp (most elevated).\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Elevation](#elevation)\n\n\n# Resources\n\n  - [Demo: Elevations](https://aforemny.github.io/material-components-web-elm/#elevation)\n  - [Material Design Guidelines: Shadows & elevation](https://material.io/go/design-elevation)\n  - [MDC Web: Elevation](https://github.com/material-components/material-components-web/tree/master/packages/mdc-elevation)\n  - [Sass Mixins (MDC Web)](https://github.com/material-components/material-components-web/tree/master/packages/mdc-elevation#sass-mixins-variables-and-functions)\n\n\n# Basic Usage\n\n    import Material.Elevation as Elevation\n\n    main =\n        Html.div [ Elevation.z8 ] [ text \"Elevation\" ]\n\n\n# Elevation\n\n@docs z0, z1, z2, z3, z4, z5, z6, z7, z8\n@docs z9, z10, z11, z12, z13, z14, z15, z16\n@docs z17, z18, z19, z20, z21, z22, z23, z24\n\n","unions":[],"aliases":[],"values":[{"name":"z0","comment":" 0dp elevation (no elevation)\n","type":"Html.Attribute msg"},{"name":"z1","comment":" 1dp elevation\n","type":"Html.Attribute msg"},{"name":"z10","comment":" 10dp elevation\n","type":"Html.Attribute msg"},{"name":"z11","comment":" 11dp elevation\n","type":"Html.Attribute msg"},{"name":"z12","comment":" 12dp elevation\n","type":"Html.Attribute msg"},{"name":"z13","comment":" 13dp elevation\n","type":"Html.Attribute msg"},{"name":"z14","comment":" 14dp elevation\n","type":"Html.Attribute msg"},{"name":"z15","comment":" 15dp elevation\n","type":"Html.Attribute msg"},{"name":"z16","comment":" 16dp elevation\n","type":"Html.Attribute msg"},{"name":"z17","comment":" 17dp elevation\n","type":"Html.Attribute msg"},{"name":"z18","comment":" 18dp elevation\n","type":"Html.Attribute msg"},{"name":"z19","comment":" 19dp elevation\n","type":"Html.Attribute msg"},{"name":"z2","comment":" 2dp elevation\n","type":"Html.Attribute msg"},{"name":"z20","comment":" 20dp elevation\n","type":"Html.Attribute msg"},{"name":"z21","comment":" 21dp elevation\n","type":"Html.Attribute msg"},{"name":"z22","comment":" 22dp elevation\n","type":"Html.Attribute msg"},{"name":"z23","comment":" 23dp elevation\n","type":"Html.Attribute msg"},{"name":"z24","comment":" 24dp elevation\n","type":"Html.Attribute msg"},{"name":"z3","comment":" 3dp elevation\n","type":"Html.Attribute msg"},{"name":"z4","comment":" 4dp elevation\n","type":"Html.Attribute msg"},{"name":"z5","comment":" 5dp elevation\n","type":"Html.Attribute msg"},{"name":"z6","comment":" 6dp elevation\n","type":"Html.Attribute msg"},{"name":"z7","comment":" 7dp elevation\n","type":"Html.Attribute msg"},{"name":"z8","comment":" 8dp elevation\n","type":"Html.Attribute msg"},{"name":"z9","comment":" 9dp elevation\n","type":"Html.Attribute msg"}],"binops":[]},{"name":"Material.Fab","comment":" A floating action button represents the primary action in an application.\n\nA floating action button only contains an icon to indicate its action. For a\nfloating action button that may contain text, refer to the [extended floating\naction button](Material-Fab-Extended).\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Configuration](#configuration)\n      - [Configuration Options](#configuration-options)\n  - [Floating Action Button](#floating-action-button)\n  - [Mini FAB](#mini-fab)\n  - [Exited FAB](#exited-fab)\n\n\n# Resources\n\n  - [Demo: Floating action buttons](https://aforemny.github.io/material-components-web-elm/#fab)\n  - [Material Design Guidelines: Floating Action Button](https://material.io/go/design-fab)\n  - [MDC Web: Floating Action Button](https://github.com/material-components/material-components-web/tree/master/packages/mdc-fab)\n  - [Sass Mixins (MDC Web)](https://github.com/material-components/material-components-web/tree/master/packages/mdc-fab#sass-mixins)\n\n\n# Basic Usage\n\nDevelopers are required to manually position the floating action button within\ntheir page layout, for instance by setting a fixed position via CSS.\n\n    import Html.Attributes exposing (style)\n    import Material.Fab as Fab\n\n    type Msg\n        = FabClicked\n\n    main =\n        Fab.fab\n            (Fab.config\n                |> Fab.setOnClick FabClicked\n                |> Fab.setAttributes\n                    [ style \"position\" \"fixed\"\n                    , style \"bottom\" \"2rem\"\n                    , style \"right\" \"2rem\"\n                    ]\n            )\n            \"favorite\"\n\n\n# Configuration\n\n@docs Config, config\n\n\n## Configuration Options\n\n@docs setOnClick\n@docs setMini\n@docs setExited\n@docs setAttributes\n\n\n# Floating Action Button\n\n@docs fab\n\n\n# Mini FAB\n\nIf you want the floating action button to appear in smaller size, set its\n`setMini` configuration option to `True`.\n\n    Fab.fab (Fab.config |> Fab.setMini True) \"favorite\"\n\n\n# Exited FAB\n\nIf you want the floating action button to transition off the screen, set its\n`setExited` configuration option to `True`.\n\n    Fab.fab (Fab.config |> Fab.setExited True) \"favorite\"\n\n","unions":[{"name":"Config","comment":" Floating action button configuration\n","args":["msg"],"cases":[]}],"aliases":[],"values":[{"name":"config","comment":" Default floating action button configuration\n","type":"Material.Fab.Config msg"},{"name":"fab","comment":" Floating action button view function\n","type":"Material.Fab.Config msg -> String.String -> Html.Html msg"},{"name":"setAttributes","comment":" Specify additional attributes\n","type":"List.List (Html.Attribute msg) -> Material.Fab.Config msg -> Material.Fab.Config msg"},{"name":"setExited","comment":" Specify whether a floating action button should transition off the screen\n","type":"Basics.Bool -> Material.Fab.Config msg -> Material.Fab.Config msg"},{"name":"setMini","comment":" Specify whether the floating actions button should be smaller than normally\n","type":"Basics.Bool -> Material.Fab.Config msg -> Material.Fab.Config msg"},{"name":"setOnClick","comment":" Specify a message when the user clicks the floating action button\n","type":"msg -> Material.Fab.Config msg -> Material.Fab.Config msg"}],"binops":[]},{"name":"Material.Fab.Extended","comment":" A floating action button represents the primary action in an application.\n\nAn extended floating action button primarily contains text to indicate its\naction, and optionally contains an icon. If you are looking for a floating\naction button that primarily contains an icon, and no text, refer to the\n[regular floating action button](Material-Fab).\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Configuration](#configuration)\n      - [Configuration Options](#configuration-options)\n  - [Extended Floating Action Button](#extended-floating-action-button)\n  - [Extended FAB with Icon](#extended-fab-with-icon)\n      - [Extended FAB with Leading Icon](#extended-fab-with-leading-icon)\n      - [Extended FAB with Trailing Icon](#extended-fab-with-trailing-icon)\n  - [Exited Extended FAB](#exited-extended-fab)\n\n\n# Resources\n\n  - [Demo: Floating action buttons](https://aforemny.github.io/material-components-web-elm/#fab)\n  - [Material Design Guidelines: Floating Action Button](https://material.io/go/design-fab)\n  - [MDC Web: Floating Action Button](https://github.com/material-components/material-components-web/tree/master/packages/mdc-fab)\n  - [Sass Mixins (MDC Web)](https://github.com/material-components/material-components-web/tree/master/packages/mdc-fab#sass-mixins)\n\n\n# Basic Usage\n\nDevelopers are required to manually position the floating action button within\ntheir page layout, for instance by setting a fixed position via CSS.\n\n    import Html.Attributes exposing (style)\n    import Material.Fab.Extended as ExtendedFab\n\n    type Msg\n        = Clicked\n\n    main =\n        ExtendedFab.fab\n            (ExtendedFab.config\n                |> ExtendedFab.setOnClick FabClicked\n                |> ExtendedFab.setAttributes\n                    [ style \"position\" \"fixed\"\n                    , style \"bottom\" \"2rem\"\n                    , style \"right\" \"2rem\"\n                    ]\n            )\n            \"Favorites\"\n\n\n## Configuration\n\n@docs Config, config\n\n\n### Configuration Options\n\n@docs setOnClick\n@docs setIcon, setTrailingIcon\n@docs setExited\n@docs setAttributes\n\n\n# Extended Floating Action Button\n\n@docs fab\n\n\n## Extended FAB with Icon\n\nTo add an icon to an extended floating action button, use its `setIcon`\nconfiguration option and specify the name of a [Material\nIcon](https://material.io/icons). If you want the icon to be positioned after\nthe button's label, also set its `setTrailingIcon` configuration option to\n`True`.\n\n\n### Extended FAB with Leading Icon\n\n    ExtendedFab.fab\n        (ExtendedFab.config\n            |> ExtendedFab.setIcon (Just \"favorite\")\n        )\n        \"Favorites\"\n\n\n### Extended FAB with Trailing Icon\n\n    ExtendedFab.fab\n        (ExtendedFab.config\n            |> ExtendedFab.setIcon (Just \"favorite\")\n            |> ExtendedFab.setTrailingIcon True\n        )\n        \"Favorites\"\n\n\n## Exited Extended FAB\n\nIf you want the extended floating action button to transition off the screen,\nset its `setExited` configuration option to `True`.\n\n    ExtendedFab.fab\n        (ExtendedFab.config |> ExtendedFab.setExited True)\n        \"Favorites\"\n\n","unions":[{"name":"Config","comment":" Extended floating action button configuration\n","args":["msg"],"cases":[]}],"aliases":[],"values":[{"name":"config","comment":" Default extended floating action button configuration\n","type":"Material.Fab.Extended.Config msg"},{"name":"fab","comment":" Extended floating action button view function\n","type":"Material.Fab.Extended.Config msg -> String.String -> Html.Html msg"},{"name":"setAttributes","comment":" Specify additional attributes\n","type":"List.List (Html.Attribute msg) -> Material.Fab.Extended.Config msg -> Material.Fab.Extended.Config msg"},{"name":"setExited","comment":" Specify whether a floating action button transitions off the screen\n","type":"Basics.Bool -> Material.Fab.Extended.Config msg -> Material.Fab.Extended.Config msg"},{"name":"setIcon","comment":" Specify whether a floating action button displays an icon\n","type":"Maybe.Maybe String.String -> Material.Fab.Extended.Config msg -> Material.Fab.Extended.Config msg"},{"name":"setOnClick","comment":" Specify a message when the user clicks the floating action button\n","type":"msg -> Material.Fab.Extended.Config msg -> Material.Fab.Extended.Config msg"},{"name":"setTrailingIcon","comment":" Specify whether a floating action button's icon is a _trailing icon_\n\nTrailing icons are displyed after the label rather than before.\n\n","type":"Basics.Bool -> Material.Fab.Extended.Config msg -> Material.Fab.Extended.Config msg"}],"binops":[]},{"name":"Material.FormField","comment":" FormField aligns a form field (for example, a checkbox) with\nits label and makes it RTL-aware. It also activates a ripple effect upon\ninteracting with the label.\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Configuration](#configuration)\n      - [Configuration Options](#configuration-options)\n  - [Form Field](#form-field)\n  - [Label Position](#label-position)\n\n\n# Resources\n\n  - [Demo: Checkbox](https://aforemny.github.io/material-components-web-elm/#checkbox)\n  - [MDC Web: Form Field](https://github.com/material-components/material-components-web/tree/master/packages/mdc-form-field)\n\n\n# Basic Usage\n\n    import Material.Checkbox as Checkbox\n    import Material.FormField as FormField\n\n    main =\n        FormField.formField\n            (FormField.config\n                |> FormField.setLabel (Just \"My checkbox\")\n            )\n            [ Checkbox.checkbox Checkbox.config ]\n\n\n# Configuration\n\n@docs Config, config\n\n\n## Configuration Options\n\n@docs setOnClick\n@docs setLabel, setAlignEnd\n@docs setFor\n@docs setAttributes\n\n\n# Form Field\n\n@docs formField\n\n\n# Label Position\n\nIf you want to position the label after the form field's control, set its\n`setAlignEnd` configuration option to `True`.\n\n    FormField.formField\n        (FormField.config |> FormField.setAlignEnd True)\n        [ Checkbox.checkbox Checkbox.config ]\n\n","unions":[{"name":"Config","comment":" Configuration of a form field\n","args":["msg"],"cases":[]}],"aliases":[],"values":[{"name":"config","comment":" Default configuration of a form field\n","type":"Material.FormField.Config msg"},{"name":"formField","comment":" Form field view function\n","type":"Material.FormField.Config msg -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"setAlignEnd","comment":" Specify whether the form field's label is positioned after its control\n\nThis is usefile for, say, checkboxes.\n\n","type":"Basics.Bool -> Material.FormField.Config msg -> Material.FormField.Config msg"},{"name":"setAttributes","comment":" Specify additional attributes\n","type":"List.List (Html.Attribute msg) -> Material.FormField.Config msg -> Material.FormField.Config msg"},{"name":"setFor","comment":" Specify a form field label's HTML5 for attribute\n","type":"Maybe.Maybe String.String -> Material.FormField.Config msg -> Material.FormField.Config msg"},{"name":"setLabel","comment":" Specify a form field's label\n","type":"Maybe.Maybe String.String -> Material.FormField.Config msg -> Material.FormField.Config msg"},{"name":"setOnClick","comment":" Specify a message when the user clicks on the label\n","type":"msg -> Material.FormField.Config msg -> Material.FormField.Config msg"}],"binops":[]},{"name":"Material.HelperText","comment":" Helper text gives context about a field’s input, such as how the input will\nbe used. It should be visible either persistently or only on focus.\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Configuration](#configuration)\n      - [Configuration Options](#configuration-options)\n  - [Basic Usage](#basic-usage)\n  - [Helper Text](#helper-text)\n  - [Persistent Helper Text](#persisten-helper-text)\n  - [Helper Text with Character Counter](#helper-text-with-character-counter)\n\n\n# Resources\n\n  - [Demo: Text fields](https://aforemny.github.io/material-components-web-elm/#text-field)\n  - [Material Design Guidelines: Text Fields Layout](https://material.io/go/design-text-fields#text-fields-layout)\n  - [MDC Web: Text Field Helper Text](https://github.com/material-components/material-components-web/tree/master/packages/mdc-textfield/helper-text)\n  - [Sass Mixins (MDC Web)](https://github.com/material-components/material-components-web/tree/master/packages/mdc-textfield/helper-text#sass-mixins)\n\n\n# Basic Usage\n\n    import Material.HelperText as HelperText\n    import Material.TextField as TextField\n\n    main =\n        Html.div []\n            [ TextField.filled\n                (TextField.config\n                    |> TextField.setLabel (Just \"Your name\")\n                )\n            , HelperText.helperText HelperText.config\n                \"Please fill this\"\n            ]\n\n\n# Configuration\n\n@docs Config, config\n\n\n## Configuration Options\n\n@docs setPersistent\n@docs setAttributes\n\n\n# Helper Text\n\nThe helper line is expected to be a direct sibling of the text field it belongs\nto and the helper text is expected to be a direct child of the helper text\nline.\n\n@docs helperText\n\n\n# Persistent Helper Text\n\nA text field's helper text may show unconditionally by setting its\n`setPersistent` configuration option to `True`. By default a text field's\nhelper text only shows when the text field has focus.\n\n\n# Helper Text with Character Counter\n\nTo have a text field or text area display a character counter, set its\n`setMaxLength` configuration option, and also add a `characterCounter` as a\nchild of `helperLine`.\n\n    [ TextField.filled\n        (TextField.config |> TextField.setMaxLength (Just 18))\n    , HelperText.helperLine [] [ HelperText.characterCounter [] ]\n    ]\n\n@docs helperLine, characterCounter\n\n","unions":[{"name":"Config","comment":" Configuration of a helper text\n","args":["msg"],"cases":[]}],"aliases":[],"values":[{"name":"characterCounter","comment":" Character counter view function\n","type":"List.List (Html.Attribute msg) -> Html.Html msg"},{"name":"config","comment":" Default configuration of a helper text\n","type":"Material.HelperText.Config msg"},{"name":"helperLine","comment":" Helper text line view function\n\nThe helper line is expected to be the wrapping element of the helper text. It\nis expected to be a direct sibling of the text field that it belongs to.\n\n","type":"List.List (Html.Attribute msg) -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"helperText","comment":" Helper text view function\n\nThe helper text is expected to be a direct child of the helper line.\n\n","type":"Material.HelperText.Config msg -> String.String -> Html.Html msg"},{"name":"setAttributes","comment":" Specify additional attributes\n","type":"List.List (Html.Attribute msg) -> Material.HelperText.Config msg -> Material.HelperText.Config msg"},{"name":"setPersistent","comment":" Specify whether a helper text should be persistent\n\nPersistent helper texts always display regardless of whether the input has\nfocus or not.\n\n","type":"Basics.Bool -> Material.HelperText.Config msg -> Material.HelperText.Config msg"}],"binops":[]},{"name":"Material.Icon","comment":" Icon renders a Material Icon.\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Icon](#icon)\n\n\n# Resources\n\n  - [Material Icons](https://material.io/tools/icons/)\n\n\n# Basic Usage\n\n    import Material.Icon as Icon\n\n    main =\n        Icon.icon [] \"favorite\"\n\n\n# Icon\n\n@docs icon\n\n","unions":[],"aliases":[],"values":[{"name":"icon","comment":" Icon view function\n","type":"List.List (Html.Attribute msg) -> String.String -> Html.Html msg"}],"binops":[]},{"name":"Material.IconButton","comment":" Icon buttons allow users to take actions and make choices with a single\ntap.\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Configuration](#configuration)\n      - [Configuration Options](#configuration-options)\n  - [Icon Button](#icon-button)\n  - [Disabled Icon Button](#disabled-icon-button)\n  - [Labeled Icon Button](#labeled-icon-button)\n\n\n# Resources\n\n  - [Demo: Icon buttons](https://aforemny.github.io/material-components-web-elm/#icon-button)\n  - [Material Design Guidelines: Toggle buttons](https://material.io/go/design-buttons#toggle-button)\n  - [MDC Web: Icon Button](https://github.com/material-components/material-components-web/tree/master/packages/mdc-icon-button)\n  - [Sass Mixins (MDC Web)](https://github.com/material-components/material-components-web/tree/master/packages/mdc-icon-button#sass-mixins)\n\n\n# Basic Usage\n\n    import Material.IconButton as IconButton\n\n    type Msg\n        = Clicked\n\n    main =\n        IconButton.iconButton\n            (IconButton.config |> IconButton.setOnClick Clicked)\n            \"favorite\"\n\n\n# Configuration\n\n@docs Config, config\n\n\n## Configuration Options\n\n@docs setOnClick\n@docs setDisabled\n@docs setLabel\n@docs setAttributes\n\n\n# Icon Button\n\n@docs iconButton\n\n\n# Disabled Icon Button\n\nTo disable an icon button, set its `setDisabled` configuration option to\n`True`. Disabled icon buttons cannot be interacted with and have no visual\ninteraction effect.\n\n    IconButton.iconButton\n        (IconButton.config |> IconButton.setDisabled True)\n        \"favorite\"\n\n\n# Labeled Icon Button\n\nTo set the HTML attribute `arial-label` of a icon button, use its `setLabel`\nconfiguration option.\n\n    IconButton.iconButton\n        (IconButton.config\n            |> IconButton.setLabel (Just \"Add to favorites\")\n        )\n        \"favorite\"\n\n\n# Variant: Custom Icon Button\n\n@docs custom\n\n","unions":[],"aliases":[{"name":"Config","comment":" Icon button configuration\n","args":["msg"],"type":"Material.IconButton.Internal.Config msg"}],"values":[{"name":"config","comment":" Default icon button configuration\n","type":"Material.IconButton.Config msg"},{"name":"custom","comment":" TODO\n","type":"Material.IconButton.Config msg -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"iconButton","comment":" Icon button view function\n","type":"Material.IconButton.Config msg -> String.String -> Html.Html msg"},{"name":"setAttributes","comment":" Specify additional attributes\n","type":"List.List (Html.Attribute msg) -> Material.IconButton.Config msg -> Material.IconButton.Config msg"},{"name":"setDisabled","comment":" Specify whether an icon button is disabled\n\nDisabled icon buttons cannot be interacted with and have no visual interaction\neffect.\n\n","type":"Basics.Bool -> Material.IconButton.Config msg -> Material.IconButton.Config msg"},{"name":"setLabel","comment":" Specify an icon button's HTML5 arial-label attribute\n","type":"Maybe.Maybe String.String -> Material.IconButton.Config msg -> Material.IconButton.Config msg"},{"name":"setOnClick","comment":" Specify a message when the user clicks on an icon button\n","type":"msg -> Material.IconButton.Config msg -> Material.IconButton.Config msg"}],"binops":[]},{"name":"Material.IconToggle","comment":" Icon toggles allow users to take actions and make choices with a single\ntap.\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Configuration](#configuration)\n      - [Configuration Options](#configuration-options)\n  - [Basic Usage](#basic-usage)\n  - [Icon Toggle](#icon-toggle)\n  - [On Icon Toggle](#on-icon-toggle)\n  - [Disabled Icon Toggle](#disabled-icon-toggle)\n  - [Labeled Icon Toggle](#labeled-icon-toggle)\n\n\n# Resources\n\n  - [Demo: Icon buttons](https://aforemny.github.io/material-components-web-elm/#icon-button)\n  - [Material Design Guidelines: Toggle buttons](https://material.io/go/design-buttons#toggle-button)\n  - [MDC Web: Icon Button](https://github.com/material-components/material-components-web/tree/master/packages/mdc-icon-button)\n  - [Sass Mixins (MDC Web)](https://github.com/material-components/material-components-web/tree/master/packages/mdc-icon-button#sass-mixins)\n\n\n# Basic Usage\n\n    import Material.IconToggle as IconToggle\n\n    type Msg\n        = Clicked\n\n    main =\n        IconToggle.iconToggle\n            (IconToggle.config\n                |> IconToggle.setOn True\n                |> IconToggle.setOnChange Clicked\n            )\n            { offIcon = \"favorite_outlined\"\n            , onIcon = \"favorite\"\n            }\n\n\n# Configuration\n\n@docs Config, config\n\n\n## Configuration Options\n\n@docs setOnChange\n@docs setOn\n@docs setDisabled\n@docs setLabel\n@docs setAttributes\n\n\n# Icon Toggle\n\nIcon toggles are a variant of [icon buttons](Material-IconButton) that change\nthe icon when their state changes.\n\n    IconToggle.iconToggle\n        (IconToggle.config |> IconToggle.setOn True)\n        { offIcon = \"favorite_border\"\n        , onIcon = \"favorite\"\n        }\n\n@docs iconToggle\n\n\n# On Icon Toggle\n\nTo set an icon toggle to its on state, set its `setOn` configuration option to\n`True`.\n\n    IconToggle.iconToggle\n        (IconToggle.config |> IconToggle.setOn True)\n        { offIcon = \"favorite_border\"\n        , onIcon = \"favorite\"\n        }\n\n\n# Disabled Icon Toggle\n\nTo disable an icon toggle, set its `setDisabled` configuration option to\n`True`.\nDisabled icon buttons cannot be interacted with and have no visual interaction\neffect.\n\n    IconToggle.iconToggle\n        (IconToggle.config |> IconToggle.setDisabled True)\n        { offIcon = \"favorite_border\"\n        , onIcon = \"favorite\"\n        }\n\n\n# Labeled Icon Toggle\n\nTo set the HTML5 `arial-label` attribute of an icon toggle, use its `setLabel`\nconfiguration option.\n\n    IconToggle.iconToggle\n        (IconToggle.config\n            |> IconToggle.setLabel (Just \"Add to favorites\")\n        )\n        { offIcon = \"favorite_border\"\n        , onIcon = \"favorite\"\n        }\n\n","unions":[{"name":"Config","comment":" Icon toggle configuration\n","args":["msg"],"cases":[]}],"aliases":[],"values":[{"name":"config","comment":" Default icon toggle configuration\n","type":"Material.IconToggle.Config msg"},{"name":"iconToggle","comment":" Icon toggle view function\n","type":"Material.IconToggle.Config msg -> { onIcon : String.String, offIcon : String.String } -> Html.Html msg"},{"name":"setAttributes","comment":" Specify additional attributes\n","type":"List.List (Html.Attribute msg) -> Material.IconToggle.Config msg -> Material.IconToggle.Config msg"},{"name":"setDisabled","comment":" Specify whether an icon toggle is disabled\n\nDisabled icon buttons cannot be interacted with and have no visual interaction\neffect.\n\n","type":"Basics.Bool -> Material.IconToggle.Config msg -> Material.IconToggle.Config msg"},{"name":"setLabel","comment":" Specify the HTML5 aria-label attribute of an icon toggle\n","type":"Maybe.Maybe String.String -> Material.IconToggle.Config msg -> Material.IconToggle.Config msg"},{"name":"setOn","comment":" Specify whether an icon toggle is on\n","type":"Basics.Bool -> Material.IconToggle.Config msg -> Material.IconToggle.Config msg"},{"name":"setOnChange","comment":" Specify a message when the user changes the icon toggle\n","type":"msg -> Material.IconToggle.Config msg -> Material.IconToggle.Config msg"}],"binops":[]},{"name":"Material.ImageList","comment":" An Image List consists of several items, each containing an image and\noptionally supporting a text label.\n\nThis modules concerns the container image list. If you are looking for\ninformation about the image list items, refer to\n[Material.ImageList.Item](Material-ImageList-Item).\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Configuration](#configuration)\n      - [Configuration Options](#configuration-options)\n  - [Basic Usage](#basic-usage)\n  - [Image List](#image-list)\n  - [Masonry Image List](#masonry-image-list)\n  - [Image List with Text Label](#image-list-with-text-label)\n\n\n# Resources\n\n  - [Demo: Image Lists](https://aforemny.github.io/material-components-web-elm/#image-list)\n  - [Material Design Guidelines: Image list](https://material.io/go/design-image-list)\n  - [MDC Web: Image List](https://github.com/material-components/material-components-web/tree/master/packages/mdc-image-list)\n  - [Sass Mixins (MDC Web)](https://github.com/material-components/material-components-web/tree/master/packages/mdc-image-list#sass-mixins)\n\n\n# Basic Usage\n\nNote that you will have to set the width and margin of image list items\nyourself, preferably through SASS or through inline CSS.\n\n    import Html.Attributes exposing (style)\n    import Material.ImageList as ImageList\n    import Material.ImageList.Item as ImageListItem\n\n    main =\n        ImageList.imageList ImageList.config\n            [ ImageListItem.imageListItem\n                (ImageListItem.config\n                    |> ImageListItem.setAttributes\n                        [ style \"width\" \"calc(100% / 5 - 4px)\"\n                        , style \"margin\" \"2px\"\n                        ]\n                )\n                \"images/photos/3x2/1.jpg\"\n            ]\n\n\n# Configuration\n\n@docs Config, config\n\n\n## Configuration Options\n\n@docs setMasonry\n@docs setWithTextProtection\n@docs setAttributes\n\n\n# Image List\n\n@docs imageList\n\n\n# Masonry Image List\n\nThe _masonry image list_ variant presents images vertically arranged into\nseveral columns. In this layout, images may be any combination of aspect\nratios.\n\n    ImageList.imageList\n        (ImageList.config |> ImageList.setMasonry True)\n        []\n\n\n# Image List with Label\n\nImage's labels are by default positioned below the image. If you want image\nlabels to be positioned in a scrim overlaying each image, use the image list's\n`setWithTextProtection` configuration option.\n\n    ImageList.imageList\n        (ImageList.config\n            |> ImageList.setWithTextProtection True\n        )\n        [ ImageListItem.imageListItem\n            (ImageListItem.config\n                |> ImageListItem.setLabel (Just \"Photo\")\n            )\n            \"images/photos/3x2/1.jpg\"\n        ]\n\n","unions":[{"name":"Config","comment":" Configuration of an image list\n","args":["msg"],"cases":[]}],"aliases":[],"values":[{"name":"config","comment":" Default configuration of an image list\n","type":"Material.ImageList.Config msg"},{"name":"imageList","comment":" Image list view function\n","type":"Material.ImageList.Config msg -> List.List (Material.ImageList.Item.ImageListItem msg) -> Html.Html msg"},{"name":"setAttributes","comment":" Specify additional attributes\n","type":"List.List (Html.Attribute msg) -> Material.ImageList.Config msg -> Material.ImageList.Config msg"},{"name":"setMasonry","comment":" Specify whether an image list is a _masonry image list_\n\nThe masonry image list variant presents images vertically arranged into several\ncolumns. In this layout, images may be any combination of aspect ratios.\n\n","type":"Basics.Bool -> Material.ImageList.Config msg -> Material.ImageList.Config msg"},{"name":"setWithTextProtection","comment":" Specify whether an image list item's label should display in a scrim on top\nof the image\n\nBy default, image list item's labels display below the image.\n\n","type":"Basics.Bool -> Material.ImageList.Config msg -> Material.ImageList.Config msg"}],"binops":[]},{"name":"Material.ImageList.Item","comment":" An Image List consists of several items, each containing an image and\noptionally supporting a text label.\n\nThis modules concerns the image list item. If you are looking for information\nabout the image list contianer, refer to\n[Material.ImageList](Material-ImageList).\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Configuration](#configuration)\n      - [Configuration Options](#configuration-options)\n  - [Basic Usage](#basic-usage)\n  - [Image List Item](#image-list-item)\n\n\n# Resources\n\n  - [Demo: Image Lists](https://aforemny.github.io/material-components-web-elm/#image-list)\n  - [Material Design Guidelines: Image list](https://material.io/go/design-image-list)\n  - [MDC Web: Image List](https://github.com/material-components/material-components-web/tree/master/packages/mdc-image-list)\n  - [Sass Mixins (MDC Web)](https://github.com/material-components/material-components-web/tree/master/packages/mdc-image-list#sass-mixins)\n\n\n# Basic Usage\n\nNote that you will have to set the width and margin of image list items\nyourself, preferably through SASS or through inline CSS.\n\n    import Html.Attributes exposing (style)\n    import Material.ImageList as ImageList\n    import Material.ImageList.Item as ImageListItem\n\n    main =\n        ImageList.imageList ImageList.config\n            [ ImageListItem.imageListItem\n                (ImageList.itemConfig\n                    |> ImageList.setAttributes\n                        [ style \"width\" \"calc(100% / 5 - 4px)\"\n                        , style \"margin\" \"2px\"\n                        ]\n                )\n                \"images/photos/3x2/1.jpg\"\n            ]\n\n\n# Configuration\n\n@docs Config, config\n\n\n## Configuration Options\n\n@docs setLabel\n@docs setHref\n@docs setAttributes\n\n\n# Image list Item\n\n@docs ImageListItem, imageListItem\n\n","unions":[],"aliases":[{"name":"Config","comment":" Configuration of an image list item\n","args":["msg"],"type":"Material.ImageList.Item.Internal.Config msg"},{"name":"ImageListItem","comment":" Image list item type\n\nImage list items can only be rendered within a [image list\ncontainer](Material-ImageList)\n\n","args":["msg"],"type":"Material.ImageList.Item.Internal.ImageListItem msg"}],"values":[{"name":"config","comment":" Default configuration of an image list item\n","type":"Material.ImageList.Item.Config msg"},{"name":"imageListItem","comment":" Image list item constructor\n","type":"Material.ImageList.Item.Config msg -> String.String -> Material.ImageList.Item.ImageListItem msg"},{"name":"setAttributes","comment":" Specify additional attributes\n","type":"List.List (Html.Attribute msg) -> Material.ImageList.Item.Config msg -> Material.ImageList.Item.Config msg"},{"name":"setHref","comment":" Specify whether an image list item is supposed to be a _link image list item_\n\nA link image list items behaves essentially like a HTML5 anchor element.\n\n","type":"Maybe.Maybe String.String -> Material.ImageList.Item.Config msg -> Material.ImageList.Item.Config msg"},{"name":"setLabel","comment":" Specify an image list item's label\n","type":"Maybe.Maybe String.String -> Material.ImageList.Item.Config msg -> Material.ImageList.Item.Config msg"}],"binops":[]},{"name":"Material.LayoutGrid","comment":" Material Design’s responsive user interface is based on a _column-variate_\ngrid layout: it has 12 columns on desktop, 8 columns on tablet and 4 columns on\nphone.\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Layout Grid](#layout-grid)\n  - [Cell Spans](#cell-spans)\n  - [Cell Alignment](#cell-alignment)\n  - [Grid Alignment](#grid-alignment)\n  - [Nested Grid](#nested-grid)\n  - [Device-Specific Cell Spans](#device-specific-cell-spans)\n      - [Desktop Cell Spans](#desktop-cell-spans)\n      - [Tablet Cell Spans](#tablet-cell-spans)\n      - [Phone Cell Spans](#phone-cell-spans)\n\n\n# Resources\n\n  - [Demo: Layout Grids](https://aforemny.github.io/material-components-web-elm/#layout-grid)\n  - [Material Design Guidelines: Layout Grid](https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-grid)\n  - [MDC Web: Layout Grid](https://github.com/material-components/material-components-web/tree/master/packages/mdc-layout-grid)\n  - [Sass Mixins (MDC Web)](https://github.com/material-components/material-components-web/tree/master/packages/mdc-layout-grid#sass-mixins)\n\n\n# Basic Usage\n\nNote that you are expected to wrap cells in `LayoutGrid.inner`. This has to do\nwith nesting layout grids, but it is required for flat layout grids as\nwell.\n\n    import Material.LayoutGrid as LayoutGrid\n\n    main =\n        LayoutGrid.layoutGrid []\n            [ LayoutGrid.inner []\n                [ LayoutGrid.cell [] []\n                , LayoutGrid.cell [] []\n                , LayoutGrid.cell [] []\n                ]\n            ]\n\n\n# Layout Grid\n\n@docs layoutGrid, cell, inner\n\n\n# Cell Spans\n\nCells span by default four columns within the grid. Use one of the following\nfunctions to make a cell span more or fewer columns.\n\n@docs span1, span2, span3, span4, span5, span6, span7, span8, span9, span10, span11, span12\n\n\n# Cell Alignment\n\nCells are by default stretched. You can add attributes `alignTop`,\n`alignMiddle` or `alignBottom` to a cell to make them not extend beyond their\ncontent and instead specify an alignment.\n\n@docs alignTop, alignMiddle, alignBottom\n\n\n# Grid Alignment\n\nThe layout grid is by default center aligned. You can add attributes\n`alignLeft` or `alignRight` to the `layoutGrid` to change this behavior.\n\nNote that effects will only be visible if the layout grid does not span the\nentire available width.\n\n@docs alignLeft, alignRight\n\n\n# Nested Grid\n\nWhen your contents need extra structure that cannot be supported by a single\nlayout grid, you can nest layout grids within each other. To nest layout grid,\nadd a new `inner` around nested `cell`s within an existing `cell`.\n\nThe nested layout grid behaves exactly like when they are not nested, e.g, they\nhave 12 columns on desktop, 8 columns on tablet and 4 columns on phone. They\nalso use the same gutter size as their parents, but margins are not\nre-introduced since they are living within another cell.\n\nHowever, the Material Design guidelines do not recommend having a deeply nested\ngrid as it might mean an over complicated user experience.\n\n    LayoutGrid.layoutGrid []\n        [ LayoutGrid.inner []\n            [ LayoutGrid.cell []\n                [ LayoutGrid.inner []\n                    [ LayoutGrid.cell [] []\n                    , LayoutGrid.cell [] []\n                    ]\n                ]\n            , LayoutGrid.cell [] []\n            ]\n        ]\n\n\n# Device-Specific Cell Spans\n\n\n## Desktop Cell Spans\n\n@docs span1Desktop, span2Desktop, span3Desktop, span4Desktop, span5Desktop, span6Desktop, span7Desktop, span8Desktop, span9Desktop, span10Desktop, span11Desktop, span12Desktop\n\n\n## Tablet Cell Spans\n\n@docs span1Tablet, span2Tablet, span3Tablet, span4Tablet, span5Tablet, span6Tablet, span7Tablet, span8Tablet\n\n\n## Phone Cell Spans\n\n@docs span1Phone, span2Phone, span3Phone, span4Phone\n\n","unions":[],"aliases":[],"values":[{"name":"alignBottom","comment":" Aligns a cell to the bottom\n","type":"Html.Attribute msg"},{"name":"alignLeft","comment":" Aligns the layout grid to the left\n","type":"Html.Attribute msg"},{"name":"alignMiddle","comment":" Aligns a cell to the middle\n","type":"Html.Attribute msg"},{"name":"alignRight","comment":" Aligns the layout grid to the right\n","type":"Html.Attribute msg"},{"name":"alignTop","comment":" Aligns a cell to the top\n","type":"Html.Attribute msg"},{"name":"cell","comment":" Layout grid cell view function\n","type":"List.List (Html.Attribute msg) -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"inner","comment":" Layout grid inner view function\n\nIt is mandatory to wrap `cell`s within `inner`. This has to do with nesting\nlayout grids, but it is mandatory for flat layout grids as well.\n\n","type":"List.List (Html.Attribute msg) -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"layoutGrid","comment":" Layout grid view function\n","type":"List.List (Html.Attribute msg) -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"span1","comment":" Change a cell to span one column\n","type":"Html.Attribute msg"},{"name":"span10","comment":" Change a cell to span ten columns\n","type":"Html.Attribute msg"},{"name":"span10Desktop","comment":" Change a cell to span ten columns (desktop only)\n","type":"Html.Attribute msg"},{"name":"span11","comment":" Change a cell to span eleven columns\n","type":"Html.Attribute msg"},{"name":"span11Desktop","comment":" Change a cell to span eleven columns (desktop only)\n","type":"Html.Attribute msg"},{"name":"span12","comment":" Change a cell to span twelve columns\n","type":"Html.Attribute msg"},{"name":"span12Desktop","comment":" Change a cell to span twelve columns (desktop only)\n","type":"Html.Attribute msg"},{"name":"span1Desktop","comment":" Change a cell to span one column (desktop only)\n","type":"Html.Attribute msg"},{"name":"span1Phone","comment":" Change a cell to span one column (phone only)\n","type":"Html.Attribute msg"},{"name":"span1Tablet","comment":" Change a cell to span one column (tablet only)\n","type":"Html.Attribute msg"},{"name":"span2","comment":" Change a cell to span two columns\n","type":"Html.Attribute msg"},{"name":"span2Desktop","comment":" Change a cell to span two columns (desktop only)\n","type":"Html.Attribute msg"},{"name":"span2Phone","comment":" Change a cell to span two columns (phone only)\n","type":"Html.Attribute msg"},{"name":"span2Tablet","comment":" Change a cell to span two columns (tablet only)\n","type":"Html.Attribute msg"},{"name":"span3","comment":" Change a cell to span three columns\n","type":"Html.Attribute msg"},{"name":"span3Desktop","comment":" Change a cell to span three columns (desktop only)\n","type":"Html.Attribute msg"},{"name":"span3Phone","comment":" Change a cell to span three columns (phone only)\n","type":"Html.Attribute msg"},{"name":"span3Tablet","comment":" Change a cell to span three columns (tablet only)\n","type":"Html.Attribute msg"},{"name":"span4","comment":" Change a cell to span four columns\n","type":"Html.Attribute msg"},{"name":"span4Desktop","comment":" Change a cell to span four columns (desktop only)\n","type":"Html.Attribute msg"},{"name":"span4Phone","comment":" Change a cell to span four columns (phone only)\n","type":"Html.Attribute msg"},{"name":"span4Tablet","comment":" Change a cell to span four columns (tablet only)\n","type":"Html.Attribute msg"},{"name":"span5","comment":" Change a cell to span five columns\n","type":"Html.Attribute msg"},{"name":"span5Desktop","comment":" Change a cell to span five columns (desktop only)\n","type":"Html.Attribute msg"},{"name":"span5Tablet","comment":" Change a cell to span five columns (tablet only)\n","type":"Html.Attribute msg"},{"name":"span6","comment":" Change a cell to span six columns\n","type":"Html.Attribute msg"},{"name":"span6Desktop","comment":" Change a cell to span six columns (desktop only)\n","type":"Html.Attribute msg"},{"name":"span6Tablet","comment":" Change a cell to span six columns (tablet only)\n","type":"Html.Attribute msg"},{"name":"span7","comment":" Change a cell to span seven columns\n","type":"Html.Attribute msg"},{"name":"span7Desktop","comment":" Change a cell to span seven columns (desktop only)\n","type":"Html.Attribute msg"},{"name":"span7Tablet","comment":" Change a cell to span seven columns (tablet only)\n","type":"Html.Attribute msg"},{"name":"span8","comment":" Change a cell to span eight columns\n","type":"Html.Attribute msg"},{"name":"span8Desktop","comment":" Change a cell to span eight columns (desktop only)\n","type":"Html.Attribute msg"},{"name":"span8Tablet","comment":" Change a cell to span eight columns (tablet only)\n","type":"Html.Attribute msg"},{"name":"span9","comment":" Change a cell to span nine columns\n","type":"Html.Attribute msg"},{"name":"span9Desktop","comment":" Change a cell to span nine columns (desktop only)\n","type":"Html.Attribute msg"}],"binops":[]},{"name":"Material.LinearProgress","comment":" Linear progress indicators visualize the linear progression of either\ndeterminate or indeterminate activities.\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Configuration](#configuration)\n      - [Configuration Options](#configuration-options)\n  - [Indeterminate Linear Progress](#indeterminate-linear-progress)\n  - [Determinate Linear Progress](#determinate-linear-progress)\n  - [Buffered Linear Progress](#buffered-linear-progress)\n  - [Closed Linear Progress](#closed-linear-progress)\n  - [Reversed Linear Progress](#reversed-linear-progress)\n\n\n# Resources\n\n  - [Demo: Linear Progress](https://aforemny.github.io/material-components-web-elm/#linear-progress)\n  - [Material Design Guidelines: Progress indicators](https://material.io/go/design-progress-indicators)\n  - [MDC Web: Linear Progress](https://github.com/material-components/material-components-web/tree/master/packages/mdc-linear-progress)\n  - [Sass Mixins (MDC Web)](https://github.com/material-components/material-components-web/tree/master/packages/mdc-linear-progress#sass-mixins)\n\n\n# Basic Usage\n\n    import Material.LinearProgress as LinearProgress\n\n    main =\n        LinearProgress.indeterminate LinearProgress.config\n\n\n# Configuration\n\n@docs Config, config\n\n\n## Configuration Options\n\n@docs setReverse\n@docs setClosed\n@docs setAttributes\n\n\n# Indeterminate Linear Progress\n\n@docs indeterminate\n\n\n# Determinate Linear Progress\n\n    LinearProgress.determinate LinearProgress.config\n        { progress = 0.5 }\n\n@docs determinate\n\n\n## Buffered Linear Progress\n\n    LinearProgress.buffered LinearProgress.config\n        { progress = 0.5, buffered = 0.75 }\n\n@docs buffered\n\n\n# Closed Linear Progress\n\nIf you want to hide the linear progress indicator, set its `setClosed`\nconfiguration option to `True`.\n\n    LinearProgress.indeterminate\n        (LinearProgress.config |> LinearProgress.setClosed True)\n\n\n# Reverse Linear Progress\n\nIf you want to reverse the direction of the linear progress indicator, set its\n`setReverse` configuration option to `True`.\n\n    LinearProgress.indeterminate\n        (LinearProgress.config |> LinearProgress.setReverse True)\n\n","unions":[{"name":"Config","comment":" Linear progress configuration\n","args":["msg"],"cases":[]}],"aliases":[],"values":[{"name":"buffered","comment":" Buffered linear progress variant\n","type":"Material.LinearProgress.Config msg -> { progress : Basics.Float, buffered : Basics.Float } -> Html.Html msg"},{"name":"config","comment":" Default linear progress configuration\n","type":"Material.LinearProgress.Config msg"},{"name":"determinate","comment":" Determinate linear progress variant\n","type":"Material.LinearProgress.Config msg -> { progress : Basics.Float } -> Html.Html msg"},{"name":"indeterminate","comment":" Indeterminate linear progress variant\n","type":"Material.LinearProgress.Config msg -> Html.Html msg"},{"name":"setAttributes","comment":" Specify additional attributes\n","type":"List.List (Html.Attribute msg) -> Material.LinearProgress.Config msg -> Material.LinearProgress.Config msg"},{"name":"setClosed","comment":" Specify whether a linear progress indicator should be hidden\n","type":"Basics.Bool -> Material.LinearProgress.Config msg -> Material.LinearProgress.Config msg"},{"name":"setReverse","comment":" Specify whether the direction of a linear progress indicator should be reversed\n","type":"Basics.Bool -> Material.LinearProgress.Config msg -> Material.LinearProgress.Config msg"}],"binops":[]},{"name":"Material.List","comment":" Lists are continuous, vertical indexes of text or images.\n\nThis module concerns the container list. If you are looking for information\nabout the list items, refer to [Material.List.Item](Material-List-Item).\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Configuration](#configuration)\n      - [Configuration Options](#configuration-options)\n  - [List](#list)\n  - [Two-Line List](#two-line-list)\n  - [Non-interactive List](#non-interactive-list)\n  - [Dense List](#dense-list)\n  - [Avatar List](#avatar-list)\n  - [List Group](#list-group)\n      - [List Group Divider](#list-group-divider)\n\n\n# Resources\n\n  - [Demo: Lists](https://aforemny.github.io/material-components-web-elm/#lists)\n  - [Material Design Guidelines: Lists](https://material.io/design/components/lists.html)\n  - [MDC Web: List](https://github.com/material-components/material-components-web/tree/master/packages/mdc-list)\n  - [Sass Mixins (MDC Web)](https://github.com/material-components/material-components-web/tree/master/packages/mdc-list#sass-mixins)\n\n\n# Basic Usage\n\n    import Material.List as List\n    import Material.List.Item as ListItem\n\n    main =\n        List.list List.config\n            [ ListItem.listItem ListItem.config\n                [ text \"Line item\" ]\n            , ListItem.listItem ListItem.config\n                [ text \"Line item\" ]\n            ]\n\n\n# Configuration\n\n@docs Config, config\n\n\n## Configuration Options\n\n@docs setNonInteractive\n@docs setDense\n@docs setAvatarList\n@docs setTwoLine\n@docs setAttributes\n@docs setWrapFocus\n\n\n# List\n\n@docs list\n\n\n# Two-Line List\n\nLists may be _two-line_ lists by setting its `setTwoLine` configuration option\nto `True`. In that case, list items should wrap their contents inside\n`ListItem.text`.\n\n    List.list (List.config |> List.setTwoLine True)\n        [ ListItem.listItem ListItem.config\n            [ ListItem.text []\n                { primary = [ text \"First line\" ]\n                , secondary = [ text \"Second line\" ]\n                }\n            ]\n        ]\n\n\n# Non-interactive List\n\nLists may be non-interactive by its setting `setNonInteractive` configuration\noption to `True`.\n\nNon-interactive lists do not feature keyboard interaction and list items have\nno visual interaction effect.\n\n    List.list\n        (List.config |> List.setNonInteractive True)\n        [ ListItem.listItem ListItem.config [ text \"List item\" ]\n        ]\n\n\n## Dense List\n\nLists may be styled more compact by setting its `setDense` configuration option\nto `True`.\n\nDense lists feature smaller than normal margins.\n\n    List.list\n        (List.config |> List.setDense True)\n        [ ListItem.listItem ListItem.config [ text \"List item\" ]\n        ]\n\n\n## Avatar List\n\nA list item's graphics may be configured to appear larger by setting its\n`setAvatarList` configuration option to `True`.\n\n    List.list\n        (List.config |> List.setAvatarList True)\n        [ ListItem.listItem ListItem.config\n            [ ListItem.graphic [] [ Html.img [] [] ]\n            , text \"List item\"\n            ]\n        ]\n\n\n## List Group\n\nMultiple related lists, such as folders and files in a file hierarchy, may be\ngrouped using `group` and labeled by `subheader`.\n\n    List.group []\n        [ List.subheader [] [ text \"Folders\" ]\n        , List.list List.config\n            [ ListItem.listItem ListItem.config [ text \"Folder\" ]\n            , ListItem.listItem ListItem.config [ text \"Folder\" ]\n            ]\n        , List.subheader [] [ text \"Files\" ]\n        , List.list List.config\n            [ ListItem.listItem ListItem.config [ text \"File\" ]\n            , ListItem.listItem ListItem.config [ text \"File\" ]\n            ]\n        ]\n\n@docs group, subheader\n\n","unions":[{"name":"Config","comment":" Configuration of a list\n","args":["msg"],"cases":[]}],"aliases":[],"values":[{"name":"config","comment":" Default configuration of a list\n","type":"Material.List.Config msg"},{"name":"group","comment":" List group view function\n","type":"List.List (Html.Attribute msg) -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"list","comment":" List view function\n","type":"Material.List.Config msg -> List.List (Material.List.Item.ListItem msg) -> Html.Html msg"},{"name":"setAttributes","comment":" Specify additional attributes\n","type":"List.List (Html.Attribute msg) -> Material.List.Config msg -> Material.List.Config msg"},{"name":"setAvatarList","comment":" Specify whether a list should be an _avatar_ list\n\nAn avatar list features a larger than usual list item _graphic_.\n\n","type":"Basics.Bool -> Material.List.Config msg -> Material.List.Config msg"},{"name":"setDense","comment":" Specify whether a list should be _dense_\n\nDense lists are more compact and feature smaller than normal margins\n\n","type":"Basics.Bool -> Material.List.Config msg -> Material.List.Config msg"},{"name":"setNonInteractive","comment":" Specify whether a list should be non-interactive\n\nNon-interactive lists do not feature keyboard interaction and list items have\nno visual interaction effect.\n\n","type":"Basics.Bool -> Material.List.Config msg -> Material.List.Config msg"},{"name":"setTwoLine","comment":" Specify whether a list should be a _two line_ list\n\nTwo line lists feature list items with a primary and a secondary text line.\n\n","type":"Basics.Bool -> Material.List.Config msg -> Material.List.Config msg"},{"name":"setWrapFocus","comment":" Specify whether a list should wrap focus\n\nA list that wraps focus focuses the first list item after pressing tab on the\nlast list item. By default, a list in that case passes focus to the next\nfocusable control.\n\n","type":"Basics.Bool -> Material.List.Config msg -> Material.List.Config msg"},{"name":"subheader","comment":" List group subheader view function\n","type":"List.List (Html.Attribute msg) -> List.List (Html.Html msg) -> Html.Html msg"}],"binops":[]},{"name":"Material.List.Divider","comment":" Lists are continuous, vertical indexes of text or images.\n\nThis module concerns a list's divider elements. If you are looking for the list\ncontainer, refer to [Material.List](Material-List), and if you are looking for\nthe list item, refer to [Material.List.Item](Material-List-Item).\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Configuration](#configuration)\n      - [Configuration Options](#configuration-options)\n  - [List Item Divider](#list-item-divider)\n  - [List Group Divider](#list-group-divider)\n\n\n# Resources\n\n  - [Demo: Lists](https://aforemny.github.io/material-components-web-elm/#lists)\n  - [Material Design Guidelines: Lists](https://material.io/design/components/lists.html)\n  - [MDC Web: List](https://github.com/material-components/material-components-web/tree/master/packages/mdc-list)\n  - [Sass Mixins (MDC Web)](https://github.com/material-components/material-components-web/tree/master/packages/mdc-list#sass-mixins)\n\n\n# Basic Usage\n\n    import Material.List as List\n    import Material.List.Divider as ListDivider\n    import Material.List.Item as ListItem\n\n    main =\n        List.list List.config\n            [ ListItem.listItem ListItem.config\n                [ text \"Line item\" ]\n            , ListDivider.listItem ListDivider.config\n            , ListItem.listItem ListItem.config\n                [ text \"Line item\" ]\n            ]\n\n\n# Configuration\n\n@docs Config, config\n\n\n## Configuration Options\n\n@docs setPadded\n@docs setInset\n@docs setAttributes\n\n\n# List Item Divider\n\nList items may be seperated by a divider. The divider may optionally be _inset_\nso that it does not intersect the list item's graphic, or _padded_ so that it\ndoes not intersect the list item's meta.\n\n    List.list List.config\n        [ ListItem.listItem ListItem.config\n            [ text \"List item\" ]\n        , ListDivider.listItem ListDivider.config\n        , ListItem.listItem ListItem.config\n            [ text \"List item\" ]\n        ]\n\n@docs listItem\n\n\n### List Group Divider\n\nMultiple lists within a group may be visually seperated by a list group divider.\n\n    List.group []\n        [ List.list List.config\n            [ ListItem.listItem ListItem.config [ text \"Folder\" ]\n            , ListItem.listItem ListItem.config [ text \"Folder\" ]\n            ]\n        , ListDivider.group []\n        , List.list List.config\n            [ ListItem.listItem ListItem.config [ text \"File\" ]\n            , ListItem.listItem ListItem.config [ text \"File\" ]\n            ]\n        ]\n\n@docs group\n\n","unions":[{"name":"Config","comment":" Configuration of a list item divider\n","args":["msg"],"cases":[]}],"aliases":[],"values":[{"name":"config","comment":" Default configuration of a list item divider\n","type":"Material.List.Divider.Config msg"},{"name":"group","comment":" List group divider view function\n","type":"List.List (Html.Attribute msg) -> Html.Html msg"},{"name":"listItem","comment":" List item divider view function\n","type":"Material.List.Divider.Config msg -> Material.List.Item.ListItem msg"},{"name":"setAttributes","comment":" Specify additional attributes\n","type":"List.List (Html.Attribute msg) -> Material.List.Divider.Config msg -> Material.List.Divider.Config msg"},{"name":"setInset","comment":" Specify whether a list divider should be _inset_\n\nInsert list item dividers to not intersect a list item's meta.\n\n","type":"Basics.Bool -> Material.List.Divider.Config msg -> Material.List.Divider.Config msg"},{"name":"setPadded","comment":" Specify whether a list divider should be _padded_\n\nPadded list item dividers do not intersect a list item's avatar.\n\n","type":"Basics.Bool -> Material.List.Divider.Config msg -> Material.List.Divider.Config msg"}],"binops":[]},{"name":"Material.List.Item","comment":" Lists are continuous, vertical indexes of text or images.\n\nThis module concerns the list items. If you are looking for the list container,\nrefer to [Material.List](Material-List).\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Configuration](#configuration)\n      - [Configuration Options](#configuration-options)\n  - [List Item](#list-item)\n  - [List Item with Graphic](#list-item-with-graphic)\n  - [List Item with Meta](#list-item-with-meta)\n  - [Two-Line List Item](#two-line-list-item)\n  - [Disabled List Item](#disabled-list-item)\n  - [Selected List Item](#selected-list-item)\n  - [Activated List Item](#activated-list-item)\n  - [Link List Item](#link-list-item)\n  - [List Item Divider](#list-item-divider)\n\n\n# Resources\n\n  - [Demo: Lists](https://aforemny.github.io/material-components-web-elm/#lists)\n  - [Material Design Guidelines: Lists](https://material.io/design/components/lists.html)\n  - [MDC Web: List](https://github.com/material-components/material-components-web/tree/master/packages/mdc-list)\n  - [Sass Mixins (MDC Web)](https://github.com/material-components/material-components-web/tree/master/packages/mdc-list#sass-mixins)\n\n\n# Basic Usage\n\n    import Material.List as List\n    import Material.List.Item as ListItem\n\n    main =\n        List.list List.config\n            [ ListItem.listItem ListItem.config\n                [ text \"Line item\" ]\n            ]\n\n\n# Configuration\n\n@docs Config, config\n\n\n## Configuration Options\n\n@docs setOnClick\n@docs setDisabled\n@docs setSelected\n@docs setHref\n@docs setTarget\n@docs setAttributes\n\n\n# List Item\n\n@docs ListItem, listItem\n\n\n# List Item with Graphic\n\nIn addition to their text, list itemss may optionally contain a starting tile\nreferred to as _graphic_.\n\nCommon examples for graphics are icons and images, avatar images and selection\ncontrols such as checkboxes.\n\n    ListItem.listItem ListItem.config\n        [ ListItem.graphic [] [ Icon.icon Icon.config \"star\" ]\n        , text \"List item\"\n        ]\n\n@docs graphic\n\n\n# List Item with Meta\n\nIn addition to their text child, list items may optionally contain a starting\ntile referred to as _meta_.\n\nCommon examples for metas are text, icons and images and selection controls.\n\n    ListItem.listItem ListItem.config\n        [ text \"List item\"\n        , ListItem.meta [] [ Icon.icon Icon.config \"star\" ]\n        ]\n\n@docs meta\n\n\n# Two-Line List Item\n\nList items may be two-line list items by using `text`.\n\n    ListItem.listItem ListItem.config\n        [ ListItem.text []\n            { primary = [ text \"First line\" ]\n            , secondary = [ text \"Second line\" ]\n            }\n        ]\n\n@docs text\n\n\n# Disabled List Item\n\nList items may be disabled by setting their `setDisabled` configuration option\nto `True`.\n\n    ListItem.listItem\n        (ListItem.config |> ListItem.setDisabled True)\n        [ text \"List item\" ]\n\n\n### Selected List Item\n\nList items may be selected by setting their `setSelected` configuration option\nto a value of `Selection`.\n\nA list item that may change its selection state within the current page, should\nbe selected rather than activated.\n\nAs a rule of thumb, a navigation list item should be activated, while any other\nlist item should be selected.\n\n    ListItem.listItem\n        (ListItem.config\n            |> ListItem.setSelected (Just ListItem.selected)\n        )\n        [ text \"List item\" ]\n\n@docs Selection, selected\n\n\n### Activated List Item\n\nList items may be activated by setting their `setSelected` configuration option\nto a value of `Selection`.\n\nA list item that may not change its state within the current page should be\nactivated rather than selected.\n\nAs a rule of thumb, a navigation list item should be activated, while any other\nlist item should be selected.\n\n    ListItem.listItem\n        (ListItem.config\n            |> ListItem.setSelected (Just ListItem.activated)\n        )\n        [ text \"List item\" ]\n\n@docs activated\n\n\n## Link List Item\n\nList items may using the `setHref` configuration option in which case the list\nitem essentially behaves like a HTML anchor element. You may specify the\nconfiguration option `setTarget` as well.\n\n    ListItem.listItem\n        (ListItem.config\n            |> ListItem.setHref (Just \"https://elm-lang.org\")\n        )\n        [ text \"Elm programming language\" ]\n\nNote that link list items cannot be disabled.\n\n","unions":[],"aliases":[{"name":"Config","comment":" Configuration of a list item\n","args":["msg"],"type":"Material.List.Item.Internal.Config msg"},{"name":"ListItem","comment":" List item type\n\nList items can only be rendered within a [list container](Material-List).\n\n","args":["msg"],"type":"Material.List.Item.Internal.ListItem msg"},{"name":"Selection","comment":" Selection of a list item\n\nA list item may be either in selected or in activated selection state.\n\n","args":[],"type":"Material.List.Item.Internal.Selection"}],"values":[{"name":"activated","comment":" Activated selection state\n","type":"Material.List.Item.Selection"},{"name":"config","comment":" Default configuration of a list item\n","type":"Material.List.Item.Config msg"},{"name":"graphic","comment":" A list item's graphic tile\n","type":"List.List (Html.Attribute msg) -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"listItem","comment":" List item constructor\n","type":"Material.List.Item.Config msg -> List.List (Html.Html msg) -> Material.List.Item.ListItem msg"},{"name":"meta","comment":" A list item's meta tile\n","type":"List.List (Html.Attribute msg) -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"selected","comment":" Selected selection state\n","type":"Material.List.Item.Selection"},{"name":"setAttributes","comment":" Specify additional attributes\n","type":"List.List (Html.Attribute msg) -> Material.List.Item.Config msg -> Material.List.Item.Config msg"},{"name":"setDisabled","comment":" Specify whtehr a list item should be disabled\n\nDisabled list items cannot be interacted with and have not visual interaction\neffect.\n\n","type":"Basics.Bool -> Material.List.Item.Config msg -> Material.List.Item.Config msg"},{"name":"setHref","comment":" Specify whether a list item is a _link list item_\n\nLink list items essentially behave like a HTML5 anchor element.\n\n","type":"Maybe.Maybe String.String -> Material.List.Item.Config msg -> Material.List.Item.Config msg"},{"name":"setOnClick","comment":" Specify a message when the user interacts with the list item\n","type":"msg -> Material.List.Item.Config msg -> Material.List.Item.Config msg"},{"name":"setSelected","comment":" Specify whether a list item is selected\n\nA selected list item may be either _selected_ or _activated_. A list item that\nmay change its selection state within the current page, should be selected. A\nlist item that may not change its state within the current page should be\nactivated.\n\nAs a rule of thumb, a navigation list item should be activated, while any other\nlist item should be selected.\n\n","type":"Maybe.Maybe Material.List.Item.Selection -> Material.List.Item.Config msg -> Material.List.Item.Config msg"},{"name":"setTarget","comment":" Specify a link list item's HTML5 target attribute\n\nNote that non-link list items ignore this configuration option.\n\n","type":"Maybe.Maybe String.String -> Material.List.Item.Config msg -> Material.List.Item.Config msg"},{"name":"text","comment":" Two-line list item's text\n","type":"List.List (Html.Attribute msg) -> { primary : List.List (Html.Html msg), secondary : List.List (Html.Html msg) } -> Html.Html msg"}],"binops":[]},{"name":"Material.Menu","comment":" A menu displays a list of choices on a temporary surface. They appear when\nusers interact with a button, action, or other control.\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic usage](#basic-usage)\n  - [Configuration](#configuration)\n      - [Configuration Options](#configuration-options)\n  - [Menu](#menu)\n  - [Quick-opening menu](#quick-opening-menu)\n\n\n# Resources\n\n  - [Demo: Menus](https://aforemny.github.io/material-components-web-elm/#menu)\n  - [Material Design Guidelines: Menus](https://material.io/go/design-menus)\n  - [MDC Web: Menu](https://github.com/material-components/material-components-web/tree/master/packages/mdc-menu)\n  - [Sass Mixins (MDC Web)](https://github.com/material-components/material-components-web/tree/master/packages/mdc-menu#sass-mixins)\n\n\n# Basic usage\n\nA menu is usually tied to an element that opens it, such as a button. For\npositioning, wrap the button and the menu within an element that sets the\n`surfaceAnchor` attribute. The menu's items are simply a\n[list](Material-List).\n\n    import Material.Button as Button\n    import Material.List as List\n    import Material.ListItem as ListItem\n    import Material.Menu as Menu\n\n    type Msg\n        = MenuOpened\n        | MenuClosed\n\n    main =\n        Html.div [ Menu.surfaceAnchor ]\n            [ Button.text\n                (Button.config |> Button.setOnClick MenuOpened)\n                \"Open menu\"\n            , Menu.menu\n                (Menu.config\n                    |> Menu.setOpen True\n                    |> Menu.setOnClose MenuClosed\n                )\n                [ List.list\n                    (List.config |> List.setWrapFocus True)\n                    [ ListItem.listItem ListItem.config\n                        [ text \"Menu item\" ]\n                    , ListItem.listItem ListItem.config\n                        [ text \"Menu item\" ]\n                    ]\n                ]\n            ]\n\n\n# Configuration\n\n@docs Config, config\n\n\n## Configuration Options\n\n@docs setOnClose\n@docs setOpen\n@docs setQuickOpen\n@docs setAttributes\n\n\n# Menu\n\n@docs menu, surfaceAnchor\n\n\n# Quick-opening menu\n\nA menu may not show a transition when opening by setting its `setQuickOpen`\nconfiguration option to `True`.\n\n    Menu.menu (Menu.config |> Menu.setQuickOpen True) []\n\n","unions":[{"name":"Config","comment":" Configuration of a menu\n","args":["msg"],"cases":[]}],"aliases":[],"values":[{"name":"config","comment":" Default configuration of a menu\n","type":"Material.Menu.Config msg"},{"name":"menu","comment":" Menu view function\n","type":"Material.Menu.Config msg -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"setAttributes","comment":" Specify additional attributes\n","type":"List.List (Html.Attribute msg) -> Material.Menu.Config msg -> Material.Menu.Config msg"},{"name":"setOnClose","comment":" Specify a message when the user closes the menu\n","type":"msg -> Material.Menu.Config msg -> Material.Menu.Config msg"},{"name":"setOpen","comment":" Specify whether a menu is open\n","type":"Basics.Bool -> Material.Menu.Config msg -> Material.Menu.Config msg"},{"name":"setQuickOpen","comment":" Specify whether a menu is _opening quickly_\n\nA quickly opening menu opens without showing an animation.\n\n","type":"Basics.Bool -> Material.Menu.Config msg -> Material.Menu.Config msg"},{"name":"surfaceAnchor","comment":" Menu surface anchor attribute\n\nUse this on a HTML element that contains both the triggering element and the\nmenu itself.\n\n","type":"Html.Attribute msg"}],"binops":[]},{"name":"Material.Radio","comment":" Radio buttons allow the user to select one option from a set while seeing\nall available options.\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Configuration](#configuration)\n      - [Configuration Options](#configuration-options)\n  - [Radio](#radio)\n  - [Checked Radio](#checked-radio)\n  - [Disabled Radio](#disabled-radio)\n\n\n# Resources\n\n  - [Demo: Radio Buttons](https://aforemny.github.io/material-components-web-elm/#radio-buttons)\n  - [Material Design Guidelines: Selection Controls – Radio buttons](https://material.io/go/design-radio-buttons)\n  - [MDC Web: Radio](https://github.com/material-components/material-components-web/tree/master/packages/mdc-radio)\n  - [Sass Mixins (MDC Web)](https://github.com/material-components/material-components-web/tree/master/packages/mdc-radio#sass-mixins)\n\n\n# Basic Usage\n\nNote that radio buttons are usually used in conjunction with [form\nfields](Material-FormField).\n\n    import Material.Radio as Radio\n\n    type Msg\n        = Changed\n\n    main =\n        Radio.radio\n            (Radio.config\n                |> Radio.setChecked True\n                |> Radio.setOnChange Changed\n            )\n\n\n# Configuration\n\n@docs Config, config\n\n\n## Configuration Options\n\n@docs setOnChange\n@docs setChecked\n@docs setDisabled\n@docs setAttributes\n\n\n# Radio\n\n@docs radio\n\n\n# Checked Radio\n\nTo make a radio button display its checked state, set its `setChecked`\nconfiguration option to `True`.\n\n    Radio.radio (Radio.config |> Radio.setChecked True)\n\n\n# Disabled Radio\n\nTo disable a radio button, set its `setDisabled` configuration option to `True`.\n\nDisabled radio buttons cannot be interacted with and have no visual interaction\neffect.\n\n    Radio.radio (Radio.config |> Radio.setDisabled True)\n\n","unions":[{"name":"Config","comment":" Radio button configuration\n","args":["msg"],"cases":[]}],"aliases":[],"values":[{"name":"config","comment":" Default radio button configuration\n","type":"Material.Radio.Config msg"},{"name":"radio","comment":" Radio button view function\n","type":"Material.Radio.Config msg -> Html.Html msg"},{"name":"setAttributes","comment":" Specify additional attributes\n","type":"List.List (Html.Attribute msg) -> Material.Radio.Config msg -> Material.Radio.Config msg"},{"name":"setChecked","comment":" Specify whether a radio button is checked\n","type":"Basics.Bool -> Material.Radio.Config msg -> Material.Radio.Config msg"},{"name":"setDisabled","comment":" Specify whether a radio button is disabled\n\nDisabled radio buttons cannot be interacted with and have no visual interaction\neffect.\n\n","type":"Basics.Bool -> Material.Radio.Config msg -> Material.Radio.Config msg"},{"name":"setOnChange","comment":" Specify a message when the user changes a radio\n","type":"msg -> Material.Radio.Config msg -> Material.Radio.Config msg"}],"binops":[]},{"name":"Material.Ripple","comment":" Material “ink ripple” interaction effect.\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Configuration](#configuration)\n      - [Configuration Options](#configuration-options)\n  - [Bounded Ripple](#bounded-ripple)\n  - [Unbounded Ripple](#unbounded-ripple)\n  - [Colored Ripple](#colored-ripple)\n\n\n# Resources\n\n  - [Demo: Ripples](https://aforemny.github.io/material-components-web-elm/#ripple)\n  - [Material Design Guidelines: States](https://material.io/go/design-states)\n  - [MDC Web: Ripple](https://github.com/material-components/material-components-web/tree/master/packages/mdc-ripple)\n  - [Sass Mixins (MDC Web)](https://github.com/material-components/material-components-web/tree/master/packages/mdc-ripple#sass-apis)\n\n\n# Basic Usage\n\nRipples come in two variants. Use `bounded` for bounded ripple effects which\nwork best when used for contained surfaces, and `unbounded` for unbounded\nripple effects which work best with icons.\n\n    import Material.Ripple as Ripple\n\n    main =\n        Html.div []\n            [ text \"Click me!\"\n            , Ripple.bounded Ripple.config\n            ]\n\n\n# Configuration\n\n@docs Config, config\n\n\n## Configuration Options\n\n@docs setColor\n@docs setAttributes\n\n\n# Bounded Ripple\n\n@docs bounded\n\n\n# Unbounded Ripple\n\n    Html.span []\n        [ text \"🙌\"\n        , Ripple.unbounded Ripple.config\n        ]\n\n@docs unbounded\n\n\n# Colored Ripple\n\nIf you want to set the ripple effect to either primary or accent color, use its\n`setColor` configuration option and specify a `Color`.\n\n    Ripple.bounded\n        (Ripple.config |> Ripple.setColor (Just Ripple.primary))\n\n@docs Color, primary, accent\n\n","unions":[{"name":"Color","comment":" Ripple effect's color\n","args":[],"cases":[]},{"name":"Config","comment":" Ripple configuration\n","args":["msg"],"cases":[]}],"aliases":[],"values":[{"name":"accent","comment":" Accent variant of a ripple effect's color\n","type":"Material.Ripple.Color"},{"name":"bounded","comment":" Bounded ripple view function\n","type":"Material.Ripple.Config msg -> Html.Html msg"},{"name":"config","comment":" Default ripple configuration\n","type":"Material.Ripple.Config msg"},{"name":"primary","comment":" Primary variant of a ripple effect's color\n","type":"Material.Ripple.Color"},{"name":"setAttributes","comment":" Specify additional attributes\n","type":"List.List (Html.Attribute msg) -> Material.Ripple.Config msg -> Material.Ripple.Config msg"},{"name":"setColor","comment":" Specify a ripple effect's color\n","type":"Maybe.Maybe Material.Ripple.Color -> Material.Ripple.Config msg -> Material.Ripple.Config msg"},{"name":"unbounded","comment":" Unbounded ripple view function\n","type":"Material.Ripple.Config msg -> Html.Html msg"}],"binops":[]},{"name":"Material.Select","comment":" Select provides a single-option select menus.\n\nThis module concerns the container select. If you are looking for information\nabout select options, refer to\n[Material.Select.Option](Material-Select-Option).\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Configuration](#configuration)\n      - [Configuration Options](#configuration-options)\n  - [Outlined Select](#outlined-select)\n  - [Disabled Select](#disabled-select)\n  - [Required Select](#required-select)\n  - [Disabled Option](#disabled-option)\n  - [Select with helper text](#select-with-helper-text)\n  - [Select with leading icon](#select-with-leading-icon)\n\n\n# Resources\n\n  - [Demo: Selects](https://aforemny.github.io/material-components-web-elm/#select)\n  - [Material Design Guidelines: Text Fields](https://material.io/go/design-text-fields)\n  - [MDC Web: Select](https://github.com/material-components/material-components-web/tree/master/packages/mdc-select)\n  - [Sass Mixins (MDC Web)](https://github.com/material-components/material-components-web/tree/master/packages/mdc-select#sass-mixins)\n\n\n# Basic Usage\n\n    import Material.Select as Select\n    import Material.Select.Option as SelectOption\n\n    type Msg\n        = ValueChanged String\n\n    main =\n        Select.filled\n            (Select.config\n                |> Select.setLabel (Just \"Fruit\")\n                |> Select.setValue (Just \"\")\n                |> Select.setOnChange ValueChanged\n            )\n            [ SelectOption.selectOption\n                (SelectOption.config |> SelectOption.setValue (Just \"\"))\n                [ text \"\" ]\n            , SelectOption.selectOption\n                (SelectOption.config\n                    |> SelectOption.setValue (Just \"Apple\")\n                )\n                [ text \"Apple\" ]\n            ]\n\n\n# Configuration\n\n@docs Config, config\n\n\n## Configuration Options\n\n@docs setOnChange\n@docs setLabel\n@docs setValue\n@docs setDisabled\n@docs setRequired\n@docs setValid\n@docs setAttributes\n\n\n# Filled Select\n\n@docs filled\n\n\n# Outlined Select\n\nInstead of a filled select, you may choose a select with a outline by using the\n`outlined` view function.\n\n    Select.outlined Select.config\n        [ SelectOption.selectOption\n            (SelectOption.config\n                |> SelectOption.setValue (Just \"\")\n            )\n            [ text \"\" ]\n        ]\n\n@docs outlined\n\n\n# Disabled Select\n\nTo disable a select, set its `setDisabled` configuration option to `True`.\n\n    Select.filled (Select.config |> Select.setDisabled True) []\n\n\n# Required Select\n\nTo mark a select as required, set its `setRequired` configuration option to\n`True`.\n\n    Select.filled (Select.config |> Select.setRequired True) []\n\n\n# Select with helper text\n\nTODO(select-with-helper-text)\n\n\n# Select with leading icon\n\nTODO(select-with-leading-icon)\n\n","unions":[{"name":"Config","comment":" Configuration of a select\n","args":["msg"],"cases":[]}],"aliases":[],"values":[{"name":"config","comment":" Default configuration of a select\n","type":"Material.Select.Config msg"},{"name":"filled","comment":" Filled select view function\n","type":"Material.Select.Config msg -> List.List (Material.Select.Option.SelectOption msg) -> Html.Html msg"},{"name":"outlined","comment":" Outlined select view function\n","type":"Material.Select.Config msg -> List.List (Material.Select.Option.SelectOption msg) -> Html.Html msg"},{"name":"setAttributes","comment":" Specify additional attributes\n","type":"List.List (Html.Attribute msg) -> Material.Select.Config msg -> Material.Select.Config msg"},{"name":"setDisabled","comment":" Specify a select to be disabled\n\nDisabled selects cannot be interacted with an have no visual interaction\neffect.\n\n","type":"Basics.Bool -> Material.Select.Config msg -> Material.Select.Config msg"},{"name":"setLabel","comment":" Specify a select's label\n","type":"Maybe.Maybe String.String -> Material.Select.Config msg -> Material.Select.Config msg"},{"name":"setOnChange","comment":" Specify a message when the user changes the select\n","type":"(String.String -> msg) -> Material.Select.Config msg -> Material.Select.Config msg"},{"name":"setRequired","comment":" Specify whether a select is required\n","type":"Basics.Bool -> Material.Select.Config msg -> Material.Select.Config msg"},{"name":"setValid","comment":" Specify whether a select is valid\n","type":"Basics.Bool -> Material.Select.Config msg -> Material.Select.Config msg"},{"name":"setValue","comment":" Specify a select's value\n","type":"Maybe.Maybe String.String -> Material.Select.Config msg -> Material.Select.Config msg"}],"binops":[]},{"name":"Material.Select.Option","comment":" Select provides a single-option select menus.\n\nThis module concerns the select option. If you are looking for information\nabout the container select, refer to [Material.Select](Material-Select).\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Configuration](#configuration)\n      - [Configuration Options](#configuration-options)\n  - [Select Option](#select-option)\n  - [Disabled Select Option](#disabled-select-option)\n\n\n# Resources\n\n  - [Demo: Selects](https://aforemny.github.io/material-components-web-elm/#select)\n  - [Material Design Guidelines: Text Fields](https://material.io/go/design-text-fields)\n  - [MDC Web: Select](https://github.com/material-components/material-components-web/tree/master/packages/mdc-select)\n  - [Sass Mixins (MDC Web)](https://github.com/material-components/material-components-web/tree/master/packages/mdc-select#sass-mixins)\n\n\n# Basic Usage\n\n    import Material.Select as Select\n    import Material.Select.Option as SelectOption\n\n    type Msg\n        = ValueChanged String\n\n    main =\n        Select.filled\n            (Select.config\n                |> Select.setLabel \"Fruit\"\n                |> Select.setValue (Just \"\")\n                |> Select.setOnChange ValueChanged\n            )\n            [ SelectOption.selectOption\n                (SelectOption.config\n                    |> SelectOption.setValue (Just \"\")\n                )\n                [ text \"\" ]\n            , SelectOption.selectOption\n                (SelectOption.config\n                    |> SelectOption.setValue (Just \"Apple\")\n                )\n                [ text \"Apple\" ]\n            ]\n\n\n# Configuration\n\n@docs Config, config\n\n\n## Configuration Options\n\n@docs setValue\n@docs setDisabled\n@docs setAttributes\n\n\n# Select Option\n\n@docs SelectOption, selectOption\n\n\n# Disabled Select Option\n\nTo disable one select's option, set its `setDisabled` configuration option to\n`True`.\n\n    SelectOption.selectOption\n        (SelectOption.config |> SelectOption.setDisabled True)\n        [ text \"\" ]\n\nThis is particularly useful on the first emply option if you have a select that\nmust be filled but is not initially filled.\n\n","unions":[],"aliases":[{"name":"Config","comment":" Configuration of a select option\n","args":["msg"],"type":"Material.Select.Option.Internal.Config msg"},{"name":"SelectOption","comment":" Select option type\n","args":["msg"],"type":"Material.Select.Option.Internal.SelectOption msg"}],"values":[{"name":"config","comment":" Default configuration of a select option\n","type":"Material.Select.Option.Config msg"},{"name":"selectOption","comment":" Select option constructor\n","type":"Material.Select.Option.Config msg -> List.List (Html.Html msg) -> Material.Select.Option.SelectOption msg"},{"name":"setAttributes","comment":" Specify additional attributes\n","type":"List.List (Html.Attribute msg) -> Material.Select.Option.Config msg -> Material.Select.Option.Config msg"},{"name":"setDisabled","comment":" Specify whether a select option is disabled\n\nDisabled select options cannot be selected.\n\n","type":"Basics.Bool -> Material.Select.Option.Config msg -> Material.Select.Option.Config msg"},{"name":"setValue","comment":" Specify a select option's label\n","type":"Maybe.Maybe String.String -> Material.Select.Option.Config msg -> Material.Select.Option.Config msg"}],"binops":[]},{"name":"Material.Slider","comment":" Slider provides a component to select a numerical value within a range.\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Configuration](#configuration)\n      - [Configuration Options](#configuration-options)\n  - [Continuous Slider](#continuous-slider)\n  - [Custom range values](#using-a-step-value)\n  - [Using a step value](#using-a-step-value)\n  - [Disabled Slider](#disabled-slider)\n  - [Discrete Slider](#discrete-slider)\n      - [Track Markers](#track-markers)\n\n\n# Resources\n\n  - [Demo: Sliders](https://aforemny.github.io/material-components-web-elm/#slider)\n  - [Material Design Guidelines: Sliders](https://material.io/go/design-sliders)\n  - [MDC Web: Slider](https://github.com/material-components/material-components-web/tree/master/packages/mdc-slider)\n  - [Sass Mixins (MDC Web)](https://github.com/material-components/material-components-web/tree/master/packages/mdc-slider#sass-mixins)\n\n\n# Basic Usage\n\n    import Material.Slider as Slider\n\n    type Msg\n        = ValueChanged Float\n\n    main =\n        Slider.slider\n            (Slider.config\n                |> Slider.setValue (Just 50)\n                |> Slider.setOnChange ValueChanged\n            )\n\n\n# Configurations\n\n@docs Config, config\n\n\n## Configuration Options\n\n@docs setOnChange\n@docs setDiscrete\n@docs setDisplayMarkers\n@docs setMin\n@docs setMax\n@docs setStep\n@docs setValue\n@docs setDisabled\n@docs setAttributes\n\n\n# Continuous Slider\n\n@docs slider\n\n\n# Custom range values\n\nTo set a custom range, use the slider's `setMin` and `setMax` configuration\noptions.\n\n    Slider.slider\n        (Slider.config\n            |> Slider.setMin (Just 0)\n            |> Slider.setMax (Just 100)\n        )\n\n\n# Using a step value\n\nTo allow for quantization of the user input, use the slider's `setStep`\nconfiguration option.\n\n    Slider.slider (Slider.config |> Slider.setStep (Just 4.5))\n\n\n# Disabled Slider\n\nTo disable a slider, set its `setDisabled` configuration option to `True`.\n\nDisabled sliders cannot be interacted with and have no visual interaction\neffect.\n\n    Slider.slider (Slider.config |> Slider.setDisabled True)\n\n\n# Discrete Slider\n\nTo treat a slider as a discrete slider, set its `setDiscrete` configuration\noption to `True`.\n\n    Slider.slider (Slider.config |> Slider.setDiscrete True)\n\n\n## Track Markers\n\nTo have a discrete slider show track markers, set its `setDisplayMarkers`\nconfiguration option to `True`.\n\nNote that non-discrete sliders ignore this configuration option.\n\n    Slider.slider\n        (Slider.config |> Slider.setDisplayMarkers True)\n\n","unions":[{"name":"Config","comment":" Configuration of a slider\n","args":["msg"],"cases":[]}],"aliases":[],"values":[{"name":"config","comment":" Default configuration of a slider\n","type":"Material.Slider.Config msg"},{"name":"setAttributes","comment":" Specify additional attributes\n","type":"List.List (Html.Attribute msg) -> Material.Slider.Config msg -> Material.Slider.Config msg"},{"name":"setDisabled","comment":" Specify whether a slider is disabled\n\nDisabled sliders canot be interacted with and have no visual interaction\neffect.\n\n","type":"Basics.Bool -> Material.Slider.Config msg -> Material.Slider.Config msg"},{"name":"setDiscrete","comment":" Specify whether a slider is _discrete_\n\nDiscrete sliders feature a pin that indicates the current value while\ninteracting with the slider.\n\nThis works best for integer-valued sliders, but this is not a requirement.\n\n","type":"Basics.Bool -> Material.Slider.Config msg -> Material.Slider.Config msg"},{"name":"setDisplayMarkers","comment":" Specify whether a slider should display markers\n\nNote that this option is ignored by non-discrete sliders.\n\n","type":"Basics.Bool -> Material.Slider.Config msg -> Material.Slider.Config msg"},{"name":"setMax","comment":" Specify a slider's maximum value\n","type":"Maybe.Maybe Basics.Float -> Material.Slider.Config msg -> Material.Slider.Config msg"},{"name":"setMin","comment":" Specify a slider's minimum value\n","type":"Maybe.Maybe Basics.Float -> Material.Slider.Config msg -> Material.Slider.Config msg"},{"name":"setOnChange","comment":" Specify a message when the user interacts with the slider\n","type":"(Basics.Float -> msg) -> Material.Slider.Config msg -> Material.Slider.Config msg"},{"name":"setStep","comment":" Specify a slider's step value\n","type":"Maybe.Maybe Basics.Float -> Material.Slider.Config msg -> Material.Slider.Config msg"},{"name":"setValue","comment":" Specify a slider's value\n","type":"Maybe.Maybe Basics.Float -> Material.Slider.Config msg -> Material.Slider.Config msg"},{"name":"slider","comment":" Slider view function\n","type":"Material.Slider.Config msg -> Html.Html msg"}],"binops":[]},{"name":"Material.Snackbar","comment":" Snackbars provide brief messages about the application's processes at the\nbottom of the screen.\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Configuration](#configuration)\n      - [Configuration Options](#configuration-options)\n  - [Snackbar](#snackbar)\n  - [Queue](#queue)\n      - [Adding Messages](#adding-messages)\n  - [Messages](#messages)\n\n\n# Resources\n\n  - [Demo: Snackbars](https://aforemny.github.io/material-components-web-elm/#snackbar)\n  - [Material Design Guidelines: Snackbars](https://material.io/go/design-snackbar)\n  - [MDC Web: Snackbar](https://github.com/material-components/material-components-web/tree/master/packages/mdc-snackbar)\n  - [Sass Mixins (MDC Web)](https://github.com/material-components/material-components-web/tree/master/packages/mdc-snackbar#sass-mixins)\n\n\n# Basic Usage\n\n    import Material.Snackbar as Snackbar\n\n    type alias Model =\n        { queue : Snackbar.Queue Msg }\n\n    initialModel : Model\n    initialModel =\n        { queue = Snackbar.initialQueue }\n\n    type Msg\n        = SnackbarMsg (Snackbar.Msg Msg)\n\n    update : Msg -> Model -> ( Model, Cmd Msg )\n    update msg model =\n        case msg of\n            SnackbarMsg snackbarMsg ->\n                let\n                    ( newQueue, cmd ) =\n                        Snackbar.update SnackbarMsg\n                            snackbarMsg\n                            model.queue\n                in\n                ( { model | queue = newQueue }, cmd )\n\n    main =\n        Snackbar.snackbar SnackbarMsg\n            Snackbar.config\n            initialModel.queue\n\n\n# Configuration\n\n@docs Config, config\n\n\n## Configuration Options\n\n@docs setCloseOnEscape\n@docs setAttributes\n\n\n# Snackbar\n\n@docs snackbar\n\n\n# Queue\n\nYou will have to maintain a queue of snackbar messages inside your\napplication's model. To do so, add a field `queue : Queue msg` and initialize\nit to `initialQueue`.\n\nTo add messages to the queue, you also have to tag `Snackbar.Msg`s within your\napplication's `Msg` type.\n\n    type alias Model =\n        { queue : Snackbar.Queue Msg }\n\n    initialModel =\n        { queue = Snackbar.initialQueue }\n\n    type Msg\n        = SnackbarMsg (Snackbar.Msg Msg)\n\nThen from your application's update function, call `update` to handle\n`Snackbar.Msg`. Note that the first argument to `update` is `SnackbarMsg`.\n\n    type Msg\n        = SnackbarMsg (Snackbar.Msg Msg)\n\n    update msg model =\n        case msg of\n            SnackbarMsg snackbarMsg ->\n                Snackbar.update SnackbarMsg snackbarMsg model.queue\n                    |> Tuple.mapFirst\n                        (\\newQueue -> { model | queue = newQueue })\n\nNow you are ready to call `addMessage` from your application's update function.\n\n@docs Queue, initialQueue, Msg, update\n\n\n## Adding Messages\n\nNote that `addMessage` takes `SnackbarMsg` as first parameter.\n\n    type Msg\n        = SnackbarMsg (Snackbar.Msg Msg)\n        | SomethingHappened\n\n    update msg model =\n        case msg of\n            SomethingHappened ->\n                let\n                    message =\n                        Snackbar.message\n                            |> Snackbar.setLabel (Just \"Something happened\")\n                in\n                ( model, Snackbar.addMessage SnackbarMsg message )\n\n            SnackbarMsg snackbarMsg ->\n                Snackbar.update SnackbarMsg snackbarMsg model.queue\n                    |> Tuple.mapFirst\n                        (\\newQueue -> { model | queue = newQueue })\n\n@docs addMessage\n\n\n# Messages\n\nAt the minimum, a message contains only a label. To specify the label, specify\nit using the `setLabel` configuration option.\n\n    Snackbar.message\n        |> Snackbar.setLabel (Just \"Something happened\")\n\n@docs message, Message\n\n@docs setLabel\n@docs setActionButton\n@docs setOnActionButtonClick\n@docs setActionIcon\n@docs setOnActionIconClick\n@docs setLeading\n@docs setStacked\n@docs setTimeoutMs\n\n\n## Message with action button\n\nMessages may contain an action button that the user can click. To display an\naction button, set the message's `setActionButton` configuration option to a\nstring, and handle the event in `onActionButtonClick`.\n\n    Snackbar.message\n        |> Snackbar.setLabel (Just \"Something happened\")\n        |> Snackbar.setActionButton (Just \"Take action\")\n        |> Snackbar.setOnActionButtonClick ActionButtonClicked\n\n\n## Message with action icon\n\nMessages may contain an action icon that the user can click. To display an\naction icon, set the message's `setActionIcon` configuration option to a string\nrepresenting a Material Icon, and handle the event in `onActionIconClick`.\n\n    Snackbar.message\n        |> Snackbar.setLabel (Just \"Something happened\")\n        |> Snackbar.setActionIcon (Just \"close\")\n        |> Snackbar.setOnActionIconClick Dismissed\n\n\n## Stacked messages\n\nMessages with a long label and action button should display the action button\nbelow the label. To archieve this, set the message's `setStacked` configuration\noption to `True`.\n\n    Snackbar.message\n        |> Snackbar.setLabel (Just \"Something happened\")\n        |> Snackbar.setActionButton (Just \"Take action\")\n        |> Snackbar.setStacked True\n\n\n## Leading messages\n\nMessages are by default centered within the viewport. On larger screens, they\ncan optionally be displyed on the _leading_ edge of the screen. To display a\nmessage as leading, set its `setLeading` configuration option to `True`.\n\n    Snackbar.message\n        |> Snackbar.setLabel (Just \"Something happened\")\n        |> Snackbar.setLeading True\n\n\n## Custom timeout\n\nTo set a custom timeout for a message, set its `setTimeoutMs` configuration\noption to a floating point value, representing the on-screen time in\nmilliseconds.\n\n    Snackbar.message\n        |> Snackbar.setLabel (Just \"Something happened\")\n        |> Snackbar.setTimeoutMs 5000\n\n","unions":[{"name":"Config","comment":" Configuration of a snackbar\n","args":["msg"],"cases":[]},{"name":"Message","comment":" Snackbar message\n","args":["msg"],"cases":[]},{"name":"Msg","comment":" Snackbar message type\n","args":["msg"],"cases":[]},{"name":"Queue","comment":" Queue of messages\n","args":["msg"],"cases":[]}],"aliases":[],"values":[{"name":"addMessage","comment":" Adds a message to the queue\n","type":"(Material.Snackbar.Msg msg -> msg) -> Material.Snackbar.Message msg -> Platform.Cmd.Cmd msg"},{"name":"config","comment":" Default configuration of a snackbar\n","type":"Material.Snackbar.Config msg"},{"name":"initialQueue","comment":" Initial empty queue\n","type":"Material.Snackbar.Queue msg"},{"name":"message","comment":" Default snackbar message (empty label)\n","type":"Material.Snackbar.Message msg"},{"name":"setActionButton","comment":" Specify a message's action button label\n","type":"Maybe.Maybe String.String -> Material.Snackbar.Message msg -> Material.Snackbar.Message msg"},{"name":"setActionIcon","comment":" Specify a message's action icon\n","type":"Maybe.Maybe String.String -> Material.Snackbar.Message msg -> Material.Snackbar.Message msg"},{"name":"setAttributes","comment":" Specify additional attributes\n","type":"List.List (Html.Attribute msg) -> Material.Snackbar.Config msg -> Material.Snackbar.Config msg"},{"name":"setCloseOnEscape","comment":" Specify whether the snackbar's messages should close when the user presses\nescape\n","type":"Basics.Bool -> Material.Snackbar.Config msg -> Material.Snackbar.Config msg"},{"name":"setLabel","comment":" Specify a message's label\n","type":"Maybe.Maybe String.String -> Material.Snackbar.Message msg -> Material.Snackbar.Message msg"},{"name":"setLeading","comment":" Specify whether a message should display _leading_\n\nMessages are by default centered within the viewport. On larger screens, they\ncan optionally be displyed on the _leading_ edge of the screen. To display a\nmessage as leading, set its `setLeading` configuration option to `True`.\n\n","type":"Basics.Bool -> Material.Snackbar.Message msg -> Material.Snackbar.Message msg"},{"name":"setOnActionButtonClick","comment":" Specify a message when the user clicks on a message's action button\n","type":"msg -> Material.Snackbar.Message msg -> Material.Snackbar.Message msg"},{"name":"setOnActionIconClick","comment":" Specify a message when the user clicks on a message's action icon\n","type":"msg -> Material.Snackbar.Message msg -> Material.Snackbar.Message msg"},{"name":"setStacked","comment":" Specify whether a message should be stacked\n\nStacked messages display their label above their action button or icon. This\nworks best for messages with a long label.\n\n","type":"Basics.Bool -> Material.Snackbar.Message msg -> Material.Snackbar.Message msg"},{"name":"setTimeoutMs","comment":" Specify a message's timeout in milliseconds\n","type":"Basics.Int -> Material.Snackbar.Message msg -> Material.Snackbar.Message msg"},{"name":"snackbar","comment":" Snackbar view function\n","type":"(Material.Snackbar.Msg msg -> msg) -> Material.Snackbar.Config msg -> Material.Snackbar.Queue msg -> Html.Html msg"},{"name":"update","comment":" Queue update function\n","type":"(Material.Snackbar.Msg msg -> msg) -> Material.Snackbar.Msg msg -> Material.Snackbar.Queue msg -> ( Material.Snackbar.Queue msg, Platform.Cmd.Cmd msg )"}],"binops":[]},{"name":"Material.Switch","comment":" Switches toggle the state of a single setting on or off. They are the\npreferred way to adjust settings on mobile.\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Configuration](#configuration)\n      - [Configuration Options](#configuration-options)\n  - [Switch](#switch)\n  - [On Switch](#on-switch)\n  - [Disabled Switch](#disabled-switch)\n\n\n# Resources\n\n  - [Demo: Switches](https://aforemny.github.io/material-components-web-elm/#switch)\n  - [Material Design Guidelines: Selection Controls – Switches](https://material.io/go/design-switches)\n  - [MDC Web: Switch](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch)\n  - [Sass Mixins (MDC Web)](https://github.com/material-components/material-components-web/tree/master/packages/mdc-switch#sass-mixins)\n\n\n# Basic Usage\n\nNote that switches are usually used in conjunction with [form\nfields](Material-FormField).\n\n    import Material.Switch as Switch\n\n    type Msg\n        = Changed\n\n    main =\n        Switch.switch\n            (Switch.config\n                |> Switch.setChecked True\n                |> Switch.setOnChange Changed\n            )\n\n\n# Switch\n\n@docs switch\n\n\n# Configuration\n\n@docs Config, config\n\n\n## Configuration Options\n\n@docs setOnChange\n@docs setChecked\n@docs setDisabled\n@docs setAttributes\n\n\n# On Switch\n\nTo set the state of a switch to on, set its `setChecked` configuration option\nto `True`.\n\n    Switch.switch (Switch.config |> Switch.setChecked True)\n\n\n# Disabled Switch\n\nTo disable a switch, set its `setDisabled` configuration option to `True`.\n\nDisabled switches cannot be interacted with and have no visual interaction\neffect.\n\n    Switch.switch (Switch.config |> Switch.setDisabled True)\n\n","unions":[{"name":"Config","comment":" Configuration of a switch\n","args":["msg"],"cases":[]}],"aliases":[],"values":[{"name":"config","comment":" Default configuration of a switch\n","type":"Material.Switch.Config msg"},{"name":"setAttributes","comment":" Specify additional attributes\n","type":"List.List (Html.Attribute msg) -> Material.Switch.Config msg -> Material.Switch.Config msg"},{"name":"setChecked","comment":" Specify whether a switch is checked\n","type":"Basics.Bool -> Material.Switch.Config msg -> Material.Switch.Config msg"},{"name":"setDisabled","comment":" Specify whether a switch is disabled\n\nDisabled switches cannot be interacted with and have no visual interaction\neffect.\n\n","type":"Basics.Bool -> Material.Switch.Config msg -> Material.Switch.Config msg"},{"name":"setOnChange","comment":" Specify a message when the user changes a switch\n","type":"msg -> Material.Switch.Config msg -> Material.Switch.Config msg"},{"name":"switch","comment":" Switch view function\n","type":"Material.Switch.Config msg -> Html.Html msg"}],"binops":[]},{"name":"Material.Tab","comment":" Tabs organize and allow navigation between groups of content that are\nrelated and at the same level of hierarchy. The tab bar contains the tab\ncomponents.\n\nThis module concerns the tab items. If you are looking for information about\nthe tab bar container, refer to [Material.TabBar](Material-TabBar).\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Configuration](#configuration)\n      - [Configuration Options](#configuration-options)\n  - [Tab](#tab)\n  - [Active Tab](#active-tab)\n\n\n# Resources\n\n  - [Demo: Tab Bar](https://aforemny.github.io/material-components-web-elm/#tabbar)\n  - [Material Design Guidelines: Tabs](https://material.io/go/design-tabs)\n  - MDC Web:\n    [Tab Bar](https://github.com/material-components/material-components-web/tree/master/packages/mdc-tab-bar),\n    [Tab](https://github.com/material-components/material-components-web/tree/master/packages/mdc-tab),\n    [Tab Scroller](https://github.com/material-components/material-components-web/tree/master/packages/mdc-tab-scroller)\n  - Sass Mixins:\n    [Tab Bar](https://github.com/material-components/material-components-web/tree/master/packages/mdc-tab-bar#sass-mixins),\n    [Tab](https://github.com/material-components/material-components-web/tree/master/packages/mdc-tab#sass-mixins),\n    [Tab Scroller](https://github.com/material-components/material-components-web/tree/master/packages/mdc-tab-scroller#sass-mixins)\n\n\n# Basic Usage\n\n    import Material.Tab as Tab\n    import Material.TabBar as TabBar\n\n    type Msg\n        = TabClicked Int\n\n    main =\n        TabBar.tabBar TabBar.config\n            [ Tab.tab\n                (Tab.config\n                    |> Tab.setActive True\n                    |> Tab.setOnClick (TabClicked 0)\n                )\n                { label = \"Tab 1\", icon = Nothing }\n            , Tab.tab\n                (Tab.config |> Tab.setOnClick (TabClicked 1))\n                { label = \"Tab 2\", icon = Nothing }\n            ]\n\n\n# Configuration\n\n@docs Config, config\n\n\n## Configuration Options\n\n@docs setOnClick\n@docs setActive\n@docs setAttributes\n\n\n# Tab\n\n@docs Tab, tab, Content\n\n\n# Active Tab\n\nTo mark a tab as active, set its `setActive` configuration option to `True`.\n\n    Tab.tab (Tab.config |> Tab.setActive True)\n\n","unions":[],"aliases":[{"name":"Config","comment":" Configuration of a tab\n","args":["msg"],"type":"Material.Tab.Internal.Config msg"},{"name":"Content","comment":" Content of a tab\n","args":[],"type":"{ label : String.String, icon : Maybe.Maybe String.String }"},{"name":"Tab","comment":" Tab type\n\nTabs can only be rendered within a [tab bar](Material-TabBar).\n\n","args":["msg"],"type":"Material.Tab.Internal.Tab msg"}],"values":[{"name":"config","comment":" Default configuration of a tab\n","type":"Material.Tab.Config msg"},{"name":"setActive","comment":" Specify whether the tab is active\n","type":"Basics.Bool -> Material.Tab.Config msg -> Material.Tab.Config msg"},{"name":"setAttributes","comment":" Specify additional attributes\n","type":"List.List (Html.Attribute msg) -> Material.Tab.Config msg -> Material.Tab.Config msg"},{"name":"setOnClick","comment":" Specify a message when the user clicks a tab\n","type":"msg -> Material.Tab.Config msg -> Material.Tab.Config msg"},{"name":"tab","comment":" Tab constructor\n","type":"Material.Tab.Config msg -> Material.Tab.Content -> Material.Tab.Tab msg"}],"binops":[]},{"name":"Material.TabBar","comment":" Tabs organize and allow navigation between groups of content that are\nrelated and at the same level of hierarchy. The tab bar contains the tab\ncomponents.\n\nThis module concerns the tab bar container. If you are looking for the tab\nitem, refer to [Material.Tab](Material-Tab).\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Configuration](#configuration)\n      - [Configuration Options](#configuration-options)\n  - [Tab Bar](#tab-bar)\n  - [Stacked Tabs](#stacked-tabs)\n  - [Minimum Width Tabs](#minimum-width-tabs)\n  - [Content-Spanning Tab Indicator](#content-spanning-tab-indicator)\n  - [Tab Scroller](#tab-scroller)\n      - [Tab Scroller Alignment](#tab-scroller-alignment)\n\n\n# Resources\n\n  - [Demo: Tab Bar](https://aforemny.github.io/material-components-web-elm/#tabbar)\n  - [Material Design Guidelines: Tabs](https://material.io/go/design-tabs)\n  - MDC Web:\n    [Tab Bar](https://github.com/material-components/material-components-web/tree/master/packages/mdc-tab-bar),\n    [Tab](https://github.com/material-components/material-components-web/tree/master/packages/mdc-tab),\n    [Tab Scroller](https://github.com/material-components/material-components-web/tree/master/packages/mdc-tab-scroller)\n  - Sass Mixins:\n    [Tab Bar](https://github.com/material-components/material-components-web/tree/master/packages/mdc-tab-bar#sass-mixins),\n    [Tab](https://github.com/material-components/material-components-web/tree/master/packages/mdc-tab#sass-mixins),\n    [Tab Scroller](https://github.com/material-components/material-components-web/tree/master/packages/mdc-tab-scroller#sass-mixins)\n\n\n# Basic Usage\n\n    import Material.Tab as Tab\n    import Material.TabBar as TabBar\n\n    type Msg\n        = TabClicked Int\n\n    main =\n        TabBar.tabBar TabBar.config\n            [ Tab.tab\n                (Tab.config\n                    |> Tab.setActive True\n                    |> Tab.setOnClick (TabClicked 0)\n                )\n                { label = \"Tab 1\", icon = Nothing }\n            , Tab.tab\n                (Tab.config |> Tab.setOnClick (TabClicked 1))\n                { label = \"Tab 2\", icon = Nothing }\n            ]\n\n\n# Configuration\n\n@docs Config, config\n\n\n## Configuration Options\n\n@docs setStacked\n@docs setMinWidth\n@docs setIndicatorSpansContent\n@docs setAlign\n@docs setAttributes\n\n\n# Tab Bar\n\n@docs tabBar\n\n\n# Stacked Tabs\n\nIn a _stacked_ tab bar, the label and icon of a tab flow vertically instead of\nhorizontally. To make a tab bar stacked, set its `setStacked` configuration\noption to `True`.\n\nTabs within a stacked tab bar should specify both a label and an icon.\n\n    TabBar.tabBar (TabBar.config |> TabBar.setStacked True) []\n\n\n# Minimum Width Tabs\n\nTabs by defauls span a minimum width. If you want tabs to be as narrow as\npossible, set the tab bar's `setMinWidth` configuration option to `True`.\n\n    TabBar.tabBar (TabBar.config |> TabBar.setMinWidth True) []\n\n\n# Content-Spanning Tab Indicator\n\nThe tab's active indicator by default spans the entire tab. If you want active\nindicators to only span their tab's content, set the tab bar's\n`setIndicatorSpansContent` configuration option to `True`.\n\n    TabBar.tabBar\n        (TabBar.config |> TabBar.setIndicatorSpansContent True)\n        []\n\n\n# Tab scroller\n\nThe tab bar supports tabs overflowing its width and will enable scrolling in\nthat case. You may change the alignment of the elements inside the scroll\ncontent.\n\n@docs Align\n\n\n## Center-aligned tab scroller\n\n    TabBar.tabBar\n        (TabBar.config |> TabBar.setAlign (Just TabBar.Center))\n        []\n\n","unions":[{"name":"Align","comment":" Alignment of a tab scroller\n","args":[],"cases":[["Start",[]],["End",[]],["Center",[]]]},{"name":"Config","comment":" Configuration of a tab bar\n","args":["msg"],"cases":[]}],"aliases":[],"values":[{"name":"config","comment":" Default configuration of a tab bar\n","type":"Material.TabBar.Config msg"},{"name":"setAlign","comment":" Specify tab bar's alignment of tabs in case they overflow horizontally\n","type":"Maybe.Maybe Material.TabBar.Align -> Material.TabBar.Config msg -> Material.TabBar.Config msg"},{"name":"setAttributes","comment":" Specify additional attribtues\n","type":"List.List (Html.Attribute msg) -> Material.TabBar.Config msg -> Material.TabBar.Config msg"},{"name":"setIndicatorSpansContent","comment":" Specify whether a tab bar's tab indicator spans its content\n\nUsually, a tab bar's tab indicator spans the entire tab. Use this option to\nmake it span only it's label instead.\n\n","type":"Basics.Bool -> Material.TabBar.Config msg -> Material.TabBar.Config msg"},{"name":"setMinWidth","comment":" Specify whether a tab bar's tabs should be of minimum width\n\nUsually, a tab bar's tabs have a minimum with. Using this option, tabs are as\nnarrow as possible.\n\n","type":"Basics.Bool -> Material.TabBar.Config msg -> Material.TabBar.Config msg"},{"name":"setStacked","comment":" Specify a tab bar's tabs to be stacked\n\nStacked tabs display their icon below the their label.\n\n","type":"Basics.Bool -> Material.TabBar.Config msg -> Material.TabBar.Config msg"},{"name":"tabBar","comment":" Tab bar view function\n","type":"Material.TabBar.Config msg -> List.List (Material.Tab.Internal.Tab msg) -> Html.Html msg"}],"binops":[]},{"name":"Material.TextArea","comment":" Text areas allow users to input, edit, and select multiline text.\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Configuration](#configuration)\n      - [Configuration Options](#configuration-options)\n  - [Filled Text Area](#filled-text-area)\n  - [Outlined Text Area](#outlined-text-area)\n  - [Full Width Text Area](#full-width-text-area)\n  - [Disabled Text Area](#disabled-text-area)\n  - [Required Text Area](#required-text-area)\n  - [Valid Text Area](#valid-text-area)\n  - [Text Area with Character Counter](#text-area-with-character-counter)\n\n\n# Resources\n\n  - [Demo: Text Areas](https://aforemny.github.io/material-components-web-elm/#text-field)\n  - [Material Design Guidelines: Menus](https://material.io/go/design-menus)\n  - [MDC Web: Menu](https://github.com/material-components/material-components-web/tree/master/packages/mdc-menu)\n  - [Sass Mixins (MDC Web)](https://github.com/material-components/material-components-web/tree/master/packages/mdc-menu#sass-mixins)\n\n\n# Basic Usage\n\n    import Material.TextArea as TextArea\n\n    type Msg\n        = ValueChanged String\n\n    main =\n        TextArea.filled\n            (TextArea.config\n                |> TextArea.setLabel (Just \"My text area\")\n                |> TextArea.setValue (Just \"hello world\")\n                |> TextArea.setOnInput ValueChanged\n                |> TextArea.setRows (Just 4)\n                |> TextArea.setCols (Just 20)\n            )\n\n\n# Configuration\n\n@docs Config, config\n\n\n## Configuration Options\n\n@docs setOnInput\n@docs setOnChange\n@docs setLabel\n@docs setFullwidth\n@docs setValue\n@docs setPlaceholder\n@docs setRows\n@docs setCols\n@docs setDisabled\n@docs setRequired\n@docs setValid\n@docs setMinLength\n@docs setMaxLength\n@docs setAttributes\n\n\n# Filled Text Area\n\n    TextArea.filled TextArea.config\n\n@docs filled\n\n\n# Outlined Text Area\n\nText areas may have a visible outlined around them by using their `outlined`\nvariant.\n\n    TextArea.outlined TextArea.config\n\nNote that `setFullwidth` does not have any effect on an outlined text area.\n\n@docs outlined\n\n\n# Full Width Text Area\n\nTo make a text area span all of its available width, set its `setFullwidth`\nconfiguration option to `True`.\n\n    TextArea.filled\n        (TextArea.config |> TextArea.setFullwidth True)\n\nFull width text areas do not support labels and will ignore the `setLabel`\nconfiguration option. You may use `setPlaceholder` or provide an extraneous\nlabel for a full width text area.\n\nOutlined text areas do not support `setFullwidth` and will ignore this\nconfiguration option.\n\n\n# Disabled Text Area\n\nTo disable a text area, set its `setDisabled` configuration option to `True`.\n\n    TextArea.filled\n        (TextArea.config |> TextArea.setDisabled True)\n\n\n# Required Text Area\n\nTo mark a text area as required, set its `setRequired` configuration option to\n`True`.\n\n    TextArea.filled\n        (TextArea.config |> TextArea.setRequired True)\n\n\n# Valid Text Area\n\nTo mark a text area as valid, set its `setValid` configuration option to\n`True`.\n\n    TextArea.filled (TextArea.config |> TextArea.setValid True)\n\n\n# Text Area with Character Counter\n\nTo have a text area display a character counter, specify its `setMaxLength`\nconfiguration option, and also add a `HelperText.characterCounter` as a child\nof `HelperText.helperLine`.\n\n    [ TextArea.filled\n        (TextArea.config |> TextArea.setMaxLength (Just 18))\n    , HelperText.helperLine [] [ HelperText.characterCounter [] ]\n    ]\n\n","unions":[{"name":"Config","comment":" Configuration of a text area\n","args":["msg"],"cases":[]}],"aliases":[],"values":[{"name":"config","comment":" Default configuration of a text area\n","type":"Material.TextArea.Config msg"},{"name":"filled","comment":" Filled text area view function\n","type":"Material.TextArea.Config msg -> Html.Html msg"},{"name":"outlined","comment":" Outlined text area view function\n","type":"Material.TextArea.Config msg -> Html.Html msg"},{"name":"setAttributes","comment":" Specify additional attributes\n","type":"List.List (Html.Attribute msg) -> Material.TextArea.Config msg -> Material.TextArea.Config msg"},{"name":"setCols","comment":" Specify a text area's number of columns\n","type":"Maybe.Maybe Basics.Int -> Material.TextArea.Config msg -> Material.TextArea.Config msg"},{"name":"setDisabled","comment":" Specify a text area to be disabled\n\nDisabled text areas cannot be interacted with and have no visual interaction\neffect.\n\n","type":"Basics.Bool -> Material.TextArea.Config msg -> Material.TextArea.Config msg"},{"name":"setFullwidth","comment":" Specify a text area to be fullwidth\n","type":"Basics.Bool -> Material.TextArea.Config msg -> Material.TextArea.Config msg"},{"name":"setLabel","comment":" Specify a text area's label\n","type":"Maybe.Maybe String.String -> Material.TextArea.Config msg -> Material.TextArea.Config msg"},{"name":"setMaxLength","comment":" Specify a text area's maximum length\n","type":"Maybe.Maybe Basics.Int -> Material.TextArea.Config msg -> Material.TextArea.Config msg"},{"name":"setMinLength","comment":" Specify a text area's minimum length\n","type":"Maybe.Maybe Basics.Int -> Material.TextArea.Config msg -> Material.TextArea.Config msg"},{"name":"setOnChange","comment":" Specify a message when the user confirms a changed value inside the text\narea\n","type":"(String.String -> msg) -> Material.TextArea.Config msg -> Material.TextArea.Config msg"},{"name":"setOnInput","comment":" Specify a message when the user changes the value inside the text area\n","type":"(String.String -> msg) -> Material.TextArea.Config msg -> Material.TextArea.Config msg"},{"name":"setPlaceholder","comment":" Specify a text area's placeholder\n","type":"Maybe.Maybe String.String -> Material.TextArea.Config msg -> Material.TextArea.Config msg"},{"name":"setRequired","comment":" Specify a text area to be required\n","type":"Basics.Bool -> Material.TextArea.Config msg -> Material.TextArea.Config msg"},{"name":"setRows","comment":" Specify a text area's number of rows\n","type":"Maybe.Maybe Basics.Int -> Material.TextArea.Config msg -> Material.TextArea.Config msg"},{"name":"setValid","comment":" Specify a text area to be valid\n","type":"Basics.Bool -> Material.TextArea.Config msg -> Material.TextArea.Config msg"},{"name":"setValue","comment":" Specify a text area's value\n","type":"Maybe.Maybe String.String -> Material.TextArea.Config msg -> Material.TextArea.Config msg"}],"binops":[]},{"name":"Material.TextField","comment":" Text fields allow users to input, edit, and select text.\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Configuration](#configuration)\n      - [Configuration Options](#configuration-options)\n  - [Filled Text Field](#filled-text-field)\n  - [Outlined Text Field](#outlined-text-field)\n  - [Full Width Text Field](#full-width-text-field)\n  - [Multiline Text Field](#multiline-text-field)\n  - [Disabled Text Field](#disabled-text-field)\n  - [Password Text Field](#password-text-field)\n  - [Required Text Field](#disabled-text-field)\n  - [Valid Text Field](#valid-text-field)\n  - [Text Field with Leading Icon](#text-field-with-leading-icon)\n  - [Text Field with Trailing Icon](#text-field-with-trailing-icon)\n  - [Text Field with Character Counter](#text-field-with-character-counter)\n\n\n# Resources\n\n  - [Demo: Text Fields](https://aforemny.github.io/material-components-web-elm/#text-field)\n  - [Material Design Guidelines: Menus](https://material.io/go/design-menus)\n  - [MDC Web: Menu](https://github.com/material-components/material-components-web/tree/master/packages/mdc-menu)\n  - [Sass Mixins (MDC Web)](https://github.com/material-components/material-components-web/tree/master/packages/mdc-menu#sass-mixins)\n\n\n# Basic Usage\n\n    import Material.TextField as TextField\n\n    type Msg\n        = ValueChanged String\n\n    main =\n        TextField.filled\n            (TextField.config\n                |> TextField.setLabel (Just \"My text field\")\n                |> TextField.setValue (Just \"hello world\")\n                |> TextField.setOnInput ValueChanged\n            )\n\n\n# Configuration\n\n@docs Config, config\n\n\n## Configuration Options\n\n@docs setOnInput\n@docs setOnChange\n@docs setLabel\n@docs setFullwidth\n@docs setValue\n@docs setPlaceholder\n@docs setDisabled\n@docs setRequired\n@docs setValid\n@docs setMinLength\n@docs setMaxLength\n@docs setPattern\n@docs setType\n@docs setMin\n@docs setMax\n@docs setStep\n@docs setLeadingIcon\n@docs setTrailingIcon\n@docs setAttributes\n\n\n# Filled Text Field\n\n\n# Filled Text Field\n\n    TextField.filled TextField.config\n\n@docs filled\n\n\n# Outlined Text Field\n\nText fields may have a visible outlined around them by using their\n`outlined` variant.\n\n    TextField.outlined TextField.config\n\nNote that `setFullwidth` does not have any effect on an outlined text field.\n\n@docs outlined\n\n\n# Full Width Text Field\n\nTo make a text field span all of its available width, set its `setFullwidth`\nconfiguration option to `True`.\n\n    TextField.filled\n        (TextField.config |> TextField.setFullwidth True)\n\nFull width text fields do not support a label and will ignore the `setLabel`\nconfiguration option. You may use `setPlaceholder` or provide an extraneous\nlabel for a full width text field.\n\nOutlined text fields do not support `setFullwidth` and wll ignore this\nconfiguration option.\n\n\n# Disabled Text Field\n\nTo disable a text field, set its `setDisabled` configuration option to `True`.\n\n    TextField.filled\n        (TextField.config |> TextField.setDisabled True)\n\n\n# Password Text Field\n\nTo mark a text field as an input for entering a passwort, use its `setType`\nconfiguration option to specify `\"password\"`.\n\n    TextField.filled\n        (TextField.config |> TextField.setType (Just \"password\"))\n\nOther input types besides `\"password\"` may or may not be supported.\n\n\n# Required Text Field\n\nTo mark a text field as required, set its `setRequired` configuration option to\n`True`.\n\n    TextField.filled\n        (TextField.config |> TextField.setRequired True)\n\n\n# Valid Text Field\n\nTo mark a text field as valid, set its `setValid` configuration option to\n`True`.\n\n    TextField.filled\n        (TextField.config |> TextField.setValid True)\n\n\n# Text Field with Leading Icon\n\nTo have a text field display a leading icon, use its `setLeadingIcon`\nconfiguration option to specify a value of `Icon`.\n\n    TextField.filled\n        (TextField.config\n            |> TextField.setLeadingIcon\n                (Just (TextField.icon [] \"wifi\"))\n        )\n\n@docs Icon, icon\n\n\n# Text Field with Trailing Icon\n\nTo have a text field display a trailing icon, use its `setTrailingIcon`\nconfiguration option to specify a value of `Icon`.\n\n    TextField.filled\n        (TextField.config\n            |> TextField.setTrailingIcon\n                (Just (TextField.icon [] \"clear\"))\n        )\n\n\n# Text Field with Character Counter\n\nTo have a text field display a character counter, specify its `setMaxLength`\nconfiguration option, and also add a `HelperText.characterCounter` as a child\nof `HelperText.helperLine`.\n\n    [ TextField.filled\n        (TextField.config |> TextField.setMaxLength (Just 18))\n    , HelperText.helperLine [] [ HelperText.characterCounter [] ]\n    ]\n\n","unions":[{"name":"Config","comment":" Configuration of a text field\n","args":["msg"],"cases":[]},{"name":"Icon","comment":" Text field trailing or leading icon -\n","args":["msg"],"cases":[]}],"aliases":[],"values":[{"name":"config","comment":" Default configuration of a text field\n","type":"Material.TextField.Config msg"},{"name":"filled","comment":" Filled text field view function\n","type":"Material.TextField.Config msg -> Html.Html msg"},{"name":"icon","comment":" A text field's icon, either leading or trailing\n","type":"List.List (Html.Attribute msg) -> String.String -> Material.TextField.Icon msg"},{"name":"outlined","comment":" Outlined text field view function\n","type":"Material.TextField.Config msg -> Html.Html msg"},{"name":"setAttributes","comment":" Specify additional attributes\n","type":"List.List (Html.Attribute msg) -> Material.TextField.Config msg -> Material.TextField.Config msg"},{"name":"setDisabled","comment":" Specify a text field to be disabled\n\nDisabled text fields cannot be interacted with and have no visual interaction\neffect.\n\n","type":"Basics.Bool -> Material.TextField.Config msg -> Material.TextField.Config msg"},{"name":"setFullwidth","comment":" Specify a text field to be fullwidth\n","type":"Basics.Bool -> Material.TextField.Config msg -> Material.TextField.Config msg"},{"name":"setLabel","comment":" Specify a text field's label\n","type":"Maybe.Maybe String.String -> Material.TextField.Config msg -> Material.TextField.Config msg"},{"name":"setLeadingIcon","comment":" Specify a text field's leading icon\n","type":"Maybe.Maybe (Material.TextField.Icon msg) -> Material.TextField.Config msg -> Material.TextField.Config msg"},{"name":"setMax","comment":" Specify a text field's maximum value\n","type":"Maybe.Maybe Basics.Int -> Material.TextField.Config msg -> Material.TextField.Config msg"},{"name":"setMaxLength","comment":" Specify a text field's maximum length\n","type":"Maybe.Maybe Basics.Int -> Material.TextField.Config msg -> Material.TextField.Config msg"},{"name":"setMin","comment":" Specify a text field's minimum value\n","type":"Maybe.Maybe Basics.Int -> Material.TextField.Config msg -> Material.TextField.Config msg"},{"name":"setMinLength","comment":" Specify a text field's minimum length\n","type":"Maybe.Maybe Basics.Int -> Material.TextField.Config msg -> Material.TextField.Config msg"},{"name":"setOnChange","comment":" Specify a message when the user confirms a changed value inside the text\nfield\n","type":"(String.String -> msg) -> Material.TextField.Config msg -> Material.TextField.Config msg"},{"name":"setOnInput","comment":" Specify a message when the user changes the value inside the text field\n","type":"(String.String -> msg) -> Material.TextField.Config msg -> Material.TextField.Config msg"},{"name":"setPattern","comment":" Specify a text field's pattern\n","type":"Maybe.Maybe String.String -> Material.TextField.Config msg -> Material.TextField.Config msg"},{"name":"setPlaceholder","comment":" Specify a text field's placeholder\n","type":"Maybe.Maybe String.String -> Material.TextField.Config msg -> Material.TextField.Config msg"},{"name":"setRequired","comment":" Specify a text field to be required\n","type":"Basics.Bool -> Material.TextField.Config msg -> Material.TextField.Config msg"},{"name":"setStep","comment":" Specify a text field's step value\n","type":"Maybe.Maybe Basics.Int -> Material.TextField.Config msg -> Material.TextField.Config msg"},{"name":"setTrailingIcon","comment":" Specify a text field's trailing icon\n","type":"Maybe.Maybe (Material.TextField.Icon msg) -> Material.TextField.Config msg -> Material.TextField.Config msg"},{"name":"setType","comment":" Specify a text field's type\n","type":"Maybe.Maybe String.String -> Material.TextField.Config msg -> Material.TextField.Config msg"},{"name":"setValid","comment":" Specify a text field to be valid\n","type":"Basics.Bool -> Material.TextField.Config msg -> Material.TextField.Config msg"},{"name":"setValue","comment":" Specify a text field's value\n","type":"Maybe.Maybe String.String -> Material.TextField.Config msg -> Material.TextField.Config msg"}],"binops":[]},{"name":"Material.Theme","comment":" The Material Design color system can be used to create a color scheme that\nreflects your brand or style.\n\nMaterial Components Web use a theme comprised of a primary and a secondary\ncolor. Those colors can be conveniently override via Sass (see below), and\n[less conveniently via\nCSS](https://github.com/material-components/material-components-web/tree/master/packages/mdc-theme#non-sass-customization).\nThey cannot be changed from Elm at all.\n\nWhile this module defines attributes that mimic the CSS classes available by\nMDC Web, it is recommended to use MDC Web's Sass API to do\nthemeing since it is a lot more flexible. I highly recommend you [check it\nout](https://github.com/material-components/material-components-web/tree/master/packages/mdc-theme#sass-mixins-variables-and-functions)!\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Changing Theme via SASS](#chaging-theme-via-sass)\n  - [Colors](#colors)\n      - [Text Colors](#text-colors)\n      - [Background Colors](#background-colors)\n  - [Text Styles](#text-styles)\n      - [Text Styles on Background](#text-styles-on-background)\n      - [Text Styles on Light Background](#text-styles-on-light-background)\n      - [Text Styles on Dark Background](#text-styles-on-dark-background)\n\n\n# Resources\n\n  - [Demo: Theme](https://aforemny.github.io/material-components-web-elm/#theme)\n  - [Material Design Guidelines: Color](https://material.io/go/design-theming)\n  - [MDC Web: Theme](https://github.com/material-components/material-components-web/tree/master/packages/mdc-theme)\n  - [Sass Mixins (MDC Web)](https://github.com/material-components/material-components-web/tree/master/packages/mdc-theme#sass-mixins-variables-and-functions)\n\n\n# Basic Usage\n\n    import Material.Theme as Theme\n\n    main =\n        Html.span [ Theme.primary ] [ text \"Primary color\" ]\n\n\n# Changing Theme via SASS\n\n```scss\n$mdc-theme-primary: #fcb8ab;\n$mdc-theme-secondary: #feeae6;\n$mdc-theme-on-primary: #442b2d;\n$mdc-theme-on-secondary: #442b2d;\n\n@import \"@material/button/mdc-button\";\n```\n\n\n# Colors\n\n\n## Text Colors\n\n@docs primary, secondary, background\n@docs onPrimary, onSecondary, onSurface\n\n\n## Background Colors\n\n@docs primaryBg, secondaryBg, surface\n\n\n# Text Styles\n\nMDC Web use a system that defines five **text styles**. In addition to the\ntheme's background color, they can be used on either light or dark background.\nThe text styles are defined as follows:\n\nThose text styles can be used on light background, dark background and on the\ntheme's background color whether it is light or dark.\n\n  - **primary**: Used for most text\n  - **secondary**: Used for text which is lower in the visual hierarchy\n  - **hint**: Used for text hints, such as those in text fields and labels\n  - **disabled**: Used for text in disabled components and content\n  - **icon**: Used for icons\n\nPlease note that the primary and secondary text style _do not_ correspond to\nthe theme's primary or secondary colors.\n\n\n## Text Styles on Background\n\n@docs textPrimaryOnBackground, textSecondaryOnBackground, textHintOnBackground\n@docs textDisabledOnBackground, textIconOnBackground\n\n\n## Text Styles on Light Background\n\n@docs textPrimaryOnLight, textSecondaryOnLight, textHintOnLight\n@docs textDisabledOnLight, textIconOnLight\n\n\n## Text Styles on Dark Background\n\n@docs textPrimaryOnDark, textSecondaryOnDark, textHintOnDark\n@docs textDisabledOnDark, textIconOnDark\n\n","unions":[],"aliases":[],"values":[{"name":"background","comment":" Sets the background color to the theme background color\n","type":"Html.Attribute msg"},{"name":"onPrimary","comment":" Sets the text color to the theme on-primary color\n\nThe theme's on-primary color is a text color that works best on a primary color\nbackground.\n\n","type":"Html.Attribute msg"},{"name":"onSecondary","comment":" Sets the text color to the theme on-secondary color\n\nThe theme's on-secondary color is a text color that works best on a secondary\ncolor background.\n\n","type":"Html.Attribute msg"},{"name":"onSurface","comment":" Sets the text color to the theme on-surface color\n\nThe theme's on-surface color is a text color that works best on a surface\ncolor background.\n\n","type":"Html.Attribute msg"},{"name":"primary","comment":" Sets the text color to the theme primary color\n","type":"Html.Attribute msg"},{"name":"primaryBg","comment":" Sets the background color to the theme primary color\n","type":"Html.Attribute msg"},{"name":"secondary","comment":" Sets the text color to the theme secondary color\n","type":"Html.Attribute msg"},{"name":"secondaryBg","comment":" Sets the background color to the theme secondary color\n","type":"Html.Attribute msg"},{"name":"surface","comment":" Sets the surface color to the theme surface color\n","type":"Html.Attribute msg"},{"name":"textDisabledOnBackground","comment":" Sets text to a suitable color for the disabled text style on top of the\nbackground color\n","type":"Html.Attribute msg"},{"name":"textDisabledOnDark","comment":" Sets text to a suitable color for the disabled text style on top of dark\nbackground\n","type":"Html.Attribute msg"},{"name":"textDisabledOnLight","comment":" Sets text to a suitable color for the disabled text style on top of light\nbackground\n","type":"Html.Attribute msg"},{"name":"textHintOnBackground","comment":" Sets text to a suitable color for the hint text style on top of the\nbackground color\n","type":"Html.Attribute msg"},{"name":"textHintOnDark","comment":" Sets text to a suitable color for the hint text style on top of dark\nbackground\n","type":"Html.Attribute msg"},{"name":"textHintOnLight","comment":" Sets text to a suitable color for the hint text style on top of light\nbackground\n","type":"Html.Attribute msg"},{"name":"textIconOnBackground","comment":" Sets text to a suitable color for the icon text style on top of the\nbackground color\n","type":"Html.Attribute msg"},{"name":"textIconOnDark","comment":" Sets text to a suitable color for the icon text style on top of dark\nbackground\n","type":"Html.Attribute msg"},{"name":"textIconOnLight","comment":" Sets text to a suitable color for the icon text style on top of light\nbackground\n","type":"Html.Attribute msg"},{"name":"textPrimaryOnBackground","comment":" Sets text to a suitable color for the primary text style on top of the\nbackground color\n","type":"Html.Attribute msg"},{"name":"textPrimaryOnDark","comment":" Sets text to a suitable color for the primary text style on top of dark\nbackground\n","type":"Html.Attribute msg"},{"name":"textPrimaryOnLight","comment":" Sets text to a suitable color for the primary text style on top of light\nbackground\n","type":"Html.Attribute msg"},{"name":"textSecondaryOnBackground","comment":" Sets text to a suitable color for the secondary text style on top of the\nbackground color\n","type":"Html.Attribute msg"},{"name":"textSecondaryOnDark","comment":" Sets text to a suitable color for the secondary text style on top of dark\nbackground\n","type":"Html.Attribute msg"},{"name":"textSecondaryOnLight","comment":" Sets text to a suitable color for the secondary text style on top of light\nbackground\n","type":"Html.Attribute msg"}],"binops":[]},{"name":"Material.TopAppBar","comment":" Top App Bar acts as a container for items such as application title,\nnavigation icon, and action items.\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Configuration](#configuration)\n      - [Configuration Options](#configuration-options)\n  - [Top App Bar](#top-app-bar)\n      - [Top App Bar with Action Items](#top-app-bar-with-action-items)\n  - [Fixed Variant](#fixed-variant)\n  - [Short Variant](#short-variant)\n      - [Short Always Closed Variant](#short-always-closed-variant)\n  - [Prominent Variant](#prominent-variant)\n  - [Dense Variant](#dense-variant)\n\n\n# Resources\n\n  - [Demo: Top App Bars](https://aforemny.github.io/material-components-web-elm/#top-app-bar)\n  - [Material Design Guidelines: Top App Bar](https://material.io/go/design-app-bar-top)\n  - [MDC Web: List](https://github.com/material-components/material-components-web/tree/master/packages/mdc-top-app-bar)\n  - [Sass Mixins (MDC Web)](https://github.com/material-components/material-components-web/tree/master/packages/mdc-top-app-bar#sass-mixins)\n\n\n# Basic Usage\n\n    import Material.TopAppBar as TopAppBar\n\n    main =\n        TopAppBar.regular TopAppBar.config\n            [ TopAppBar.row []\n                [ TopAppBar.section [ TopAppBar.alignStart ]\n                    [ IconButton.iconButton\n                        (IconButton.config\n                            |> IconButton.setAttributes\n                                [ TopAppBar.navigationIcon ]\n                        )\n                        \"menu\"\n                    , Html.span [ TopAppBar.title ]\n                        [ text \"Title\" ]\n                    ]\n                ]\n            ]\n\n\n# Configuration\n\n@docs Config, config\n\n\n## Configuration Options\n\n@docs setFixed\n@docs setDense\n@docs setAttributes\n\n\n# Top App Bar\n\nUsually a top app bar contains one row with at least one start-aligned section.\nThis is where you would normally place your navigation icon and title.\n\n@docs regular\n@docs row, section, alignEnd, alignStart\n@docs navigationIcon, title\n\n\n## Top App Bar with Action Items\n\nA top app bar can contain action items that are placed on the opposite side of\nthe navigation icon. To do so, add another end-aligned section to the top app\nbar's row. Do not forget to set the `actionItem` attribute on the icons.\n\n    TopAppBar.regular TopAppBar.config\n        [ TopAppBar.row []\n            [ TopAppBar.section [ TopAppBar.alignStart ]\n                [ IconButton.iconButton\n                    (IconButton.config\n                        |> IconButton.setAttributes\n                            [ TopAppBar.navigationIcon ]\n                    )\n                    \"menu\"\n                , Html.span [ TopAppBar.title ]\n                    [ text \"Title\" ]\n                ]\n            , TopAppBar.section [ TopAppBar.alignEnd ]\n                [ IconButton.iconButton\n                    (IconButton.config\n                        |> IconButton.setAttributes\n                            [ TopAppBar.actionItem ]\n                    )\n                    \"print\"\n                , IconButton.iconButton\n                    (IconButton.config\n                        |> IconButton.setAttributes\n                            [ TopAppBar.actionItem ]\n                    )\n                    \"bookmark\"\n                ]\n            ]\n        ]\n\n@docs actionItem\n\n\n# Fixed Variant\n\nTo make a top app bar fixed to the top, set its `setFixed` configuration option\nto `True`. Since a fixed top app bar would overlay the pages content, an\nappropriate margin has to be applied to the page's content, called the _fixed\nadjust_.\n\n    TopAppBar.regular\n        (TopAppBar.config |> TopAppBar.setFixed True)\n        []\n\n@docs fixedAdjust\n@docs denseFixedAdjust\n@docs denseProminentFixedAdjust\n@docs prominentFixedAdjust\n@docs shortFixedAdjust\n\n\n# Short Variant\n\nShort top app bars collapse to the navigation icon side when scrolled.\n\n    TopAppBar.short TopAppBar.config []\n\n@docs short\n\n\n## Short Always Closed Variant\n\nA short top app bar can be configured to always appear closed.\n\n    TopAppBar.shortCollapsed TopAppBar.config []\n\n@docs shortCollapsed\n\n\n# Prominent Variant\n\nTo make a top app bar taller than the default, you may use a prominent top app bar.\n\n    TopAppBar.prominent TopAppBar.config []\n\n@docs prominent\n\n\n# Dense Variant\n\nTo make a top app bar shorter than the default, use its `setDense`\nconfiguration option.\n\n    TopAppBar.regular\n        (TopAppBar.config |> TopAppBar.setDense True)\n        []\n\n","unions":[{"name":"Config","comment":" Configuration of a top app bar\n","args":["msg"],"cases":[]}],"aliases":[],"values":[{"name":"actionItem","comment":" Apply this attribute to a icon button to mark it as a top app bar's action\nitem\n","type":"Html.Attribute msg"},{"name":"alignEnd","comment":" End-align a top app bar's `section`\n","type":"Html.Attribute msg"},{"name":"alignStart","comment":" Start-align a top app bar's `section`\n","type":"Html.Attribute msg"},{"name":"config","comment":" Default configuration of a top app bar\n","type":"Material.TopAppBar.Config msg"},{"name":"denseFixedAdjust","comment":" Appropriate padding for a dense fixed top app bar.\n\nApply this to the page's content so that a fixed top app bar does not overlay\nthe content.\n\n","type":"Html.Attribute msg"},{"name":"denseProminentFixedAdjust","comment":" Appropriate padding for a dense prominent fixed top app bar.\n\nApply this to the page's content so that a fixed top app bar does not overlay\nthe content.\n\n","type":"Html.Attribute msg"},{"name":"fixedAdjust","comment":" Appropriate padding for a fixed top app bar.\n\nApply this to the page's content so that a fixed top app bar does not overlay\nthe content.\n\n","type":"Html.Attribute msg"},{"name":"navigationIcon","comment":" Apply this attribute to an icon button to mark it as a top app bar's\nnavigation icon\n","type":"Html.Attribute msg"},{"name":"prominent","comment":" Prominent top app bar view function\n","type":"Material.TopAppBar.Config msg -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"prominentFixedAdjust","comment":" Appropriate padding for a prominent fixed top app bar.\n\nApply this to the page's content so that a fixed top app bar does not overlay\nthe content.\n\n","type":"Html.Attribute msg"},{"name":"regular","comment":" Regular top app bar view function\n","type":"Material.TopAppBar.Config msg -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"row","comment":" A row is the first child of a top app bar. It contains the top app bar's\n`section`s.\n","type":"List.List (Html.Attribute msg) -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"section","comment":" Sections subdivide the top app bar's rows. A section may be start- or\nend-aligned. Usually, the first section is start-aligned and contains the top\napp bar's navigation icon and title.\n","type":"List.List (Html.Attribute msg) -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"setAttributes","comment":" Specify additional attributes\n","type":"List.List (Html.Attribute msg) -> Material.TopAppBar.Config msg -> Material.TopAppBar.Config msg"},{"name":"setDense","comment":" Specify whether a top app bar is dense\n\nA dense top app bar is more compact, featuring smaller than usual margins.\n\n","type":"Basics.Bool -> Material.TopAppBar.Config msg -> Material.TopAppBar.Config msg"},{"name":"setFixed","comment":" Specify whether a top app bar is fixed\n\nA fixed top app bar does not scroll away when the user is scrolling the page.\n\n","type":"Basics.Bool -> Material.TopAppBar.Config msg -> Material.TopAppBar.Config msg"},{"name":"short","comment":" Short top app bar view function\n","type":"Material.TopAppBar.Config msg -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"shortCollapsed","comment":" Short always closed top app bar view function\n","type":"Material.TopAppBar.Config msg -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"shortFixedAdjust","comment":" Appropriate padding for a short fixed top app bar.\n\nApply this to the page's content so that a fixed top app bar does not overlay\nthe content.\n\n","type":"Html.Attribute msg"},{"name":"title","comment":" Apply this attribute to a element to mark it as the top app bar's title\n","type":"Html.Attribute msg"}],"binops":[]},{"name":"Material.Typography","comment":" Material Design's text sizes and styles were developed to balance content\ndensity and reading comfort under typical usage conditions.\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Typography Variants](#typography-variants)\n\n\n# Resources\n\n  - [Demo: Typography](https://aforemny.github.io/material-components-web-elm/#typography)\n  - [Material Design Guidelines: Typography](https://material.io/go/design-typography)\n  - [MDC Web: Typography](https://github.com/material-components/material-components-web/tree/master/packages/mdc-typography)\n  - [Sass Mixins (MDC Web)](https://github.com/material-components/material-components-web/tree/master/packages/mdc-typography#sass-variables-and-mixins)\n\n\n# Basic Usage\n\nFor typography to work best, it is necessary to set the font to Roboto. This is\narchieved by the `mdc-typography` class, and we recommend to set it globally to\nthe root of your page.\n\n    import Material.Typography as Typography\n\n    Html.h1 [ Typography.headline1 ] [ text \"Headline\" ]\n\n\n# Typography Variants\n\nTypography elements come in the following thirteen variants.\n\n@docs headline1, headline2, headline3, headline4, headline5, headline6\n@docs body1, body2\n@docs subtitle1, subtitle2\n@docs caption, button, overline\n@docs typography\n\n","unions":[],"aliases":[],"values":[{"name":"body1","comment":" Sets font properties as Body 1\n","type":"Html.Attribute msg"},{"name":"body2","comment":" Sets font properties as Body 2\n","type":"Html.Attribute msg"},{"name":"button","comment":" Sets font properties as Button\n","type":"Html.Attribute msg"},{"name":"caption","comment":" Sets font properties as Caption\n","type":"Html.Attribute msg"},{"name":"headline1","comment":" Sets font properties as Headline 1\n","type":"Html.Attribute msg"},{"name":"headline2","comment":" Sets font properties as Headline 2\n","type":"Html.Attribute msg"},{"name":"headline3","comment":" Sets font properties as Headline 3\n","type":"Html.Attribute msg"},{"name":"headline4","comment":" Sets font properties as Headline 4\n","type":"Html.Attribute msg"},{"name":"headline5","comment":" Sets font properties as Headline 5\n","type":"Html.Attribute msg"},{"name":"headline6","comment":" Sets font properties as Headline 6\n","type":"Html.Attribute msg"},{"name":"overline","comment":" Sets font properties as Overline\n","type":"Html.Attribute msg"},{"name":"subtitle1","comment":" Sets font properties as Subtitle 1\n","type":"Html.Attribute msg"},{"name":"subtitle2","comment":" Sets font properties as Subtitle 2\n","type":"Html.Attribute msg"},{"name":"typography","comment":" Sets the font to Roboto\n","type":"Html.Attribute msg"}],"binops":[]}]