@ds-gn/ui 0.9.0 → 0.11.0

package/dist/components/Table/src/Table.js

@@ -0,0 +1,1105 @@
+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/Table/src/Table.ts
+import { html as html2, nothing, svg as svg4 } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.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/size/size.props.ts
+var sizeValues = {
+  SM: "sm",
+  MD: "md",
+  LG: "lg"
+};
+var sizeProps = enumCreator(Object.values(sizeValues), "size", String, {
+  reflect: true
+});
+
+// common/props/surface/surface.props.ts
+var surfaceValues = {
+  LIGHT: "light",
+  DARK: "dark"
+};
+var surfaceProps = enumCreator(Object.values(surfaceValues), "surface", String, { reflect: true });
+
+// components/Icon/src/icons/arrow-down.ts
+import { svg } from "lit";
+var arrowDown = svg`<path d="M12 5v14" /><path d="m19 12-7 7-7-7" />`;
+// components/Icon/src/icons/arrow-up.ts
+import { svg as svg2 } from "lit";
+var arrowUp = svg2`<path d="m5 12 7-7 7 7" /><path d="M12 19V5" />`;
+// components/Icon/src/icons/chevrons-up-down.ts
+import { svg as svg3 } from "lit";
+var chevronsUpDown = svg3`<path d="m7 15 5 5 5-5" /><path d="m7 9 5-5 5 5" />`;
+// components/Table/src/Table.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-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+    monospace;
+    --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-normal: 400;
+    --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --radius-md: 0.375rem;
+    --radius-xl: 0.75rem;
+    --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-focus: inherit;
+    --color-surface-default: inherit;
+    --color-table-border: inherit;
+    --color-table-divider: inherit;
+    --color-table-header-bg: inherit;
+    --color-table-pin-shadow: inherit;
+    --color-table-row-hover: inherit;
+    --color-table-sort-hover: inherit;
+    --color-text-primary: inherit;
+    --color-text-secondary: inherit;
+    --color-text-tertiary: inherit;
+    --shadow-table: inherit;
+  }
+}
+@layer utilities {
+  .pointer-events-none {
+    pointer-events: none;
+  }
+  .visible {
+    visibility: visible;
+  }
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
+  .absolute {
+    position: absolute;
+  }
+  .fixed {
+    position: fixed;
+  }
+  .relative {
+    position: relative;
+  }
+  .static {
+    position: static;
+  }
+  .sticky {
+    position: sticky;
+  }
+  .inset-y-0 {
+    inset-block: calc(var(--spacing) * 0);
+  }
+  .start-0 {
+    inset-inline-start: calc(var(--spacing) * 0);
+  }
+  .end-0 {
+    inset-inline-end: calc(var(--spacing) * 0);
+  }
+  .container {
+    width: 100%;
+    @media (width >= 40rem) {
+      max-width: 40rem;
+    }
+    @media (width >= 48rem) {
+      max-width: 48rem;
+    }
+    @media (width >= 64rem) {
+      max-width: 64rem;
+    }
+    @media (width >= 80rem) {
+      max-width: 80rem;
+    }
+    @media (width >= 96rem) {
+      max-width: 96rem;
+    }
+  }
+  .block {
+    display: block;
+  }
+  .flex {
+    display: flex;
+  }
+  .hidden {
+    display: none;
+  }
+  .inline {
+    display: inline;
+  }
+  .inline-flex {
+    display: inline-flex;
+  }
+  .table {
+    display: table;
+  }
+  .size-3\\.5 {
+    width: calc(var(--spacing) * 3.5);
+    height: calc(var(--spacing) * 3.5);
+  }
+  .h-7 {
+    height: calc(var(--spacing) * 7);
+  }
+  .h-8 {
+    height: calc(var(--spacing) * 8);
+  }
+  .h-11 {
+    height: calc(var(--spacing) * 11);
+  }
+  .h-12 {
+    height: calc(var(--spacing) * 12);
+  }
+  .w-7 {
+    width: calc(var(--spacing) * 7);
+  }
+  .w-full {
+    width: 100%;
+  }
+  .flex-none {
+    flex: none;
+  }
+  .border-separate {
+    border-collapse: separate;
+  }
+  .border-spacing-0 {
+    --tw-border-spacing-x: calc(var(--spacing) * 0);
+    --tw-border-spacing-y: calc(var(--spacing) * 0);
+    border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
+  }
+  .cursor-pointer {
+    cursor: pointer;
+  }
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+  .items-baseline {
+    align-items: baseline;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .gap-1\\.5 {
+    gap: calc(var(--spacing) * 1.5);
+  }
+  .gap-x-2\\.5 {
+    column-gap: calc(var(--spacing) * 2.5);
+  }
+  .gap-y-1 {
+    row-gap: calc(var(--spacing) * 1);
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .overflow-x-auto {
+    overflow-x: auto;
+  }
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
+  .rounded-xl {
+    border-radius: var(--radius-xl);
+  }
+  .border {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+  }
+  .border-b {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 1px;
+  }
+  .border-table-border {
+    border-color: var(--color-table-border);
+  }
+  .border-table-divider {
+    border-color: var(--color-table-divider);
+  }
+  .bg-surface-default {
+    background-color: var(--color-surface-default);
+  }
+  .bg-table-header-bg {
+    background-color: var(--color-table-header-bg);
+  }
+  .bg-transparent {
+    background-color: transparent;
+  }
+  .bg-linear-to-l {
+    --tw-gradient-position: to left;
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      --tw-gradient-position: to left in oklab;
+    }
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+  .bg-linear-to-r {
+    --tw-gradient-position: to right;
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      --tw-gradient-position: to right in oklab;
+    }
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+  .from-transparent {
+    --tw-gradient-from: transparent;
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .to-surface-default {
+    --tw-gradient-to: var(--color-surface-default);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .px-1 {
+    padding-inline: calc(var(--spacing) * 1);
+  }
+  .px-2 {
+    padding-inline: calc(var(--spacing) * 2);
+  }
+  .px-3 {
+    padding-inline: calc(var(--spacing) * 3);
+  }
+  .px-4 {
+    padding-inline: calc(var(--spacing) * 4);
+  }
+  .px-5 {
+    padding-inline: calc(var(--spacing) * 5);
+  }
+  .px-6 {
+    padding-inline: calc(var(--spacing) * 6);
+  }
+  .py-3\\.5 {
+    padding-block: calc(var(--spacing) * 3.5);
+  }
+  .py-14 {
+    padding-block: calc(var(--spacing) * 14);
+  }
+  .py-\\[9px\\] {
+    padding-block: 9px;
+  }
+  .py-\\[18px\\] {
+    padding-block: 18px;
+  }
+  .text-center {
+    text-align: center;
+  }
+  .text-end {
+    text-align: end;
+  }
+  .text-start {
+    text-align: start;
+  }
+  .align-middle {
+    vertical-align: middle;
+  }
+  .font-\\[inherit\\] {
+    font-family: inherit;
+  }
+  .font-display {
+    font-family: var(--font-display);
+  }
+  .font-mono {
+    font-family: var(--font-mono);
+  }
+  .font-sans {
+    font-family: var(--font-sans);
+  }
+  .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));
+  }
+  .text-\\[13px\\] {
+    font-size: 13px;
+  }
+  .text-\\[18px\\] {
+    font-size: 18px;
+  }
+  .leading-5 {
+    --tw-leading: calc(var(--spacing) * 5);
+    line-height: calc(var(--spacing) * 5);
+  }
+  .leading-6 {
+    --tw-leading: calc(var(--spacing) * 6);
+    line-height: calc(var(--spacing) * 6);
+  }
+  .leading-\\[18px\\] {
+    --tw-leading: 18px;
+    line-height: 18px;
+  }
+  .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);
+  }
+  .tracking-\\[-0\\.01em\\] {
+    --tw-tracking: -0.01em;
+    letter-spacing: -0.01em;
+  }
+  .whitespace-normal {
+    white-space: normal;
+  }
+  .whitespace-nowrap {
+    white-space: nowrap;
+  }
+  .text-text-primary {
+    color: var(--color-text-primary);
+  }
+  .text-text-secondary {
+    color: var(--color-text-secondary);
+  }
+  .text-text-tertiary {
+    color: var(--color-text-tertiary);
+  }
+  .tabular-nums {
+    --tw-numeric-spacing: tabular-nums;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+  }
+  .opacity-0 {
+    opacity: 0%;
+  }
+  .opacity-70 {
+    opacity: 70%;
+  }
+  .\\[box-shadow\\:var\\(--shadow-table\\)\\] {
+    box-shadow: var(--shadow-table);
+  }
+  .transition {
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+    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));
+  }
+  .transition-opacity {
+    transition-property: opacity;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .duration-\\[120ms\\] {
+    --tw-duration: 120ms;
+    transition-duration: 120ms;
+  }
+  .group-hover\\:bg-table-row-hover {
+    &:is(:where(.group):hover *) {
+      @media (hover: hover) {
+        background-color: var(--color-table-row-hover);
+      }
+    }
+  }
+  .hover\\:bg-table-sort-hover {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-table-sort-hover);
+      }
+    }
+  }
+  .hover\\:text-text-primary {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-text-primary);
+      }
+    }
+  }
+  .focus-visible\\:\\[box-shadow\\:0_0_0_3px_color-mix\\(in_oklab\\,var\\(--color-focus\\)_45\\%\\,transparent\\)\\] {
+    &:focus-visible {
+      box-shadow: 0 0 0 3px color-mix(in srgb,inherit 45%,transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        box-shadow: 0 0 0 3px color-mix(in oklab,var(--color-focus) 45%,transparent);
+      }
+    }
+  }
+  .focus-visible\\:\\[box-shadow\\:inset_0_0_0_2px_var\\(--color-focus\\)\\] {
+    &:focus-visible {
+      box-shadow: inset 0 0 0 2px var(--color-focus);
+    }
+  }
+  .focus-visible\\:outline-none {
+    &:focus-visible {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+  }
+}
+@property --dsgn-border-sweep-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+@property --tw-border-spacing-x {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-border-spacing-y {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-gradient-position {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-via {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-to {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-via-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+@property --tw-gradient-via-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 50%;
+}
+@property --tw-gradient-to-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ordinal {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-slashed-zero {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-figure {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-spacing {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-fraction {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-duration {
+  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-spacing-x: 0;
+      --tw-border-spacing-y: 0;
+      --tw-border-style: solid;
+      --tw-gradient-position: initial;
+      --tw-gradient-from: #0000;
+      --tw-gradient-via: #0000;
+      --tw-gradient-to: #0000;
+      --tw-gradient-stops: initial;
+      --tw-gradient-via-stops: initial;
+      --tw-gradient-from-position: 0%;
+      --tw-gradient-via-position: 50%;
+      --tw-gradient-to-position: 100%;
+      --tw-leading: initial;
+      --tw-font-weight: initial;
+      --tw-tracking: initial;
+      --tw-ordinal: initial;
+      --tw-slashed-zero: initial;
+      --tw-numeric-figure: initial;
+      --tw-numeric-spacing: initial;
+      --tw-numeric-fraction: initial;
+      --tw-duration: initial;
+      --dsgn-border-sweep-angle: 0deg;
+    }
+  }
+}
+`;
+var Table_default = styles2;
+
+// components/Table/src/Table.props.ts
+var tableAlignValues = {
+  START: "start",
+  END: "end"
+};
+var tablePinValues = {
+  START: "start",
+  NONE: "none"
+};
+var tableSortDirectionValues = {
+  ASCENDING: "ascending",
+  DESCENDING: "descending"
+};
+
+// ../../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/Table/src/Table.styles.ts
+import { css as css3 } from "lit";
+var bodySizeClasses = {
+  [sizeValues.SM]: ["text-[13px]", "leading-[18px]"],
+  [sizeValues.MD]: ["text-sm", "leading-5"],
+  [sizeValues.LG]: ["text-sm", "leading-5"]
+};
+var cellPaddingClasses = {
+  [sizeValues.SM]: ["px-3", "py-[9px]"],
+  [sizeValues.MD]: ["px-4", "py-3.5"],
+  [sizeValues.LG]: ["px-5", "py-[18px]"]
+};
+var headerSizeClasses = {
+  [sizeValues.SM]: ["h-8", "text-xs"],
+  [sizeValues.MD]: ["h-11", "text-[13px]"],
+  [sizeValues.LG]: ["h-12", "text-[13px]"]
+};
+var headerPaddingClasses = {
+  [sizeValues.SM]: ["px-3"],
+  [sizeValues.MD]: ["px-4"],
+  [sizeValues.LG]: ["px-5"]
+};
+var sortableHeaderPaddingClasses = {
+  [sizeValues.SM]: ["px-1"],
+  [sizeValues.MD]: ["px-2"],
+  [sizeValues.LG]: ["px-3"]
+};
+var sortButtonSizeClasses = {
+  [sizeValues.SM]: ["h-7"],
+  [sizeValues.MD]: ["h-8"],
+  [sizeValues.LG]: ["h-8"]
+};
+var alignClasses = {
+  [tableAlignValues.START]: "text-start",
+  [tableAlignValues.END]: "text-end"
+};
+var focusRingClasses = [
+  "focus-visible:outline-none",
+  "focus-visible:[box-shadow:0_0_0_3px_color-mix(in_oklab,var(--color-focus)_45%,transparent)]"
+];
+var containerClasses = () => clsx_default("block", "overflow-hidden", "rounded-xl", "border", "border-table-border", "bg-surface-default", "text-text-primary", "font-sans", "[box-shadow:var(--shadow-table)]");
+var captionClasses = () => clsx_default("flex", "flex-wrap", "items-baseline", "gap-x-2.5", "gap-y-1", "px-5", "py-[18px]", "border-b", "border-table-border");
+var captionTitleClasses = () => clsx_default("font-display", "text-[18px]", "leading-6", "font-semibold", "tracking-[-0.01em]", "text-text-primary");
+var captionMetaClasses = () => clsx_default("font-mono", "text-xs", "text-text-secondary");
+var frameClasses = () => clsx_default("relative");
+var scrollerClasses = () => clsx_default("overflow-x-auto", "focus-visible:outline-none", "focus-visible:[box-shadow:inset_0_0_0_2px_var(--color-focus)]");
+var tableClasses = (size) => clsx_default("w-full", "border-separate", "border-spacing-0", "text-start", bodySizeClasses[size]);
+var headerCellClasses = ({
+  size,
+  align,
+  sortable
+}) => clsx_default("bg-table-header-bg", "border-b", "border-table-border", "font-medium", "text-text-secondary", "whitespace-nowrap", "align-middle", alignClasses[align], headerSizeClasses[size], sortable ? sortableHeaderPaddingClasses[size] : headerPaddingClasses[size]);
+var sortButtonClasses = (size, active) => clsx_default("inline-flex", "items-center", "gap-1.5", "px-2", "rounded-md", "bg-transparent", "font-[inherit]", "font-medium", "cursor-pointer", "transition-colors", "duration-[120ms]", "hover:bg-table-sort-hover", "hover:text-text-primary", active ? "text-text-primary" : "text-text-secondary", sortButtonSizeClasses[size], focusRingClasses);
+var sortIconClasses = (active) => clsx_default("size-3.5", "flex-none", !active && ["text-text-tertiary", "opacity-70"]);
+var rowClasses = () => clsx_default("group", "transition-colors", "duration-[120ms]");
+var cellClasses = ({
+  size,
+  align,
+  numeric,
+  rowHeader,
+  wrap
+}) => clsx_default("align-middle", "border-b", "border-table-divider", "group-hover:bg-table-row-hover", "transition-colors", "duration-[120ms]", alignClasses[align], cellPaddingClasses[size], wrap ? "whitespace-normal" : "whitespace-nowrap", rowHeader ? "font-medium" : "font-normal", numeric && ["font-mono", "text-[13px]", "tabular-nums"]);
+var emptyCellClasses = () => clsx_default("px-6", "py-14", "text-center", "text-text-secondary");
+var fadeClasses = (edge) => clsx_default("pointer-events-none", "absolute", "inset-y-0", "w-7", "opacity-0", "transition-opacity", "duration-[120ms]", edge === "start" ? ["start-0", "bg-linear-to-l"] : ["end-0", "bg-linear-to-r"], "from-transparent", "to-surface-default");
+var srOnlyClasses = () => clsx_default("sr-only");
+var structuralStyles = css3`
+  tbody tr:last-child > * {
+    border-bottom-width: 0;
+  }
+
+  .pinned {
+    position: sticky;
+    inset-inline-start: 0;
+    z-index: 1;
+  }
+
+  thead .pinned {
+    z-index: 2;
+  }
+
+  tbody .pinned {
+    background-color: var(--color-surface-default);
+  }
+
+  tbody tr:hover .pinned {
+    background-color: var(--color-table-row-hover);
+  }
+
+  [data-overflow] .pinned {
+    box-shadow: 1px 0 0 var(--color-table-border);
+  }
+
+  [data-more-start] .pinned {
+    box-shadow:
+      1px 0 0 var(--color-table-border),
+      8px 0 12px -8px var(--color-table-pin-shadow);
+  }
+
+  [data-more-start] .fade-start,
+  [data-more-end] .fade-end {
+    opacity: 1;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    * {
+      transition: none !important;
+    }
+  }
+`;
+
+// components/Table/src/Table.ts
+var CAPTION_ID = "caption";
+
+class Table extends Base {
+  constructor() {
+    super(...arguments);
+    this.surface = surfaceValues.DARK;
+    this.size = sizeValues.MD;
+    this.columns = [];
+    this.rows = [];
+    this.rowKey = "id";
+    this.sort = null;
+    this.caption = "";
+    this.captionMeta = "";
+    this.label = "";
+    this._overflow = false;
+    this._moreStart = false;
+    this._moreEnd = false;
+    this._resizeObserver = null;
+  }
+  static styles = [Base.styles, Table_default, structuralStyles];
+  connectedCallback() {
+    super.connectedCallback();
+    if (typeof ResizeObserver !== "undefined") {
+      this._resizeObserver = new ResizeObserver(() => this._updateEdges());
+    }
+    if (this.hasUpdated) {
+      this._observeSize();
+      this._updateEdges();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._resizeObserver?.disconnect();
+    this._resizeObserver = null;
+  }
+  firstUpdated() {
+    this._observeSize();
+  }
+  _observeSize() {
+    const scroller = this._scroller;
+    if (!scroller || !this._resizeObserver)
+      return;
+    this._resizeObserver.observe(scroller);
+    const table = scroller.querySelector("table");
+    if (table)
+      this._resizeObserver.observe(table);
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    this.updateTheme(changedProperties, this.surface);
+    if (changedProperties.has("columns") || changedProperties.has("rows")) {
+      this._updateEdges();
+    }
+  }
+  _updateEdges() {
+    const scroller = this._scroller;
+    if (!scroller)
+      return;
+    const { scrollWidth, clientWidth } = scroller;
+    const offset = Math.abs(scroller.scrollLeft);
+    this._overflow = scrollWidth > clientWidth + 1;
+    this._moreStart = this._overflow && offset > 1;
+    this._moreEnd = this._overflow && offset + clientWidth < scrollWidth - 1;
+  }
+  _handleSort(column) {
+    const isCurrentAscending = this.sort?.column === column.key && this.sort.direction === tableSortDirectionValues.ASCENDING;
+    const direction = isCurrentAscending ? tableSortDirectionValues.DESCENDING : tableSortDirectionValues.ASCENDING;
+    this.emit("dsgn-sort", { column: column.key, direction });
+  }
+  get _rowHeaderKey() {
+    return (this.columns.find((column) => column.rowHeader) ?? this.columns[0])?.key;
+  }
+  _isPinned(column, index) {
+    if (index !== 0)
+      return false;
+    if (column.pin)
+      return column.pin === tablePinValues.START;
+    return column.key === this._rowHeaderKey;
+  }
+  _alignOf(column) {
+    if (column.align)
+      return column.align;
+    return column.numeric ? tableAlignValues.END : tableAlignValues.START;
+  }
+  _ariaSort(column) {
+    if (!column.sortable)
+      return nothing;
+    return this.sort?.column === column.key ? this.sort.direction : "none";
+  }
+  _keyOf(row, index) {
+    const key = row[this.rowKey];
+    return key === undefined || key === null ? String(index) : String(key);
+  }
+  _renderSortIcon(direction) {
+    let icon = chevronsUpDown;
+    if (direction === tableSortDirectionValues.ASCENDING)
+      icon = arrowUp;
+    if (direction === tableSortDirectionValues.DESCENDING)
+      icon = arrowDown;
+    return svg4`<svg
+      class=${sortIconClasses(direction !== "none")}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="1.75"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >${icon}</svg>`;
+  }
+  _renderHeaderContent(column) {
+    const label = column.hideLabel ? html2`<span class=${srOnlyClasses()}>${column.label}</span>` : column.label;
+    if (!column.sortable)
+      return label;
+    const direction = this.sort?.column === column.key ? this.sort.direction : "none";
+    return html2`<button
+      type="button"
+      part="sort-button"
+      class=${sortButtonClasses(this.size, direction !== "none")}
+      @click=${() => this._handleSort(column)}
+    >
+      ${label}${this._renderSortIcon(direction)}
+    </button>`;
+  }
+  _renderHeaderCell(column, index) {
+    const sortable = !!column.sortable;
+    const pinned = this._isPinned(column, index);
+    return html2`<th
+      scope="col"
+      part="header-cell"
+      aria-sort=${sortable ? this._ariaSort(column) : nothing}
+      class="${pinned ? "pinned " : ""}${headerCellClasses({
+      size: this.size,
+      align: this._alignOf(column),
+      sortable
+    })}"
+      style=${column.width ? `width: ${column.width}` : nothing}
+    >
+      ${this._renderHeaderContent(column)}
+    </th>`;
+  }
+  _renderCell(row, rowKey, column, index) {
+    const rowHeader = column.key === this._rowHeaderKey;
+    const value = row[column.key];
+    const classes = `${this._isPinned(column, index) ? "pinned " : ""}${cellClasses({
+      size: this.size,
+      align: this._alignOf(column),
+      numeric: !!column.numeric,
+      rowHeader,
+      wrap: !!column.wrap
+    })}`;
+    const content = html2`<slot name="cell:${rowKey}:${column.key}"
+      >${value === undefined || value === null ? "" : String(value)}</slot
+    >`;
+    return rowHeader ? html2`<th scope="row" part="cell row-header" class=${classes}>
+          ${content}
+        </th>` : html2`<td part="cell" class=${classes}>${content}</td>`;
+  }
+  _renderBody() {
+    if (this.rows.length === 0) {
+      return html2`<tr>
+        <td
+          part="empty"
+          colspan=${Math.max(this.columns.length, 1)}
+          class=${emptyCellClasses()}
+        >
+          <slot name="empty"></slot>
+        </td>
+      </tr>`;
+    }
+    return repeat(this.rows, (row, index) => this._keyOf(row, index), (row, index) => {
+      const rowKey = this._keyOf(row, index);
+      return html2`<tr part="row" class=${rowClasses()}>
+          ${this.columns.map((column, columnIndex) => this._renderCell(row, rowKey, column, columnIndex))}
+        </tr>`;
+    });
+  }
+  _renderCaption() {
+    if (!this.caption)
+      return nothing;
+    return html2`<div part="caption" class=${captionClasses()}>
+      <span id=${CAPTION_ID} class=${captionTitleClasses()}
+        >${this.caption}</span
+      >
+      ${this.captionMeta ? html2`<span class=${captionMetaClasses()}>${this.captionMeta}</span>` : nothing}
+    </div>`;
+  }
+  render() {
+    const labelledBy = this.caption ? CAPTION_ID : nothing;
+    const label = !this.caption && this.label ? this.label : nothing;
+    const hasPinned = this.columns.some((column, index) => this._isPinned(column, index));
+    return html2`<div part="container" class=${containerClasses()}>
+      ${this._renderCaption()}
+      <div
+        class=${frameClasses()}
+        ?data-overflow=${this._overflow}
+        ?data-more-start=${this._moreStart}
+        ?data-more-end=${this._moreEnd}
+      >
+        <div
+          part="scroller"
+          class=${scrollerClasses()}
+          role="region"
+          aria-labelledby=${labelledBy}
+          aria-label=${label}
+          tabindex="0"
+          @scroll=${this._updateEdges}
+        >
+          <table
+            part="table"
+            class=${tableClasses(this.size)}
+            aria-labelledby=${labelledBy}
+            aria-label=${label}
+          >
+            <thead>
+              <tr>
+                ${this.columns.map((column, index) => this._renderHeaderCell(column, index))}
+              </tr>
+            </thead>
+            <tbody>
+              ${this._renderBody()}
+            </tbody>
+          </table>
+        </div>
+        ${hasPinned ? nothing : html2`<div
+              class="fade-start ${fadeClasses("start")}"
+              aria-hidden="true"
+            ></div>`}
+        <div class="fade-end ${fadeClasses("end")}" aria-hidden="true"></div>
+      </div>
+    </div>`;
+  }
+}
+__legacyDecorateClassTS([
+  property({ ...surfaceProps })
+], Table.prototype, "surface", undefined);
+__legacyDecorateClassTS([
+  property({ ...sizeProps })
+], Table.prototype, "size", undefined);
+__legacyDecorateClassTS([
+  property({ type: Array })
+], Table.prototype, "columns", undefined);
+__legacyDecorateClassTS([
+  property({ type: Array })
+], Table.prototype, "rows", undefined);
+__legacyDecorateClassTS([
+  property({ type: String, attribute: "row-key" })
+], Table.prototype, "rowKey", undefined);
+__legacyDecorateClassTS([
+  property({ type: Object })
+], Table.prototype, "sort", undefined);
+__legacyDecorateClassTS([
+  property({ type: String })
+], Table.prototype, "caption", undefined);
+__legacyDecorateClassTS([
+  property({ type: String, attribute: "caption-meta" })
+], Table.prototype, "captionMeta", undefined);
+__legacyDecorateClassTS([
+  property({ type: String })
+], Table.prototype, "label", undefined);
+__legacyDecorateClassTS([
+  state()
+], Table.prototype, "_overflow", undefined);
+__legacyDecorateClassTS([
+  state()
+], Table.prototype, "_moreStart", undefined);
+__legacyDecorateClassTS([
+  state()
+], Table.prototype, "_moreEnd", undefined);
+__legacyDecorateClassTS([
+  query('[part="scroller"]')
+], Table.prototype, "_scroller", undefined);
+defineElement("dsgn-table", Table);
+export {
+  Table
+};