finishing the material design

example/src/Data/Example.elm

@@ -1,4 +1,4 @@
-module Data.Example exposing (Model, Msg, init, subscriptions, toCardList, update, view)
+module Data.Example exposing (Example, asList, toString,fromString, Model, Msg, init, subscriptions, toCardList, update, view)
 
 import Data.Style exposing (Style)
 import Element exposing (Element)
@@ -15,6 +15,90 @@ import Example.TextInput as TextInput
 import Framework.Grid as Grid
 import View.Test as Test
 
+type Example
+    = ButtonExample
+    | SelectExample
+    | MultiSelectExample
+    | ExpansionPanelExample
+    | TabExample
+    | SortTableExample
+    | ModalExample
+    | DialogExample
+    | TextInputExample
+    | ListExample
+
+asList : List Example
+asList =
+    [ ButtonExample
+    , SelectExample
+    , MultiSelectExample
+    , ExpansionPanelExample
+    , TabExample
+    , SortTableExample
+    , ModalExample
+    , DialogExample
+    , TextInputExample
+    , ListExample
+    ]
+    |> List.sortBy toString
+
+
+toString : Example -> String
+toString example =
+    case example of
+        ButtonExample -> "Button"
+        SelectExample -> "Select"
+        MultiSelectExample -> "Multi Select"
+        ExpansionPanelExample -> "ExpansionPanel"
+        TabExample -> "Tab"
+        SortTableExample -> "SortTable"
+        ModalExample -> "Modal"
+        DialogExample -> "Dialog"
+        TextInputExample -> "TextInput"
+        ListExample -> "List"
+
+fromString  : String -> Maybe Example
+fromString string =
+    case string of
+          "Button" -> Just ButtonExample
+          "Select" -> Just SelectExample
+          "Multi Select" -> Just MultiSelectExample
+          "ExpansionPanel" -> Just ExpansionPanelExample
+          "Tab" -> Just TabExample
+          "SortTable" -> Just SortTableExample
+          "Modal" -> Just ModalExample
+          "Dialog" -> Just DialogExample
+          "TextInput" -> Just TextInputExample
+          "List" -> Just ListExample
+          _ -> Nothing
+
+get : Example -> ExampleView msg -> Element msg
+get example =
+    case example of
+        ButtonExample -> .button
+        SelectExample -> .select
+        MultiSelectExample -> .multiSelect
+        ExpansionPanelExample -> .expansionPanel
+        TabExample -> .tab
+        SortTableExample -> .sortTable
+        ModalExample -> .modal
+        DialogExample -> .dialog
+        TextInputExample -> .textInput
+        ListExample -> .list
+
+toTests : Example -> msg -> Style msg -> List ( String, Element msg )
+toTests example =
+    case example of
+        ButtonExample -> Test.button
+        SelectExample -> Test.select
+        MultiSelectExample -> Test.multiSelect
+        ExpansionPanelExample -> Test.expansionPanel
+        TabExample -> Test.tab
+        SortTableExample -> Test.sortTable
+        ModalExample -> Test.modal
+        DialogExample -> Test.dialog
+        TextInputExample -> Test.textInput
+        ListExample -> Test.list
 
 type Msg
     = Button Button.Msg
@@ -29,6 +113,7 @@ type Msg
     | List List.Msg
 
 
+
 type alias Model =
     { button : Button.Model
     , select : Select.Model
@@ -65,6 +150,18 @@ type alias UpgradeCollection =
     , list : UpgradeRecord List.Model List.Msg
     }
 
+type alias ExampleView msg =
+    { button : Element msg
+        , select : Element msg
+        , multiSelect : Element msg
+        , expansionPanel : Element msg
+        , tab : Element msg
+        , sortTable : Element msg
+        , modal : Element msg
+        , dialog : Element msg
+        , textInput : Element msg
+        , list : Element msg
+        }
 
 init : ( Model, Cmd Msg )
 init =
@@ -260,18 +357,8 @@ view :
     (Msg -> msg)
     -> Style msg
     -> Model
