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

package/dist/cjs/components/card-header/daikin-card-header.cjs

@@ -2,16 +2,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])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
+  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators2[i])
+      result = decorator(result) || result;
   return result;
 };
 const cvaTitle = classVarianceAuthority.cva([
@@ -32,14 +32,14 @@ const cvaDescription = classVarianceAuthority.cva([
   "not-italic",
   "font-normal"
 ])();
-exports.DaikinCardHeader = class DaikinCardHeader extends lit.LitElement {
+exports.DaikinCardHeader = class DaikinCardHeader extends ddsElement.DDSElement {
   render() {
     return lit.html`<div class="flex w-full gap-1">
       <slot
         name="left-icon"
         class="flex-none icon-size-6 text-ddt-color-common-text-primary"
       ></slot>
-      <div class="flex-1 flex flex-col pt-0.5 gap-[1px]">
+      <div class="flex-1 flex flex-col pt-0.5 gap-1">
         <slot class=${cvaTitle}></slot>
         <slot name="description" class=${cvaDescription}></slot>
       </div>
@@ -55,5 +55,5 @@ exports.DaikinCardHeader.styles = lit.css`
     }
   `;
 exports.DaikinCardHeader = __decorateClass([
-  decorators_js.customElement("daikin-card-header")
+  decorators.ddsElement("daikin-card-header")
 ], exports.DaikinCardHeader);

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

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+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.
  *
@@ -11,6 +11,10 @@ import { LitElement } from 'lit';
  *
  * @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>
@@ -20,7 +24,7 @@ import { LitElement } from 'lit';
  * </daikin-card-header>
  * ```
  */
-export declare class DaikinCardHeader extends LitElement {
+export declare class DaikinCardHeader extends DDSElement {
     static styles: import('lit').CSSResult;
     render(): import('lit-html').TemplateResult<1>;
 }

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

@@ -0,0 +1,217 @@
+"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) {
+      return;
+    }
+    if (this.currentIndex < 0) {
+      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/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/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/components/carousel/index.d.cts

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

package/dist/cjs/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/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/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/components/carousel-item/index.d.cts

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

package/dist/cjs/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;
@@ -27,6 +30,7 @@ const CHECKBOX_CLASS_NAME = classVarianceAuthority.cva([
   "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",
@@ -58,15 +62,19 @@ const CHECKBOX_CLASS_NAME = classVarianceAuthority.cva([
   "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-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,33 @@ 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"
+      part="label"
+      @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 +179,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);

package/dist/cjs/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.
@@ -6,6 +7,10 @@ import { LitElement, PropertyValues } 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="checkbox">` element.
  *
+ * @slot - A slot for the checkbox label content.
+ *
+ * @csspart label - Change the style of checkbox label.
+ *
  * @example
  *
  * ```js
@@ -16,7 +21,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 +50,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.