1 files changed, 95 insertions, 68 deletions
diff --git a/src/objects/_tabbar.scss b/src/objects/_tabbar.scss
index 218fe7d..631c5c8 100644
--- a/src/objects/_tabbar.scss
+++ b/src/objects/_tabbar.scss
@@ -9,82 +9,109 @@
 @use 'tabbar.vars' as vars;
 @mixin styles {
-    @include materialize-at-root(meta.module-variables('vars'));
+        @include materialize-at-root(meta.module-variables('vars'));
-    @include bem.object('tabbar') {
+        @include bem.object('tabbar') {
-        min-inline-size: 0;
+                min-inline-size: 0;
-        block-size:      props.get(vars.$block-size);
+                block-size:      props.get(vars.$block-size);
-        overflow-inline: auto;
+                overflow:        hidden;
-        box-shadow:      0 calc(-1 * props.get(vars.$indicator--width)) 0 0 props.get(vars.$railing--bg-color) inset;
-        @include bem.elem('tabs') {
+                &::after {
-            display:        flex;
+                        display:            block;
-            gap:            props.get(vars.$spacing);
+                        block-size:         props.get(vars.$border--width);
-            block-size:     100%;
+                        margin-block-start: calc(-1 * props.get(vars.$border--width));
-            padding-inline: calc(.5 * props.get(vars.$spacing));
+                        content:            '';
-            margin-inline:  calc(-.5 * props.get(vars.$spacing));
+                        background-color:   props.get(vars.$railing--bg-color);
-        }
+                }
-        @include bem.modifier('quiet') {
+                @include bem.elem('tabs') {
-            box-shadow: none;
+                        display:         flex;
-        }
+                        block-size:      100%;
+                        overflow-inline: auto;
+                }
-        @include bem.modifier('adapt') {
+                @include bem.modifier('quiet') {
-            block-size: 100%;
+                        box-shadow: none;
-        }
+                }
-        @include bem.elem('tab') {
+                @include bem.modifier('adapt') {
-            position:      relative;
+                        block-size: 100%;
-            display:       flex;
+                }
-            align-items:   center;
+                
-            color:         props.get(vars.$tab--text-color);
+                @include bem.elem('tab') {
-            white-space:   nowrap;
+                        position:       relative;
-            border-block:  props.get(vars.$indicator--width) solid transparent;
+                        display:        flex;
+                        align-items:    center;
+                        padding-inline: calc(.5 * props.get(vars.$spacing));
+                        margin-inline:  calc(-.5 * props.get(vars.$spacing));
+                        color:          props.get(vars.$tab--text-color);
+                        white-space:    nowrap;
-            &::before {
+                        &::before {
-                position:          absolute;
+                                position:          absolute;
-                inset-block-start: 50%;
+                                inset-block-start: 50%;
-                inset-inline:      calc(-1 * props.get(vars.$tab--pad-i));
+                                inset-inline:      calc(-1 * props.get(vars.$tab--pad-i) + .5 * props.get(vars.$spacing));
-                z-index:           -10;
+                                z-index:           -10;
-                block-size:        1.5em;
+                                block-size:        1.5em;
-                content:           '';
+                                content:           '';
-                border-radius:     props.get(vars.$rounding);
+                                border-radius:     props.get(vars.$rounding);
-                transform:         translateY(-50%);
+                                transform:         translateY(-50%);
-            }
+                        }
-            &:link,
+                        &::after {
-            &:visited {
+                                position:         absolute;
-                &:hover,
+                                inset-block-end:  0;
-                &:active,
+                                inset-inline:     calc(.5 * props.get(vars.$spacing));
-                &:focus-visible {
+                                z-index:          10;
-                    color: props.get(vars.$tab--selected--text-color);
+                                display:          none;
-                }
+                                block-size:       props.get(vars.$indicator--width);
+                                content:          '';
+                                background-color: props.get(vars.$tab--selected--text-color);
+                        }
-                &:focus-visible {
+                        &:link,
-                    &::before {
+                        &:visited {
-                        color:           props.get(vars.$key-focus--text-color);
+                                &:hover,
-                        text-decoration: none;
+                                &:active,
-                        outline:         props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+                                &:focus-visible {
-                        box-shadow: 0 0 0
+                                        color: props.get(vars.$tab--selected--text-color);
-                            calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                                }
-                            props.get(vars.$key-focus--outline-color);
-                    }
-                }
-            }
-            @include bem.is('selected') {
+                                &:focus-visible {
-                color:                  props.get(vars.$tab--selected--text-color);
+                                        &::before {
-                border-block-end-color: props.get(vars.$tab--selected--text-color);
+                                                color:           props.get(vars.$key-focus--text-color);
-            }
+                                                text-decoration: none;
-        }
+                                                outline:         props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+                                                box-shadow: 0 0 0
+                                                        calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                                                        props.get(vars.$key-focus--outline-color);
+                                        }
+                                }
+                        }
-        @include bem.modifier('accent') {
+                        @include bem.next-twin-elem {
-            @include bem.elem('tab') {
+                                margin-inline-start: calc(.5 * props.get(vars.$spacing));
-                @include bem.is('selected') {
+                        }
-                    color:                  props.get(vars.$tab--accent--text-color);
-                    border-block-end-color: props.get(vars.$tab--accent--text-color);
+                        @include bem.is('selected') {
-                }
+                                color: props.get(vars.$tab--selected--text-color);
-            }
+                
-        }
+                                &::after {
-    }
+                                        display: block;
+                                }
+                        }
+                }
+                @include bem.modifier('accent') {
+                        @include bem.elem('tab') {
+                                &::after {
+                                        background-color: props.get(vars.$tab--accent--text-color);
+                                }
+                                @include bem.is('selected') {
+                                        color: props.get(vars.$tab--accent--text-color);
+                                }
+                        }
+                }
+        }
 }

