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

package/dist/es-dev/components/card-header/daikin-card-header.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.js";
 /**
  * `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/es-dev/components/card-header/daikin-card-header.js

@@ -1,15 +1,15 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html } from "lit";
-import { customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html } from "lit";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
-var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, 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);
+      result = decorator(result) || result;
   return result;
 };
 const cvaTitle = cva([
@@ -30,14 +30,14 @@ const cvaDescription = cva([
   "not-italic",
   "font-normal"
 ])();
-let DaikinCardHeader = class extends LitElement {
+let DaikinCardHeader = class extends DDSElement {
   render() {
     return 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>
@@ -53,7 +53,7 @@ DaikinCardHeader.styles = css`
     }
   `;
 DaikinCardHeader = __decorateClass([
-  customElement("daikin-card-header")
+  ddsElement("daikin-card-header")
 ], DaikinCardHeader);
 export {
   DaikinCardHeader

package/dist/es-dev/components/carousel/daikin-carousel.d.ts

@@ -0,0 +1,56 @@
+import { PropertyValues } from 'lit';
+import { DDSElement } from "../../base/index.js";
+/**
+ * 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/es-dev/components/carousel/daikin-carousel.js

@@ -0,0 +1,228 @@
+import { cva } from "class-variance-authority";
+import { css, unsafeCSS, html } from "lit";
+import { property, queryAssignedElements, state } from "lit/decorators.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { repeat } from "lit/directives/repeat.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
+import tailwindStyles from "../../tailwind.css.js";
+import "../icon-button/daikin-icon-button.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, 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);
+  return result;
+};
+const DEFAULT_TRANSITION_DURATION = "600ms";
+const cvaButton = 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 = 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"
+])();
+let DaikinCarousel = class extends DDSElement {
+  constructor() {
+    super(...arguments);
+    this.currentIndex = 0;
+    this._itemCount = 0;
+    this._prevButton = createRef();
+    this._nextButton = createRef();
+    this._indicatorButtonsContainer = 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 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(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(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(this._indicatorButtonsContainer)}
+          class="flex items-center gap-4"
+          role="tablist"
+          @keydown=${this._handleKeydownIndicator}
+        >
+          ${repeat(
+      this._items,
+      (_, index) => index,
+      (_, index) => 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();
+    }
+  }
+};
+DaikinCarousel.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: block;
+      width: 100%;
+      position: relative;
+
+      --ddc-transition-duration: ${unsafeCSS(DEFAULT_TRANSITION_DURATION)};
+    }
+  `;
+__decorateClass([
+  property({ type: Number, reflect: true, attribute: "current-index" })
+], DaikinCarousel.prototype, "currentIndex", 2);
+__decorateClass([
+  queryAssignedElements({ selector: "daikin-carousel-item" })
+], DaikinCarousel.prototype, "_items", 2);
+__decorateClass([
+  state()
+], DaikinCarousel.prototype, "_itemCount", 2);
+DaikinCarousel = __decorateClass([
+  ddsElement("daikin-carousel")
+], DaikinCarousel);
+export {
+  DaikinCarousel
+};

package/dist/es-dev/components/carousel/index.d.ts

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

package/dist/es-dev/components/carousel/index.js

@@ -0,0 +1,4 @@
+import { DaikinCarousel } from "./daikin-carousel.js";
+export {
+  DaikinCarousel
+};

package/dist/es-dev/components/carousel-item/daikin-carousel-item.d.ts

@@ -0,0 +1,50 @@
+import { DDSElement } from "../../base/index.js";
+/**
+ * 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/es-dev/components/carousel-item/daikin-carousel-item.js

@@ -0,0 +1,81 @@
+import { css, unsafeCSS, html } from "lit";
+import { property, queryAssignedElements, state } from "lit/decorators.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
+import tailwindStyles from "../../tailwind.css.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, 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);
+  return result;
+};
+let DaikinCarouselItem = class extends 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 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>`;
+  }
+};
+DaikinCarouselItem.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: block;
+      width: 100%;
+    }
+  `;
+__decorateClass([
+  property({ type: String, attribute: false })
+], DaikinCarouselItem.prototype, "label", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: false })
+], DaikinCarouselItem.prototype, "active", 2);
+__decorateClass([
+  queryAssignedElements({ slot: "title" })
+], DaikinCarouselItem.prototype, "_titleElements", 2);
+__decorateClass([
+  queryAssignedElements({ slot: "description" })
+], DaikinCarouselItem.prototype, "_descriptionElements", 2);
+__decorateClass([
+  state()
+], DaikinCarouselItem.prototype, "_hasTextContents", 2);
+DaikinCarouselItem = __decorateClass([
+  ddsElement("daikin-carousel-item")
+], DaikinCarouselItem);
+export {
+  DaikinCarouselItem
+};

package/dist/es-dev/components/carousel-item/index.d.ts

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

package/dist/es-dev/components/carousel-item/index.js

@@ -0,0 +1,4 @@
+import { DaikinCarouselItem } from "./daikin-carousel-item.js";
+export {
+  DaikinCarouselItem
+};

package/dist/es-dev/components/checkbox/daikin-checkbox.d.ts

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

@@ -1,6 +1,9 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html, nothing } from "lit";
-import { property, customElement } from "lit/decorators.js";
+import { css, unsafeCSS, html, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { DDSElement } from "../../base/dds-element.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -25,6 +28,7 @@ const CHECKBOX_CLASS_NAME = 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",
@@ -56,15 +60,19 @@ const CHECKBOX_CLASS_NAME = cva([
   "disabled:checked:bg-ddt-color-common-disabled",
   "disabled:indeterminate:bg-ddt-color-common-disabled"
 ])();
-const cvaLabel = cva(["pr-2"], {
+const cvaLabel = cva([], {
   variants: {
     disabled: {
       false: ["text-ddt-color-common-text-primary"],
       true: ["text-ddt-color-common-disabled"]
+    },
+    hidden: {
+      false: ["inline-block", "pr-2"],
+      true: ["hidden"]
     }
   }
 });
-let DaikinCheckbox = class extends LitElement {
+let DaikinCheckbox = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.name = "";
@@ -78,6 +86,9 @@ let DaikinCheckbox = class extends 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.
@@ -90,9 +101,13 @@ let DaikinCheckbox = class extends 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";
@@ -100,29 +115,32 @@ let DaikinCheckbox = class extends LitElement {
     this.dispatchEvent(new Event("change", event));
   }
   render() {
-    return html`<label class="group flex gap-2 items-center font-daikinSerif">
+    return 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 : nothing}
-          .value=${this.value}
-          .indeterminate=${this.checkState === "indeterminate"}
-          .checked=${this.checked}
+          aria-label=${this._labelHidden ? this.label : 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) {
@@ -158,7 +176,7 @@ __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinCheckbox.prototype, "disabled", 2);
 DaikinCheckbox = __decorateClass([
-  customElement("daikin-checkbox")
+  ddsElement("daikin-checkbox")
 ], DaikinCheckbox);
 export {
   DaikinCheckbox