@daikin-oss/design-system-web-components 0.3.1 → 0.4.0

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

@@ -1,5 +1,4 @@
 import { LitElement } from 'lit';
-
 /**
  * The accordion component serves as the parent element that organizes and manages the overall structure of the accordion.
  * Currently it only provides appropriate styles for individual accordion items.
@@ -11,25 +10,31 @@ import { LitElement } from 'lit';
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/accordion/index.js";
+ * ```
+ *
  * ```html
  * <daikin-accordion>
- *   <daikin-accordion-item title="The first accordion item">
- *     Accordion 1 content.
- *   </daikin-accordion-item>
- *   <daikin-accordion-item title="The second accordion item" open>
- *     Accordion 2 content.
+ *   <daikin-accordion-item>
+ *     <span slot="summary">Accordion summary 1</span>
+ *     Accordion content 1
  *   </daikin-accordion-item>
- *   <daikin-accordion-item title="The third accordion item" disabled>
- *     Accordion 3 content.
+ *   <daikin-accordion-item open>
+ *     <span slot="summary">Accordion summary 2</span>
+ *     Accordion content 2
  *   </daikin-accordion-item>
- *   <daikin-accordion-item title="The fourth accordion item" open disabled>
- *     Accordion 4 content.
+ *   <daikin-accordion-item disabled>
+ *     <span slot="summary">Accordion summary 3</span>
+ *     Accordion content 3
  *   </daikin-accordion-item>
  * </daikin-accordion>
  * ```
  */
 export declare class DaikinAccordion extends LitElement {
     static readonly styles: import('lit').CSSResult;
+    private readonly _items;
+    private _handleMoveFocus;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

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

@@ -1,5 +1,5 @@
 import { css, unsafeCSS, LitElement, html } from "lit";
-import { customElement } from "lit/decorators.js";
+import { queryAssignedElements, customElement } from "lit/decorators.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -12,9 +12,27 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 let DaikinAccordion = class extends LitElement {
+  _handleMoveFocus(event) {
+    const moveOffset = event.detail.direction === "up" ? -1 : 1;
+    const items = this._items;
+    const activeElement = document.activeElement;
+    const focusedItemIndex = activeElement ? items.findIndex((item) => item === activeElement) : -1;
+    if (focusedItemIndex < 0) {
+      return;
+    }
+    for (let index = focusedItemIndex + moveOffset, i = 0; i < items.length; index += moveOffset, i++) {
+      index = Math.sign(index % items.length) === -1 ? items.length - 1 : index % items.length;
+      const item = items[index];
+      if (item.disabled) {
+        continue;
+      }
+      item.focus();
+      break;
+    }
+  }
   render() {
-    return html`<div class="w-full border-y-[1px] border-y-[#CECECE]">
-      <slot></slot>
+    return html`<div class="w-full">
+      <slot @accordion-move-focus=${this._handleMoveFocus}></slot>
     </div>`;
   }
 };
@@ -22,14 +40,21 @@ DaikinAccordion.styles = css`
     ${unsafeCSS(tailwindStyles)}
 
     :host {
-      display: block;
-      width: 100%;
+      min-width: 160px;
+    }
+
+    ::slotted(daikin-accordion-item) {
+      --divider-top-display: block;
+      --divider-bottom-display: none;
     }
 
-    ::slotted(daikin-accordion-item:not(:last-child)) {
-      border-bottom: 1px solid #cecece;
+    ::slotted(daikin-accordion-item:last-child) {
+      --divider-bottom-display: block;
     }
   `;
+__decorateClass([
+  queryAssignedElements({ selector: "daikin-accordion-item" })
+], DaikinAccordion.prototype, "_items", 2);
 DaikinAccordion = __decorateClass([
   customElement("daikin-accordion")
 ], DaikinAccordion);

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

@@ -1,5 +1,4 @@
 import { LitElement, PropertyValues } from 'lit';
-
 /**
  * The accordion item component is a child element within the `daikin-accordion` component.
  * It functions similarly to the HTML `<details>` and `<summary>` tag, allowing users to expand or collapse the associated content by clicking on the header.
@@ -9,12 +8,21 @@ import { LitElement, PropertyValues } from 'lit';
  * - `daikin-accordion` > `daikin-accordion-item`
  *
  * @slot - A slot for the accordion item content.
+ * @slot summary - A slot for the accordion item summary content.
+ *
+ * @cssprop [--divider-top-display=none] - The `display` property of the top divider. Must be either `block` or `none`. Set automatically by `daikin-accordion` component.
+ * @cssprop [--divider-bottom-display=none] - The `display` property of the bottom divider. Must be either `block` or `none`. Set automatically by `daikin-accordion` component.
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/accordion-item/index.js";
+ * ```
+ *
  * ```html
- * <daikin-accordion-item title="The first accordion item">
- *   Accordion 1 content.
+ * <daikin-accordion-item>
+ *   <span slot="Accordion summary">
+ *   Accordion content
  * </daikin-accordion-item>
  * ```
  */
@@ -22,31 +30,37 @@ export declare class DaikinAccordionItem extends LitElement {
     static readonly styles: import('lit').CSSResult;
     private _contentRef;
     /**
-     * Heading of accordion
-     */
-    title: string;
-    /**
-     * Whether the accordion is open
+     * Whether the accordion item is open.
+     * Ignored if `disabled` is `true`.
      */
     open: boolean;
     /**
-     * Whether the accordion is disabled
+     * Whether the accordion item is disabled.
+     * If this is set to `true`, the accordion item will always be closed.
      */
     disabled: boolean;
+    private _summary;
     /**
-     * Open attribute of the actual details element
-     *
-     * The default `open` attribute of the default details element does not allow the display of content to have transitions.
-     * To solve this, the `open` property that `daikin-accordion-item` receives manages the opening and closing of items independently of the open attribute.
+     * Actual presence of `open` attribute of the `<details>` element.
      *
-     * The `open` attribute, which should be present, is taken over by `_detailsOpen`.
+     * The `<details>` element does not support animation on changing the `open` attribute.
+     * In other words, the content is hidden immediately when the `open` attribute is removed.
+     * To enable animation for an accordion, we need to run the animation while maintaining the `open` attribute, and then remove the `open` attribute at the end of the animation.
+     * Treated as `false` if `disabled` is `true`.
      */
     private _detailsOpen;
     private _contentAnimate;
     private _handleSummaryClick;
+    private _handleKeyDown;
+    private _handleToggle;
     render(): import('lit-html').TemplateResult<1>;
     protected firstUpdated(): void;
     protected updated(changedProperties: PropertyValues<this>): void;
+    /**
+     * Focuses on the inner summary.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions | undefined): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/es/components/accordion-item/daikin-accordion-item.js

@@ -1,6 +1,6 @@
 import { cva } from "class-variance-authority";
 import { css, unsafeCSS, LitElement, html } from "lit";
-import { property, state, customElement } from "lit/decorators.js";
+import { property, query, state, customElement } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
@@ -13,55 +13,38 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const cvaDetails = cva(
-  ["flex", "w-full", "h-max", "bg-white", "font-daikinSerif", "overflow-clip"],
-  {
-    variants: {
-      status: {
-        enabled: [],
-        disabled: ["text-[#DCDCDC]"]
-      }
-    }
-  }
-);
 const cvaSummary = cva(
   [
     "flex",
+    "justify-between",
     "items-center",
+    "gap-2",
     "w-full",
-    "h-12",
-    "px-5",
-    "outline-none",
-    "relative",
-    "after:block",
-    "after:w-5",
-    "after:h-5",
-    "after:m-auto",
-    "after:top-0",
-    "after:right-4",
-    "after:bottom-0",
-    "after:absolute",
-    "after:i-daikin-accordion-chevron-up",
-    "after:transition-all"
+    "min-h-12",
+    "py-3",
+    "pr-3",
+    "pl-4",
+    "focus-visible:outline",
+    "focus-visible:outline-2",
+    "focus-visible:-outline-offset-2",
+    "focus-visible:outline-daikinBlue-700",
+    "after:size-6",
+    "after:transition-all",
+    "after:i-daikin-chevron-down"
   ],
   {
     variants: {
-      visible: {
-        open: ["after:rotate-0"],
-        close: ["after:-rotate-180"]
+      open: {
+        false: ["after:rotate-0"],
+        true: ["after:rotate-180"]
       },
-      status: {
-        enabled: [
-          "hover:bg-[#DCDCDC]",
-          "hover:bg-[#DCDCDC]",
-          "hover:cursor-pointer",
-          "focus-visible:outline",
-          "focus-visible:outline-[2px]",
-          "focus-visible:outline-[#0097E0]",
-          "focus-visible:outline-offset-[-2px]",
-          "after:text-[#828282]"
+      disabled: {
+        false: [
+          "hover:bg-daikinNeutral-100",
+          "cursor-pointer",
+          "active:bg-daikinNeutral-200"
         ],
-        disabled: ["text-[#DCDCDC]", "after:text-[#DCDCDC]"]
+        true: ["text-daikinNeutral-200", "after:text-daikinNeutral-200"]
       }
     }
   }
@@ -80,7 +63,6 @@ let DaikinAccordionItem = class extends LitElement {
   constructor() {
     super(...arguments);
     this._contentRef = createRef();
-    this.title = "";
     this.open = false;
     this.disabled = false;
     this._detailsOpen = false;
@@ -106,36 +88,69 @@ let DaikinAccordionItem = class extends LitElement {
       };
     }
   }
-  _handleSummaryClick(e) {
-    e.preventDefault();
+  _handleSummaryClick(event) {
+    event.preventDefault();
     if (this.disabled) {
       return;
     }
     this.open = !this.open;
   }
+  _handleKeyDown(event) {
+    const direction = {
+      ArrowDown: "down",
+      ArrowUp: "up"
+    }[event.key];
+    if (!direction) {
+      return;
+    }
+    event.preventDefault();
+    this.dispatchEvent(
+      new CustomEvent("accordion-move-focus", {
+        detail: {
+          direction
+        },
+        bubbles: true
+      })
+    );
+  }
+  // When using the in-page search, the `<details>` element may open without clicking on the `<summary>`.
+  // In order to handle such cases, it is necessary to respond to the "toggle" event.
+  _handleToggle(event) {
+    event.preventDefault();
+    if (this.disabled) {
+      return;
+    }
+    this.open = event.newState === "open";
+  }
   render() {
-    const accordionDetailsClassName = cvaDetails({
-      status: this.disabled ? "disabled" : "enabled"
-    });
-    const accordionSummaryClassName = cvaSummary({
-      status: this.disabled ? "disabled" : "enabled",
-      visible: this.open ? "open" : "close"
-    });
+    const detailsOpen = !this.disabled && this._detailsOpen;
+    const open = !this.disabled && this.open;
     return html`<details
-      class=${accordionDetailsClassName}
-      ?open=${this._detailsOpen}
-      ?data-open=${this.open}
+      class="flex w-full bg-white font-daikinSerif overflow-clip"
+      ?open=${detailsOpen}
+      ?data-open=${open}
       aria-disabled=${this.disabled}
+      @toggle=${this._handleToggle}
     >
       <summary
-        class=${accordionSummaryClassName}
+        id="summary"
+        class=${cvaSummary({
+      open,
+      disabled: this.disabled
+    })}
         tabindex=${this.disabled ? -1 : 0}
         @click=${this._handleSummaryClick}
+        @keydown=${this._handleKeyDown}
       >
-        ${this.title}
+        <slot name="summary"></slot>
       </summary>
-      <div ${ref(this._contentRef)}>
-        <div class="pt-2 pb-6 px-5 text-sm">
+      <div
+        ${ref(this._contentRef)}
+        role="region"
+        aria-labelledby="summary"
+        ?hidden=${this.disabled}
+      >
+        <div class="pt-2 pr-3 pb-3 pl-4">
           <slot></slot>
         </div>
       </div>
@@ -149,24 +164,55 @@ let DaikinAccordionItem = class extends LitElement {
       this._contentAnimate();
     }
   }
+  /**
+   * Focuses on the inner summary.
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    (_a = this._summary) == null ? void 0 : _a.focus(options);
+  }
 };
 DaikinAccordionItem.styles = css`
     ${unsafeCSS(tailwindStyles)}
 
     :host {
+      --divider-top-display: none;
+      --divider-bottom-display: none;
+
       display: block;
+      position: relative;
+    }
+
+    :host::before {
+      content: "";
+      display: var(--divider-top-display, none);
       width: 100%;
+      height: 1px;
+      background: #828282;
+      position: absolute;
+      top: 0;
+    }
+
+    :host::after {
+      content: "";
+      display: var(--divider-bottom-display, none);
+      width: 100%;
+      height: 1px;
+      background: #828282;
+      position: absolute;
+      bottom: 0;
     }
   `;
-__decorateClass([
-  property({ type: String })
-], DaikinAccordionItem.prototype, "title", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinAccordionItem.prototype, "open", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinAccordionItem.prototype, "disabled", 2);
+__decorateClass([
+  query("summary")
+], DaikinAccordionItem.prototype, "_summary", 2);
 __decorateClass([
   state()
 ], DaikinAccordionItem.prototype, "_detailsOpen", 2);

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

@@ -0,0 +1,56 @@
+import { LitElement, PropertyValues } from 'lit';
+/**
+ * `daikin-breadcrumb` is a component for representing a breadcrumb list, and is used together with the `daikin-breadcrumb-item` component.
+ *
+ * Hierarchy:
+ * - `daikin-breadcrumb` > `daikin-breadcrumb-item`
+ *
+ * @slot - A slot for breadcrumb items. Place `breadcrumb-item` elements here.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/breadcrumb/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-breadcrumb>
+ *  <daikin-breadcrumb-item href="#">
+ *   Breadcrumb Item 1
+ *  </daikin-breadcrumb-item>
+ *  <daikin-breadcrumb-item href="#">
+ *   Breadcrumb Item 2
+ *  </daikin-breadcrumb-item>
+ * </daikin-breadcrumb>
+ * ```
+ */
+export declare class DaikinBreadcrumb extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    private resizeObserver;
+    private _slottedDaikinBreadCrumbItems;
+    private _divWrapRef;
+    /**
+     * Whether the last breadcrumb item should have trailing slash.
+     */
+    trailingSlash: boolean;
+    /**
+     * Specifies overflow.
+     * If `ellipsis`, some breadcrumb items will be omitted when the total width exceeds the container width.
+     */
+    overflow: "visible" | "ellipsis";
+    private _expandedContentWidth;
+    private omitted;
+    get _isEllipsis(): boolean;
+    private _omit;
+    private _updateBreadcrumbs;
+    private _handleChange;
+    private _handleResizeObserver;
+    render(): import('lit-html').TemplateResult<1>;
+    updated(changedProperties: PropertyValues<this>): void;
+    firstUpdated(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-breadcrumb": DaikinBreadcrumb;
+    }
+}

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

@@ -0,0 +1,122 @@
+import { css, unsafeCSS, LitElement, html } from "lit";
+import { queryAssignedElements, property, customElement } from "lit/decorators.js";
+import { createRef, ref } from "lit/directives/ref.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 DaikinBreadcrumb = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.resizeObserver = new ResizeObserver(() => {
+      this._omit();
+    });
+    this._divWrapRef = createRef();
+    this.trailingSlash = false;
+    this.overflow = "visible";
+    this._expandedContentWidth = 0;
+    this.omitted = false;
+  }
+  get _isEllipsis() {
+    return this.overflow === "ellipsis";
+  }
+  _omit() {
+    const shouldOmit = this._isEllipsis && this.offsetWidth < this._expandedContentWidth;
+    if (this.omitted === shouldOmit) {
+      return;
+    }
+    this.omitted = shouldOmit;
+    const daikinBreadCrumbItems = this._slottedDaikinBreadCrumbItems;
+    for (const [index, item] of daikinBreadCrumbItems.entries()) {
+      let mode = "normal";
+      if (shouldOmit) {
+        if (index === 0 || index >= daikinBreadCrumbItems.length - 2) {
+          continue;
+        } else if (index === 1) {
+          mode = "ellipsis";
+        } else {
+          mode = "hidden";
+        }
+      }
+      item.hidden = mode === "hidden";
+      item.variant = mode === "ellipsis" ? "ellipsis" : "normal";
+    }
+  }
+  _updateBreadcrumbs() {
+    const daikinBreadCrumbItems = this._slottedDaikinBreadCrumbItems;
+    for (const [index, item] of daikinBreadCrumbItems.entries()) {
+      const isLast = index === daikinBreadCrumbItems.length - 1;
+      item.trailingSlash = !isLast || this.trailingSlash;
+      item.last = isLast;
+    }
+  }
+  _handleChange() {
+    this._updateBreadcrumbs();
+  }
+  _handleResizeObserver() {
+    if (this._isEllipsis) {
+      this.resizeObserver.observe(this);
+    } else {
+      this.resizeObserver.disconnect();
+    }
+  }
+  render() {
+    return html`
+      <div class="flex gap-2" ${ref(this._divWrapRef)}>
+        <slot @slotchange=${this._handleChange}></slot>
+      </div>
+    `;
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("trailingSlash")) {
+      this._updateBreadcrumbs();
+    }
+    if (changedProperties.has("overflow")) {
+      this._omit();
+      this._handleResizeObserver();
+    }
+  }
+  firstUpdated() {
+    this._updateBreadcrumbs();
+    this._omit();
+    this._handleResizeObserver();
+    this.updateComplete.then(() => {
+      const divElement = this._divWrapRef.value;
+      if (!divElement) {
+        return;
+      }
+      this._expandedContentWidth = divElement.offsetWidth;
+    }).catch(() => {
+    });
+  }
+};
+DaikinBreadcrumb.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: flex;
+      align-items: center;
+    }
+  `;
+__decorateClass([
+  queryAssignedElements()
+], DaikinBreadcrumb.prototype, "_slottedDaikinBreadCrumbItems", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "trailing-slash" })
+], DaikinBreadcrumb.prototype, "trailingSlash", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DaikinBreadcrumb.prototype, "overflow", 2);
+DaikinBreadcrumb = __decorateClass([
+  customElement("daikin-breadcrumb")
+], DaikinBreadcrumb);
+export {
+  DaikinBreadcrumb
+};

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

@@ -0,0 +1 @@
+export * from './daikin-breadcrumb';

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

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

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

@@ -0,0 +1,72 @@
+import { LitElement } from 'lit';
+import { MergeVariantProps } from '../../type-utils';
+declare const cvaLink: (props?: ({
+    variant?: "normal" | "ellipsis" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type LinkVariantProps = MergeVariantProps<typeof cvaLink>;
+/**
+ * The `daikin-breadcrumb-item` is a component used to represent each item of the breadcrumb list, and is used as a child element of the `daikin-breadcrumb` component.
+ *
+ * Hierarchy:
+ * - `daikin-breadcrumb` > `daikin-breadcrumb-item`
+ *
+ * @slot - A slot for the breadcrumb item content.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/breadcrumb-item/index.js";
+ * ```
+ *
+ * ```html
+ * <!-- See `daikin-breadcrumb` component for complete example. -->
+ * <daikin-breadcrumb-item href="#">
+ *   Breadcrumb Item 1
+ * </daikin-breadcrumb-item>
+ * ```
+ */
+export declare class DaikinBreadcrumbItem extends LitElement {
+    static styles: import('lit').CSSResult;
+    /**
+     * Specify link href
+     */
+    href: string;
+    /**
+     * Specifies the display content.
+     * If `ellipsis`, the "..." will be displayed instead of the link.
+     * Set automatically by `daikin-breadcrumb`.
+     */
+    variant: LinkVariantProps["variant"];
+    /**
+     * Specify whether the link should be disabled
+     */
+    disabled: boolean;
+    /**
+     * Specify the link target
+     */
+    target: string | null;
+    /**
+     * Whether the slash after the link should shown.
+     * Set automatically by `daikin-breadcrumb`.
+     */
+    trailingSlash: boolean;
+    /**
+     * Whether the item is the last one.
+     * When set to `true`, the item will also be considered to be the current page and the link will be disabled.
+     * Automatically set by `daikin-breadcrumb` component.
+     */
+    last: boolean;
+    /**
+     * Whether the link should be hidden when ellipsis mode.
+     * Set automatically by `daikin-breadcrumb`.
+     */
+    hidden: boolean;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-breadcrumb-item": DaikinBreadcrumbItem;
+    }
+}
+export {};