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

package/dist/cjs-dev/components/card-footer/daikin-card-footer.cjs

@@ -1,19 +1,19 @@
 "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 = (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;
 };
-exports.DaikinCardFooter = class DaikinCardFooter extends lit.LitElement {
+exports.DaikinCardFooter = class DaikinCardFooter extends ddsElement.DDSElement {
   render() {
     return lit.html`<slot></slot>`;
   }
@@ -29,5 +29,5 @@ exports.DaikinCardFooter.styles = lit.css`
     }
   `;
 exports.DaikinCardFooter = __decorateClass([
-  decorators_js.customElement("daikin-card-footer")
+  decorators.ddsElement("daikin-card-footer")
 ], exports.DaikinCardFooter);

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

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { DDSElement } from "../../base/index.cjs";
 /**
  * `daikin-card-footer` is used to represent footer of the card component, and is used as a child element of the `daikin-card` component.
  *
@@ -9,6 +9,10 @@ import { LitElement } from 'lit';
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/card-footer/index.js";
+ * ```
+ *
  * ```html
  * <!-- See `daikin-card` component for complete example. -->
  * <daikin-card-footer>
@@ -18,7 +22,7 @@ import { LitElement } from 'lit';
  * </daikin-card-footer>
  * ```
  */
-export declare class DaikinCardFooter extends LitElement {
+export declare class DaikinCardFooter extends DDSElement {
     static styles: import('lit').CSSResult;
     render(): import('lit-html').TemplateResult<1>;
 }

package/dist/cjs-dev/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-dev/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-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";