Moved Widget.Style into Widget

2024-10-03 17:17:33 +03:00 · 2021-01-24 09:41:55 +01:00 · 2021-01-24 09:41:55 +01:00 · 0ee3258458
commit 0ee3258458
parent 0f62ce0c91
48 changed files with 761 additions and 632 deletions
--- a/elm-analyse.json
+++ b/elm-analyse.json
@ -0,0 +1,5 @@
+{
+  "checks": {
+    "SingleFieldRecord": false
+  }
+}
--- a/example/src/Data/Style.elm
+++ b/example/src/Data/Style.elm
@ -1,22 +1,73 @@
-module Data.Style exposing (Style)
+module Data.Style exposing (Style,style)

-import Widget.Style
+import Color exposing (Color)
+import Color.Accessibility as Accessibility
+import Color.Convert as Convert
+import Element exposing (Attribute, Element)
+import Element.Background as Background
+import Element.Border as Border
+import Element.Font as Font
+import FeatherIcons
+import Html.Attributes as Attributes
+import Icons
+import Widget.Icon as Icon
+import Widget
    exposing
        ( ButtonStyle
        , ColumnStyle
        , DialogStyle
+        , ExpansionPanelStyle
+        , RowStyle
+        , SortTableStyle
+        , TabStyle
+        , TextInputStyle
+        , ButtonStyle
+        , ColumnStyle
+        , DialogStyle
        , DividerStyle
        , ExpansionPanelStyle
        , ItemStyle
-        , LayoutStyle
        , ProgressIndicatorStyle
        , RowStyle
        , SortTableStyle
        , SwitchStyle
        , TabStyle
        , TextInputStyle
-        , TitleStyle
+        , HeaderStyle
        )
+import Widget.Snackbar exposing (SnackbarStyle)
+import Widget.Layout exposing (LayoutStyle)
+import Widget.Style.Material as Material exposing (Palette)
+
+
+style : Palette -> Style msg
+style palette =
+    { sortTable = Material.sortTable palette
+    , row = Material.row
+    , buttonRow = Material.buttonRow
+    , cardColumn = Material.cardColumn palette
+    , column = Material.column
+    , button = Material.outlinedButton palette
+    , primaryButton = Material.containedButton palette
+    , selectButton = Material.toggleButton palette
+    , tab = Material.tab palette
+    , textInput = Material.textInput palette
+    , chipButton = Material.chip palette
+    , expansionPanel = Material.expansionPanel palette
+    , expansionPanelItem = Material.expansionPanelItem palette
+    , dialog = Material.alertDialog palette
+    , progressIndicator = Material.progressIndicator palette
+    , layout = Material.layout palette
+    , switch = Material.switch palette
+    , fullBleedDivider = Material.fullBleedDivider
+    , insetDivider = Material.insetDivider palette
+    , middleDividers = Material.middleDividers palette
+    , insetHeader = Material.insetHeader palette
+    , fullBleedHeader = Material.fullBleedHeader palette
+    }
+
+
+


 type alias Style msg =
@ -40,6 +91,6 @@ type alias Style msg =
    , fullBleedDivider : ItemStyle (DividerStyle msg)
    , insetDivider : ItemStyle (DividerStyle msg)
    , middleDividers : ItemStyle (DividerStyle msg)
-    , insetTitle : ItemStyle (TitleStyle msg)
-    , fullBleedTitle : ItemStyle (TitleStyle msg)
+    , insetHeader : ItemStyle (HeaderStyle msg)
+    , fullBleedHeader : ItemStyle (HeaderStyle msg)
    }
--- a/example/src/Data/Style/Material.elm
+++ b/example/src/Data/Style/Material.elm
@ -1,67 +0,0 @@
-module Data.Style.Material exposing (style)
-
-import Color exposing (Color)
-import Color.Accessibility as Accessibility
-import Color.Convert as Convert
-import Data.Style exposing (Style)
-import Element exposing (Attribute, Element)
-import Element.Background as Background
-import Element.Border as Border
-import Element.Font as Font
-import FeatherIcons
-import Html.Attributes as Attributes
-import Icons
-import Widget.Icon as Icon
-import Widget.Style
-    exposing
-        ( ButtonStyle
-        , ColumnStyle
-        , DialogStyle
-        , ExpansionPanelStyle
-        , LayoutStyle
-        , RowStyle
-        , SnackbarStyle
-        , SortTableStyle
-        , TabStyle
-        , TextInputStyle
-        )
-import Widget.Style.Material as Material exposing (Palette)
-
-
-sortTable : Palette -> SortTableStyle msg
-sortTable palette =
-    { elementTable = []
-    , content =
-        { header = Material.textButton palette
-        , ascIcon = FeatherIcons.chevronUp |> Icon.elmFeather FeatherIcons.toHtml
-        , descIcon = FeatherIcons.chevronDown |> Icon.elmFeather FeatherIcons.toHtml
-        , defaultIcon = always Element.none
-        }
-    }
-
-
-style : Palette -> Style msg
-style palette =
-    { sortTable = sortTable palette
-    , row = Material.row
-    , buttonRow = Material.buttonRow
-    , cardColumn = Material.cardColumn palette
-    , column = Material.column
-    , button = Material.outlinedButton palette
-    , primaryButton = Material.containedButton palette
-    , selectButton = Material.toggleButton palette
-    , tab = Material.tab palette
-    , textInput = Material.textInput palette
-    , chipButton = Material.chip palette
-    , expansionPanel = Material.expansionPanel palette
-    , expansionPanelItem = Material.expansionPanelItem palette
-    , dialog = Material.alertDialog palette
-    , progressIndicator = Material.progressIndicator palette
-    , layout = Material.layout palette
-    , switch = Material.switch palette
-    , fullBleedDivider = Material.fullBleedDivider
-    , insetDivider = Material.insetDivider palette
-    , middleDividers = Material.middleDividers palette
-    , insetTitle = Material.insetTitle palette
-    , fullBleedTitle = Material.fullBleedTitle palette
-    }
--- a/example/src/Data/Theme.elm
+++ b/example/src/Data/Theme.elm
@ -1,7 +1,7 @@
 module Data.Theme exposing (Theme(..), toStyle)

-import Data.Style exposing (Style)
-import Data.Style.Material
+import Data.Style as Style exposing (Style)
+import Data.Style
 import Widget.Style.Material exposing (Palette)


@ -14,7 +14,7 @@ toStyle : Theme -> Style msg
 toStyle theme =
    case theme of
        Material ->
-            Data.Style.Material.style Widget.Style.Material.defaultPalette
+            Style.style Widget.Style.Material.defaultPalette

        DarkMaterial ->
-            Data.Style.Material.style Widget.Style.Material.darkPalette
+            Style.style Widget.Style.Material.darkPalette
--- a/example/src/Example/Button.elm
+++ b/example/src/Example/Button.elm
@ -5,7 +5,7 @@ import Element exposing (Element)
 import FeatherIcons
 import Widget
 import Widget.Icon as Icon
-import Widget.Style exposing (ButtonStyle, RowStyle)
+import Widget exposing (ButtonStyle, RowStyle)
 import Widget.Style.Material as Material


--- a/example/src/Example/Dialog.elm
+++ b/example/src/Example/Dialog.elm
@ -5,7 +5,7 @@ import Element exposing (Element)
 import FeatherIcons
 import Widget
 import Widget.Icon as Icon
-import Widget.Style exposing (ButtonStyle, DialogStyle)
+import Widget exposing (ButtonStyle, DialogStyle)
 import Widget.Style.Material as Material


--- a/example/src/Example/ExpansionPanel.elm
+++ b/example/src/Example/ExpansionPanel.elm
@ -3,7 +3,7 @@ module Example.ExpansionPanel exposing (Model, Msg, init, subscriptions, update,
 import Browser
 import Element exposing (Element)
 import Widget
-import Widget.Style exposing (ExpansionPanelStyle)
+import Widget exposing (ExpansionPanelStyle)
 import Widget.Style.Material as Material


--- a/example/src/Example/Icon.elm
+++ b/example/src/Example/Icon.elm
@ -15,7 +15,7 @@ import Material.Icons.Types exposing (Coloring(..))
 import Octicons
 import Widget
 import Widget.Icon exposing (Icon)
-import Widget.Style exposing (ButtonStyle, RowStyle)
+import Widget exposing (ButtonStyle, RowStyle)
 import Widget.Style.Material as Material
 import Zondicons

--- a/example/src/Example/List.elm
+++ b/example/src/Example/List.elm
@ -3,7 +3,7 @@ module Example.List exposing (Model, Msg, init, subscriptions, update, view)
 import Browser
 import Element exposing (Element)
 import Widget
-import Widget.Style exposing (ColumnStyle, DividerStyle, ItemStyle, TitleStyle)
+import Widget exposing (ColumnStyle, DividerStyle, ItemStyle, HeaderStyle)
 import Widget.Style.Material as Material


@ -12,8 +12,8 @@ type alias Style style msg =
        | cardColumn : ColumnStyle msg
        , insetDivider : ItemStyle (DividerStyle msg)
        , middleDividers : ItemStyle (DividerStyle msg)
-        , insetTitle : ItemStyle (TitleStyle msg)
-        , fullBleedTitle : ItemStyle (TitleStyle msg)
+        , insetHeader : ItemStyle (HeaderStyle msg)
+        , fullBleedHeader : ItemStyle (HeaderStyle msg)
    }


