@daikin-oss/design-system-web-components 1.1.0 → 1.3.0-next.2

package/dist/es/components/list/daikin-list.js

@@ -1,22 +1,94 @@
-import { html } from "lit";
+import { unsafeCSS, css, html } from "lit";
+import { property, queryAssignedElements } 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";
+import "../list-item/daikin-list-item.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 = decorator(result) || result;
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
 let DaikinList = class extends 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 html`<div role="list">
-      <slot></slot>
+    return 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();
+  }
 };
+DaikinList.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: inline-block;
+      width: 100%;
+    }
+  `;
+__decorateClass([
+  property({ type: String, attribute: false })
+], DaikinList.prototype, "listRole", 2);
+__decorateClass([
+  queryAssignedElements({ selector: "daikin-list-item" })
+], DaikinList.prototype, "_listItems", 2);
 DaikinList = __decorateClass([
   ddsElement("daikin-list")
 ], DaikinList);

package/dist/es/components/list-item/daikin-list-item.d.ts

@@ -2,15 +2,16 @@ import { DDSElement } from "../../base/index.js";
 /**
  * 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/es/components/list-item/daikin-list-item.js

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { property, query } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { DDSElement } from "../../base/dds-element.js";
@@ -41,7 +41,19 @@ const cvaContent = cva(["block", "pl-2", "pr-3", "text-left"], {
     }
   }
 });
-const cvaIcon = cva(["icon-size-6"], {
+const WRAPPER = cva([
+  "group",
+  "flex",
+  "justify-between",
+  "items-center",
+  "w-full",
+  "min-h-12",
+  "p-3",
+  "text-left",
+  "relative",
+  "break-all"
+])();
+const cvaIcon = cva(["icon-size-6", "slotted:flex-none"], {
   variants: {
     position: {
       left: [],
@@ -57,6 +69,7 @@ let DaikinListItem = class extends DDSElement {
   constructor() {
     super();
     this.type = "button";
+    this.listItemRole = "listitem";
     this.href = null;
     this.disabled = false;
     this.addEventListener("click", (event) => {
@@ -82,7 +95,7 @@ let DaikinListItem = class extends DDSElement {
         name="left-icon"
         class=${cvaIcon({ disabled: this.disabled, position: "left" })}
       >
-        <span class="block -ml-1"></span>
+        <span class="flex-none block -ml-1"></span>
       </slot>
       <slot class=${cvaContent({ disabled: this.disabled })}></slot>
     </span>`;
@@ -100,10 +113,7 @@ let DaikinListItem = class extends DDSElement {
         </a>`,
       text: () => html`<span class=${INNER_CN}>${content}</span>`
     }[this.type]();
-    return html`<div
-      class="group flex justify-between items-center w-full min-h-12 p-3 text-left relative"
-      role="listitem"
-    >
+    return html`<div class=${WRAPPER} role=${this.listItemRole}>
       ${list}
       <slot
         name="action"
@@ -131,10 +141,18 @@ let DaikinListItem = class extends DDSElement {
 };
 DaikinListItem.styles = css`
     ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: inline-block;
+      width: 100%;
+    }
   `;
 __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinListItem.prototype, "type", 2);
+__decorateClass([
+  property({ type: String, attribute: false })
+], DaikinListItem.prototype, "listItemRole", 2);
 __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinListItem.prototype, "href", 2);
@@ -147,6 +165,8 @@ __decorateClass([
 DaikinListItem = __decorateClass([
   ddsElement("daikin-list-item")
 ], DaikinListItem);
+const DaikinListItem$1 = DaikinListItem;
 export {
-  DaikinListItem
+  DaikinListItem,
+  DaikinListItem$1 as default
 };

package/dist/es/components/loading/daikin-loading.d.ts

@@ -21,6 +21,7 @@ export declare class DaikinLoading extends LitElement {
     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>;

package/dist/es/components/loading/daikin-loading.js

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, LitElement, html } from "lit";
+import { unsafeCSS, css, LitElement, html } from "lit";
 import { property, customElement } from "lit/decorators.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
@@ -52,7 +52,6 @@ let DaikinLoading = class extends LitElement {
     return html`<div
       class=${cvaLoadingContainer({ background: this.background })}
       role="progressbar"
-      aria-busy="true"
       aria-label="Loading"
     >
       <div class="size-fit rotate-45">
@@ -66,6 +65,7 @@ DaikinLoading.styles = css`
 
     :host {
       display: block;
+      user-select: none;
     }
 
     :host([size="small"]) {

package/dist/es/components/logo/daikin-logo.d.ts

@@ -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/es/components/logo/daikin-logo.js

@@ -0,0 +1,106 @@
+import { cva } from "class-variance-authority";
+import { unsafeCSS, css, LitElement, html } from "lit";
+import { property, query, customElement } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.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;
+};
+const cvaWrapper = 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"]
+      }
+    }
+  }
+);
+let DaikinLogo = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.href = null;
+    this.target = null;
+    this.logoAriaLabel = "Logo of Daikin";
+    this.mode = "positive";
+  }
+  render() {
+    if (!this.href) {
+      return html`<span
+        class=${cvaWrapper({ type: "logo", mode: this.mode })}
+        role="img"
+        aria-label=${ifDefined(this.logoAriaLabel ?? void 0)}
+        alt=${ifDefined(this.logoAriaLabel ?? void 0)}
+      ></span>`;
+    } else {
+      return html`<a
+        class=${cvaWrapper({ type: "link", mode: this.mode })}
+        aria-label=${ifDefined(this.logoAriaLabel ?? void 0)}
+        href=${ifDefined(this.href)}
+        target=${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);
+  }
+};
+DaikinLogo.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: inline-flex;
+      width: 171px;
+      aspect-ratio: 171 / 37;
+    }
+  `;
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinLogo.prototype, "href", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinLogo.prototype, "target", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "logo-aria-label" })
+], DaikinLogo.prototype, "logoAriaLabel", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinLogo.prototype, "mode", 2);
+__decorateClass([
+  query("a")
+], DaikinLogo.prototype, "_focusableElement", 2);
+DaikinLogo = __decorateClass([
+  customElement("daikin-logo")
+], DaikinLogo);
+export {
+  DaikinLogo
+};

package/dist/es/components/logo/index.d.ts

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

package/dist/es/components/logo/index.js

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

package/dist/es/components/menu/daikin-menu.d.ts

@@ -0,0 +1,89 @@
+import { PropertyValues } from 'lit';
+import { DDSElement } from "../../base/index.js";
+/**
+ * A menu component is used to show list information when a user interacts with an element.
+ *
+ * Hierarchy:
+ * - `daikin-menu` > `daikin-list` > `daikin-list-item`
+ *
+ * @fires beforetoggle - _Cancellable._ A event emitted when the menu is about to be opened or closed by user interaction.
+ * @fires toggle - A event emitted when the menu is opened or closed.
+ *
+ * @slot - A slot for the element to which the menu is attached (the trigger element).
+ * @slot menu - A slot for the menu content (daikin-list component).
+ *
+ * @cssprop [--ddc-menu-spacing=0px] - Spacing between the menu and the trigger.
+ *
+ * @csspart menu - Change the style of menu.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/menu/index.js";
+ * import "@daikin-oss/design-system-web-components/components/button/index.js";
+ * import "@daikin-oss/design-system-web-components/components/list/index.js";
+ * import "@daikin-oss/design-system-web-components/components/list-item/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-menu>
+ *   <daikin-button>Click me</daikin-button>
+ *   <daikin-list slot="menu" style="width: 256px">
+ *     <daikin-list-item>List item label 1</daikin-list-item>
+ *     <daikin-list-item>List item label 2</daikin-list-item>
+ *     <daikin-list-item>List item label 3</daikin-list-item>
+ *   </daikin-list>
+ * </daikin-menu>
+ * ```
+ */
+export declare class DaikinMenu extends DDSElement {
+    static registerCSSCustomProperties(): void;
+    static readonly styles: import('lit').CSSResult;
+    private readonly _lists;
+    private readonly _controls;
+    /**
+     * Specifies the initial position of the menu relative to the trigger.
+     * However, if there isn't enough space in the specified direction, the menu will automatically adjust its direction.
+     */
+    placement: "top" | "bottom" | "left" | "right";
+    /**
+     * Whether the menu is open.
+     */
+    open: boolean;
+    /**
+     * Specify the value of the popover attribute in the Popover API.
+     * - `auto`: Clicking on a trigger element will open a menu, and clicking again will close it. You can also close it using the Esc button. You cannot open multiple menu at the same time.
+     * - `manual`: No click operation is specified for the trigger element. It will not close even if the Esc button is pressed. Multiple menu can be opened at once.
+     */
+    popoverValue: "auto" | "manual";
+    /**
+     * How the menu is controlled.
+     * - `click`: The menu is displayed when the mouse clicks on the trigger element, and hidden when you click on it again. (default)
+     * - `manual`: The menu does not respond to user interaction. Use this to control the menu programmatically.
+     */
+    trigger: "click" | "manual";
+    private _autoUpdateController;
+    private _hostStyles;
+    /**
+     * Reflects static attributes (e.g. ARIA roles) to slot components.
+     * These are typically set once when the slot changes and do not change frequently.
+     */
+    private _reflectStaticProperties;
+    /**
+     * Reflects dynamic attributes (e.g. `open`, `disabled`) to slot components.
+     * These may changed when properties are updated.
+     */
+    private _reflectDynamicProperties;
+    private _handleSlotChange;
+    private _handleTriggerClick;
+    private _handleClick;
+    private _handleBeforeToggle;
+    private _handleToggle;
+    render(): import('lit-html').TemplateResult<1>;
+    protected updated(changedProperties: PropertyValues<this>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-menu": DaikinMenu;
+    }
+}