@ds-gn/ui 0.0.0-stage → 0.5.0

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

@@ -0,0 +1,1333 @@
+var __legacyDecorateClassTS = 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;
+};
+
+// components/FeatureTabs/src/FeatureTabs.ts
+import"../../Button/src/Button.js";
+import"../../CodeBlock/src/CodeBlock.js";
+import"../../Container/src/Container.js";
+import"../../Grid/src/Grid.js";
+import"../../HeadingBlock/src/HeadingBlock.js";
+import"../../Icon/src/Icon.js";
+
+// common/Base/Base.ts
+import { html, LitElement } from "lit";
+
+// common/helpers/define-element.ts
+var defineElement = (tag, ctor) => {
+  if (typeof customElements === "undefined")
+    return;
+  if (!customElements.get(tag))
+    customElements.define(tag, ctor);
+};
+
+// common/Base/Base.css
+import { css } from "lit";
+var styles = css`/* Base reset in @layer base ensures it comes before utilities in Tailwind v4 cascade
+   This prevents the reset from overriding component utility classes */
+@layer base {
+  :host {
+    display: block;
+    box-sizing: border-box;
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var(
+      --default-font-family,
+      var(--font-sans, ui-sans-serif, system-ui, sans-serif)
+    );
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+
+  :host h1,
+  :host h2,
+  :host h3,
+  :host h4,
+  :host h5,
+  :host h6 {
+    font-size: inherit;
+    font-weight: inherit;
+    margin: 0;
+    padding: 0;
+  }
+}
+`;
+var Base_default = styles;
+
+// common/Base/Base.ts
+class Base extends LitElement {
+  static styles = Base_default;
+  updateTheme(changedProperties, surface) {
+    if (changedProperties.has("surface")) {
+      if (surface) {
+        this.setAttribute("data-theme", surface);
+      } else {
+        this.removeAttribute("data-theme");
+      }
+    }
+  }
+  emit(name, detail, options = {}) {
+    return this.dispatchEvent(new CustomEvent(name, {
+      detail,
+      bubbles: true,
+      composed: true,
+      cancelable: options.cancelable ?? false
+    }));
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+defineElement("dsgn-base", Base);
+
+// common/helpers/motion.ts
+var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+var cachedMatchMedia;
+var cachedQuery = null;
+function prefersReducedMotion() {
+  const mm = typeof matchMedia === "function" ? matchMedia : undefined;
+  if (mm !== cachedMatchMedia) {
+    cachedMatchMedia = mm;
+    cachedQuery = mm ? mm(REDUCED_MOTION_QUERY) : null;
+  }
+  return cachedQuery?.matches ?? false;
+}
+
+// common/controllers/AutoRotateController.ts
+var TICK_MS = 32;
+
+class AutoRotateController {
+  get running() {
+    return this._timerId !== null;
+  }
+  constructor(host, duration = 6000, canRun = () => true) {
+    this._timerId = null;
+    this._startedAt = 0;
+    this._itemCount = 0;
+    this.activeIndex = 0;
+    this.progress = 0;
+    this.paused = false;
+    this.host = host;
+    this._duration = duration;
+    this._canRun = canRun;
+    host.addController(this);
+  }
+  hostDisconnected() {
+    this._stopTimer();
+  }
+  hostUpdated() {
+    this._reconcile();
+  }
+  setDuration(ms) {
+    this._duration = ms;
+    this._retime();
+  }
+  goTo(index) {
+    this.activeIndex = index;
+    this.progress = 0;
+    this.paused = true;
+    this._stopTimer();
+    this.host.requestUpdate();
+  }
+  pause() {
+    this.paused = true;
+    this._stopTimer();
+    this.host.requestUpdate();
+  }
+  resume(itemCount) {
+    this._itemCount = itemCount;
+    this.paused = false;
+    this.progress = 0;
+    this.host.requestUpdate();
+  }
+  next(itemCount) {
+    this._itemCount = itemCount;
+    this.activeIndex = (this.activeIndex + 1) % itemCount;
+    this._retime();
+    this.host.requestUpdate();
+  }
+  get _allowed() {
+    return !this.paused && this._itemCount > 0 && !prefersReducedMotion() && this._canRun();
+  }
+  _reconcile() {
+    if (this._allowed && !this.running) {
+      this._startTimer();
+    } else if (!this._allowed && this.running) {
+      this._stopTimer();
+    }
+  }
+  _retime() {
+    this.progress = 0;
+    this._stopTimer();
+    if (this._allowed) {
+      this._startTimer();
+    }
+  }
+  _startTimer() {
+    this._startedAt = Date.now();
+    this._timerId = setInterval(() => {
+      const elapsed = Date.now() - this._startedAt;
+      this.progress = Math.min(elapsed / this._duration, 1);
+      if (this.progress >= 1) {
+        this.activeIndex = (this.activeIndex + 1) % this._itemCount;
+        this.progress = 0;
+        this._startedAt = Date.now();
+      }
+      this.host.requestUpdate();
+    }, TICK_MS);
+  }
+  _stopTimer() {
+    if (this._timerId !== null) {
+      clearInterval(this._timerId);
+      this._timerId = null;
+    }
+  }
+}
+
+// common/helpers/enum-validator.ts
+var enumValidator = (propName, enumSet, candidateValue) => {
+  if (!enumSet.has(candidateValue)) {
+    throw new Error(`Invalid prop ${propName} of value ${candidateValue}. Expected one of: ${Array.from(enumSet).join(", ")}`);
+  }
+};
+
+// common/helpers/enum-creator.ts
+var enumCreator = (acceptableValues, propName, type, other = {}) => {
+  const acceptableValuesSet = new Set(acceptableValues);
+  return {
+    type,
+    hasChanged(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        enumValidator(propName, acceptableValuesSet, newValue);
+        return true;
+      }
+      return false;
+    },
+    ...other
+  };
+};
+
+// common/props/surface/surface.props.ts
+var surfaceValues = {
+  LIGHT: "light",
+  DARK: "dark"
+};
+var surfaceProps = enumCreator(Object.values(surfaceValues), "surface", String, { reflect: true });
+
+// ../../node_modules/.bun/lit-html@3.3.3/node_modules/lit-html/development/is-server.js
+var NODE_MODE = false;
+var isServer = NODE_MODE;
+
+// ../../node_modules/.bun/@lit-labs+observers@2.1.0/node_modules/@lit-labs/observers/development/intersection-controller.js
+class IntersectionController {
+  constructor(host, { target, config, callback, skipInitial }) {
+    this._targets = new Set;
+    this._skipInitial = false;
+    this._unobservedUpdate = false;
+    this._host = host;
+    if (target !== null) {
+      this._targets.add(target ?? host);
+    }
+    this._skipInitial = skipInitial ?? this._skipInitial;
+    this.callback = callback;
+    if (isServer) {
+      return;
+    }
+    if (!window.IntersectionObserver) {
+      console.warn(`IntersectionController error: browser does not support IntersectionObserver.`);
+      return;
+    }
+    this._observer = new IntersectionObserver((entries) => {
+      const unobservedUpdate = this._unobservedUpdate;
+      this._unobservedUpdate = false;
+      if (this._skipInitial && unobservedUpdate) {
+        return;
+      }
+      this.handleChanges(entries);
+      this._host.requestUpdate();
+    }, config);
+    host.addController(this);
+  }
+  handleChanges(entries) {
+    this.value = this.callback?.(entries, this._observer);
+  }
+  hostConnected() {
+    for (const target of this._targets) {
+      this.observe(target);
+    }
+  }
+  hostDisconnected() {
+    this.disconnect();
+  }
+  async hostUpdated() {
+    const pendingRecords = this._observer.takeRecords();
+    if (pendingRecords.length) {
+      this.handleChanges(pendingRecords);
+    }
+  }
+  observe(target) {
+    this._targets.add(target);
+    this._observer.observe(target);
+    this._unobservedUpdate = true;
+  }
+  unobserve(target) {
+    this._targets.delete(target);
+    this._observer.unobserve(target);
+  }
+  disconnect() {
+    this._observer.disconnect();
+  }
+}
+
+// components/FeatureTabs/src/FeatureTabs.ts
+import {
+  html as html2,
+  nothing,
+  svg
+} from "lit";
+import { property } from "lit/decorators.js";
+import { keyed } from "lit/directives/keyed.js";
+import { styleMap } from "lit/directives/style-map.js";
+import {
+  containerPaddingValues,
+  containerSizeValues
+} from "../../Container/src/Container.props.js";
+
+// components/FeatureTabs/src/FeatureTabs.css
+import { css as css2 } from "lit";
+var styles2 = css2`/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme {
+  :root, :host {
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+    monospace;
+    --color-orange-900: oklch(40.8% 0.123 38.172);
+    --color-white: #fff;
+    --spacing: 0.25rem;
+    --font-weight-semibold: 600;
+    --tracking-tight: -0.025em;
+    --radius-lg: 0.5rem;
+    --radius-xl: 0.75rem;
+    --radius-2xl: 1rem;
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
+    --color-accent: inherit;
+    --color-eyebrow: inherit;
+    --color-outline: inherit;
+    --color-outline-strong: inherit;
+    --color-pattern-dot: inherit;
+    --color-surface-default: inherit;
+    --color-surface-elevated: inherit;
+    --color-text-primary: inherit;
+    --color-text-secondary: inherit;
+    --color-text-tertiary: inherit;
+    --animate-fade-in-a: fade-in-a 0.3s ease-in;
+    --animate-fade-in-b: fade-in-b 0.3s ease-in;
+  }
+}
+@layer utilities {
+  .absolute {
+    position: absolute;
+  }
+  .relative {
+    position: relative;
+  }
+  .static {
+    position: static;
+  }
+  .top-0 {
+    top: calc(var(--spacing) * 0);
+  }
+  .bottom-0 {
+    bottom: calc(var(--spacing) * 0);
+  }
+  .left-0 {
+    left: calc(var(--spacing) * 0);
+  }
+  .col-1 {
+    grid-column: 1;
+  }
+  .col-2 {
+    grid-column: 2;
+  }
+  .m-0 {
+    margin: calc(var(--spacing) * 0);
+  }
+  .mt-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
+  .mt-3 {
+    margin-top: calc(var(--spacing) * 3);
+  }
+  .mt-4 {
+    margin-top: calc(var(--spacing) * 4);
+  }
+  .mt-5 {
+    margin-top: calc(var(--spacing) * 5);
+  }
+  .mt-8 {
+    margin-top: calc(var(--spacing) * 8);
+  }
+  .mb-0\\.5 {
+    margin-bottom: calc(var(--spacing) * 0.5);
+  }
+  .mb-6 {
+    margin-bottom: calc(var(--spacing) * 6);
+  }
+  .mb-14 {
+    margin-bottom: calc(var(--spacing) * 14);
+  }
+  .ml-auto {
+    margin-left: auto;
+  }
+  .block {
+    display: block;
+  }
+  .flex {
+    display: flex;
+  }
+  .grid {
+    display: grid;
+  }
+  .hidden {
+    display: none;
+  }
+  .inline {
+    display: inline;
+  }
+  .inline-block {
+    display: inline-block;
+  }
+  .inline-flex {
+    display: inline-flex;
+  }
+  .h-2 {
+    height: calc(var(--spacing) * 2);
+  }
+  .h-9 {
+    height: calc(var(--spacing) * 9);
+  }
+  .h-12 {
+    height: calc(var(--spacing) * 12);
+  }
+  .h-\\[3px\\] {
+    height: 3px;
+  }
+  .h-full {
+    height: 100%;
+  }
+  .w-2 {
+    width: calc(var(--spacing) * 2);
+  }
+  .w-6 {
+    width: calc(var(--spacing) * 6);
+  }
+  .w-9 {
+    width: calc(var(--spacing) * 9);
+  }
+  .w-12 {
+    width: calc(var(--spacing) * 12);
+  }
+  .w-\\[3px\\] {
+    width: 3px;
+  }
+  .w-full {
+    width: 100%;
+  }
+  .max-w-\\[560px\\] {
+    max-width: 560px;
+  }
+  .min-w-0 {
+    min-width: calc(var(--spacing) * 0);
+  }
+  .flex-1 {
+    flex: 1;
+  }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
+  .animate-fade-in-a {
+    animation: var(--animate-fade-in-a);
+  }
+  .animate-fade-in-b {
+    animation: var(--animate-fade-in-b);
+  }
+  .cursor-pointer {
+    cursor: pointer;
+  }
+  .list-none {
+    list-style-type: none;
+  }
+  .appearance-none {
+    appearance: none;
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .items-baseline {
+    align-items: baseline;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .items-stretch {
+    align-items: stretch;
+  }
+  .justify-center {
+    justify-content: center;
+  }
+  .gap-0\\.5 {
+    gap: calc(var(--spacing) * 0.5);
+  }
+  .gap-2 {
+    gap: calc(var(--spacing) * 2);
+  }
+  .gap-3 {
+    gap: calc(var(--spacing) * 3);
+  }
+  .gap-4 {
+    gap: calc(var(--spacing) * 4);
+  }
+  .gap-\\[10px\\] {
+    gap: 10px;
+  }
+  .gap-\\[14px\\] {
+    gap: 14px;
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .rounded-2xl {
+    border-radius: var(--radius-2xl);
+  }
+  .rounded-\\[10px\\] {
+    border-radius: 10px;
+  }
+  .rounded-full {
+    border-radius: calc(infinity * 1px);
+  }
+  .rounded-lg {
+    border-radius: var(--radius-lg);
+  }
+  .rounded-xl {
+    border-radius: var(--radius-xl);
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+  }
+  .border-outline {
+    border-color: var(--color-outline);
+  }
+  .border-outline-strong {
+    border-color: var(--color-outline-strong);
+  }
+  .border-transparent {
+    border-color: transparent;
+  }
+  .bg-\\[var\\(--color-orange-900\\)\\] {
+    background-color: var(--color-orange-900);
+  }
+  .bg-accent {
+    background-color: var(--color-accent);
+  }
+  .bg-outline {
+    background-color: var(--color-outline);
+  }
+  .bg-surface-default {
+    background-color: var(--color-surface-default);
+  }
+  .bg-surface-elevated {
+    background-color: var(--color-surface-elevated);
+  }
+  .bg-text-tertiary {
+    background-color: var(--color-text-tertiary);
+  }
+  .bg-transparent {
+    background-color: transparent;
+  }
+  .p-0 {
+    padding: calc(var(--spacing) * 0);
+  }
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
+  .px-\\[8px\\] {
+    padding-inline: 8px;
+  }
+  .py-\\[10px\\] {
+    padding-block: 10px;
+  }
+  .py-\\[18px\\] {
+    padding-block: 18px;
+  }
+  .pt-7 {
+    padding-top: calc(var(--spacing) * 7);
+  }
+  .pr-5 {
+    padding-right: calc(var(--spacing) * 5);
+  }
+  .pl-\\[22px\\] {
+    padding-left: 22px;
+  }
+  .text-left {
+    text-align: left;
+  }
+  .font-display {
+    font-family: var(--font-display);
+  }
+  .font-mono {
+    font-family: var(--font-mono);
+  }
+  .text-\\[11px\\] {
+    font-size: 11px;
+  }
+  .text-\\[12px\\] {
+    font-size: 12px;
+  }
+  .text-\\[13\\.5px\\] {
+    font-size: 13.5px;
+  }
+  .text-\\[17px\\] {
+    font-size: 17px;
+  }
+  .text-\\[18px\\] {
+    font-size: 18px;
+  }
+  .text-\\[24px\\] {
+    font-size: 24px;
+  }
+  .leading-\\[1\\.2\\] {
+    --tw-leading: 1.2;
+    line-height: 1.2;
+  }
+  .leading-\\[1\\.05\\] {
+    --tw-leading: 1.05;
+    line-height: 1.05;
+  }
+  .leading-\\[1\\.6\\] {
+    --tw-leading: 1.6;
+    line-height: 1.6;
+  }
+  .leading-\\[1\\.45\\] {
+    --tw-leading: 1.45;
+    line-height: 1.45;
+  }
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .tracking-\\[-0\\.01em\\] {
+    --tw-tracking: -0.01em;
+    letter-spacing: -0.01em;
+  }
+  .tracking-\\[0\\.06em\\] {
+    --tw-tracking: 0.06em;
+    letter-spacing: 0.06em;
+  }
+  .tracking-tight {
+    --tw-tracking: var(--tracking-tight);
+    letter-spacing: var(--tracking-tight);
+  }
+  .text-accent {
+    color: var(--color-accent);
+  }
+  .text-eyebrow {
+    color: var(--color-eyebrow);
+  }
+  .text-inherit {
+    color: inherit;
+  }
+  .text-text-primary {
+    color: var(--color-text-primary);
+  }
+  .text-text-secondary {
+    color: var(--color-text-secondary);
+  }
+  .text-text-tertiary {
+    color: var(--color-text-tertiary);
+  }
+  .text-white {
+    color: var(--color-white);
+  }
+  .uppercase {
+    text-transform: uppercase;
+  }
+  .shadow {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .shadow-none {
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .transition-all {
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-colors {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .duration-150 {
+    --tw-duration: 150ms;
+    transition-duration: 150ms;
+  }
+  .duration-200 {
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+  }
+  .duration-\\[250ms\\] {
+    --tw-duration: 250ms;
+    transition-duration: 250ms;
+  }
+  .outline-none {
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  .sm\\:flex-row {
+    @media (width >= 40rem) {
+      flex-direction: row;
+    }
+  }
+  .sm\\:items-center {
+    @media (width >= 40rem) {
+      align-items: center;
+    }
+  }
+  .sm\\:p-9 {
+    @media (width >= 40rem) {
+      padding: calc(var(--spacing) * 9);
+    }
+  }
+  .sm\\:text-\\[36px\\] {
+    @media (width >= 40rem) {
+      font-size: 36px;
+    }
+  }
+  .lg\\:mt-auto {
+    @media (width >= 64rem) {
+      margin-top: auto;
+    }
+  }
+  .lg\\:block {
+    @media (width >= 64rem) {
+      display: block;
+    }
+  }
+  .lg\\:flex {
+    @media (width >= 64rem) {
+      display: flex;
+    }
+  }
+  .lg\\:hidden {
+    @media (width >= 64rem) {
+      display: none;
+    }
+  }
+  .lg\\:h-full {
+    @media (width >= 64rem) {
+      height: 100%;
+    }
+  }
+  .lg\\:flex-col {
+    @media (width >= 64rem) {
+      flex-direction: column;
+    }
+  }
+}
+@property --dsgn-border-sweep-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
+@keyframes fade-in-a {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fade-in-b {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-border-style: solid;
+      --tw-leading: initial;
+      --tw-font-weight: initial;
+      --tw-tracking: initial;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+      --tw-duration: initial;
+      --dsgn-border-sweep-angle: 0deg;
+    }
+  }
+}
+`;
+var FeatureTabs_default = styles2;
+
+// components/FeatureTabs/src/FeatureTabs.props.ts
+var DEFAULT_FEATURES = [
+  {
+    id: "orchestrator",
+    eyebrow: "CLI",
+    title: "Orchestrator",
+    short: "Scaffold, generate, and build from one CLI.",
+    desc: "Three commands cover the full lifecycle. Adapters handle language, styling, and tooling so you never touch the wiring.",
+    code: "ds-gn create design-system",
+    metric: "3 commands",
+    icon: "terminal",
+    ctaLabel: "Join the waitlist",
+    ctaHref: "#hero"
+  },
+  {
+    id: "authoring",
+    eyebrow: "Engine",
+    title: "Authoring brain",
+    short: "A canonical core composed by patch-based adapters.",
+    desc: "One canonical core template plus patch-based adapters composes your project. Change language, styling, or tooling without forking — just swap the adapter.",
+    code: "adapters/styling/tailwind",
+    metric: "1 core",
+    icon: "brain",
+    ctaLabel: "Join the waitlist",
+    ctaHref: "#hero"
+  },
+  {
+    id: "compiler",
+    eyebrow: "Build",
+    title: "Compiler",
+    short: "Tree-shakable ESM, types, and CSS — minified.",
+    desc: "Bundles components to tree-shakable ESM with types, compiles Tailwind or concatenates CSS, minified for prod. One step. No config tax.",
+    code: "bun build:ui",
+    metric: "46kb gzip",
+    icon: "cpu",
+    ctaLabel: "Join the waitlist",
+    ctaHref: "#hero"
+  },
+  {
+    id: "tokens",
+    eyebrow: "Tokens",
+    title: "Typed tokens",
+    short: "Semantic tokens, emitted to Tailwind, CSS, and shadow DOM.",
+    desc: "Semantic color, typography, and breakpoint tokens emit Tailwind @theme, public CSS variables, and shadow-DOM variables — type-checked across the chain.",
+    code: "--text-primary-on-light",
+    metric: "169 tokens",
+    icon: "palette",
+    ctaLabel: "Join the waitlist",
+    ctaHref: "#hero"
+  },
+  {
+    id: "adapters",
+    eyebrow: "Adapters",
+    title: "Stack-agnostic",
+    short: "Language, styling, and tooling — pick at compose time.",
+    desc: "Adapters express language, styling, and tooling as patches over the core — pick TypeScript or JS and Tailwind, Sass, or CSS without forking. The output is Lit web components that run in React, Vue, Svelte, or vanilla.",
+    code: "adapters/framework/lit",
+    metric: "7 adapters",
+    icon: "plug",
+    ctaLabel: "Join the waitlist",
+    ctaHref: "#hero"
+  }
+];
+var DEFAULT_DURATION = 6000;
+var DEFAULT_CODE_PATH = "~/dsgn-system";
+var DEFAULT_ROTATING_LABEL = "auto-rotating";
+var DEFAULT_PAUSED_LABEL = "paused — click to resume";
+var DEFAULT_PAUSE_ARIA_LABEL = "Pause auto-rotate";
+var DEFAULT_RESUME_ARIA_LABEL = "Resume auto-rotate";
+var DEFAULT_TABS_ARIA_LABEL = "Features";
+
+// ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if (typeof e == "string" || typeof e == "number")
+    n += e;
+  else if (typeof e == "object")
+    if (Array.isArray(e)) {
+      var o = e.length;
+      for (t = 0;t < o; t++)
+        e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+    } else
+      for (f in e)
+        e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length;f < o; f++)
+    (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
+// components/FeatureTabs/src/FeatureTabs.styles.ts
+var headerClassNames = () => clsx_default("mb-14");
+var tabsColClassNames = () => clsx_default("hidden", "lg:flex", "lg:flex-col");
+var tabListClassNames = () => clsx_default("list-none", "m-0", "p-0", "flex", "flex-col", "gap-4", "flex-1");
+var tabItemClassNames = () => clsx_default("block");
+var tabBtnClassNames = (active) => clsx_default("w-full", "text-left", "block", "cursor-pointer", "relative", "overflow-hidden", "rounded-xl", "py-[18px]", "pl-[22px]", "pr-5", "border", "transition-all", "duration-200", "text-inherit", "appearance-none", active ? ["bg-surface-elevated", "border-outline-strong"] : ["bg-surface-default", "border-transparent"]);
+var railClassNames = () => clsx_default("absolute", "left-0", "top-0", "bottom-0", "w-[3px]", "bg-outline");
+var railFillClassNames = () => clsx_default("absolute", "left-0", "top-0", "w-[3px]", "bg-accent");
+var tabInnerClassNames = () => clsx_default("flex", "items-center", "gap-[14px]");
+var iconBadgeClassNames = (active, large = false) => clsx_default("flex", "items-center", "justify-center", "shrink-0", "transition-all", "duration-200", large ? ["w-12", "h-12", "rounded-[10px]"] : ["w-9", "h-9", "border", "rounded-lg"], active ? ["bg-accent", "text-white", "border-transparent"] : ["bg-surface-elevated", "text-text-secondary", "border-outline"]);
+var tabMetaClassNames = () => clsx_default("min-w-0", "flex-1", "flex", "flex-col");
+var tabMetaRowClassNames = () => clsx_default("flex", "items-baseline", "gap-[10px]", "mb-0.5");
+var tabEyebrowClassNames = (active) => clsx_default("font-mono", "text-[11px]", "tracking-[0.06em]", "uppercase", active ? "text-eyebrow" : "text-text-tertiary");
+var tabIndexClassNames = () => clsx_default("font-mono", "text-[11px]", "text-text-tertiary", "ml-auto");
+var tabTitleClassNames = () => clsx_default("font-display", "text-[18px]", "font-semibold", "text-text-primary", "tracking-[-0.01em]", "leading-[1.2]");
+var tabShortClassNames = () => clsx_default("text-[13.5px]", "text-text-secondary", "mt-1", "leading-[1.45]");
+var controlClassNames = () => clsx_default("mt-3", "pl-[22px]");
+var controlBtnClassNames = () => clsx_default("bg-transparent", "border-0", "cursor-pointer", "text-text-tertiary", "font-mono", "text-[11px]", "tracking-[0.06em]", "uppercase", "p-0", "inline-flex", "items-center", "gap-2", "appearance-none");
+var controlDotClassNames = (rotating) => clsx_default("inline-block", "w-2", "h-2", "rounded-full", "shrink-0", rotating ? "bg-accent" : "bg-text-tertiary");
+var detailClassNames = () => clsx_default("bg-surface-default", "border", "border-outline", "rounded-2xl", "p-4", "sm:p-9", "relative", "overflow-hidden", "flex", "flex-col", "lg:h-full");
+var PATTERN_MASK = "radial-gradient(ellipse at 80% 0%, #000 30%, transparent 70%)";
+var patternOverlayStyles = () => ({
+  position: "absolute",
+  inset: "0",
+  opacity: "0.25",
+  pointerEvents: "none",
+  backgroundImage: "radial-gradient(circle at 1px 1px, var(--color-pattern-dot) 1px, transparent 0)",
+  backgroundSize: "24px 24px",
+  maskImage: PATTERN_MASK,
+  WebkitMaskImage: PATTERN_MASK
+});
+var detailContentClassNames = (idx) => clsx_default("relative", "flex", "flex-col", "flex-1", idx % 2 === 0 ? "animate-fade-in-a" : "animate-fade-in-b");
+var detailHeaderClassNames = () => clsx_default("flex", "items-center", "gap-3", "mb-6");
+var detailEyebrowClassNames = () => clsx_default("font-mono", "text-[11px]", "tracking-[0.06em]", "uppercase", "text-text-tertiary");
+var detailCounterClassNames = () => clsx_default("ml-auto", "font-mono", "text-[12px]", "text-text-tertiary");
+var detailTitleClassNames = () => clsx_default("font-display", "text-[24px]", "sm:text-[36px]", "font-semibold", "tracking-tight", "text-text-primary", "leading-[1.05]");
+var detailDescClassNames = () => clsx_default("text-[17px]", "text-text-secondary", "leading-[1.6]", "mt-4", "max-w-[560px]");
+var codeWrapClassNames = () => clsx_default("mt-8");
+var ctaRowClassNames = () => clsx_default("flex", "flex-col", "sm:flex-row", "gap-[10px]", "lg:mt-auto", "pt-7", "items-stretch", "sm:items-center");
+var mobileProgressClassNames = () => clsx_default("block", "lg:hidden", "h-[3px]", "bg-outline", "rounded-full", "mt-4", "overflow-hidden");
+var mobileProgressFillClassNames = () => clsx_default("h-full", "bg-accent", "rounded-full");
+var mobileNavClassNames = () => clsx_default("flex", "lg:hidden", "items-center", "justify-center", "gap-2", "mt-5");
+var dotsClassNames = () => clsx_default("flex", "items-center", "gap-0.5", "justify-center");
+var dotPipClassNames = () => clsx_default("appearance-none", "border-0", "outline-none", "shadow-none", "py-[10px]", "px-[8px]", "bg-transparent", "cursor-pointer", "flex", "items-center", "justify-center");
+var dotPipInnerClassNames = (active) => clsx_default("block", "rounded-full", "h-2", "transition-all", "duration-[250ms]", active ? ["w-6", "bg-accent"] : ["w-2", "bg-[var(--color-orange-900)]"]);
+var playPauseClassNames = () => clsx_default("appearance-none", "border-0", "outline-none", "bg-transparent", "cursor-pointer", "text-accent", "py-[10px]", "px-[8px]", "flex", "items-center", "justify-center", "rounded-full", "transition-colors", "duration-150");
+
+// components/FeatureTabs/src/FeatureTabs.ts
+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"/>`,
+  cpu: svg`<rect x="5" y="5" width="14" height="14" rx="2"/><rect x="9" y="9" width="6" height="6"/><line x1="9" y1="2" x2="9" y2="5"/><line x1="15" y1="2" x2="15" y2="5"/><line x1="9" y1="19" x2="9" y2="22"/><line x1="15" y1="19" x2="15" y2="22"/><line x1="2" y1="9" x2="5" y2="9"/><line x1="2" y1="15" x2="5" y2="15"/><line x1="19" y1="9" x2="22" y2="9"/><line x1="19" y1="15" x2="22" y2="15"/>`,
+  palette: svg`<circle cx="12" cy="12" r="9"/><circle cx="7.5" cy="10.5" r="1" fill="currentColor"/><circle cx="12" cy="7.5" r="1" fill="currentColor"/><circle cx="16.5" cy="10.5" r="1" fill="currentColor"/><path d="M12 21a3 3 0 0 1-3-3c0-1.5 1-2 1-3a2 2 0 0 0-2-2"/>`,
+  plug: svg`<path d="M9 2v6"/><path d="M15 2v6"/><path d="M7 8h10v3a5 5 0 0 1-5 5 5 5 0 0 1-5-5z"/><path d="M12 16v6"/>`,
+  shield: svg`<path d="M12 3l8 3v5c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6z"/><path d="M9 12l2 2 4-4"/>`
+};
+var nextTabIndex = (key, index, lastIndex) => {
+  switch (key) {
+    case "ArrowDown":
+    case "ArrowRight":
+      return index === lastIndex ? 0 : index + 1;
+    case "ArrowUp":
+    case "ArrowLeft":
+      return index === 0 ? lastIndex : index - 1;
+    case "Home":
+      return 0;
+    case "End":
+      return lastIndex;
+    default:
+      return;
+  }
+};
+
+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.surface = surfaceValues.DARK;
+    this.features = DEFAULT_FEATURES;
+    this.duration = DEFAULT_DURATION;
+    this.codePath = DEFAULT_CODE_PATH;
+    this.rotatingLabel = DEFAULT_ROTATING_LABEL;
+    this.pausedLabel = DEFAULT_PAUSED_LABEL;
+    this.pauseAriaLabel = DEFAULT_PAUSE_ARIA_LABEL;
+    this.resumeAriaLabel = DEFAULT_RESUME_ARIA_LABEL;
+    this.tabsAriaLabel = DEFAULT_TABS_ARIA_LABEL;
+    this._rotate = new AutoRotateController(this, DEFAULT_DURATION, () => this._inView.value === true);
+  }
+  firstUpdated() {
+    this._rotate.resume(this.features.length);
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this.updateTheme(changedProperties, this.surface);
+    if (changedProperties.has("duration")) {
+      this._rotate.setDuration(this.duration);
+    }
+  }
+  _handleTabClick(index) {
+    this._rotate.goTo(index);
+  }
+  _handleTabKeyDown(event, index) {
+    const nextIndex = nextTabIndex(event.key, index, this.features.length - 1);
+    if (nextIndex === undefined)
+      return;
+    event.preventDefault();
+    this._rotate.goTo(nextIndex);
+    const tabs = event.currentTarget ? event.currentTarget.closest('[role="tablist"]')?.querySelectorAll('[role="tab"]') : undefined;
+    tabs?.[nextIndex]?.focus();
+  }
+  _handlePauseResume() {
+    if (this._rotate.paused) {
+      this._rotate.resume(this.features.length);
+    } else {
+      this._rotate.pause();
+    }
+  }
+  _renderIcon(name, size = "md") {
+    return html2`<dsgn-icon
+      .icon=${FEATURE_TAB_ICONS[name]}
+      size=${size}
+    ></dsgn-icon>`;
+  }
+  _renderCtas(feature) {
+    const hasPrimary = Boolean(feature.ctaLabel && feature.ctaHref);
+    const hasSecondary = Boolean(feature.ctaSecondaryLabel && feature.ctaSecondaryHref);
+    if (!hasPrimary && !hasSecondary)
+      return nothing;
+    return html2`<div class="${ctaRowClassNames()}">
+      ${hasPrimary ? html2`<dsgn-button
+            appearance="solid"
+            surface="dark"
+            href=${feature.ctaHref ?? ""}
+            >${feature.ctaLabel}</dsgn-button
+          >` : nothing}
+      ${hasSecondary ? html2`<dsgn-button
+            appearance="ghost"
+            surface="dark"
+            href=${feature.ctaSecondaryHref ?? ""}
+            >${feature.ctaSecondaryLabel}</dsgn-button
+          >` : nothing}
+    </div>`;
+  }
+  _renderDetailPanel(idx, feature, progress, total, paused, features, slot) {
+    const isDesktopPanel = Boolean(slot);
+    return html2`
+      <div
+        class="${detailClassNames()}"
+        role=${isDesktopPanel ? "tabpanel" : nothing}
+        id=${isDesktopPanel ? "feature-tabs-panel" : nothing}
+        aria-labelledby=${isDesktopPanel ? `feature-tab-${idx}` : nothing}
+        slot=${slot ?? ""}
+      >
+        <div aria-hidden="true" style=${styleMap(patternOverlayStyles())}></div>
+
+        ${keyed(idx, html2`
+            <div class="${detailContentClassNames(idx)}">
+              <div class="${detailHeaderClassNames()}">
+                <span class="${iconBadgeClassNames(true, true)}">
+                  ${this._renderIcon(feature.icon, "lg")}
+                </span>
+                <span class="${detailEyebrowClassNames()}"
+                  >— ${feature.eyebrow}</span
+                >
+                <span class="${detailCounterClassNames()}">
+                  ${String(idx + 1).padStart(2, "0")} /
+                  ${String(total).padStart(2, "0")}
+                </span>
+              </div>
+
+              <h3 class="${detailTitleClassNames()}">${feature.title}</h3>
+              <p class="${detailDescClassNames()}">${feature.desc}</p>
+
+              <div class="${codeWrapClassNames()}">
+                <dsgn-code-block
+                  command="${feature.code}"
+                  output="${feature.metric}"
+                  path=${this.codePath}
+                  surface="dark"
+                ></dsgn-code-block>
+              </div>
+
+              ${this._renderCtas(feature)}
+            </div>
+          `)}
+
+        <div class="${mobileProgressClassNames()}">
+          <div
+            class="${mobileProgressFillClassNames()}"
+            style=${styleMap({ width: `${progress * 100}%` })}
+          ></div>
+        </div>
+
+        <div class="${mobileNavClassNames()}">
+          <div class="${dotsClassNames()}">
+            ${features.map((feat, i) => html2`
+                <button
+                  class="${dotPipClassNames()}"
+                  aria-label="${feat.title}"
+                  @click=${() => this._handleTabClick(i)}
+                >
+                  <span class="${dotPipInnerClassNames(i === idx)}"></span>
+                </button>
+              `)}
+          </div>
+          <button
+            class="${playPauseClassNames()}"
+            @click=${this._handlePauseResume}
+            aria-label="${paused ? this.resumeAriaLabel : this.pauseAriaLabel}"
+          >
+            ${paused ? svg`<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>` : svg`<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>`}
+          </button>
+        </div>
+      </div>
+    `;
+  }
+  _renderTabList(features, idx, progress, paused, slot) {
+    return html2`
+      <div class="${tabsColClassNames()}" slot=${slot ?? ""}>
+        <ul
+          class="${tabListClassNames()}"
+          role="tablist"
+          aria-label="${this.tabsAriaLabel}"
+          aria-orientation="vertical"
+        >
+          ${features.map((feat, i) => html2`
+              <li class="${tabItemClassNames()}" role="presentation">
+                <button
+                  class="${tabBtnClassNames(i === idx)}"
+                  id="feature-tab-${i}"
+                  role="tab"
+                  aria-selected="${i === idx}"
+                  aria-controls="feature-tabs-panel"
+                  tabindex=${i === idx ? "0" : "-1"}
+                  @click=${() => this._handleTabClick(i)}
+                  @keydown=${(event) => this._handleTabKeyDown(event, i)}
+                >
+                  <span class="${railClassNames()}"></span>
+                  ${i === idx ? html2`<span
+                        class="${railFillClassNames()}"
+                        style=${styleMap({ height: `${progress * 100}%` })}
+                      ></span>` : ""}
+                  <span class="${tabInnerClassNames()}">
+                    <span class="${iconBadgeClassNames(i === idx)}">
+                      ${this._renderIcon(feat.icon, "sm")}
+                    </span>
+                    <span class="${tabMetaClassNames()}">
+                      <span class="${tabMetaRowClassNames()}">
+                        <span class="${tabEyebrowClassNames(i === idx)}"
+                          >— ${feat.eyebrow}</span
+                        >
+                        <span class="${tabIndexClassNames()}">0${i + 1}</span>
+                      </span>
+                      <span class="${tabTitleClassNames()}">${feat.title}</span>
+                      <span class="${tabShortClassNames()}">${feat.short}</span>
+                    </span>
+                  </span>
+                </button>
+              </li>
+            `)}
+        </ul>
+        <div class="${controlClassNames()}">
+          <button
+            class="${controlBtnClassNames()}"
+            @click=${this._handlePauseResume}
+            aria-label="${paused ? this.resumeAriaLabel : this.pauseAriaLabel}"
+          >
+            <span class="${controlDotClassNames(!paused)}"></span>
+            ${paused ? this.pausedLabel : `${this.rotatingLabel} · ${Math.round(this.duration / 1000)}s`}
+          </button>
+        </div>
+      </div>
+    `;
+  }
+  render() {
+    const features = this.features;
+    const idx = this._rotate.activeIndex;
+    const progress = this._rotate.progress;
+    const paused = this._rotate.paused;
+    const activeFeature = features[idx] ?? features[0];
+    const total = features.length;
+    return html2`
+      <section>
+        <dsgn-container
+          size="${containerSizeValues.XXL}"
+          padding-x="${containerPaddingValues.MD}"
+          padding-y="${containerPaddingValues.MD}"
+        >
+          <div class="${headerClassNames()}">
+            <slot name="header"></slot>
+          </div>
+
+          <!-- Mobile: detail panel only, no grid -->
+          <div class="lg:hidden">
+            ${this._renderDetailPanel(idx, activeFeature, progress, total, paused, features)}
+          </div>
+
+          <!-- Desktop: full grid with tabs + detail -->
+          <div class="hidden lg:block">
+            <dsgn-grid cols="7-5" gap="xl" ?reverse=${true}>
+              ${this._renderTabList(features, idx, progress, paused, "col-2")}
+              ${this._renderDetailPanel(idx, activeFeature, progress, total, paused, features, "col-1")}
+            </dsgn-grid>
+          </div>
+        </dsgn-container>
+      </section>
+    `;
+  }
+}
+__legacyDecorateClassTS([
+  property({ ...surfaceProps })
+], FeatureTabs.prototype, "surface", undefined);
+__legacyDecorateClassTS([
+  property({ attribute: false })
+], FeatureTabs.prototype, "features", undefined);
+__legacyDecorateClassTS([
+  property({ type: Number })
+], FeatureTabs.prototype, "duration", undefined);
+__legacyDecorateClassTS([
+  property({ type: String, attribute: "code-path" })
+], FeatureTabs.prototype, "codePath", undefined);
+__legacyDecorateClassTS([
+  property({ type: String, attribute: "rotating-label" })
+], FeatureTabs.prototype, "rotatingLabel", undefined);
+__legacyDecorateClassTS([
+  property({ type: String, attribute: "paused-label" })
+], FeatureTabs.prototype, "pausedLabel", undefined);
+__legacyDecorateClassTS([
+  property({ type: String, attribute: "pause-aria-label" })
+], FeatureTabs.prototype, "pauseAriaLabel", undefined);
+__legacyDecorateClassTS([
+  property({ type: String, attribute: "resume-aria-label" })
+], FeatureTabs.prototype, "resumeAriaLabel", undefined);
+__legacyDecorateClassTS([
+  property({ type: String, attribute: "tabs-aria-label" })
+], FeatureTabs.prototype, "tabsAriaLabel", undefined);
+defineElement("dsgn-feature-tabs", FeatureTabs);
+export {
+  FeatureTabs
+};