@ -22,8 +22,8 @@ materialStyle =
    { cardColumn = Material.cardColumn Material.defaultPalette
    , insetDivider = Material.insetDivider Material.defaultPalette
    , middleDividers = Material.middleDividers Material.defaultPalette
-    , insetTitle = Material.insetTitle Material.defaultPalette
-    , fullBleedTitle = Material.fullBleedTitle Material.defaultPalette
+    , insetHeader = Material.insetHeader Material.defaultPalette
+    , fullBleedHeader = Material.fullBleedHeader Material.defaultPalette
    }


@ -59,10 +59,10 @@ subscriptions () =
 view : (Msg -> msg) -> Style style msg -> Model -> Element msg
 view _ style () =
    [ "Section 1"
-        |> Widget.headerItem style.fullBleedTitle
+        |> Widget.headerItem style.fullBleedHeader
    , Widget.item <| Element.text <| "A"
    , "Section 2"
-        |> Widget.headerItem style.fullBleedTitle
+        |> Widget.headerItem style.fullBleedHeader
    , Widget.item <| Element.text <| "B"
    , Widget.divider style.middleDividers
    , Widget.item <| Element.text <| "C"
--- a/example/src/Example/Modal.elm
+++ b/example/src/Example/Modal.elm
@ -5,7 +5,7 @@ import Element exposing (Element)
 import FeatherIcons
 import Widget
 import Widget.Icon as Icon
-import Widget.Style exposing (ButtonStyle, ColumnStyle)
+import Widget exposing (ButtonStyle, ColumnStyle)
 import Widget.Style.Material as Material


--- a/example/src/Example/MultiSelect.elm
+++ b/example/src/Example/MultiSelect.elm
@ -4,7 +4,7 @@ import Browser
 import Element exposing (Element)
 import Set exposing (Set)
 import Widget
-import Widget.Style exposing (ButtonStyle, RowStyle)
+import Widget exposing (ButtonStyle, RowStyle)
 import Widget.Style.Material as Material


--- a/example/src/Example/ProgressIndicator.elm
+++ b/example/src/Example/ProgressIndicator.elm
@ -3,7 +3,7 @@ module Example.ProgressIndicator exposing (Model, Msg, init, subscriptions, upda
 import Browser
 import Element exposing (Element)
 import Widget
-import Widget.Style exposing (ProgressIndicatorStyle)
+import Widget exposing (ProgressIndicatorStyle)
 import Widget.Style.Material as Material


--- a/example/src/Example/Select.elm
+++ b/example/src/Example/Select.elm
@ -3,7 +3,7 @@ module Example.Select exposing (Model, Msg, init, subscriptions, update, view)
 import Browser
 import Element exposing (Element)
 import Widget
-import Widget.Style exposing (ButtonStyle, RowStyle)
+import Widget exposing (ButtonStyle, RowStyle)
 import Widget.Style.Material as Material


--- a/example/src/Example/Snackbar.elm
+++ b/example/src/Example/Snackbar.elm
@ -6,7 +6,7 @@ import FeatherIcons
 import Time
 import Widget
 import Widget.Snackbar as Snackbar exposing (Snackbar)
-import Widget.Style exposing (ButtonStyle, ColumnStyle, RowStyle, SnackbarStyle)
+import Widget exposing (ButtonStyle, ColumnStyle, RowStyle, SnackbarStyle)
 import Widget.Style.Material as Material


--- a/example/src/Example/SortTable.elm
+++ b/example/src/Example/SortTable.elm
@ -3,7 +3,7 @@ module Example.SortTable exposing (Model, Msg, init, subscriptions, update, view
 import Browser
 import Element exposing (Element)
 import Widget
-import Widget.Style exposing (SortTableStyle)
+import Widget exposing (SortTableStyle)
 import Widget.Style.Material as Material


--- a/example/src/Example/Switch.elm
+++ b/example/src/Example/Switch.elm
@ -4,7 +4,7 @@ import Browser
 import Element exposing (Element)
 import FeatherIcons
 import Widget
-import Widget.Style exposing (RowStyle, SwitchStyle)
+import Widget exposing (RowStyle, SwitchStyle)
 import Widget.Style.Material as Material


--- a/example/src/Example/Tab.elm
+++ b/example/src/Example/Tab.elm
@ -3,7 +3,7 @@ module Example.Tab exposing (Model, Msg, init, subscriptions, update, view)
 import Browser
 import Element exposing (Element)
 import Widget
-import Widget.Style exposing (TabStyle)
+import Widget exposing (TabStyle)
 import Widget.Style.Material as Material


--- a/example/src/Example/TextInput.elm
+++ b/example/src/Example/TextInput.elm
@ -4,7 +4,7 @@ import Browser
 import Element exposing (Element)
 import Set exposing (Set)
 import Widget
-import Widget.Style exposing (ColumnStyle, TextInputStyle)
+import Widget exposing (ColumnStyle, TextInputStyle)
 import Widget.Style.Material as Material


--- a/src/Internal/Button.elm
+++ b/src/Internal/Button.elm
@ -1,16 +1,30 @@
-module Internal.Button exposing
-    ( Button
-    , TextButton
-    , button
-    , iconButton
-    , textButton
-    )
+module Internal.Button exposing (Button, ButtonStyle, TextButton, button, iconButton, textButton)

-import Element exposing (Element)
+import Color exposing (Color)
+import Element exposing (Attribute, Element)
 import Element.Input as Input
 import Element.Region as Region
-import Widget.Icon exposing (Icon)
-import Widget.Style exposing (ButtonStyle)
+import Html exposing (Html)
+import Widget.Icon exposing (Icon, IconStyle)
+
+
+type alias ButtonStyle msg =
+    { elementButton : List (Attribute msg)
+    , ifDisabled : List (Attribute msg)
+    , ifActive : List (Attribute msg)
+    , otherwise : List (Attribute msg)
+    , content :
+        { elementRow : List (Attribute msg)
+        , content :
+            { text : { contentText : List (Attribute msg) }
+            , icon :
+                { ifDisabled : IconStyle
+                , ifActive : IconStyle
+                , otherwise : IconStyle
+                }
+            }
+        }
+    }


 type alias Button msg =
--- a/src/Internal/Dialog.elm
+++ b/src/Internal/Dialog.elm
@ -1,10 +1,33 @@
-module Internal.Dialog exposing (Dialog, dialog, modal)
+module Internal.Dialog exposing (Dialog, DialogStyle, dialog, modal)

+import Color exposing (Color)
 import Element exposing (Attribute, Element)
 import Element.Background as Background
 import Element.Events as Events
-import Internal.Button as Button exposing (TextButton)
-import Widget.Style exposing (DialogStyle)
+import Html exposing (Html)
+import Internal.Button as Button exposing (ButtonStyle, TextButton)
+import Widget.Icon exposing (Icon)
+
+
+{-| -}
+type alias DialogStyle msg =
+    { elementColumn : List (Attribute msg)
+    , content :
+        { title :
+            { contentText : List (Attribute msg)
+            }
+        , text :
+            { contentText : List (Attribute msg)
+            }
+        , buttons :
+            { elementRow : List (Attribute msg)
+            , content :
+                { accept : ButtonStyle msg
+                , dismiss : ButtonStyle msg
+                }
+            }
+        }
+    }


 type alias Dialog msg =
--- a/src/Internal/ExpansionPanel.elm
+++ b/src/Internal/ExpansionPanel.elm
@ -1,10 +1,40 @@
-module Internal.ExpansionPanel exposing (ExpansionPanel, expansionPanel, expansionPanelItem)
+module Internal.ExpansionPanel exposing (ExpansionPanel, ExpansionPanelStyle, expansionPanel, expansionPanelItem)

-import Element exposing (Element)
+import Element exposing (Attribute, Element)
 import Element.Events as Events
-import Internal.List as List exposing (Item)
-import Widget.Icon exposing (Icon)
-import Widget.Style exposing (ExpansionPanelStyle, ItemStyle)
+import Internal.List as List exposing (Item, ItemStyle)
+import Widget.Icon exposing (Icon, IconStyle)
+
+
+{-| Technical Remark:
+
+  - If icons are defined in Svg, they might not display correctly.
+    To avoid that, make sure to wrap them in `Element.html >> Element.el []`
+
+-}
+type alias ExpansionPanelStyle msg =
+    { elementColumn : List (Attribute msg)
+    , content :
+        { panel :
+            { elementRow : List (Attribute msg)
+            , content :
+                { label :
+                    { elementRow : List (Attribute msg)
+                    , content :
+                        { icon : IconStyle
+                        , text : { elementText : List (Attribute msg) }
+                        }
+                    }
+                , expandIcon : Icon
+                , collapseIcon : Icon
+                , icon : IconStyle
+                }
+            }
+        , content :
+            { element : List (Attribute msg)
+            }
+        }
+    }


 type alias ExpansionPanel msg =
--- a/src/Internal/ItemButton.elm
+++ b/src/Internal/ItemButton.elm
@ -0,0 +1,18 @@
+module Internal.ItemButton exposing (ItemButton, iconButton)
+
+import Element exposing (Element)
+import Element.Input as Input
+import Element.Region as Region
+import Widget.Icon exposing (Icon)
+
+
+type alias ItemButton msg =
+    { text : String
+    , onPress : Maybe msg
+    , icon : Icon
+    , content : Element msg
+    }
+
+
+iconButton style { onPress, text, icon } =
+    Debug.todo "implement iconButton"
--- a/src/Internal/List.elm
+++ b/src/Internal/List.elm
@ -1,12 +1,60 @@
-module Internal.List exposing (Item, buttonColumn, buttonRow, column, divider, headerItem, item, itemList, row, toItem)
+module Internal.List exposing (ColumnStyle, DividerStyle, Item, ItemStyle, RowStyle, HeaderStyle, buttonColumn, buttonRow, column, divider, headerItem, item, itemList, row, toItem)

 import Element exposing (Attribute, Element)
-import Internal.Button exposing (Button)
+import Internal.Button exposing (Button, ButtonStyle)
 import Internal.Select as Select
-import Widget.Style exposing (ButtonStyle, ColumnStyle, DividerStyle, ItemStyle, RowStyle, TitleStyle)
 import Widget.Style.Customize as Customize exposing (content)


+{-| -}
+type alias ItemStyle content =
+    { element : List (Attribute Never)
+    , content : content
+    }
+
+
+{-| -}
+type alias DividerStyle msg =
+    { element : List (Attribute msg)
+    }
+
+
+{-| -}
+type alias HeaderStyle msg =
+    { elementColumn : List (Attribute msg)
+    , content :
+        { divider : DividerStyle msg
+        , title : List (Attribute msg)
+        }
+    }
+
+
+{-| -}
+type alias RowStyle msg =
+    { elementRow : List (Attribute msg)
+    , content :
+        { element : List (Attribute Never)
+        , ifFirst : List (Attribute Never)
+        , ifLast : List (Attribute Never)
+        , ifSingleton : List (Attribute Never)
+        , otherwise : List (Attribute Never)
+        }
+    }
+
+
+{-| -}
+type alias ColumnStyle msg =
+    { elementColumn : List (Attribute msg)
+    , content :
+        { element : List (Attribute Never)
+        , ifFirst : List (Attribute Never)
+        , ifLast : List (Attribute Never)
+        , ifSingleton : List (Attribute Never)
+        , otherwise : List (Attribute Never)
+        }
+    }
+
+
 type alias Item msg =
    List (Attribute msg) -> Element msg

@ -25,7 +73,7 @@ divider style =
    toItem style (\{ element } -> Element.none |> Element.el element)


-headerItem : ItemStyle (TitleStyle msg) -> String -> Item msg
+headerItem : ItemStyle (HeaderStyle msg) -> String -> Item msg
 headerItem style title =
    toItem style
        (\{ elementColumn, content } ->
--- a/src/Internal/Material/Button.elm
+++ b/src/Internal/Material/Button.elm
@ -5,11 +5,8 @@ import Element.Background as Background
 import Element.Border as Border
 import Element.Font as Font
 import Html.Attributes as Attributes
+import Internal.Button exposing (ButtonStyle)
 import Internal.Material.Palette exposing (Palette)
-import Widget.Style
-    exposing
-        ( ButtonStyle
-        )
 import Widget.Style.Material.Color as MaterialColor
 import Widget.Style.Material.Typography as Typography

--- a/src/Internal/Material/Chip.elm
+++ b/src/Internal/Material/Chip.elm
@ -4,12 +4,9 @@ import Element
 import Element.Background as Background
 import Element.Border as Border
 import Element.Font as Font
+import Internal.Button exposing (ButtonStyle)
 import Internal.Material.Button as Button
 import Internal.Material.Palette exposing (Palette)
-import Widget.Style
-    exposing
-        ( ButtonStyle
-        )
 import Widget.Style.Material.Color as MaterialColor


--- a/src/Internal/Material/Dialog.elm
+++ b/src/Internal/Material/Dialog.elm
@ -3,12 +3,9 @@ module Internal.Material.Dialog exposing (alertDialog)
 import Element
 import Element.Background as Background
 import Element.Border as Border
+import Internal.Dialog exposing (DialogStyle)
 import Internal.Material.Button as Button
 import Internal.Material.Palette exposing (Palette)
-import Widget.Style
-    exposing
-        ( DialogStyle
-        )
 import Widget.Style.Material.Color as MaterialColor
 import Widget.Style.Material.Typography as Typography

--- a/src/Internal/Material/ExpansionPanel.elm
+++ b/src/Internal/Material/ExpansionPanel.elm
@ -8,16 +8,13 @@ module Internal.Material.ExpansionPanel exposing
 import Color
 import Element
 import Element.Background as Background
+import Internal.ExpansionPanel exposing (ExpansionPanelStyle)
+import Internal.List exposing (ItemStyle)
 import Internal.Material.Icon as Icon
 import Internal.Material.Palette exposing (Palette)
 import Svg
 import Svg.Attributes
 import Widget.Icon as Icon exposing (Icon)
-import Widget.Style
-    exposing
-        ( ExpansionPanelStyle
-        , ItemStyle
-        )
 import Widget.Style.Customize as Customize
 import Widget.Style.Material.Color as MaterialColor

--- a/src/Internal/Material/Layout.elm
+++ b/src/Internal/Material/Layout.elm
@ -5,6 +5,7 @@ import Element
 import Element.Background as Background
 import Element.Border as Border
 import Element.Font as Font
+import Internal.Button exposing (ButtonStyle)
 import Internal.Material.Button as Button
 import Internal.Material.Icon as Icon
 import Internal.Material.Palette exposing (Palette)
@ -13,11 +14,7 @@ import Internal.Material.TextInput as TextInput
 import Svg
 import Svg.Attributes
 import Widget.Icon as Icon exposing (Icon)
-import Widget.Style
-    exposing
-        ( ButtonStyle
-        , LayoutStyle
-        )
+import Widget.Layout exposing (LayoutStyle)
 import Widget.Style.Customize as Customize
 import Widget.Style.Material.Color as MaterialColor
 import Widget.Style.Material.Typography as Typography
--- a/src/Internal/Material/List.elm
+++ b/src/Internal/Material/List.elm
@ -3,9 +3,9 @@ module Internal.Material.List exposing
    , cardColumn
    , column
    , fullBleedDivider
-    , fullBleedTitle
+    , fullBleedHeader
    , insetDivider
-    , insetTitle
+    , insetHeader
    , middleDividers
    , row
    )
@ -15,15 +15,15 @@ import Element
 import Element.Background as Background
 import Element.Border as Border
 import Element.Font as Font
-import Internal.Material.Palette exposing (Palette)
-import Widget.Style
+import Internal.List
    exposing
        ( ColumnStyle
        , DividerStyle
        , ItemStyle
        , RowStyle
-        , TitleStyle
+        , HeaderStyle
        )
+import Internal.Material.Palette exposing (Palette)
 import Widget.Style.Material.Color as MaterialColor
 import Widget.Style.Material.Typography as Typography

@ -145,8 +145,8 @@ middleDividers _ =
    }


-insetTitle : Palette -> ItemStyle (TitleStyle msg)
-insetTitle palette =
+insetHeader : Palette -> ItemStyle (HeaderStyle msg)
+insetHeader palette =
    { element =
        [ Element.width <| Element.fill
        , Border.widthEach
@ -182,8 +182,8 @@ insetTitle palette =
    }


-fullBleedTitle : Palette -> ItemStyle (TitleStyle msg)
-fullBleedTitle palette =
+fullBleedHeader : Palette -> ItemStyle (HeaderStyle msg)
+fullBleedHeader palette =
    { element =
        [ Element.width <| Element.fill
        , Element.padding 0
--- a/src/Internal/Material/ProgressIndicator.elm
+++ b/src/Internal/Material/ProgressIndicator.elm
@ -3,12 +3,9 @@ module Internal.Material.ProgressIndicator exposing (determinateCircularIcon, in
 import Color
 import Element exposing (Attribute, Element)
 import Internal.Material.Palette exposing (Palette)
+import Internal.ProgressIndicator exposing (ProgressIndicatorStyle)
 import Svg
 import Svg.Attributes
-import Widget.Style
-    exposing
-        ( ProgressIndicatorStyle
-        )


 indeterminateCircularIcon : Color.Color -> List (Attribute msg) -> Element msg
--- a/src/Internal/Material/Snackbar.elm
+++ b/src/Internal/Material/Snackbar.elm
@ -6,10 +6,7 @@ import Element.Border as Border
 import Element.Font as Font
 import Internal.Material.Button as Button
 import Internal.Material.Palette exposing (Palette)
-import Widget.Style
-    exposing
-        ( SnackbarStyle
-        )
+import Widget.Snackbar exposing (SnackbarStyle)
 import Widget.Style.Customize as Customize
 import Widget.Style.Material.Color as MaterialColor

--- a/src/Internal/Material/SortTable.elm
+++ b/src/Internal/Material/SortTable.elm
@ -0,0 +1,27 @@
+module Internal.Material.SortTable exposing ( sortTable)
+
+import Color
+import Element
+import Element.Background as Background
+import Internal.Material.ExpansionPanel as ExpansionPanel
+import Internal.SortTable exposing (SortTableStyle )
+import Internal.List exposing (ItemStyle)
+import Internal.Material.Icon as Icon
+import Internal.Material.Palette exposing (Palette)
+import Internal.Material.Button as Button
+import Svg
+import Svg.Attributes
+import Widget.Icon as Icon exposing (Icon)
+import Widget.Style.Customize as Customize
+import Widget.Style.Material.Color as MaterialColor
+
+sortTable : Palette -> SortTableStyle msg
+sortTable palette =
+    { elementTable = []
+    , content =
+        { header = Button.textButton palette
+        , ascIcon = ExpansionPanel.expand_less
+        , descIcon = ExpansionPanel.expand_more
+        , defaultIcon = always Element.none
+        }
+    }
--- a/src/Internal/Material/Switch.elm
+++ b/src/Internal/Material/Switch.elm
@ -6,10 +6,7 @@ import Element.Background as Background
 import Element.Border as Border
 import Html.Attributes as Attributes
 import Internal.Material.Palette exposing (Palette)
-import Widget.Style
-    exposing
-        ( SwitchStyle
-        )
+import Internal.Switch exposing (SwitchStyle)
 import Widget.Style.Material.Color as MaterialColor


--- a/src/Internal/Material/Tab.elm
+++ b/src/Internal/Material/Tab.elm
@ -4,13 +4,10 @@ import Element
 import Element.Background as Background
 import Element.Border as Border
 import Element.Font as Font
+import Internal.Button exposing (ButtonStyle)
 import Internal.Material.Button as Button
 import Internal.Material.Palette exposing (Palette)
-import Widget.Style
-    exposing
-        ( ButtonStyle
-        , TabStyle
-        )
+import Internal.Tab exposing (TabStyle)
 import Widget.Style.Material.Color as MaterialColor
 import Widget.Style.Material.Typography as Typography

--- a/src/Internal/Material/TextInput.elm
+++ b/src/Internal/Material/TextInput.elm
@ -4,10 +4,7 @@ import Element
 import Element.Border as Border
 import Internal.Material.Chip as Chip
 import Internal.Material.Palette exposing (Palette)
-import Widget.Style
-    exposing
-        ( TextInputStyle
-        )
+import Internal.TextInput exposing (TextInputStyle)
 import Widget.Style.Customize as Customize
 import Widget.Style.Material.Color as MaterialColor

--- a/src/Internal/ProgressIndicator.elm
+++ b/src/Internal/ProgressIndicator.elm
@ -1,7 +1,12 @@
-module Internal.ProgressIndicator exposing (circularProgressIndicator)
+module Internal.ProgressIndicator exposing (ProgressIndicatorStyle, circularProgressIndicator)

 import Element exposing (Element)
-import Widget.Style exposing (ProgressIndicatorStyle)
+
+
+{-| -}
+type alias ProgressIndicatorStyle msg =
+    { elementFunction : Maybe Float -> Element msg
+    }


 circularProgressIndicator :
--- a/src/Internal/Select.elm
+++ b/src/Internal/Select.elm
@ -2,10 +2,9 @@ module Internal.Select exposing (MultiSelect, Select, multiSelect, select, selec

 import Element exposing (Element)
 import Element.Input as Input
-import Internal.Button exposing (Button)
+import Internal.Button exposing (Button, ButtonStyle)
 import Set exposing (Set)
 import Widget.Icon exposing (Icon)
-import Widget.Style exposing (ButtonStyle)


 type alias Select msg =
--- a/src/Internal/SortTable.elm
+++ b/src/Internal/SortTable.elm
@ -2,6 +2,7 @@ module Internal.SortTable exposing
    ( Column
    , ColumnType
    , SortTable
+    , SortTableStyle
    , floatColumn
    , intColumn
    , sortTable
@ -9,9 +10,28 @@ module Internal.SortTable exposing
    , unsortableColumn
    )

-import Element exposing (Element, Length)
-import Internal.Button as Button
-import Widget.Style exposing (SortTableStyle)
+import Color exposing (Color)
+import Element exposing (Attribute, Element, Length)
+import Html exposing (Html)
+import Internal.Button as Button exposing (ButtonStyle)
+import Widget.Icon exposing (Icon)
+
+
+{-| Technical Remark:
+
+  - If icons are defined in Svg, they might not display correctly.
+    To avoid that, make sure to wrap them in `Element.html >> Element.el []`
+
+-}
+type alias SortTableStyle msg =
+    { elementTable : List (Attribute msg)
+    , content :
+        { header : ButtonStyle msg
+        , ascIcon : Icon
+        , descIcon : Icon
+        , defaultIcon : Icon
+        }
+    }


 {-| A Sortable list allows you to sort coulmn.
--- a/src/Internal/Switch.elm
+++ b/src/Internal/Switch.elm
@ -1,9 +1,35 @@
-module Internal.Switch exposing (Switch, switch)
+module Internal.Switch exposing (Switch, SwitchStyle, switch)

-import Element exposing (Element)
+import Color exposing (Color)
+import Element exposing (Attribute, Element)
 import Element.Input as Input
 import Element.Region as Region
-import Widget.Style exposing (SwitchStyle)
+import Html exposing (Html)
+import Widget.Icon exposing (Icon)
+
+
+{-| -}
+type alias SwitchStyle msg =
+    { elementButton : List (Attribute msg)
+    , content :
+        { element : List (Attribute msg)
+        , ifDisabled : List (Attribute msg)
+        , ifActive : List (Attribute msg)
+        , otherwise : List (Attribute msg)
+        }
+    , contentInFront :
+        { element : List (Attribute msg)
+        , ifDisabled : List (Attribute msg)
+        , ifActive : List (Attribute msg)
+        , otherwise : List (Attribute msg)
+        , content :
+            { element : List (Attribute msg)
+            , ifDisabled : List (Attribute msg)
+            , ifActive : List (Attribute msg)
+            , otherwise : List (Attribute msg)
+            }
+        }
+    }


 type alias Switch msg =
--- a/src/Internal/Tab.elm
+++ b/src/Internal/Tab.elm
@ -1,8 +1,24 @@
-module Internal.Tab exposing (Tab, tab)
+module Internal.Tab exposing (Tab, TabStyle, tab)

-import Element exposing (Element)
+import Color exposing (Color)
+import Element exposing (Attribute, Element)
+import Html exposing (Html)
+import Internal.Button exposing (ButtonStyle)
 import Internal.Select as Select exposing (Select)
-import Widget.Style exposing (TabStyle)
+import Widget.Icon exposing (Icon)
+
+
+{-| -}
+type alias TabStyle msg =
+    { elementColumn : List (Attribute msg)
+    , content :
+        { tabs :
+            { elementRow : List (Attribute msg)
+            , content : ButtonStyle msg
+            }
+        , content : List (Attribute msg)
+        }
+    }


 type alias Tab msg =
--- a/src/Internal/TextInput.elm
+++ b/src/Internal/TextInput.elm
@ -1,9 +1,23 @@
-module Internal.TextInput exposing (TextInput, textInput)
+module Internal.TextInput exposing (TextInput, TextInputStyle, textInput)

-import Element exposing (Element)
+import Element exposing (Attribute, Element)
 import Element.Input as Input exposing (Placeholder)
-import Internal.Button as Button exposing (Button)
-import Widget.Style exposing (TextInputStyle)
+import Internal.Button as Button exposing (Button, ButtonStyle)
+
+
+{-| -}
+type alias TextInputStyle msg =
+    { elementRow : List (Attribute msg)
+    , content :
+        { chips :
+            { elementRow : List (Attribute msg)
+            , content : ButtonStyle msg
+            }
+        , text :
+            { elementTextInput : List (Attribute msg)
+            }
+        }
+    }


 type alias TextInput msg =
--- a/src/Widget.elm
+++ b/src/Widget.elm
@ -1,16 +1,16 @@
 module Widget exposing
-    ( Button, TextButton, iconButton, textButton, button
-    , Switch, switch
+    ( ButtonStyle, Button, TextButton, iconButton, textButton, button
+    , SwitchStyle,Switch, switch
    , Select, selectButton, select
    , MultiSelect, multiSelect
-    , Dialog, modal, dialog
-    , ExpansionPanel, expansionPanel, expansionPanelItem
-    , row, column, Item, itemList, item, divider, buttonRow, buttonColumn
-    , SortTable, Column, sortTable, floatColumn, intColumn, stringColumn, unsortableColumn
-    , TextInput, textInput
-    , Tab, tab
-    , ProgressIndicator, circularProgressIndicator
-    , buttonSheet, headerItem
+    , DialogStyle, Dialog, modal, dialog
+    , ExpansionPanelStyle, ExpansionPanel, expansionPanel, expansionPanelItem
+    , ItemStyle, DividerStyle, HeaderStyle, RowStyle, ColumnStyle, row, column, Item, itemList, item, divider, buttonRow, buttonColumn
+    , SortTableStyle, SortTable, Column, sortTable, floatColumn, intColumn, stringColumn, unsortableColumn
+    , TextInputStyle,TextInput, textInput
+    , TabStyle,Tab, tab
+    , ProgressIndicatorStyle,ProgressIndicator, circularProgressIndicator
+    , headerItem
    )

 {-| This module contains different stateless view functions. No wiring required.
@ -44,12 +44,12 @@ You can create you own widgets by sticking widgets types together.

 [Open in Ellie](https://ellie-app.com/9p5QGZ3hgPLa1)

-@docs Button, TextButton, iconButton, textButton, button
+@docs ButtonStyle, Button, TextButton, iconButton, textButton, button


 # Switch

-@docs Switch, switch
+@docs SwitchStyle, Switch, switch


 # Select
@ -73,7 +73,7 @@ You can create you own widgets by sticking widgets types together.

 [Open in Ellie](https://ellie-app.com/9p5Rdz625TZa1)

-@docs Dialog, modal, dialog
+@docs DialogStyle, Dialog, modal, dialog


 # Expansion Panel
@ -82,7 +82,7 @@ You can create you own widgets by sticking widgets types together.

 [Open in Ellie](https://ellie-app.com/9p5Rv5jfVdFa1)

-@docs ExpansionPanel, expansionPanel, expansionPanelItem
+@docs ExpansionPanelStyle, ExpansionPanel, expansionPanel, expansionPanelItem


 # List
@ -91,7 +91,16 @@ You can create you own widgets by sticking widgets types together.

 [Open in Ellie](https://ellie-app.com/9p5RJnDVVCKa1)

-@docs row, column, Item, itemList, item, divider, buttonRow, buttonColumn, buttonDrawer
+## Row
+
+@docs RowStyle, row, buttonRow
+
+## Column
+@docs ColumnStyle, column, buttonColumn
+
+## Item
+
+@docs ItemStyle, DividerStyle, HeaderStyle, Item,itemList, item, divider, headerItem, buttonDrawer


 # Sort Table
@ -100,7 +109,7 @@ You can create you own widgets by sticking widgets types together.

 [Open in Ellie](https://ellie-app.com/9p5RXw44B4Ja1)

-@docs SortTable, Column, sortTable, floatColumn, intColumn, stringColumn, unsortableColumn
+@docs SortTableStyle, SortTable, Column, sortTable, floatColumn, intColumn, stringColumn, unsortableColumn


 # Text Input
@ -109,7 +118,7 @@ You can create you own widgets by sticking widgets types together.

 [Open in Ellie](https://ellie-app.com/9p5S6cvWCmBa1)

-@docs TextInput, textInput
+@docs TextInputStyle, TextInput, textInput


 # Tab
@ -118,7 +127,7 @@ You can create you own widgets by sticking widgets types together.

 [Open in Ellie](https://ellie-app.com/9p5Sdbvp4jZa1)

-@docs Tab, tab
+@docs TabStyle, Tab, tab


 # Progress Indicator
@ -127,13 +136,14 @@ You can create you own widgets by sticking widgets types together.

 [Open in Ellie](https://ellie-app.com/c47GJktH2bqa1)

-@docs ProgressIndicator, circularProgressIndicator
+@docs ProgressIndicatorStyle,ProgressIndicator, circularProgressIndicator

 -}

 import Color exposing (Color)
 import Element exposing (Attribute, Element, Length)
 import Element.Input exposing (Placeholder)
+import Html exposing (Html)
 import Internal.Button as Button
 import Internal.Dialog as Dialog
 import Internal.ExpansionPanel as ExpansionPanel
@ -145,23 +155,7 @@ import Internal.Switch as Switch
 import Internal.Tab as Tab
 import Internal.TextInput as TextInput
 import Set exposing (Set)
-import Widget.Style
-    exposing
-        ( ButtonSheetStyle
-        , ButtonStyle
-        , ColumnStyle
-        , DialogStyle
-        , DividerStyle
-        , ExpansionPanelStyle
-        , ItemStyle
-        , ProgressIndicatorStyle
-        , RowStyle
-        , SortTableStyle
-        , SwitchStyle
-        , TabStyle
-        , TextInputStyle
-        , TitleStyle
-        )
+import Widget.Icon exposing (Icon)



@ -170,6 +164,13 @@ import Widget.Style
 ----------------------------------------------------------}


+{-| -}
+type alias IconStyle =
+    { size : Int
+    , color : Color
+    }
+
+
 type alias Icon =
    { size : Int
    , color : Color
@ -183,6 +184,26 @@ type alias Icon =
 ----------------------------------------------------------}


+{-| -}
+type alias ButtonStyle msg =
+    { elementButton : List (Attribute msg)
+    , ifDisabled : List (Attribute msg)
+    , ifActive : List (Attribute msg)
+    , otherwise : List (Attribute msg)
+    , content :
+        { elementRow : List (Attribute msg)
+        , content :
+            { text : { contentText : List (Attribute msg) }
+            , icon :
+                { ifDisabled : IconStyle
+                , ifActive : IconStyle
+                , otherwise : IconStyle
+                }
+            }
+        }
+    }
+
+
 {-| Button widget type
 -}
 type alias Button msg =
@ -266,6 +287,30 @@ button =
 ----------------------------------------------------------}


+{-| -}
+type alias SwitchStyle msg =
+    { elementButton : List (Attribute msg)
+    , content :
+        { element : List (Attribute msg)
+        , ifDisabled : List (Attribute msg)
+        , ifActive : List (Attribute msg)
+        , otherwise : List (Attribute msg)
+        }
+    , contentInFront :
+        { element : List (Attribute msg)
+        , ifDisabled : List (Attribute msg)
+        , ifActive : List (Attribute msg)
+        , otherwise : List (Attribute msg)
+        , content :
+            { element : List (Attribute msg)
+            , ifDisabled : List (Attribute msg)
+            , ifActive : List (Attribute msg)
+            , otherwise : List (Attribute msg)
+            }
+        }
+    }
+
+
 {-| Switch widget type
 -}
 type alias Switch msg =
@ -370,6 +415,27 @@ multiSelect =
 ----------------------------------------------------------}


+{-| -}
+type alias DialogStyle msg =
+    { elementColumn : List (Attribute msg)
+    , content :
+        { title :
+            { contentText : List (Attribute msg)
+            }
+        , text :
+            { contentText : List (Attribute msg)
+            }
+        , buttons :
+            { elementRow : List (Attribute msg)
+            , content :
+                { accept : ButtonStyle msg
+                , dismiss : ButtonStyle msg
+                }
+            }
+        }
+    }
+
+
 {-| Dialog widget type
 -}
 type alias Dialog msg =
@ -418,6 +484,37 @@ dialog =
 ----------------------------------------------------------}


+{-| Technical Remark:
+
+  - If icons are defined in Svg, they might not display correctly.
+    To avoid that, make sure to wrap them in `Element.html >> Element.el []`
+
+-}
+type alias ExpansionPanelStyle msg =
+    { elementColumn : List (Attribute msg)
+    , content :
+        { panel :
+            { elementRow : List (Attribute msg)
+            , content :
+                { label :
+                    { elementRow : List (Attribute msg)
+                    , content :
+                        { icon : IconStyle
+                        , text : { elementText : List (Attribute msg) }
+                        }
+                    }
+                , expandIcon : Icon
+                , collapseIcon : Icon
+                , icon : IconStyle
+                }
+            }
+        , content :
+            { element : List (Attribute msg)
+            }
+        }
+    }
+
+
 {-| Expansion Panel widget type
 -}
 type alias ExpansionPanel msg =
@ -477,6 +574,21 @@ expansionPanelItem =
 ----------------------------------------------------------}


+{-| -}
+type alias TextInputStyle msg =
+    { elementRow : List (Attribute msg)
+    , content :
+        { chips :
+            { elementRow : List (Attribute msg)
+            , content : ButtonStyle msg
+            }
+        , text :
+            { elementTextInput : List (Attribute msg)
+            }
+        }
+    }
+
+
 {-| Text Input widget type
 -}
 type alias TextInput msg =
@ -515,6 +627,55 @@ textInput =
 ----------------------------------------------------------}


+{-| -}
+type alias ItemStyle content =
+    { element : List (Attribute Never)
+    , content : content
+    }
+
+
+{-| -}
+type alias DividerStyle msg =
+    { element : List (Attribute msg)
+    }
+
+
+{-| -}
+type alias HeaderStyle msg =
+    { elementColumn : List (Attribute msg)
+    , content :
+        { divider : DividerStyle msg
+        , title : List (Attribute msg)
+        }
+    }
+
+
+{-| -}
+type alias RowStyle msg =
+    { elementRow : List (Attribute msg)
+    , content :
+        { element : List (Attribute Never)
+        , ifFirst : List (Attribute Never)
+        , ifLast : List (Attribute Never)
+        , ifSingleton : List (Attribute Never)
+        , otherwise : List (Attribute Never)
+        }
+    }
+
+
+{-| -}
+type alias ColumnStyle msg =
+    { elementColumn : List (Attribute msg)
+    , content :
+        { element : List (Attribute Never)
+        , ifFirst : List (Attribute Never)
+        , ifLast : List (Attribute Never)
+        , ifSingleton : List (Attribute Never)
+        , otherwise : List (Attribute Never)
+        }
+    }
+
+
 {-| Item widget type.

 Use `Widget.item` if you want to turn a simple element into an item.
@ -540,7 +701,7 @@ divider =

 {-| A header for a part of a list.
 -}
-headerItem : ItemStyle (TitleStyle msg) -> String -> Item msg
+headerItem : ItemStyle (HeaderStyle msg) -> String -> Item msg
 headerItem =
    List.headerItem

@ -605,27 +766,29 @@ buttonColumn =
    List.buttonColumn


-{-| A side sheet containing only buttons. Will use the full hight.
-}
-buttonSheet :
-    ButtonSheetStyle msg
-    -> List (Button msg)
-    -> Element msg
-buttonSheet style actions =
-    actions
-        |> List.map (button style.content.content)
-        |> Element.column
-            (style.content.elementColumn ++ [ Element.width <| Element.fill ])
-        |> Element.el
-            (style.element ++ [ Element.height <| Element.fill ])
-
-

 {----------------------------------------------------------
 - SORT TABLE
 ----------------------------------------------------------}


+{-| Technical Remark:
+
+  - If icons are defined in Svg, they might not display correctly.
+    To avoid that, make sure to wrap them in `Element.html >> Element.el []`
+
+-}
+type alias SortTableStyle msg =
+    { elementTable : List (Attribute msg)
+    , content :
+        { header : ButtonStyle msg
+        , ascIcon : Icon
+        , descIcon : Icon
+        , defaultIcon : Icon
+        }
+    }
+
+
 {-| Column for the Sort Table widget type
 -}
 type alias Column a =
@ -728,6 +891,19 @@ sortTable =
 ----------------------------------------------------------}


+{-| -}
+type alias TabStyle msg =
+    { elementColumn : List (Attribute msg)
+    , content :
+        { tabs :
+            { elementRow : List (Attribute msg)
+            , content : ButtonStyle msg
+            }
+        , content : List (Attribute msg)
+        }
+    }
+
+
 {-| Tab widget type
 -}
 type alias Tab msg =
@ -760,6 +936,12 @@ tab =
 ----------------------------------------------------------}


+{-| -}
+type alias ProgressIndicatorStyle msg =
+    { elementFunction : Maybe Float -> Element msg
+    }
+
+
 {-| Progress Indicator widget type

 If `maybeProgress` is set to `Nothing`, an indeterminate progress indicator (e.g. spinner) will display.
--- a/src/Widget/Icon.elm
+++ b/src/Widget/Icon.elm
@ -1,4 +1,4 @@
-module Widget.Icon exposing (Icon, antDesignIconsElm, elmFeather, elmFontawesome, elmHeroicons, elmIonicons, elmMaterialIcons, elmOcticons, elmZondicons, materialIcons)
+module Widget.Icon exposing (Icon, IconStyle, antDesignIconsElm, elmFeather, elmFontawesome, elmHeroicons, elmIonicons, elmMaterialIcons, elmOcticons, elmZondicons, materialIcons)

 import Color exposing (Color)
 import Dict exposing (size)
@ -8,6 +8,12 @@ import Svg exposing (Svg)
 import Svg.Attributes


+type alias IconStyle =
+    { size : Int
+    , color : Color
+    }
+
+
 type alias Icon =
    { size : Int
    , color : Color
--- a/src/Widget/Layout.elm
+++ b/src/Widget/Layout.elm
@ -1,6 +1,7 @@
 module Widget.Layout exposing
    ( Layout, Part(..), init, timePassed, view
    , activate, queueMessage
+    , LayoutStyle, buttonSheet
    )

 {-| Combines multiple concepts from the [material design specification](https://material.io/components/), namely:
@ -26,15 +27,69 @@ It is responsive and changes view to apply to the [material design guidelines](h
 -}

 import Array
+import Color exposing (Color)
 import Element exposing (Attribute, DeviceClass(..), Element)
 import Element.Input as Input
 import Html exposing (Html)
-import Widget exposing (Button, Select, TextInput)
-import Widget.Snackbar as Snackbar exposing (Message)
-import Widget.Style exposing (LayoutStyle)
+import Internal.Button as Button exposing (Button, ButtonStyle)
+import Internal.Dialog as Dialog
+import Internal.Select as Select exposing (Select)
+import Internal.TextInput as TextInput exposing (TextInput, TextInputStyle)
+import Widget.Icon exposing (Icon, IconStyle)
+import Widget.Snackbar as Snackbar exposing (Message, SnackbarStyle)
 import Widget.Style.Customize as Customize


+{-| -}
+type alias ButtonSheetStyle msg =
+    { element : List (Attribute msg)
+    , content :
+        { elementColumn : List (Attribute msg)
+        , content : ButtonStyle msg
+        }
+    }
+
+
+{-| A side sheet containing only buttons. Will use the full hight.
+-}
+buttonSheet :
+    ButtonSheetStyle msg
+    -> List (Button msg)
+    -> Element msg
+buttonSheet style actions =
+    actions
+        |> List.map (Button.button style.content.content)
+        |> Element.column
+            (style.content.elementColumn ++ [ Element.width <| Element.fill ])
+        |> Element.el
+            (style.element ++ [ Element.height <| Element.fill ])
+
+
+{-| Technical Remark:
+
+  - If icons are defined in Svg, they might not display correctly.
+    To avoid that, make sure to wrap them in `Element.html >> Element.el []`
+
+-}
+type alias LayoutStyle msg =
+    { container : List (Attribute msg)
+    , snackbar : SnackbarStyle msg
+    , layout : List (Attribute msg) -> Element msg -> Html msg
+    , header : List (Attribute msg)
+    , sheet : List (Attribute msg)
+    , sheetButton : ButtonStyle msg
+    , menuButton : ButtonStyle msg
+    , menuTabButton : ButtonStyle msg
+    , menuIcon : Icon
+    , moreVerticalIcon : Icon
+    , spacing : Int
+    , title : List (Attribute msg)
+    , searchIcon : Icon
+    , search : TextInputStyle msg
+    , searchFill : TextInputStyle msg
+    }
+
+
 {-| The currently visible part: either the left sheet, right sheet or the search bar
 -}
 type Part
@ -156,7 +211,7 @@ viewNav style { title, menu, deviceClass, onChangedSidebar, primaryActions, more
            || (deviceClass == Tablet)
            || ((menu.options |> List.length) > 5)
       then
-        [ Widget.iconButton style.menuButton
+        [ Button.iconButton style.menuButton
            { onPress = Just <| onChangedSidebar <| Just LeftSheet
            , icon = style.menuIcon
            , text = "Menu"
@ -176,8 +231,8 @@ viewNav style { title, menu, deviceClass, onChangedSidebar, primaryActions, more
       else
        [ title |> Element.el style.title
        , menu
-            |> Widget.select
-            |> List.map (Widget.selectButton style.menuTabButton)
+            |> Select.select
+            |> List.map (Select.selectButton style.menuTabButton)
            |> Element.row
                [ Element.width <| Element.shrink
                ]
@ -194,7 +249,7 @@ viewNav style { title, menu, deviceClass, onChangedSidebar, primaryActions, more
        search
            |> Maybe.map
                (\{ onChange, text, label } ->
-                    Widget.textInput style.search
+                    TextInput.textInput style.search
                        { chips = []
                        , onChange = onChange
                        , text = text
@ -210,7 +265,7 @@ viewNav style { title, menu, deviceClass, onChangedSidebar, primaryActions, more
            |> Maybe.map
                (\{ label } ->
                    if deviceClass == Tablet then
-                        [ Widget.button style.menuButton
+                        [ Button.button style.menuButton
                            { onPress = Just <| onChangedSidebar <| Just Search
                            , icon = style.searchIcon
                            , text = label
@ -218,7 +273,7 @@ viewNav style { title, menu, deviceClass, onChangedSidebar, primaryActions, more
                        ]

                    else if deviceClass == Phone then
-                        [ Widget.iconButton style.menuButton
+                        [ Button.iconButton style.menuButton
                            { onPress = Just <| onChangedSidebar <| Just Search
                            , icon = style.searchIcon
                            , text = label
@ -232,16 +287,16 @@ viewNav style { title, menu, deviceClass, onChangedSidebar, primaryActions, more
      , primaryActions
            |> List.map
                (if deviceClass == Phone then
-                    Widget.iconButton style.menuButton
+                    Button.iconButton style.menuButton

                 else
-                    Widget.button style.menuButton
+                    Button.button style.menuButton
                )
      , if moreActions |> List.isEmpty then
            []

        else
-            [ Widget.iconButton style.menuButton
+            [ Button.iconButton style.menuButton
                { onPress = Just <| onChangedSidebar <| Just RightSheet
                , icon = style.moreVerticalIcon
                , text = "More"
@ -278,9 +333,9 @@ viewLeftSheet style { title, menu } =
    [ [ title
      ]
    , menu
-        |> Widget.select
+        |> Select.select
        |> List.map
-            (Widget.selectButton style.sheetButton)
+            (Select.selectButton style.sheetButton)
    ]
        |> List.concat
        |> Element.column [ Element.width <| Element.fill ]
@ -351,7 +406,7 @@ view style { search, title, onChangedSidebar, menu, actions, window, dialog, lay
                        }

                Just RightSheet ->
-                    Widget.buttonSheet
+                    buttonSheet
                        { element = style.sheet ++ [ Element.alignRight ]
                        , content =
                            { elementColumn = []
@ -363,7 +418,7 @@ view style { search, title, onChangedSidebar, menu, actions, window, dialog, lay
                Just Search ->
                    search
                        |> Maybe.map
-                            (Widget.textInput
+                            (TextInput.textInput
                                (style.searchFill
                                    |> Customize.mapContent
                                        (\record ->
@ -400,7 +455,7 @@ view style { search, title, onChangedSidebar, menu, actions, window, dialog, lay
                            dialogConfig

                        Nothing ->
-                            Widget.modal
+                            Dialog.modal
                                { onDismiss =
                                    Nothing
                                        |> onChangedSidebar
--- a/src/Widget/ScrollingNav.elm
+++ b/src/Widget/ScrollingNav.elm
@ -20,6 +20,7 @@ the page. Clicking on a navigation button will scroll directly to that section.

 import Browser.Dom as Dom
 import Element exposing (Element)
+import Html
 import Html.Attributes as Attributes
 import IntDict exposing (IntDict)
 import Task exposing (Task)
@ -120,6 +121,16 @@ This functions should be called regularly if the height of elements on your page
 -}
 syncPositions : ScrollingNav section -> Task Dom.Error (ScrollingNav section -> ScrollingNav section)
 syncPositions { toString, arrangement } =
+    let
+        fun : ( Int, section ) -> ScrollingNav section -> ScrollingNav section
+        fun ( pos, label ) model =
+            { model
+                | positions =
+                    model.positions
+                        |> IntDict.insert pos
+                            (label |> model.toString)
+            }
+    in
    arrangement
        |> List.map
            (\label ->
@ -135,16 +146,7 @@ syncPositions { toString, arrangement } =
        |> Task.map
            (\list m ->
                list
-                    |> List.foldl
-                        (\( pos, label ) model ->
-                            { model
-                                | positions =
-                                    model.positions
-                                        |> IntDict.insert pos
-                                            (label |> model.toString)
-                            }
-                        )
-                        m
+                    |> List.foldl fun m
            )


--- a/src/Widget/Snackbar.elm
+++ b/src/Widget/Snackbar.elm
@ -1,6 +1,7 @@
 module Widget.Snackbar exposing
    ( Snackbar, Message, init, current, timePassed, view
    , insert, insertFor, dismiss
+    , SnackbarStyle
    )

 {-| ![Snackbar](https://orasund.github.io/elm-ui-widgets/assets/snackbar.png)
@ -21,10 +22,21 @@ A [snackbar](https://material.io/components/snackbars/) shows notification, one

 -}

-import Element exposing (Element)
+import Element exposing (Attribute, Element)
+import Internal.Button as Button exposing (ButtonStyle, TextButton)
 import Queue exposing (Queue)
-import Widget exposing (TextButton)
-import Widget.Style exposing (SnackbarStyle)
+
+
+{-| -}
+type alias SnackbarStyle msg =
+    { elementRow : List (Attribute msg)
+    , content :
+        { text :
+            { elementText : List (Attribute msg)
+            }
+        , button : ButtonStyle msg
+        }
+    }


 {-| A message with maybe some action button
@ -128,7 +140,7 @@ view style toMessage model =
                            |> Element.paragraph style.content.text.elementText
                        , button
                            |> Maybe.map
-                                (Widget.textButton style.content.button)
+                                (Button.textButton style.content.button)
                            |> Maybe.withDefault Element.none
                        ]
                            |> Element.row style.elementRow
--- a/src/Widget/Style.elm
+++ b/src/Widget/Style.elm
@ -1,332 +0,0 @@
-module Widget.Style exposing
-    ( IconStyle
-    , ButtonStyle
-    , SwitchStyle
-    , DialogStyle
-    , ExpansionPanelStyle
-    , ColumnStyle, RowStyle, ItemStyle, TitleStyle, DividerStyle
-    , SortTableStyle
-    , TextInputStyle
-    , TabStyle
-    , ProgressIndicatorStyle
-    , SnackbarStyle
-    , LayoutStyle, ButtonSheetStyle
-    )
-
-{-| This module contains style types for every widget.
-
-
-# Icon
-
-@docs IconStyle
-
-
-# Buttons
-
-@docs ButtonStyle
-
-
-# Switch
-
-@docs SwitchStyle
-
-
-# Dialog
-
-@docs DialogStyle
-
-
-# Expansion Panel
-
-@docs ExpansionPanelStyle
-
-
-# List
-
-@docs ColumnStyle, RowStyle, ItemStyle, TitleStyle, DividerStyle
-
-
-# Sort Table
-
-@docs SortTableStyle
-
-
-# Text Input
-
-@docs TextInputStyle
-
-
-# Tab
-
-@docs TabStyle
-
-
-# Progressbar
-
-@docs ProgressIndicatorStyle
-
-
-# Snackbar
-
-@docs SnackbarStyle
-
-
-# Layout
-
-@docs LayoutStyle, ButtonSheetStyle
-
-}
-
-import Color exposing (Color)
-import Element exposing (Attribute, Element)
-import Html exposing (Html)
-import Widget.Icon exposing (Icon)
-
-
-type alias IconStyle =
-    { size : Int
-    , color : Color
-    }
-
-
-{-| -}
-type alias SwitchStyle msg =
-    { elementButton : List (Attribute msg)
-    , content :
-        { element : List (Attribute msg)
-        , ifDisabled : List (Attribute msg)
-        , ifActive : List (Attribute msg)
-        , otherwise : List (Attribute msg)
-        }
-    , contentInFront :
-        { element : List (Attribute msg)
-        , ifDisabled : List (Attribute msg)
-        , ifActive : List (Attribute msg)
-        , otherwise : List (Attribute msg)
-        , content :
-            { element : List (Attribute msg)
-            , ifDisabled : List (Attribute msg)
-            , ifActive : List (Attribute msg)
-            , otherwise : List (Attribute msg)
-            }
-        }
-    }
-
-
-{-| -}
-type alias ButtonStyle msg =
-    { elementButton : List (Attribute msg)
-    , ifDisabled : List (Attribute msg)
-    , ifActive : List (Attribute msg)
-    , otherwise : List (Attribute msg)
-    , content :
-        { elementRow : List (Attribute msg)
-        , content :
-            { text : { contentText : List (Attribute msg) }
-            , icon :
-                { ifDisabled : IconStyle
-                , ifActive : IconStyle
-                , otherwise : IconStyle
-                }
-            }
-        }
-    }
-
-
-{-| -}
-type alias DialogStyle msg =
-    { elementColumn : List (Attribute msg)
-    , content :
-        { title :
-            { contentText : List (Attribute msg)
-            }
-        , text :
-            { contentText : List (Attribute msg)
-            }
-        , buttons :
-            { elementRow : List (Attribute msg)
-            , content :
-                { accept : ButtonStyle msg
-                , dismiss : ButtonStyle msg
-                }
-            }
-        }
-    }
-
-
-{-| Technical Remark:
-
-  - If icons are defined in Svg, they might not display correctly.
-    To avoid that, make sure to wrap them in `Element.html >> Element.el []`
-
-}
-type alias ExpansionPanelStyle msg =
-    { elementColumn : List (Attribute msg)
-    , content :
-        { panel :
-            { elementRow : List (Attribute msg)
-            , content :
-                { label :
-                    { elementRow : List (Attribute msg)
-                    , content :
-                        { icon : IconStyle
-                        , text : { elementText : List (Attribute msg) }
-                        }
-                    }
-                , expandIcon : Icon
-                , collapseIcon : Icon
-                , icon : IconStyle
-                }
-            }
-        , content :
-            { element : List (Attribute msg)
-            }
-        }
-    }
-
-
-{-| -}
-type alias SnackbarStyle msg =
-    { elementRow : List (Attribute msg)
-    , content :
-        { text :
-            { elementText : List (Attribute msg)
-            }
-        , button : ButtonStyle msg
-        }
-    }
-
-
-{-| -}
-type alias TextInputStyle msg =
-    { elementRow : List (Attribute msg)
-    , content :
-        { chips :
-            { elementRow : List (Attribute msg)
-            , content : ButtonStyle msg
-            }
-        , text :
-            { elementTextInput : List (Attribute msg)
-            }
-        }
-    }
-
-
-{-| -}
-type alias TabStyle msg =
-    { elementColumn : List (Attribute msg)
-    , content :
-        { tabs :
-            { elementRow : List (Attribute msg)
-            , content : ButtonStyle msg
-            }
-        , content : List (Attribute msg)
-        }
-    }
-
-
-{-| -}
-type alias ItemStyle content =
-    { element : List (Attribute Never)
-    , content : content
-    }
-
-
-{-| -}
-type alias DividerStyle msg =
-    { element : List (Attribute msg)
-    }
-
-
-{-| -}
-type alias TitleStyle msg =
-    { elementColumn : List (Attribute msg)
-    , content :
-        { divider : DividerStyle msg
-        , title : List (Attribute msg)
-        }
-    }
-
-
-{-| -}
-type alias RowStyle msg =
-    { elementRow : List (Attribute msg)
-    , content :
-        { element : List (Attribute Never)
-        , ifFirst : List (Attribute Never)
-        , ifLast : List (Attribute Never)
-        , ifSingleton : List (Attribute Never)
-        , otherwise : List (Attribute Never)
-        }
-    }
-
-
-{-| -}
-type alias ColumnStyle msg =
-    { elementColumn : List (Attribute msg)
-    , content :
-        { element : List (Attribute Never)
-        , ifFirst : List (Attribute Never)
-        , ifLast : List (Attribute Never)
-        , ifSingleton : List (Attribute Never)
-        , otherwise : List (Attribute Never)
-        }
-    }
-
-
-{-| -}
-type alias ButtonSheetStyle msg =
-    { element : List (Attribute msg)
-    , content :
-        { elementColumn : List (Attribute msg)
-        , content : ButtonStyle msg
-        }
-    }
-
-
-{-| Technical Remark:
-
-  - If icons are defined in Svg, they might not display correctly.
-    To avoid that, make sure to wrap them in `Element.html >> Element.el []`
-
-}
-type alias SortTableStyle msg =
-    { elementTable : List (Attribute msg)
-    , content :
-        { header : ButtonStyle msg
-        , ascIcon : Icon
-        , descIcon : Icon
-        , defaultIcon : Icon
-        }
-    }
-
-
-{-| Technical Remark:
-
-  - If icons are defined in Svg, they might not display correctly.
-    To avoid that, make sure to wrap them in `Element.html >> Element.el []`
-
-}
-type alias LayoutStyle msg =
-    { container : List (Attribute msg)
-    , snackbar : SnackbarStyle msg
-    , layout : List (Attribute msg) -> Element msg -> Html msg
-    , header : List (Attribute msg)
-    , sheet : List (Attribute msg)
-    , sheetButton : ButtonStyle msg
-    , menuButton : ButtonStyle msg
-    , menuTabButton : ButtonStyle msg
-    , menuIcon : Icon
-    , moreVerticalIcon : Icon
-    , spacing : Int
-    , title : List (Attribute msg)
-    , searchIcon : Icon
-    , search : TextInputStyle msg
-    , searchFill : TextInputStyle msg
-    }
-
-
-{-| -}
-type alias ProgressIndicatorStyle msg =
-    { elementFunction : Maybe Float -> Element msg
-    }
--- a/src/Widget/Style/Material.elm
+++ b/src/Widget/Style/Material.elm
@ -8,11 +8,11 @@ module Widget.Style.Material exposing
    , alertDialog
    , expansionPanel, expansionPanelItem
    , row, column
-    , fullBleedDivider, insetDivider, middleDividers, insetTitle, fullBleedTitle
+    , fullBleedDivider, insetDivider, middleDividers, insetHeader, fullBleedHeader
    , progressIndicator
    , snackbar
    , tab, tabButton
-    , layout
+    , layout,sortTable
    )

 {-| ![Example using the Material Design style](https://orasund.github.io/elm-ui-widgets/assets/material-style.png)
@ -90,13 +90,16 @@ The [List widget](https://material.io/components/lists) is a very complex widget
 A List is build from items.
 You way want to use special items to visually organize the content of your list.

-@docs fullBleedDivider, insetDivider, middleDividers, insetTitle, fullBleedTitle
+@docs fullBleedDivider, insetDivider, middleDividers, insetHeader, fullBleedHeader


 # Progress Indicator

@docs progressIndicator

+# Sort Table
+
+@docs sortTable

 # Snackbar

@ -121,6 +124,10 @@ Note that you might want to checkout the [file on GitHub](https://github.com/Ora
 -}

 import Color exposing (Color)
+import Internal.Button exposing (ButtonStyle)
+import Internal.Dialog exposing (DialogStyle)
+import Internal.ExpansionPanel exposing (ExpansionPanelStyle)
+import Internal.List exposing (ColumnStyle, DividerStyle, ItemStyle, RowStyle, HeaderStyle)
 import Internal.Material.Button as Button
 import Internal.Material.Chip as Chip
 import Internal.Material.Dialog as Dialog
@ -133,23 +140,14 @@ import Internal.Material.Snackbar as Snackbar
 import Internal.Material.Switch as Switch
 import Internal.Material.Tab as Tab
 import Internal.Material.TextInput as TextInput
-import Widget.Style
-    exposing
-        ( ButtonStyle
-        , ColumnStyle
-        , DialogStyle
-        , DividerStyle
-        , ExpansionPanelStyle
-        , ItemStyle
-        , LayoutStyle
-        , ProgressIndicatorStyle
-        , RowStyle
-        , SnackbarStyle
-        , SwitchStyle
-        , TabStyle
-        , TextInputStyle
-        , TitleStyle
-        )
+import Internal.Material.SortTable as SortTable
+import Internal.ProgressIndicator exposing (ProgressIndicatorStyle)
+import Internal.Switch exposing (SwitchStyle)
+import Internal.Tab exposing (TabStyle)
+import Internal.TextInput exposing (TextInputStyle)
+import Widget.Layout exposing (LayoutStyle)
+import Widget.Snackbar exposing (SnackbarStyle)
+import Internal.SortTable exposing (SortTableStyle)



@ -346,18 +344,18 @@ middleDividers =
    List.middleDividers


-{-| A title of a section of a list. Comes with a inset divider.
+{-| A header of a section of a list. Comes with a inset divider.
 -}
-insetTitle : Palette -> ItemStyle (TitleStyle msg)
-insetTitle =
-    List.insetTitle
+insetHeader : Palette -> ItemStyle (HeaderStyle msg)
+insetHeader =
+    List.insetHeader


-{-| A title of a section of a list. Comes with a full bleed divider.
+{-| A header of a section of a list. Comes with a full bleed divider.
 -}
-fullBleedTitle : Palette -> ItemStyle (TitleStyle msg)
-fullBleedTitle =
-    List.fullBleedTitle
+fullBleedHeader : Palette -> ItemStyle (HeaderStyle msg)
+fullBleedHeader =
+    List.fullBleedHeader


 {-| a Row of buttons.
@ -440,6 +438,13 @@ progressIndicator : Palette -> ProgressIndicatorStyle msg
 progressIndicator =
    ProgressIndicator.progressIndicator

+--------------------------------------------------------------------------------
+--  SORT TABLE
+--------------------------------------------------------------------------------
+
+sortTable : Palette -> SortTableStyle msg
+sortTable =
+    SortTable.sortTable


 {-------------------------------------------------------------------------------