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

package/dist/cjs-dev/components/card-header/daikin-card-header.d.cts

@@ -0,0 +1,35 @@
+import { DDSElement } from "../../base/index.cjs";
+/**
+ * `daikin-card-header` is used to represent header of the card component, and is used as a child element of the `daikin-card` component.
+ *
+ * Hierarchy:
+ * - `daikin-card` > `daikin-card-header`
+ *
+ * @slot description - An optional slot for description.
+ * @slot left-icon - An optional slot for an icon to be placed to the left of the text. Place a `daikin-icon` element or something similar.
+ * @slot - A slot for card title.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/card-header/index.js";
+ * ```
+ *
+ * ```html
+ * <!-- See `daikin-card` component for complete example. -->
+ * <daikin-card-header>
+ *   <daikin-icon slot="left-icon" icon="alarm" size="xl" color="current"></daikin-icon>
+ *   <span slot="description">Description</span>
+ *   <span>Card Title</span>
+ * </daikin-card-header>
+ * ```
+ */
+export declare class DaikinCardHeader extends DDSElement {
+    static styles: import('lit').CSSResult;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-card-header": DaikinCardHeader;
+    }
+}

package/dist/cjs-dev/components/card-header/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinCardHeader = require("./daikin-card-header.cjs");
+Object.defineProperty(exports, "DaikinCardHeader", {
+  enumerable: true,
+  get: () => daikinCardHeader.DaikinCardHeader
+});

package/dist/cjs-dev/components/card-header/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-card-header.cjs";

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

