@visitwonders/assembly 0.1.0 → 0.2.0

package/dist/action/button-group.js

@@ -0,0 +1,130 @@
+import "./button-group.css"
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { on } from '@ember/modifier';
+import { fn, hash } from '@ember/helper';
+import Button from './button.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i, n } from 'decorator-transforms/runtime';
+
+;
+
+class ButtonGroup extends Component {
+  static {
+    g(this.prototype, "internalValue", [tracked]);
+  }
+  #internalValue = (i(this, "internalValue"), void 0);
+  constructor(owner, args) {
+    super(owner, args);
+    const defaultVal = args.defaultValue;
+    if (this.selectionType === 'multiple') {
+      this.internalValue = Array.isArray(defaultVal) ? [...defaultVal] : defaultVal ? [defaultVal] : [];
+    } else {
+      this.internalValue = Array.isArray(defaultVal) ? defaultVal[0] ?? '' : defaultVal ?? '';
+    }
+  }
+  get selectionType() {
+    return this.args.type ?? 'single';
+  }
+  get isControlled() {
+    return this.args.value !== undefined;
+  }
+  get selectedValue() {
+    return this.isControlled ? this.args.value ?? '' : this.internalValue;
+  }
+  get variant() {
+    return this.args.variant ?? 'outline';
+  }
+  get tone() {
+    return this.args.tone ?? 'neutral';
+  }
+  get size() {
+    return this.args.size ?? 'md';
+  }
+  get normalizedOptions() {
+    if (!this.args.options) return [];
+    return this.args.options.map(option => {
+      if (typeof option === 'string') {
+        return {
+          value: option,
+          label: option
+        };
+      }
+      return option;
+    });
+  }
+  isValueSelected = value => {
+    if (this.selectionType === 'multiple') {
+      const selected = this.selectedValue;
+      return Array.isArray(selected) ? selected.includes(value) : selected === value;
+    }
+    return this.selectedValue === value;
+  };
+  isFirst = index => index === 0;
+  isLast = index => index === this.normalizedOptions.length - 1;
+  handleSelect(value) {
+    if (this.selectionType === 'multiple') {
+      const current = this.selectedValue;
+      const currentArray = Array.isArray(current) ? current : [current];
+      let newValues;
+      if (currentArray.includes(value)) {
+        newValues = currentArray.filter(v => v !== value);
+      } else {
+        newValues = [...currentArray, value];
+      }
+      if (!this.isControlled) {
+        this.internalValue = newValues;
+      }
+      this.args.onChange?.(newValues);
+    } else {
+      if (this.selectedValue === value) return;
+      if (!this.isControlled) {
+        this.internalValue = value;
+      }
+      this.args.onChange?.(value);
+    }
+  }
+  static {
+    n(this.prototype, "handleSelect", [action]);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<div class=\"button-group_e47b39f9a\" role=\"group\" aria-label={{@aria-label}} data-full-width={{if @isFullWidth \"true\"}} data-test-button-group ...attributes>\n  {{#if (has-block)}}\n    {{yield (hash Item=(component ButtonGroupItem groupVariant=this.variant groupTone=this.tone groupSize=this.size groupDisabled=@isDisabled groupFullWidth=@isFullWidth isValueSelected=this.isValueSelected onItemClick=this.handleSelect))}}\n  {{else}}\n    {{#each this.normalizedOptions as |option index|}}\n      <Button @variant={{this.variant}} @tone={{this.tone}} @size={{this.size}} @isPressed={{this.isValueSelected option.value}} @isDisabled={{if @isDisabled true option.disabled}} @isFullWidth={{@isFullWidth}} @joinLeft={{if (this.isFirst index) false true}} @joinRight={{if (this.isLast index) false true}} {{on \"click\" (fn this.handleSelect option.value)}}>\n        {{option.label}}\n      </Button>\n    {{/each}}\n  {{/if}}\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        hash,
+        ButtonGroupItem,
+        Button,
+        on,
+        fn
+      })
+    }), this);
+  }
+}
+class ButtonGroupItem extends Component {
+  get isDisabled() {
+    return this.args.isDisabled ?? this.args.groupDisabled ?? false;
+  }
+  get isPressed() {
+    return this.args.isValueSelected(this.args.value);
+  }
+  handleClick() {
+    this.args.onItemClick(this.args.value);
+  }
+  static {
+    n(this.prototype, "handleClick", [action]);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<Button @variant={{@groupVariant}} @tone={{@groupTone}} @size={{@groupSize}} @isPressed={{this.isPressed}} @isDisabled={{this.isDisabled}} @isFullWidth={{@groupFullWidth}} @joinLeft={{@joinLeft}} @joinRight={{@joinRight}} {{on \"click\" this.handleClick}} ...attributes>\n  {{yield}}\n</Button>", {
+      strictMode: true,
+      scope: () => ({
+        Button,
+        on
+      })
+    }), this);
+  }
+}
+
+export { ButtonGroup as default };
+//# sourceMappingURL=button-group.js.map

package/dist/action/button-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-group.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/action/button.css

