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

package/dist/cjs-dev/components/input-group/daikin-input-group.d.cts

@@ -5,6 +5,7 @@ import { DDSElement } from "../../base/index.cjs";
  * This component is particularly useful for creating complex forms where clear communication and guidance are essential.
  *
  * Hierarchies:
+ * - `daikin-input-group` > `daikin-date-picker`
  * - `daikin-input-group` > `daikin-dropdown` > `daikin-dropdown-item`
  * - `daikin-input-group` > `daikin-radio-group` > `daikin-radio`
  * - `daikin-input-group` > `daikin-select`
@@ -18,6 +19,7 @@ import { DDSElement } from "../../base/index.cjs";
  * ```js
  * import "@daikin-oss/design-system-web-components/components/input-group/index.js";
  * <!-- Import the following as necessary. -->
+ * import "@daikin-oss/design-system-web-components/components/date-picker/index.js";
  * import "@daikin-oss/design-system-web-components/components/dropdown/index.js";
  * import "@daikin-oss/design-system-web-components/components/dropdown-item/index.js";
  * import "@daikin-oss/design-system-web-components/components/radio/index.js";
@@ -27,6 +29,14 @@ import { DDSElement } from "../../base/index.cjs";
  * import "@daikin-oss/design-system-web-components/components/text-field/index.js";
  * ```
  *
+ * With Date Picker:
+ *
+ * ```html
+ * <daikin-input-group>
+ *   <daikin-date-picker></daikin-date-picker>
+ * </daikin-input-group>
+ * ```
+ *
  * With Dropdown:
  *
  * ```html
@@ -57,6 +67,18 @@ import { DDSElement } from "../../base/index.cjs";
  * </daikin-input-group>
  * ```
  *
+ * With Checkbox Group:
+ *
+ * ```html
+ * <daikin-input-group>
+ *   <daikin-checkbox-group>
+ *     <daikin-checkbox name="name1" value="value1" label="Checkbox Item 1"></daikin-checkbox>
+ *     <daikin-checkbox name="name2" value="value2" label="Checkbox Item 2"></daikin-checkbox>
+ *     <daikin-checkbox name="name3" value="value3" label="Checkbox Item 3"></daikin-checkbox>
+ *   </daikin-checkbox-group>
+ * </daikin-input-group>
+ * ```
+ *
  * With Select:
  *
  * ```html

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

@@ -1,24 +1,96 @@
 "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");
+require("../list-item/daikin-list-item.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 = decorator(result) || result;
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
 exports.DaikinList = class DaikinList extends ddsElement.DDSElement {
+  constructor() {
+    super(...arguments);
+    this.listRole = "list";
+  }
+  _reflectSlotProperties() {
+    for (const daikinListItem of this._listItems) {
+      daikinListItem.listItemRole = this.listRole === "menu" ? "menuitem" : "listitem";
+    }
+  }
+  _handleSlotChange() {
+    this._reflectSlotProperties();
+  }
+  handleKeyDown(event) {
+    const direction = {
+      ArrowDown: "down",
+      ArrowUp: "up",
+      Home: "home",
+      End: "end"
+    }[event.key];
+    if (!direction) {
+      return;
+    }
+    event.preventDefault();
+    const listItems = this._listItems.filter(({ disabled }) => !disabled);
+    const activeElement = document.activeElement;
+    const focusedItemIndex = activeElement ? listItems.findIndex((item) => item === activeElement) : -1;
+    if (focusedItemIndex < 0) {
+      return;
+    }
+    if (direction === "home") {
+      const nextItem2 = listItems[0];
+      nextItem2.focus();
+      return;
+    }
+    if (direction === "end") {
+      const nextItem2 = listItems[listItems.length - 1];
+      nextItem2.focus();
+      return;
+    }
+    const moveOffset = direction === "up" ? -1 : 1;
+    const nextItem = listItems[(focusedItemIndex + moveOffset + listItems.length) % listItems.length];
+    nextItem.focus();
+  }
   render() {
-    return lit.html`<div role="list">
-      <slot></slot>
+    return lit.html`<div role=${this.listRole}>
+      <slot
+        @keydown=${this.handleKeyDown}
+        @slotchange=${this._handleSlotChange}
+      ></slot>
     </div>`;
   }
