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

package/dist/cjs/components/pagination/daikin-pagination.cjs

@@ -5,14 +5,17 @@ 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");
 const paginationUtils = require("./pagination-utils.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;
@@ -27,13 +30,15 @@ const cvaPageButton = classVarianceAuthority.cva(
     "justify-center",
     "min-w-12",
     "min-h-12",
+    "p-1",
     "font-daikinSerif",
     "text-base",
     "not-italic",
     "leading-6",
+    "bg-clip-content",
     "focus-visible:outline",
     "focus-visible:outline-2",
-    "focus-visible:outline-offset-1",
+    "focus-visible:outline-offset-[-2px]",
     "focus-visible:outline-ddt-color-common-border-focus"
   ],
   {
@@ -43,22 +48,22 @@ const cvaPageButton = classVarianceAuthority.cva(
           "text-ddt-color-common-brand-default",
           "focus-visible:text-ddt-color-common-brand-default",
           "font-bold",
-          "hover:text-ddt-color-common-border-focus",
-          "hover:bg-ddt-color-common-surface-selected-default",
+          "hover:text-ddt-color-common-brand-hover",
+          "hover:bg-ddt-color-common-surface-brand-hover",
           "active:text-ddt-color-common-brand-press",
-          "active:bg-ddt-color-common-surface-selected-press",
+          "active:bg-ddt-color-common-surface-brand-press",
           "after:bg-ddt-color-common-brand-default",
           "after:content-['']",
           "after:h-1",
           "after:absolute",
-          "after:inset-0",
+          "after:inset-1",
           "after:top-auto"
         ],
         false: [
           "font-normal",
           "text-ddt-color-common-neutral-default",
           "active:bg-ddt-color-common-surface-neutral-press",
-          "active:text-ddt-color-common-text-primary",
+          "active:text-ddt-color-common-neutral-press",
           "hover:bg-ddt-color-common-surface-neutral-hover",
           "hover:text-ddt-color-common-neutral-hover"
         ]
@@ -103,10 +108,10 @@ const cvaChevronButton = classVarianceAuthority.cva([
   "disabled:!text-ddt-color-common-disabled",
   "focus-visible:outline",
   "focus-visible:outline-2",
-  "focus-visible:outline-offset-1",
+  "focus-visible:outline-offset-[-2px]",
   "focus-visible:outline-ddt-color-common-border-focus"
 ]);
-exports.DaikinPagination = class DaikinPagination extends lit.LitElement {
+exports.DaikinPagination = class DaikinPagination extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
     this.current = 1;
@@ -134,7 +139,11 @@ exports.DaikinPagination = class DaikinPagination extends lit.LitElement {
       this.window
     );
     return lit.html`
-      <div aria-label="Pagination" class="inline-flex gap-1">
+      <div
+        aria-label="Pagination"
+        role="navigation"
+        class="inline-flex flex-wrap"
+      >
         <button
           class=${cvaChevron}
           type="button"
@@ -209,5 +218,5 @@ __decorateClass([
   decorators_js.property({ type: Number, reflect: true })
 ], exports.DaikinPagination.prototype, "window", 2);
 exports.DaikinPagination = __decorateClass([
-  decorators_js.customElement("daikin-pagination")
+  decorators.ddsElement("daikin-pagination")
 ], exports.DaikinPagination);

package/dist/cjs/components/pagination/daikin-pagination.d.cts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 /**
  * The pagination component is used to navigate through a list of items that are divided into multiple pages.
  *
@@ -6,11 +6,15 @@ import { LitElement } from 'lit';
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/pagination/index.js";
+ * ```
+ *
  * ```html
  * <daikin-pagination window="5" total="20" current="3"></daikin-pagination>
  * ```
  */
-export declare class DaikinPagination extends LitElement {
+export declare class DaikinPagination extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * The current page number, starting at 1.

package/dist/cjs/components/progress-bar/daikin-progress-bar.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,7 +20,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 const cvaBar = classVarianceAuthority.cva(
   [
     "w-full",
-    "bg-ddt-color-common-disabled",
+    "bg-ddt-color-common-border-empty",
     "overflow-hidden",
     "relative",
     "after:block",
@@ -53,7 +56,7 @@ const cvaBarContainer = classVarianceAuthority.cva(
     "justify-between",
     "items-center",
     "text-ddt-color-common-text-primary",
-    "leading-5",
+    "leading-[130%]",
     "font-bold"
   ],
   {
@@ -62,12 +65,14 @@ const cvaBarContainer = classVarianceAuthority.cva(
         inprogress: [],
         completed: [
           "after:size-4",
+          "after:flex-none",
           "after:bg-ddt-color-common-success",
           "after:i-daikin-status-positive"
         ],
         indeterminate: [],
         error: [
           "after:size-4",
+          "after:flex-none",
           "after:text-ddt-color-common-danger-default",
           "after:i-daikin-status-error"
         ]
@@ -75,7 +80,7 @@ const cvaBarContainer = classVarianceAuthority.cva(
     }
   }
 );
-const cvaHelper = classVarianceAuthority.cva(["text-sm"], {
+const cvaHelper = classVarianceAuthority.cva(["text-sm", "leading-[130%]"], {
   variants: {
     variant: {
       inprogress: ["text-ddt-color-common-text-primary"],
@@ -89,7 +94,7 @@ const cvaHelper = classVarianceAuthority.cva(["text-sm"], {
     }
   }
 });
-exports.DaikinProgressBar = class DaikinProgressBar extends lit.LitElement {
+exports.DaikinProgressBar = class DaikinProgressBar extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
     this.variant = "inprogress";
@@ -167,5 +172,5 @@ __decorateClass([
   decorators_js.property({ type: String })
 ], exports.DaikinProgressBar.prototype, "helper", 2);
 exports.DaikinProgressBar = __decorateClass([
-  decorators_js.customElement("daikin-progress-bar")
+  decorators.ddsElement("daikin-progress-bar")
 ], exports.DaikinProgressBar);

package/dist/cjs/components/progress-bar/daikin-progress-bar.d.cts

@@ -1,4 +1,5 @@
-import { LitElement, PropertyValues } from 'lit';
+import { PropertyValues } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 import { MergeVariantProps } from "../../type-utils.cjs";
 declare const cvaBar: (props?: ({
     variant?: "error" | "indeterminate" | "inprogress" | "completed" | null | undefined;
@@ -33,7 +34,7 @@ type ProgressBarVariantProps = MergeVariantProps<typeof cvaBar | typeof cvaHelpe
  * </daikin-progress-bar>
  * ```
  */
-export declare class DaikinProgressBar extends LitElement {
+export declare class DaikinProgressBar extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Variant of the progress bar.

package/dist/cjs/components/progress-indicator/daikin-progress-indicator.cjs

@@ -2,37 +2,33 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 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;
 };
-exports.DaikinProgressIndicator = class DaikinProgressIndicator extends lit.LitElement {
+exports.DaikinProgressIndicator = class DaikinProgressIndicator extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
-    this.currentItem = null;
+    this.currentItem = 0;
   }
-  _setCurrentItem() {
+  _updateSteps() {
     const items = this._items;
-    if (!items || this.currentItem === null) {
-      return;
-    }
-    if (items.length - 1 < this.currentItem) {
-      return;
-    }
-    if (this.currentItem < 0) {
-      return;
-    }
-    items.forEach((item, i) => item.current = this.currentItem === i);
+    items.forEach((item, i) => {
+      item.status = i < this.currentItem ? "finished" : i === this.currentItem ? "inprogress" : "unfinished";
+    });
   }
   _handleSlotChange() {
-    this._setCurrentItem();
+    this._updateSteps();
   }
   render() {
     return lit.html`<div
@@ -43,11 +39,11 @@ exports.DaikinProgressIndicator = class DaikinProgressIndicator extends lit.LitE
     </div>`;
   }
   firstUpdated() {
-    this._setCurrentItem();
+    this._updateSteps();
   }
   updated(changedProperties) {
     if (changedProperties.has("currentItem")) {
-      this._setCurrentItem();
+      this._updateSteps();
     }
   }
 };
@@ -66,5 +62,5 @@ __decorateClass([
   decorators_js.queryAssignedElements({ selector: "daikin-progress-indicator-item" })
 ], exports.DaikinProgressIndicator.prototype, "_items", 2);
 exports.DaikinProgressIndicator = __decorateClass([
-  decorators_js.customElement("daikin-progress-indicator")
+  decorators.ddsElement("daikin-progress-indicator")
 ], exports.DaikinProgressIndicator);

package/dist/cjs/components/progress-indicator/daikin-progress-indicator.d.cts

@@ -1,4 +1,5 @@
-import { LitElement, PropertyValues } from 'lit';
+import { PropertyValues } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 /**
  * The progress indicator is used to let the user know where they are in the task list.
  *
@@ -9,6 +10,11 @@ import { LitElement, PropertyValues } from 'lit';
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/progress-indicator/index.js";
+ * import "@daikin-oss/design-system-web-components/components/progress-indicator-item/index.js";
+ * ```
+ *
  * ```html
  * <daikin-progress-indicator>
  *   <daikin-progress-indicator-item state="unfinished">
@@ -26,14 +32,15 @@ import { LitElement, PropertyValues } from 'lit';
  * </daikin-progress-indicator>
  * ```
  */
-export declare class DaikinProgressIndicator extends LitElement {
+export declare class DaikinProgressIndicator extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
-     * Specify the index number of the current location in the progress indicator.
+     * Specify the index of the step that is currently in progress, starting from 0. This will automatically set the status of each step.
+     * To mark all steps as upcoming, specify a number less or equal to -1. To mark all steps as completed, specify a number greater than or equal to the number of steps.
      */
-    currentItem: number | null;
+    currentItem: number;
     private readonly _items;
-    private _setCurrentItem;
+    private _updateSteps;
     private _handleSlotChange;
     render(): import('lit-html').TemplateResult<1>;
     protected firstUpdated(): void;

package/dist/cjs/components/progress-indicator-item/daikin-progress-indicator-item.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;
@@ -19,48 +22,47 @@ var __decorateClass = (decorators, target, key, kind) => {
 const cvaContainer = classVarianceAuthority.cva(
   [
     "flex",
-    "flex-col",
-    "gap-1",
+    "gap-2",
     "w-full",
     "text-ddt-color-common-text-primary",
     "pt-2",
     "border-t-[0.25rem]",
-    "font-daikinSerif",
-    "leading-[130%]"
+    "font-daikinSerif"
   ],
   {
     variants: {
       status: {
-        unfinished: ["border-ddt-color-common-disabled"],
+        unfinished: ["border-ddt-color-common-border-empty"],
         inprogress: ["border-ddt-color-common-brand-default"],
         finished: ["border-ddt-color-common-brand-default"]
       }
     }
   }
 );
-exports.DaikinProgressIndicatorItem = class DaikinProgressIndicatorItem extends lit.LitElement {
+exports.DaikinProgressIndicatorItem = class DaikinProgressIndicatorItem extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
     this.status = "unfinished";
-    this.current = false;
   }
   render() {
     return lit.html`<div
       class=${cvaContainer({ status: this.status })}
       role="listitem"
-      aria-current=${ifDefined_js.ifDefined(this.current ? "step" : void 0)}
+      aria-current=${ifDefined_js.ifDefined(
+      this.status === "inprogress" ? "step" : void 0
+    )}
     >
-      <div class="flex justify-between gap-1 font-bold">
-        <slot></slot>
-        ${this.status === "finished" ? lit.html`
-              <span
-                role="img"
-                class="flex-none size-4 i-daikin-status-positive text-ddt-color-common-brand-default"
-                aria-label="Completed"
-              ></span>
-            ` : lit.nothing}
+      <div class="flex flex-col gap-1 w-full">
+        <slot class="font-bold leading-[130%]"></slot>
+        <slot name="description" class="text-sm leading-[130%]"></slot>
       </div>
-      <slot name="description" class="text-sm"></slot>
+      ${this.status === "finished" ? lit.html`
+            <span
+              role="img"
+              class="flex-none size-4 i-daikin-status-positive text-ddt-color-common-brand-default"
+              aria-label="Completed"
+            ></span>
+          ` : lit.nothing}
     </div>`;
   }
 };
@@ -76,9 +78,6 @@ exports.DaikinProgressIndicatorItem.styles = lit.css`
 __decorateClass([
   decorators_js.property({ type: String, reflect: true })
 ], exports.DaikinProgressIndicatorItem.prototype, "status", 2);
-__decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
-], exports.DaikinProgressIndicatorItem.prototype, "current", 2);
 exports.DaikinProgressIndicatorItem = __decorateClass([
-  decorators_js.customElement("daikin-progress-indicator-item")
+  decorators.ddsElement("daikin-progress-indicator-item")
 ], exports.DaikinProgressIndicatorItem);

package/dist/cjs/components/progress-indicator-item/daikin-progress-indicator-item.d.cts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 import { MergeVariantProps } from "../../type-utils.cjs";
 declare const cvaContainer: (props?: ({
     status?: "inprogress" | "unfinished" | "finished" | null | undefined;
@@ -17,6 +17,10 @@ type ProgressIndicatorItemVariantProps = MergeVariantProps<typeof cvaContainer>;
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/progress-indicator-item/index.js";
+ * ```
+ *
  * ```html
  * <daikin-progress-indicator-item state="unfinished">
  *   Progress indicator label
@@ -24,13 +28,13 @@ type ProgressIndicatorItemVariantProps = MergeVariantProps<typeof cvaContainer>;
  * </daikin-progress-indicator-item>
  * ```
  */
-export declare class DaikinProgressIndicatorItem extends LitElement {
+export declare class DaikinProgressIndicatorItem extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
-     * Status of the progress indicator item
+     * Status of the progress indicator item.
+     * Controlled by `daikin-progress-indicator`.
      */
     status: ProgressIndicatorItemVariantProps["status"];
-    current: boolean;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

package/dist/cjs/components/radio/daikin-radio.cjs

@@ -4,13 +4,16 @@ 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");
 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;
@@ -39,15 +42,19 @@ const RADIO_CLASS_NAME = classVarianceAuthority.cva([
   "enabled:checked:group-active:border-ddt-color-common-brand-press",
   "disabled:border-ddt-color-common-disabled"
 ])();
-const cvaLabel = classVarianceAuthority.cva(["pr-2"], {
+const cvaLabel = classVarianceAuthority.cva([], {
   variants: {
     disabled: {
       false: ["text-ddt-color-common-text-primary"],
       true: ["text-ddt-color-common-disabled"]
+    },
+    hidden: {
+      false: ["inline-block"],
+      true: ["hidden"]
     }
   }
 });
-exports.DaikinRadio = class DaikinRadio extends lit.LitElement {
+exports.DaikinRadio = class DaikinRadio extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
     this.name = "";
@@ -56,24 +63,24 @@ exports.DaikinRadio = class DaikinRadio extends lit.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;
@@ -86,29 +93,33 @@ exports.DaikinRadio = class DaikinRadio extends lit.LitElement {
     );
   }
   render() {
-    return lit.html`<label class="group flex gap-2 items-center font-daikinSerif">
+    const disabled = this.disabled || this.disabledByParent;
+    return lit.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 : lit.nothing}
-          ?disabled=${this.disabled}
+          aria-label=${this._labelHidden ? this.label : lit.nothing}
+          tabindex=${ifDefined_js.ifDefined(this.skipTab ? "-1" : void 0)}
+          ?disabled=${disabled}
           .checked=${this.checked}
-          @click=${this._handleClick}
+          .value=${this.value}
           @change=${this._handleChange}
-          tabindex=${ifDefined_js.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) {
@@ -116,6 +127,14 @@ exports.DaikinRadio = class DaikinRadio extends lit.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);
+  }
 };
 exports.DaikinRadio.styles = lit.css`
     ${lit.unsafeCSS(tailwind.default)}
@@ -143,6 +162,9 @@ __decorateClass([
 __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.DaikinRadio.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true, attribute: false })
+], exports.DaikinRadio.prototype, "disabledByParent", 2);
 __decorateClass([
   decorators_js.property({ type: Boolean, attribute: false })
 ], exports.DaikinRadio.prototype, "skipTab", 2);
@@ -150,5 +172,5 @@ __decorateClass([
   decorators_js.query("input")
 ], exports.DaikinRadio.prototype, "_radio", 2);
 exports.DaikinRadio = __decorateClass([
-  decorators_js.customElement("daikin-radio")
+  decorators.ddsElement("daikin-radio")
 ], exports.DaikinRadio);

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

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 /**
  * The radio button component is a UI element that allows users to select one options from a set of choices.
  * It functions similarly to the HTML `<input type="radio">` tag. \
@@ -9,6 +9,8 @@ import { LitElement } from 'lit';
  *
  * @fires change - A cloned event of a [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) emitted from the inner `<input type="radio">` element.
  *
+ * @slot - A slot for the radio label content.
+ *
  * @example
  *
  * ```js
@@ -19,7 +21,7 @@ import { LitElement } from 'lit';
  *  <daikin-radio name="name" value="value" label="Radio button label"></daikin-radio>
  * ```
  */
-export declare class DaikinRadio extends LitElement {
+export declare class DaikinRadio extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * The form name, submitted as a name/value pair when submitting the form.
@@ -47,24 +49,32 @@ export declare class DaikinRadio extends LitElement {
      * Specify the radio button disabled state.
      */
     disabled: boolean;
+    /**
+     * Specify the radio disabled state controlled by the parent component.
+     * Controlled by `daikin-radio-group`.
+     *
+     * @private
+     */
+    disabledByParent: boolean;
     /**
      * Whether the radio button can be focused.
      * Automatically set by `daikin-radio-group` component.
      */
     skipTab: boolean;
-    static readonly formAssociated = true;
     private _radio;
-    /**
-     * Focuses on the inner radio.
-     * @param options focus options
-     */
-    focus(options?: FocusOptions): void;
+    static readonly formAssociated = true;
+    private get _labelHidden();
     private _internals;
     private _updateFormValue;
     private _handleClick;
     private _handleChange;
     render(): import('lit-html').TemplateResult<1>;
     updated(changedProperties: Map<string, unknown>): void;
+    /**
+     * Focuses on the inner radio.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
 }
 declare global {
     interface HTMLElementTagNameMap {