-    ->
+    -> ExampleView msg
-        { button : Element msg
+        
-        , select : Element msg
-        , multiSelect : Element msg
-        , expansionPanel : Element msg
-        , tab : Element msg
-        , sortTable : Element msg
-        , modal : Element msg
-        , dialog : Element msg
-        , textInput : Element msg
-        , list : Element msg
-        }
 view msgMapper style model =
     { button =
         Button.view (Button >> msgMapper) style (.button model)
@@ -304,48 +391,14 @@ toCardList :
     }
     -> List ( String, Element msg, Element msg )
 toCardList { idle, msgMapper, style, model } =
-    [ { title = "Button"
+    asList
-      , example = .button
+    |> List.map 
-      , test = Test.button
+        (\example ->
-      }
+            { title = example |> toString
-    , { title = "Select"
+            , example = example |> get
-      , example = .select
+            , test = example |> toTests
-      , test = Test.select
+            }
-      }
+        )
-    , { title = "Multi Select"
-      , example = .multiSelect
-      , test = Test.multiSelect
-      }
-    , { title = "Expansion Panel"
-      , example = .expansionPanel
-      , test = Test.expansionPanel
-      }
-    , { title = "Tab"
-      , example = .tab
-      , test = Test.tab
-      }
-    , { title = "Sort Table"
-      , example = .sortTable
-      , test = Test.sortTable
-      }
-    , { title = "Modal"
-      , example = .modal
-      , test = Test.modal
-      }
-    , { title = "Dialog"
-      , example = .dialog
-      , test = Test.dialog
-      }
-    , { title = "Text Input"
-      , example = .textInput
-      , test = Test.textInput
-      }
-    , { title = "List"
-      , example = .list
-      , test = Test.list
-      }
-    ]
-        |> List.sortBy .title
         |> List.map
             (\{ title, example, test } ->
                 ( title

example/src/Data/Style/Material.elm

@@ -35,30 +35,6 @@ sortTable palette =
     , defaultIcon = Element.none
     }
 
-layout : Palette -> String -> LayoutStyle msg
-layout palette string =
-    { container = [Font.family
-            [ Font.typeface "Roboto"
-            , Font.sansSerif
-            ]
-        ,Font.size 16
-    , Font.letterSpacing 0.5]
-    , snackbar = Material.snackbar palette
-    , layout = Element.layout
-    , header = Template.box <| string ++ ":header"
-    , menuButton = Template.button <| string ++ ":menuButton"
-    , sheetButton = Template.button <| string ++ ":sheetButton"
-    , menuTabButton = Template.button <| string ++ ":menuTabButton"
-    , sheet = Template.box <| string ++ ":sheet"
-    , menuIcon = Template.icon <| string ++ ":menuIcon"
-    , moreVerticalIcon = Template.icon <| string ++ ":moreVerticalIcon"
-    , spacing = 8
-    , title = Template.box <| string ++ ":title"
-    , searchIcon = Template.icon <| string ++ ":searchIcon"
-    , search = Template.box <| string ++ ":search"
-    , searchFill = Template.box <| string ++ ":searchFill"
-    }
-
 
 style : Palette -> Style msg
 style palette =
@@ -70,10 +46,10 @@ style palette =
     , button = Material.outlinedButton palette
     , primaryButton = Material.containedButton palette
     , selectButton = Material.toggleButton palette
-    , tab = Template.tab <| "tab"
+    , tab = Material.tab palette
     , textInput = Material.textInput palette
     , chipButton = Material.chip palette
     , expansionPanel = Material.expansionPanel palette
     , dialog = Material.alertDialog palette
-    , layout = layout palette "layout"
+    , layout = Material.layout palette "layout"
     }

example/src/Main.elm

@@ -8,11 +8,13 @@ import Browser.Navigation as Navigation
 import Data.Section as Section exposing (Section(..))
 import Data.Style exposing (Style)
 import Data.Theme as Theme exposing (Theme(..))
+import Data.Example as Example exposing (Example)
 import Element exposing (DeviceClass(..))
 import Framework
 import Framework.Grid as Grid
 import Framework.Heading as Heading
 import Html exposing (Html)
+import Html.Attributes as Attributes
 import Icons
 import Reusable
 import Stateless
