@ds-gn/ui 0.11.3 → 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/package.json

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