@@ -0,0 +1,227 @@
+"use strict";
+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 ref_js = require("lit/directives/ref.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("../icon-button/daikin-icon-button.cjs");
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators2, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  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;
+};
+const DEFAULT_TRANSITION_DURATION = "600ms";
+const cvaButton = classVarianceAuthority.cva(
+  [
+    "flex",
+    "justify-center",
+    "items-center",
+    "flex-none",
+    "size-6",
+    "text-current"
+  ],
+  {
+    variants: {
+      intent: {
+        previous: ["i-daikin-chevron-left"],
+        next: ["i-daikin-chevron-right"]
+      }
+    }
+  }
+);
+const INDICATOR_CLASS_NAME = classVarianceAuthority.cva([
+  "flex",
+  "justify-center",
+  "items-center",
+  "size-3",
+  "m-0.5",
+  "rounded-full",
+  "transition",
+  "bg-ddt-color-common-neutral-default",
+  "relative",
+  "hover:bg-ddt-color-common-neutral-hover",
+  "active:bg-ddt-color-common-neutral-press",
+  "aria-selected:after:block",
+  "aria-selected:after:size-4",
+  "aria-selected:after:bg-ddt-color-common-brand-default",
+  "aria-selected:after:absolute",
+  "aria-selected:after:rounded-full",
+  "aria-selected:focus-visible:after:outline",
+  "aria-selected:focus-visible:after:outline-1",
+  "aria-selected:focus-visible:after:outline-offset-1",
+  "aria-selected:focus-visible:after:outline-ddt-color-common-border-focus"
+])();
+exports.DaikinCarousel = class DaikinCarousel extends ddsElement.DDSElement {
+  constructor() {
+    super(...arguments);
+    this.currentIndex = 0;
+    this._itemCount = 0;
+    this._prevButton = ref_js.createRef();
+    this._nextButton = ref_js.createRef();
+    this._indicatorButtonsContainer = ref_js.createRef();
+  }
+  _emitSelect(operation, beforeCurrentIndex) {
+    this.dispatchEvent(
+      new CustomEvent("select", {
+        detail: { operation, beforeCurrentIndex }
+      })
+    );
+  }
+  _handleClickIndicator(index) {
+    const beforeCurrentIndex = this.currentIndex;
+    this.currentIndex = index;
+    this._emitSelect("indicator", beforeCurrentIndex);
+  }
+  _handleKeydownIndicator(event) {
+    var _a;
+    const moveOffset = {
+      ArrowRight: 1,
+      ArrowLeft: -1
+    }[event.key];
+    if (!moveOffset) {
+      return;
+    }
+    const buttons = [
+      ...((_a = this._indicatorButtonsContainer.value) == null ? void 0 : _a.querySelectorAll("button")) ?? []
+    ];
+    this._moveBy(moveOffset);
+    buttons[this.currentIndex].focus();
+  }
+  _handleSlotchange() {
+    const items = this._items;
+    this._itemCount = items.length;
+    for (const [index, item] of items.entries()) {
+      item.label = `${index + 1} of ${this._itemCount}`;
+    }
+    this._updateItemActive();
+  }
+  _moveBy(moveOffset) {
+    const newIndex = this.currentIndex + moveOffset;
+    if (newIndex < 0 || newIndex >= this._itemCount) {
+      return;
+    }
+    const oldIndex = this.currentIndex;
+    this.currentIndex = newIndex;
+    this._emitSelect(moveOffset === 1 ? "next" : "prev", oldIndex);
+  }
+  _updateItemActive() {
+    const items = this._items;
+    if (items.length - 1 < this.currentIndex) {
+      {
+        console.warn(
+          `Invalid 'current-index' property: ${this.currentIndex}. The number of actual 'daikin-carousel-item's exceeds the number of items.`
+        );
+      }
+      return;
+    }
+    if (this.currentIndex < 0) {
+      {
+        console.warn(
+          `Invalid 'current-item' property: ${this.currentIndex}. Negative values cannot be set.`
+        );
+      }
+      return;
+    }
+    for (const [index, item] of this._items.entries()) {
+      item.active = index === this.currentIndex;
+    }
+  }
+  render() {
+    return lit.html`<div
+      class="flex justify-center items-center flex-col gap-8"
+      style=${`--total:${this._itemCount};--current:${this.currentIndex};`}
+    >
+      <div class="flex justify-center items-center w-full gap-4">
+        <daikin-icon-button
+          ${ref_js.ref(this._prevButton)}
+          variant="ghost"
+          color="neutral"
+          button-aria-label="Previous"
+          ?disabled=${this.currentIndex <= 0}
+          @click=${() => this._moveBy(-1)}
+        >
+          <span class=${cvaButton({ intent: "previous" })}></span>
+        </daikin-icon-button>
+        <div
+          class="w-full overflow-clip relative focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-ddt-color-common-border-focus"
+          aria-live="polite"
+        >
+          <div
+            class="flex w-[calc(100%*var(--total))] transition-transform translate-x-[calc(-100%*var(--current)/var(--total))] duration-[--ddc-transition-duration]"
+          >
+            <slot @slotchange=${this._handleSlotchange}></slot>
+          </div>
+        </div>
+        <daikin-icon-button
+          ${ref_js.ref(this._nextButton)}
+          variant="ghost"
+          color="neutral"
+          button-aria-label="Next"
+          ?disabled=${this.currentIndex >= this._itemCount - 1}
+          @click=${() => this._moveBy(1)}
+        >
+          <span class=${cvaButton({ intent: "next" })}></span>
+        </daikin-icon-button>
+      </div>
+      <div class="flex gap-3">
+        <div
+          ${ref_js.ref(this._indicatorButtonsContainer)}
+          class="flex items-center gap-4"
+          role="tablist"
+          @keydown=${this._handleKeydownIndicator}
+        >
+          ${repeat_js.repeat(
+      this._items,
+      (_, index) => index,
+      (_, index) => lit.html`<button
+                class=${INDICATOR_CLASS_NAME}
+                aria-label="Slide ${index + 1}"
+                aria-selected=${this.currentIndex === index}
+                role="tab"
+                tabindex=${this.currentIndex === index ? 0 : -1}
+                @click=${() => this._handleClickIndicator(index)}
+              ></button>`
+    )}
+        </div>
+      </div>
+    </div>`;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("currentIndex")) {
+      this._updateItemActive();
+    }
+  }
+};
+exports.DaikinCarousel.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: block;
+      width: 100%;
+      position: relative;
+
+      --ddc-transition-duration: ${lit.unsafeCSS(DEFAULT_TRANSITION_DURATION)};
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: Number, reflect: true, attribute: "current-index" })
+], exports.DaikinCarousel.prototype, "currentIndex", 2);
+__decorateClass([
+  decorators_js.queryAssignedElements({ selector: "daikin-carousel-item" })
+], exports.DaikinCarousel.prototype, "_items", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.DaikinCarousel.prototype, "_itemCount", 2);
+exports.DaikinCarousel = __decorateClass([
+  decorators.ddsElement("daikin-carousel")
+], exports.DaikinCarousel);

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