+  /**
+   * Focuses on the first list item in the slot.
+   * @private
+   */
+  focusFirstItem() {
+    this._listItems[0].focus();
+  }
 };
+exports.DaikinList.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: inline-block;
+      width: 100%;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String, attribute: false })
+], exports.DaikinList.prototype, "listRole", 2);
+__decorateClass([
+  decorators_js.queryAssignedElements({ selector: "daikin-list-item" })
+], exports.DaikinList.prototype, "_listItems", 2);
 exports.DaikinList = __decorateClass([
   decorators.ddsElement("daikin-list")
 ], exports.DaikinList);

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

@@ -4,6 +4,7 @@ import { DDSElement } from "../../base/index.cjs";
  *
  * Hierarchy:
  * - `daikin-list` > `daikin-list-item`
+ * - `daikin-menu` > `daikin-list` > `daikin-list-item`
  *
  * @slot - A slot for the list items. Place `daikin-list-item` elements here.
  *
@@ -23,7 +24,22 @@ import { DDSElement } from "../../base/index.cjs";
  * ```
  */
 export declare class DaikinList extends DDSElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * The ARIA `role` of the component.
+     * Controlled by the `daikin-menu` component if used within it.
+     */
+    listRole: "list" | "menu";
+    private readonly _listItems;
+    private _reflectSlotProperties;
+    private _handleSlotChange;
+    private handleKeyDown;
     render(): import('lit-html').TemplateResult<1>;
+    /**
+     * Focuses on the first list item in the slot.
+     * @private
+     */
+    focusFirstItem(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -1,5 +1,5 @@
 "use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
 const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
@@ -43,6 +43,18 @@ const cvaContent = classVarianceAuthority.cva(["block", "pl-2", "pr-3", "text-le
     }
   }
 });
+const WRAPPER = classVarianceAuthority.cva([
+  "group",
+  "flex",
+  "justify-between",
+  "items-center",
+  "w-full",
+  "min-h-12",
+  "p-3",
+  "text-left",
+  "relative",
+  "break-all"
+])();
 const cvaIcon = classVarianceAuthority.cva(["icon-size-6"], {
   variants: {
     position: {
@@ -59,6 +71,7 @@ exports.DaikinListItem = class DaikinListItem extends ddsElement.DDSElement {
   constructor() {
     super();
     this.type = "button";
+    this.listItemRole = "listitem";
     this.href = null;
     this.disabled = false;
     this.addEventListener("click", (event) => {
@@ -102,10 +115,7 @@ exports.DaikinListItem = class DaikinListItem extends ddsElement.DDSElement {
         </a>`,
       text: () => lit.html`<span class=${INNER_CN}>${content}</span>`
     }[this.type]();
-    return lit.html`<div
-      class="group flex justify-between items-center w-full min-h-12 p-3 text-left relative"
-      role="listitem"
-    >
+    return lit.html`<div class=${WRAPPER} role=${this.listItemRole}>
       ${list}
       <slot
         name="action"
@@ -133,10 +143,18 @@ exports.DaikinListItem = class DaikinListItem extends ddsElement.DDSElement {
 };
 exports.DaikinListItem.styles = lit.css`
     ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: inline-block;
+      width: 100%;
+    }
   `;
 __decorateClass([
   decorators_js.property({ type: String, reflect: true })
 ], exports.DaikinListItem.prototype, "type", 2);
+__decorateClass([
+  decorators_js.property({ type: String, attribute: false })
+], exports.DaikinListItem.prototype, "listItemRole", 2);
 __decorateClass([
   decorators_js.property({ type: String, reflect: true })
 ], exports.DaikinListItem.prototype, "href", 2);
