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

package/CHANGELOG.md

@@ -0,0 +1,107 @@
+# @daikin-oss/design-system-web-components
+
+## 0.4.0
+
+### Minor Changes
+
+- [#72](https://github.com/dsv-rp/DDS/pull/72) [`70391aa`](https://github.com/dsv-rp/DDS/commit/70391aab75eaf72fcf2951b4cb2664d8afa4cbf4) Thanks [@poetrainy](https://github.com/poetrainy)! - Progress Bar: The `size` property has been added. (DDS-1385)
+  Progress Bar: Updated appearance. (DDS-1385)
+
+- [#60](https://github.com/dsv-rp/DDS/pull/60) [`b6d7d9f`](https://github.com/dsv-rp/DDS/commit/b6d7d9f4bb5286bb9a8dc719628624dcca3c0f75) Thanks [@poetrainy](https://github.com/poetrainy)! - **BREAKING CHANGE** Checkbox: The `readonly`, `size` and `error` property has been removed. (DDS-1288)
+  **BREAKING CHANGE** Checkbox: The `labelPosition` property now removed `"left"` value. (DDS-1288)
+  **BREAKING CHANGE** Checkbox: The `labelPosition` attribute (not property) has been renamed to `label-position`. (DDS-1288)
+  Checkbox: The `labelPosition` property now accepts `"hidden"` value. (DDS-1288)
+  Checkbox: Updated appearance. (DDS-1288)
+
+- [#75](https://github.com/dsv-rp/DDS/pull/75) [`3922068`](https://github.com/dsv-rp/DDS/commit/3922068e28efcd5786f576435f68c35983f252c2) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Improve breadcrumb accessibility. (DDS-1482)
+  **BREAKING CHANGE** Remove `link` slot from `daikin-breadcrumb-item`.
+
+- [#69](https://github.com/dsv-rp/DDS/pull/69) [`3fcbc38`](https://github.com/dsv-rp/DDS/commit/3fcbc38a1affb1f3d50dbfb4e1aeb1fd34f301a7) Thanks [@poetrainy](https://github.com/poetrainy)! - **BREAKING CHANGE** Accordion: The `title` attribute has been removed and replaced with a `summary` slot. (DDS-1414)
+  Accordion: Updated appearance. (DDS-1414)
+  Accordion Item: Updated appearance. (DDS-1414)
+
+- [#61](https://github.com/dsv-rp/DDS/pull/61) [`36ef955`](https://github.com/dsv-rp/DDS/commit/36ef9551a504de318a51a738b9b6b58edfb7f6f9) Thanks [@poetrainy](https://github.com/poetrainy)! - **BREAKING CHANGE** Radio: The `readonly`, `size` and `error` properties have been removed. (DDS-1350)
+  **BREAKING CHANGE** Radio: The `labelPosition` property no longer supports `"left"`. Instead, it now supports `"hidden"`. (DDS-1350)
+  **BREAKING CHANGE** Radio: The `labelPosition` attribute (not property) has been renamed to `label-position`.
+  Radio: Updated appearance. (DDS-1350)
+
+- [#56](https://github.com/dsv-rp/DDS/pull/56) [`a81916a`](https://github.com/dsv-rp/DDS/commit/a81916ac21c4fec5e85eb1e8bf9005137887a662) Thanks [@poetrainy](https://github.com/poetrainy)! - **BREAKING CHANGE** Button: The `role` attribute/property is renamed to `button-role` attribute and `buttonRole` property to avoid conflicts with standard HTML attributes.
+  **BREAKING CHANGE** Button: The `variant` attribute now accepts values of `"fill"`, `"outline"` and `"ghost"`, instead of `"primary"`, `"secondary"`, `"tertiary"` and `"primaryDanger"`.
+  **BREAKING CHANGE** Button: The `isLoading` attribute has been removed.
+  **BREAKING CHANGE** Button: The `leftIcon` and `rightIcon` attributes have been renamed to `left-icon` and `right-icon` respectively.
+  **BREAKING CHANGE** Button: The `type` attribute now accepts `"link"`, and whether the button becomes a link is now determined by the `type` attribute, not by the presence of the `href` attribute. If `href` is omitted with `type="link"`, it is treated as a disabled state.
+  Button: Added `color` attribute that accepts values of `"default"` and `"danger"`.
+  Button: Updated appearance. (DDS-1284)
+
+- [#50](https://github.com/dsv-rp/DDS/pull/50) [`4a34db7`](https://github.com/dsv-rp/DDS/commit/4a34db738bc08e347a790c0620bc602bbf1eac5b) Thanks [@poetrainy](https://github.com/poetrainy)! - **BREAKING CHANGE** Notification: The `title` and `description` attributes have been removed, and their contents are now specified using slots with the same names.
+
+- [#67](https://github.com/dsv-rp/DDS/pull/67) [`d377f50`](https://github.com/dsv-rp/DDS/commit/d377f5043f8d12c37a28772e44173b0e2a778003) Thanks [@poetrainy](https://github.com/poetrainy)! - **BREAKING CHANGE** Tabs: The name of the component has been changed from `Tab Group` to `Tabs`. Use `<daikin-tabs>` instead of `<daikin-tab-group>`. (DDS-1450)
+  **BREAKING CHANGE** Tabs: The signatures of the `beforechange` and `change` events have been updated to match those of other components. (DDS-1450)
+  **BREAKING CHANGE** Tab Panels: The name of the component has been changed from `Panel Switcher` to `Tab panels`. Use `<daikin-tab-panels>` instead of `<daikin-panel-switcher>`. (DDS-1450)
+  **BREAKING CHANGE** Tab: The `size` property has been removed. (DDS-1450)
+  Tab: Updated appearance. (DDS-1450)
+
+- [#63](https://github.com/dsv-rp/DDS/pull/63) [`535464e`](https://github.com/dsv-rp/DDS/commit/535464e625a3edb60e7e94ca867e16b390e3097e) Thanks [@poetrainy](https://github.com/poetrainy)! - **BREAKING CHANGE** Toggle: The `size` and `error` properties has been removed. (DDS-1374)
+  Toggle: Updated appearance. (DDS-1374)
+
+### Patch Changes
+
+- [#82](https://github.com/dsv-rp/DDS/pull/82) [`db7f9f3`](https://github.com/dsv-rp/DDS/commit/db7f9f331650d21d07d192d7032fd2689a849e3d) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Delete Stories area from component documentation page.
+
+- [#77](https://github.com/dsv-rp/DDS/pull/77) [`dce6fa9`](https://github.com/dsv-rp/DDS/commit/dce6fa9128c84d55baf64b3d0ad8f35c4d8ea69c) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Add component import guideline to documentation.
+
+- [#59](https://github.com/dsv-rp/DDS/pull/59) [`dcfaef3`](https://github.com/dsv-rp/DDS/commit/dcfaef3e5aabe47e61b3ed815d2c74fcb14afc68) Thanks [@yodas7](https://github.com/yodas7)! - Storybook: Improve the code displayed by "Show code".
+  Storybook: Added a common description of the event to the beginning of the Events section of the component documentation.
+
+- [#55](https://github.com/dsv-rp/DDS/pull/55) [`5d5c051`](https://github.com/dsv-rp/DDS/commit/5d5c0513febb1c38a500850806c9eef0c210a756) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Toggle: Fix `checked` property not updated on `change` event. (DDS-1317)
+  Tab Group: Fix `value` property not updated on `change` event. (DDS-1317)
+
+- [#45](https://github.com/dsv-rp/DDS/pull/45) [`42f6d1b`](https://github.com/dsv-rp/DDS/commit/42f6d1b27e4020db4e1c286f16d632aa305457d9) Thanks [@poetrainy](https://github.com/poetrainy)! - Text Input: Fixed an issue where the size of components could not be changed. (DDS-1279)
+  Textarea: Fixed an issue where the size of components could not be changed. (DDS-1279)
+
+- [#78](https://github.com/dsv-rp/DDS/pull/78) [`fbd2adb`](https://github.com/dsv-rp/DDS/commit/fbd2adbd671a9d928fb92eec7d548260e5bbaa87) Thanks [@poetrainy](https://github.com/poetrainy)! - Toggle: Assign the `switch` role. (DDS-1531)
+
+- [#70](https://github.com/dsv-rp/DDS/pull/70) [`144a2ad`](https://github.com/dsv-rp/DDS/commit/144a2adbe9043f345f88f42c80a0106fcb68f542) Thanks [@poetrainy](https://github.com/poetrainy)! - Add List Component.
+
+## 0.3.2
+
+### Patch Changes
+
+- [#24](https://github.com/dsv-rp/DDS/pull/24) [`b2971f4`](https://github.com/dsv-rp/DDS/commit/b2971f4f4fff45d7615157e00314ea26ccc747f9) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Add Breadcrumbs Component
+
+- [#42](https://github.com/dsv-rp/DDS/pull/42) [`7db6d0e`](https://github.com/dsv-rp/DDS/commit/7db6d0e0f2f823d9c0ff80e287060b92f32a89ff) Thanks [@yodas7](https://github.com/yodas7)! - Update dependencies.
+
+  - lit: ^3.1.4 -> ^3.2.0
+
+- [#34](https://github.com/dsv-rp/DDS/pull/34) [`dc2640a`](https://github.com/dsv-rp/DDS/commit/dc2640a012c9fb8ab74b969c4721c15a3f814e2c) Thanks [@poetrainy](https://github.com/poetrainy)! - Add Progress Bar Component.
+
+- [#40](https://github.com/dsv-rp/DDS/pull/40) [`d11ec1d`](https://github.com/dsv-rp/DDS/commit/d11ec1d49f9d8c7b9a32582954b9b3f96123c1ef) Thanks [@yodas7](https://github.com/yodas7)! - Include CHANGELOG.md in the package.
+
+- [#29](https://github.com/dsv-rp/DDS/pull/29) [`38a7063`](https://github.com/dsv-rp/DDS/commit/38a706337a4008b163b05fe4f4b90b838b4be4fc) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Add Tooltip Component.
+
+- [#52](https://github.com/dsv-rp/DDS/pull/52) [`d477bae`](https://github.com/dsv-rp/DDS/commit/d477baec057acf00c42038ebcbd7eeba5a13989e) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Add document to breadcrumb component.
+
+## 0.3.1
+
+### Patch Changes
+
+- [#38](https://github.com/dsv-rp/DDS/pull/38) [`8be9351`](https://github.com/dsv-rp/DDS/commit/8be93513040a738f36c0ade2d3a7bb2dc7b0d91f) Thanks [@yodas7](https://github.com/yodas7)! - Fix package not released successfully due to the lack of repository field.
+
+## 0.3.0
+
+### Minor Changes
+
+- [#7](https://github.com/dsv-rp/DDS/pull/7) Navigation Tab
+- [#18](https://github.com/dsv-rp/DDS/pull/18) Icon
+- [#20](https://github.com/dsv-rp/DDS/pull/20) Accordion
+- [#30](https://github.com/dsv-rp/DDS/pull/30) Toggle Switch
+- Add icon to button component
+- Add icon to notification component
+
+### Patch Changes
+
+- [#33](https://github.com/dsv-rp/DDS/pull/33) [`7dabcfc`](https://github.com/dsv-rp/DDS/commit/7dabcfc08dd3bf9f7dbcc368e0afc25b878f53d0) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Improve Storybook documents
+
+- [#31](https://github.com/dsv-rp/DDS/pull/31) [`f72fbbd`](https://github.com/dsv-rp/DDS/commit/f72fbbd4791a0aad32fe9359ff30bc506d14afff) Thanks [@yodas7](https://github.com/yodas7)! - Introduce Changesets.
+
+- [#35](https://github.com/dsv-rp/DDS/pull/35) Fix button text being wrapped

package/dist/cjs/components/accordion/daikin-accordion.cjs

@@ -14,9 +14,27 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 exports.DaikinAccordion = class DaikinAccordion extends lit.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 lit.html`<div class="w-full border-y-[1px] border-y-[#CECECE]">
-      <slot></slot>
+    return lit.html`<div class="w-full">
+      <slot @accordion-move-focus=${this._handleMoveFocus}></slot>
     </div>`;
   }
 };
@@ -24,14 +42,21 @@ exports.DaikinAccordion.styles = lit.css`
     ${lit.unsafeCSS(tailwind.default)}
 
     :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([
+  decorators_js.queryAssignedElements({ selector: "daikin-accordion-item" })
+], exports.DaikinAccordion.prototype, "_items", 2);
 exports.DaikinAccordion = __decorateClass([
   decorators_js.customElement("daikin-accordion")
 ], exports.DaikinAccordion);

package/dist/cjs/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/cjs/components/accordion-item/daikin-accordion-item.cjs

@@ -15,55 +15,38 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const cvaDetails = classVarianceAuthority.cva(
-  ["flex", "w-full", "h-max", "bg-white", "font-daikinSerif", "overflow-clip"],
-  {
-    variants: {
-      status: {
-        enabled: [],
-        disabled: ["text-[#DCDCDC]"]
-      }
-    }
-  }
-);
 const cvaSummary = classVarianceAuthority.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"]
       }
     }
   }
@@ -82,7 +65,6 @@ exports.DaikinAccordionItem = class DaikinAccordionItem extends lit.LitElement {
   constructor() {
     super(...arguments);
     this._contentRef = ref_js.createRef();
-    this.title = "";
     this.open = false;
     this.disabled = false;
     this._detailsOpen = false;
@@ -108,36 +90,69 @@ exports.DaikinAccordionItem = class DaikinAccordionItem extends lit.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 lit.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_js.ref(this._contentRef)}>
-        <div class="pt-2 pb-6 px-5 text-sm">
+      <div
+        ${ref_js.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>
@@ -151,24 +166,55 @@ exports.DaikinAccordionItem = class DaikinAccordionItem extends lit.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);
+  }
 };
 exports.DaikinAccordionItem.styles = lit.css`
     ${lit.unsafeCSS(tailwind.default)}
 
     :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([
-  decorators_js.property({ type: String })
-], exports.DaikinAccordionItem.prototype, "title", 2);
 __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.DaikinAccordionItem.prototype, "open", 2);
 __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.DaikinAccordionItem.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.query("summary")
+], exports.DaikinAccordionItem.prototype, "_summary", 2);
 __decorateClass([
   decorators_js.state()
 ], exports.DaikinAccordionItem.prototype, "_detailsOpen", 2);

package/dist/cjs/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/cjs/components/breadcrumb/daikin-breadcrumb.cjs

@@ -0,0 +1,121 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const ref_js = require("lit/directives/ref.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;
+};
+exports.DaikinBreadcrumb = class DaikinBreadcrumb extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.resizeObserver = new ResizeObserver(() => {
+      this._omit();
+    });
+    this._divWrapRef = ref_js.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 lit.html`
+      <div class="flex gap-2" ${ref_js.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(() => {
+    });
+  }
+};
+exports.DaikinBreadcrumb.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: flex;
+      align-items: center;
+    }
+  `;
+__decorateClass([
+  decorators_js.queryAssignedElements()
+], exports.DaikinBreadcrumb.prototype, "_slottedDaikinBreadCrumbItems", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true, attribute: "trailing-slash" })
+], exports.DaikinBreadcrumb.prototype, "trailingSlash", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinBreadcrumb.prototype, "overflow", 2);
+exports.DaikinBreadcrumb = __decorateClass([
+  decorators_js.customElement("daikin-breadcrumb")
+], exports.DaikinBreadcrumb);