@@ -0,0 +1,56 @@
+import { PropertyValues } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
+/**
+ * A carousel is a component that displays multiple pieces of information by sliding left and right within a fixed height area.
+ *
+ * The carousel component can be operated in several ways (Control, Indicator, and Swipe), but it is not possible to hide all of these, as this would prevent the user from being able to operate the carousel component.
+ *
+ * Hierarchy:
+ * - `daikin-carousel` > `daikin-carousel-item`
+ *
+ * @fires select - If an item in the carousel is selected in some way, the method used to select it, the index number of the item displayed before it, and the index number of the item currently displayed are passed.
+ *
+ * @slot - A slot for carousel items. Place `daikin-carousel-item` elements here.
+ *
+ * @cssprop [--ddc-transition-duration=600ms] - Specify the interval for the slide animation.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/carousel/index.js";
+ * import "@daikin-oss/design-system-web-components/components/carousel-item/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-carousel>
+ *   <daikin-carousel-item>Carousel item 1</daikin-carousel-item>
+ *   <daikin-carousel-item>Carousel item 2</daikin-carousel-item>
+ *   <daikin-carousel-item>Carousel item 3</daikin-carousel-item>
+ * </daikin-carousel>
+ * ```
+ */
+export declare class DaikinCarousel extends DDSElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * The index number of the content currently being displayed.
+     */
+    currentIndex: number;
+    private readonly _items;
+    private _itemCount;
+    private _prevButton;
+    private _nextButton;
+    private _indicatorButtonsContainer;
+    private _emitSelect;
+    private _handleClickIndicator;
+    private _handleKeydownIndicator;
+    private _handleSlotchange;
+    private _moveBy;
+    private _updateItemActive;
+    render(): import('lit-html').TemplateResult<1>;
+    protected updated(changedProperties: PropertyValues): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-carousel": DaikinCarousel;
+    }
+}

package/dist/cjs-dev/components/carousel/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinCarousel = require("./daikin-carousel.cjs");
+Object.defineProperty(exports, "DaikinCarousel", {
+  enumerable: true,
+  get: () => daikinCarousel.DaikinCarousel
+});

package/dist/cjs-dev/components/carousel/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-carousel.cjs";

package/dist/cjs-dev/components/carousel-item/daikin-carousel-item.cjs

@@ -0,0 +1,80 @@
+"use strict";
+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 = (decorators2, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  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.DaikinCarouselItem = class DaikinCarouselItem extends ddsElement.DDSElement {
+  constructor() {
+    super(...arguments);
+    this.label = "";
+    this.active = false;
+    this._hasTextContents = false;
+  }
+  _handleFooterSlotChange() {
+    this._hasTextContents = this._titleElements.length > 0 || this._descriptionElements.length > 0;
+  }
+  render() {
+    return lit.html`<div
+      class="flex flex-col flex-none gap-3 text-ddt-color-common-text-primary font-daikinSerif overflow-hidden"
+      role="tabpanel"
+      aria-label=${this.label}
+      aria-hidden=${!this.active}
+    >
+      <slot></slot>
+      <div
+        class="visible:flex flex-col gap-2"
+        ?hidden=${!this._hasTextContents}
+      >
+        <slot
+          name="title"
+          class="leading-[130%] font-bold"
+          @slotchange=${this._handleFooterSlotChange}
+        ></slot>
+        <slot
+          name="description"
+          class="text-sm"
+          @slotchange=${this._handleFooterSlotChange}
+        ></slot>
+      </div>
+    </div>`;
+  }
+};
+exports.DaikinCarouselItem.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: block;
+      width: 100%;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String, attribute: false })
+], exports.DaikinCarouselItem.prototype, "label", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, attribute: false })
+], exports.DaikinCarouselItem.prototype, "active", 2);
+__decorateClass([
+  decorators_js.queryAssignedElements({ slot: "title" })
+], exports.DaikinCarouselItem.prototype, "_titleElements", 2);
+__decorateClass([
+  decorators_js.queryAssignedElements({ slot: "description" })
+], exports.DaikinCarouselItem.prototype, "_descriptionElements", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.DaikinCarouselItem.prototype, "_hasTextContents", 2);
+exports.DaikinCarouselItem = __decorateClass([
+  decorators.ddsElement("daikin-carousel-item")
+], exports.DaikinCarouselItem);

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