@@ -149,3 +167,5 @@ __decorateClass([
 exports.DaikinListItem = __decorateClass([
   decorators.ddsElement("daikin-list-item")
 ], exports.DaikinListItem);
+const DaikinListItem2 = exports.DaikinListItem;
+exports.default = DaikinListItem2;

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

@@ -2,15 +2,16 @@ import { DDSElement } from "../../base/index.cjs";
 /**
  * The list item component is used to represent a single item in a list. Please use it within the `daikin-list` component.
  *
+ * Hierarchy:
+ * - `daikin-list` > `daikin-list-item`
+ * - `daikin-menu` > `daikin-list` > `daikin-list-item`
+ *
  * The following types are available:
  *
  * - `button`: Uses `<button>` tag.
  * - `link`: Uses `<a>` tag.
  * - `text`: Uses `<span>` tag.
  *
- * Hierarchy:
- * - `daikin-list` > `daikin-list-item`
- *
  * @fires click - A retargeted event of a [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event). Suppressed if `disabled` is true.
  *
  * @slot - A slot for the list item label content.
@@ -37,6 +38,11 @@ export declare class DaikinListItem extends DDSElement {
      * - `text`: The list item will be rendered as a `<span>` element. Use this if the list itself has no action.
      */
     type: "button" | "link" | "text";
+    /**
+     * The ARIA `role` of the component.
+     * Controlled by the `daikin-list` component.
+     */
+    listItemRole: "listitem" | "menuitem";
     /**
      * Link `href`.
      * Only used if the `type` is `"link"`.

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

@@ -0,0 +1,91 @@
+"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 tailwind = require("../../tailwind.css.cjs");
+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 cvaLoadingContainer = classVarianceAuthority.cva(
+  ["flex", "justify-center", "items-center", "size-full"],
+  {
+    variants: {
+      background: {
+        false: ["bg-transparent"],
+        true: ["bg-ddt-color-common-background-default", "rounded"]
+      }
+    }
+  }
+);
+const cvaLoading = classVarianceAuthority.cva(
+  [
+    "block",
+    "border-t-ddt-color-common-brand-default",
+    "border-r-ddt-color-common-brand-default",
+    "border-b-ddt-color-common-brand-default",
+    "border-l-transparent",
+    "rounded-full",
+    "animate-[loading_800ms_linear_infinite]"
+  ],
+  {
+    variants: {
+      size: {
+        small: ["size-[1.125rem]", "border-2"],
+        medium: ["size-9", "border-4"]
+      }
+    }
+  }
+);
+exports.DaikinLoading = class DaikinLoading extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.size = "medium";
+    this.background = false;
+  }
+  render() {
+    return lit.html`<div
+      class=${cvaLoadingContainer({ background: this.background })}
+      role="progressbar"
+      aria-label="Loading"
+    >
+      <div class="size-fit rotate-45">
+        <span class=${cvaLoading({ size: this.size })}></span>
+      </div>
+    </div>`;
+  }
+};
+exports.DaikinLoading.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: block;
+      user-select: none;
+    }
+
+    :host([size="small"]) {
+      width: 2rem;
+      height: 2rem;
+    }
+
+    :host([size="medium"]) {
+      width: 3.5rem;
+      height: 3.5rem;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinLoading.prototype, "size", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinLoading.prototype, "background", 2);
+exports.DaikinLoading = __decorateClass([
+  decorators_js.customElement("daikin-loading")
+], exports.DaikinLoading);

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

@@ -0,0 +1,33 @@
+import { LitElement } from 'lit';
+/**
+ * The loading component displays a spinner to indicate that a process is in progress.
+ * If the spinner is expected to blend into the background, set the background color. You can use the `background` attribute for such cases.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/loading/index.js";
+ * ```
+ *
+ * ```html
+ *  <daikin-loading></daikin-loading>
+ * ```
+ */
+export declare class DaikinLoading extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Size of the loading.
+     */
+    size: "small" | "medium";
+    /**
+     * Variant of the loading.
+     * When the loading component is used against a similar background color, the spinning icon might be difficult to distinguish. To address this, we provide a variant of the icon that includes its own background area, ensuring visibility in such scenarios.
+     */
+    background: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-loading": DaikinLoading;
+    }
+}

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

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

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

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

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

