@ds-gn/ui 0.0.0-stage → 0.5.0

package/dist/components/Button/src/Button.js

@@ -0,0 +1,1102 @@
+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/Button/src/Button.ts
+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/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/Button/src/Button.ts
+import {
+  html as html2,
+  nothing
+} from "lit";
+import { property, state } from "lit/decorators.js";
+
+// components/Icon/src/icons/loader.ts
+import { svg } from "lit";
+var loader = svg`<path d="M12 2v4" /><path d="m16.2 7.8 2.9-2.9" /><path d="M18 12h4" /><path d="m16.2 16.2 2.9 2.9" /><path d="M12 18v4" /><path d="m4.9 19.1 2.9-2.9" /><path d="M2 12h4" /><path d="m4.9 4.9 2.9 2.9" />`;
+// components/Button/src/Button.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 {
+    --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);
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
+    --animate-spin: spin 1s linear infinite;
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --radius-button: var(--dsgn-src-radius-button, calc(infinity * 1px));
+    --color-button-ghost-bg: inherit;
+    --color-button-ghost-bg-hover: inherit;
+    --color-button-ghost-text: inherit;
+    --color-button-ghost-text-hover: inherit;
+    --color-button-gradient-text: inherit;
+    --color-button-inline-text: inherit;
+    --color-button-inline-text-hover: inherit;
+    --color-button-link-text: inherit;
+    --color-button-link-text-hover: inherit;
+    --color-button-mono-outline-bg: inherit;
+    --color-button-mono-outline-bg-hover: inherit;
+    --color-button-mono-outline-outline: inherit;
+    --color-button-mono-outline-outline-hover: inherit;
+    --color-button-mono-outline-text: inherit;
+    --color-button-mono-outline-text-hover: inherit;
+    --color-button-mono-solid-bg: inherit;
+    --color-button-mono-solid-bg-hover: inherit;
+    --color-button-mono-solid-text: inherit;
+    --color-button-outline-bg: inherit;
+    --color-button-outline-bg-hover: inherit;
+    --color-button-outline-outline: inherit;
+    --color-button-outline-outline-hover: inherit;
+    --color-button-outline-text: inherit;
+    --color-button-outline-text-hover: inherit;
+    --color-button-solid-bg: inherit;
+    --color-button-solid-bg-hover: inherit;
+    --color-button-solid-text: inherit;
+    --color-focus: inherit;
+    --color-gradient-accent-bg: inherit;
+    --color-gradient-accent-bg-hover: inherit;
+  }
+}
+@layer utilities {
+  .pointer-events-none {
+    pointer-events: none;
+  }
+  .visible {
+    visibility: visible;
+  }
+  .relative {
+    position: relative;
+  }
+  .static {
+    position: static;
+  }
+  .hidden {
+    display: none;
+  }
+  .inline {
+    display: inline;
+  }
+  .inline-flex {
+    display: inline-flex;
+  }
+  .h-8 {
+    height: calc(var(--spacing) * 8);
+  }
+  .h-10 {
+    height: calc(var(--spacing) * 10);
+  }
+  .h-12 {
+    height: calc(var(--spacing) * 12);
+  }
+  .w-8 {
+    width: calc(var(--spacing) * 8);
+  }
+  .w-10 {
+    width: calc(var(--spacing) * 10);
+  }
+  .w-12 {
+    width: calc(var(--spacing) * 12);
+  }
+  .shrink-0 {
+    flex-shrink: 0;
+  }
+  .cursor-not-allowed {
+    cursor: not-allowed;
+  }
+  .cursor-pointer {
+    cursor: pointer;
+  }
+  .cursor-progress {
+    cursor: progress;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .justify-center {
+    justify-content: center;
+  }
+  .gap-2 {
+    gap: calc(var(--spacing) * 2);
+  }
+  .rounded-\\[var\\(--radius-button\\,calc\\(infinity\\*1px\\)\\)\\] {
+    border-radius: var(--radius-button,calc(infinity * 1px));
+  }
+  .border-2 {
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+  }
+  .border-none {
+    --tw-border-style: none;
+    border-style: none;
+  }
+  .border-solid {
+    --tw-border-style: solid;
+    border-style: solid;
+  }
+  .border-button-mono-outline-outline {
+    border-color: var(--color-button-mono-outline-outline);
+  }
+  .border-button-outline-outline {
+    border-color: var(--color-button-outline-outline);
+  }
+  .bg-button-ghost-bg {
+    background-color: var(--color-button-ghost-bg);
+  }
+  .bg-button-mono-outline-bg {
+    background-color: var(--color-button-mono-outline-bg);
+  }
+  .bg-button-mono-solid-bg {
+    background-color: var(--color-button-mono-solid-bg);
+  }
+  .bg-button-outline-bg {
+    background-color: var(--color-button-outline-bg);
+  }
+  .bg-button-solid-bg {
+    background-color: var(--color-button-solid-bg);
+  }
+  .bg-transparent {
+    background-color: transparent;
+  }
+  .\\[background-image\\:var\\(--color-gradient-accent-bg\\)\\] {
+    background-image: var(--color-gradient-accent-bg);
+  }
+  .p-1\\.5 {
+    padding: calc(var(--spacing) * 1.5);
+  }
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
+  .p-3 {
+    padding: calc(var(--spacing) * 3);
+  }
+  .px-1 {
+    padding-inline: calc(var(--spacing) * 1);
+  }
+  .px-3 {
+    padding-inline: calc(var(--spacing) * 3);
+  }
+  .px-3\\.5 {
+    padding-inline: calc(var(--spacing) * 3.5);
+  }
+  .px-5 {
+    padding-inline: calc(var(--spacing) * 5);
+  }
+  .py-0\\.5 {
+    padding-block: calc(var(--spacing) * 0.5);
+  }
+  .py-1\\.5 {
+    padding-block: calc(var(--spacing) * 1.5);
+  }
+  .py-2\\.5 {
+    padding-block: calc(var(--spacing) * 2.5);
+  }
+  .py-3 {
+    padding-block: calc(var(--spacing) * 3);
+  }
+  .text-base {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
+  .text-sm {
+    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));
+  }
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+  .font-medium {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+  .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);
+  }
+  .whitespace-nowrap {
+    white-space: nowrap;
+  }
+  .text-button-ghost-text {
+    color: var(--color-button-ghost-text);
+  }
+  .text-button-gradient-text {
+    color: var(--color-button-gradient-text);
+  }
+  .text-button-inline-text {
+    color: var(--color-button-inline-text);
+  }
+  .text-button-link-text {
+    color: var(--color-button-link-text);
+  }
+  .text-button-mono-outline-text {
+    color: var(--color-button-mono-outline-text);
+  }
+  .text-button-mono-solid-text {
+    color: var(--color-button-mono-solid-text);
+  }
+  .text-button-outline-text {
+    color: var(--color-button-outline-text);
+  }
+  .text-button-solid-text {
+    color: var(--color-button-solid-text);
+  }
+  .no-underline {
+    text-decoration-line: none;
+  }
+  .underline {
+    text-decoration-line: underline;
+  }
+  .decoration-transparent {
+    text-decoration-color: transparent;
+  }
+  .decoration-2 {
+    text-decoration-thickness: 2px;
+  }
+  .underline-offset-4 {
+    text-underline-offset: 4px;
+  }
+  .opacity-50 {
+    opacity: 50%;
+  }
+  .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);
+  }
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
+  .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-200 {
+    --tw-duration: 200ms;
+    transition-duration: 200ms;
+  }
+  .hover\\:border-button-mono-outline-outline-hover {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-button-mono-outline-outline-hover);
+      }
+    }
+  }
+  .hover\\:border-button-outline-outline-hover {
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-button-outline-outline-hover);
+      }
+    }
+  }
+  .hover\\:bg-button-ghost-bg-hover {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-button-ghost-bg-hover);
+      }
+    }
+  }
+  .hover\\:bg-button-mono-outline-bg-hover\\/90 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, inherit 90%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-button-mono-outline-bg-hover) 90%, transparent);
+        }
+      }
+    }
+  }
+  .hover\\:bg-button-mono-solid-bg-hover {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-button-mono-solid-bg-hover);
+      }
+    }
+  }
+  .hover\\:bg-button-outline-bg-hover\\/10 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, inherit 10%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-button-outline-bg-hover) 10%, transparent);
+        }
+      }
+    }
+  }
+  .hover\\:bg-button-solid-bg-hover {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-button-solid-bg-hover);
+      }
+    }
+  }
+  .hover\\:\\[background-image\\:var\\(--color-gradient-accent-bg-hover\\)\\] {
+    &:hover {
+      @media (hover: hover) {
+        background-image: var(--color-gradient-accent-bg-hover);
+      }
+    }
+  }
+  .hover\\:text-button-ghost-text-hover {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-button-ghost-text-hover);
+      }
+    }
+  }
+  .hover\\:text-button-inline-text-hover {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-button-inline-text-hover);
+      }
+    }
+  }
+  .hover\\:text-button-link-text-hover {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-button-link-text-hover);
+      }
+    }
+  }
+  .hover\\:text-button-mono-outline-text-hover {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-button-mono-outline-text-hover);
+      }
+    }
+  }
+  .hover\\:text-button-outline-text-hover {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-button-outline-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);
+    }
+  }
+  .disabled\\:cursor-not-allowed {
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+  .disabled\\:opacity-50 {
+    &:disabled {
+      opacity: 50%;
+    }
+  }
+  .motion-safe\\:animate-spin {
+    @media (prefers-reduced-motion: no-preference) {
+      animation: var(--animate-spin);
+    }
+  }
+  .xl\\:w-12 {
+    @media (width >= 80rem) {
+      width: calc(var(--spacing) * 12);
+    }
+  }
+  .xl\\:w-14 {
+    @media (width >= 80rem) {
+      width: calc(var(--spacing) * 14);
+    }
+  }
+}
+@property --dsgn-border-sweep-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-font-weight {
+  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-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@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-font-weight: 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-outline-style: solid;
+      --tw-duration: initial;
+      --dsgn-border-sweep-angle: 0deg;
+    }
+  }
+}
+`;
+var Button_default = styles2;
+
+// components/Button/src/Button.props.ts
+var buttonAppearanceValues = {
+  SOLID: "solid",
+  OUTLINE: "outline",
+  GHOST: "ghost",
+  LINK: "link",
+  INLINE: "inline",
+  MONO_SOLID: "mono-solid",
+  MONO_OUTLINE: "mono-outline",
+  GRADIENT: "gradient"
+};
+var buttonAppearanceProps = enumCreator(Object.values(buttonAppearanceValues), "appearance", String, { reflect: true });
+var buttonWeightValues = {
+  NORMAL: "normal",
+  MEDIUM: "medium",
+  SEMIBOLD: "semibold",
+  BOLD: "bold"
+};
+var buttonWeightProps = enumCreator(Object.values(buttonWeightValues), "button-weight", String, { reflect: true, attribute: "button-weight" });
+var buttonTargetValues = {
+  SELF: "_self",
+  BLANK: "_blank"
+};
+var buttonTargetProps = enumCreator(Object.values(buttonTargetValues), "target", String, { reflect: true });
+var buttonTypeValues = {
+  BUTTON: "button",
+  SUBMIT: "submit",
+  RESET: "reset"
+};
+var buttonTypeProps = enumCreator(Object.values(buttonTypeValues), "type", String, { reflect: true });
+var buttonSizeValues = {
+  SM: "sm",
+  MD: "md",
+  LG: "lg"
+};
+var buttonSizeProps = enumCreator(Object.values(buttonSizeValues), "size", String, { reflect: true });
+var buttonIconPositionValues = {
+  LEADING: "leading",
+  TRAILING: "trailing",
+  ONLY: "only"
+};
+var buttonIconPositionProps = enumCreator(Object.values(buttonIconPositionValues), "icon-position", String, { attribute: "icon-position", reflect: true });
+
+// ../../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/Button/src/Button.styles.ts
+var baseClasses = [
+  "inline-flex",
+  "items-center",
+  "justify-center",
+  "gap-2",
+  "cursor-pointer",
+  "no-underline",
+  "focus-visible:outline",
+  "focus-visible:outline-2",
+  "focus-visible:outline-offset-2",
+  "focus-visible:outline-focus",
+  "disabled:cursor-not-allowed",
+  "disabled:opacity-50",
+  "transition-colors",
+  "duration-200"
+];
+var disabledClasses = [
+  "opacity-50",
+  "cursor-not-allowed",
+  "pointer-events-none"
+];
+var loadingClasses = ["cursor-progress"];
+var weightClasses = {
+  normal: "font-normal",
+  medium: "font-medium",
+  semibold: "font-semibold",
+  bold: "font-bold"
+};
+var buttonShapeClasses = [
+  "rounded-[var(--radius-button,calc(infinity*1px))]",
+  "whitespace-nowrap"
+];
+var sizeTextClasses = {
+  [buttonSizeValues.SM]: "text-xs",
+  [buttonSizeValues.MD]: "text-sm",
+  [buttonSizeValues.LG]: "text-base"
+};
+var sizeHeightClasses = {
+  [buttonSizeValues.SM]: "h-8",
+  [buttonSizeValues.MD]: "h-10",
+  [buttonSizeValues.LG]: "h-12"
+};
+var sizePaddingClasses = {
+  [buttonSizeValues.SM]: "px-3 py-1.5",
+  [buttonSizeValues.MD]: "px-3.5 py-2.5",
+  [buttonSizeValues.LG]: "px-5 py-3"
+};
+var sizeIconOnlyClasses = {
+  [buttonSizeValues.SM]: ["p-1.5", "w-8"],
+  [buttonSizeValues.MD]: ["p-2", "w-10", "xl:w-12"],
+  [buttonSizeValues.LG]: ["p-3", "w-12", "xl:w-14"]
+};
+var appearanceClasses = {
+  solid: [
+    "bg-button-solid-bg",
+    "text-button-solid-text",
+    "hover:bg-button-solid-bg-hover",
+    "border-none"
+  ],
+  outline: [
+    "bg-button-outline-bg",
+    "text-button-outline-text",
+    "hover:text-button-outline-text-hover",
+    "hover:bg-button-outline-bg-hover/10",
+    "border-solid",
+    "border-2",
+    "border-button-outline-outline",
+    "hover:border-button-outline-outline-hover"
+  ],
+  ghost: [
+    "bg-button-ghost-bg",
+    "text-button-ghost-text",
+    "hover:text-button-ghost-text-hover",
+    "hover:bg-button-ghost-bg-hover",
+    "border-none"
+  ],
+  "mono-solid": [
+    "bg-button-mono-solid-bg",
+    "text-button-mono-solid-text",
+    "hover:bg-button-mono-solid-bg-hover",
+    "border-none"
+  ],
+  "mono-outline": [
+    "bg-button-mono-outline-bg",
+    "text-button-mono-outline-text",
+    "hover:text-button-mono-outline-text-hover",
+    "border-solid",
+    "border-2",
+    "border-button-mono-outline-outline",
+    "hover:border-button-mono-outline-outline-hover",
+    "hover:bg-button-mono-outline-bg-hover/90"
+  ],
+  link: [
+    "text-button-link-text",
+    "hover:text-button-link-text-hover",
+    "underline",
+    "decoration-2",
+    "underline-offset-4",
+    "decoration-transparent",
+    "hover:decoration-current",
+    "border-none",
+    "bg-transparent"
+  ],
+  inline: [
+    "text-button-inline-text",
+    "hover:text-button-inline-text-hover",
+    "underline",
+    "decoration-2",
+    "underline-offset-4",
+    "decoration-transparent",
+    "hover:decoration-current",
+    "border-none",
+    "bg-transparent"
+  ],
+  gradient: [
+    "text-button-gradient-text",
+    "border-none",
+    "[background-image:var(--color-gradient-accent-bg)]",
+    "hover:[background-image:var(--color-gradient-accent-bg-hover)]"
+  ]
+};
+var spinnerClasses = () => clsx_default("inline-flex", "shrink-0", "motion-safe:animate-spin");
+var paddingFor = (size, isLink, isIconOnly) => {
+  if (isIconOnly)
+    return sizeIconOnlyClasses[size];
+  if (isLink)
+    return "px-1 py-0.5";
+  return sizePaddingClasses[size];
+};
+var classNames = ({
+  appearance,
+  iconPosition,
+  weight = "semibold",
+  size = buttonSizeValues.MD,
+  disabled = false,
+  loading = false
+}) => {
+  const isLink = appearance === "link" || appearance === "inline";
+  const paddingClasses = paddingFor(size, isLink, iconPosition === "only");
+  return clsx_default(baseClasses, sizeTextClasses[size], weightClasses[weight], !isLink && buttonShapeClasses, !isLink && sizeHeightClasses[size], appearanceClasses[appearance], paddingClasses, disabled && disabledClasses, loading && !disabled && loadingClasses);
+};
+
+// components/Button/src/Button.ts
+class Button extends Base {
+  static styles = [Base.styles, Button_default];
+  static formAssociated = true;
+  #internals;
+  constructor() {
+    super();
+    this.surface = surfaceValues.LIGHT;
+    this.appearance = buttonAppearanceValues.SOLID;
+    this.buttonWeight = buttonWeightValues.SEMIBOLD;
+    this.target = buttonTargetValues.SELF;
+    this.href = "";
+    this.iconName = "";
+    this.iconPosition = buttonIconPositionValues.LEADING;
+    this.rel = "";
+    this.size = buttonSizeValues.MD;
+    this.type = buttonTypeValues.BUTTON;
+    this.disabled = false;
+    this.loading = false;
+    this.name = "";
+    this.value = "";
+    this._formDisabled = false;
+    this.#internals = this.attachInternals();
+  }
+  get isDisabled() {
+    return this.disabled || this._formDisabled;
+  }
+  get isInert() {
+    return this.isDisabled || this.loading;
+  }
+  get computedRel() {
+    const rawRel = this.rel ? this.rel.trim() : "";
+    const isBlankTarget = this.target === buttonTargetValues.BLANK;
+    if (!isBlankTarget) {
+      return rawRel || undefined;
+    }
+    const tokens = new Set;
+    if (rawRel) {
+      for (const token of rawRel.split(/\s+/)) {
+        if (token) {
+          tokens.add(token.toLowerCase());
+        }
+      }
+    }
+    tokens.add("noopener");
+    tokens.add("noreferrer");
+    return tokens.size > 0 ? Array.from(tokens).join(" ") : undefined;
+  }
+  _handleClick(event) {
+    if (this.isInert) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      return;
+    }
+    const form = this.#internals.form;
+    if (!form || this.type === buttonTypeValues.BUTTON)
+      return;
+    queueMicrotask(() => {
+      if (event.defaultPrevented)
+        return;
+      this._submitOrReset(form);
+    });
+  }
+  _submitOrReset(form) {
+    if (this.type === buttonTypeValues.RESET) {
+      form.reset();
+      return;
+    }
+    const proxy = document.createElement("button");
+    proxy.type = buttonTypeValues.SUBMIT;
+    proxy.hidden = true;
+    if (this.name) {
+      proxy.name = this.name;
+      proxy.value = this.value;
+    }
+    this.appendChild(proxy);
+    try {
+      if (proxy.form === form) {
+        form.requestSubmit(proxy);
+      } else {
+        if (this.name) {
+          this.#internals.setFormValue(this.value);
+        }
+        form.requestSubmit();
+        if (this.name) {
+          this.#internals.setFormValue(null);
+        }
+      }
+    } finally {
+      proxy.remove();
+    }
+  }
+  formDisabledCallback(disabled) {
+    this._formDisabled = disabled;
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this.updateTheme(changedProperties, this.surface);
+  }
+  _renderContent() {
+    let icon;
+    if (this.loading) {
+      icon = html2`<span class=${spinnerClasses()} aria-hidden="true"
+        ><dsgn-icon .icon=${loader} size="md"></dsgn-icon
+      ></span>`;
+    } else if (this.icon || this.iconName) {
+      icon = html2`<dsgn-icon
+        .icon=${this.icon}
+        icon-name=${this.iconName}
+        size="md"
+      ></dsgn-icon>`;
+    } else {
+      icon = nothing;
+    }
+    if (this.iconPosition === buttonIconPositionValues.ONLY) {
+      return icon;
+    }
+    return this.iconPosition === buttonIconPositionValues.TRAILING && !this.loading ? html2`<slot></slot>${icon}` : html2`${icon}<slot></slot>`;
+  }
+  render() {
+    const content = this._renderContent();
+    const classes = classNames({
+      appearance: this.appearance,
+      iconPosition: this.iconPosition,
+      weight: this.buttonWeight,
+      size: this.size,
+      disabled: this.isDisabled,
+      loading: this.loading
+    });
+    const ariaLabel = this.iconPosition === buttonIconPositionValues.ONLY ? this.getAttribute("aria-label") || "" : nothing;
+    const ariaBusy = this.loading ? "true" : nothing;
+    return this.href ? html2`<a
+          href=${this.isInert ? nothing : this.href}
+          target=${this.target}
+          rel=${this.computedRel ?? ""}
+          class=${classes}
+          role=${this.isInert ? "link" : nothing}
+          tabindex=${this.loading && !this.isDisabled ? "0" : nothing}
+          aria-disabled=${this.isInert ? "true" : nothing}
+          aria-busy=${ariaBusy}
+          aria-label=${ariaLabel}
+          @click=${this._handleClick}
+          >${content}</a
+        >` : html2`
+          <button
+            type="button"
+            class=${classes}
+            ?disabled=${this.isDisabled}
+            aria-disabled=${this.loading ? "true" : nothing}
+            aria-busy=${ariaBusy}
+            aria-label=${ariaLabel}
+            @click=${this._handleClick}
+          >
+            ${content}
+          </button>
+        `;
+  }
+}
+__legacyDecorateClassTS([
+  property({ ...surfaceProps })
+], Button.prototype, "surface", undefined);
+__legacyDecorateClassTS([
+  property({ ...buttonAppearanceProps })
+], Button.prototype, "appearance", undefined);
+__legacyDecorateClassTS([
+  property({ ...buttonWeightProps })
+], Button.prototype, "buttonWeight", undefined);
+__legacyDecorateClassTS([
+  property({ ...buttonTargetProps })
+], Button.prototype, "target", undefined);
+__legacyDecorateClassTS([
+  property({ type: String })
+], Button.prototype, "href", undefined);
+__legacyDecorateClassTS([
+  property({ attribute: false })
+], Button.prototype, "icon", undefined);
+__legacyDecorateClassTS([
+  property({ type: String, attribute: "icon-name" })
+], Button.prototype, "iconName", undefined);
+__legacyDecorateClassTS([
+  property({ ...buttonIconPositionProps })
+], Button.prototype, "iconPosition", undefined);
+__legacyDecorateClassTS([
+  property({ type: String })
+], Button.prototype, "rel", undefined);
+__legacyDecorateClassTS([
+  property({ ...buttonSizeProps })
+], Button.prototype, "size", undefined);
+__legacyDecorateClassTS([
+  property({ ...buttonTypeProps })
+], Button.prototype, "type", undefined);
+__legacyDecorateClassTS([
+  property({ type: Boolean, reflect: true })
+], Button.prototype, "disabled", undefined);
+__legacyDecorateClassTS([
+  property({ type: Boolean, reflect: true })
+], Button.prototype, "loading", undefined);
+__legacyDecorateClassTS([
+  property({ type: String, reflect: true })
+], Button.prototype, "name", undefined);
+__legacyDecorateClassTS([
+  property({ type: String, reflect: true })
+], Button.prototype, "value", undefined);
+__legacyDecorateClassTS([
+  state()
+], Button.prototype, "_formDisabled", undefined);
+defineElement("dsgn-button", Button);
+export {
+  Button
+};