Style lists by default

8 files changed, 54 insertions, 9 deletions

diff --git a/src/_iro-design.scss b/src/_iro-design.scss
index 04857e3..31e1f71 100644
--- a/src/_iro-design.scss
+++ b/src/_iro-design.scss
@@ -25,6 +25,7 @@ $breakpoints: (
 @forward 'core' as core--*;
 @forward 'layers' as layers--*;
 
+@forward 'layouts/list' as l-list--*;
 @forward 'layouts/button-group' as l-button-group--*;
 @forward 'layouts/card-list' as l-card-list--*;
 @forward 'layouts/container' as l-container--*;
@@ -41,7 +42,6 @@ $breakpoints: (
 @forward 'scopes/figures' as s-figures--*;
 @forward 'scopes/headings' as s-headings--*;
 @forward 'scopes/links' as s-links--*;
-@forward 'scopes/lists' as s-lists--*;
 @forward 'scopes/tables' as s-tables--*;
 
 @forward 'objects/action-button' as o-action-button--*;
diff --git a/src/layouts/_button-group.scss b/src/layouts/_button-group.scss
index c51ae7e..cae7042 100644
--- a/src/layouts/_button-group.scss
+++ b/src/layouts/_button-group.scss
@@ -10,8 +10,11 @@
     @include materialize-at-root(meta.module-variables('vars'));
 
     @include bem.layout('button-group') {
-        display:   flex;
-        flex-wrap: wrap;
-        gap:       props.get(vars.$spacing);
+        display:    flex;
+        flex-wrap:  wrap;
+        gap:        props.get(vars.$spacing);
+        padding:    0;
+        margin:     0;
+        list-style: none;
     }
 }
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index 8ef40c5..f76d18b 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -14,6 +14,9 @@
         display:        flex;
         flex-direction: column;
         gap:            props.get(vars.$row-gap);
+        padding:        0;
+        margin:         0;
+        list-style:     none;
 
         @include bem.modifier('quiet') {
             row-gap: props.get(vars.$quiet--row-gap);
diff --git a/src/layouts/_list.scss b/src/layouts/_list.scss
new file mode 100644
index 0000000..997634c
--- /dev/null
+++ b/src/layouts/_list.scss
@@ -0,0 +1,14 @@
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+
+@mixin styles {
+    @include bem.layout('list') {
+        @include bem.modifier('unstyled') {
+            padding:    0;
+            margin:     0;
+            list-style: none;
+        }
+    }
+}
diff --git a/src/objects/_tabbar.scss b/src/objects/_tabbar.scss
index 131c832..860ab47 100644
--- a/src/objects/_tabbar.scss
+++ b/src/objects/_tabbar.scss
@@ -27,8 +27,11 @@
         @include bem.elem('tabs') {
             display:         flex;
             block-size:      100%;
+            padding:         0;
+            margin-block:    0;
             margin-inline:   calc(-.5 * props.get(vars.$spacing));
             overflow-inline: auto;
+            list-style:      none;
         }
 
         @include bem.modifier('quiet') {
diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss
index 78f06be..86c65ce 100644
--- a/src/scopes/_implicit.scss
+++ b/src/scopes/_implicit.scss
@@ -85,9 +85,15 @@
 
         ul,
         ol {
-            padding:    0;
-            margin:     0;
-            list-style: none;
+            padding-block:  0;
+            padding-inline: props.get(vars.$list--indent) 0;
+            margin-block:   props.get(vars.$list--margin-bs) 0;
+            margin-inline:  0;
+
+            ul,
+            ol {
+                margin-block-start: 0;
+            }
         }
 
         li {
@@ -95,6 +101,21 @@
             margin:  0;
         }
 
+        dl {
+            padding:       0;
+            margin-block:  props.get(vars.$list--margin-bs) 0;
+            margin-inline: 0;
+        }
+
+        dt {
+            font-weight: bold;
+        }
+
+        dd {
+            margin-block:  0;
+            margin-inline: props.get(vars.$list--indent) 0;
+        }
+
         :focus,
         :focus-visible {
             outline: 0;
@@ -106,7 +127,6 @@
             text-decoration: none;
         }
 
-
         button,
         input,
         textarea {
diff --git a/src/scopes/_implicit.vars.scss b/src/scopes/_implicit.vars.scss
index 388f0af..d8d79cf 100644
--- a/src/scopes/_implicit.vars.scss
+++ b/src/scopes/_implicit.vars.scss
@@ -24,3 +24,6 @@ $heading--font-size:         props.def(--s-implicit--heading--font-size, props.g
 $heading--feature-settings:  props.def(--s-implicit--heading--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
 
 $heading--color: props.def(--s-implicit--heading--color, props.get(core.$theme, --heading), 'color') !default;
+
+$list--indent:    props.def(--s-implicit--list--indent, calc(props.get(core.$list--indent) + 1em)) !default;
+$list--margin-bs: props.def(--s-implicit--list--margin-bs, props.get($paragraph--margin-bs)) !default;
diff --git a/src_demo/index.scss b/src_demo/index.scss
index 85d1918..5e170c0 100644
--- a/src_demo/index.scss
+++ b/src_demo/index.scss
@@ -10,7 +10,6 @@
 @include iro.s-figures--styles;
 @include iro.s-headings--styles;
 @include iro.s-links--styles;
-@include iro.s-lists--styles;
 @include iro.s-tables--styles;
 
 @include iro.l-button-group--styles;