@ds-gn/ui 0.0.0-stage → 0.5.0

package/dist/components/Heading/src/Heading.js

@@ -0,0 +1,755 @@
+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;
+};
+
+// ../../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/Heading/src/Heading.ts
+import { html as html2 } from "lit";
+import { property } from "lit/decorators.js";
+import { choose } from "lit/directives/choose.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/WordCycleController.ts
+var DEFAULT_INTERVAL = 1000;
+
+class WordCycleController {
+  constructor(host, words = [], interval = DEFAULT_INTERVAL, canRun = () => true) {
+    this._words = [];
+    this._interval = DEFAULT_INTERVAL;
+    this._currentIndex = 0;
+    this._timerId = null;
+    this._cycles = 1;
+    this._completedCycles = 0;
+    this._done = false;
+    this.host = host;
+    this._words = words;
+    this._interval = interval;
+    this._canRun = canRun;
+    host.addController(this);
+  }
+  hostDisconnected() {
+    this._stopCycling();
+  }
+  hostUpdated() {
+    this._reconcile();
+  }
+  get _allowed() {
+    return this._words.length > 1 && !this._done && !prefersReducedMotion() && this._canRun();
+  }
+  _reconcile() {
+    if (this._allowed && this._timerId === null) {
+      this._startCycling();
+    } else if (!this._allowed && this._timerId !== null) {
+      this._stopCycling();
+    }
+  }
+  _startCycling() {
+    this._timerId = setInterval(() => {
+      const nextIndex = (this._currentIndex + 1) % this._words.length;
+      if (nextIndex === 0) {
+        this._completedCycles++;
+        if (this._cycles > 0 && this._completedCycles >= this._cycles) {
+          this._done = true;
+          this._stopCycling();
+          this.host.requestUpdate();
+          return;
+        }
+      }
+      this._currentIndex = nextIndex;
+      this.host.requestUpdate();
+    }, this._interval);
+  }
+  _stopCycling() {
+    if (this._timerId !== null) {
+      clearInterval(this._timerId);
+      this._timerId = null;
+    }
+  }
+  _restart() {
+    this._stopCycling();
+    if (this._allowed) {
+      this._startCycling();
+    }
+  }
+  get currentWord() {
+    if (this._words.length === 0)
+      return;
+    return this._words[this._currentIndex];
+  }
+  get currentIndex() {
+    return this._currentIndex;
+  }
+  setWords(words) {
+    this._words = words;
+    this._currentIndex = 0;
+    this._completedCycles = 0;
+    this._done = false;
+    this._restart();
+  }
+  setInterval(ms) {
+    this._interval = ms;
+    this._completedCycles = 0;
+    this._done = false;
+    this._restart();
+  }
+  setCycles(cycles) {
+    this._cycles = cycles;
+  }
+}
+
+// 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 });
+
+// components/Heading/src/Heading.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 {
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
+    --text-lg: 1.125rem;
+    --text-lg--line-height: calc(1.75 / 1.125);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
+    --text-3xl: 1.875rem;
+    --text-3xl--line-height: calc(2.25 / 1.875);
+    --text-4xl: 2.25rem;
+    --text-4xl--line-height: calc(2.5 / 2.25);
+    --text-5xl: 3rem;
+    --text-5xl--line-height: 1;
+    --text-6xl: 3.75rem;
+    --text-6xl--line-height: 1;
+    --text-7xl: 4.5rem;
+    --text-7xl--line-height: 1;
+    --text-8xl: 6rem;
+    --text-8xl--line-height: 1;
+    --text-9xl: 8rem;
+    --text-9xl--line-height: 1;
+    --font-weight-normal: 400;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --font-weight-extrabold: 800;
+    --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
+    --color-accent-text: inherit;
+    --color-text-primary: 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 {
+  .static {
+    position: static;
+  }
+  .animate-fade-in-a {
+    animation: var(--animate-fade-in-a);
+  }
+  .animate-fade-in-b {
+    animation: var(--animate-fade-in-b);
+  }
+  .font-display {
+    font-family: var(--font-display);
+  }
+  .text-2xl {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
+  .text-3xl {
+    font-size: var(--text-3xl);
+    line-height: var(--tw-leading, var(--text-3xl--line-height));
+  }
+  .text-4xl {
+    font-size: var(--text-4xl);
+    line-height: var(--tw-leading, var(--text-4xl--line-height));
+  }
+  .text-5xl {
+    font-size: var(--text-5xl);
+    line-height: var(--tw-leading, var(--text-5xl--line-height));
+  }
+  .text-base {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
+  .text-lg {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+  .font-extrabold {
+    --tw-font-weight: var(--font-weight-extrabold);
+    font-weight: var(--font-weight-extrabold);
+  }
+  .font-normal {
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+  }
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .text-accent-text {
+    color: var(--color-accent-text);
+  }
+  .text-text-primary {
+    color: var(--color-text-primary);
+  }
+  .sm\\:text-2xl {
+    @media (width >= 40rem) {
+      font-size: var(--text-2xl);
+      line-height: var(--tw-leading, var(--text-2xl--line-height));
+    }
+  }
+  .sm\\:text-3xl {
+    @media (width >= 40rem) {
+      font-size: var(--text-3xl);
+      line-height: var(--tw-leading, var(--text-3xl--line-height));
+    }
+  }
+  .sm\\:text-4xl {
+    @media (width >= 40rem) {
+      font-size: var(--text-4xl);
+      line-height: var(--tw-leading, var(--text-4xl--line-height));
+    }
+  }
+  .sm\\:text-5xl {
+    @media (width >= 40rem) {
+      font-size: var(--text-5xl);
+      line-height: var(--tw-leading, var(--text-5xl--line-height));
+    }
+  }
+  .sm\\:text-lg {
+    @media (width >= 40rem) {
+      font-size: var(--text-lg);
+      line-height: var(--tw-leading, var(--text-lg--line-height));
+    }
+  }
+  .sm\\:text-xl {
+    @media (width >= 40rem) {
+      font-size: var(--text-xl);
+      line-height: var(--tw-leading, var(--text-xl--line-height));
+    }
+  }
+  .md\\:text-2xl {
+    @media (width >= 48rem) {
+      font-size: var(--text-2xl);
+      line-height: var(--tw-leading, var(--text-2xl--line-height));
+    }
+  }
+  .md\\:text-3xl {
+    @media (width >= 48rem) {
+      font-size: var(--text-3xl);
+      line-height: var(--tw-leading, var(--text-3xl--line-height));
+    }
+  }
+  .md\\:text-4xl {
+    @media (width >= 48rem) {
+      font-size: var(--text-4xl);
+      line-height: var(--tw-leading, var(--text-4xl--line-height));
+    }
+  }
+  .md\\:text-5xl {
+    @media (width >= 48rem) {
+      font-size: var(--text-5xl);
+      line-height: var(--tw-leading, var(--text-5xl--line-height));
+    }
+  }
+  .md\\:text-6xl {
+    @media (width >= 48rem) {
+      font-size: var(--text-6xl);
+      line-height: var(--tw-leading, var(--text-6xl--line-height));
+    }
+  }
+  .md\\:text-xl {
+    @media (width >= 48rem) {
+      font-size: var(--text-xl);
+      line-height: var(--tw-leading, var(--text-xl--line-height));
+    }
+  }
+  .lg\\:text-2xl {
+    @media (width >= 64rem) {
+      font-size: var(--text-2xl);
+      line-height: var(--tw-leading, var(--text-2xl--line-height));
+    }
+  }
+  .lg\\:text-3xl {
+    @media (width >= 64rem) {
+      font-size: var(--text-3xl);
+      line-height: var(--tw-leading, var(--text-3xl--line-height));
+    }
+  }
+  .lg\\:text-4xl {
+    @media (width >= 64rem) {
+      font-size: var(--text-4xl);
+      line-height: var(--tw-leading, var(--text-4xl--line-height));
+    }
+  }
+  .lg\\:text-5xl {
+    @media (width >= 64rem) {
+      font-size: var(--text-5xl);
+      line-height: var(--tw-leading, var(--text-5xl--line-height));
+    }
+  }
+  .lg\\:text-6xl {
+    @media (width >= 64rem) {
+      font-size: var(--text-6xl);
+      line-height: var(--tw-leading, var(--text-6xl--line-height));
+    }
+  }
+  .lg\\:text-7xl {
+    @media (width >= 64rem) {
+      font-size: var(--text-7xl);
+      line-height: var(--tw-leading, var(--text-7xl--line-height));
+    }
+  }
+  .xl\\:text-3xl {
+    @media (width >= 80rem) {
+      font-size: var(--text-3xl);
+      line-height: var(--tw-leading, var(--text-3xl--line-height));
+    }
+  }
+  .xl\\:text-4xl {
+    @media (width >= 80rem) {
+      font-size: var(--text-4xl);
+      line-height: var(--tw-leading, var(--text-4xl--line-height));
+    }
+  }
+  .xl\\:text-5xl {
+    @media (width >= 80rem) {
+      font-size: var(--text-5xl);
+      line-height: var(--tw-leading, var(--text-5xl--line-height));
+    }
+  }
+  .xl\\:text-6xl {
+    @media (width >= 80rem) {
+      font-size: var(--text-6xl);
+      line-height: var(--tw-leading, var(--text-6xl--line-height));
+    }
+  }
+  .xl\\:text-7xl {
+    @media (width >= 80rem) {
+      font-size: var(--text-7xl);
+      line-height: var(--tw-leading, var(--text-7xl--line-height));
+    }
+  }
+  .xl\\:text-8xl {
+    @media (width >= 80rem) {
+      font-size: var(--text-8xl);
+      line-height: var(--tw-leading, var(--text-8xl--line-height));
+    }
+  }
+  .\\32 xl\\:text-4xl {
+    @media (width >= 96rem) {
+      font-size: var(--text-4xl);
+      line-height: var(--tw-leading, var(--text-4xl--line-height));
+    }
+  }
+  .\\32 xl\\:text-5xl {
+    @media (width >= 96rem) {
+      font-size: var(--text-5xl);
+      line-height: var(--tw-leading, var(--text-5xl--line-height));
+    }
+  }
+  .\\32 xl\\:text-6xl {
+    @media (width >= 96rem) {
+      font-size: var(--text-6xl);
+      line-height: var(--tw-leading, var(--text-6xl--line-height));
+    }
+  }
+  .\\32 xl\\:text-7xl {
+    @media (width >= 96rem) {
+      font-size: var(--text-7xl);
+      line-height: var(--tw-leading, var(--text-7xl--line-height));
+    }
+  }
+  .\\32 xl\\:text-8xl {
+    @media (width >= 96rem) {
+      font-size: var(--text-8xl);
+      line-height: var(--tw-leading, var(--text-8xl--line-height));
+    }
+  }
+  .\\32 xl\\:text-9xl {
+    @media (width >= 96rem) {
+      font-size: var(--text-9xl);
+      line-height: var(--tw-leading, var(--text-9xl--line-height));
+    }
+  }
+}
+@property --dsgn-border-sweep-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+@property --tw-font-weight {
+  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-font-weight: initial;
+      --dsgn-border-sweep-angle: 0deg;
+    }
+  }
+}
+`;
+var Heading_default = styles2;
+
+// components/Heading/src/Heading.props.ts
+var headingSizeValues = {
+  H1: "h1",
+  H2: "h2",
+  H3: "h3",
+  H4: "h4",
+  H5: "h5",
+  H6: "h6",
+  HERO: "hero"
+};
+var headingSizeProps = enumCreator(Object.values(headingSizeValues), "heading-size", String, { reflect: true, attribute: "heading-size" });
+var headingWeightValues = {
+  NORMAL: "normal",
+  SEMIBOLD: "semibold",
+  BOLD: "bold",
+  EXTRABOLD: "extrabold"
+};
+var headingWeightProps = enumCreator(Object.values(headingWeightValues), "heading-weight", String, { reflect: true, attribute: "heading-weight" });
+
+// ../../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/Heading/src/Heading.styles.ts
+var classNames = (surface, size, weight) => {
+  return clsx_default({
+    "text-5xl md:text-6xl lg:text-7xl xl:text-8xl 2xl:text-9xl": size === "hero",
+    "text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl": size === "h1",
+    "text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl 2xl:text-8xl": size === "h2",
+    "text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl 2xl:text-7xl": size === "h3",
+    "text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl 2xl:text-6xl": size === "h4",
+    "text-lg sm:text-xl md:text-2xl lg:text-3xl xl:text-4xl 2xl:text-5xl": size === "h5",
+    "text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl 2xl:text-4xl": size === "h6",
+    "font-normal": weight === "normal",
+    "font-semibold": weight === "semibold",
+    "font-bold": weight === "bold",
+    "font-extrabold": weight === "extrabold",
+    "font-display": true,
+    "text-text-primary": true
+  });
+};
+var animatedWordClassNames = (currentIndex) => {
+  return clsx_default("text-accent-text", currentIndex % 2 === 0 ? "animate-fade-in-a" : "animate-fade-in-b");
+};
+
+// components/Heading/src/Heading.ts
+class Heading extends Base {
+  constructor() {
+    super(...arguments);
+    this._inView = new IntersectionController(this, {
+      config: { threshold: 0 },
+      callback: (entries) => entries[entries.length - 1]?.isIntersecting ?? false
+    });
+    this.wordCycleController = new WordCycleController(this, undefined, undefined, () => this._inView.value === true);
+    this.surface = surfaceValues.LIGHT;
+    this.headingSize = headingSizeValues.H1;
+    this.headingWeight = headingWeightValues.NORMAL;
+    this.wordCycles = 1;
+  }
+  static styles = [Base.styles, Heading_default];
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("words")) {
+      this.wordCycleController.setWords(this.words ?? []);
+    }
+    if (changedProperties.has("wordInterval") && this.wordInterval !== undefined) {
+      this.wordCycleController.setInterval(this.wordInterval);
+    }
+    if (changedProperties.has("wordCycles")) {
+      this.wordCycleController.setCycles(this.wordCycles);
+    }
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this.updateTheme(changedProperties, this.surface);
+  }
+  renderContent() {
+    const word = this.wordCycleController.currentWord;
+    if (word) {
+      return html2`<slot></slot>
+        <span
+          class="${animatedWordClassNames(this.wordCycleController.currentIndex)}"
+          >${word}</span
+        >`;
+    }
+    return html2`<slot></slot>`;
+  }
+  render() {
+    const content = this.renderContent();
+    return html2`
+      <div
+        class="${classNames(this.surface, this.headingSize, this.headingWeight)}"
+      >
+        ${choose(this.headingSize, [
+      ["h1", () => html2`<h1>${content}</h1>`],
+      ["h2", () => html2`<h2>${content}</h2>`],
+      ["h3", () => html2`<h3>${content}</h3>`],
+      ["h4", () => html2`<h4>${content}</h4>`],
+      ["h5", () => html2`<h5>${content}</h5>`],
+      ["h6", () => html2`<h6>${content}</h6>`],
+      ["hero", () => html2`<h1>${content}</h1>`]
+    ], () => html2`<h1>${content}</h1>`)}
+      </div>
+    `;
+  }
+}
+__legacyDecorateClassTS([
+  property({ ...surfaceProps })
+], Heading.prototype, "surface", undefined);
+__legacyDecorateClassTS([
+  property({ ...headingSizeProps })
+], Heading.prototype, "headingSize", undefined);
+__legacyDecorateClassTS([
+  property({ ...headingWeightProps })
+], Heading.prototype, "headingWeight", undefined);
+__legacyDecorateClassTS([
+  property({ type: Array })
+], Heading.prototype, "words", undefined);
+__legacyDecorateClassTS([
+  property({ type: Number, attribute: "word-interval" })
+], Heading.prototype, "wordInterval", undefined);
+__legacyDecorateClassTS([
+  property({ type: Number, attribute: "word-cycles" })
+], Heading.prototype, "wordCycles", undefined);
+defineElement("dsgn-heading", Heading);
+export {
+  Heading
+};