@jsekulowicz/ds-components 0.13.2 → 0.14.0

package/custom-elements.json

@@ -253,6 +253,22 @@
             "module": "./atoms/radio-group/index.js"
           }
         },
+        {
+          "kind": "js",
+          "name": "DsSegmentedControl",
+          "declaration": {
+            "name": "DsSegmentedControl",
+            "module": "./atoms/segmented-control/index.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SegmentedControlOption",
+          "declaration": {
+            "name": "SegmentedControlOption",
+            "module": "./atoms/segmented-control/index.js"
+          }
+        },
         {
           "kind": "js",
           "name": "DsSelect",
@@ -845,6 +861,150 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/shared/scroll-fade-controller.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ScrollFadeController",
+          "members": [
+            {
+              "kind": "field",
+              "name": "#getScroller",
+              "privacy": "private",
+              "type": {
+                "text": "() => HTMLElement | null | undefined"
+              },
+              "default": "getScroller"
+            },
+            {
+              "kind": "field",
+              "name": "#scroller",
+              "privacy": "private",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "#resize",
+              "privacy": "private",
+              "type": {
+                "text": "ResizeObserver | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#mutation",
+              "privacy": "private",
+              "type": {
+                "text": "MutationObserver | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#frame",
+              "privacy": "private",
+              "type": {
+                "text": "number"
+              },
+              "default": "0"
+            },
+            {
+              "kind": "method",
+              "name": "hostConnected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "hostUpdated",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "hostDisconnected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#tryAttach",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "attempt",
+                  "default": "0"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "#detach",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#onScroll",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "#schedule",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "#update",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ScrollFadeController",
+          "declaration": {
+            "name": "ScrollFadeController",
+            "module": "src/shared/scroll-fade-controller.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/shared/scroll-fade.styles.ts",
@@ -852,7 +1012,12 @@
         {
           "kind": "variable",
           "name": "scrollFadeStyles",
-          "default": "css` /* @property registration so the scroll-driven keyframe can interpolate the fades as colours. Near-instant flips keep the transitions binary. */ @property --ds-scroll-fade-top { syntax: '<color>'; inherits: false; initial-value: rgb(0 0 0); } @property --ds-scroll-fade-bottom { syntax: '<color>'; inherits: false; initial-value: rgb(0 0 0); } @keyframes ds-scroll-fade { 0% { --ds-scroll-fade-top: rgb(0 0 0); --ds-scroll-fade-bottom: rgb(0 0 0 / 0); } 0.001%, 99.999% { --ds-scroll-fade-top: rgb(0 0 0 / 0); --ds-scroll-fade-bottom: rgb(0 0 0 / 0); } 100% { --ds-scroll-fade-top: rgb(0 0 0 / 0); --ds-scroll-fade-bottom: rgb(0 0 0); } } `"
+          "default": "css` ds-card::part(body), .scroll { --ds-scroll-fade-mask: linear-gradient( to bottom, rgb(0 0 0) 0, rgb(0 0 0) var(--ds-scroll-fade-offset, 0px), var(--ds-scroll-fade-top, rgb(0 0 0)) var(--ds-scroll-fade-offset, 0px), rgb(0 0 0) calc(var(--ds-scroll-fade-offset, 0px) + var(--ds-scroll-fade-depth, var(--ds-space-8))), rgb(0 0 0) calc(100% - var(--ds-scroll-fade-depth, var(--ds-space-8))), var(--ds-scroll-fade-bottom, rgb(0 0 0)) 100% ); } `"
+        },
+        {
+          "kind": "variable",
+          "name": "cardBodyScrollFadeStyles",
+          "default": "css` ds-card::part(body) { flex: 1; min-height: 0; overflow-x: clip; overflow-y: auto; overscroll-behavior: contain; /* Inline padding + negative margin lets focus rings on full-width children paint outside the body's clip box. */ padding-inline: var(--ds-space-2); margin-inline: calc(var(--ds-space-2) * -1); scrollbar-width: none; mask-image: var(--ds-scroll-fade-mask); } ds-card::part(body)::-webkit-scrollbar { display: none; } `"
         }
       ],
       "exports": [
@@ -863,6 +1028,14 @@
             "name": "scrollFadeStyles",
             "module": "src/shared/scroll-fade.styles.ts"
           }
+        },
+        {
+          "kind": "js",
+          "name": "cardBodyScrollFadeStyles",
+          "declaration": {
+            "name": "cardBodyScrollFadeStyles",
+            "module": "src/shared/scroll-fade.styles.ts"
+          }
         }
       ]
     },
@@ -5250,6 +5423,200 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/atoms/segmented-control/define.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "ds-segmented-control",
+          "declaration": {
+            "name": "DsSegmentedControl",
+            "module": "/src/atoms/segmented-control/segmented-control.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/atoms/segmented-control/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DsSegmentedControl",
+          "declaration": {
+            "name": "DsSegmentedControl",
+            "module": "./segmented-control.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SegmentedControlOption",
+          "declaration": {
+            "name": "SegmentedControlOption",
+            "module": "./segmented-control.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/atoms/segmented-control/segmented-control.styles.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "segmentedControlStyles",
+          "default": "css` :host { display: inline-flex; max-width: 100%; } :host([disabled]) { cursor: not-allowed; opacity: 0.6; } .group { display: inline-flex; align-items: stretch; gap: var(--ds-space-1); padding: var(--ds-space-1); background: var(--ds-color-bg-subtle); border: 1px solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-sm); max-width: 100%; } .segment { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2); min-width: 0; padding: var(--ds-space-2) var(--ds-space-3); border: 0; background: transparent; color: var(--ds-color-fg-muted); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); font-weight: var(--ds-font-weight-medium); line-height: 1; white-space: nowrap; border-radius: var(--ds-radius-sm); cursor: pointer; transition: background var(--ds-duration-fast) var(--ds-easing-standard), color var(--ds-duration-fast) var(--ds-easing-standard), box-shadow var(--ds-duration-fast) var(--ds-easing-standard); } .segment:hover:not([disabled]):not([aria-checked='true']) { color: var(--ds-color-fg); } .segment[aria-checked='true'] { background: var(--ds-color-bg); color: var(--ds-color-fg); box-shadow: var(--ds-shadow-sm); } .segment:focus-visible { outline: none; box-shadow: var(--ds-shadow-focus); } .segment[disabled] { cursor: not-allowed; opacity: 0.5; } .label { overflow: hidden; text-overflow: ellipsis; } `"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "segmentedControlStyles",
+          "declaration": {
+            "name": "segmentedControlStyles",
+            "module": "src/atoms/segmented-control/segmented-control.styles.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/atoms/segmented-control/segmented-control.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "DsSegmentedControl",
+          "cssParts": [
+            {
+              "description": "The container that holds the segments.",
+              "name": "group"
+            },
+            {
+              "description": "Each option button.",
+              "name": "segment"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "label"
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "options",
+              "type": {
+                "text": "SegmentedControlOption[]"
+              },
+              "default": "[]",
+              "attribute": "options"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "#select",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "SegmentedControlOption"
+                  }
+                }
+              ]
+            }
+          ],
+          "events": [
+            {
+              "description": "Fires when the selection changes. Detail: `{ value: string }`.",
+              "name": "ds-change"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "label"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "value"
+            },
+            {
+              "name": "options",
+              "type": {
+                "text": "SegmentedControlOption[]"
+              },
+              "default": "[]",
+              "fieldName": "options"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disabled"
+            }
+          ],
+          "superclass": {
+            "name": "DsElement",
+            "package": "@jsekulowicz/ds-core"
+          },
+          "tagName": "ds-segmented-control",
+          "customElement": true,
+          "summary": "Single-select segmented control — a connected row of mutually\nexclusive options, each with an optional leading icon. A token-styled,\ninline alternative to a dropdown when there are only a few choices."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DsSegmentedControl",
+          "declaration": {
+            "name": "DsSegmentedControl",
+            "module": "src/atoms/segmented-control/segmented-control.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/atoms/select/define.ts",
@@ -7445,7 +7812,7 @@
         {
           "kind": "variable",
           "name": "tableScrollBodyStyles",
-          "default": "css` :host([scroll-body]) { display: flex; flex-direction: column; min-height: 0; } :host([scroll-body]) .scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; /* No overscroll bounce — the rubber-band at the top/bottom looks glitchy against the pinned header and the offset scroll-fade. */ overscroll-behavior: none; scrollbar-width: none; mask-image: linear-gradient( to bottom, rgb(0 0 0) 0, rgb(0 0 0) var(--ds-table-header-height), var(--ds-scroll-fade-top, rgb(0 0 0)) var(--ds-table-header-height), rgb(0 0 0) calc(var(--ds-table-header-height) * 2), rgb(0 0 0) calc(100% - var(--ds-table-header-height)), var(--ds-scroll-fade-bottom, rgb(0 0 0)) 100% ); animation: ds-scroll-fade linear; animation-timeline: scroll(self); } :host([scroll-body]) .scroll::-webkit-scrollbar { display: none; } :host([scroll-body]) thead th { position: sticky; top: 0; z-index: 1; box-sizing: border-box; block-size: var(--ds-table-header-height); } /* Stacked (mobile) layout hides the header and renders rows as cards, so the top fade must NOT be offset by the header height — fade from the very top like ds-dialog / ds-drawer. */ @container (max-width: ${mobileBreakpoint}) { :host([scroll-body]:not([responsive='scroll'])) .scroll { mask-image: linear-gradient( to bottom, var(--ds-scroll-fade-top, rgb(0 0 0)) 0, rgb(0 0 0) var(--ds-table-header-height), rgb(0 0 0) calc(100% - var(--ds-table-header-height)), var(--ds-scroll-fade-bottom, rgb(0 0 0)) 100% ); } } `"
+          "default": "css` :host([scroll-body]) { display: flex; flex-direction: column; min-height: 0; } :host([scroll-body]) .scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; /* No overscroll bounce — the rubber-band at the top/bottom looks glitchy against the pinned header and the offset scroll-fade. */ overscroll-behavior: none; scrollbar-width: none; /* Shared scroll-fade mask (driven by ScrollFadeController), offset below the sticky header so it dims the body rather than the header. */ --ds-scroll-fade-offset: var(--ds-table-header-height); mask-image: var(--ds-scroll-fade-mask); } :host([scroll-body]) .scroll::-webkit-scrollbar { display: none; } :host([scroll-body]) thead th { position: sticky; top: 0; z-index: 1; box-sizing: border-box; block-size: var(--ds-table-header-height); } /* Stacked (mobile) layout hides the header and renders rows as cards, so the top fade must NOT be offset by the header height — fade from the very top like ds-dialog / ds-drawer. */ @container (max-width: ${mobileBreakpoint}) { :host([scroll-body]:not([responsive='scroll'])) .scroll { --ds-scroll-fade-offset: 0px; } } `"
         }
       ],
       "exports": [
@@ -7863,6 +8230,13 @@
               "privacy": "private",
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "_scrollFade",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new ScrollFadeController( this, () => this.shadowRoot?.querySelector('.scroll') as HTMLElement | null, )"
+            },
             {
               "kind": "field",
               "name": "#slotObserver",
@@ -12561,7 +12935,7 @@
         {
           "kind": "variable",
           "name": "dialogStyles",
-          "default": "css` :host { display: contents; } dialog { padding: 0; border: 0; background: transparent; color: inherit; width: calc(100% - var(--ds-space-4)); max-height: min(90vh, 720px); border-radius: var(--ds-radius-sm); box-shadow: var(--ds-shadow-md); overflow: visible; } /* Scope to [open] so closed dialogs stay display:none per UA. */ dialog[open] { display: flex; flex-direction: column; } :host([size='sm']) dialog { max-width: 400px; } :host([size='md']) dialog { max-width: 560px; } :host([size='lg']) dialog { max-width: 800px; } dialog::backdrop { background: rgb(15 23 42 / 0.55); } ds-card { flex: 1; min-height: 0; min-width: 0; } ds-card::part(card) { /* Match the dialog's cap explicitly; percentage heights don't resolve reliably through ds-card's display:block host, so body scroll breaks when content overflows. */ max-height: min(90vh, 720px); box-shadow: none; border-color: transparent; gap: var(--ds-space-3); } ds-card::part(body) { flex: 1; min-height: 0; overflow-x: clip; overflow-y: auto; overscroll-behavior: contain; /* Inline padding + negative margin lets focus rings on full-width children paint outside the body's clip box. */ padding-inline: var(--ds-space-2); margin-inline: calc(var(--ds-space-2) * -1); /* Scrollbar hidden; overflow is signalled by the shared scroll-driven fade (see shared/scroll-fade.styles). */ scrollbar-width: none; mask-image: linear-gradient( to bottom, var(--ds-scroll-fade-top, rgb(0 0 0)) 0, rgb(0 0 0) var(--ds-space-6), rgb(0 0 0) calc(100% - var(--ds-space-6)), var(--ds-scroll-fade-bottom, rgb(0 0 0)) 100% ); animation: ds-scroll-fade linear; animation-timeline: scroll(self); } ds-card::part(body)::-webkit-scrollbar { display: none; } .title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ds-space-3); } .title-text { margin: 0; flex: 1; font-family: var(--ds-font-display); font-size: var(--ds-font-size-xl); font-weight: var(--ds-font-weight-semibold); letter-spacing: var(--ds-letter-spacing-display); } /* Normalise slotted headings (h1-h6) so UA defaults don't compound with .title-text styles. */ .title-text ::slotted(*) { font: inherit; margin: 0; letter-spacing: inherit; } /* Pull the close button toward the card's top-right corner; the card's own padding would otherwise indent it. */ .close-btn { margin-block-start: calc(var(--ds-space-3) * -1); margin-inline-end: calc(var(--ds-space-3) * -1); } .footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ds-space-2); } `"
+          "default": "css` :host { display: contents; } dialog { padding: 0; border: 0; background: transparent; color: inherit; width: calc(100% - var(--ds-space-4)); max-height: min(90vh, 720px); border-radius: var(--ds-radius-sm); box-shadow: var(--ds-shadow-md); overflow: visible; } /* Scope to [open] so closed dialogs stay display:none per UA. */ dialog[open] { display: flex; flex-direction: column; } :host([size='sm']) dialog { max-width: 400px; } :host([size='md']) dialog { max-width: 560px; } :host([size='lg']) dialog { max-width: 800px; } dialog::backdrop { background: rgb(15 23 42 / 0.55); } ds-card { flex: 1; min-height: 0; min-width: 0; } ds-card::part(card) { /* Match the dialog's cap explicitly; percentage heights don't resolve reliably through ds-card's display:block host, so body scroll breaks when content overflows. */ max-height: min(90vh, 720px); box-shadow: none; border-color: transparent; gap: var(--ds-space-3); } /* The scrolling body (ds-card::part(body)) + its scroll fade come from the shared cardBodyScrollFadeStyles. */ .title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ds-space-3); } .title-text { margin: 0; flex: 1; font-family: var(--ds-font-display); font-size: var(--ds-font-size-xl); font-weight: var(--ds-font-weight-semibold); letter-spacing: var(--ds-letter-spacing-display); } /* Normalise slotted headings (h1-h6) so UA defaults don't compound with .title-text styles. */ .title-text ::slotted(*) { font: inherit; margin: 0; letter-spacing: inherit; } /* Pull the close button toward the card's top-right corner; the card's own padding would otherwise indent it. */ .close-btn { margin-block-start: calc(var(--ds-space-3) * -1); margin-inline-end: calc(var(--ds-space-3) * -1); } .footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ds-space-2); } `"
         }
       ],
       "exports": [
@@ -12663,6 +13037,13 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_scrollFade",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new ScrollFadeController( this, () => (this.shadowRoot ?.querySelector('ds-card') ?.shadowRoot?.querySelector('[part~=\"body\"]') as HTMLElement | null) ?? null, )"
+            },
             {
               "kind": "method",
               "name": "show",
@@ -12824,7 +13205,7 @@
         {
           "kind": "variable",
           "name": "drawerStyles",
-          "default": "css` :host { display: contents; } dialog { padding: 0; border: 0; background: transparent; color: inherit; box-shadow: var(--ds-shadow-lg); overflow: visible; height: 100vh; height: 100dvh; max-height: 100%; /* allow-discrete lets display/overlay hold their open values for the slide-in / slide-out duration. */ transition: transform var(--ds-duration-slow) var(--ds-easing-standard), display var(--ds-duration-slow) allow-discrete, overlay var(--ds-duration-slow) allow-discrete; } /* Scope to [open] so closed dialogs stay display:none per UA. */ dialog[open] { display: flex; flex-direction: column; } :host([side='start']) dialog { margin: 0; margin-inline-end: auto; transform: translateX(-100%); } :host([side='end']) dialog { margin: 0; margin-inline-start: auto; transform: translateX(100%); } :host([side='start']) dialog[open], :host([side='end']) dialog[open] { transform: translateX(0); } @starting-style { :host([side='start']) dialog[open] { transform: translateX(-100%); } :host([side='end']) dialog[open] { transform: translateX(100%); } } :host([size='sm']) dialog { width: min(20rem, 90vw); } :host([size='md']) dialog { width: min(24rem, 90vw); } :host([size='lg']) dialog { width: min(28rem, 90vw); } dialog::backdrop { background: rgb(15 23 42 / 0.55); } ds-card { flex: 1; min-height: 0; min-width: 0; } ds-card::part(card) { /* Fill the dialog explicitly; percentage heights don't resolve reliably through ds-card's display:block host. */ height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; box-shadow: none; /* border: 0 not transparent — a 1px transparent border still fills with the card's own background (background-clip: border-box). */ border: 0; border-radius: 0; gap: var(--ds-space-3); padding: var(--ds-drawer-card-padding, var(--ds-space-6)); } ds-card::part(body) { flex: 1; min-height: 0; overflow-x: clip; overflow-y: auto; overscroll-behavior: contain; /* Inline padding + negative margin lets focus rings on full-width children paint outside the body's clip box. */ padding-inline: var(--ds-space-2); margin-inline: calc(var(--ds-space-2) * -1); scrollbar-width: none; mask-image: linear-gradient( to bottom, var(--ds-scroll-fade-top, rgb(0 0 0)) 0, rgb(0 0 0) var(--ds-space-6), rgb(0 0 0) calc(100% - var(--ds-space-6)), var(--ds-scroll-fade-bottom, rgb(0 0 0)) 100% ); animation: ds-scroll-fade linear; animation-timeline: scroll(self); } ds-card::part(body)::-webkit-scrollbar { display: none; } .title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); background: var(--ds-drawer-title-bg, transparent); color: var(--ds-drawer-title-fg, inherit); border-bottom: 1px solid var(--ds-drawer-title-border-color, transparent); padding: var(--ds-drawer-title-padding, 0); min-height: var(--ds-drawer-title-min-height, auto); } .title-text { margin: 0; flex: 1; /* Flex-centre the slotted content; otherwise the h2's line-height inflates the title-row height and content sits at the baseline. */ display: flex; align-items: center; line-height: 1; font-family: var(--ds-font-display); font-size: var(--ds-font-size-xl); font-weight: var(--ds-font-weight-semibold); letter-spacing: var(--ds-letter-spacing-display); } .title-text ::slotted(*) { font: inherit; margin: 0; letter-spacing: inherit; } .close-btn::part(button) { color: var(--ds-drawer-title-fg, inherit); } .footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ds-space-2); } `"
+          "default": "css` :host { display: contents; } dialog { padding: 0; border: 0; background: transparent; color: inherit; box-shadow: var(--ds-shadow-lg); overflow: visible; height: 100vh; height: 100dvh; max-height: 100%; /* allow-discrete lets display/overlay hold their open values for the slide-in / slide-out duration. */ transition: transform var(--ds-duration-slow) var(--ds-easing-standard), display var(--ds-duration-slow) allow-discrete, overlay var(--ds-duration-slow) allow-discrete; } /* Scope to [open] so closed dialogs stay display:none per UA. */ dialog[open] { display: flex; flex-direction: column; } :host([side='start']) dialog { margin: 0; margin-inline-end: auto; transform: translateX(-100%); } :host([side='end']) dialog { margin: 0; margin-inline-start: auto; transform: translateX(100%); } :host([side='start']) dialog[open], :host([side='end']) dialog[open] { transform: translateX(0); } @starting-style { :host([side='start']) dialog[open] { transform: translateX(-100%); } :host([side='end']) dialog[open] { transform: translateX(100%); } } :host([size='sm']) dialog { width: min(20rem, 90vw); } :host([size='md']) dialog { width: min(24rem, 90vw); } :host([size='lg']) dialog { width: min(28rem, 90vw); } dialog::backdrop { background: rgb(15 23 42 / 0.55); } ds-card { flex: 1; min-height: 0; min-width: 0; } ds-card::part(card) { /* Fill the dialog explicitly; percentage heights don't resolve reliably through ds-card's display:block host. */ height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; box-shadow: none; /* border: 0 not transparent — a 1px transparent border still fills with the card's own background (background-clip: border-box). */ border: 0; border-radius: 0; gap: var(--ds-space-3); padding: var(--ds-drawer-card-padding, var(--ds-space-6)); } /* The scrolling body (ds-card::part(body)) + its scroll fade come from the shared cardBodyScrollFadeStyles. */ .title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); background: var(--ds-drawer-title-bg, transparent); color: var(--ds-drawer-title-fg, inherit); border-bottom: 1px solid var(--ds-drawer-title-border-color, transparent); padding: var(--ds-drawer-title-padding, 0); min-height: var(--ds-drawer-title-min-height, auto); } .title-text { margin: 0; flex: 1; /* Flex-centre the slotted content; otherwise the h2's line-height inflates the title-row height and content sits at the baseline. */ display: flex; align-items: center; line-height: 1; font-family: var(--ds-font-display); font-size: var(--ds-font-size-xl); font-weight: var(--ds-font-weight-semibold); letter-spacing: var(--ds-letter-spacing-display); } .title-text ::slotted(*) { font: inherit; margin: 0; letter-spacing: inherit; } .close-btn::part(button) { color: var(--ds-drawer-title-fg, inherit); } .footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ds-space-2); } `"
         }
       ],
       "exports": [
@@ -12936,6 +13317,13 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "_scrollFade",
+              "privacy": "private",
+              "readonly": true,
+              "default": "new ScrollFadeController( this, () => (this.shadowRoot ?.querySelector('ds-card') ?.shadowRoot?.querySelector('[part~=\"body\"]') as HTMLElement | null) ?? null, )"
+            },
             {
               "kind": "method",
               "name": "show",

package/dist/atoms/segmented-control/define.d.ts

@@ -0,0 +1,7 @@
+import { DsSegmentedControl } from './segmented-control.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ds-segmented-control': DsSegmentedControl;
+    }
+}
+//# sourceMappingURL=define.d.ts.map

package/dist/atoms/segmented-control/define.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.d.ts","sourceRoot":"","sources":["../../../src/atoms/segmented-control/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAM5D,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,sBAAsB,EAAE,kBAAkB,CAAC;KAC5C;CACF"}

package/dist/atoms/segmented-control/define.js

@@ -0,0 +1,5 @@
+import { DsSegmentedControl } from './segmented-control.js';
+if (!customElements.get('ds-segmented-control')) {
+    customElements.define('ds-segmented-control', DsSegmentedControl);
+}
+//# sourceMappingURL=define.js.map

package/dist/atoms/segmented-control/define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/atoms/segmented-control/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,sBAAsB,CAAC,EAAE,CAAC;IAChD,cAAc,CAAC,MAAM,CAAC,sBAAsB,EAAE,kBAAkB,CAAC,CAAC;AACpE,CAAC"}

package/dist/atoms/segmented-control/index.d.ts

@@ -0,0 +1,2 @@
+export { DsSegmentedControl, type SegmentedControlOption } from './segmented-control.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/atoms/segmented-control/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/segmented-control/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,KAAK,sBAAsB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/atoms/segmented-control/index.js

@@ -0,0 +1,2 @@
+export { DsSegmentedControl } from './segmented-control.js';
+//# sourceMappingURL=index.js.map

package/dist/atoms/segmented-control/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/atoms/segmented-control/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAA+B,MAAM,wBAAwB,CAAC"}

package/dist/atoms/segmented-control/segmented-control.d.ts

@@ -0,0 +1,30 @@
+import { type TemplateResult } from 'lit';
+import { DsElement } from '@jsekulowicz/ds-core';
+import '../icon/define.js';
+export interface SegmentedControlOption {
+    value: string;
+    label: string;
+    /** Optional leading icon glyph name (the glyph must be imported by the host). */
+    icon?: string;
+    disabled?: boolean;
+}
+/**
+ * @tag ds-segmented-control
+ * @summary Single-select segmented control — a connected row of mutually
+ *   exclusive options, each with an optional leading icon. A token-styled,
+ *   inline alternative to a dropdown when there are only a few choices.
+ * @event ds-change - Fires when the selection changes. Detail: `{ value: string }`.
+ * @csspart group - The container that holds the segments.
+ * @csspart segment - Each option button.
+ */
+export declare class DsSegmentedControl extends DsElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    label: string;
+    value: string;
+    options: SegmentedControlOption[];
+    disabled: boolean;
+    connectedCallback(): void;
+    render(): TemplateResult;
+}
+//# sourceMappingURL=segmented-control.d.ts.map

package/dist/atoms/segmented-control/segmented-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../../src/atoms/segmented-control/segmented-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,OAAO,mBAAmB,CAAC;AAE3B,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,iFAAiF;IACjF,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,qBAAa,kBAAmB,SAAQ,SAAS;;IAC/C,OAAgB,MAAM,4BAAiD;IAE3D,KAAK,SAAM;IACX,KAAK,SAAM;IACI,OAAO,EAAE,sBAAsB,EAAE,CAAM;IACtB,QAAQ,UAAS;IAEpD,iBAAiB,IAAI,IAAI;IAiBzB,MAAM,IAAI,cAAc;CAyBlC"}

package/dist/atoms/segmented-control/segmented-control.js

@@ -0,0 +1,81 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { DsElement } from '@jsekulowicz/ds-core';
+import { segmentedControlStyles } from './segmented-control.styles.js';
+import '../icon/define.js';
+/**
+ * @tag ds-segmented-control
+ * @summary Single-select segmented control — a connected row of mutually
+ *   exclusive options, each with an optional leading icon. A token-styled,
+ *   inline alternative to a dropdown when there are only a few choices.
+ * @event ds-change - Fires when the selection changes. Detail: `{ value: string }`.
+ * @csspart group - The container that holds the segments.
+ * @csspart segment - Each option button.
+ */
+export class DsSegmentedControl extends DsElement {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this.value = '';
+        this.options = [];
+        this.disabled = false;
+    }
+    static { this.styles = [...DsElement.styles, segmentedControlStyles]; }
+    connectedCallback() {
+        super.connectedCallback();
+        if (!this.label) {
+            console.warn('<ds-segmented-control>: the `label` property is required for accessibility.');
+        }
+    }
+    #select(option) {
+        if (this.disabled || option.disabled || option.value === this.value) {
+            return;
+        }
+        this.value = option.value;
+        this.emit('ds-change', { detail: { value: option.value } });
+    }
+    render() {
+        return html `
+      <div class="group" role="radiogroup" aria-label=${this.label} part="group">
+        ${this.options.map(option => {
+            const selected = option.value === this.value;
+            return html `
+            <button
+              type="button"
+              class="segment"
+              part="segment"
+              role="radio"
+              aria-checked=${selected ? 'true' : 'false'}
+              ?disabled=${this.disabled || option.disabled}
+              @click=${() => this.#select(option)}
+            >
+              ${option.icon
+                ? html `<ds-icon name=${option.icon} size="md" part="icon"></ds-icon>`
+                : nothing}
+              <span class="label">${option.label}</span>
+            </button>
+          `;
+        })}
+      </div>
+    `;
+    }
+}
+__decorate([
+    property()
+], DsSegmentedControl.prototype, "label", void 0);
+__decorate([
+    property()
+], DsSegmentedControl.prototype, "value", void 0);
+__decorate([
+    property({ type: Array })
+], DsSegmentedControl.prototype, "options", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], DsSegmentedControl.prototype, "disabled", void 0);
+//# sourceMappingURL=segmented-control.js.map