@@ -358,3 +358,155 @@
     transform: rotate(360deg);
   }
 }
+
+/* ===================================
+ * Pressed State (Outline variant)
+ * =================================== */
+
+/* Neutral */
+.button_e0e07a6eb[data-pressed="true"][data-variant="outline"][data-tone="neutral"],
+.button_e0e07a6eb[data-pressed="true"][data-variant="solid"][data-tone="neutral"] {
+  background: var(--color-bg-fill-neutral);
+  color: var(--color-text-on-neutral);
+  border-color: var(--color-bg-fill-neutral);
+}
+
+.button_e0e07a6eb[data-pressed="true"][data-variant="outline"][data-tone="neutral"]:hover:not(
+    :disabled
+  ),
+.button_e0e07a6eb[data-pressed="true"][data-variant="solid"][data-tone="neutral"]:hover:not(
+    :disabled
+  ) {
+  background: var(--color-bg-fill-neutral-hover);
+  border-color: var(--color-bg-fill-neutral-hover);
+}
+
+.button_e0e07a6eb[data-pressed="true"][data-variant="outline"][data-tone="neutral"]:active:not(
+    :disabled
+  ),
+.button_e0e07a6eb[data-pressed="true"][data-variant="solid"][data-tone="neutral"]:active:not(
+    :disabled
+  ) {
+  background: var(--color-bg-fill-neutral-active);
+  border-color: var(--color-bg-fill-neutral-active);
+}
+
+/* Primary */
+.button_e0e07a6eb[data-pressed="true"][data-variant="outline"][data-tone="primary"],
+.button_e0e07a6eb[data-pressed="true"][data-variant="solid"][data-tone="primary"] {
+  background: var(--color-bg-fill-primary);
+  color: var(--color-text-on-primary);
+  border-color: var(--color-bg-fill-primary);
+}
+
+.button_e0e07a6eb[data-pressed="true"][data-variant="outline"][data-tone="primary"]:hover:not(
+    :disabled
+  ),
+.button_e0e07a6eb[data-pressed="true"][data-variant="solid"][data-tone="primary"]:hover:not(
+    :disabled
+  ) {
+  background: var(--color-bg-fill-primary-hover);
+  border-color: var(--color-bg-fill-primary-hover);
+}
+
+.button_e0e07a6eb[data-pressed="true"][data-variant="outline"][data-tone="primary"]:active:not(
+    :disabled
+  ),
+.button_e0e07a6eb[data-pressed="true"][data-variant="solid"][data-tone="primary"]:active:not(
+    :disabled
+  ) {
+  background: var(--color-bg-fill-primary-active);
+  border-color: var(--color-bg-fill-primary-active);
+}
+
+/* Critical */
+.button_e0e07a6eb[data-pressed="true"][data-variant="outline"][data-tone="critical"],
+.button_e0e07a6eb[data-pressed="true"][data-variant="solid"][data-tone="critical"] {
+  background: var(--color-bg-fill-critical);
+  color: var(--color-text-on-critical);
+  border-color: var(--color-bg-fill-critical);
+}
+
+.button_e0e07a6eb[data-pressed="true"][data-variant="outline"][data-tone="critical"]:hover:not(
+    :disabled
+  ),
+.button_e0e07a6eb[data-pressed="true"][data-variant="solid"][data-tone="critical"]:hover:not(
+    :disabled
+  ) {
+  background: var(--color-bg-fill-critical-hover);
+  border-color: var(--color-bg-fill-critical-hover);
+}
+
+.button_e0e07a6eb[data-pressed="true"][data-variant="outline"][data-tone="critical"]:active:not(
+    :disabled
+  ),
+.button_e0e07a6eb[data-pressed="true"][data-variant="solid"][data-tone="critical"]:active:not(
+    :disabled
+  ) {
+  background: var(--color-bg-fill-critical-active);
+  border-color: var(--color-bg-fill-critical-active);
+}
+
+/* ===================================
+ * Join (joinLeft / joinRight)
+ * =================================== */
+
+.button_e0e07a6eb[data-join-left="true"] {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  margin-left: -1px;
+}
+
+.button_e0e07a6eb[data-join-right="true"] {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+/* Instant feedback for joined buttons (e.g. segmented groups) */
+.button_e0e07a6eb[data-join-left="true"],
+.button_e0e07a6eb[data-join-right="true"] {
+  transition: none;
+}
+
+/* Prevent border-color shift on hover for joined neutral buttons */
+.button_e0e07a6eb[data-join-left="true"][data-variant="outline"][data-tone="neutral"]:hover:not(
+    :disabled
+  ),
+.button_e0e07a6eb[data-join-right="true"][data-variant="outline"][data-tone="neutral"]:hover:not(
+    :disabled
+  ),
+.button_e0e07a6eb[data-join-left="true"][data-variant="outline"][data-tone="neutral"]:active:not(
+    :disabled
+  ),
+.button_e0e07a6eb[data-join-right="true"][data-variant="outline"][data-tone="neutral"]:active:not(
+    :disabled
+  ) {
+  border-color: var(--color-border-neutral);
+}
+
+.button_e0e07a6eb[data-join-left="true"][data-variant="solid"][data-tone="neutral"]:hover:not(
+    :disabled
+  ),
+.button_e0e07a6eb[data-join-right="true"][data-variant="solid"][data-tone="neutral"]:hover:not(
+    :disabled
+  ),
+.button_e0e07a6eb[data-join-left="true"][data-variant="solid"][data-tone="neutral"]:active:not(
+    :disabled
+  ),
+.button_e0e07a6eb[data-join-right="true"][data-variant="solid"][data-tone="neutral"]:active:not(
+    :disabled
+  ) {
+  border-color: var(--color-border-control);
+  box-shadow: none;
+}
+
+/* Ensure active/focused joined button appears above neighbors */
+.button_e0e07a6eb[data-join-left="true"]:hover,
+.button_e0e07a6eb[data-join-right="true"]:hover,
+.button_e0e07a6eb[data-join-left="true"]:focus-visible,
+.button_e0e07a6eb[data-join-right="true"]:focus-visible,
+.button_e0e07a6eb[data-join-left="true"][data-pressed="true"],
+.button_e0e07a6eb[data-join-right="true"][data-pressed="true"] {
+  z-index: 1;
+  position: relative;
+}

package/dist/action/button.js

@@ -37,7 +37,7 @@ class Button extends Component {
     }
   };
   static {
-    setComponentTemplate(precompileTemplate("{{#if this.isLink}}\n  <a class=\"button_e0e07a6eb\" href={{@href}} target={{@target}} aria-label={{@aria-label}} aria-busy={{if @isLoading \"true\"}} data-variant={{this.variant}} data-tone={{this.tone}} data-size={{this.size}} data-loading={{if @isLoading \"true\"}} data-disabled={{if this.isDisabledOrLoading \"true\"}} data-full-width={{if @isFullWidth \"true\"}} data-icon-only={{if (has-block) \"false\" \"true\"}} data-pressed={{this.ariaPressed}} data-test-button {{on \"click\" this.handleLinkClick}} ...attributes>\n    {{#if @isLoading}}\n      <span class=\"button-spinner_e0e07a6eb\" data-test-button-spinner></span>\n    {{/if}}\n    {{#if (has-block \"prefix\")}}\n      <span class=\"button-prefix_e0e07a6eb\" data-test-button-prefix>\n        {{yield to=\"prefix\"}}\n      </span>\n    {{/if}}\n    <span class=\"button-label_e0e07a6eb\">\n      {{#if @isLoading}}\n        {{#if @loadingText}}\n          {{@loadingText}}\n        {{else}}\n          {{yield}}\n        {{/if}}\n      {{else}}\n        {{yield}}\n      {{/if}}\n    </span>\n    {{#if (has-block \"suffix\")}}\n      <span class=\"button-suffix_e0e07a6eb\" data-test-button-suffix>\n        {{yield to=\"suffix\"}}\n      </span>\n    {{/if}}\n  </a>\n{{else}}\n  <button class=\"button_e0e07a6eb\" type={{this.buttonType}} disabled={{this.isDisabledOrLoading}} aria-label={{@aria-label}} aria-busy={{if @isLoading \"true\"}} aria-pressed={{this.ariaPressed}} data-variant={{this.variant}} data-tone={{this.tone}} data-size={{this.size}} data-loading={{if @isLoading \"true\"}} data-disabled={{if @isDisabled \"true\"}} data-full-width={{if @isFullWidth \"true\"}} data-icon-only={{if (has-block) \"false\" \"true\"}} data-pressed={{this.ariaPressed}} data-test-button ...attributes>\n    {{#if @isLoading}}\n      <span class=\"button-spinner_e0e07a6eb\" data-test-button-spinner></span>\n    {{/if}}\n    {{#if (has-block \"prefix\")}}\n      <span class=\"button-prefix_e0e07a6eb\" data-test-button-prefix>\n        {{yield to=\"prefix\"}}\n      </span>\n    {{/if}}\n    <span class=\"button-label_e0e07a6eb\">\n      {{#if @isLoading}}\n        {{#if @loadingText}}\n          {{@loadingText}}\n        {{else}}\n          {{yield}}\n        {{/if}}\n      {{else}}\n        {{yield}}\n      {{/if}}\n    </span>\n    {{#if (has-block \"suffix\")}}\n      <span class=\"button-suffix_e0e07a6eb\" data-test-button-suffix>\n        {{yield to=\"suffix\"}}\n      </span>\n    {{/if}}\n  </button>\n{{/if}}", {
+    setComponentTemplate(precompileTemplate("{{#if this.isLink}}\n  <a class=\"button_e0e07a6eb\" href={{@href}} target={{@target}} aria-label={{@aria-label}} aria-busy={{if @isLoading \"true\"}} data-variant={{this.variant}} data-tone={{this.tone}} data-size={{this.size}} data-loading={{if @isLoading \"true\"}} data-disabled={{if this.isDisabledOrLoading \"true\"}} data-full-width={{if @isFullWidth \"true\"}} data-icon-only={{if (has-block) \"false\" \"true\"}} data-pressed={{this.ariaPressed}} data-join-left={{if @joinLeft \"true\"}} data-join-right={{if @joinRight \"true\"}} data-test-button {{on \"click\" this.handleLinkClick}} ...attributes>\n    {{#if @isLoading}}\n      <span class=\"button-spinner_e0e07a6eb\" data-test-button-spinner></span>\n    {{/if}}\n    {{#if (has-block \"prefix\")}}\n      <span class=\"button-prefix_e0e07a6eb\" data-test-button-prefix>\n        {{yield to=\"prefix\"}}\n      </span>\n    {{/if}}\n    <span class=\"button-label_e0e07a6eb\">\n      {{#if @isLoading}}\n        {{#if @loadingText}}\n          {{@loadingText}}\n        {{else}}\n          {{yield}}\n        {{/if}}\n      {{else}}\n        {{yield}}\n      {{/if}}\n    </span>\n    {{#if (has-block \"suffix\")}}\n      <span class=\"button-suffix_e0e07a6eb\" data-test-button-suffix>\n        {{yield to=\"suffix\"}}\n      </span>\n    {{/if}}\n  </a>\n{{else}}\n  <button class=\"button_e0e07a6eb\" type={{this.buttonType}} disabled={{this.isDisabledOrLoading}} aria-label={{@aria-label}} aria-busy={{if @isLoading \"true\"}} aria-pressed={{this.ariaPressed}} data-variant={{this.variant}} data-tone={{this.tone}} data-size={{this.size}} data-loading={{if @isLoading \"true\"}} data-disabled={{if @isDisabled \"true\"}} data-full-width={{if @isFullWidth \"true\"}} data-icon-only={{if (has-block) \"false\" \"true\"}} data-pressed={{this.ariaPressed}} data-join-left={{if @joinLeft \"true\"}} data-join-right={{if @joinRight \"true\"}} data-test-button ...attributes>\n    {{#if @isLoading}}\n      <span class=\"button-spinner_e0e07a6eb\" data-test-button-spinner></span>\n    {{/if}}\n    {{#if (has-block \"prefix\")}}\n      <span class=\"button-prefix_e0e07a6eb\" data-test-button-prefix>\n        {{yield to=\"prefix\"}}\n      </span>\n    {{/if}}\n    <span class=\"button-label_e0e07a6eb\">\n      {{#if @isLoading}}\n        {{#if @loadingText}}\n          {{@loadingText}}\n        {{else}}\n          {{yield}}\n        {{/if}}\n      {{else}}\n        {{yield}}\n      {{/if}}\n    </span>\n    {{#if (has-block \"suffix\")}}\n      <span class=\"button-suffix_e0e07a6eb\" data-test-button-suffix>\n        {{yield to=\"suffix\"}}\n      </span>\n    {{/if}}\n  </button>\n{{/if}}", {
       strictMode: true,
       scope: () => ({
         on

package/dist/action/index.js

@@ -1,3 +1,4 @@
 export { default as Button } from './button.js';
+export { default as ButtonGroup } from './button-group.js';
 export { default as Link } from './link.js';
 //# sourceMappingURL=index.js.map

package/dist/action/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/data/table.css

@@ -1,8 +1,9 @@
+/* src/data/table.css */
 /* ============================================================================
    Table Component Styles
    ============================================================================ */
 
-.table {
+.table_e4aed93fe {
   width: 100%;
   border-collapse: collapse;
   font-size: var(--font-size-sm);
@@ -10,11 +11,11 @@
   background-color: var(--color-bg-surface);
 }
 
-.table:focus {
+.table_e4aed93fe:focus {
   outline: none;
 }
 
-.table:focus-visible {
+.table_e4aed93fe:focus-visible {
   /* Focus is tracked on individual rows, not the table container */
   outline: none;
 }
@@ -23,7 +24,7 @@
    Caption
    ============================================================================ */
 
-.caption {
+.caption_e4aed93fe {
   padding: var(--spacing-3);
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-medium);
@@ -36,22 +37,22 @@
    Header
    ============================================================================ */
 
-.thead {
+.thead_e4aed93fe {
   background-color: var(--color-bg-surface);
 }
 
-.table[data-sticky-header="true"] .thead {
+.table_e4aed93fe[data-sticky-header="true"] .thead_e4aed93fe {
   position: sticky;
   top: 0;
   z-index: 1;
   background-color: var(--color-bg-surface);
 }
 
-.header-row {
+.header-row_e4aed93fe {
   border-bottom: var(--border-width-1) solid var(--color-border);
 }
 
-.header-cell {
+.header-cell_e4aed93fe {
   padding: var(--spacing-3) var(--spacing-4);
   font-weight: var(--font-weight-medium);
   color: var(--color-text-secondary);
@@ -60,30 +61,30 @@
   vertical-align: middle;
 }
 
-.table[data-compact="true"] .header-cell {
+.table_e4aed93fe[data-compact="true"] .header-cell_e4aed93fe {
   padding: var(--spacing-2) var(--spacing-3);
 }
 
-.header-cell[data-align="center"] {
+.header-cell_e4aed93fe[data-align="center"] {
   text-align: center;
 }
 
-.header-cell[data-align="right"] {
+.header-cell_e4aed93fe[data-align="right"] {
   text-align: right;
 }
 
-.header-cell[data-sortable="true"] {
+.header-cell_e4aed93fe[data-sortable="true"] {
   padding: 0;
   cursor: pointer;
   user-select: none;
 }
 
-.header-cell[data-sortable="true"]:hover {
+.header-cell_e4aed93fe[data-sortable="true"]:hover {
   color: var(--color-text);
   background-color: var(--color-bg-hover-subtle);
 }
 
-.header-cell[data-sorted="true"] {
+.header-cell_e4aed93fe[data-sorted="true"] {
   color: var(--color-text);
 }
 
@@ -91,7 +92,7 @@
    Sort Button
    ============================================================================ */
 
-.sort-button {
+.sort-button_e4aed93fe {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -107,20 +108,20 @@
   text-align: inherit;
 }
 
-.table[data-compact="true"] .sort-button {
+.table_e4aed93fe[data-compact="true"] .sort-button_e4aed93fe {
   padding: var(--spacing-2) var(--spacing-3);
 }
 
-.sort-button:focus-visible {
+.sort-button_e4aed93fe:focus-visible {
   outline: 2px solid var(--color-border-focus);
   outline-offset: -2px;
 }
 
-.header-text {
+.header-text_e4aed93fe {
   display: inline;
 }
 
-.sort-icon {
+.sort-icon_e4aed93fe {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -128,16 +129,16 @@
   height: var(--spacing-4);
 }
 
-.sort-icon .icon {
+.sort-icon_e4aed93fe .icon_e4aed93fe {
   width: var(--spacing-3);
   height: var(--spacing-3);
 }
 
-.sort-icon .icon-unsorted {
+.sort-icon_e4aed93fe .icon-unsorted_e4aed93fe {
   opacity: 0.4;
 }
 
-.header-cell[data-sortable="true"]:hover .icon-unsorted {
+.header-cell_e4aed93fe[data-sortable="true"]:hover .icon-unsorted_e4aed93fe {
   opacity: 0.7;
 }
 
@@ -145,46 +146,46 @@
    Body
    ============================================================================ */
 
-.tbody {
+.tbody_e4aed93fe {
   background-color: var(--color-bg-surface);
 }
 
-.row {
+.row_e4aed93fe {
   border-bottom: var(--border-width-1) solid var(--color-border);
   transition: background-color 0.1s ease;
 }
 
-.row:last-child {
+.row_e4aed93fe:last-child {
   border-bottom: none;
 }
 
-.row:hover {
+.row_e4aed93fe:hover {
   background-color: var(--color-bg-hover-subtle);
 }
 
-.row[data-disabled="true"] {
+.row_e4aed93fe[data-disabled="true"] {
   opacity: 0.5;
   pointer-events: none;
 }
 
-.row[data-disabled="true"]:hover {
+.row_e4aed93fe[data-disabled="true"]:hover {
   background-color: transparent;
 }
 
-.row[data-selected="true"] {
+.row_e4aed93fe[data-selected="true"] {
   background-color: var(--color-bg-fill-accent-subtle);
 }
 
-.row[data-selected="true"]:hover {
+.row_e4aed93fe[data-selected="true"]:hover {
   background-color: var(--color-bg-fill-accent-subtle-hover);
 }
 
-.row[data-focused="true"] {
+.row_e4aed93fe[data-focused="true"] {
   outline: 2px solid var(--color-border-focus);
   outline-offset: -2px;
 }
 
-.row[data-clickable="true"] {
+.row_e4aed93fe[data-clickable="true"] {
   cursor: pointer;
 }
 
@@ -192,24 +193,24 @@
    Cells
    ============================================================================ */
 
-.cell {
+.cell_e4aed93fe {
   padding: var(--spacing-3) var(--spacing-4);
   vertical-align: middle;
 }
 
-.table[data-compact="true"] .cell {
+.table_e4aed93fe[data-compact="true"] .cell_e4aed93fe {
   padding: var(--spacing-2) var(--spacing-3);
 }
 
-.cell[data-align="center"] {
+.cell_e4aed93fe[data-align="center"] {
   text-align: center;
 }
 
-.cell[data-align="right"] {
+.cell_e4aed93fe[data-align="right"] {
   text-align: right;
 }
 
-.checkbox-cell {
+.checkbox-cell_e4aed93fe {
   width: var(--spacing-10);
   padding-right: 0;
 }
@@ -218,8 +219,8 @@
    Bordered Variant
    ============================================================================ */
 
-.table[data-bordered="true"] .cell,
-.table[data-bordered="true"] .header-cell {
+.table_e4aed93fe[data-bordered="true"] .cell_e4aed93fe,
+.table_e4aed93fe[data-bordered="true"] .header-cell_e4aed93fe {
   border: var(--border-width-1) solid var(--color-border);
 }
 
@@ -227,15 +228,15 @@
    Striped Variant
    ============================================================================ */
 
-.table[data-striped="true"] .row:nth-child(odd) {
+.table_e4aed93fe[data-striped="true"] .row_e4aed93fe:nth-child(odd.e4aed93fe) {
   background-color: var(--color-bg-surface-sunken);
 }
 
-.table[data-striped="true"] .row:nth-child(odd):hover {
+.table_e4aed93fe[data-striped="true"] .row_e4aed93fe:nth-child(odd.e4aed93fe):hover {
   background-color: var(--color-bg-hover-subtle);
 }
 
-.table[data-striped="true"] .row[data-selected="true"]:nth-child(odd) {
+.table_e4aed93fe[data-striped="true"] .row_e4aed93fe[data-selected="true"]:nth-child(odd.e4aed93fe) {
   background-color: var(--color-bg-fill-accent-subtle);
 }
 
@@ -243,15 +244,15 @@
    Empty State
    ============================================================================ */
 
-.empty-row {
+.empty-row_e4aed93fe {
   background-color: transparent;
 }
 
-.empty-row:hover {
+.empty-row_e4aed93fe:hover {
   background-color: transparent;
 }
 
-.empty-cell {
+.empty-cell_e4aed93fe {
   padding: var(--spacing-8) var(--spacing-4);
   text-align: center;
   color: var(--color-text-secondary);
@@ -261,10 +262,10 @@
    Loading State
    ============================================================================ */
 
-.skeleton-row {
+.skeleton-row_e4aed93fe {
   pointer-events: none;
 }
 
-.table[data-loading="true"] {
+.table_e4aed93fe[data-loading="true"] {
   pointer-events: none;
 }

package/dist/data/table.js

@@ -440,7 +440,7 @@ class Table extends Component {
   // Template
   // ============================================================================
   static {
-    setComponentTemplate(precompileTemplate("<table class=\"table\" data-sticky-header={{if @hasStickyHeader \"true\"}} data-striped={{if @isStriped \"true\"}} data-bordered={{if @isBordered \"true\"}} data-compact={{if @isCompact \"true\"}} data-loading={{if @isLoading \"true\"}} data-test-table tabindex=\"0\" {{this.setupRef}} {{!-- template-lint-disable no-pointer-down-event-binding --}} {{on \"mousedown\" this.handleMouseDown}} {{on \"keydown\" this.handleKeyDown}} {{on \"focus\" this.handleFocus}} {{on \"blur\" this.handleBlur}} ...attributes>\n  {{#if @caption}}\n    <caption class=\"caption\" data-test-table-caption>\n      {{@caption}}\n    </caption>\n  {{/if}}\n\n  <thead class=\"thead\" data-test-table-header>\n    <tr class=\"header-row\">\n      {{#if @isSelectable}}\n        <th class=\"header-cell checkbox-cell\" data-test-table-header-checkbox>\n          <Checkbox @isChecked={{this.allRowsSelected}} @isIndeterminate={{this.someRowsSelected}} @isLabelHidden={{true}} @label=\"Select all rows\" @size=\"sm\" data-table-checkbox {{on \"change\" this.handleSelectAll}} />\n        </th>\n      {{/if}}\n\n      {{#each this.visibleColumns as |column|}}\n        <th class=\"header-cell\" data-align={{column.align}} data-sortable={{if (this.isColumnSortable column) \"true\"}} data-sorted={{if (this.getColumnSortDirection column) \"true\"}} data-sort-direction={{this.getColumnSortDirection column}} aria-sort={{this.getAriaSortValue column}} style={{if column.width (concat \"width:\" column.width \";\")}} data-test-table-header-cell data-test-column-id={{column.id}}>\n          {{#if (this.isColumnSortable column)}}\n            <button type=\"button\" class=\"sort-button\" {{on \"click\" (fn this.handleSort column)}} data-test-table-sort-button>\n              <span class=\"header-text\">{{column.header}}</span>\n              <span class=\"sort-icon\" aria-hidden=\"true\">\n                {{#if (this.getColumnSortDirection column)}}\n                  {{#if (eq (this.getColumnSortDirection column) \"asc\")}}\n                    <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon\">\n                      <path d=\"M4 10l4-4 4 4\" />\n                    </svg>\n                  {{else}}\n                    <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon\">\n                      <path d=\"M4 6l4 4 4-4\" />\n                    </svg>\n                  {{/if}}\n                {{else}}\n                  <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon icon-unsorted\">\n                    <path d=\"M4 6l4-3 4 3M4 10l4 3 4-3\" />\n                  </svg>\n                {{/if}}\n              </span>\n            </button>\n          {{else}}\n            <span class=\"header-text\">{{column.header}}</span>\n          {{/if}}\n        </th>\n      {{/each}}\n    </tr>\n  </thead>\n\n  <tbody class=\"tbody\" data-test-table-body>\n    {{#if @isLoading}}\n      {{#if (has-block \"loading\")}}\n        {{yield to=\"loading\"}}\n      {{else}}\n        {{!-- template-lint-disable no-unused-block-params --}}\n        {{#each (repeat this.loadingRowCount)}}\n          <tr class=\"row skeleton-row\" data-test-table-skeleton-row>\n            {{#if @isSelectable}}\n              <td class=\"cell checkbox-cell\">\n                <Skeleton @width={{16}} @height={{16}} @radius=\"sm\" />\n              </td>\n            {{/if}}\n            {{#each this.visibleColumns as |column|}}\n              <td class=\"cell\" data-align={{column.align}}>\n                <Skeleton @width=\"70%\" @height={{16}} />\n              </td>\n            {{/each}}\n          </tr>\n        {{/each}}\n      {{/if}}\n    {{else if this.isEmpty}}\n      {{#if (has-block \"empty\")}}\n        <tr class=\"empty-row\">\n          <td colspan={{if @isSelectable (add (len this.visibleColumns) 1) (len this.visibleColumns)}}>\n            {{yield to=\"empty\"}}\n          </td>\n        </tr>\n      {{else}}\n        <tr class=\"empty-row\" data-test-table-empty>\n          <td class=\"empty-cell\" colspan={{if @isSelectable (add (len this.visibleColumns) 1) (len this.visibleColumns)}}>\n            {{#if @emptyMessage}}\n              {{@emptyMessage}}\n            {{else}}\n              No data available\n            {{/if}}\n          </td>\n        </tr>\n      {{/if}}\n    {{else}}\n      {{#each this.displayData as |row rowIndex|}}\n        {{!-- template-lint-disable no-invalid-interactive --}}\n        <tr id={{this.getRowElementId row}} class=\"row\" data-selected={{if (this.isRowSelected row) \"true\" \"false\"}} data-focused={{if (this.isRowFocused rowIndex) \"true\" \"false\"}} data-disabled={{if (@isRowDisabled row) \"true\" \"false\"}} data-clickable={{if @onRowClick \"true\"}} aria-selected={{if @isSelectable (if (this.isRowSelected row) \"true\" \"false\")}} data-test-table-row data-test-row-id={{this.getRowId row}} {{on \"click\" (fn this.handleRowClick row)}}>\n          {{#if @isSelectable}}\n            <td class=\"cell checkbox-cell\" data-test-table-row-checkbox>\n              <Checkbox @isChecked={{this.isRowSelected row}} @isDisabled={{@isRowDisabled row}} @isLabelHidden={{true}} @label=\"Select row\" @size=\"sm\" data-table-checkbox {{on \"click\" (fn this.handleRowSelect row)}} />\n            </td>\n          {{/if}}\n\n          {{#each this.visibleColumns as |column|}}\n            <td class=\"cell\" data-align={{column.align}} data-test-table-cell data-test-column-id={{column.id}}>\n              {{#if (has-block \"cell\")}}\n                {{yield (this.getCellContext row column rowIndex) to=\"cell\"}}\n              {{else}}\n                {{this.formatCellValue row column}}\n              {{/if}}\n            </td>\n          {{/each}}\n        </tr>\n      {{/each}}\n    {{/if}}\n  </tbody>\n</table>", {
+    setComponentTemplate(precompileTemplate("<table class=\"table_e4aed93fe\" data-sticky-header={{if @hasStickyHeader \"true\"}} data-striped={{if @isStriped \"true\"}} data-bordered={{if @isBordered \"true\"}} data-compact={{if @isCompact \"true\"}} data-loading={{if @isLoading \"true\"}} data-test-table tabindex=\"0\" {{this.setupRef}} {{!-- template-lint-disable no-pointer-down-event-binding --}} {{on \"mousedown\" this.handleMouseDown}} {{on \"keydown\" this.handleKeyDown}} {{on \"focus\" this.handleFocus}} {{on \"blur\" this.handleBlur}} ...attributes>\n  {{#if @caption}}\n    <caption class=\"caption_e4aed93fe\" data-test-table-caption>\n      {{@caption}}\n    </caption>\n  {{/if}}\n\n  <thead class=\"thead_e4aed93fe\" data-test-table-header>\n    <tr class=\"header-row_e4aed93fe\">\n      {{#if @isSelectable}}\n        <th class=\"header-cell_e4aed93fe checkbox-cell_e4aed93fe\" data-test-table-header-checkbox>\n          <Checkbox @isChecked={{this.allRowsSelected}} @isIndeterminate={{this.someRowsSelected}} @isLabelHidden={{true}} @label=\"Select all rows\" @size=\"sm\" data-table-checkbox {{on \"change\" this.handleSelectAll}} />\n        </th>\n      {{/if}}\n\n      {{#each this.visibleColumns as |column|}}\n        <th class=\"header-cell_e4aed93fe\" data-align={{column.align}} data-sortable={{if (this.isColumnSortable column) \"true\"}} data-sorted={{if (this.getColumnSortDirection column) \"true\"}} data-sort-direction={{this.getColumnSortDirection column}} aria-sort={{this.getAriaSortValue column}} style={{if column.width (concat \"width:\" column.width \";\")}} data-test-table-header-cell data-test-column-id={{column.id}}>\n          {{#if (this.isColumnSortable column)}}\n            <button type=\"button\" class=\"sort-button_e4aed93fe\" {{on \"click\" (fn this.handleSort column)}} data-test-table-sort-button>\n              <span class=\"header-text_e4aed93fe\">{{column.header}}</span>\n              <span class=\"sort-icon_e4aed93fe\" aria-hidden=\"true\">\n                {{#if (this.getColumnSortDirection column)}}\n                  {{#if (eq (this.getColumnSortDirection column) \"asc\")}}\n                    <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon_e4aed93fe\">\n                      <path d=\"M4 10l4-4 4 4\" />\n                    </svg>\n                  {{else}}\n                    <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon_e4aed93fe\">\n                      <path d=\"M4 6l4 4 4-4\" />\n                    </svg>\n                  {{/if}}\n                {{else}}\n                  <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"icon_e4aed93fe icon-unsorted_e4aed93fe\">\n                    <path d=\"M4 6l4-3 4 3M4 10l4 3 4-3\" />\n                  </svg>\n                {{/if}}\n              </span>\n            </button>\n          {{else}}\n            <span class=\"header-text_e4aed93fe\">{{column.header}}</span>\n          {{/if}}\n        </th>\n      {{/each}}\n    </tr>\n  </thead>\n\n  <tbody class=\"tbody_e4aed93fe\" data-test-table-body>\n    {{#if @isLoading}}\n      {{#if (has-block \"loading\")}}\n        {{yield to=\"loading\"}}\n      {{else}}\n        {{!-- template-lint-disable no-unused-block-params --}}\n        {{#each (repeat this.loadingRowCount)}}\n          <tr class=\"row_e4aed93fe skeleton-row_e4aed93fe\" data-test-table-skeleton-row>\n            {{#if @isSelectable}}\n              <td class=\"cell_e4aed93fe checkbox-cell_e4aed93fe\">\n                <Skeleton @width={{16}} @height={{16}} @radius=\"sm\" />\n              </td>\n            {{/if}}\n            {{#each this.visibleColumns as |column|}}\n              <td class=\"cell_e4aed93fe\" data-align={{column.align}}>\n                <Skeleton @width=\"70%\" @height={{16}} />\n              </td>\n            {{/each}}\n          </tr>\n        {{/each}}\n      {{/if}}\n    {{else if this.isEmpty}}\n      {{#if (has-block \"empty\")}}\n        <tr class=\"empty-row_e4aed93fe\">\n          <td colspan={{if @isSelectable (add (len this.visibleColumns) 1) (len this.visibleColumns)}}>\n            {{yield to=\"empty\"}}\n          </td>\n        </tr>\n      {{else}}\n        <tr class=\"empty-row_e4aed93fe\" data-test-table-empty>\n          <td class=\"empty-cell_e4aed93fe\" colspan={{if @isSelectable (add (len this.visibleColumns) 1) (len this.visibleColumns)}}>\n            {{#if @emptyMessage}}\n              {{@emptyMessage}}\n            {{else}}\n              No data available\n            {{/if}}\n          </td>\n        </tr>\n      {{/if}}\n    {{else}}\n      {{#each this.displayData as |row rowIndex|}}\n        {{!-- template-lint-disable no-invalid-interactive --}}\n        <tr id={{this.getRowElementId row}} class=\"row_e4aed93fe\" data-selected={{if (this.isRowSelected row) \"true\" \"false\"}} data-focused={{if (this.isRowFocused rowIndex) \"true\" \"false\"}} data-disabled={{if (@isRowDisabled row) \"true\" \"false\"}} data-clickable={{if @onRowClick \"true\"}} aria-selected={{if @isSelectable (if (this.isRowSelected row) \"true\" \"false\")}} data-test-table-row data-test-row-id={{this.getRowId row}} {{on \"click\" (fn this.handleRowClick row)}}>\n          {{#if @isSelectable}}\n            <td class=\"cell_e4aed93fe checkbox-cell_e4aed93fe\" data-test-table-row-checkbox>\n              <Checkbox @isChecked={{this.isRowSelected row}} @isDisabled={{@isRowDisabled row}} @isLabelHidden={{true}} @label=\"Select row\" @size=\"sm\" data-table-checkbox {{on \"click\" (fn this.handleRowSelect row)}} />\n            </td>\n          {{/if}}\n\n          {{#each this.visibleColumns as |column|}}\n            <td class=\"cell_e4aed93fe\" data-align={{column.align}} data-test-table-cell data-test-column-id={{column.id}}>\n              {{#if (has-block \"cell\")}}\n                {{yield (this.getCellContext row column rowIndex) to=\"cell\"}}\n              {{else}}\n                {{this.formatCellValue row column}}\n              {{/if}}\n            </td>\n          {{/each}}\n        </tr>\n      {{/each}}\n    {{/if}}\n  </tbody>\n</table>", {
       strictMode: true,
       scope: () => ({
         on,