@ds-gn/ui 0.11.2 → 0.12.0

package/custom-elements.json

@@ -2200,9 +2200,17 @@
             },
             {
               "kind": "field",
-              "name": "_inView",
+              "name": "_observedRotationThreshold",
+              "type": {
+                "text": "number"
+              },
               "privacy": "private",
-              "default": "new IntersectionController<boolean>(this, { config: { threshold: 0 }, callback: (entries) => entries[entries.length - 1]?.isIntersecting ?? false, })"
+              "default": "0"
+            },
+            {
+              "kind": "field",
+              "name": "_view",
+              "privacy": "private"
             },
             {
               "kind": "field",
@@ -2211,7 +2219,7 @@
                 "text": "AutoRotateController"
               },
               "privacy": "private",
-              "default": "new AutoRotateController( this, DEFAULT_DURATION, () => this._inView.value === true, )"
+              "default": "new AutoRotateController(this, DEFAULT_DURATION, () => this._rotationVisible(), )"
             },
             {
               "kind": "field",
@@ -2263,6 +2271,16 @@
               "default": "DEFAULT_DURATION",
               "attribute": "duration"
             },
+            {
+              "kind": "field",
+              "name": "rotationThreshold",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Visible fraction required for auto-rotation, from 0 to 1.",
+              "attribute": "rotation-threshold"
+            },
             {
               "kind": "field",
               "name": "codePath",
@@ -2333,6 +2351,37 @@
               "attribute": "motion",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "_rotationThreshold",
+              "privacy": "private",
+              "description": "`rotationThreshold` clamped to 0–1; NaN falls back to 0.",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "_rotationVisible",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_observeVisibility",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "rotationThreshold",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_syncVisibilityObserver",
+              "privacy": "private",
+              "description": "Observer thresholds are fixed at construction, so a new rotation\nthreshold swaps the observer. The last report carries over, so a running\ntimer keeps running until the new observer reports."
+            },
             {
               "kind": "method",
               "name": "_updateMotion",
@@ -2552,6 +2601,15 @@
               },
               "default": "DEFAULT_DURATION"
             },
