@klodd/ds 3.15.2 → 3.16.0

package/css/components/pill-nav.css

@@ -0,0 +1,102 @@
+/* ================================================================
+   components/pill-nav.css
+   Horizontal scrollbar pill-navigation. Anvands for filter/status-
+   val nar tab-bar (segmented control) blir for trang.
+
+   Patterns:
+     - 4+ filter-options som inte far plats pa skarmen
+     - Status-filter, kategori-filter, datum-filter
+     - iOS App Store / Netflix / Spotify-stil chip-row
+
+   Skiljer sig fran .tab-bar (segmented control):
+     - .tab-bar:    fixed bredd, items delar plats lika (flex: 1)
+     - .pill-nav:   variable bredd, items scrollar horizontellt
+
+   Blocks:
+     .pill-nav         - <nav>-wrapper med horizontal scroll
+     .pill-nav__item   - individuell pill (a, button)
+
+   States:
+     .pill-nav__item.is-active  - aktiv-state (accent-bg + on-accent-text)
+
+   Layout:
+     - Item-hojd 36px (matchar .avatar default + .month-pill)
+     - Border-radius: full (pill-form)
+     - Negative margin LR = main-padding for scroll-area edge-to-edge
+   ================================================================ */
+.pill-nav {
+  display: flex;
+  gap: var(--space-8);
+  margin: 0 0 var(--space-16);
+  /* Edge-to-edge scroll: extender utanfor main-padding (14) sa
+     forsta/sista pill kan scrollas in i bild. Sidan i sig
+     ska inte scrolla horizontellt - bara pill-nav-en. */
+  margin-left: calc(-1 * var(--space-14));
+  margin-right: calc(-1 * var(--space-14));
+  padding: var(--space-2) var(--space-14);
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+  scroll-behavior: smooth;
+}
+
+.pill-nav::-webkit-scrollbar {
+  display: none;
+}
+
+.pill-nav__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 36px;
+  padding: 0 var(--space-16);
+  background: var(--surface-default);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-full);
+  color: var(--text-subtle);
+  font-family: inherit;
+  font-size: var(--fs-13);
+  font-weight: var(--fw-medium);
+  text-decoration: none;
+  white-space: nowrap;
+  flex-shrink: 0;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+  transition:
+    background var(--dur-fast) var(--ease-spring-snappy),
+    color var(--dur-fast) var(--ease-spring-snappy),
+    border-color var(--dur-fast) var(--ease-spring-snappy);
+}
+
+.pill-nav__item.is-active {
+  background: var(--accent-9);
+  border-color: var(--accent-9);
+  color: var(--text-on-accent);
+}
+
+@media (hover: hover) and (pointer: fine) {
+  .pill-nav__item:not(.is-active):hover {
+    background: var(--surface-hover);
+    color: var(--text-default);
+    border-color: var(--border-default);
+  }
+}
+
+.pill-nav__item:active:not(.is-active) {
+  transform: scale(0.97);
+  transition: transform 80ms var(--ease-spring-snappy);
+}
+
+.pill-nav__item:focus-visible {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+
+.pill-nav__item:disabled,
+.pill-nav__item[aria-disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}

package/css/index.css

@@ -58,6 +58,7 @@
 @import './components/inline-edit.css';
 @import './components/upload-spinner.css';
 @import './components/tab-bar.css';
+@import './components/pill-nav.css';
 
 /* v3.1.0 - generic kategori-monster (token-binding via app-domain-CSS) */
 @import './components/colored-row.css';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klodd/ds",
-  "version": "3.15.2",
+  "version": "3.16.0",
   "description": "Klodd shared design system - tokens, components, JS",
   "main": "css/index.css",
   "bin": {

package/references/02-components.md

@@ -250,10 +250,31 @@ För varje entry gäller:
 - **Blocks:** `.tab-bar` (definieras aven i `nav.css` med 5 identiska properties + skillnad i margin)
 - **Element:** `.tab-bar__item`
 - **States:** `.tab-bar__item.is-active`
-- **Anvand:** Inline tab-grupp for format-val (CSV/Avi etc.) - 44px touch-target
-- **INTE:** Bottom-nav (anvand `.bottom-nav`)
+- **Anvand:** Inline segmented control for format-val med 2-3 alternativ
+  som alla far plats utan scroll - t.ex. CSV/Avi. Items har `flex: 1`
+  (lika bredd), 44px touch-target.
+- **INTE:** Filter-listor med 4+ items (anvand `.pill-nav` istallet).
+  Bottom-nav (anvand `.bottom-nav`).
 - **Special:** Importordning i `index.css`: `nav.css` fore `tab-bar.css`. `.tab-bar`-block-styling fran tab-bar.css vinner via cascade.
 
+### pill-nav (`pill-nav.css`) - v3.16.0
+- **Blocks:** `.pill-nav` (horizontal scroll-container)
+- **Element:** `.pill-nav__item`
+- **States:** `.pill-nav__item.is-active` (accent-bg + on-accent-text)
+- **Anvand:** Horizontal scrollbar filter-pills nar 4+ alternativ inte
+  far plats pa skarmen. iOS App Store / Netflix-stil chip-row. Pill-
+  hojd 36px (matchar .avatar default + .month-pill). Items har
+  variable bredd, scrollar horizontellt med touch/swipe.
+- **INTE:** Segmented control 2-3 items (anvand `.tab-bar`). Permanent
+  bottom-nav (anvand `.bottom-nav`).
+- **Tokens:** `--surface-default` + `--border-subtle` (default state),
+  `--accent-9` + `--text-on-accent` (active), `--radius-full`,
+  `--fs-13`, height 36px.
+- **Special:** `.pill-nav` har negativa LR-marginer (-14px) for att
+  scroll-area ska natta kant-till-kant pa mobile - sidan i sig
+  scrollar inte horizontellt, bara pill-nav-en. Scrollbar dold via
+  `scrollbar-width: none` + `::-webkit-scrollbar { display: none }`.
+
 ### colored-row (`colored-row.css`) - v3.1.0
 - **Blocks:** `.colored-row`
 - **Modifiers:** `.colored-row--sm`, `.colored-row--lg`