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

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

@@ -1,4 +1,5 @@
-import { LitElement, PropertyValues } from 'lit';
+import { PropertyValues } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 /**
  * The checkbox component is a UI element that allows users to select one or more options from a list of choices.
  * It functions similarly to the HTML `<input type="checkbox">` tag, enabling users to toggle the selection of each option independently.
@@ -16,7 +17,7 @@ import { LitElement, PropertyValues } from 'lit';
  * <daikin-checkbox label="Checkbox label" name="name" value="value"></daikin-checkbox>
  * ```
  */
-export declare class DaikinCheckbox extends LitElement {
+export declare class DaikinCheckbox extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * The form name, submitted as a name/value pair when submitting the form.
@@ -45,6 +46,7 @@ export declare class DaikinCheckbox extends LitElement {
      */
     disabled: boolean;
     get checked(): boolean;
+    private get _labelHidden();
     /**
      * A property-only accessor for `checkState` provided for convenience.
      * _Getter_: Returns `true` when `checkState` is `"checked"`, and `false` otherwise.

package/dist/cjs-dev/components/dropdown/daikin-dropdown.cjs

@@ -5,15 +5,18 @@ const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const ifDefined_js = require("lit/directives/if-defined.js");
+const ddsElement = require("../../base/dds-element.cjs");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
 const clickOutside = require("../../controllers/click-outside.cjs");
 const floatingUiAutoUpdate = require("../../controllers/floating-ui-auto-update.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;
@@ -26,7 +29,7 @@ const cvaButton = classVarianceAuthority.cva(
     "w-full",
     "h-full",
     "min-h-12",
-    "bg-white",
+    "bg-ddt-color-common-background-default",
     "p-3",
     "border",
     "border-[--color-base]",
@@ -41,8 +44,8 @@ const cvaButton = classVarianceAuthority.cva(
     "-outline-offset-2",
     "focus-visible:outline-2",
     "focus-visible:outline-[--color-focus]",
-    "disabled:text-system-state-disabled",
-    "disabled:border-system-state-disabled",
+    "disabled:text-ddt-color-common-disabled",
+    "disabled:border-ddt-color-common-disabled",
     "after:i-daikin-dropdown-chevron-down",
     "after:w-6",
     "after:h-6",
@@ -51,31 +54,31 @@ const cvaButton = classVarianceAuthority.cva(
     "after:top-0",
     "after:bottom-0",
     "after:right-3",
-    "enabled:after:text-system-element-text-primary",
-    "disabled:after:text-system-state-disabled"
+    "enabled:after:text-ddt-color-common-text-primary",
+    "disabled:after:text-ddt-color-common-disabled"
   ],
   {
     variants: {
       open: {
         false: [
-          "enabled:hover:bg-system-background-surface-hover",
-          "enabled:active:bg-system-background-surface-press"
+          "enabled:hover:bg-ddt-color-common-surface-hover",
+          "enabled:active:bg-ddt-color-common-surface-press"
         ],
-        true: ["enabled:bg-system-background-surface-press"]
+        true: ["enabled:bg-ddt-color-common-surface-press"]
       },
       error: {
         false: [
-          "var-color-system-state-neutral-active/color-base",
-          "var-color-system-state-focus/color-focus"
+          "var-color-ddt-color-common-neutral-default/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"
         ]
       },
       placeholder: {
-        false: ["text-system-element-text-primary"],
-        true: ["text-system-element-text-secondary"]
+        false: ["text-ddt-color-common-text-primary"],
+        true: ["text-ddt-color-common-text-secondary"]
       }
     }
   }
@@ -95,7 +98,7 @@ const floatingPositionOptions = {
     })
   ]
 };
-exports.DaikinDropdown = class DaikinDropdown extends lit.LitElement {
+exports.DaikinDropdown = class DaikinDropdown extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
     this._internals = this.attachInternals();
@@ -289,6 +292,10 @@ exports.DaikinDropdown = class DaikinDropdown extends lit.LitElement {
     this._clickOutsideController.directive(this.open && !this.disabled)}
     </div>`;
   }
+  /**
+   * Focuses on the inner button.
+   * @param options focus options
+   */
   focus(options) {
     var _a;
     (_a = this._button) == null ? void 0 : _a.focus(options);
@@ -308,6 +315,10 @@ exports.DaikinDropdown = class DaikinDropdown extends lit.LitElement {
       }
     }
   }
+  /**
+   * 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;
@@ -363,5 +374,5 @@ __decorateClass([
   decorators_js.state()
 ], exports.DaikinDropdown.prototype, "_selectedItemLabel", 2);
 exports.DaikinDropdown = __decorateClass([
-  decorators_js.customElement("daikin-dropdown")
+  decorators.ddsElement("daikin-dropdown")
 ], exports.DaikinDropdown);

package/dist/cjs-dev/components/dropdown/daikin-dropdown.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 dropdown list component.
@@ -13,6 +14,11 @@ import { DaikinInputGroup } from "../input-group/index.cjs";
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/dropdown/index.js";
+ * import "@daikin-oss/design-system-web-components/components/dropdown-item/index.js";
+ * ```
+ *
  * ```html
  * <daikin-dropdown label="Dropdown label">
  *   <daikin-dropdown-item value="value1">Dropdown item 1</daikin-dropdown-item>
@@ -21,7 +27,7 @@ import { DaikinInputGroup } from "../input-group/index.cjs";
  * </daikin-dropdown>
  * ```
  */
-export declare class DaikinDropdown extends LitElement {
+export declare class DaikinDropdown extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     static readonly formAssociated = true;
     private _internals;
@@ -89,8 +95,16 @@ export declare class DaikinDropdown extends LitElement {
      */
     private _handleFloatingReady;
     render(): import('lit-html').TemplateResult<1>;
+    /**
+     * Focuses on the inner button.
+     * @param options focus options
+     */
     focus(options?: FocusOptions): void;
     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/dropdown-item/daikin-dropdown-item.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;
@@ -21,8 +24,8 @@ const cvaOption = classVarianceAuthority.cva(
     "justify-between",
     "w-full",
     "min-h-12",
-    "text-system-element-text-primary",
-    "bg-system-element-text-inverse",
+    "text-ddt-color-common-text-primary",
+    "bg-ddt-color-common-background-default",
     "p-3",
     "font-daikinSerif",
     "leading-5",
@@ -30,20 +33,20 @@ const cvaOption = classVarianceAuthority.cva(
     "focus-visible:outline",
     "focus-visible:outline-2",
     "focus-visible:-outline-offset-2",
-    "focus-visible:outline-system-state-focus",
-    "disabled:text-system-state-disabled"
+    "focus-visible:outline-ddt-color-common-border-focus",
+    "disabled:text-ddt-color-common-disabled"
   ],
   {
     variants: {
       selected: {
         false: [
-          "enabled:hover:bg-system-background-surface-hover",
-          "enabled:active:bg-system-background-surface-press"
+          "enabled:hover:bg-ddt-color-common-surface-hover",
+          "enabled:active:bg-ddt-color-common-surface-press"
         ],
         true: [
-          "enabled:bg-system-background-surface-selected",
-          "enabled:hover:bg-system-background-surface-selectedHover",
-          "enabled:active:bg-system-background-surface-selectedActive",
+          "enabled:bg-ddt-color-common-surface-selected-default",
+          "enabled:hover:bg-ddt-color-common-surface-selected-hover",
+          "enabled:active:bg-ddt-color-common-surface-selected-press",
           "after:i-daikin-dropdown-check",
           "after:size-6"
         ]
@@ -51,7 +54,7 @@ const cvaOption = classVarianceAuthority.cva(
     }
   }
 );
-exports.DaikinDropdownItem = class DaikinDropdownItem extends lit.LitElement {
+exports.DaikinDropdownItem = class DaikinDropdownItem extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
     this.value = "";
@@ -82,6 +85,10 @@ exports.DaikinDropdownItem = class DaikinDropdownItem extends lit.LitElement {
       <slot></slot>
     </button>`;
   }
+  /**
+   * Focuses on the inner button.
+   * @param options focus options
+   */
   focus(options) {
     var _a;
     (_a = this._button) == null ? void 0 : _a.focus(options);
@@ -108,5 +115,5 @@ __decorateClass([
   decorators_js.query("button")
 ], exports.DaikinDropdownItem.prototype, "_button", 2);
 exports.DaikinDropdownItem = __decorateClass([
-  decorators_js.customElement("daikin-dropdown-item")
+  decorators.ddsElement("daikin-dropdown-item")
 ], exports.DaikinDropdownItem);

package/dist/cjs-dev/components/dropdown-item/daikin-dropdown-item.d.cts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 /**
  * The dropdown item (option) component that can be used within `daikin-dropdown` component.
  *
@@ -11,11 +11,15 @@ import { LitElement } from 'lit';
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/dropdown-item/index.js";
+ * ```
+ *
  * ```html
  * <daikin-dropdown-item value="value">Dropdown item</daikin-dropdown-item>
  * ```
  */
-export declare class DaikinDropdownItem extends LitElement {
+export declare class DaikinDropdownItem extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Form value of the dropdown item.
@@ -33,6 +37,10 @@ export declare class DaikinDropdownItem extends LitElement {
     private _button;
     private _handleClick;
     render(): import('lit-html').TemplateResult<1>;
+    /**
+     * Focuses on the inner button.
+     * @param options focus options
+     */
     focus(options?: FocusOptions): void;
 }
 declare global {

package/dist/cjs-dev/components/icon/daikin-icon.cjs

@@ -3,14 +3,17 @@ 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");
 const icons = require("./icons.json.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,15 +26,15 @@ const cvaIcon = classVarianceAuthority.cva(["block"], {
   variants: {
     icon: iconClassMap,
     color: {
-      black: ["text-black"],
-      white: ["text-white"],
+      black: ["text-ddt-color-common-background-overlay"],
+      white: ["text-ddt-color-common-text-inverse"],
       default: ["text-[--default-color]"],
       current: []
       // uses `currentColor`
     }
   }
 });
-exports.DaikinIcon = class DaikinIcon extends lit.LitElement {
+exports.DaikinIcon = class DaikinIcon extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
     this.icon = null;
@@ -65,24 +68,24 @@ exports.DaikinIcon.styles = lit.css`
 
     :host {
       display: inline-block;
-      width: var(--dds-icon-size, 100%);
-      height: var(--dds-icon-size, 100%);
+      width: var(--ddc-icon-size, 100%);
+      height: var(--ddc-icon-size, 100%);
     }
 
     :host([size="s"]) {
-      --dds-icon-size: 12px;
+      --ddc-icon-size: 12px;
     }
 
     :host([size="m"]) {
-      --dds-icon-size: 16px;
+      --ddc-icon-size: 16px;
     }
 
     :host([size="l"]) {
-      --dds-icon-size: 20px;
+      --ddc-icon-size: 20px;
     }
 
     :host([size="xl"]) {
-      --dds-icon-size: 24px;
+      --ddc-icon-size: 24px;
     }
   `;
 __decorateClass([
@@ -95,6 +98,6 @@ __decorateClass([
   decorators_js.property({ type: String, reflect: true })
 ], exports.DaikinIcon.prototype, "size", 2);
 exports.DaikinIcon = __decorateClass([
-  decorators_js.customElement("daikin-icon")
+  decorators.ddsElement("daikin-icon")
 ], exports.DaikinIcon);
 exports.iconList = iconList;

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

@@ -1,11 +1,11 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 import { MergeVariantProps } from "../../type-utils.cjs";
 import { icons } from "./icons.json.cjs";
 export declare const iconList: string[];
 export type IconType = keyof typeof icons;
 declare const cvaIcon: (props?: ({
     icon?: string | number | null | undefined;
-    color?: "default" | "black" | "white" | "current" | null | undefined;
+    color?: "current" | "default" | "black" | "white" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type IconVariantProps = MergeVariantProps<typeof cvaIcon>;
 /**
@@ -17,7 +17,7 @@ export type IconVariantProps = MergeVariantProps<typeof cvaIcon>;
  * If you try to use an icon that does not exist, a blank space will be displayed.
  * In the development build, warnings will be displayed in the console, so please check there if you encounter any unexpected behavior.
  *
- * @cssprop [--dds-icon-size] - Icon size. If a value other than "current" is set for the `size` property, it will be overwritten automatically. This may be set by the parent component such as `daikin-icon-button`.
+ * @cssprop [--ddc-icon-size] - Icon size. If a value other than "current" is set for the `size` property, it will be overwritten automatically. This may be set by the parent component such as `daikin-icon-button`.
  *
  * @example
  *
@@ -29,7 +29,7 @@ export type IconVariantProps = MergeVariantProps<typeof cvaIcon>;
  * <daikin-icon icon="information" color="black" size="m"></daikin-icon>
  * ```
  */
-export declare class DaikinIcon extends LitElement {
+export declare class DaikinIcon extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Specify the name of the icon
@@ -41,7 +41,7 @@ export declare class DaikinIcon extends LitElement {
     color: IconVariantProps["color"];
     /**
      * Specify the size of the icon.
-     * If "current" is set, `--dds-icon-size` CSS variable will be used. `--dds-icon-size` may be set by the parent component such as `daikin-icon-button`.
+     * If "current" is set, `--ddc-icon-size` CSS variable will be used. `--ddc-icon-size` may be set by the parent component such as `daikin-icon-button`.
      */
     size: "s" | "m" | "l" | "xl" | "current";
     render(): import('lit-html').TemplateResult<1>;

package/dist/cjs-dev/components/icon/icons.json.cjs

@@ -1,73 +1,4 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const icons = {
-  alarm: {
-    "class": "i-daikin-status-alarm",
-    color: null
-  },
-  close: {
-    "class": "i-daikin-notification-close",
-    color: "#a0a0a0"
-  },
-  information: {
-    "class": "i-daikin-status-information",
-    color: null
-  },
-  negative: {
-    "class": "i-daikin-status-negative",
-    color: null
-  },
-  positive: {
-    "class": "i-daikin-status-positive",
-    color: null
-  },
-  warning: {
-    "class": "i-daikin-status-warning",
-    color: null
-  },
-  "pagination-chevron-left": {
-    "class": "i-daikin-pagination-chevron-left",
-    color: "#414141"
-  },
-  "pagination-chevron-right": {
-    "class": "i-daikin-pagination-chevron-right",
-    color: "#414141"
-  },
-  arrowUp: {
-    "class": "i-daikin-arrow-up",
-    color: "#414141"
-  },
-  success: {
-    "class": "i-daikin-status-success",
-    color: "#0097E0"
-  },
-  error: {
-    "class": "i-daikin-status-error",
-    color: "#FF4949"
-  },
-  cross: {
-    "class": "i-daikin-cross",
-    color: null
-  },
-  "chevron-up": {
-    "class": "i-daikin-chevron-up",
-    color: null
-  },
-  "chevron-down": {
-    "class": "i-daikin-chevron-down",
-    color: null
-  },
-  "chevron-left": {
-    "class": "i-daikin-chevron-left",
-    color: null
-  },
-  "chevron-right": {
-    "class": "i-daikin-chevron-right",
-    color: null
-  },
-  sort: {
-    "class": "i-daikin-sort",
-    color: null
-  }
-};
+const icons = { "alarm": { "class": "i-daikin-status-alarm", "color": null }, "close": { "class": "i-daikin-notification-close", "color": "#a0a0a0" }, "information": { "class": "i-daikin-status-information", "color": null }, "negative": { "class": "i-daikin-status-negative", "color": null }, "positive": { "class": "i-daikin-status-positive", "color": null }, "warning": { "class": "i-daikin-status-warning", "color": null }, "pagination-chevron-left": { "class": "i-daikin-pagination-chevron-left", "color": "#414141" }, "pagination-chevron-right": { "class": "i-daikin-pagination-chevron-right", "color": "#414141" }, "error": { "class": "i-daikin-status-error", "color": "#FF4949" }, "cross": { "class": "i-daikin-cross", "color": null }, "chevron-up": { "class": "i-daikin-chevron-up", "color": null }, "chevron-down": { "class": "i-daikin-chevron-down", "color": null }, "chevron-left": { "class": "i-daikin-chevron-left", "color": null }, "chevron-right": { "class": "i-daikin-chevron-right", "color": null }, "sort": { "class": "i-daikin-sort", "color": null } };
 exports.icons = icons;

package/dist/cjs-dev/components/icon/icons.json.d.cts

@@ -32,14 +32,6 @@ declare const _default: {
       "class": "i-daikin-pagination-chevron-right",
       "color": "#414141"
     },
-    "arrowUp": {
-      "class": "i-daikin-arrow-up",
-      "color": "#414141"
-    },
-    "success": {
-      "class": "i-daikin-status-success",
-      "color": "#0097E0"
-    },
     "error": {
       "class": "i-daikin-status-error",
       "color": "#FF4949"

package/dist/cjs-dev/components/icon-button/daikin-icon-button.cjs

@@ -4,14 +4,17 @@ const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const ifDefined_js = require("lit/directives/if-defined.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("../icon/daikin-icon.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;
@@ -21,8 +24,7 @@ const cvaIconButton = classVarianceAuthority.cva(
     "inline-flex",
     "justify-center",
     "items-center",
-    "w-8",
-    "h-8",
+    "size-full",
     "font-daikinSerif",
     "font-bold",
     "rounded",
@@ -32,37 +34,37 @@ const cvaIconButton = classVarianceAuthority.cva(
     "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",
     "var-color-transparent/color-secondary",
-    "link-disabled:var-color-system-state-disabled/color-primary"
+    "link-disabled:var-color-ddt-color-common-disabled/color-primary"
   ],
   {
     variants: {
       color: {
         default: [
-          "link-enabled:var-color-system-state-primary-active/color-primary",
-          "link-enabled:hover:var-color-system-state-primary-hover/color-primary",
-          "link-enabled:hover:var-color-system-state-primary-surface-hover/color-secondary",
-          "link-enabled:active:var-color-system-state-primary-press/color-primary",
-          "link-enabled:active:var-color-system-state-primary-surface-press/color-secondary"
+          "link-enabled:var-color-ddt-color-common-brand-default/color-primary",
+          "link-enabled:hover:var-color-ddt-color-common-brand-hover/color-primary",
+          "link-enabled:hover:var-color-ddt-color-common-surface-brand-hover/color-secondary",
+          "link-enabled:active:var-color-ddt-color-common-brand-press/color-primary",
+          "link-enabled:active:var-color-ddt-color-common-surface-brand-press/color-secondary"
         ],
         neutral: [
-          "link-enabled:var-color-system-state-neutral-active/color-primary",
-          "link-enabled:hover:var-color-system-state-neutral-hover/color-primary",
-          "link-enabled:hover:var-color-system-background-surface-hover/color-secondary",
-          "link-enabled:active:var-color-system-state-neutral-press/color-primary",
-          "link-enabled:active:var-color-system-background-surface-press/color-secondary"
+          "link-enabled:var-color-ddt-color-common-neutral-default/color-primary",
+          "link-enabled:hover:var-color-ddt-color-common-neutral-hover/color-primary",
+          "link-enabled:hover:var-color-ddt-color-common-surface-neutral-hover/color-secondary",
+          "link-enabled:active:var-color-ddt-color-common-neutral-press/color-primary",
+          "link-enabled:active:var-color-ddt-color-common-surface-neutral-press/color-secondary"
         ],
         danger: [
-          "link-enabled:var-color-system-state-error-active/color-primary",
-          "link-enabled:hover:var-color-system-state-error-hover/color-primary",
-          "link-enabled:hover:var-color-system-state-error-surface-hover/color-secondary",
-          "link-enabled:active:var-color-system-state-error-press/color-primary",
-          "link-enabled:active:var-color-system-state-error-surface-press/color-secondary"
+          "link-enabled:var-color-ddt-color-common-danger-default/color-primary",
+          "link-enabled:hover:var-color-ddt-color-common-danger-hover/color-primary",
+          "link-enabled:hover:var-color-ddt-color-common-surface-danger-hover/color-secondary",
+          "link-enabled:active:var-color-ddt-color-common-danger-press/color-primary",
+          "link-enabled:active:var-color-ddt-color-common-surface-danger-press/color-secondary"
         ]
       },
       variant: {
-        fill: ["text-white", "bg-[--color-primary]"],
+        fill: ["text-ddt-color-common-text-inverse", "bg-[--color-primary]"],
         outline: [
           "border",
           "text-[--color-primary]",
@@ -74,7 +76,7 @@ const cvaIconButton = classVarianceAuthority.cva(
     }
   }
 );
-exports.DaikinIconButton = class DaikinIconButton extends lit.LitElement {
+exports.DaikinIconButton = class DaikinIconButton extends ddsElement.DDSElement {
   constructor() {
     super();
     this.variant = "fill";
@@ -134,6 +136,8 @@ exports.DaikinIconButton.styles = lit.css`
 
     :host {
       display: inline-block;
+      width: 2rem;
+      height: 2rem;
     }
   `;
 __decorateClass([
@@ -161,5 +165,5 @@ __decorateClass([
   decorators_js.query("button")
 ], exports.DaikinIconButton.prototype, "_button", 2);
 exports.DaikinIconButton = __decorateClass([
-  decorators_js.customElement("daikin-icon-button")
+  decorators.ddsElement("daikin-icon-button")
 ], exports.DaikinIconButton);

package/dist/cjs-dev/components/icon-button/daikin-icon-button.d.cts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 import { ARIARole } from "../../lit-analyzer-types.cjs";
 import { MergeVariantProps } from "../../type-utils.cjs";
 declare const cvaIconButton: (props?: ({
@@ -32,7 +32,7 @@ type IconButtonVariantProps = MergeVariantProps<typeof cvaIconButton>;
  * </daikin-icon-button>
  * ```
  */
-export declare class DaikinIconButton extends LitElement {
+export declare class DaikinIconButton extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Variant of the button.