@ds-gn/ui 0.0.0-stage → 0.5.0

package/dist/components/Badge/src/Badge.js

@@ -0,0 +1,429 @@
+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;
+};
+
+// 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/Badge/src/Badge.ts
+import { html as html2 } from "lit";
+import { property } from "lit/decorators.js";
+
+// components/Badge/src/Badge.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);
+    --font-weight-medium: 500;
+    --color-accent: inherit;
+    --color-accent-text: inherit;
+    --color-badge-bg: inherit;
+    --color-badge-border: inherit;
+    --color-badge-brand-text: inherit;
+    --color-badge-error-text: inherit;
+    --color-badge-text: inherit;
+    --color-badge-warning-text: inherit;
+    --color-brand: inherit;
+    --color-brand-subtle: inherit;
+    --color-error: inherit;
+    --color-error-subtle: inherit;
+    --color-success: inherit;
+    --color-success-subtle: inherit;
+    --color-warning: inherit;
+    --color-warning-subtle: inherit;
+  }
+}
+@layer utilities {
+  .static {
+    position: static;
+  }
+  .inline-flex {
+    display: inline-flex;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .justify-center {
+    justify-content: center;
+  }
+  .rounded-full {
+    border-radius: calc(infinity * 1px);
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .border-accent\\/30 {
+    border-color: color-mix(in srgb, inherit 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-accent) 30%, transparent);
+    }
+  }
+  .border-badge-border {
+    border-color: var(--color-badge-border);
+  }
+  .border-brand\\/30 {
+    border-color: color-mix(in srgb, inherit 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-brand) 30%, transparent);
+    }
+  }
+  .border-error\\/30 {
+    border-color: color-mix(in srgb, inherit 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-error) 30%, transparent);
+    }
+  }
+  .border-success\\/30 {
+    border-color: color-mix(in srgb, inherit 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-success) 30%, transparent);
+    }
+  }
+  .border-warning\\/30 {
+    border-color: color-mix(in srgb, inherit 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-warning) 30%, transparent);
+    }
+  }
+  .bg-accent\\/5 {
+    background-color: color-mix(in srgb, inherit 5%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-accent) 5%, transparent);
+    }
+  }
+  .bg-badge-bg {
+    background-color: var(--color-badge-bg);
+  }
+  .bg-brand-subtle {
+    background-color: var(--color-brand-subtle);
+  }
+  .bg-error-subtle {
+    background-color: var(--color-error-subtle);
+  }
+  .bg-success-subtle {
+    background-color: var(--color-success-subtle);
+  }
+  .bg-warning-subtle {
+    background-color: var(--color-warning-subtle);
+  }
+  .px-2 {
+    padding-inline: calc(var(--spacing) * 2);
+  }
+  .px-2\\.5 {
+    padding-inline: calc(var(--spacing) * 2.5);
+  }
+  .py-1 {
+    padding-block: calc(var(--spacing) * 1);
+  }
+  .py-1\\.5 {
+    padding-block: calc(var(--spacing) * 1.5);
+  }
+  .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));
+  }
+  .leading-none {
+    --tw-leading: 1;
+    line-height: 1;
+  }
+  .font-medium {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+  .whitespace-nowrap {
+    white-space: nowrap;
+  }
+  .text-accent-text {
+    color: var(--color-accent-text);
+  }
+  .text-badge-brand-text {
+    color: var(--color-badge-brand-text);
+  }
+  .text-badge-error-text {
+    color: var(--color-badge-error-text);
+  }
+  .text-badge-text {
+    color: var(--color-badge-text);
+  }
+  .text-badge-warning-text {
+    color: var(--color-badge-warning-text);
+  }
+  .text-success {
+    color: var(--color-success);
+  }
+}
+@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;
+}
+@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;
+      --dsgn-border-sweep-angle: 0deg;
+    }
+  }
+}
+`;
+var Badge_default = styles2;
+
+// components/Badge/src/Badge.props.ts
+var badgeVariantValues = {
+  DEFAULT: "default",
+  BRAND: "brand",
+  ACCENT: "accent",
+  SUCCESS: "success",
+  WARNING: "warning",
+  ERROR: "error"
+};
+var badgeVariantProps = enumCreator(Object.values(badgeVariantValues), "variant", String, { reflect: true });
+var badgeSizeValues = {
+  SM: "sm",
+  MD: "md"
+};
+var badgeSizeProps = enumCreator(Object.values(badgeSizeValues), "size", String, { 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/Badge/src/Badge.styles.ts
+var baseClasses = [
+  "inline-flex",
+  "items-center",
+  "justify-center",
+  "rounded-full",
+  "border",
+  "font-medium",
+  "leading-none",
+  "whitespace-nowrap"
+];
+var sizeClasses = {
+  [badgeSizeValues.SM]: ["px-2", "py-1", "text-xs"],
+  [badgeSizeValues.MD]: ["px-2.5", "py-1.5", "text-sm"]
+};
+var variantClasses = {
+  [badgeVariantValues.DEFAULT]: [
+    "bg-badge-bg",
+    "text-badge-text",
+    "border-badge-border"
+  ],
+  [badgeVariantValues.BRAND]: [
+    "bg-brand-subtle",
+    "text-badge-brand-text",
+    "border-brand/30"
+  ],
+  [badgeVariantValues.ACCENT]: [
+    "bg-accent/5",
+    "text-accent-text",
+    "border-accent/30"
+  ],
+  [badgeVariantValues.SUCCESS]: [
+    "bg-success-subtle",
+    "text-success",
+    "border-success/30"
+  ],
+  [badgeVariantValues.WARNING]: [
+    "bg-warning-subtle",
+    "text-badge-warning-text",
+    "border-warning/30"
+  ],
+  [badgeVariantValues.ERROR]: [
+    "bg-error-subtle",
+    "text-badge-error-text",
+    "border-error/30"
+  ]
+};
+var classNames = (variant, size) => {
+  return clsx_default(baseClasses, sizeClasses[size], variantClasses[variant]);
+};
+
+// components/Badge/src/Badge.ts
+class Badge extends Base {
+  constructor() {
+    super(...arguments);
+    this.surface = surfaceValues.LIGHT;
+    this.variant = badgeVariantValues.DEFAULT;
+    this.size = badgeSizeValues.MD;
+  }
+  static styles = [Base.styles, Badge_default];
+  render() {
+    return html2`<span class="${classNames(this.variant, this.size)}"
+      ><slot></slot
+    ></span>`;
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this.updateTheme(changedProperties, this.surface);
+  }
+}
+__legacyDecorateClassTS([
+  property({ ...surfaceProps })
+], Badge.prototype, "surface", undefined);
+__legacyDecorateClassTS([
+  property({ ...badgeVariantProps })
+], Badge.prototype, "variant", undefined);
+__legacyDecorateClassTS([
+  property({ ...badgeSizeProps })
+], Badge.prototype, "size", undefined);
+defineElement("dsgn-badge", Badge);
+export {
+  Badge
+};

package/dist/components/Badge/src/Badge.playground.d.ts

@@ -0,0 +1,2 @@
+import type { PlaygroundDefinition } from '../../../playground/types.js';
+export declare const playground: PlaygroundDefinition;

package/dist/components/Badge/src/Badge.props.d.ts

@@ -0,0 +1,16 @@
+export declare const badgeVariantValues: {
+    readonly DEFAULT: "default";
+    readonly BRAND: "brand";
+    readonly ACCENT: "accent";
+    readonly SUCCESS: "success";
+    readonly WARNING: "warning";
+    readonly ERROR: "error";
+};
+export type BadgeVariantType = (typeof badgeVariantValues)[keyof typeof badgeVariantValues];
+export declare const badgeVariantProps: import("lit").PropertyDeclaration<unknown, unknown>;
+export declare const badgeSizeValues: {
+    readonly SM: "sm";
+    readonly MD: "md";
+};
+export type BadgeSizeType = (typeof badgeSizeValues)[keyof typeof badgeSizeValues];
+export declare const badgeSizeProps: import("lit").PropertyDeclaration<unknown, unknown>;

package/dist/components/Badge/src/Badge.props.js

@@ -0,0 +1,44 @@
+// 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
+  };
+};
+
+// components/Badge/src/Badge.props.ts
+var badgeVariantValues = {
+  DEFAULT: "default",
+  BRAND: "brand",
+  ACCENT: "accent",
+  SUCCESS: "success",
+  WARNING: "warning",
+  ERROR: "error"
+};
+var badgeVariantProps = enumCreator(Object.values(badgeVariantValues), "variant", String, { reflect: true });
+var badgeSizeValues = {
+  SM: "sm",
+  MD: "md"
+};
+var badgeSizeProps = enumCreator(Object.values(badgeSizeValues), "size", String, { reflect: true });
+export {
+  badgeSizeProps,
+  badgeSizeValues,
+  badgeVariantProps,
+  badgeVariantValues
+};

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

@@ -0,0 +1,2 @@
+import { type BadgeSizeType, type BadgeVariantType } from './Badge.props.js';
+export declare const classNames: (variant: BadgeVariantType, size: BadgeSizeType) => string;

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

@@ -0,0 +1,138 @@
+import '../../../types/global.d.ts';
+import '../../Icon/src/Icon.js';
+import { Base } from '../../../common/Base/Base.js';
+import { type SurfaceType } from '../../../common/props/surface/surface.props.js';
+import { type CSSResultGroup, type SVGTemplateResult } from 'lit';
+import type { IconName } from '../../Icon/src/icons/icon-names.js';
+import type { ButtonAppearanceType, ButtonTargetType } from './Button.props.js';
+import { type ButtonIconPositionType, type ButtonSizeType, type ButtonTypeType, type ButtonWeightType } from './Button.props.js';
+/** @slot - Button or link label. */
+export declare class Button extends Base {
+    #private;
+    static styles: CSSResultGroup;
+    /**
+     * Form association lets `type="submit"`/`type="reset"` reach an enclosing
+     * `<form>` across the shadow boundary, and lets `name`/`value` participate in
+     * submission the way a native submit button does.
+     */
+    static formAssociated: boolean;
+    constructor();
+    /**
+     * Surface theme variant (light or dark)
+     */
+    surface: SurfaceType;
+    /**
+     * Button style appearance
+     */
+    appearance: ButtonAppearanceType;
+    /**
+     * Font weight of the button label. Default `semibold` for CTA energy; use
+     * `medium` or lighter when the button sits in dense chrome (e.g. nav) and
+     * needs to visually settle with surrounding text.
+     */
+    buttonWeight: ButtonWeightType;
+    /**
+     * Target for the button when used as a link
+     */
+    target: ButtonTargetType;
+    /**
+     * Optional URL that turns the button into a link
+     */
+    href: string;
+    /**
+     * SVG template content for the icon. Tree-shakeable and needs no registry,
+     * but only settable from JS — use `icon-name` for declarative/CMS usage.
+     */
+    icon?: SVGTemplateResult;
+    /**
+     * Icon name, resolved by the `<dsgn-icon>` this button already renders. Lets
+     * an icon be authored as data (markup, CMS, the docs playground) rather than
+     * as a Lit template. Requires the icons to be registered at app entry:
+     *
+     *   import { Icon } from '@ds-gn/ui/icon';
+     *   import * as icons from '@ds-gn/ui/icon/icons';
+     *   Icon.registerIcons(icons);
+     *
+     * `icon` wins when both are set — that precedence lives in `<dsgn-icon>`.
+     */
+    iconName: IconName | '';
+    /**
+     * Icon position relative to the label
+     */
+    iconPosition: ButtonIconPositionType;
+    /**
+     * Relationship between the current page and the linked page.
+     * Defaults to a safe value for links opened in a new tab.
+     */
+    rel: string;
+    /**
+     * Control size. `md` matches the historical (only) size, so existing markup
+     * renders unchanged.
+     */
+    size: ButtonSizeType;
+    /**
+     * Behavior when the button is activated inside a form. Ignored in link mode
+     * (`href`), where the element is an `<a>`.
+     */
+    type: ButtonTypeType;
+    /**
+     * Blocks activation and marks the control inert. In link mode the `href` is
+     * dropped and `aria-disabled` is set, since `<a>` has no native `disabled`.
+     */
+    disabled: boolean;
+    /**
+     * Busy state for async actions: swaps the icon for a spinner, marks the
+     * control `aria-busy`, and blocks activation. Unlike `disabled` the control
+     * stays focusable, so focus is not lost mid-action — in link mode the `href`
+     * still has to go (a `click` guard alone would not stop a middle-click's
+     * `auxclick` from opening the target), so focusability is restored with an
+     * explicit `tabindex`.
+     */
+    loading: boolean;
+    /**
+     * Submitted with the form when this button is the activating submitter,
+     * mirroring a native submit button's `name`/`value` pair. Both reflect, as
+     * they do on a native `<button>`, so the authored state is visible in the DOM
+     * and to attribute selectors.
+     */
+    name: string;
+    value: string;
+    /**
+     * Disabled state inherited from an ancestor `<fieldset>`/form owner, kept
+     * separate from the authored `disabled` property. Writing the inherited state
+     * back into `disabled` would reflect a `disabled` attribute the author never
+     * set — and because the element's own attribute keeps its effective state
+     * disabled, re-enabling the fieldset would not change that state, so no
+     * `formDisabledCallback(false)` would arrive to undo it and the control would
+     * be stuck disabled forever.
+     */
+    private _formDisabled;
+    /** Authored `disabled` combined with any state inherited from the form. */
+    private get isDisabled();
+    /** True when activation should be suppressed. */
+    private get isInert();
+    private get computedRel();
+    /**
+     * The inner `<button>` is always `type="button"`: it lives in the shadow root,
+     * so a native submit would never find the light-DOM form. Submission and reset
+     * are driven here through `ElementInternals.form` instead.
+     */
+    private _handleClick;
+    private _submitOrReset;
+    formDisabledCallback(disabled: boolean): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    /**
+     * The spinner takes the icon's place while loading; on a button with no icon
+     * it leads the label, so the only layout shift is the gap.
+     */
+    private _renderContent;
+    /**
+     * Render the button or link based on properties
+     */
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dsgn-button': Button;
+    }
+}