@@ -25,7 +27,7 @@ import Widget.ScrollingNav as ScrollingNav
 
 type alias LoadedModel =
     { stateless : Stateless.Model
-    , scrollingNav : ScrollingNav.Model Section
+    , scrollingNav : ScrollingNav.Model Example
     , layout : Layout LoadedMsg
     , displayDialog : Bool
     , window :
@@ -48,14 +50,14 @@ type Model
 
 type LoadedMsg
     = StatelessSpecific Stateless.Msg
-    | UpdateScrollingNav (ScrollingNav.Model Section -> ScrollingNav.Model Section)
+    | UpdateScrollingNav (ScrollingNav.Model Example -> ScrollingNav.Model Example)
     | TimePassed Int
     | AddSnackbar ( String, Bool )
     | ToggleDialog Bool
     | ChangedSidebar (Maybe Part)
     | Resized { width : Int, height : Int }
     | Load String
-    | JumpTo Section
+    | JumpTo Example
     | ChangedSearch String
     | SetTheme Theme
     | Idle
@@ -71,9 +73,9 @@ initialModel { viewport } =
     let
         ( scrollingNav, cmd ) =
             ScrollingNav.init
-                { toString = Section.toString
+                { toString = Example.toString
-                , fromString = Section.fromString
+                , fromString = Example.fromString
-                , arrangement = Section.asList
+                , arrangement = Example.asList 
                 , toMsg =
                     \result ->
                         case result of
@@ -170,24 +172,6 @@ view model =
                           , text = "Github"
                           , icon = Icons.github |> Element.html |> Element.el []
                           }
-                        , { onPress =
-                                if m.theme /= ElmUiFramework then
-                                    Just <| SetTheme <| ElmUiFramework
-
-                                else
-                                    Nothing
-                          , text = "Elm-Ui-Framework Theme"
-                          , icon = Icons.penTool |> Element.html |> Element.el []
-                          }
-                        , { onPress =
-                                if m.theme /= Template then
-                                    Just <| SetTheme <| Template
-
-                                else
-                                    Nothing
-                          , text = "Template Theme"
-                          , icon = Icons.penTool |> Element.html |> Element.el []
-                          }
                         , { onPress =
                                 if m.theme /= Material then
                                     Just <| SetTheme <| Material
@@ -206,6 +190,25 @@ view model =
                           , text = "Dark Material Theme"
                           , icon = Icons.penTool |> Element.html |> Element.el []
                           }
+                        
+                        , { onPress =
+                                if m.theme /= ElmUiFramework then
+                                    Just <| SetTheme <| ElmUiFramework
+
+                                else
+                                    Nothing
+                          , text = "Elm-Ui-Framework Theme"
+                          , icon = Icons.penTool |> Element.html |> Element.el []
+                          }
+                        , { onPress =
+                                if m.theme /= Template then
+                                    Just <| SetTheme <| Template
+
+                                else
+                                    Nothing
+                          , text = "Template Theme"
+                          , icon = Icons.penTool |> Element.html |> Element.el []
+                          }
                         ]
                     , onChangedSidebar = ChangedSidebar
                     , title =
@@ -219,9 +222,10 @@ view model =
                             , label = "Search"
                             }
                     } <|
