Moved Widget.Style into Widget

elm-analyse.json

@@ -0,0 +1,5 @@
+{
+  "checks": {
+    "SingleFieldRecord": false
+  }
+}

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)
+    , insetHeader : ItemStyle (HeaderStyle msg)
-    , fullBleedTitle : ItemStyle (TitleStyle msg)
+    , fullBleedHeader : ItemStyle (HeaderStyle msg)
     }

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
-    }

example/src/Data/Theme.elm

@@ -1,7 +1,7 @@
 module Data.Theme exposing (Theme(..), toStyle)
 
-import Data.Style exposing (Style)
+import Data.Style as Style exposing (Style)
-import Data.Style.Material
+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

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
 
 

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
 
 

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
 
 

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
 

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)
+        , insetHeader : ItemStyle (HeaderStyle msg)
-        , fullBleedTitle : ItemStyle (TitleStyle 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
+    , insetHeader = Material.insetHeader Material.defaultPalette
-    , fullBleedTitle = Material.fullBleedTitle 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"

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
 
 

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
 
 

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
 
 

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
 
 

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
 
 

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
 
 

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
 
 

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
 
 

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
 
 

src/Internal/Button.elm

@@ -1,16 +1,30 @@
-module Internal.Button exposing
+module Internal.Button exposing (Button, ButtonStyle, TextButton, button, iconButton, textButton)
-    ( Button
-    , 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 Html exposing (Html)
-import Widget.Style exposing (ButtonStyle)
+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 =

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 Html exposing (Html)
-import Widget.Style exposing (DialogStyle)
+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 =

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 Internal.List as List exposing (Item, ItemStyle)
-import Widget.Icon exposing (Icon)
+import Widget.Icon exposing (Icon, IconStyle)
-import Widget.Style exposing (ExpansionPanelStyle, ItemStyle)
+
+
+{-| 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 =

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"

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 } ->

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
 

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
 
 

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
 

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
 

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
+import Widget.Layout exposing (LayoutStyle)
-    exposing
-        ( ButtonStyle
-        , LayoutStyle
-        )
 import Widget.Style.Customize as Customize
 import Widget.Style.Material.Color as MaterialColor
 import Widget.Style.Material.Typography as Typography

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 Internal.List
-import Widget.Style
     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)
+insetHeader : Palette -> ItemStyle (HeaderStyle msg)
-insetTitle palette =
+insetHeader palette =
     { element =
         [ Element.width <| Element.fill
         , Border.widthEach
@@ -182,8 +182,8 @@ insetTitle palette =
     }
 
 
-fullBleedTitle : Palette -> ItemStyle (TitleStyle msg)
+fullBleedHeader : Palette -> ItemStyle (HeaderStyle msg)
-fullBleedTitle palette =
+fullBleedHeader palette =
     { element =
         [ Element.width <| Element.fill
         , Element.padding 0

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

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
+import Widget.Snackbar exposing (SnackbarStyle)
-    exposing
-        ( SnackbarStyle
-        )
 import Widget.Style.Customize as Customize
 import Widget.Style.Material.Color as MaterialColor
 

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
+        }
+    }

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
+import Internal.Switch exposing (SwitchStyle)
-    exposing
-        ( SwitchStyle
-        )
 import Widget.Style.Material.Color as MaterialColor
 
 

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
+import Internal.Tab exposing (TabStyle)
-    exposing
-        ( ButtonStyle
-        , TabStyle
-        )
 import Widget.Style.Material.Color as MaterialColor
 import Widget.Style.Material.Typography as Typography
 

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
+import Internal.TextInput exposing (TextInputStyle)
-    exposing
-        ( TextInputStyle
-        )
 import Widget.Style.Customize as Customize
 import Widget.Style.Material.Color as MaterialColor
 

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 :

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 =

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 Color exposing (Color)
-import Internal.Button as Button
+import Element exposing (Attribute, Element, Length)
-import Widget.Style exposing (SortTableStyle)
+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.

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 =

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 =

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 Internal.Button as Button exposing (Button, ButtonStyle)
-import Widget.Style exposing (TextInputStyle)
+
+
+{-| -}
+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 =

src/Widget.elm

@@ -1,16 +1,16 @@
 module Widget exposing
-    ( Button, TextButton, iconButton, textButton, button
+    ( ButtonStyle, Button, TextButton, iconButton, textButton, button
-    , Switch, switch
+    , SwitchStyle,Switch, switch
     , Select, selectButton, select
     , MultiSelect, multiSelect
-    , Dialog, modal, dialog
+    , DialogStyle, Dialog, modal, dialog
-    , ExpansionPanel, expansionPanel, expansionPanelItem
+    , ExpansionPanelStyle, ExpansionPanel, expansionPanel, expansionPanelItem
-    , row, column, Item, itemList, item, divider, buttonRow, buttonColumn
+    , ItemStyle, DividerStyle, HeaderStyle, RowStyle, ColumnStyle, row, column, Item, itemList, item, divider, buttonRow, buttonColumn
-    , SortTable, Column, sortTable, floatColumn, intColumn, stringColumn, unsortableColumn
+    , SortTableStyle, SortTable, Column, sortTable, floatColumn, intColumn, stringColumn, unsortableColumn
-    , TextInput, textInput
+    , TextInputStyle,TextInput, textInput
-    , Tab, tab
+    , TabStyle,Tab, tab
-    , ProgressIndicator, circularProgressIndicator
+    , ProgressIndicatorStyle,ProgressIndicator, circularProgressIndicator
-    , buttonSheet, headerItem
+    , 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
+import Widget.Icon exposing (Icon)
-    exposing
-        ( ButtonSheetStyle
-        , ButtonStyle
-        , ColumnStyle
-        , DialogStyle
-        , DividerStyle
-        , ExpansionPanelStyle
-        , ItemStyle
-        , ProgressIndicatorStyle
-        , RowStyle
-        , SortTableStyle
-        , SwitchStyle
-        , TabStyle
-        , TextInputStyle
-        , TitleStyle
-        )
 
 
 
@@ -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.

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

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 Internal.Button as Button exposing (Button, ButtonStyle)
-import Widget.Snackbar as Snackbar exposing (Message)
+import Internal.Dialog as Dialog
-import Widget.Style exposing (LayoutStyle)
+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
+            |> Select.select
-            |> List.map (Widget.selectButton style.menuTabButton)
+            |> 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

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
+                    |> List.foldl fun m
-                        (\( pos, label ) model ->
-                            { model
-                                | positions =
-                                    model.positions
-                                        |> IntDict.insert pos
-                                            (label |> model.toString)
-                            }
-                        )
-                        m
             )
 
 

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

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
-    }

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
+import Internal.Material.SortTable as SortTable
-    exposing
+import Internal.ProgressIndicator exposing (ProgressIndicatorStyle)
-        ( ButtonStyle
+import Internal.Switch exposing (SwitchStyle)
-        , ColumnStyle
+import Internal.Tab exposing (TabStyle)
-        , DialogStyle
+import Internal.TextInput exposing (TextInputStyle)
-        , DividerStyle
+import Widget.Layout exposing (LayoutStyle)
-        , ExpansionPanelStyle
+import Widget.Snackbar exposing (SnackbarStyle)
-        , ItemStyle
+import Internal.SortTable exposing (SortTableStyle)
-        , LayoutStyle
-        , ProgressIndicatorStyle
-        , RowStyle
-        , SnackbarStyle
-        , SwitchStyle
-        , TabStyle
-        , TextInputStyle
-        , TitleStyle
-        )
 
 
 
@@ -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)
+insetHeader : Palette -> ItemStyle (HeaderStyle msg)
-insetTitle =
+insetHeader =
-    List.insetTitle
+    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)
+fullBleedHeader : Palette -> ItemStyle (HeaderStyle msg)
-fullBleedTitle =
+fullBleedHeader =
-    List.fullBleedTitle
+    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
 
 
 {-------------------------------------------------------------------------------