diff --git a/src/objects/_tabbar.scss b/src/objects/_tabbar.scss index 218fe7d..631c5c8 100644 --- a/src/objects/_tabbar.scss +++ b/src/objects/_tabbar.scss
@@ -9,82 +9,109 @@
9	@use 'tabbar.vars' as vars;	9	@use 'tabbar.vars' as vars;
10		10
11	@mixin styles {	11	@mixin styles {
12	@include materialize-at-root(meta.module-variables('vars'));	12	@include materialize-at-root(meta.module-variables('vars'));
13		13
14	@include bem.object('tabbar') {	14	@include bem.object('tabbar') {
15	min-inline-size: 0;	15	min-inline-size: 0;
16	block-size: props.get(vars.$block-size);	16	block-size: props.get(vars.$block-size);
17	overflow-inline: auto;	17	overflow: hidden;
18	box-shadow: 0 calc(-1 * props.get(vars.$indicator--width)) 0 0 props.get(vars.$railing--bg-color) inset;
19		18
20	@include bem.elem('tabs') {	19	&::after {
21	display: flex;	20	display: block;
22	gap: props.get(vars.$spacing);	21	block-size: props.get(vars.$border--width);
23	block-size: 100%;	22	margin-block-start: calc(-1 * props.get(vars.$border--width));
24	padding-inline: calc(.5 * props.get(vars.$spacing));	23	content: '';
25	margin-inline: calc(-.5 * props.get(vars.$spacing));	24	background-color: props.get(vars.$railing--bg-color);
26	}	25	}
27		26
28	@include bem.modifier('quiet') {	27	@include bem.elem('tabs') {
29	box-shadow: none;	28	display: flex;
30	}	29	block-size: 100%;
		30	overflow-inline: auto;
		31	}
31		32
32	@include bem.modifier('adapt') {	33	@include bem.modifier('quiet') {
33	block-size: 100%;	34	box-shadow: none;
34	}	35	}
35		36
36	@include bem.elem('tab') {	37	@include bem.modifier('adapt') {
37	position: relative;	38	block-size: 100%;
38	display: flex;	39	}
39	align-items: center;	40
40	color: props.get(vars.$tab--text-color);	41	@include bem.elem('tab') {
41	white-space: nowrap;	42	position: relative;
42	border-block: props.get(vars.$indicator--width) solid transparent;	43	display: flex;
		44	align-items: center;
		45	padding-inline: calc(.5 * props.get(vars.$spacing));
		46	margin-inline: calc(-.5 * props.get(vars.$spacing));
		47	color: props.get(vars.$tab--text-color);
		48	white-space: nowrap;
43		49
44	&::before {	50	&::before {
45	position: absolute;	51	position: absolute;
46	inset-block-start: 50%;	52	inset-block-start: 50%;
47	inset-inline: calc(-1 * props.get(vars.$tab--pad-i));	53	inset-inline: calc(-1 * props.get(vars.$tab--pad-i) + .5 * props.get(vars.$spacing));
48	z-index: -10;	54	z-index: -10;
49	block-size: 1.5em;	55	block-size: 1.5em;
50	content: '';	56	content: '';
51	border-radius: props.get(vars.$rounding);	57	border-radius: props.get(vars.$rounding);
52	transform: translateY(-50%);	58	transform: translateY(-50%);
53	}	59	}
54		60
55	&:link,	61	&::after {
56	&:visited {	62	position: absolute;
57	&:hover,	63	inset-block-end: 0;
58	&:active,	64	inset-inline: calc(.5 * props.get(vars.$spacing));
59	&:focus-visible {	65	z-index: 10;
60	color: props.get(vars.$tab--selected--text-color);	66	display: none;
61	}	67	block-size: props.get(vars.$indicator--width);
		68	content: '';
		69	background-color: props.get(vars.$tab--selected--text-color);
		70	}
62		71
63	&:focus-visible {	72	&:link,
64	&::before {	73	&:visited {
65	color: props.get(vars.$key-focus--text-color);	74	&:hover,
66	text-decoration: none;	75	&:active,
67	outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);	76	&:focus-visible {
68	box-shadow: 0 0 0	77	color: props.get(vars.$tab--selected--text-color);
69	calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))	78	}
70	props.get(vars.$key-focus--outline-color);
71	}
72	}
73	}
74		79
75	@include bem.is('selected') {	80	&:focus-visible {
76	color: props.get(vars.$tab--selected--text-color);	81	&::before {
77	border-block-end-color: props.get(vars.$tab--selected--text-color);	82	color: props.get(vars.$key-focus--text-color);
78	}	83	text-decoration: none;
79	}	84	outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
		85	box-shadow: 0 0 0
		86	calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
		87	props.get(vars.$key-focus--outline-color);
		88	}
		89	}
		90	}
80		91
81	@include bem.modifier('accent') {	92	@include bem.next-twin-elem {
82	@include bem.elem('tab') {	93	margin-inline-start: calc(.5 * props.get(vars.$spacing));
83	@include bem.is('selected') {	94	}
84	color: props.get(vars.$tab--accent--text-color);	95
85	border-block-end-color: props.get(vars.$tab--accent--text-color);	96	@include bem.is('selected') {
86	}	97	color: props.get(vars.$tab--selected--text-color);
87	}	98
88	}	99	&::after {
89	}	100	display: block;
		101	}
		102	}
		103	}
		104
		105	@include bem.modifier('accent') {
		106	@include bem.elem('tab') {
		107	&::after {
		108	background-color: props.get(vars.$tab--accent--text-color);
		109	}
		110
		111	@include bem.is('selected') {
		112	color: props.get(vars.$tab--accent--text-color);
		113	}
		114	}
		115	}
		116	}
90	}	117	}