@@ -0,0 +1,50 @@
+import { DDSElement } from "../../base/index.cjs";
+/**
+ * The carousel item component is a child element within the `daikin-carousel` component.
+ *
+ * Hierarchy:
+ * - `daikin-carousel` > `daikin-carousel-item`
+ *
+ * @slot - A slot for an image or slide.
+ * @slot title - A slot for title text.
+ * @slot description - A slot for description text.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/carousel-item/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-carousel-item>Carousel item</daikin-carousel-item>
+ * ```
+ */
+export declare class DaikinCarouselItem extends DDSElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * _Internal use._
+     * Item's aria label.
+     * Controlled by `daikin-carousel`.
+     *
+     * @private
+     */
+    label: string;
+    /**
+     * _Internal use._
+     * Whether this item is displayed in the carousel or not.
+     * Controlled by `daikin-carousel`.
+     *
+     * @private
+     */
+    active: boolean;
+    private readonly _titleElements;
+    private readonly _descriptionElements;
+    private _hasTextContents;
+    private _handleFooterSlotChange;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-carousel-item": DaikinCarouselItem;
+    }
+}

package/dist/cjs-dev/components/carousel-item/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinCarouselItem = require("./daikin-carousel-item.cjs");
+Object.defineProperty(exports, "DaikinCarouselItem", {
+  enumerable: true,
+  get: () => daikinCarouselItem.DaikinCarouselItem
+});

package/dist/cjs-dev/components/carousel-item/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-carousel-item.cjs";