-                    ([ Element.el [ Element.height <| Element.px <| 42 ] <| Element.none
+                    (
-                        , [ m.scrollingNav
+                        [ Element.el [ Element.height <| Element.px <| 42 ] <| Element.none
-                                |> ScrollingNav.view
+                        , [StatelessViews,ReusableViews]
+                                |> List.map
                                     (\section ->
                                         (case section of
                                             ReusableViews ->
@@ -238,7 +242,9 @@ view model =
                                                     }
                                         )
                                             |> (\{ title, description, items } ->
-                                                    [ Element.el Heading.h2 <| Element.text <| title
+                                                    [ title
+                                                    |> Element.text
+                                                    |> Element.el ( Heading.h2 )
                                                     , if m.search.current == "" then
                                                         description
                                                             |> Element.text
@@ -262,7 +268,10 @@ view model =
                                                         |> List.map
                                                             (\( name, elem, more ) ->
                                                                 [ [ Element.text name
-                                                                        |> Element.el (Heading.h3 ++ [ Element.height <| Element.shrink ])
+                                                                        |> Element.el (Heading.h3 ++ [ Element.height <| Element.shrink 
+                                                                       , name
+                                                            |> Attributes.id
+                                                            |> Element.htmlAttribute])
                                                                   , elem
                                                                   ]
                                                                     |> Element.column Grid.simple
@@ -282,10 +291,12 @@ view model =
                                                         |> Element.column (Grid.section ++ [ Element.centerX ])
                                                )
                                     )
-                          ]
+                               -- |> Element.column Grid.section
-                            |> Element.column Framework.container
+                          --]
+                            |> Element.column (Framework.container ++ style.layout.container)
                         ]
-                            |> Element.column Grid.compact)
+                            |> Element.column Grid.compact
+                    )
 
 
 updateLoaded : LoadedMsg -> LoadedModel -> ( LoadedModel, Cmd LoadedMsg )

src/Internal/Button.elm

@@ -73,3 +73,4 @@ button style { onPress, text, icon } =
                 , Element.text text |> Element.el style.text
                 ]
         }
+        

src/Widget/Layout.elm

@@ -127,12 +127,13 @@ view style { search, title, onChangedSidebar, menu, actions, window, dialog, lay
                                 |> Array.fromList
                                 |> Array.get option
                         )
-                    |> Maybe.map (.text >> Element.text >> Element.el style.title)
+                    |> Maybe.map (.text >> Element.text)
                     |> Maybe.withDefault title
+                    |> Element.el style.title
                 ]
 
                else
-                [ title
+                [ title |> Element.el style.title
                 , menu
                     |> Widget.select
                     |> List.map (Widget.selectButton style.menuTabButton)
@@ -240,7 +241,9 @@ view style { search, title, onChangedSidebar, menu, actions, window, dialog, lay
                       ]
                     , menu
                         |> Widget.select
-                        |> List.map (Widget.selectButton style.sheetButton)
+                        |> List.map
+                            (Widget.selectButton style.sheetButton
+                            )
                     ]
                         |> List.concat
                         |> Element.column [ Element.width <| Element.fill ]
@@ -297,20 +300,20 @@ view style { search, title, onChangedSidebar, menu, actions, window, dialog, lay
                   , Element.inFront snackbar
                   ]
                 , if (layout.active /= Nothing) || (dialog /= Nothing) then
-                    (Element.height <| Element.px <| window.height)
+                    --(Element.height <| Element.px <| window.height)
-                        :: (case dialog of
+                    --    ::
-                                Just dialogConfig ->
+                    case dialog of
-                                    dialogConfig
+                        Just dialogConfig ->
+                            dialogConfig
 
-                                Nothing ->
+                        Nothing ->
-                                    Widget.modal
+                            Widget.modal
-                                        { onDismiss =
+                                { onDismiss =
-                                            Nothing
+                                    Nothing
-                                                |> onChangedSidebar
+                                        |> onChangedSidebar
-                                                |> Just
+                                        |> Just
-                                        , content = sheet
+                                , content = sheet
-                                        }
+                                }
-                           )
 
                   else
                     []

src/Widget/Style/Material.elm

@@ -5,7 +5,7 @@ module Widget.Style.Material exposing
     , alertDialog
     , row, column, cardColumn
     , expansionPanel
-    , chip, darkPalette, snackbar, textInput
+    , chip, darkPalette, iconButton, layout, snackbar, tab, tabButton, textInput
     )
 
 {-|
@@ -60,12 +60,13 @@ import Widget.Style
         , ColumnStyle
         , DialogStyle
         , ExpansionPanelStyle
+        , LayoutStyle
         , RowStyle
         , SnackbarStyle
-        , SortTableStyle
         , TabStyle
         , TextInputStyle
         )
+import Widget.Style.Template as Template
 
 
 
@@ -239,6 +240,7 @@ accessibleWithTextColor c color =
            )
 
 
