[{"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  - [Text Button](#text-button)\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 exposing (buttonConfig, textButton)\n\n    type Msg\n        = ButtonClicked\n\n    main =\n        textButton\n            { buttonConfig | onClick = Just ButtonClicked }\n            \"Text\"\n\n\n# Text Button\n\n@docs textButton, buttonConfig, ButtonConfig\n\n\n# Button Variants\n\nButtons may appear in different variants. Use `textButton` or `outlinedButton`\nif you want a button that is flush with the surface, and `raisedButton` or\n`unelevatedButton` for a button that is contained.\n\n@docs outlinedButton, raisedButton, unelevatedButton\n\n\n# Button with Icons\n\nTo add an icon to a button, set its `icon` configuration field to the name of a\n[Material Icon](https://material.io/icons). If you want the icon to be\npositioned after the button's label, also set the `trailingIcon` configuration\nfield to `True`.\n\n\n## Button with Leading Icon\n\n    textButton\n        { buttonConfig | icon = Just \"favorite\" }\n        \"Like\"\n\n\n## Button with Trailing Icon\n\n    textButton\n        { buttonConfig\n            | icon = Just \"favorite\"\n            , trailingIcon = True\n        }\n        \"Like\"\n\n\n# Disabled Button\n\nTo disable a button, set its `disabled` configuration field to `True`. Disabled\nbuttons cannot be interacted with and have no visual interaction effect.\n\n    textButton { buttonConfig | disabled = True } \"Disabled\"\n\n\n# Dense Button\n\nTo make a button's text and container margins slightly smaller, set the `dense`\nconfiguration field to `True`.\n\n    textButton { buttonConfig | dense = True } \"Dense\"\n\n\n# Link Button\n\nButtons may specify the `href` configuration field in which case the button essentially behaves like a HTML `a` element. You may specify the configuration field `target` as well.\n\n    textButton { buttonConfig | href = Just \"https://elm-lang.org\" } \"Visit\"\n\nNote that link buttons cannot be disabled.\n\n","unions":[],"aliases":[{"name":"ButtonConfig","comment":" Configuration of a button\n","args":["msg"],"type":"{ icon : Maybe.Maybe String.String, trailingIcon : Basics.Bool, disabled : Basics.Bool, dense : Basics.Bool, href : Maybe.Maybe String.String, target : Maybe.Maybe String.String, additionalAttributes : List.List (Html.Attribute msg), onClick : Maybe.Maybe msg }"}],"values":[{"name":"buttonConfig","comment":" Default configuration of a button\n","type":"Material.Button.ButtonConfig msg"},{"name":"outlinedButton","comment":" Outlined button variant (flush with outline)\n","type":"Material.Button.ButtonConfig msg -> String.String -> Html.Html msg"},{"name":"raisedButton","comment":" Raised button variant (contained with elevation)\n","type":"Material.Button.ButtonConfig msg -> String.String -> Html.Html msg"},{"name":"textButton","comment":" Text button variant (flush without outline)\n","type":"Material.Button.ButtonConfig msg -> String.String -> Html.Html msg"},{"name":"unelevatedButton","comment":" Unelevated button variant (contained without elevation)\n","type":"Material.Button.ButtonConfig 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  - [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 exposing (buttonConfig)\n    import Material.Card\n        exposing\n            ( card\n            , cardActionButton\n            , cardActionIcon\n            , cardActions\n            , cardBlock\n            , cardConfig\n            )\n    import Material.IconButton exposing (iconButtonConfig)\n\n    main =\n        card cardConfig\n            { blocks =\n                [ cardBlock <|\n                    Html.div []\n                        [ Html.h2 [] [ text \"Title\" ]\n                        , Html.h3 [] [ text \"Subtitle\" ]\n                        ]\n                , cardBlock <|\n                    Html.div []\n                        [ Html.p [] [ text \"Lorem ipsum…\" ] ]\n                ]\n            , actions =\n                Just <|\n                    cardActions\n                        { buttons =\n                            [ cardActionButton buttonConfig\n                                \"Visit\"\n                            ]\n                        , icons =\n                            [ cardActionIcon iconButtonConfig\n                                \"favorite\"\n                            ]\n                        }\n            }\n\n\n# Card\n\n@docs card, cardConfig, CardConfig, CardContent\n\n\n## Outlined Card\n\nA card may have a border by settings its `outlined` configuration field to\n`True`.\n\n    card { cardConfig | outlined = True }\n        { blocks =\n            [ cardBlock <|\n                Html.div [] [ Html.h1 [] [ text \"Card\" ] ]\n            ]\n        , actions = Nothing\n        }\n\n\n# Card Blocks\n\nA card's content is primary comprised of blocks. Blocks may be comprised of\narbitrary HTML (generic `cardBlock`) or a media element (`cardMedia`).\nOptionally, a group of card blocks can be marked as the card's primary action\nwhich makes the group of card blocks interactable.\n\n@docs CardBlock\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    cardBlock <|\n        Html.div []\n            [ Html.h2 [] [ text \"Title\" ]\n            , Html.h3 [] [ text \"Subtitle\" ]\n            ]\n\n@docs cardBlock\n\n\n## Media Block\n\nCard 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 cardMedia, cardMediaConfig, CardMediaConfig, CardMediaAspect\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    cardPrimaryAction\n        { cardPrimaryActionConfig\n            | onClick = Just CardClicked\n        }\n        [ cardBlock <|\n            Html.h2 [] [ text \"Title\" ]\n        , cardBlock <|\n            Html.p [] [ text \"Lorem ipsum…\" ]\n        ]\n\n@docs cardPrimaryActionConfig, cardPrimaryAction\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    cardActions\n        { buttons =\n            [ cardActionButton buttonConfig \"View\" ]\n        , actions =\n            [ cardActionIcon iconButtonConfig \"favorite\" ]\n        }\n\n@docs cardActions, CardActions, cardActionButton, cardActionIcon\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 cardFullBleedActions\n\n","unions":[{"name":"CardActions","comment":" Card actions type\n","args":["msg"],"cases":[]},{"name":"CardBlock","comment":" Card's content block\n","args":["msg"],"cases":[]},{"name":"CardMediaAspect","comment":" Card media block's aspect ratio\n","args":[],"cases":[["Square",[]],["SixteenToNine",[]]]}],"aliases":[{"name":"CardConfig","comment":" Configuration of a card\n","args":["msg"],"type":"{ outlined : Basics.Bool, additionalAttributes : List.List (Html.Attribute msg) }"},{"name":"CardContent","comment":" The content of a card is comprised of _blocks_ and _actions_.\n","args":["msg"],"type":"{ blocks : List.List (Material.Card.CardBlock msg), actions : Maybe.Maybe (Material.Card.CardActions msg) }"},{"name":"CardMediaConfig","comment":" Configuration of a card's media block\n","args":["msg"],"type":"{ aspect : Maybe.Maybe Material.Card.CardMediaAspect, additionalAttributes : List.List (Html.Attribute msg) }"}],"values":[{"name":"card","comment":" Card view function\n","type":"Material.Card.CardConfig msg -> Material.Card.CardContent msg -> Html.Html msg"},{"name":"cardActionButton","comment":" A card action button\n\n    cardActionButton buttonConfig \"Visit\"\n\n","type":"Material.Button.ButtonConfig msg -> String.String -> Material.Card.Button msg"},{"name":"cardActionIcon","comment":" Card action icon\n\n    cardActionIcon iconButtonConfig \"favorite\"\n\n","type":"Material.IconButton.IconButtonConfig msg -> String.String -> Material.Card.Icon msg"},{"name":"cardActions","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.CardActions msg"},{"name":"cardBlock","comment":" An arbitrary card block\n\n    cardBlock <|\n        Html.div [] [ text \"Lorem ipsum…\" ]\n\n","type":"Html.Html msg -> Material.Card.CardBlock msg"},{"name":"cardConfig","comment":" Card view function\n","type":"Material.Card.CardConfig msg"},{"name":"cardFullBleedActions","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    cardFullBleedActions\n        (cardActionButton buttonConfig [ text \"Visit\" ])\n\n","type":"Material.Card.Button msg -> Material.Card.CardActions msg"},{"name":"cardMedia","comment":" Card media block view function\n\n    cardMedia cardMediaConfig \"media-image.jpg\"\n\n","type":"Material.Card.CardMediaConfig msg -> String.String -> Material.Card.CardBlock msg"},{"name":"cardMediaConfig","comment":" Default configuration of a card's media block\n","type":"Material.Card.CardMediaConfig msg"},{"name":"cardPrimaryAction","comment":" A card's primary action block\n\n    cardPrimaryAction\n        { cardPrimaryActionConfig\n            | onClick = Just CardClicked\n        }\n        [ cardBlock <|\n            Html.div []\n                [ Html.h1 [] [ text \"Title\" ] ]\n        , cardBlock <|\n            Html.div []\n                [ Html.p [] [ text \"Lorem ipsum…\" ] ]\n        ]\n\n","type":"Material.Card.PrimaryActionConfig msg -> List.List (Material.Card.CardBlock msg) -> List.List (Material.Card.CardBlock msg)"},{"name":"cardPrimaryActionConfig","comment":" Default configuration of a card's primary action block\n","type":"Material.Card.PrimaryActionConfig 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  - [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/#checkboxes)\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        exposing\n            ( checkbox\n            , checkboxConfig\n            )\n\n    type Msg\n        = CheckboxClicked\n\n    main =\n        checkbox\n            { checkboxConfig\n                | state = Checkbox.Unchecked\n                , onChange = Just CheckboxClicked\n            }\n\n\n# Checkbox\n\n@docs checkbox, checkboxConfig, CheckboxConfig, CheckboxState\n\n\n# Checked Checkbox\n\nTo set the state of a checkbox to checked, set its `state` configuration field\nto `Checked`. To set its state to unchecked, use `Unchecked`.\n\n    checkbox { checkboxConfig | state = Checkbox.Checked }\n\n\n# Indeterminate Checkbox\n\nTo set the state of a checkbox to indeterminate, set its `state` configuration\nfield to `Indeterminate`.\n\n    checkbox\n        { checkboxConfig | state = Checkbox.Indeterminate }\n\n\n# Disabled Checkbox\n\nTo disable a checkbox, set its disabled configuration field to True. Disabled\ncheckboxes cannot be interacted with and have no visual interaction effect.\n\n    checkbox { checkboxConfig | disabled = True }\n\n","unions":[{"name":"CheckboxState","comment":" ","args":[],"cases":[["Unchecked",[]],["Checked",[]],["Indeterminate",[]]]}],"aliases":[{"name":"CheckboxConfig","comment":" Configuration of a checkbox\n","args":["msg"],"type":"{ state : Material.Checkbox.CheckboxState, disabled : Basics.Bool, additionalAttributes : List.List (Html.Attribute msg), onChange : Maybe.Maybe msg }"}],"values":[{"name":"checkbox","comment":" Checkbox view function\n","type":"Material.Checkbox.CheckboxConfig msg -> Html.Html msg"},{"name":"checkboxConfig","comment":" Default configuration of a checkbox\n","type":"Material.Checkbox.CheckboxConfig msg"}],"binops":[]},{"name":"Material.Chips","comment":" Chips are compact elements that allow users to enter information, select a\nchoice, filter content, or trigger an action.\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Choice Chips](#choice-chips)\n  - [Filter Chips](#filter-chips)\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.Chips\n        exposing\n            ( choiceChip\n            , choiceChipConfig\n            , choiceChipSet\n            )\n\n    type Msg\n        = ChipSelected String\n\n    main =\n        [ choiceChipSet []\n            [ choiceChip\n                { choiceChipConfig\n                    | selected = True\n                    , onClick = Just (ChipSelected \"One\")\n                }\n                \"Chip One\"\n            , choiceChip\n                { choiceChipConfig\n                    | onClick = Just (ChipSelected \"Two\")\n                }\n                \"Chip Two\"\n            ]\n        ]\n\n\n# Choice Chips\n\nChoice chips are a variant of chips which allow single selection from a set of\noptions.\n\n    choiceChipSet []\n        [ choiceChip\n            { choiceChipConfig\n                | selected = True\n                , onClick = Just (ChipSelected \"One\")\n            }\n            \"Chip One\"\n        , choiceChip\n            { choiceChipConfig\n                | onClick = Just (ChipSelected \"Two\")\n            }\n            \"Chip Two\"\n        ]\n\n@docs choiceChipSet, choiceChip, ChoiceChip, choiceChipConfig, ChoiceChipConfig\n\n\n# Filter Chips\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    filterChipSet []\n        [ filterChip\n            { filterChipConfig\n                | selected = True\n                , onClick = Just (ChipSelected \"Chip One\")\n            }\n            \"Tops\"\n        , filterChip\n            { filterChipConfig\n                | onClick = Just (ChipSelected \"Chip Two\")\n            }\n            \"Shoes\"\n        ]\n\n@docs filterChipSet, filterChip, FilterChip, filterChipConfig, FilterChipConfig\n\n\n# Input Chips\n\nInput chips are a variant of chips which enable user input by converting text\ninto chips.\n\n    inputChipSet []\n        [ inputChip inputChipConfig \"Chip One\"\n        , inputChip inputChipConfig \"Chip Two\"\n        ]\n\n@docs inputChipSet, inputChip, InputChip, inputChipConfig, InputChipConfig\n\n","unions":[{"name":"ChoiceChip","comment":" Choice Chip type\n","args":["msg"],"cases":[]},{"name":"FilterChip","comment":" Filter chip type\n","args":["msg"],"cases":[]},{"name":"InputChip","comment":" Input chip type\n","args":["msg"],"cases":[]}],"aliases":[{"name":"ChoiceChipConfig","comment":" Configuration of a choice chip\n","args":["msg"],"type":"{ icon : Maybe.Maybe String.String, selected : Basics.Bool, additionalAttributes : List.List (Html.Attribute msg), onClick : Maybe.Maybe msg }"},{"name":"FilterChipConfig","comment":" Configuration of a filter chip\n","args":["msg"],"type":"{ icon : Maybe.Maybe String.String, selected : Basics.Bool, additionalAttributes : List.List (Html.Attribute msg), onClick : Maybe.Maybe msg }"},{"name":"InputChipConfig","comment":" Configuration of a input chip\n","args":["msg"],"type":"{ icon : String.String, additionalAttributes : List.List (Html.Attribute msg), onClick : Maybe.Maybe msg, onTrailingIconClick : Maybe.Maybe msg }"}],"values":[{"name":"choiceChip","comment":" Choice chip view function\n","type":"Material.Chips.ChoiceChipConfig msg -> String.String -> Material.Chips.ChoiceChip msg"},{"name":"choiceChipConfig","comment":" Default configuration of a choice chip\n","type":"Material.Chips.ChoiceChipConfig msg"},{"name":"choiceChipSet","comment":" Choice chip container\n","type":"List.List (Html.Attribute msg) -> List.List (Material.Chips.ChoiceChip msg) -> Html.Html msg"},{"name":"filterChip","comment":" Filter chip view function\n","type":"Material.Chips.FilterChipConfig msg -> String.String -> Material.Chips.FilterChip msg"},{"name":"filterChipConfig","comment":" Default configuration of a filter chip\n","type":"Material.Chips.FilterChipConfig msg"},{"name":"filterChipSet","comment":" Filter chip container\n","type":"List.List (Html.Attribute msg) -> List.List (Material.Chips.FilterChip msg) -> Html.Html msg"},{"name":"inputChip","comment":" Input chip view function\n","type":"Material.Chips.InputChipConfig msg -> String.String -> Material.Chips.InputChip msg"},{"name":"inputChipConfig","comment":" Default configuration of a input chip\n","type":"Material.Chips.InputChipConfig msg"},{"name":"inputChipSet","comment":" Input chip container\n","type":"List.List (Html.Attribute msg) -> List.List (Material.Chips.InputChip msg) -> Html.Html 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  - [Basic Usage](#basic-usage)\n  - [Data Table](#data-table)\n  - [Header Row](#header-row)\n  - [Header Cell](#header-cell)\n      - [Numeric Header Cell](#numeric-header-cell)\n      - [Checkbox Header Cell](#checkbox-header-cell)\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\n        exposing\n            ( dataTable\n            , dataTableCell\n            , dataTableCellConfig\n            , dataTableConfig\n            , dataTableHeaderCell\n            , dataTableHeaderCellConfig\n            , dataTableHeaderRow\n            , dataTableRow\n            , dataTableRowConfig\n            )\n\n    main =\n        dataTable dataTableConfig\n            { thead =\n                [ dataTableHeaderRow []\n                    [ dataTableHeaderCell\n                        dataTableHeaderCellConfig\n                        [ text \"Desert\" ]\n                    ]\n                ]\n            , tbody =\n                [ dataTableRow dataTableRowConfig\n                    [ dataTableCell dataTableCellConfig\n                        [ text \"Frozen yogurt\" ]\n                    ]\n                ]\n            }\n\n\n# Data Table\n\n@docs dataTable, dataTableConfig\n\n\n# Header Row\n\n@docs dataTableHeaderRow, DataTableHeaderRow\n\n\n# Header Cell\n\n@docs dataTableHeaderCell, DataTableHeaderCell, dataTableHeaderCellConfig, DataTableHeaderCellConfig\n\n\n## Numeric Header Cell\n\n    dataTableHeaderCell\n        { dataTableHeaderCellConfig | numeric = True }\n        [ text \"Number\" ]\n\n\n## Checkbox Header Cell\n\n    import Material.Checkbox exposing (checkboxConfig)\n\n    dataTableHeaderCell\n        { dataTableHeaderCellConfig | checkbox = True }\n        [ dataTableHeaderRowCheckbox checkboxConfig ]\n\n@docs dataTableHeaderRowCheckbox\n\n\n# Row\n\n@docs dataTableRow, DataTableRow, dataTableRowConfig, DataTableRowConfig\n\n\n## Selected Row\n\n    dataTableRow { dataTableRowConfig | selected = True }\n      [ … ]\n\n\n# Cell\n\n@docs dataTableCell, DataTableCell, dataTableCellConfig, DataTableCellConfig\n\n\n## Numeric Cell\n\n    dataTableCell { dataTableCellConfig | numeric = True }\n        [ text \"123\" ]\n\n\n## Checkbox Cell\n\n    import Material.Checkbox exposing (checkboxConfig)\n\n    dataTableCell { dataTableCellConfig | checkbox = True }\n        [ dataTableRowCheckbox checkboxConfig ]\n\n@docs dataTableRowCheckbox\n\n","unions":[{"name":"DataTableCell","comment":" Cell type\n","args":["msg"],"cases":[]},{"name":"DataTableHeaderCell","comment":" Header cell type\n","args":["msg"],"cases":[]},{"name":"DataTableHeaderRow","comment":" Header row type\n","args":["msg"],"cases":[]},{"name":"DataTableRow","comment":" Row type\n","args":["msg"],"cases":[]}],"aliases":[{"name":"DataTableCellConfig","comment":" Configuration of a cell\n","args":["msg"],"type":"{ numeric : Basics.Bool, checkbox : Basics.Bool, additionalAttributes : List.List (Html.Attribute msg) }"},{"name":"DataTableHeaderCellConfig","comment":" Configuration of a header cell\n","args":["msg"],"type":"{ numeric : Basics.Bool, checkbox : Basics.Bool, additionalAttributes : List.List (Html.Attribute msg) }"},{"name":"DataTableRowConfig","comment":" Configuartion of a row\n","args":["msg"],"type":"{ selected : Basics.Bool, additionalAttributes : List.List (Html.Attribute msg) }"}],"values":[{"name":"dataTable","comment":" Data Table view function\n","type":"Material.DataTable.DataTableConfig msg -> { thead : List.List (Material.DataTable.DataTableHeaderRow msg), tbody : List.List (Material.DataTable.DataTableRow msg) } -> Html.Html msg"},{"name":"dataTableCell","comment":" Cell view function\n","type":"Material.DataTable.DataTableCellConfig msg -> List.List (Html.Html msg) -> Material.DataTable.DataTableCell msg"},{"name":"dataTableCellConfig","comment":" Default configuration of a cell\n","type":"Material.DataTable.DataTableCellConfig msg"},{"name":"dataTableConfig","comment":" Default configuration of a data table\n","type":"Material.DataTable.DataTableConfig msg"},{"name":"dataTableHeaderCell","comment":" Header cell view function\n","type":"Material.DataTable.DataTableHeaderCellConfig msg -> List.List (Html.Html msg) -> Material.DataTable.DataTableHeaderCell msg"},{"name":"dataTableHeaderCellConfig","comment":" Default configuration of a header cell\n","type":"Material.DataTable.DataTableHeaderCellConfig msg"},{"name":"dataTableHeaderRow","comment":" Header row view function\n","type":"List.List (Html.Attribute msg) -> List.List (Material.DataTable.DataTableHeaderCell msg) -> Material.DataTable.DataTableHeaderRow msg"},{"name":"dataTableHeaderRowCheckbox","comment":" Checkbox view function (header row variant)\n","type":"Material.Checkbox.CheckboxConfig msg -> Html.Html msg"},{"name":"dataTableRow","comment":" Row view function\n","type":"Material.DataTable.DataTableRowConfig msg -> List.List (Material.DataTable.DataTableCell msg) -> Material.DataTable.DataTableRow msg"},{"name":"dataTableRowCheckbox","comment":" Checkbox view function (row variant)\n","type":"Material.Checkbox.CheckboxConfig msg -> Html.Html msg"},{"name":"dataTableRowConfig","comment":" Default configuration of a row\n","type":"Material.DataTable.DataTableRowConfig msg"}],"binops":[]},{"name":"Material.Dialog","comment":" Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Dialog](#dialog)\n\n\n# Resources\n\n  - [Demo: Dialogs](https://aforemny.github.io/material-components-web-elm/#dialogs)\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 exposing (buttonConfig, textButton)\n    import Material.Dialog exposing (dialog, dialogConfig)\n\n    type Msg\n        = DialogClosed\n\n    main =\n        dialog\n            { dialogConfig\n                | open = True\n                , onClose = Just DialogClosed\n            }\n            { title = Nothing\n            , content =\n                [ text \"Discard draft?\" ]\n            , actions =\n                [ textButton\n                    { buttonConfig\n                        | onClick = Just DialogClosed\n                    }\n                    \"Cancel\"\n                , textButton\n                    { buttonConfig\n                        | onClick = Just DialogClosed\n                    }\n                    \"Discard\"\n                ]\n            }\n\n\n# Dialog\n\n@docs dialog, dialogConfig, DialogConfig, DialogContent\n\n","unions":[],"aliases":[{"name":"DialogConfig","comment":" Configuration of a dialog\n","args":["msg"],"type":"{ open : Basics.Bool, additionalAttributes : List.List (Html.Attribute msg), onClose : Maybe.Maybe msg }"},{"name":"DialogContent","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":"dialog","comment":" Dialog view function\n","type":"Material.Dialog.DialogConfig msg -> Material.Dialog.DialogContent msg -> Html.Html msg"},{"name":"dialogConfig","comment":" Default configuration of a dialog\n","type":"Material.Dialog.DialogConfig msg"}],"binops":[]},{"name":"Material.Drawer","comment":" The MDC Navigation 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  - [Permanent Drawer](#permanent-drawer)\n  - [Dismissible Drawer](#dismissible-drawer)\n  - [Modal Drawer](#modal-drawer)\n\n\n# Resources\n\n  - [Demo: Drawers](https://aforemny.github.io/material-components-web-elm/#drawers)\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 as Drawer\n        exposing\n            ( permanentDrawer\n            , permanentDrawerConfig\n            )\n    import Material.List\n        exposing\n            ( list\n            , listConfig\n            , listItem\n            , listItemConfig\n            )\n\n    main =\n        Html.div\n            [ style \"display\" \"flex\"\n            , style \"flex-flow\" \"row nowrap\"\n            ]\n            [ permanentDrawer permanentDrawerConfig\n                [ drawerContent []\n                    [ list listConfig\n                        [ listItem listItemConfig\n                            [ text \"Home\" ]\n                        , listItem listItemConfig\n                            [ text \"Log out\" ]\n                        ]\n                    ]\n                ]\n            , Html.div [] [ text \"Main Content\" ]\n            ]\n\n\n# Permanent Drawer\n\n@docs permanentDrawer, permanentDrawerConfig, PermanentDrawerConfig\n@docs drawerContent\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 drawerHeader, drawerTitle, drawerSubtitle\n\n\n# Dismissible Drawer\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@docs dismissibleDrawer, dismissibleDrawerConfig, DismissibleDrawerConfig, appContent\n\n\n# Modal Drawer\n\nModal drawers are elevated above most of the app's UI and don't affect the\nscreen's layout grid.\n\n@docs modalDrawer, modalDrawerConfig, ModalDrawerConfig, drawerScrim\n\n","unions":[],"aliases":[{"name":"DismissibleDrawerConfig","comment":" Configuration of a dismissible drawer\n","args":["msg"],"type":"{ open : Basics.Bool, additionalAttributes : List.List (Html.Attribute msg), onClose : Maybe.Maybe msg }"},{"name":"ModalDrawerConfig","comment":" Configuration of a model drawer\n","args":["msg"],"type":"{ open : Basics.Bool, additionalAttributes : List.List (Html.Attribute msg), onClose : Maybe.Maybe msg }"},{"name":"PermanentDrawerConfig","comment":" Configuration of a permanent drawer\n","args":["msg"],"type":"{ additionalAttributes : List.List (Html.Attribute msg) }"}],"values":[{"name":"appContent","comment":" Dismissible drawer's app content marker\n\nApply this attribute to the page's content for open/close animation to work.\nThe page content has to be the next sibling of the dismissible drawer.\n\n","type":"Html.Attribute msg"},{"name":"dismissibleDrawer","comment":" Dismissible drawer view function\n\n    Html.div []\n        [ dismissibleDrawer\n            { dismissibleDrawerConfig | open = True }\n            [ drawerContent [] [] ]\n        , Html.div [ Drawer.appContent ]\n            [ text \"Main Content\" ]\n        ]\n\n","type":"Material.Drawer.DismissibleDrawerConfig msg -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"dismissibleDrawerConfig","comment":" Default configuration of a dismissible drawer\n","type":"Material.Drawer.DismissibleDrawerConfig msg"},{"name":"drawerContent","comment":" Drawer content\n","type":"List.List (Html.Attribute msg) -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"drawerHeader","comment":" Drawer header view function\n\n    permanentDrawer permanentDrawerConfig\n        [ drawerHeader []\n            [ Html.h3 [ drawerTitle ] [ text \"Title\" ]\n            , Html.h6 [ drawerSubtitle ] [ text \"Subtitle\" ]\n            ]\n        , drawerContent [] []\n        ]\n\n","type":"List.List (Html.Attribute msg) -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"drawerScrim","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":"drawerSubtitle","comment":" Attribute to mark the subtitle text element of the drawer header\n","type":"Html.Attribute msg"},{"name":"drawerTitle","comment":" Attribute to mark the title text element of the drawer header\n","type":"Html.Attribute msg"},{"name":"modalDrawer","comment":" Modal drawer view function\n\n    Html.div []\n        [ modalDrawer\n            { modalDrawerConfig\n                | open = True\n                , onClick = Just DrawerClosed\n            }\n            [ drawerContent [] [] ]\n        , drawerScrim [] []\n        , Html.div [] [ text \"Main Content\" ]\n        ]\n\n","type":"Material.Drawer.ModalDrawerConfig msg -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"modalDrawerConfig","comment":" Default configuration of a modal drawer\n","type":"Material.Drawer.ModalDrawerConfig msg"},{"name":"permanentDrawer","comment":" Permanent drawer view function\n\n    Html.div\n        [ style \"display\" \"flex\"\n        , style \"flex-flow\" \"row nowrap\"\n        ]\n        [ permanentDrawer permanentDrawerConfig\n            [ drawerContent [] [] ]\n        , Html.div [] [ text \"Main Content\" ]\n        ]\n\n","type":"Material.Drawer.PermanentDrawerConfig msg -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"permanentDrawerConfig","comment":" Default configuration of a permanent drawer\n","type":"Material.Drawer.PermanentDrawerConfig 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/#elevations)\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\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Floating Action Button](#floating-action-button)\n      - [Mini FAB](#mini-fab)\n      - [Exited FAB](#exited-fab)\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/#fabs)\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\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](#extended-fab) below.\n\n    import Material.Fab exposing (fab, fabConfig)\n\n    type Msg\n        = FabClicked\n\n    main =\n        fab { fabConfig | onClick = Just FabClicked }\n            \"favorite\"\n\n\n# Floating Action Button\n\n@docs fab, fabConfig, FabConfig\n\n\n## Mini FAB\n\nIf you want the floating action button to appear in smaller size, set its mini\nconfiguration field to True.\n\n    fab { fabConfig | mini = True } \"favorite\"\n\n\n## Exited FAB\n\nIf you want the floating action button to transition off the screen, set its\nexited configuration field to True.\n\n    fab { fabConfig | exited = True } \"favorite\"\n\n\n# Extended Floating Action Button\n\n@docs extendedFab, extendedFabConfig, ExtendedFabConfig\n\n\n## Extended FAB with Icon\n\nTo add an icon to a extended floating action button, set its `icon`\nconfiguration field to 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 the `trailingIcon` configuration field to `True`.\n\n\n### Extended FAB with Leading Icon\n\n    extendedFab { extendedFabConfig | icon = \"favorite\" }\n        \"Favorites\"\n\n\n### Extended FAB with Trailing Icon\n\n    extendedFab\n        { extendedFabConfig\n            | icon = \"favorite\"\n            , trailingIcon = 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 exited configuration field to True.\n\n    extendedFab { extendedFabConfig | exited = True }\n        \"Favorites\"\n\n","unions":[],"aliases":[{"name":"ExtendedFabConfig","comment":" Extended floating action button configuration\n","args":["msg"],"type":"{ icon : Maybe.Maybe String.String, trailingIcon : Basics.Bool, exited : Basics.Bool, onClick : Maybe.Maybe msg, additionalAttributes : List.List (Html.Attribute msg) }"},{"name":"FabConfig","comment":" Floating action button configuration\n","args":["msg"],"type":"{ mini : Basics.Bool, exited : Basics.Bool, onClick : Maybe.Maybe msg, additionalAttributes : List.List (Html.Attribute msg) }"}],"values":[{"name":"extendedFab","comment":" Extended floating action button view function\n","type":"Material.Fab.ExtendedFabConfig msg -> String.String -> Html.Html msg"},{"name":"extendedFabConfig","comment":" Default extended floating action button configuration\n","type":"Material.Fab.ExtendedFabConfig msg"},{"name":"fab","comment":" Floating action button view function\n","type":"Material.Fab.FabConfig msg -> String.String -> Html.Html msg"},{"name":"fabConfig","comment":" Default floating action button configuration\n","type":"Material.Fab.FabConfig 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  - [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/#checkboxes)\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\n        exposing\n            ( checkbox\n            , checkboxConfig\n            )\n    import Material.FormField\n        exposing\n            ( formField\n            , formFieldConfig\n            )\n\n    main =\n        formField { formFieldConfig | label = \"My checkbox\" }\n            [ checkbox checkboxConfig ]\n\n\n# Form Field\n\n@docs formField, formFieldConfig, FormFieldConfig\n\n\n# Label Position\n\nIf you want to position the label after the form field (ie. checkbox), set its\nalignEnd configuration field to True:\n\n    formField { label = \"My checkbox\", alignEnd = True } [ checkbox checkboxConfig ]\n\n","unions":[],"aliases":[{"name":"FormFieldConfig","comment":" Configuration of a form field\n","args":["msg"],"type":"{ label : String.String, for : Maybe.Maybe String.String, alignEnd : Basics.Bool, additionalAttributes : List.List (Html.Attribute msg), onClick : Maybe.Maybe msg }"}],"values":[{"name":"formField","comment":" Form field view function\n","type":"Material.FormField.FormFieldConfig msg -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"formFieldConfig","comment":" Default configuration of a form field\n","type":"Material.FormField.FormFieldConfig 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  - [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-fields)\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 exposing (helperText, helperTextConf)\n    import Material.TextField exposing (textField, textFieldConf)\n\n    main =\n        Html.div\n            [ textField { textFieldConf | label = \"Your name\" }\n            , helperText helperTextConf \"Please fill this\"\n            ]\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, helperTextConfig, HelperTextConfig\n\n\n# Persistent Helper Text\n\nA text field's helper text may show unconditionally by setting its `persistent`\nconfiguration field to `True`. By default a text field's helper text only shows\nwhen 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`maxLength` configuration field, and also add a `characterCounter` as a child\nof `helperLine`.\n\n    [ textField\n        { textFieldConfig\n            | maxLength = Just 18\n        }\n    , helperLine [] [ characterCounter [] ]\n    ]\n\n@docs helperLine, characterCounter\n\n","unions":[],"aliases":[{"name":"HelperTextConfig","comment":" Configuration of a helper text\n","args":["msg"],"type":"{ persistent : Basics.Bool, additionalAttributes : List.List (Html.Attribute msg) }"}],"values":[{"name":"characterCounter","comment":" Character counter view function\n","type":"List.List (Html.Attribute msg) -> Html.Html msg"},{"name":"helperLine","comment":" Helper text line view function\n\nThe text line is expected to be the wrapping element of the helper text. It is\nexpected 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 text line.\n\n","type":"Material.HelperText.HelperTextConfig msg -> String.String -> Html.Html msg"},{"name":"helperTextConfig","comment":" Default configuration of a helper text\n","type":"Material.HelperText.HelperTextConfig msg"}],"binops":[]},{"name":"Material.Icon","comment":" Icons render 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 exposing (icon, iconConfig)\n\n    main =\n        icon iconConfig \"favorite\"\n\n\n# Icon\n\n@docs icon, iconConfig, IconConfig\n\n","unions":[],"aliases":[{"name":"IconConfig","comment":" Icon configuration\n","args":["msg"],"type":"{ additionalAttributes : List.List (Html.Attribute msg) }"}],"values":[{"name":"icon","comment":" Icon view helper\n","type":"Material.Icon.IconConfig msg -> String.String -> Html.Html msg"},{"name":"iconConfig","comment":" Default icon configuration\n","type":"Material.Icon.IconConfig 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  - [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-buttons)\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\nIf you are looking for a button that has an icon as well as text, refer to\n[Button](Material-Button).\n\n    import Material.IconButton\n        exposing\n            ( iconButton\n            , iconButtonConfig\n            )\n\n    type Msg\n        = IconButtonClicked\n\n    main =\n        iconButton\n            { iconButtonConfig\n                | onClick = Just IconButtonClicked\n            }\n            \"favorite\"\n\n\n# Icon Button\n\n@docs iconButton, iconButtonConfig, IconButtonConfig\n\n\n# Disabled Icon Button\n\nTo disable a icon button, set its disabled configuration field to True.\nDisabled icon buttons cannot be interacted with and have no visual interaction\neffect.\n\n    iconButton\n        { iconButtonConfig | disabled = True }\n        \"favorite\"\n\n\n# Labeled Icon Button\n\nTo set the `arial-label` attribute of a icon button, set its label\nconfiguration field to a String.\n\n    iconButton\n        { iconButtonConfig | label = \"Add to favorites\" }\n        \"favorite\"\n\n\n# Variant: Custom Icon Button\n\n@docs customIconButton\n\n","unions":[],"aliases":[{"name":"IconButtonConfig","comment":" Icon button configuration\n","args":["msg"],"type":"{ disabled : Basics.Bool, label : Maybe.Maybe String.String, additionalAttributes : List.List (Html.Attribute msg), onClick : Maybe.Maybe msg }"}],"values":[{"name":"customIconButton","comment":" TODO\n","type":"Material.IconButton.IconButtonConfig msg -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"iconButton","comment":" Icon button view function\n","type":"Material.IconButton.IconButtonConfig msg -> String.String -> Html.Html msg"},{"name":"iconButtonConfig","comment":" Default icon button configuration\n","type":"Material.IconButton.IconButtonConfig 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  - [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-buttons)\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\nIf you are looking for a button that has an icon as well as text, refer to\n[Button](Material-Button).\n\n    import Material.IconToggle\n        exposing\n            ( iconToggle\n            , iconToggleConfig\n            )\n\n    type Msg\n        = IconToggleClicked\n\n    main =\n        iconToggle\n            { iconToggleConfig\n                | on = True\n                , onChange = Just IconToggleClicked\n            }\n            { offIcon = \"favorite_outlined\"\n            , onIcon = \"favorite\"\n            }\n\n\n# Icon Toggle\n\nIcon toggles are a variant of icon buttons that change their state when\nclicked.\n\n    iconToggle { iconToggleConfig | on = True }\n        { offIcon = \"favorite_border\", onIcon = \"favorite\" }\n\n@docs iconToggle, iconToggleConfig, IconToggleConfig\n\n\n# On Icon Toggle\n\nTo set the state of a icon toggle, set its on configuration field to a Bool\nvalue. State only applies to the icon toggle variant, icon buttons ignore this\nconfiguration field.\n\n    iconToggle { iconToggleConfig | on = True }\n        { offIcon = \"favorite_border\", onIcon = \"favorite\" }\n\n\n# Disabled Icon Toggle\n\nTo disable a icon toggle, set its disabled configuration field to True.\nDisabled icon buttons cannot be interacted with and have no visual interaction\neffect.\n\n    iconToggle { iconButtonConfig | disabled = True }\n        { offIcon = \"favorite_border\", onIcon = \"favorite\" }\n\n\n# Labeled Icon Toggle\n\nTo set the `arial-label` attribute of a icon toggle, set its label\nconfiguration field to a String.\n\n    iconToggle\n        { iconButtonConfig | label = \"Add to favorites\" }\n        { offIcon = \"favorite_border\", onIcon = \"favorite\" }\n\n","unions":[],"aliases":[{"name":"IconToggleConfig","comment":" Icon toggle configuration\n","args":["msg"],"type":"{ on : Basics.Bool, disabled : Basics.Bool, label : Maybe.Maybe String.String, additionalAttributes : List.List (Html.Attribute msg), onChange : Maybe.Maybe msg }"}],"values":[{"name":"iconToggle","comment":" Icon toggle view function\n","type":"Material.IconToggle.IconToggleConfig msg -> { onIcon : String.String, offIcon : String.String } -> Html.Html msg"},{"name":"iconToggleConfig","comment":" Default icon toggle configuration\n","type":"Material.IconToggle.IconToggleConfig msg"}],"binops":[]},{"name":"Material.ImageList","comment":" An Image List consists of several items, each containing an image and\noptionally supporting a text label.\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Image List](#image-list)\n  - [Image List Item](#image-list-item)\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-lists)\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.\n\n    import Html.Attributes exposing (style)\n    import Material.ImageList\n        exposing\n            ( imageList\n            , imageListConfig\n            , imageListItem\n            , imageListItemConfig\n            )\n\n    main =\n        imageList imageListConfig\n            [ imageListItem\n                { imageListItemConfig\n                    | additionalAttributes =\n                        [ style \"width\"\n                            \"calc(100% / 5 - 4.2px)\"\n                        , style \"margin\" \"2px\"\n                        ]\n                }\n                \"images/photos/3x2/1.jpg\"\n            ]\n\n\n# Image List\n\n@docs imageList, imageListConfig, ImageListConfig\n\n\n# Image list Item\n\n@docs imageListItem, imageListItemConfig, ImageListItemConfig, ImageListItem\n\n\n# Masonry Image List\n\nThe Masonry Image List variant presents images vertically arranged into several\ncolumns, using CSS Columns. In this layout, images may be any combination of\naspect ratios.\n\n        imageList { imageListConfig | masonry = True } []\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, set the image list's\ntextProtection configuration field to True.\n\n        imageList { imageListConfig | textProtection = True }\n            [ imageListItem\n                { imageListItemConfig | label = \"Photo\" }\n                \"images/photos/3x2/1.jpg\"\n            ]\n\n","unions":[{"name":"ImageListItem","comment":" Image list item\n","args":["msg"],"cases":[]}],"aliases":[{"name":"ImageListConfig","comment":" Configuration of an image list\n","args":["msg"],"type":"{ masonry : Basics.Bool, withTextProtection : Basics.Bool, additionalAttributes : List.List (Html.Attribute msg) }"},{"name":"ImageListItemConfig","comment":" Configuration of an image list item\n","args":["msg"],"type":"{ label : Maybe.Maybe String.String, href : Maybe.Maybe String.String, additionalAttributes : List.List (Html.Attribute msg) }"}],"values":[{"name":"imageList","comment":" Image list view function\n","type":"Material.ImageList.ImageListConfig msg -> List.List (Material.ImageList.ImageListItem msg) -> Html.Html msg"},{"name":"imageListConfig","comment":" Default configuration of an image list\n","type":"Material.ImageList.ImageListConfig msg"},{"name":"imageListItem","comment":" Image list item constructor\n","type":"Material.ImageList.ImageListItemConfig msg -> String.String -> Material.ImageList.ImageListItem msg"},{"name":"imageListItemConfig","comment":" Default configuration of an image list item\n","type":"Material.ImageList.ImageListItemConfig msg"}],"binops":[]},{"name":"Material.LayoutGrid","comment":" Material design’s responsive UI is based on a column-variate grid layout.\nIt has 12 columns on desktop, 8 columns on tablet and 4 columns on phone.\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-grids)\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\n    import Material.LayoutGrid as LayoutGrid\n        exposing\n            ( layoutGrid\n            , layoutGridCell\n            , layoutGridInner\n            )\n\n    main =\n        layoutGrid []\n            [ layoutGridInner []\n                [ layoutGridCell [] []\n                , layoutGridCell [] []\n                , layoutGridCell [] []\n                ]\n            ]\n\n\n# Layout Grid\n\n@docs layoutGrid, layoutGridCell, layoutGridInner\n\n\n# Cell Spans\n\nCells span by default four columns within the grid. Use one of the following\nfunctions to change this behavior.\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 change this behavior.\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 `layoutGridInner` around nested `layoutGridCell`s within an existing\n`layoutGridCell`.\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 UX.\n\n    layoutGrid []\n        [ layoutGridInner []\n            [ layoutGridCell []\n                [ layoutGridInner []\n                    [ layoutGridCell [] []\n                    , layoutGridCell [] []\n                    ]\n                ]\n            , layoutGridCell [] []\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":"layoutGrid","comment":" Grid view function\n","type":"List.List (Html.Attribute msg) -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"layoutGridCell","comment":" Cell view function\n","type":"List.List (Html.Attribute msg) -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"layoutGridInner","comment":" Mandatory wrapper around `layoutGridCell`\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  - [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\n        exposing\n            ( indeterminateLinearProgress\n            , linearProgressConfig\n            )\n\n    main =\n        indeterminateLinearProgress linearProgressConfig\n\n\n# Indeterminate Linear Progress\n\n@docs indeterminateLinearProgress, linearProgressConfig, LinearProgressConfig\n\n\n# Determinate Linear Progress\n\n    determinateLinearProgress linearProgressConfig\n        { progress = 0.5 }\n\n@docs determinateLinearProgress\n\n\n## Buffered Linear Progress\n\n    bufferedLinearProgress linearProgressConfig\n        { progress = 0.5, buffered = 0.75 }\n\n@docs bufferedLinearProgress\n\n\n# Closed Linear Progress\n\nIf you want to hide the linear progress indicator, set its closed configuration\nfield to True.\n\n    indeterminateLinearProgress\n        { linearProgressConfig | closed = True }\n\n\n# Reverse Linear Progress\n\nIf you want to reverse the direction of the linear progress indicator, set its\nreverse configuration field to True.\n\n    indeterminateLinearProgress\n        { linearProgressConfig | reverse = True }\n\n","unions":[],"aliases":[{"name":"LinearProgressConfig","comment":" Linear progress configuration\n","args":["msg"],"type":"{ reverse : Basics.Bool, closed : Basics.Bool, additionalAttributes : List.List (Html.Attribute msg) }"}],"values":[{"name":"bufferedLinearProgress","comment":" Buffered linear progress variant\n","type":"Material.LinearProgress.LinearProgressConfig msg -> { progress : Basics.Float, buffered : Basics.Float } -> Html.Html msg"},{"name":"determinateLinearProgress","comment":" Determinate linear progress variant\n","type":"Material.LinearProgress.LinearProgressConfig msg -> { progress : Basics.Float } -> Html.Html msg"},{"name":"indeterminateLinearProgress","comment":" Indeterminate linear progress variant\n","type":"Material.LinearProgress.LinearProgressConfig msg -> Html.Html msg"},{"name":"linearProgressConfig","comment":" Default linear progress configuration\n","type":"Material.LinearProgress.LinearProgressConfig msg"}],"binops":[]},{"name":"Material.List","comment":" Lists are continuous, vertical indexes of text or images.\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [List](#list)\n  - [List Item](#list-item)\n  - [List Variants](#list-variants)\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  - [List Item Variants](#list-item-variants)\n      - [List Item with Graphic](#list-item-with-graphic)\n      - [List Item with Meta](#list-item-with-meta)\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\n        exposing\n            ( list\n            , listConfig\n            , listItem\n            , listItemConfig\n            )\n\n    main =\n        list listConfig\n            [ listItem listItemConfig [ text \"Line item\" ]\n            , listItem listItemConfig [ text \"Line item\" ]\n            ]\n\n\n# List\n\n@docs list, listConfig, ListConfig\n\n\n# List Item\n\n@docs listItem, listItemConfig, ListItemConfig, ListItem\n\n\n# List Variants\n\n\n## Two-Line List\n\nLists may be two-line lists by settings the `twoLine` configuration field to\n`True`. In that case, list items should wrap their contents inside\n`listItemText` and their first line in `listItemPrimaryText` and their second\nline in `listItemSecondaryText`.\n\n    list { listConfig | twoLine = True }\n        [ listItem listItemConfig\n            [ listItemText []\n                [ listItemPrimaryText []\n                    [ text \"First line\" ]\n                , listItemSecondaryText []\n                    [ text \"Second line\" ]\n                ]\n            ]\n        ]\n\n@docs listItemText, listItemPrimaryText, listItemSecondaryText\n\n\n## Non-interactive List\n\nLists may be non-interactive by setting the `nonInteractive` configuration\nfield to `True`.\n\n    list { listConfig | nonInteractive = True }\n        [ listItem listItemConfig [ text \"List item\" ] ]\n\n\n## Dense List\n\nLists may be styled more compact by setting the `dense` configuration field to\n`True`.\n\n    list { listConfig | dense = True }\n        [ listItem listItemConfig [ text \"List item\" ] ]\n\n\n## Avatar List\n\nList item's graphics may be configured to appear larger by setting the\n`avatarList` configuration field to `True`.\n\nThis is particularly useful when a list item's graphic includes an image rather\nthan an icon.\n\n    list { listConfig | dense = True }\n        [ listItem listItemConfig\n            [ listItemGraphic [] [ 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 `listGroup` and labeled by `listGroupSubheader`.\n\n    listGroup []\n        [ listGroupSubheader [] [ text \"Folders\" ]\n        , list listConfig\n            [ listItem [] [ text \"Folder\" ]\n            , listItem [] [ text \"Folder\" ]\n            ]\n        , listGroupSubheader [] [ text \"Files\" ]\n        , list listConfig\n            [ listItem [] [ text \"File\" ]\n            , listItem [] [ text \"File\" ]\n            ]\n        ]\n\n@docs listGroup\n@docs listGroupSubheader\n\n\n### List Group Divider\n\nMultiple lists within a group may be visually seperated by a list group divider.\n\n    listGroup []\n        [ list listConfig\n            [ listItem [] [ text \"Folder\" ]\n            , listItem [] [ text \"Folder\" ]\n            ]\n        , listGroupDivider []\n        , list listConfig\n            [ listItem [] [ text \"File\" ]\n            , listItem [] [ text \"File\" ]\n            ]\n        ]\n\n@docs listGroupDivider\n\n\n## List Item Variants\n\nIn addition to their text child, lists may optionally contain a starting tile\nreferred to as _graphic_ and/ or a last tile referred to as _meta_.\n\n\n### List Item with Graphic\n\nCommon examples for graphics are icons and images, avatar images and selection\ncontrols such as checkboxes.\n\n    listItem listItemConf\n        [ listItemGraphic [] [ icon iconConf \"star\" ]\n        , text \"List item\"\n        ]\n\n@docs listItemGraphic\n\n\n### List Item with Meta\n\nCommon examples for metas are text, icons and images and selection controls.\n\n    listItem listItemConf\n        [ text \"List item\"\n        , listItemMeta [] [ icon iconConf \"star\" ]\n        ]\n\n@docs listItemMeta\n\n\n### Disabled List Item\n\nList items may be disabled by setting their `disabled` configuration field to\n`True`.\n\n    listItem { listItemConf | disabled = True }\n        [ text \"List item\" ]\n\n\n### Selected List Item\n\nList items may be disabled by setting their `selected` configuration field to\n`True`.\n\n    listItem { listItemConf | selected = True }\n        [ text \"List item\" ]\n\n\n### Activated List Item\n\nList items may be disabled by setting their `activated` configuration field to\n`True`.\n\n    listItem { listItemConf | activated = True }\n        [ text \"List item\" ]\n\n\n## Link List Item\n\nList items may specify the `href` attribute in which case the list item\nessentially behaves like a HTML `a` element. You may specify the configuration\n`target` target as well.\n\n    listItem [ href \"https://elm-lang.org\" ]\n        [ text \"Elm programming language\" ]\n\nNote that link list items cannot be disabled.\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 listConfig\n        [ listItem [] [ text \"List item\" ]\n        , listItemDivider listItemDividerConfig\n        , listItem [] [ text \"List item\" ]\n        ]\n\n@docs listItemDivider, listItemDividerConfig, ListItemDividerConfig\n\n","unions":[{"name":"ListItem","comment":" Type of a list item\n","args":["msg"],"cases":[]}],"aliases":[{"name":"ListConfig","comment":" Configuration of a list\n","args":["msg"],"type":"{ nonInteractive : Basics.Bool, dense : Basics.Bool, avatarList : Basics.Bool, twoLine : Basics.Bool, vertical : Basics.Bool, wrapFocus : Basics.Bool, additionalAttributes : List.List (Html.Attribute msg) }"},{"name":"ListItemConfig","comment":" Configuration of a list item\n","args":["msg"],"type":"{ disabled : Basics.Bool, selected : Basics.Bool, activated : Basics.Bool, href : Maybe.Maybe String.String, target : Maybe.Maybe String.String, additionalAttributes : List.List (Html.Attribute msg), onClick : Maybe.Maybe msg }"},{"name":"ListItemDividerConfig","comment":" Configuration of a list item divider\n","args":["msg"],"type":"{ inset : Basics.Bool, padded : Basics.Bool, additionalAttributes : List.List (Html.Attribute msg) }"}],"values":[{"name":"list","comment":" List view function\n","type":"Material.List.ListConfig msg -> List.List (Material.List.ListItem msg) -> Html.Html msg"},{"name":"listConfig","comment":" Default configuration of a list\n","type":"Material.List.ListConfig msg"},{"name":"listGroup","comment":" List group view function\n","type":"List.List (Html.Attribute msg) -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"listGroupDivider","comment":" List group divider view function\n","type":"List.List (Html.Attribute msg) -> Html.Html msg"},{"name":"listGroupSubheader","comment":" List group subheader view function\n","type":"List.List (Html.Attribute msg) -> List.List (Html.Html msg) -> Material.List.ListItem msg"},{"name":"listItem","comment":" List item view function\n","type":"Material.List.ListItemConfig msg -> List.List (Html.Html msg) -> Material.List.ListItem msg"},{"name":"listItemConfig","comment":" Default configuration of a list item\n","type":"Material.List.ListItemConfig msg"},{"name":"listItemDivider","comment":" List item divider view function\n","type":"Material.List.ListItemDividerConfig msg -> Material.List.ListItem msg"},{"name":"listItemDividerConfig","comment":" Default configuration of a list item divider\n","type":"Material.List.ListItemDividerConfig msg"},{"name":"listItemGraphic","comment":" A list item's graphic tile\n","type":"List.List (Html.Attribute msg) -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"listItemMeta","comment":" A list item's meta tile\n","type":"List.List (Html.Attribute msg) -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"listItemPrimaryText","comment":" First line of a two-line list item's text\n","type":"List.List (Html.Attribute msg) -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"listItemSecondaryText","comment":" Second line of a two-line list item's text\n","type":"List.List (Html.Attribute msg) -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"listItemText","comment":" List item's text for list items in a two-line list\n","type":"List.List (Html.Attribute msg) -> 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  - [Quick-opening menu](#quick-opening-menu)\n\n\n# Resources\n\n  - [Demo: Menus](https://aforemny.github.io/material-components-web-elm/#menus)\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`menuSurfaceAnchor` attribute. The menu's items are simply a\n[list](Material-List).\n\n    import Material.Button exposing (textButton, buttonConfig)\n    import Material.List\n        exposing\n            ( list\n            , listConfig\n            , listItem\n            , listItemConfig\n            )\n    import Material.Menu\n        exposing\n            ( menu\n            , menuConfig\n            , menuSurfaceAnchor\n            )\n\n    type Msg\n        = MenuOpened\n        | MenuClosed\n\n    Html.div [ menuSurfaceAnchor ]\n        [ textButton\n            { buttonConfig | onClick = Just MenuOpened }\n            \"Open menu\"\n        , menu\n            { menuConfig\n                | open = True\n                , onClose = Just MenuClosed\n            }\n            [ list { listConfig | wrapFocus = True }\n                [ listItem menuItemConfig [ text \"Menu item\" ]\n                , listItem menuItemConfig [ text \"Menu item\" ]\n                ]\n            ]\n        ]\n\n@docs menu, menuConfig, MenuConfig\n@docs menuSurfaceAnchor\n\n\n# Quick-opening menu\n\nA menu may not show a transition when opening by setting its `quickOpen`\nconfiguration field to `True`.\n\n    menu { menuConfig | quickOpen = True } []\n\n","unions":[],"aliases":[{"name":"MenuConfig","comment":" Configuration of a menu\n","args":["msg"],"type":"{ open : Basics.Bool, quickOpen : Basics.Bool, additionalAttributes : List.List (Html.Attribute msg), onClose : Maybe.Maybe msg }"}],"values":[{"name":"menu","comment":" Menu view function\n","type":"Material.Menu.MenuConfig msg -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"menuConfig","comment":" Default configuration of a menu\n","type":"Material.Menu.MenuConfig msg"},{"name":"menuSurfaceAnchor","comment":" Menu surface anchor attribute\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  - [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 fields. Refer\nto [FormField](Material-FormField) for more information.\n\n    import Material.Radio exposing (radio, radioConfig)\n\n    type Msg\n        = RadioClicked\n\n    main =\n        radio\n            { radioConfig\n                | checked = True\n                , onChange = Just RadioClicked\n            }\n\n\n# Radio\n\n@docs radio, radioConfig, RadioConfig\n\n\n# Checked Radio\n\nTo set the state of a radio button, set its checked configuration field to a Bool value.\n\n    radio { radioConfig | checked = False }\n\n\n# Disabled Radio\n\nTo disable a radio button, set its disabled configuration field to True. Disabled\nradio buttons cannot be interacted with and have no visual interaction effect.\n\n    radio { radioConfig | disabed = True }\n\n","unions":[],"aliases":[{"name":"RadioConfig","comment":" Radio button configuration\n","args":["msg"],"type":"{ checked : Basics.Bool, disabled : Basics.Bool, additionalAttributes : List.List (Html.Attribute msg), onChange : Maybe.Maybe msg }"}],"values":[{"name":"radio","comment":" Radio button view function\n","type":"Material.Radio.RadioConfig msg -> Html.Html msg"},{"name":"radioConfig","comment":" Default radio button configuration\n","type":"Material.Radio.RadioConfig msg"}],"binops":[]},{"name":"Material.Ripple","comment":" Material “ink ripple” interaction effect.\n\nRipples come in two variants. Use `ripple` for bounded ripple effects which\nwork best when used for contained surfaces, and `unboundedRipple` for unbounded\nripple effects which work best with icons.\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\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/#ripples)\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\n    import Material.Ripple exposing (ripple, rippleConfig)\n\n    main =\n        Html.div []\n            [ text \"Click me!\"\n            , boundedRipple rippleConfig\n            ]\n\n\n# Bounded Ripple\n\n@docs boundedRipple, rippleConfig, RippleConfig\n\n\n# Unbounded Ripple\n\n    Html.span []\n        [ unboundedRipple rippleConfig\n        , text \"🙌\"\n        ]\n\n@docs unboundedRipple\n\n\n# Colored Ripple\n\nIf you want to set the ripple effect to either primary or secondary color, set\nits color configuration field to a RippleColor.\n\n    ripple { rippleConfig | color = Ripple.PrimaryColor }\n\n@docs RippleColor\n\n","unions":[{"name":"RippleColor","comment":" Ripple color\n","args":[],"cases":[["PrimaryColor",[]],["AccentColor",[]]]}],"aliases":[{"name":"RippleConfig","comment":" Ripple configuration\n","args":["msg"],"type":"{ color : Maybe.Maybe Material.Ripple.RippleColor, additionalAttributes : List.List (Html.Attribute msg) }"}],"values":[{"name":"boundedRipple","comment":" Bounded ripple variant\n","type":"Material.Ripple.RippleConfig msg -> Html.Html msg"},{"name":"rippleConfig","comment":" Default ripple configuration\n","type":"Material.Ripple.RippleConfig msg"},{"name":"unboundedRipple","comment":" Unbounded ripple variant\n","type":"Material.Ripple.RippleConfig msg -> Html.Html msg"}],"binops":[]},{"name":"Material.Select","comment":" MDC Select provides Material Design single-option select menus. It supports\nusing the browser's native `<select>` element, or a MDC Menu. It is fully\naccessible, and fully RTL-aware.\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\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/#selects)\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\n        exposing\n            ( select\n            , selectConfig\n            , selectOption\n            , selectOptionConfig\n            )\n\n    type Msg\n        = ValueChanged String\n\n    main =\n        filledSelect\n            { selectConfig\n                | label = \"Fruit\"\n                , value = Just \"\"\n                , onChange = Just ValueChanged\n            }\n            [ selectOption\n                { selectOptionConfig | value = \"\" }\n                [ text \"\" ]\n            , selectOption\n                { selectOptionConfig | value = \"Apple\" }\n                [ text \"Apple\" ]\n            ]\n\n@docs filledSelect, selectConfig, SelectConfig\n@docs selectOption, selectOptionConfig, SelectOptionConfig, SelectOption\n\n\n# Outlined Select\n\nInstead of a filled select, you may choose a select with a outline by using the\n`outlinedSelect` view function.\n\n    outlinedSelect selectConf\n        [ selectOption selectOptionConf \"\" ]\n\n@docs outlinedSelect\n\n\n# Disabled Select\n\nTo disable a select, set its `disabled` configuration field to `True`.\n\n    filledSelect\n        { selectConfig | disabled = True }\n        [ selectOption { selectOptionConfig | value = \"\" }\n            [ text \"\" ]\n        ]\n\n\n# Required Select\n\nTo mark a select as required, set its `required` configuration field to `True`.\n\n    filledSelect\n        { selectConfig | required = True }\n        [ selectOption { selectOptionConfig | value = \"\" }\n            [ text \"\" ]\n        ]\n\n\n# Disabled Option\n\nTo disable one select's option, set its `disabled` configuration field to `True`.\n\n    selectOption { selectOptionConfig | disabled = 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\n# Select with helper text\n\nTODO\n\n\n# Select with leading icon\n\nTODO\n\n","unions":[{"name":"SelectOption","comment":" Select option type\n","args":["msg"],"cases":[]}],"aliases":[{"name":"SelectConfig","comment":" Configuration of a select\n","args":["msg"],"type":"{ label : String.String, value : Maybe.Maybe String.String, disabled : Basics.Bool, required : Basics.Bool, valid : Basics.Bool, additionalAttributes : List.List (Html.Attribute msg), onChange : Maybe.Maybe (String.String -> msg) }"},{"name":"SelectOptionConfig","comment":" Configuration of a select option\n","args":["msg"],"type":"{ disabled : Basics.Bool, value : String.String, additionalAttributes : List.List (Html.Attribute msg) }"}],"values":[{"name":"filledSelect","comment":" Filled select view function\n","type":"Material.Select.SelectConfig msg -> List.List (Material.Select.SelectOption msg) -> Html.Html msg"},{"name":"outlinedSelect","comment":" Outlined select view function\n","type":"Material.Select.SelectConfig msg -> List.List (Material.Select.SelectOption msg) -> Html.Html msg"},{"name":"selectConfig","comment":" Default configuration of a select\n","type":"Material.Select.SelectConfig msg"},{"name":"selectOption","comment":" Select option view function\n","type":"Material.Select.SelectOptionConfig msg -> List.List (Html.Html msg) -> Material.Select.SelectOption msg"},{"name":"selectOptionConfig","comment":" Default configuration of a select option\n","type":"Material.Select.SelectOptionConfig msg"}],"binops":[]},{"name":"Material.Slider","comment":" MDC Slider provides an implementation of the Material Design slider\ncomponent.\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\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/#sliders)\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 exposing (slider, sliderConfig)\n\n    type Msg\n        = ValueChanged Float\n\n    main =\n        slider\n            { sliderConfig\n                | value = 50\n                , onChange = Just ValueChanged\n            }\n\n\n# Continuous Slider\n\n@docs slider, sliderConfig, SliderConfig\n\n\n# Custom range values\n\nTo set a custom range, set the slider's `min` and `max` configuration fields to\na `Float`.\n\n    slider { sliderConfig | min = 0, max = 100 }\n\n\n# Using a step value\n\nTo allow for quantization of the user input, set the slider's `step`\nconfiguration field to a `Float`.\n\n    slider { sliderConfig | step = 4.5 }\n\n\n# Disabled Slider\n\nTo disable a slider, set its `disabled` configuration field to `True`. Disabled\nsliders cannot be interacted with and have no visual interaction effect.\n\n    slider { sliderConfig | disabled = True }\n\n\n# Discrete Slider\n\nTo treat a slider as a discrete slider, set its `discrete` configuration field\nto `True`.\n\n    slider { sliderConfig | disabled = True }\n\n\n## Track Markers\n\nTo have a discrete slider show track markers, set its `displayMarkers`\nconfiguration field to `True`.\n\n    slider { sliderConfig | displayMarkers = True }\n\n","unions":[],"aliases":[{"name":"SliderConfig","comment":" Configuration of a slider\n","args":["msg"],"type":"{ discrete : Basics.Bool, displayMarkers : Basics.Bool, min : Basics.Float, max : Basics.Float, step : Basics.Float, value : Basics.Float, disabled : Basics.Bool, additionalAttributes : List.List (Html.Attribute msg), onChange : Maybe.Maybe (Basics.Float -> msg) }"}],"values":[{"name":"slider","comment":" Slider view function\n","type":"Material.Slider.SliderConfig msg -> Html.Html msg"},{"name":"sliderConfig","comment":" Default configuration of a slider\n","type":"Material.Slider.SliderConfig msg"}],"binops":[]},{"name":"Material.Snackbar","comment":" Snackbars provide brief messages about app processes at the bottom of the\nscreen.\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\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/#snackbars)\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        exposing\n            ( snackbar\n            , snackbarConfig\n            )\n\n    type alias Model =\n        { queue : Snackbar.Queue }\n\n    type Msg\n        = SnackbarMsg Snackbar.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 SnackbarMsg snackbarConfig model.queue\n\n\n# Snackbar\n\n@docs snackbar, snackbarConfig, SnackbarConfig\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` and initialize it to\n`initialQueue`.\n\n    type alias Model =\n        { queue : Snackbar.Queue }\n\n    initialModel =\n        { queue = Snackbar.initialQueue }\n\nTo add messages to the queue, you have to tag `Snackbar.Msg`s within your\napplication's `Msg` type.\n\n    type Msg\n        = SnackbarMsg Snackbar.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    update msg model =\n        case msg of\n            SnackbarMsg snackbarMsg ->\n                Snackbar.update SnackbarMsg snackbarMsg model\n                    |> Tuple.mapFirst\n                        (\\newQueue ->\n                            { model | queue = newQueue }\n                        )\n\nNow you are ready to call `addMessage` from your application 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    update : Msg -> ( Model, Cmd Msg )\n    update msg model =\n        SomethingHappened ->\n            let\n                message =\n                    { snackbarMessage\n                        | label = \"Something happened\"\n                    }\n            in\n            ( model, addMessage SnackbarMsg message )\n\n@docs addMessage\n\n\n# Messages\n\nAt the minimum, a message contains only a label. To specify the label, set the\n`label` configuration field to a `String`.\n\n    { snackbarMessage | label = \"Something happened\" }\n\n@docs snackbarMessage, Message\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 `actionButton` configuration field to a\n`String`, and handle the event in `onActionButtonClick`.\n\n    { snackbarMessage\n        | label = \"Something happened\"\n        , actionButton = Just \"Take action\"\n        , onActionButtonClick = Just ActionButtonClicked\n    }\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 `actionIcon` configuration field to a\n`String`, and handle the event in `onActionIconClick`.\n\n    { snackbarMessage\n        | label = \"Something happened\"\n        , actionIcon = Just \"close\"\n        , onActionIconClick = Just Dismissed\n    }\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 `stacked` configuration\nfield to `True`.\n\n    { snackbarMessage\n        | label = \"Something happened\"\n        , actionButton = Just \"Take action\"\n        , stacked = True\n    }\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 `leading` configuration field to `True`.\n\n    { snackbarMessage\n        | label = \"Something happened\"\n        , leading = True\n    }\n\n\n## Custom timeout\n\nTo set a custom timeout for a message, set its `timeoutMs` configuration field\nto a `Float`, representing the on-screen time in milliseconds.\n\n    { snackbarMessage\n        | label = \"Something happened\"\n        , timeoutMs = 5000\n    }\n\n","unions":[{"name":"Msg","comment":" Snackbar message type\n","args":["msg"],"cases":[]}],"aliases":[{"name":"Message","comment":" Snackbar message\n","args":["msg"],"type":"{ label : String.String, actionButton : Maybe.Maybe String.String, onActionButtonClick : Maybe.Maybe msg, actionIcon : Maybe.Maybe String.String, onActionIconClick : Maybe.Maybe msg, leading : Basics.Bool, stacked : Basics.Bool, timeoutMs : Basics.Int }"},{"name":"Queue","comment":" Queue of messages\n","args":["msg"],"type":"{ messages : List.List (Material.Snackbar.Message msg), messageId : Material.Snackbar.MessageId }"},{"name":"SnackbarConfig","comment":" Configuration of a snackbar\n","args":["msg"],"type":"{ closeOnEscape : Basics.Bool, additionalAttributes : List.List (Html.Attribute msg) }"}],"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":"initialQueue","comment":" Initial empty queue\n","type":"Material.Snackbar.Queue msg"},{"name":"snackbar","comment":" Snackbar view function\n","type":"(Material.Snackbar.Msg msg -> msg) -> Material.Snackbar.SnackbarConfig msg -> Material.Snackbar.Queue msg -> Html.Html msg"},{"name":"snackbarConfig","comment":" Default configuration of a snackbar\n","type":"Material.Snackbar.SnackbarConfig msg"},{"name":"snackbarMessage","comment":" Default snackbar message (empty label)\n","type":"Material.Snackbar.Message 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  - [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/#switches)\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 fields. Refer to\n[FormField](Material-FormField) for more information.\n\n    import Material.Switch exposing (switch, switchConfig)\n\n    type Msg\n        = SwitchClicked\n\n    main =\n        switch\n            { switchConfig\n                | checked = True\n                , onChange = Just SwitchClicked\n            }\n\n\n# Switch\n\n@docs switch, SwitchConfig, switchConfig\n\n\n# On Switch\n\nTo set the state of a switch, set its `checked` configuration field to a `Bool`\nvalue.\n\n    switch { switchConfig | checked = True }\n\n\n# Disabled Switch\n\nTo disable a switch, set its `disabled` configuration field to `True`. Disabled\nswitches cannot be interacted with and have no visual interaction effect.\n\n    switch { switchConfig | disabled = True }\n\n","unions":[],"aliases":[{"name":"SwitchConfig","comment":" Configuration of a switch\n","args":["msg"],"type":"{ checked : Basics.Bool, disabled : Basics.Bool, additionalAttributes : List.List (Html.Attribute msg), onChange : Maybe.Maybe msg }"}],"values":[{"name":"switch","comment":" Switch view function\n","type":"Material.Switch.SwitchConfig msg -> Html.Html msg"},{"name":"switchConfig","comment":" Default configuration of a switch\n","type":"Material.Switch.SwitchConfig 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\nScroller and Tab components.\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Tab Bar](#tab-bar)\n  - [Tabs](#tabs)\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/#tab-bars)\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.TabBar\n        exposing\n            ( tab\n            , tabBar\n            , tabBarConfig\n            , tabConfig\n            )\n\n    type Msg\n        = TabClicked Int\n\n    main =\n        tabBar tabBarConfig\n            [ tab\n                { tabConfig\n                    | active = True\n                    , onClick = Just (TabClicked 0)\n                }\n                { label = \"Tab 1\", icon = Nothing }\n            , tab\n                { tabConfig\n                    | active = False\n                    , onClick = Just (TabClicked 1)\n                }\n                { label = \"Tab 1\", icon = Nothing }\n            ]\n\n\n# Tab Bar\n\n@docs tabBar, tabBarConfig, TabBarConfig\n\n\n# Tabs\n\n@docs tab, tabConfig, TabConfig, TabContent, Tab\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 `stacked` configuration\nfield to `True`.\n\nRequires that the `tab`s have both `label` and `icon`.\n\n        tabBar\n            { tabBarConfig | stacked = True }\n            [ tab tabConfig\n            { label = \"Favorites\", icon = Just \"favorite\" }\n            ]\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 `minWidth` configuration field to `True`.\n\n        tabBar\n            { tabBarConfig | minWidth = True }\n            [ tab tabConfig\n                { label = \"Favorites\", icon = Nothing }\n            ]\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`indicatorSpansContent` configuration field to `True`.\n\n        tabBar\n            { tabBarConfig | indicatorSpansContent = True }\n            [ tab tabConfig\n                { label = \"Favorites\", icon = Nothing }\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 TabScrollerConfig, tabScrollerConfig\n@docs TabScrollerAlign\n\n\n## Center-aligned tab scroller\n\n        tabBar\n            { tabBarConfig\n                | tabScrollerConfig =\n                  { tabScrollerConfig\n                      | align =\n                          Just TabBar.TabScrollerAlignCenter\n                  }\n            }\n            [ tab\n                { tabConfig\n                    | active = True\n                    , onClick = Just (TabClicked 0)\n                }\n                { label = \"Tab 1\", icon = Nothing }\n            , tab\n                { tabConfig\n                    | active = False\n                    , onClick = Just (TabClicked 1)\n                }\n                { label = \"Tab 1\", icon = Nothing }\n            ]\n\n","unions":[{"name":"Tab","comment":" Tab\n","args":["msg"],"cases":[]},{"name":"TabScrollerAlign","comment":" Alignment of a tab scroller\n","args":[],"cases":[["TabScrollerAlignStart",[]],["TabScrollerAlignEnd",[]],["TabScrollerAlignCenter",[]]]}],"aliases":[{"name":"TabBarConfig","comment":" Configuration of a tab bar\n","args":["msg"],"type":"{ stacked : Basics.Bool, minWidth : Basics.Bool, indicatorSpansContent : Basics.Bool, additionalAttributes : List.List (Html.Attribute msg), tabScrollerConfig : Material.TabBar.TabScrollerConfig msg }"},{"name":"TabConfig","comment":" Configuration of a tab\n","args":["msg"],"type":"{ active : Basics.Bool, additionalAttributes : List.List (Html.Attribute msg), onClick : Maybe.Maybe msg }"},{"name":"TabContent","comment":" Content of a tab\n","args":[],"type":"{ label : String.String, icon : Maybe.Maybe String.String }"},{"name":"TabScrollerConfig","comment":" Configuration of a tab scroller\n","args":["msg"],"type":"{ align : Maybe.Maybe Material.TabBar.TabScrollerAlign, additionalAttributes : List.List (Html.Attribute msg) }"}],"values":[{"name":"tab","comment":" Tab constructor\n","type":"Material.TabBar.TabConfig msg -> Material.TabBar.TabContent -> Material.TabBar.Tab msg"},{"name":"tabBar","comment":" Tab bar view function\n","type":"Material.TabBar.TabBarConfig msg -> List.List (Material.TabBar.Tab msg) -> Html.Html msg"},{"name":"tabBarConfig","comment":" Default configuration of a tab bar\n","type":"Material.TabBar.TabBarConfig msg"},{"name":"tabConfig","comment":" Default configuration of a tab\n","type":"Material.TabBar.TabConfig msg"},{"name":"tabScrollerConfig","comment":" Default configuration of a tab scroller\n","type":"Material.TabBar.TabScrollerConfig msg"}],"binops":[]},{"name":"Material.TextArea","comment":" Text areas allow users to input, edit, and select text.\n\n\n# Table of Contents\n\n  - [Resources](#resources)\n  - [Basic Usage](#basic-usage)\n  - [Full Width Text Area](#full-width-text-field)\n  - [Disabled Text Area](#disabled-text-field)\n  - [Required Text Area](#disabled-text-field)\n  - [Invalid Text Area](#disabled-text-field)\n  - [Text Area with Character Counter](#text-field-with-character-counter)\n\n\n# Resources\n\n  - [Demo: Text Areas](https://aforemny.github.io/material-components-web-elm/#text-fields)\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\n        exposing\n            ( textArea\n            , textAreaConfig\n            )\n\n    type Msg\n        = ValueChanged String\n\n    main =\n        textArea\n            { textAreaConfig\n                | label = \"My text area\"\n                , value = Just \"hello world\"\n                , onInput = Just ValueChanged\n                , rows = Just 4\n                , cols = Just 20\n            }\n\n@docs textArea, textAreaConfig, TextAreaConfig\n\n\n# Full Width Text Area\n\nTo make a text area span all of its available width, set its `fullwidth`\nconfiguration field to `True`.\n\n    textArea { textAreaConfig | fullWidth = True }\n\nFull width text areas do not support `label` and will ignore this\nconfiguration field. You may set `placeholder` or provide an extraneous label\nfor a full width text area.\n\nFull width text areas do not support `outlined` and will ignore this\nconfiguration field.\n\n\n# Disabled Text Area\n\nTo disable a text area set its `disabled` configuration field to `True`.\n\n    textArea { textAreaConfig | disabled = True }\n\n\n# Required Text Area\n\nTo mark a text area as required, set its `required` configuration field to\n`True`.\n\n    textArea { textAreaConfig | required = True }\n\n\n# Invalid Text Area\n\nTo mark a text area as invalid, set its `valid` configuration field to\n`False`.\n\n    textArea { textAreaConfig | valid = False }\n\n\n# Outlined Text Area\n\nText areas may have a visible outlined around them by setting their `outlined`\nconfiguration field to `True`.\n\n    textArea { textAreaConfig | outlined = True }\n\nNote that this does not have any effect for fullwidth text areas.\n\n\n# Text Area with Character Counter\n\nTo have a text area display a character counter, set its `maxLength`\nconfiguration field, and also add a `characterCounter` as a child of\n`helperLine`.\n\n    [ textArea\n        { textAreaConfig\n            | maxLength = Just 18\n        }\n    , helperLine [] [ characterCounter [] ]\n    ]\n\n@docs characterCounter\n\n","unions":[],"aliases":[{"name":"TextAreaConfig","comment":" Configuration of a text area\n","args":["msg"],"type":"{ label : Maybe.Maybe String.String, outlined : Basics.Bool, fullwidth : Basics.Bool, value : String.String, placeholder : Maybe.Maybe String.String, rows : Maybe.Maybe Basics.Int, cols : Maybe.Maybe Basics.Int, disabled : Basics.Bool, required : Basics.Bool, valid : Basics.Bool, minLength : Maybe.Maybe Basics.Int, maxLength : Maybe.Maybe Basics.Int, additionalAttributes : List.List (Html.Attribute msg), onInput : Maybe.Maybe (String.String -> msg), onChange : Maybe.Maybe (String.String -> msg) }"}],"values":[{"name":"characterCounter","comment":" Character counter view function\n","type":"List.List (Html.Attribute msg) -> Html.Html msg"},{"name":"textArea","comment":" Text area view function\n","type":"Material.TextArea.TextAreaConfig msg -> Html.Html msg"},{"name":"textAreaConfig","comment":" Default configuration of a text area\n","type":"Material.TextArea.TextAreaConfig 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  - [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  - [Invalid Text Field](#disabled-text-field)\n  - [Outlined Text Field](#outlined-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-fields)\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\n        exposing\n            ( textField\n            , textFieldConfig\n            )\n\n    type Msg\n        = ValueChanged String\n\n    main =\n        textField\n            { textFieldConfig\n                | label = \"My text field\"\n                , value = Just \"hello world\"\n                , onInput = Just ValueChanged\n            }\n\n@docs textField, textFieldConfig, TextFieldConfig\n\n\n# Full Width Text Field\n\nTo make a text field span all of its available width, set its `fullwidth`\nconfiguration field to `True`.\n\n    textField { textFieldConfig | fullWidth = True }\n\nFull width text fields do not support `label` and will ignore this\nconfiguration field. You may set `placeholder` or provide an extraneous label\nfor a full width text field.\n\nFull width text fields do not support `outlined` and will ignore this\nconfiguration field.\n\n\n# Disabled Text Field\n\nTo disable a text field set its `disabled` configuration field to `True`.\n\n    textField { textFieldConfig | disabled = True }\n\n\n# Password Text Field\n\nTo mark a text field as an input for entering a passwort, set its `type_`\nconfiguration field to the String `\"password\"`.\n\n    textField { textFieldConfig | type_ = \"password\" }\n\nNote: Other 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 `required` configuration field to\n`True`.\n\n    textField { textFieldConfig | required = True }\n\n\n# Invalid Text Field\n\nTo mark a text field as invalid, set its `valid` configuration field to\n`False`.\n\n    textField { textFieldConfig | valid = False }\n\n\n# Outlined Text Field\n\nText fields may have a visible outlined around them by setting their `outlined`\nconfiguration field to `True`.\n\n    textField { textFieldConfig | outlined = True }\n\nNote that this does not have any effect for fullwidth text fields.\n\n\n# Text Field with Leading Icon\n\nTo have a text field display a leading icon, set its `leadingIcon`\nconfiguration field to a `TextFieldIcon`.\n\n    textField\n        { textFieldConfig\n            | leadingIcon = textFieldIcon iconConfig \"wifi\"\n        }\n\n@docs textFieldIcon\n\n\n# Text Field with Trailing Icon\n\nTo have a text field display a trailing icon, set its `trailingIcon`\nconfiguration field to a `TextFieldIcon`.\n\n    textField\n        { textFieldConfig\n            | trailingIcon = textFieldIcon iconConfig \"clear\"\n        }\n\n\n# Text Field with Character Counter\n\nTo have a text field display a character counter, set its `maxLength`\nconfiguration field, and also add a `characterCounter` as a child of\n`helperLine`.\n\n    [ textField\n        { textFieldConfig\n            | maxLength = Just 18\n        }\n    , helperLine [] [ characterCounter [] ]\n    ]\n\n","unions":[],"aliases":[{"name":"TextFieldConfig","comment":" Configuration of a text field\n","args":["msg"],"type":"{ label : Maybe.Maybe String.String, outlined : Basics.Bool, fullwidth : Basics.Bool, value : String.String, placeholder : Maybe.Maybe String.String, disabled : Basics.Bool, required : Basics.Bool, valid : Basics.Bool, minLength : Maybe.Maybe Basics.Int, maxLength : Maybe.Maybe Basics.Int, pattern : Maybe.Maybe String.String, type_ : String.String, min : Maybe.Maybe Basics.Int, max : Maybe.Maybe Basics.Int, step : Maybe.Maybe Basics.Int, leadingIcon : Material.TextField.TextFieldIcon msg, trailingIcon : Material.TextField.TextFieldIcon msg, additionalAttributes : List.List (Html.Attribute msg), onInput : Maybe.Maybe (String.String -> msg), onChange : Maybe.Maybe (String.String -> msg) }"}],"values":[{"name":"textField","comment":" Text field view function\n","type":"Material.TextField.TextFieldConfig msg -> Html.Html msg"},{"name":"textFieldConfig","comment":" Default configuration of a text field\n","type":"Material.TextField.TextFieldConfig msg"},{"name":"textFieldIcon","comment":" A text field's icon, either leading or trailing\n","type":"Material.Icon.IconConfig msg -> String.String -> Material.TextField.TextFieldIcon 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  - [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-bars)\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        exposing\n            ( topAppBar\n            , topAppBarConfig\n            )\n\n    main =\n        topAppBar topAppBarConfig\n            [ TopAppBar.row []\n                [ TopAppBar.section [ TopAppBar.alignStart ]\n                    [ iconButton\n                        { iconButtonConfig\n                            | additionalAttributes =\n                                [ TopAppBar.navigationIcon ]\n                        }\n                        \"menu\"\n                    , Html.span [ TopAppBar.title ]\n                        [ text \"Title\" ]\n                    ]\n                ]\n            ]\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 topAppBar, topAppBarConfig, TopAppBarConfig\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 topAppBarConfig\n        [ TopAppBar.row []\n            [ TopAppBar.section [ TopAppBar.alignStart ]\n                [ iconButton\n                    { iconButtonConfig\n                        | additionalAttributes =\n                            [ TopAppBar.navigationIcon ]\n                    }\n                    \"menu\"\n                , Html.span [ TopAppBar.title ]\n                    [ text \"Title\" ]\n                ]\n            , TopAppBar.section [ TopAppBar.alignEnd ]\n                [ iconButton\n                    { iconButtonConfig\n                        | additionalAttributes =\n                            [ TopAppBar.actionItem ]\n                    }\n                    \"print\"\n                , iconButton\n                    { iconButtonConfig\n                        | additionalAttributes =\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 `fixed` configuration field to\n`True`. Since a fixed top app bar would overlay the pages content, an\nappropriate margin has to be applied to the page's content.\n\n    topAppBar { topAppBarConfig | fixed = True } []\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    shortTopAppBar topAppBarConfig []\n\n@docs shortTopAppBar\n\n\n## Short Always Closed Variant\n\nA short top app bar can be configured to always appear closed.\n\n    shortCollapsedtopAppBar topAppBarConfig []\n\n@docs shortCollapsedTopAppBar\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    prominentTopAppBar topAppBarConfig []\n\n@docs prominentTopAppBar\n\n\n# Dense Variant\n\nTo make a top app bar shorter than the default, set its `dense` configuration\nfield to `True`.\n\n    topAppBar { topAppBarConfig | dense = True }\n\n","unions":[],"aliases":[{"name":"TopAppBarConfig","comment":" Configuration of a top app bar\n","args":["msg"],"type":"{ dense : Basics.Bool, fixed : Basics.Bool, additionalAttributes : List.List (Html.Attribute msg) }"}],"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":"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":"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":"prominentTopAppBar","comment":" Prominent top app bar view function\n","type":"Material.TopAppBar.TopAppBarConfig 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":"shortCollapsedTopAppBar","comment":" Short always closed top app bar view function\n","type":"Material.TopAppBar.TopAppBarConfig 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":"shortTopAppBar","comment":" Short top app bar view function\n","type":"Material.TopAppBar.TopAppBarConfig msg -> List.List (Html.Html msg) -> Html.Html 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"},{"name":"topAppBar","comment":" Top app bar view function\n","type":"Material.TopAppBar.TopAppBarConfig msg -> List.List (Html.Html msg) -> Html.Html msg"},{"name":"topAppBarConfig","comment":" Default configuration of a top app bar\n","type":"Material.TopAppBar.TopAppBarConfig 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":[]}]