package/dist/cjs-dev/components/checkbox/daikin-checkbox.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,56 +20,61 @@ var __decorateClass = (decorators, target, key, kind) => {
 const CHECKBOX_CLASS_NAME = classVarianceAuthority.cva([
   "block",
   "size-4",
-  "border-system-state-neutral-active",
+  "border-ddt-color-common-neutral-default",
   "border-2",
   "rounded-sm",
   "relative",
   "appearance-none",
-  "before:text-system-element-text-inverse",
+  "before:text-ddt-color-common-text-inverse",
   "before:absolute",
   "before:m-auto",
   "before:inset-0",
   "checked:before:i-daikin-checkbox-checked",
+  "checked:before:size-3",
   "indeterminate:before:i-daikin-checkbox-indeterminate",
   "indeterminate:before:size-2.5",
   "focus-visible:outline",
   "focus-visible:outline-2",
   "focus-visible:outline-offset-2",
-  "focus-visible:outline-system-state-focus",
-  "enabled:group-hover:border-system-state-neutral-hover",
-  "enabled:group-hover:bg-system-background-surface-hover",
-  "enabled:group-active:border-system-state-neutral-press",
-  "enabled:group-active:bg-system-background-surface-press",
-  "enabled:checked:border-system-state-primary-active",
-  "enabled:checked:bg-system-state-primary-active",
-  "enabled:checked:group-hover:bg-system-state-primary-hover",
-  "enabled:checked:group-hover:border-system-state-primary-hover",
-  "enabled:checked:group-hover:before:text-system-element-text-inverse",
-  "enabled:checked:group-active:bg-system-state-primary-press",
-  "enabled:checked:group-active:border-system-state-primary-press",
-  "enabled:checked:group-active:before:text-system-element-text-inverse",
-  "enabled:indeterminate:bg-system-state-primary-active",
-  "enabled:indeterminate:border-system-state-primary-active",
-  "enabled:indeterminate:group-hover:bg-system-state-primary-hover",
-  "enabled:indeterminate:group-hover:border-system-state-primary-hover",
-  "enabled:indeterminate:group-hover:before:text-system-element-text-inverse",
-  "enabled:indeterminate:group-active:bg-system-state-primary-press",
-  "enabled:indeterminate:group-active:border-system-state-primary-press",
-  "enabled:indeterminate:group-active:before:text-system-element-text-inverse",
-  "disabled:border-system-state-disabled",
-  "disabled:bg-system-element-text-inverse",
-  "disabled:checked:bg-system-state-disabled",
-  "disabled:indeterminate:bg-system-state-disabled"
+  "focus-visible:outline-ddt-color-common-border-focus",
+  "enabled:group-hover:border-ddt-color-common-neutral-hover",
+  "enabled:group-hover:bg-ddt-color-common-surface-hover",
+  "enabled:group-active:border-ddt-color-common-neutral-press",
+  "enabled:group-active:bg-ddt-color-common-surface-press",
+  "enabled:checked:border-ddt-color-common-brand-default",
+  "enabled:checked:bg-ddt-color-common-brand-default",
+  "enabled:checked:group-hover:bg-ddt-color-common-brand-hover",
+  "enabled:checked:group-hover:border-ddt-color-common-brand-hover",
+  "enabled:checked:group-hover:before:text-ddt-color-common-text-inverse",
+  "enabled:checked:group-active:bg-ddt-color-common-brand-press",
+  "enabled:checked:group-active:border-ddt-color-common-brand-press",
+  "enabled:checked:group-active:before:text-ddt-color-common-text-inverse",
+  "enabled:indeterminate:bg-ddt-color-common-brand-default",
+  "enabled:indeterminate:border-ddt-color-common-brand-default",
+  "enabled:indeterminate:group-hover:bg-ddt-color-common-brand-hover",
+  "enabled:indeterminate:group-hover:border-ddt-color-common-brand-hover",
+  "enabled:indeterminate:group-hover:before:text-ddt-color-common-text-inverse",
+  "enabled:indeterminate:group-active:bg-ddt-color-common-brand-press",
+  "enabled:indeterminate:group-active:border-ddt-color-common-brand-press",
+  "enabled:indeterminate:group-active:before:text-ddt-color-common-text-inverse",
+  "disabled:border-ddt-color-common-disabled",
+  "disabled:bg-ddt-color-common-text-inverse",
+  "disabled:checked:bg-ddt-color-common-disabled",
+  "disabled:indeterminate:bg-ddt-color-common-disabled"
 ])();
-const cvaLabel = classVarianceAuthority.cva(["pr-2"], {
+const cvaLabel = classVarianceAuthority.cva([], {
   variants: {
     disabled: {
-      false: ["text-system-element-text-primary"],
-      true: ["text-system-state-disabled"]
+      false: ["text-ddt-color-common-text-primary"],
+      true: ["text-ddt-color-common-disabled"]
+    },
+    hidden: {
+      false: ["inline-block", "pr-2"],
+      true: ["hidden"]
     }
   }
 });
-exports.DaikinCheckbox = class DaikinCheckbox extends lit.LitElement {
+exports.DaikinCheckbox = class DaikinCheckbox extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
     this.name = "";
@@ -80,6 +88,9 @@ exports.DaikinCheckbox = class DaikinCheckbox extends lit.LitElement {
   get checked() {
     return this.checkState === "checked";
   }
+  get _labelHidden() {
+    return this.labelPosition === "hidden";
+  }
   /**
    * A property-only accessor for `checkState` provided for convenience.
    * _Getter_: Returns `true` when `checkState` is `"checked"`, and `false` otherwise.
@@ -92,9 +103,13 @@ exports.DaikinCheckbox = class DaikinCheckbox extends lit.LitElement {
     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.checkState = event.target.checked ? "checked" : "unchecked";
@@ -102,29 +117,32 @@ exports.DaikinCheckbox = class DaikinCheckbox extends lit.LitElement {
     this.dispatchEvent(new Event("change", event));
   }
   render() {
-    return lit.html`<label class="group flex gap-2 items-center font-daikinSerif">
+    return lit.html`<label
+      class="group flex gap-2 items-center size-full font-daikinSerif"
+      @click=${this._handleClick}
+    >
       <span class="p-2">
         <input
           class=${CHECKBOX_CLASS_NAME}
           type="checkbox"
           name=${this.name}
-          aria-label=${this.labelPosition === "hidden" ? this.label : lit.nothing}
-          .value=${this.value}
-          .indeterminate=${this.checkState === "indeterminate"}
-          .checked=${this.checked}
+          aria-label=${this._labelHidden ? this.label : lit.nothing}
           ?disabled=${this.disabled}
+          .checked=${this.checked}
+          .indeterminate=${this.checkState === "indeterminate"}
+          .value=${this.value}
           @change=${this._handleChange}
-          @click=${this._handleClick}
         />
       </span>
-      <span
+      <slot
         class=${cvaLabel({
-      disabled: this.disabled
+      disabled: this.disabled,
+      hidden: this._labelHidden
     })}
-        ?hidden=${this.labelPosition === "hidden"}
+        ?hidden=${this._labelHidden}
       >
         ${this.label}
-      </span>
+      </slot>
     </label>`;
   }
   updated(changedProperties) {
@@ -160,5 +178,5 @@ __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.DaikinCheckbox.prototype, "disabled", 2);
 exports.DaikinCheckbox = __decorateClass([
-  decorators_js.customElement("daikin-checkbox")
+  decorators.ddsElement("daikin-checkbox")
 ], exports.DaikinCheckbox);