@klodd/ds 3.11.3 → 3.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/css/10-semantic.css +5 -5
  2. package/css/components/nav.css +5 -2
  3. package/package.json +1 -1
  4. package/references/01-tokens.md +1 -1
package/css/10-semantic.css CHANGED
@@ -223,7 +223,7 @@
223
223
  aldrig fake gradients.
224
224
  Anvand for: kort, modaler, popovers.
225
225
  Inte for: knappar, inputs, inline-element. */
226
- --shadow-card: 0 8px 16px rgba(51, 51, 51, 0.08);
226
+ --shadow-card: 0 8px 16px color-mix(in oklch, var(--gray-12) 8%, transparent);
227
227
 
228
228
  /* Bakat-kompat: --shadow-float ar nu alias till --shadow-card.
229
229
  Befintliga komponenter (chip.install-chip, overlay.dialog/sheet,
@@ -297,10 +297,10 @@
297
297
  ================================================================ */
298
298
 
299
299
  /* Bottom-nav-hojd: enda kalla av sanning (konsoliderad 2026-05-07
300
- fran tidigare dubbel-definition i 00-primitives.css). Calc-baserad
301
- pa --touch-min + space sa den foljer designsystem-andringar
302
- automatiskt. */
303
- --bottom-nav-height: calc(var(--touch-min) + var(--space-12));
300
+ fran tidigare dubbel-definition i 00-primitives.css). Hojd 72px
301
+ 2026-05-11 for att inner pill-active-state (--accent-a3-fyll med
302
+ border-radius full) ska fa visuellt luftrum mot pillens border. */
303
+ --bottom-nav-height: 72px;
304
304
 
305
305
  /* Bottom-nav-clearance: utrymme under nav for fixed-positioning +
306
306
  safe-area pa iPhone notch-modeller. Anvands som body padding-bottom
package/css/components/nav.css CHANGED
@@ -53,7 +53,8 @@
53
53
  justify-content: center;
54
54
  gap: var(--space-4);
55
55
  min-height: var(--touch-min);
56
- padding: var(--space-8) var(--space-6);
56
+ padding-block: var(--space-8);
57
+ padding-inline: var(--space-12);
57
58
  font-size: var(--fs-10);
58
59
  font-weight: var(--fw-medium);
59
60
  color: var(--text-muted);
@@ -89,7 +90,9 @@
89
90
  }
90
91
 
91
92
  .bottom-nav__item--active {
92
- color: var(--accent-text);
93
+ background: var(--accent-a3);
94
+ border-radius: var(--radius-full);
95
+ color: var(--text-default);
93
96
  }
94
97
 
95
98
  .bottom-nav__item .icon,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@klodd/ds",
3
- "version": "3.11.3",
3
+ "version": "3.12.0",
4
4
  "description": "Klodd shared design system - tokens, components, JS",
5
5
  "main": "css/index.css",
6
6
  "bin": {
package/references/01-tokens.md CHANGED
@@ -161,7 +161,7 @@ Radix-stegen, anvand `color-mix(in oklch, var(--accent-9) 25%, transparent)`.
161
161
  ## Component tokens (DRY-mekanism)
162
162
 
163
163
  ```
164
- --bottom-nav-height-semantic
164
+ --bottom-nav-height
165
165
  --bottom-nav-clearance
166
166
  --touch-min: 44px
167
167
  --card-radius