@daikin-oss/design-system-web-components 0.7.0 → 1.1.0

package/dist/es/components/radio/daikin-radio.js

@@ -1,7 +1,10 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html, nothing } from "lit";
-import { property, query, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html, nothing } from "lit";
+import { property, query } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -37,15 +40,19 @@ const RADIO_CLASS_NAME = cva([
   "enabled:checked:group-active:border-ddt-color-common-brand-press",
   "disabled:border-ddt-color-common-disabled"
 ])();
-const cvaLabel = cva(["pr-2"], {
+const cvaLabel = cva([], {
   variants: {
     disabled: {
       false: ["text-ddt-color-common-text-primary"],
       true: ["text-ddt-color-common-disabled"]
+    },
+    hidden: {
+      false: ["inline-block"],
+      true: ["hidden"]
     }
   }
 });
-let DaikinRadio = class extends LitElement {
+let DaikinRadio = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.name = "";
@@ -54,24 +61,24 @@ let DaikinRadio = class extends LitElement {
     this.labelPosition = "right";
     this.checked = false;
     this.disabled = false;
+    this.disabledByParent = false;
     this.skipTab = false;
     this._internals = this.attachInternals();
   }
-  /**
-   * Focuses on the inner radio.
-   * @param options focus options
-   */
-  focus(options) {
-    var _a;
-    (_a = this._radio) == null ? void 0 : _a.focus(options);
+  get _labelHidden() {
+    return this.labelPosition === "hidden";
   }
   _updateFormValue() {
     this._internals.setFormValue(this.checked ? this.value : null);
   }
   _handleClick(event) {
+    var _a;
     if (this.disabled) {
       event.preventDefault();
     }
+    if (((_a = event.target) == null ? void 0 : _a.tagName) !== "INPUT") {
+      event.stopPropagation();
+    }
   }
   _handleChange(event) {
     this.checked = event.target.checked;
@@ -84,29 +91,33 @@ let DaikinRadio = class extends LitElement {
     );
   }
   render() {
-    return html`<label class="group flex gap-2 items-center font-daikinSerif">
+    const disabled = this.disabled || this.disabledByParent;
+    return html`<label
+      class="group flex gap-2 items-center size-full font-daikinSerif"
+      @click=${this._handleClick}
+    >
       <span class="p-2">
         <input
           class=${RADIO_CLASS_NAME}
           type="radio"
           name=${this.name}
-          .value=${this.value}
-          aria-label=${this.labelPosition === "hidden" ? this.label : nothing}
-          ?disabled=${this.disabled}
+          aria-label=${this._labelHidden ? this.label : nothing}
+          tabindex=${ifDefined(this.skipTab ? "-1" : void 0)}
+          ?disabled=${disabled}
           .checked=${this.checked}
-          @click=${this._handleClick}
+          .value=${this.value}
           @change=${this._handleChange}
-          tabindex=${ifDefined(this.skipTab ? "-1" : void 0)}
         />
       </span>
-      <span
+      <slot
         class=${cvaLabel({
-      disabled: this.disabled
+      disabled,
+      hidden: this._labelHidden
     })}
-        ?hidden=${this.labelPosition === "hidden"}
+        ?hidden=${this._labelHidden}
       >
         ${this.label}
-      </span>
+      </slot>
     </label>`;
   }
   updated(changedProperties) {
@@ -114,6 +125,14 @@ let DaikinRadio = class extends LitElement {
       this._updateFormValue();
     }
   }
+  /**
+   * Focuses on the inner radio.
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    (_a = this._radio) == null ? void 0 : _a.focus(options);
+  }
 };
 DaikinRadio.styles = css`
     ${unsafeCSS(tailwindStyles)}
@@ -141,6 +160,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinRadio.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: false })
+], DaikinRadio.prototype, "disabledByParent", 2);
 __decorateClass([
   property({ type: Boolean, attribute: false })
 ], DaikinRadio.prototype, "skipTab", 2);
@@ -148,7 +170,7 @@ __decorateClass([
   query("input")
 ], DaikinRadio.prototype, "_radio", 2);
 DaikinRadio = __decorateClass([
-  customElement("daikin-radio")
+  ddsElement("daikin-radio")
 ], DaikinRadio);
 export {
   DaikinRadio

package/dist/es/components/radio-group/daikin-radio-group.d.ts

@@ -1,10 +1,11 @@
-import { LitElement, PropertyValues } from 'lit';
+import { PropertyValues } from 'lit';
+import { DDSElement } from "../../base/index.js";
 import { MergeVariantProps } from "../../type-utils.js";
 import { DaikinInputGroup } from "../input-group/index.js";
-declare const radioGroupCN: (props?: ({
+declare const cvaRadioGroup: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-type RadioGroupProps = MergeVariantProps<typeof radioGroupCN>;
+type RadioGroupProps = MergeVariantProps<typeof cvaRadioGroup>;
 /**
  * Radio groups are used to group multiple radio buttons so that make sure that only one will be selected in the group
  *
@@ -18,6 +19,11 @@ type RadioGroupProps = MergeVariantProps<typeof radioGroupCN>;
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/radio/index.js";
+ * import "@daikin-oss/design-system-web-components/components/radio-group/index.js";
+ * ```
+ *
  * ```html
  * <daikin-radio-group name="name">
  *   <daikin-radio value="value1" label="Option1"></daikin-radio>
@@ -25,18 +31,8 @@ type RadioGroupProps = MergeVariantProps<typeof radioGroupCN>;
  *   <daikin-radio value="value3" label="Option3"></daikin-radio>
  * </daikin-radio-group>
  * ```
- *
- * ```html
- * <daikin-input-group label="Label text" helper="Helper text">
- *   <daikin-radio-group name="name">
- *     <daikin-radio value="value1" label="Option1"></daikin-radio>
- *     <daikin-radio value="value2" label="Option2"></daikin-radio>
- *     <daikin-radio value="value3" label="Option3"></daikin-radio>
- *   </daikin-radio-group>
- * </daikin-input-group>
- * ```
  */
-export declare class DaikinRadioGroup extends LitElement {
+export declare class DaikinRadioGroup extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     private readonly _radios;
     /**
@@ -57,11 +53,17 @@ export declare class DaikinRadioGroup extends LitElement {
      * Controlled by `daikin-input-group` when used within `daikin-input-group`.
      */
     required: boolean;
+    /**
+     * Whether the radio group is disabled.
+     * Controlled by `daikin-input-group` when used within `daikin-input-group`.
+     */
+    disabled: boolean;
     /**
      * The label text used as the value of aria-label.
      * Set automatically by `reflectInputGroup` method.
      */
     private _label;
+    private _reflectSlotProperties;
     private _updateRadios;
     private readonly _handleRadioChange;
     private _handleSlotChange;
@@ -72,6 +74,10 @@ export declare class DaikinRadioGroup extends LitElement {
     private _handleKeyDown;
     render(): import('lit-html').TemplateResult<1>;
     protected updated(changedProperties: PropertyValues<this>): void;
+    /**
+     * This method is used by `daikin-input-group` to reflect it's attributes to this component.
+     * @private
+     */
     reflectInputGroup(inputGroup: DaikinInputGroup): void;
 }
 declare global {

package/dist/es/components/radio-group/daikin-radio-group.js

@@ -1,7 +1,10 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html } from "lit";
-import { queryAssignedElements, property, state, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html } from "lit";
+import { queryAssignedElements, property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
 import "../radio/daikin-radio.js";
 var __defProp = Object.defineProperty;
@@ -14,26 +17,32 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const radioGroupCN = cva(["flex", "gap-2", "py-2", "pr-2"], {
+const cvaRadioGroup = cva(["size-full", "flex", "gap-x-3", "gap-y-2"], {
   variants: {
     orientation: {
-      horizontal: ["flex-col"],
-      vertical: ["flex-row", "gap-3"]
+      horizontal: ["flex-row", "flex-wrap"],
+      vertical: ["flex-col"]
     }
   }
 });
-let DaikinRadioGroup = class extends LitElement {
+let DaikinRadioGroup = class extends DDSElement {
   constructor() {
     super(...arguments);
-    this.orientation = "horizontal";
+    this.orientation = "vertical";
     this.name = "";
     this.value = "";
     this.required = false;
+    this.disabled = false;
     this._label = null;
     this._handleRadioChange = (event) => {
       this.value = event.target.value;
     };
   }
+  _reflectSlotProperties() {
+    for (const radio of this._radios) {
+      radio.disabledByParent = this.disabled;
+    }
+  }
   _updateRadios() {
     const radios = this._radios;
     const selectedRadio = radios.find((radio) => radio.value === this.value);
@@ -48,6 +57,7 @@ let DaikinRadioGroup = class extends LitElement {
     }
   }
   _handleSlotChange() {
+    this._reflectSlotProperties();
     this._updateRadios();
   }
   /**
@@ -86,17 +96,18 @@ let DaikinRadioGroup = class extends LitElement {
     }
   }
   render() {
-    const radioGroupClassName = radioGroupCN({ orientation: this.orientation });
     return html`<fieldset
+      class=${cvaRadioGroup({ orientation: this.orientation })}
       role="radiogroup"
       aria-label=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
     ifDefined(this._label)}
       aria-required=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
     ifDefined(this.required)}
+      aria-disabled=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
+    ifDefined(this.disabled)}
       @keydown=${this._handleKeyDown}
     >
       <slot
-        class=${radioGroupClassName}
         @slotchange=${this._handleSlotChange}
         @change=${this._handleRadioChange}
       >
@@ -104,13 +115,19 @@ let DaikinRadioGroup = class extends LitElement {
     </fieldset>`;
   }
   updated(changedProperties) {
+    this._reflectSlotProperties();
     if (changedProperties.has("value") || changedProperties.has("name")) {
       this._updateRadios();
     }
   }
+  /**
+   * This method is used by `daikin-input-group` to reflect it's attributes to this component.
+   * @private
+   */
   reflectInputGroup(inputGroup) {
     this._label = inputGroup.label;
     this.required = !!inputGroup.required;
+    this.disabled = inputGroup.disabled;
   }
 };
 DaikinRadioGroup.styles = css`
@@ -135,11 +152,14 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinRadioGroup.prototype, "required", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinRadioGroup.prototype, "disabled", 2);
 __decorateClass([
   state()
 ], DaikinRadioGroup.prototype, "_label", 2);
 DaikinRadioGroup = __decorateClass([
-  customElement("daikin-radio-group")
+  ddsElement("daikin-radio-group")
 ], DaikinRadioGroup);
 export {
   DaikinRadioGroup

package/dist/es/components/select/daikin-select.d.ts

@@ -1,4 +1,5 @@
-import { LitElement, PropertyValues } from 'lit';
+import { PropertyValues } from 'lit';
+import { DDSElement } from "../../base/index.js";
 import { DaikinInputGroup } from "../input-group/index.js";
 /**
  * A select component.
@@ -12,6 +13,10 @@ import { DaikinInputGroup } from "../input-group/index.js";
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/select/index.js";
+ * ```
+ *
  * ```html
  * <daikin-select>
  *   <select name="select">
@@ -25,7 +30,7 @@ import { DaikinInputGroup } from "../input-group/index.js";
  * </daikin-select>
  * ```
  */
-export declare class DaikinSelect extends LitElement {
+export declare class DaikinSelect extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Whether the select component is in an error state.
@@ -51,6 +56,10 @@ export declare class DaikinSelect extends LitElement {
     private _handleSlotChange;
     render(): import('lit-html').TemplateResult<1>;
     protected updated(changedProperties: PropertyValues<this>): void;
+    /**
+     * This method is used by `daikin-input-group` to reflect it's attributes to this component.
+     * @private
+     */
     reflectInputGroup(inputGroup: DaikinInputGroup): void;
     /**
      * Focuses on the `<select>` element in the slot.

package/dist/es/components/select/daikin-select.js

@@ -1,6 +1,9 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html } from "lit";
-import { property, queryAssignedElements, state, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html } from "lit";
+import { property, queryAssignedElements, state } from "lit/decorators.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -62,7 +65,9 @@ const cvaSelect = cva(
       },
       error: {
         false: [
-          "var-color-ddt-color-common-neutral-default/color-base",
+          "slotted-[select:enabled]:var-color-ddt-color-common-neutral-default/color-base",
+          "slotted-[select:enabled:hover]:var-color-ddt-color-common-neutral-hover/color-base",
+          "slotted-[select:enabled:active]:var-color-ddt-color-common-neutral-press/color-base",
           "var-color-ddt-color-common-border-focus/color-focus"
         ],
         true: [
@@ -73,7 +78,7 @@ const cvaSelect = cva(
     }
   }
 );
-let DaikinSelect = class extends LitElement {
+let DaikinSelect = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.error = false;
@@ -107,6 +112,10 @@ let DaikinSelect = class extends LitElement {
       this._updateSelect();
     }
   }
+  /**
+   * This method is used by `daikin-input-group` to reflect it's attributes to this component.
+   * @private
+   */
   reflectInputGroup(inputGroup) {
     const isError = !inputGroup.disabled && !!inputGroup.error;
     this.disabled = !!inputGroup.disabled;
@@ -162,7 +171,7 @@ __decorateClass([
   state()
 ], DaikinSelect.prototype, "_label", 2);
 DaikinSelect = __decorateClass([
-  customElement("daikin-select")
+  ddsElement("daikin-select")
 ], DaikinSelect);
 export {
   DaikinSelect

package/dist/es/components/tab/daikin-tab.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.js";
 /**
  * The tab component is a child element within the `daikin-tabs` component, representing a clickable button or label that users interact with to switch between different panels of content.
  * Each tab corresponds to a specific panel and is typically labeled to indicate the content it reveals.
@@ -21,7 +21,7 @@ import { LitElement } from 'lit';
  * <daikin-tab value="foo">Foo tab</daikin-tab>
  * ```
  */
-export declare class DaikinTab extends LitElement {
+export declare class DaikinTab extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * A unique string that identifies a tab.
@@ -32,6 +32,11 @@ export declare class DaikinTab extends LitElement {
      * Whether the tab is disabled.
      */
     disabled: boolean;
+    /**
+     * Whether the tab width stretches or fits.
+     * Controlled by `daikin-tabs`.
+     */
+    sizing: "stretch" | "fit";
     /**
      * Whether to show the active (selected) state.
      * Ignored if `disabled` is `true`.

package/dist/es/components/tab/daikin-tab.js

@@ -1,6 +1,9 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html } from "lit";
-import { property, query, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html } from "lit";
+import { property, query } from "lit/decorators.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -15,22 +18,20 @@ var __decorateClass = (decorators, target, key, kind) => {
 const cvaTab = cva(
   [
     "flex",
-    "w-full",
-    "min-w-14",
-    "h-10",
+    "size-full",
     "items-center",
     "justify-center",
     "px-4",
     "pt-2",
     "pb-3",
+    "leading-[130%]",
     "text-center",
     "font-daikinSerif",
     "tracking-wide",
-    "whitespace-nowrap",
     "relative",
     "focus-visible:outline-none",
     "focus-visible:before:absolute",
-    "focus-visible:before:-inset-[3px]",
+    "focus-visible:before:-inset-1",
     "focus-visible:before:z-[1]",
     "focus-visible:before:border",
     "focus-visible:before:border-2",
@@ -65,11 +66,12 @@ const cvaTab = cva(
     }
   }
 );
-let DaikinTab = class extends LitElement {
+let DaikinTab = class extends DDSElement {
   constructor() {
     super();
     this.value = "";
     this.disabled = false;
+    this.sizing = "stretch";
     this.active = false;
     this.addEventListener("click", (event) => {
       if (this.disabled) {
@@ -104,8 +106,18 @@ DaikinTab.styles = css`
 
     :host {
       display: block;
+      white-space: nowrap;
+      min-width: fit-content;
+      height: 2.5rem;
+    }
+
+    :host([sizing="stretch"]) {
       width: 100%;
     }
+
+    :host([sizing="fit"]) {
+      width: fit-content;
+    }
   `;
 __decorateClass([
   property({ type: String, reflect: true })
@@ -113,6 +125,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinTab.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinTab.prototype, "sizing", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinTab.prototype, "active", 2);
@@ -120,7 +135,7 @@ __decorateClass([
   query("button")
 ], DaikinTab.prototype, "_button", 2);
 DaikinTab = __decorateClass([
-  customElement("daikin-tab")
+  ddsElement("daikin-tab")
 ], DaikinTab);
 export {
   DaikinTab

package/dist/es/components/tab-panels/daikin-tab-panels.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.js";
 import { ARIARole } from "../../lit-analyzer-types.js";
 /**
  * The tab panels component is a child element within the `daikin-tabs` that controls the display of the content panels associated with each tab.
@@ -29,7 +29,7 @@ import { ARIARole } from "../../lit-analyzer-types.js";
  * </daikin-tab-panels>
  * ```
  */
-export declare class DaikinTabPanels extends LitElement {
+export declare class DaikinTabPanels extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * The panel to be displayed.

package/dist/es/components/tab-panels/daikin-tab-panels.js

@@ -1,6 +1,9 @@
-import { css, unsafeCSS, LitElement, html, nothing } from "lit";
-import { property, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html, nothing } from "lit";
+import { property } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -12,7 +15,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let DaikinTabPanels = class extends LitElement {
+let DaikinTabPanels = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.value = "";
@@ -24,8 +27,7 @@ let DaikinTabPanels = class extends LitElement {
       this.panels,
       (value) => html`<div
           class=${this.value === value ? "contents" : "hidden"}
-          role=${// HACK: Workaround lit-analyzer not recognizing `nothing` (runem/lit-analyzer#207).
-      this.panelRole ?? nothing}
+          role=${this.panelRole ?? nothing}
           ?hidden=${this.value !== value}
         >
           <slot name=${`panel:${value}`}></slot>
@@ -49,7 +51,7 @@ __decorateClass([
   property({ type: String, reflect: true, attribute: "panel-role" })
 ], DaikinTabPanels.prototype, "panelRole", 2);
 DaikinTabPanels = __decorateClass([
-  customElement("daikin-tab-panels")
+  ddsElement("daikin-tab-panels")
 ], DaikinTabPanels);
 export {
   DaikinTabPanels

package/dist/es/components/table/daikin-table.d.ts

@@ -1,4 +1,5 @@
-import { LitElement, PropertyValues } from 'lit';
+import { PropertyValues } from 'lit';
+import { DDSElement } from "../../base/index.js";
 export type HeaderType<T extends string = string> = {
     key: T;
     label: string;
@@ -26,6 +27,12 @@ export type HeaderType<T extends string = string> = {
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/table/index.js";
+ * import "@daikin-oss/design-system-web-components/components/table-cell/index.js";
+ * import "@daikin-oss/design-system-web-components/components/table-header-cell/index.js";
+ * ```
+ *
  * ```html
  * <daikin-table
  *   .headers="[
@@ -61,7 +68,7 @@ export type HeaderType<T extends string = string> = {
  */
 export declare class DaikinTable<T extends {
     id: string;
-} = any> extends LitElement {
+} = any> extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Headers of the table.

package/dist/es/components/table/daikin-table.js

@@ -1,8 +1,11 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html, nothing } from "lit";
-import { property, state, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { repeat } from "lit/directives/repeat.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
 import "../checkbox/daikin-checkbox.js";
 import "../table-cell/daikin-table-cell.js";
@@ -39,7 +42,7 @@ const cvaRow = cva(
     }
   }
 );
-let DaikinTable = class extends LitElement {
+let DaikinTable = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.headers = [];
@@ -140,7 +143,7 @@ let DaikinTable = class extends LitElement {
           </td>`
     );
     return html`<div class="flex flex-col gap-6 w-full font-daikinSerif">
-      <table class="w-full table-fixed">
+      <table class="w-full">
         <thead>
           <tr class="border-b border-b-ddt-color-divider">
             ${this.selectable ? html`<td class="w-12 p-0">
@@ -242,7 +245,7 @@ __decorateClass([
   state()
 ], DaikinTable.prototype, "_currentView", 2);
 DaikinTable = __decorateClass([
-  customElement("daikin-table")
+  ddsElement("daikin-table")
 ], DaikinTable);
 export {
   DaikinTable