+toCIELCH : Color -> { l : Float, c : Float, h : Float }
 toCIELCH =
     Convert.colorToLab
         >> (\{ l, a, b } ->
@@ -249,6 +251,7 @@ toCIELCH =
            )
 
 
+fromCIELCH : { l : Float, c : Float, h : Float } -> Color
 fromCIELCH =
     (\{ l, c, h } ->
         { l = l
@@ -524,7 +527,7 @@ textButton palette =
     }
 
 
-{-| Implementation Detail:
+{-| Technical Remark:
 
   - Border color was not defined in the [specification](https://material.io/components/buttons#toggle-button)
 
@@ -613,13 +616,72 @@ toggleButton palette =
     }
 
 
+{-| Technical Remark:
+
+  - Could not find any specification details
+
+-}
+iconButton : Palette -> ButtonStyle msg
+iconButton palette =
+    { container =
+        (baseButton palette |> .container)
+            ++ [ Element.height <| Element.px 48
+               , Border.rounded 24
+
+               --, Font.color <| fromColor <| palette.primary
+               , Element.mouseDown
+                    [ palette.surface
+                        |> scaleOpacity buttonPressedOpacity
+                        |> fromColor
+                        |> Background.color
+                    ]
+               , Element.focused
+                    [ palette.surface
+                        |> scaleOpacity buttonFocusOpacity
+                        |> fromColor
+                        |> Background.color
+                    ]
+               , Element.mouseOver
+                    [ palette.surface
+                        |> scaleOpacity buttonHoverOpacity
+                        |> fromColor
+                        |> Background.color
+                    ]
+               ]
+    , labelRow =
+        [ Element.spacing 8
+        , Element.width <| Element.shrink
+        , Element.centerY
+        , Element.centerX
+        ]
+    , text = baseButton palette |> .text
+    , ifDisabled =
+        (baseButton palette |> .ifDisabled)
+            ++ [ gray
+                    |> fromColor
+                    |> Font.color
+               , Element.mouseDown []
+               , Element.mouseOver []
+               , Element.focused []
+               ]
+    , ifActive =
+        [ palette.surface
+            |> scaleOpacity buttonHoverOpacity
+            |> fromColor
+            |> Background.color
+        ]
+    , otherwise =
+        []
+    }
+
+
 
 {-------------------------------------------------------------------------------
 -- C H I P
 -------------------------------------------------------------------------------}
 
 
-{-| Implementation Detail:
+{-| Technical Remark:
 
   - There seams to be a bug, where in the mouseOver effects are now visible.
     This might have something to do with <https://github.com/mdgriffith/elm-ui/issues/47>.
@@ -747,7 +809,7 @@ buttonRow =
     }
 
 
-{-| Implementation Detail:
+{-| Technical Remark:
 
 This is a simplification of the [Material Design Card
 ](https://material.io/components/cards) and might get replaced at a later date.
@@ -849,17 +911,18 @@ alertDialog palette =
 -------------------------------------------------------------------------------}
 
 
-icon : String -> List (Svg Never) -> Element Never
+icon : String -> Int -> List (Svg Never) -> Element Never
-icon size =
+icon string size =
     Svg.svg
-        [ Svg.Attributes.height "24"
+        [ Svg.Attributes.height <| String.fromInt size
         , Svg.Attributes.stroke "currentColor"
         , Svg.Attributes.fill "currentColor"
-        , Svg.Attributes.strokeLinecap "round"
+
-        , Svg.Attributes.strokeLinejoin "round"
+        --, Svg.Attributes.strokeLinecap "round"
-        , Svg.Attributes.strokeWidth "2"
+        --, Svg.Attributes.strokeLinejoin "round"
-        , Svg.Attributes.viewBox size
+        --, Svg.Attributes.strokeWidth "2"
-        , Svg.Attributes.width "24"
+        , Svg.Attributes.viewBox string
+        , Svg.Attributes.width <| String.fromInt size
         ]
         >> Element.html
         >> Element.el []
@@ -867,20 +930,20 @@ icon size =
 
 expand_less : Element Never
 expand_less =
-    icon "0 0 48 48" [ Svg.path [ Svg.Attributes.d "M24 16L12 28l2.83 2.83L24 21.66l9.17 9.17L36 28z" ] [] ]
+    icon "0 0 48 48" 24 [ Svg.path [ Svg.Attributes.d "M24 16L12 28l2.83 2.83L24 21.66l9.17 9.17L36 28z" ] [] ]
 
 
 expand_more : Element Never
 expand_more =
-    icon "0 0 48 48" [ Svg.path [ Svg.Attributes.d "M33.17 17.17L24 26.34l-9.17-9.17L12 20l12 12 12-12z" ] [] ]
+    icon "0 0 48 48" 24 [ Svg.path [ Svg.Attributes.d "M33.17 17.17L24 26.34l-9.17-9.17L12 20l12 12 12-12z" ] [] ]
 
 
-{-| Implementation Details:
+{-| Technical Remarks:
 
   - The expansion panel is part of an [older version](https://material.io/archive/guidelines/components/expansion-panels.html) of the Material Design.
     The newer version is part of the List component.
     The styling is taken from the [new specification](https://material.io/components/lists#specs).
-  - The Icons are taken from [icidasset/elm-material-icons](https://dark.elm.dmy.fr/packages/icidasset/elm-material-icons/latest) but seem wrong.
+  - The Icons are taken from [danmarcab/material-icons](https://dark.elm.dmy.fr/packages/danmarcab/material-icons/latest/).
 
 -}
 expansionPanel : Palette -> ExpansionPanelStyle msg
@@ -923,7 +986,7 @@ expansionPanel palette =
 -------------------------------------------------------------------------------}
 
 
-{-| Implementation Detail:
+{-| Technical Remark:
 
   - The text color of the button was not given in the specification. This implementation
     adujsts the luminance of the color to fit the [w3 accessability standard](https://www.w3.org/TR/WCAG20/#Contrast)
@@ -971,7 +1034,7 @@ snackbar palette =
 -------------------------------------------------------------------------------}
 
 
-{-| Implementation Detail:
+{-| Technical Remark:
 
   - This is just a temporary implementation. It will soon be replaced with the official implementation.
 
@@ -981,27 +1044,111 @@ textInput palette =
     { chipButton = chip palette
     , chipsRow = [ Element.spacing 8 ]
     , containerRow =
-        [ Element.spacing 8
+        (palette.surface
-        , Element.paddingXY 8 0
+            |> textAndBackground
-        , Border.width 1
+        )
-        , Border.rounded 4
+            ++ [ Element.spacing 8
-        , palette.on.surface
+               , Element.paddingXY 8 0
-            |> scaleOpacity 0.14
+               , Border.width 1
-            |> fromColor
+               , Border.rounded 4
-            |> Border.color
+               , palette.on.surface
-        , Element.focused
+                    |> scaleOpacity 0.14
-            [ Border.shadow <| shadow 4
+                    |> fromColor
-            , palette.primary
+                    |> Border.color
-                |> fromColor
+               , Element.focused
-                |> Border.color
+                    [ Border.shadow <| shadow 4
-            ]
+                    , palette.primary
-        , Element.mouseOver [ Border.shadow <| shadow 2 ]
+                        |> fromColor
-        ]
+                        |> Border.color
+                    ]
+               , Element.mouseOver [ Border.shadow <| shadow 2 ]
+               ]
     , input =
-        [ Border.width 0
+        (palette.surface
-        , Element.mouseOver []
+            |> textAndBackground
-        , Element.focused []
+        )
+            ++ [ Border.width 0
+               , Element.mouseOver []
+               , Element.focused []
+               ]
+    }
+
+
+
+{-------------------------------------------------------------------------------
+-- T A B
+-------------------------------------------------------------------------------}
+
+
+tabButton : Palette -> ButtonStyle msg
+tabButton palette =
+    { container =
+        buttonFont
+            ++ [ Element.height <| Element.px 48
+               , Element.fill
+                    |> Element.maximum 360
+                    |> Element.minimum 90
+                    |> Element.width
+               , Element.paddingXY 12 16
+               , Font.color <| fromColor <| palette.primary
+               , Element.mouseDown
+                    [ palette.primary
+                        |> scaleOpacity buttonPressedOpacity
+                        |> fromColor
+                        |> Background.color
+                    ]
+               , Element.focused
+                    [ palette.primary
+                        |> scaleOpacity buttonFocusOpacity
+                        |> fromColor
+                        |> Background.color
+                    ]
+               , Element.mouseOver
+                    [ palette.primary
+                        |> scaleOpacity buttonHoverOpacity
+                        |> fromColor
+                        |> Background.color
+                    ]
+               ]
+    , labelRow =
+        [ Element.spacing <| 8
+        , Element.centerY
+        , Element.centerX
         ]
+    , text = []
+    , ifDisabled =
+        (baseButton palette |> .ifDisabled)
+            ++ [ gray
+                    |> fromColor
+                    |> Font.color
+               , Element.mouseDown []
+               , Element.mouseOver []
+               , Element.focused []
+               ]
+    , ifActive =
+        [ Element.height <| Element.px 48
+        , Border.widthEach
+            { bottom = 2
+            , left = 0
+            , right = 0
+            , top = 0
+            }
+        ]
+    , otherwise =
+        []
+    }
+
+
+{-| -}
+tab : Palette -> TabStyle msg
+tab palette =
+    { button = tabButton palette
+    , optionRow =
+        [ Element.spaceEvenly
+        , Border.shadow <| shadow 4
+        ]
+    , containerColumn = [ Element.spacing 8 ]
+    , content = [ Element.width <| Element.fill ]
     }
 
 
@@ -1010,3 +1157,203 @@ textInput palette =
 -- L A Y O U T
 -------------------------------------------------------------------------------}
 
+
+more_vert : Element Never
+more_vert =
+    icon "0 0 48 48" 24 [ Svg.path [ Svg.Attributes.d "M24 16c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 4c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 12c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z" ] [] ]
+
+
+search : Element Never
+search =
+    icon "0 0 48 48" 24 [ Svg.path [ Svg.Attributes.d "M31 28h-1.59l-.55-.55C30.82 25.18 32 22.23 32 19c0-7.18-5.82-13-13-13S6 11.82 6 19s5.82 13 13 13c3.23 0 6.18-1.18 8.45-3.13l.55.55V31l10 9.98L40.98 38 31 28zm-12 0c-4.97 0-9-4.03-9-9s4.03-9 9-9 9 4.03 9 9-4.03 9-9 9z" ] [] ]
+
+
+menu : Element Never
+menu =
+    icon "0 0 48 48" 24 [ Svg.path [ Svg.Attributes.d "M6 36h36v-4H6v4zm0-10h36v-4H6v4zm0-14v4h36v-4H6z" ] [] ]
+
+
+menuTabButton : Palette -> ButtonStyle msg
+menuTabButton palette =
+    { container =
+        buttonFont
+            ++ [ Element.height <| Element.px 56
+               , Element.fill
+                    |> Element.maximum 360
+                    |> Element.minimum 90
+                    |> Element.width
+               , Element.paddingXY 12 16
+               , palette.primary
+                    |> accessibleTextColor
+                    |> fromColor
+                    |> Font.color
+               , Element.alignBottom
+               , Element.mouseDown
+                    [ palette.primary
+                        |> scaleOpacity buttonPressedOpacity
+                        |> fromColor
+                        |> Background.color
+                    ]
+               , Element.focused
+                    [ palette.primary
+                        |> scaleOpacity buttonFocusOpacity
+                        |> fromColor
+                        |> Background.color
+                    ]
+               , Element.mouseOver
+                    [ palette.primary
+                        |> scaleOpacity buttonHoverOpacity
+                        |> fromColor
+                        |> Background.color
+                    ]
+               ]
+    , labelRow =
+        [ Element.spacing <| 8
+        , Element.centerY
+        , Element.centerX
+        ]
+    , text = []
+    , ifDisabled =
+        (baseButton palette |> .ifDisabled)
+            ++ [ gray
+                    |> fromColor
+                    |> Font.color
+               , Element.mouseDown []
+               , Element.mouseOver []
+               , Element.focused []
+               ]
+    , ifActive =
+        [ Border.widthEach
+            { bottom = 2
+            , left = 0
+            , right = 0
+            , top = 0
+            }
+        ]
+    , otherwise =
+        []
+    }
+
+
+drawerButton : Palette -> ButtonStyle msg
+drawerButton palette =
+    { container =
+        [ Font.size 14
+        , Font.semiBold
+        , Font.letterSpacing 0.25
+        , Element.height <| Element.px 36
+        , Element.width <| Element.fill
+        , Element.paddingXY 8 8
+        , Border.rounded <| 4
+        , palette.surface
+            |> accessibleTextColor
+            |> fromColor
+            |> Font.color
+        , Element.mouseDown
+            [ palette.primary
+                |> scaleOpacity buttonPressedOpacity
+                |> fromColor
+                |> Background.color
+            ]
+        , Element.focused
+            [ palette.primary
+                |> scaleOpacity buttonFocusOpacity
+                |> fromColor
+                |> Background.color
+            ]
+        , Element.mouseOver
+            [ palette.primary
+                |> scaleOpacity buttonHoverOpacity
+                |> fromColor
+                |> Background.color
+            ]
+        ]
+    , labelRow = baseButton palette |> .labelRow
+    , text = baseButton palette |> .text
+    , ifDisabled =
+        (baseButton palette |> .ifDisabled)
+            ++ [ gray
+                    |> fromColor
+                    |> Font.color
+               , Element.mouseDown []
+               , Element.mouseOver []
+               , Element.focused []
+               ]
+    , ifActive =
+        [ palette.primary
+            |> scaleOpacity buttonHoverOpacity
+            |> fromColor
+            |> Background.color
+        , palette.primary
+            |> fromColor
+            |> Font.color
+        ]
+    , otherwise =
+        []
+    }
+
+
+{-| Technical Remark:
+
+  - Due to [a bug in Elm-Ui](https://github.com/mdgriffith/elm-ui/issues/47) the menu button still behave wierd.
+    I've not found a workaround for it.
+  - The Icons are taken from [danmarcab/material-icons](https://dark.elm.dmy.fr/packages/danmarcab/material-icons/latest/).
+  - The drawer button as not taken from the specification (This will been to be added later)
+
+-}
+layout : Palette -> String -> LayoutStyle msg
+layout palette string =
+    { container =
+        (palette.background |> textAndBackground)
+            ++ [ Font.family
+                    [ Font.typeface "Roboto"
+                    , Font.sansSerif
+                    ]
+               , Font.size 16
+               , Font.letterSpacing 0.5
+               ]
+    , snackbar = snackbar palette
+    , layout = Element.layout
+    , header =
+        (palette.primary
+            |> textAndBackground
+        )
+            ++ [ Element.height <| Element.px 56
+               , Element.padding 16
+               , Element.width <| Element.minimum 360 <| Element.fill
+               ]
+    , menuButton = iconButton palette
+    , sheetButton = drawerButton palette
+    , menuTabButton = menuTabButton palette
+    , sheet =
+        (palette.surface |> textAndBackground)
+            ++ [ Element.width <| Element.maximum 360 <| Element.fill
+               , Element.padding 8
+               , Element.spacing 8
+               ]
+    , menuIcon = menu
+    , moreVerticalIcon = more_vert
+    , spacing = 8
+    , title = h6 ++ [ Element.paddingXY 8 0 ]
+    , searchIcon = search
+    , search =
+        (palette.surface |> textAndBackground)
+            ++ [ Element.spacing 8
+               , Element.paddingXY 8 8
+               , Element.height <| Element.px 32
+               , Border.width 1
+               , Border.rounded 4
+               , palette.on.surface
+                    |> scaleOpacity 0.14
+                    |> fromColor
+                    |> Border.color
+               , Element.focused
+                    [ Border.shadow <| shadow 4
+                    ]
+               , Element.mouseOver [ Border.shadow <| shadow 2 ]
+               , Element.width <| Element.maximum 360 <| Element.fill
+               , Element.alignRight
+               ]
+    , searchFill =
+        palette.surface |> textAndBackground
+    }