@daikin-oss/design-system-web-components 0.6.0 → 1.0.0

package/dist/cjs-dev/components/radio-group/daikin-radio-group.d.cts

@@ -1,10 +1,11 @@
-import { LitElement, PropertyValues } from 'lit';
+import { PropertyValues } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 import { MergeVariantProps } from "../../type-utils.cjs";
 import { DaikinInputGroup } from "../input-group/index.cjs";
-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/cjs-dev/components/select/daikin-select.cjs

@@ -3,13 +3,16 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
+const ddsElement = require("../../base/dds-element.cjs");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
+var __decorateClass = (decorators2, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
+  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators2[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp(target, key, result);
   return result;
@@ -50,32 +53,34 @@ const cvaSelect = classVarianceAuthority.cva(
     "slotted-[select:focus-visible]:!outline-2",
     "slotted-[select:focus-visible]:!outline-[--color-focus]",
     "slotted-[select:enabled]:!cursor-pointer",
-    "slotted-[select:enabled]:!text-system-element-text-primary",
-    "slotted-[select:enabled:hover]:!bg-system-background-surface-hover",
-    "slotted-[select:enabled:active]:!bg-system-background-surface-press",
-    "slotted-[select:disabled]:!text-system-state-disabled",
-    "slotted-[select:disabled]:!border-system-state-disabled"
+    "slotted-[select:enabled]:!text-ddt-color-common-text-primary",
+    "slotted-[select:enabled:hover]:!bg-ddt-color-common-surface-hover",
+    "slotted-[select:enabled:active]:!bg-ddt-color-common-surface-press",
+    "slotted-[select:disabled]:!text-ddt-color-common-disabled",
+    "slotted-[select:disabled]:!border-ddt-color-common-disabled"
   ],
   {
     variants: {
       disabled: {
-        false: ["after:text-system-element-text-primary"],
-        true: ["after:text-system-state-disabled"]
+        false: ["after:text-ddt-color-common-text-primary"],
+        true: ["after:text-ddt-color-common-disabled"]
       },
       error: {
         false: [
-          "var-color-system-state-neutral-active/color-base",
-          "var-color-system-state-focus/color-focus"
+          "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: [
-          "var-color-system-state-error-active/color-base",
-          "var-color-system-state-error-active/color-focus"
+          "var-color-ddt-color-common-danger-default/color-base",
+          "var-color-ddt-color-common-danger-default/color-focus"
         ]
       }
     }
   }
 );
-exports.DaikinSelect = class DaikinSelect extends lit.LitElement {
+exports.DaikinSelect = class DaikinSelect extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
     this.error = false;
@@ -109,6 +114,10 @@ exports.DaikinSelect = class DaikinSelect extends lit.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;
@@ -164,5 +173,5 @@ __decorateClass([
   decorators_js.state()
 ], exports.DaikinSelect.prototype, "_label", 2);
 exports.DaikinSelect = __decorateClass([
-  decorators_js.customElement("daikin-select")
+  decorators.ddsElement("daikin-select")
 ], exports.DaikinSelect);

package/dist/cjs-dev/components/select/daikin-select.d.cts

@@ -1,4 +1,5 @@
-import { LitElement, PropertyValues } from 'lit';
+import { PropertyValues } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 import { DaikinInputGroup } from "../input-group/index.cjs";
 /**
  * A select component.
@@ -12,6 +13,10 @@ import { DaikinInputGroup } from "../input-group/index.cjs";
  *
  * @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.cjs";
  * </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/cjs-dev/components/tab/daikin-tab.cjs

@@ -3,13 +3,16 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
+const ddsElement = require("../../base/dds-element.cjs");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
+var __decorateClass = (decorators2, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
+  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators2[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp(target, key, result);
   return result;
@@ -17,27 +20,25 @@ var __decorateClass = (decorators, target, key, kind) => {
 const cvaTab = classVarianceAuthority.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",
-    "focus-visible:before:border-system-state-focus",
-    "disabled:text-system-state-disabled",
+    "focus-visible:before:border-ddt-color-common-border-focus",
+    "disabled:text-ddt-color-common-disabled",
     "after:absolute",
     "after:inset-0",
     "after:top-auto"
@@ -46,32 +47,33 @@ const cvaTab = classVarianceAuthority.cva(
     variants: {
       active: {
         false: [
-          "enabled:text-system-state-neutral-active",
-          "enabled:hover:text-system-state-neutral-hover",
-          "enabled:hover:bg-system-background-surface-hover",
-          "enabled:active:text-system-state-neutral-press",
-          "enabled:active:bg-system-background-surface-press",
+          "enabled:text-ddt-color-common-neutral-default",
+          "enabled:hover:text-ddt-color-common-neutral-hover",
+          "enabled:hover:bg-ddt-color-common-surface-hover",
+          "enabled:active:text-ddt-color-common-neutral-press",
+          "enabled:active:bg-ddt-color-common-surface-press",
           "after:h-[1px]",
-          "after:bg-system-element-divider-secondary"
+          "after:bg-ddt-color-divider"
         ],
         true: [
           "font-bold",
-          "enabled:text-system-state-primary-active",
-          "enabled:hover:bg-system-state-primary-surface-hover",
-          "enabled:active:bg-system-state-primary-surface-press",
+          "enabled:text-ddt-color-common-brand-default",
+          "enabled:hover:bg-ddt-color-common-surface-brand-hover",
+          "enabled:active:bg-ddt-color-common-surface-brand-press",
           "after:h-1",
-          "enabled:after:bg-system-state-primary-active",
-          "disabled:after:bg-system-state-disabled"
+          "enabled:after:bg-ddt-color-common-brand-default",
+          "disabled:after:bg-ddt-color-common-disabled"
         ]
       }
     }
   }
 );
-exports.DaikinTab = class DaikinTab extends lit.LitElement {
+exports.DaikinTab = class DaikinTab extends ddsElement.DDSElement {
   constructor() {
     super();
     this.value = "";
     this.disabled = false;
+    this.sizing = "stretch";
     this.active = false;
     this.addEventListener("click", (event) => {
       if (this.disabled) {
@@ -106,8 +108,18 @@ exports.DaikinTab.styles = lit.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([
   decorators_js.property({ type: String, reflect: true })
@@ -115,6 +127,9 @@ __decorateClass([
 __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.DaikinTab.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinTab.prototype, "sizing", 2);
 __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.DaikinTab.prototype, "active", 2);
@@ -122,5 +137,5 @@ __decorateClass([
   decorators_js.query("button")
 ], exports.DaikinTab.prototype, "_button", 2);
 exports.DaikinTab = __decorateClass([
-  decorators_js.customElement("daikin-tab")
+  decorators.ddsElement("daikin-tab")
 ], exports.DaikinTab);

package/dist/cjs-dev/components/tab/daikin-tab.d.cts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 /**
  * 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/cjs-dev/components/tab-panels/daikin-tab-panels.cjs

@@ -3,18 +3,21 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const repeat_js = require("lit/directives/repeat.js");
+const ddsElement = require("../../base/dds-element.cjs");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
+var __decorateClass = (decorators2, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
+  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators2[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-exports.DaikinTabPanels = class DaikinTabPanels extends lit.LitElement {
+exports.DaikinTabPanels = class DaikinTabPanels extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
     this.value = "";
@@ -33,8 +36,7 @@ exports.DaikinTabPanels = class DaikinTabPanels extends lit.LitElement {
       this.panels,
       (value) => lit.html`<div
           class=${this.value === value ? "contents" : "hidden"}
-          role=${// HACK: Workaround lit-analyzer not recognizing `nothing` (runem/lit-analyzer#207).
-      this.panelRole ?? lit.nothing}
+          role=${this.panelRole ?? lit.nothing}
           ?hidden=${this.value !== value}
         >
           <slot name=${`panel:${value}`}></slot>
@@ -58,5 +60,5 @@ __decorateClass([
   decorators_js.property({ type: String, reflect: true, attribute: "panel-role" })
 ], exports.DaikinTabPanels.prototype, "panelRole", 2);
 exports.DaikinTabPanels = __decorateClass([
-  decorators_js.customElement("daikin-tab-panels")
+  decorators.ddsElement("daikin-tab-panels")
 ], exports.DaikinTabPanels);

package/dist/cjs-dev/components/tab-panels/daikin-tab-panels.d.cts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 import { ARIARole } from "../../lit-analyzer-types.cjs";
 /**
  * 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.cjs";
  * </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/cjs-dev/components/table/daikin-table.cjs

@@ -5,16 +5,19 @@ const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const ifDefined_js = require("lit/directives/if-defined.js");
 const repeat_js = require("lit/directives/repeat.js");
+const ddsElement = require("../../base/dds-element.cjs");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 require("../checkbox/daikin-checkbox.cjs");
 require("../table-cell/daikin-table-cell.cjs");
 require("../table-header-cell/daikin-table-header-cell.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
+var __decorateClass = (decorators2, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
+  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators2[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp(target, key, result);
   return result;
@@ -23,25 +26,25 @@ const defaultSort = (a, b, key) => String(a[key]).localeCompare(String(b[key]));
 const cvaRow = classVarianceAuthority.cva(
   [
     "border-b",
-    "border-b-system-element-divider-secondary",
+    "border-b-ddt-color-divider",
     "focus-visible:outline",
     "focus-visible:outline-2",
     "focus-visible:-outline-offset-2",
-    "focus-visible:outline-system-state-focus"
+    "focus-visible:outline-ddt-color-common-border-focus"
   ],
   {
     variants: {
       selected: {
-        false: ["hover:bg-system-background-surface-hover"],
+        false: ["hover:bg-ddt-color-common-surface-hover"],
         true: [
-          "bg-system-background-surface-selected",
-          "hover:bg-system-background-surface-selectedHover"
+          "bg-ddt-color-common-surface-selected-default",
+          "hover:bg-ddt-color-common-surface-selected-hover"
         ]
       }
     }
   }
 );
-exports.DaikinTable = class DaikinTable extends lit.LitElement {
+exports.DaikinTable = class DaikinTable extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
     this.headers = [];
@@ -142,9 +145,9 @@ exports.DaikinTable = class DaikinTable extends lit.LitElement {
           </td>`
     );
     return lit.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-system-element-divider-primary">
+          <tr class="border-b border-b-ddt-color-divider">
             ${this.selectable ? lit.html`<td class="w-12 p-0">
                   <span
                     class="flex items-center justify-center size-full min-h-12"
@@ -256,5 +259,5 @@ __decorateClass([
   decorators_js.state()
 ], exports.DaikinTable.prototype, "_currentView", 2);
 exports.DaikinTable = __decorateClass([
-  decorators_js.customElement("daikin-table")
+  decorators.ddsElement("daikin-table")
 ], exports.DaikinTable);

package/dist/cjs-dev/components/table/daikin-table.d.cts

@@ -1,4 +1,5 @@
-import { LitElement, PropertyValues } from 'lit';
+import { PropertyValues } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 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/cjs-dev/components/table-cell/daikin-table-cell.cjs

@@ -3,13 +3,16 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
+const ddsElement = require("../../base/dds-element.cjs");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
+var __decorateClass = (decorators2, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
+  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators2[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result) __defProp(target, key, result);
   return result;
@@ -24,7 +27,7 @@ const cvaCell = classVarianceAuthority.cva(
     "min-h-12",
     "px-4",
     "py-3",
-    "text-system-element-text-primary"
+    "text-ddt-color-common-text-primary"
   ],
   {
     variants: {
@@ -36,7 +39,7 @@ const cvaCell = classVarianceAuthority.cva(
     }
   }
 );
-exports.DaikinTableCell = class DaikinTableCell extends lit.LitElement {
+exports.DaikinTableCell = class DaikinTableCell extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
     this.alignment = "left";
@@ -46,7 +49,7 @@ exports.DaikinTableCell = class DaikinTableCell extends lit.LitElement {
       <slot></slot>
       <slot
         name="subtitle"
-        class="text-system-element-text-secondary text-xs"
+        class="text-ddt-color-common-text-secondary text-xs"
       ></slot>
     </span>`;
   }
@@ -64,5 +67,5 @@ __decorateClass([
   decorators_js.property({ type: String, reflect: true })
 ], exports.DaikinTableCell.prototype, "alignment", 2);
 exports.DaikinTableCell = __decorateClass([
-  decorators_js.customElement("daikin-table-cell")
+  decorators.ddsElement("daikin-table-cell")
 ], exports.DaikinTableCell);

package/dist/cjs-dev/components/table-cell/daikin-table-cell.d.cts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 import { MergeVariantProps } from "../../type-utils.cjs";
 declare const cvaCell: (props?: ({
     alignment?: "right" | "left" | "center" | null | undefined;
@@ -17,6 +17,10 @@ type TableCellVariantProps = MergeVariantProps<typeof cvaCell>;
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/table-cell/index.js";
+ * ```
+ *
  * ```html
  * <daikin-table-cell slot="cell:key:id">
  *   Table cell label
@@ -24,7 +28,7 @@ type TableCellVariantProps = MergeVariantProps<typeof cvaCell>;
  * </daikin-table-cell>
  * ```
  */
-export declare class DaikinTableCell extends LitElement {
+export declare class DaikinTableCell extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Specify the direction of cell alignment.