@@ -0,0 +1,105 @@
+"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 ifDefined_js = require("lit/directives/if-defined.js");
+const tailwind = require("../../tailwind.css.cjs");
+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 cvaWrapper = classVarianceAuthority.cva(
+  [
+    "inline-flex",
+    "justify-center",
+    "items-center",
+    "relative",
+    "w-full",
+    "h-full"
+  ],
+  {
+    variants: {
+      type: {
+        logo: [],
+        link: [
+          "focus-visible:outline",
+          "focus-visible:outline-2",
+          "focus-visible:outline-offset-2",
+          "focus-visible:outline-ddt-color-common-border-focus"
+        ]
+      },
+      mode: {
+        positive: ["i-daikin-logo-positive"],
+        negative: ["i-daikin-logo-negative"]
+      }
+    }
+  }
+);
+exports.DaikinLogo = class DaikinLogo extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.href = null;
+    this.target = null;
+    this.logoAriaLabel = "Logo of Daikin";
+    this.mode = "positive";
+  }
+  render() {
+    if (!this.href) {
+      return lit.html`<span
+        class=${cvaWrapper({ type: "logo", mode: this.mode })}
+        role="img"
+        aria-label=${ifDefined_js.ifDefined(this.logoAriaLabel ?? void 0)}
+        alt=${ifDefined_js.ifDefined(this.logoAriaLabel ?? void 0)}
+      ></span>`;
+    } else {
+      return lit.html`<a
+        class=${cvaWrapper({ type: "link", mode: this.mode })}
+        aria-label=${ifDefined_js.ifDefined(this.logoAriaLabel ?? void 0)}
+        href=${ifDefined_js.ifDefined(this.href)}
+        target=${ifDefined_js.ifDefined(this.target ?? void 0)}
+      ></a>`;
+    }
+  }
+  /**
+   * Focuses on the inner link.
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    (_a = this._focusableElement) == null ? void 0 : _a.focus(options);
+  }
+};
+exports.DaikinLogo.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: inline-flex;
+      width: 171px;
+      aspect-ratio: 171 / 37;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinLogo.prototype, "href", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinLogo.prototype, "target", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true, attribute: "logo-aria-label" })
+], exports.DaikinLogo.prototype, "logoAriaLabel", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinLogo.prototype, "mode", 2);
+__decorateClass([
+  decorators_js.query("a")
+], exports.DaikinLogo.prototype, "_focusableElement", 2);
+exports.DaikinLogo = __decorateClass([
+  decorators_js.customElement("daikin-logo")
+], exports.DaikinLogo);

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

@@ -0,0 +1,54 @@
+import { LitElement } from 'lit';
+/**
+ * The logo is a UI element that represents a brand, company or service. It serves as a visual identifier, helping users recognize and navigate within a specific application or website.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/logo/index.js";
+ * ```
+ *
+ * ```html
+ * // Control the size of the logo by directly setting the width and height.
+ * <daikin-logo style="width:186px;height:52px"></daikin-logo>
+ *
+ * // When the logo is used inside other elements, its size automatically adapts to the size of the parent element.
+ * <div style="width:186px;height:52px">
+ *   <daikin-logo></daikin-logo>
+ * </div>
+ * ```
+ */
+export declare class DaikinLogo extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Link `href`.
+     * If specify this property the logo will be a link.
+     */
+    href: string | null;
+    /**
+     * Link `target`.
+     * Used only when use logo as a link.
+     */
+    target: string | null;
+    /**
+     * Provides an accessible name of the logo.
+     */
+    logoAriaLabel: string | null;
+    /**
+     * Specify the the logo mode.
+     * Notice: Allow the use of a negative logo only when the positive logo is too close to the background to be legible.
+     */
+    mode: "positive" | "negative";
+    private _focusableElement;
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * Focuses on the inner link.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-logo": DaikinLogo;
+    }
+}

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

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

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

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