+            {
+              "name": "rotation-threshold",
+              "fieldName": "rotationThreshold",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "description": "Visible fraction required for auto-rotation, from 0 to 1."
+            },
             {
               "name": "code-path",
               "fieldName": "codePath",

package/dist/components/FeatureTabs/src/FeatureTabs.d.ts

@@ -18,7 +18,8 @@ export declare class FeatureTabs extends Base {
     paddingTop?: SectionSpaceType;
     /** Space below the section. Unset follows the inherited section space. */
     paddingBottom?: SectionSpaceType;
-    private _inView;
+    private _observedRotationThreshold;
+    private _view;
     private _rotate;
     private _motion;
     /** The feature whose detail last faded in; the fade replays when it changes. */
@@ -28,6 +29,8 @@ export declare class FeatureTabs extends Base {
     surface: SurfaceType;
     features: FeatureTabData[];
     duration: number;
+    /** Visible fraction required for auto-rotation, from 0 to 1. */
+    rotationThreshold: number;
     /** Working-directory path shown in each tab's code block. */
     codePath: string;
     /** Leading text of the auto-rotate status (the `· Ns` is derived from duration). */
@@ -48,7 +51,18 @@ export declare class FeatureTabs extends Base {
      */
     motion: MotionType;
     constructor();
+    /** `rotationThreshold` clamped to 0–1; NaN falls back to 0. */
+    private get _rotationThreshold();
+    private _rotationVisible;
+    private _observeVisibility;
+    /**
+     * Observer thresholds are fixed at construction, so a new rotation
+     * threshold swaps the observer. The last report carries over, so a running
+     * timer keeps running until the new observer reports.
+     */
+    private _syncVisibilityObserver;
     firstUpdated(): void;
+    willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
     /**
      * Decide the motion from the first visibility report: a section already
      * on screen stays static; one off screen holds its parts hidden (from

package/dist/components/FeatureTabs/src/FeatureTabs.js

@@ -292,6 +292,7 @@ class IntersectionController {
 // components/FeatureTabs/src/FeatureTabs.ts
 import {
   html as html2,
+  isServer as isServer2,
   nothing,
   svg
 } from "lit";
@@ -345,9 +346,15 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
   }
 }
 @layer utilities {
+  .visible {
+    visibility: visible;
+  }
   .absolute {
     position: absolute;
   }
+  .fixed {
+    position: fixed;
+  }
   .relative {
     position: relative;
   }
@@ -1022,6 +1029,29 @@ var HEADING_STAGGER = 20;
 var HEADING_MAX_SPREAD = 500;
 var HEADING_RISE = 4;
 var MOTION_OVERLAP = 160;
+var VISIBILITY_TOLERANCE = 0.001;
+var VISIBILITY_STEP = 0.01;
+var VISIBILITY_STEPS = Array.from({ length: 1 / VISIBILITY_STEP + 1 }, (_, i) => i * VISIBILITY_STEP);
+var readVisibility = (entry) => {
+  if (!entry?.isIntersecting) {
+    return { intersecting: false, fraction: 0, slack: 0 };
+  }
+  const section = entry.boundingClientRect.height;
+  const viewport = entry.rootBounds?.height ?? 0;
+  if (viewport === 0 || section <= viewport) {
+    return {
+      intersecting: true,
+      fraction: entry.intersectionRatio,
+      slack: VISIBILITY_TOLERANCE
+    };
+  }
+  const scale = section / viewport;
+  return {
+    intersecting: true,
+    fraction: Math.min(1, entry.intersectionRatio * scale),
+    slack: VISIBILITY_STEP * scale + VISIBILITY_TOLERANCE
+  };
+};
 var FEATURE_TAB_ICONS = {
   terminal: svg`<polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/>`,
   brain: svg`<path d="M9 4.5a2.5 2.5 0 0 0-2.5 2.5v.5a2.5 2.5 0 0 0-2 4 2.5 2.5 0 0 0 2 4v.5A2.5 2.5 0 0 0 9 18.5a2.5 2.5 0 0 0 3-2.5V6a2.5 2.5 0 0 0-3-1.5z"/><path d="M15 4.5A2.5 2.5 0 0 1 17.5 7v.5a2.5 2.5 0 0 1 2 4 2.5 2.5 0 0 1-2 4v.5A2.5 2.5 0 0 1 15 18.5a2.5 2.5 0 0 1-3-2.5V6a2.5 2.5 0 0 1 3-1.5z"/>`,
@@ -1052,14 +1082,13 @@ class FeatureTabs extends Base {
   static styles = [Base.styles, FeatureTabs_default];
   constructor() {
     super();
-    this._inView = new IntersectionController(this, {
-      config: { threshold: 0 },
-      callback: (entries) => entries[entries.length - 1]?.isIntersecting ?? false
-    });
+    this._observedRotationThreshold = 0;
+    this._view = this._observeVisibility(0);
     this._motion = new MotionController(this);
     this.surface = surfaceValues.DARK;
     this.features = DEFAULT_FEATURES;
     this.duration = DEFAULT_DURATION;
+    this.rotationThreshold = 0;
     this.codePath = DEFAULT_CODE_PATH;
     this.rotatingLabel = DEFAULT_ROTATING_LABEL;
     this.pausedLabel = DEFAULT_PAUSED_LABEL;
@@ -1067,13 +1096,48 @@ class FeatureTabs extends Base {
     this.resumeAriaLabel = DEFAULT_RESUME_ARIA_LABEL;
     this.tabsAriaLabel = DEFAULT_TABS_ARIA_LABEL;
     this.motion = motionValues.OFF;
-    this._rotate = new AutoRotateController(this, DEFAULT_DURATION, () => this._inView.value === true);
+    this._rotate = new AutoRotateController(this, DEFAULT_DURATION, () => this._rotationVisible());
+  }
+  get _rotationThreshold() {
+    return Number.isNaN(this.rotationThreshold) ? 0 : Math.min(1, Math.max(0, this.rotationThreshold));
+  }
+  _rotationVisible() {
+    const view = this._view.value;
+    return view?.intersecting === true && view.fraction >= this._rotationThreshold - view.slack;
+  }
+  _observeVisibility(rotationThreshold) {
+    const threshold = rotationThreshold > 0 ? [
+      ...VISIBILITY_STEPS,
+      Math.max(0, rotationThreshold - VISIBILITY_TOLERANCE)
+    ] : 0;
+    return new IntersectionController(this, {
+      config: { threshold },
+      callback: (entries) => readVisibility(entries[entries.length - 1])
+    });
+  }
+  _syncVisibilityObserver() {
+    const threshold = this._rotationThreshold;
+    if (threshold === this._observedRotationThreshold)
+      return;
+    this._observedRotationThreshold = threshold;
+    const previous = this._view;
+    this._view = this._observeVisibility(threshold);
+    this._view.value = previous.value;
+    this.removeController(previous);
+    if (!isServer2)
+      previous.hostDisconnected();
   }
   firstUpdated() {
     this._rotate.resume(this.features.length);
   }
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("rotationThreshold")) {
+      this._syncVisibilityObserver();
+    }
+  }
   _updateMotion() {
-    const inView = this._inView.value;
+    const inView = this._view.value?.intersecting;
     if (inView === undefined)
       return;
     if (this._motionState === undefined) {
@@ -1370,6 +1434,9 @@ __legacyDecorateClassTS([
 __legacyDecorateClassTS([
   property({ type: Number })
 ], FeatureTabs.prototype, "duration", undefined);
+__legacyDecorateClassTS([
+  property({ type: Number, attribute: "rotation-threshold" })
+], FeatureTabs.prototype, "rotationThreshold", undefined);
 __legacyDecorateClassTS([
   property({ type: String, attribute: "code-path" })
 ], FeatureTabs.prototype, "codePath", undefined);

package/dist/components/Modal/src/Modal.js

@@ -1160,7 +1160,7 @@ class Modal extends Base {
           <div class=${bodyClasses()}>
             <slot></slot>
           </div>
-          <footer class=${footerClasses(this._hasFooter)}>
+          <footer role="presentation" class=${footerClasses(this._hasFooter)}>
             <slot name="footer" @slotchange=${this._handleSlotChange}></slot>
           </footer>
         </div>

package/dist/components/Toaster/src/Toaster.js

@@ -227,6 +227,8 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
     monospace;
     --spacing: 0.25rem;
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
     --font-weight-semibold: 600;
@@ -235,8 +237,11 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --duration-quick: var(--dsgn-src-duration-quick, 180ms);
     --ease-standard: var(--dsgn-src-ease-standard, cubic-bezier(0.2, 0, 0, 1));
+    --color-button-inline-text: inherit;
+    --color-button-inline-text-hover: inherit;
     --color-error: inherit;
     --color-error-strong: inherit;
+    --color-focus: inherit;
     --color-info: inherit;
     --color-outline-strong: inherit;
     --color-popover-bg: inherit;
@@ -346,6 +351,9 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
   .inline {
     display: inline;
   }
+  .inline-flex {
+    display: inline-flex;
+  }
   .size-5 {
     width: calc(var(--spacing) * 5);
     height: calc(var(--spacing) * 5);
@@ -472,9 +480,15 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
+  .px-1 {
+    padding-inline: calc(var(--spacing) * 1);
+  }
   .px-2\\.5 {
     padding-inline: calc(var(--spacing) * 2.5);
   }
+  .py-0\\.5 {
+    padding-block: calc(var(--spacing) * 0.5);
+  }
   .py-2\\.5 {
     padding-block: calc(var(--spacing) * 2.5);
   }
@@ -500,6 +514,10 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
   }
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
   .text-\\[11px\\] {
     font-size: 11px;
   }
@@ -519,6 +537,12 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
     --tw-tracking: 0.02em;
     letter-spacing: 0.02em;
   }
+  .whitespace-pre-line {
+    white-space: pre-line;
+  }
+  .text-button-inline-text {
+    color: var(--color-button-inline-text);
+  }
   .text-error-strong {
     color: var(--color-error-strong);
   }
@@ -537,6 +561,18 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
   .text-warning-strong {
     color: var(--color-warning-strong);
   }
+  .underline {
+    text-decoration-line: underline;
+  }
+  .decoration-transparent {
+    text-decoration-color: transparent;
+  }
+  .decoration-2 {
+    text-decoration-thickness: 2px;
+  }
+  .underline-offset-4 {
+    text-underline-offset: 4px;
+  }
   .shadow-popover {
     --tw-shadow: inherit;
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -571,6 +607,42 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
       opacity: 0%;
     }
   }
+  .hover\\:text-button-inline-text-hover {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-button-inline-text-hover);
+      }
+    }
+  }
+  .hover\\:decoration-current {
+    &:hover {
+      @media (hover: hover) {
+        text-decoration-color: currentcolor;
+      }
+    }
+  }
+  .focus-visible\\:outline {
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 1px;
+    }
+  }
+  .focus-visible\\:outline-2 {
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+  }
+  .focus-visible\\:outline-offset-2 {
+    &:focus-visible {
+      outline-offset: 2px;
+    }
+  }
+  .focus-visible\\:outline-focus {
+    &:focus-visible {
+      outline-color: var(--color-focus);
+    }
+  }
   .data-\\[behind\\]\\:overflow-hidden {
     &[data-behind] {
       overflow: hidden;
@@ -751,6 +823,11 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
   syntax: "*";
   inherits: false;
 }
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
 @property --tw-content {
   syntax: "*";
   initial-value: "";
@@ -784,6 +861,7 @@ var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.co
       --tw-ring-offset-shadow: 0 0 #0000;
       --tw-duration: initial;
       --tw-ease: initial;
+      --tw-outline-style: solid;
       --tw-content: "";
       --dsgn-border-sweep-angle: 0deg;
     }
@@ -859,8 +937,9 @@ var iconColorClasses = {
 var iconClasses = (variant, compact) => clsx_default("size-5", "shrink-0", "fill-none", "stroke-current", "stroke-[1.75]", !compact && "mt-px", iconColorClasses[variant], behindHidden);
 var bodyClasses = () => clsx_default("flex-1", "min-w-0", "flex", "flex-col", "gap-0.5", behindHidden);
 var titleClasses = () => clsx_default("text-sm", "leading-5", "font-semibold", "text-text-primary");
-var descriptionClasses = () => clsx_default("text-sm", "leading-5", "text-text-secondary");
+var descriptionClasses = () => clsx_default("text-sm", "leading-5", "text-text-secondary", "whitespace-pre-line");
 var linksClasses = () => clsx_default("flex", "flex-wrap", "gap-x-4", "gap-y-1", "mt-1");
+var linkClasses = () => clsx_default(touchTargetClasses(), "inline-flex", "items-center", "px-1", "py-0.5", "text-xs", "font-semibold", "text-button-inline-text", "hover:text-button-inline-text-hover", "underline", "decoration-2", "underline-offset-4", "decoration-transparent", "hover:decoration-current", "focus-visible:outline", "focus-visible:outline-2", "focus-visible:outline-offset-2", "focus-visible:outline-focus");
 var actionsClasses = (inline) => clsx_default("flex", "flex-wrap", "gap-2", inline ? ["shrink-0", behindHidden] : "mt-2.5");
 var touchTargetClasses = () => clsx_default("relative", "pointer-coarse:after:content-['']", "pointer-coarse:after:absolute", "pointer-coarse:after:-inset-1.5");
 var dismissClasses = (compact) => clsx_default(touchTargetClasses(), "shrink-0", !compact && "-mt-1.5", behindHidden);
@@ -1305,7 +1384,7 @@ class Toaster extends Base {
     if (queued > 0) {
       parts.push(this.queuedLabel ? this.queuedLabel.replaceAll(QUEUED_COUNT_TOKEN, String(queued)) : `+${queued}`);
     }
-    if (this._paused && this.pausedLabel && this._stack().length > 0) {
+    if (this._paused && this.pausedLabel && this._stack().some((record) => record.phase === "shown" && record.duration > 0)) {
       parts.push(this.pausedLabel);
     }
     return parts.join(" · ");
@@ -1440,12 +1519,20 @@ class Toaster extends Base {
     </div>`;
   }
   _linkTemplate(link) {
+    if (link.href)
+      return html2`<a
+        class=${linkClasses()}
+        href=${link.href}
+        target=${link.target ?? nothing}
+        rel=${link.target === "_blank" ? "noopener" : nothing}
+        @click=${() => link.onClick?.()}
+        >${link.label}</a
+      >`;
     return html2`<dsgn-button
       class=${touchTargetClasses()}
       .surface=${this.surface}
       .size=${buttonSizeValues.SM}
       .appearance=${buttonAppearanceValues.INLINE}
-      .href=${link.href ?? ""}
       @click=${() => link.onClick?.()}
       >${link.label}</dsgn-button
     >`;

package/dist/components/Toaster/src/Toaster.styles.d.ts

@@ -37,8 +37,11 @@ export declare const toastClasses: (compact: boolean) => string;
 export declare const iconClasses: (variant: ToastVariantType, compact: boolean) => string;
 export declare const bodyClasses: () => string;
 export declare const titleClasses: () => string;
+/** `pre-line` keeps paragraph breaks authored as newlines. */
 export declare const descriptionClasses: () => string;
 export declare const linksClasses: () => string;
+/** Native links keep touch-target hits on the anchor and preserve navigation. */
+export declare const linkClasses: () => string;
 /** The action row: 10px under the text, or inline in a title-only toast. */
 export declare const actionsClasses: (inline: boolean) => string;
 /**

package/dist/components/Toaster/src/toast.d.ts

@@ -46,6 +46,8 @@ export interface ToastAction {
 export interface ToastLink {
     label: string;
     href?: string;
+    /** With `href`, `_blank` opens a new tab (with `rel="noopener"`). */
+    target?: '_blank' | '_self';
     onClick?: () => void;
 }
 export interface ToastOptions {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-gn/ui",
-  "version": "0.11.2",
+  "version": "0.12.0",
   "description": "UI components for the DS-GN Design System",
   "type": "module",
   "exports": {