package/dist/atoms/segmented-control/segmented-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.js","sourceRoot":"","sources":["../../../src/atoms/segmented-control/segmented-control.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,sBAAsB,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,mBAAmB,CAAC;AAU3B;;;;;;;;GAQG;AACH,MAAM,OAAO,kBAAmB,SAAQ,SAAS;IAAjD;;QAGc,UAAK,GAAG,EAAE,CAAC;QACX,UAAK,GAAG,EAAE,CAAC;QACI,YAAO,GAA6B,EAAE,CAAC;QACtB,aAAQ,GAAG,KAAK,CAAC;IA4C/D,CAAC;aAjDiB,WAAM,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,sBAAsB,CAAC,AAAhD,CAAiD;IAO9D,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,OAAO,CAAC,IAAI,CACV,6EAA6E,CAC9E,CAAC;QACJ,CAAC;IACH,CAAC;IAED,OAAO,CAAC,MAA8B;QACpC,IAAI,IAAI,CAAC,QAAQ,IAAI,MAAM,CAAC,QAAQ,IAAI,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;YACpE,OAAO;QACT,CAAC;QACD,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;IAC9D,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;wDACyC,IAAI,CAAC,KAAK;UACxD,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YAC1B,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;YAC7C,OAAO,IAAI,CAAA;;;;;;6BAMQ,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;0BAC9B,IAAI,CAAC,QAAQ,IAAI,MAAM,CAAC,QAAQ;uBACnC,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;;gBAEjC,MAAM,CAAC,IAAI;gBACX,CAAC,CAAC,IAAI,CAAA,iBAAiB,MAAM,CAAC,IAAI,mCAAmC;gBACrE,CAAC,CAAC,OAAO;oCACW,MAAM,CAAC,KAAK;;WAErC,CAAC;QACJ,CAAC,CAAC;;KAEL,CAAC;IACJ,CAAC;;AA9CW;IAAX,QAAQ,EAAE;iDAAY;AACX;IAAX,QAAQ,EAAE;iDAAY;AACI;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;mDAAwC;AACtB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDAAkB"}

package/dist/atoms/segmented-control/segmented-control.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const segmentedControlStyles: import("lit").CSSResult;
+//# sourceMappingURL=segmented-control.styles.d.ts.map