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

package/CHANGELOG.md

@@ -1,5 +1,100 @@
 # @daikin-oss/design-system-web-components
 
+## 0.7.0
+
+### Minor Changes
+
+- [#100](https://github.com/dsv-rp/DDS/pull/100) [`b26b122`](https://github.com/dsv-rp/DDS/commit/b26b122562a2dc6400d91026fd9e04e6d4b5f324) Thanks [@poetrainy](https://github.com/poetrainy)! - Progress Indicator: Updated appearance. (DDS-1302)
+
+- [#104](https://github.com/dsv-rp/DDS/pull/104) [`c01e66d`](https://github.com/dsv-rp/DDS/commit/c01e66d51936cb04d46e5daf7ca6239ca85826ba) Thanks [@poetrainy](https://github.com/poetrainy)! - **BREAKING CHANGE** Breadcrumb: The `trailing-slash` and `overflow` attributes have been removed. (DDS-1642)
+  **BREAKING CHANGE** Breadcrumb Item: The `trailing-slash` attribute has been removed. (DDS-1642)
+  **BREAKING CHANGE** Breadcrumb Item: The `ellipsis` value of the `variant` attribute has been removed. In addition, the `current` value has been added. (DDS-1642)
+  Breadcrumb: The `show-visited` attribute has been added. (DDS-1642)
+  Breadcrumb: Updated appearance. (DDS-1642)
+  Breadcrumb Item: The `show-visited` attribute has been added. (DDS-1642)
+  Breadcrumb Item: Updated appearance. (DDS-1642)
+
+- [#105](https://github.com/dsv-rp/DDS/pull/105) [`63cf888`](https://github.com/dsv-rp/DDS/commit/63cf8884649d46837e4012b9d85913dd7bf0cd5f) Thanks [@yodas7](https://github.com/yodas7)! - **BREAKING CHANGE** The `@daikin-oss/design-system-web-components` package now requires `@daikin-oss/dds-tokens` package as a peer dependency.
+  **BREAKING CHANGE** The `colors.js` file, which exported colors, has been removed. Please use `@daikin-oss/dds-tokens` instead.
+  **BREAKING CHANGE** Icon, Tooltip: Changed the prefix for CSS custom properties to `--ddc-` from `--dds-` to avoid conflicts.
+
+- [#73](https://github.com/dsv-rp/DDS/pull/73) [`18a71f6`](https://github.com/dsv-rp/DDS/commit/18a71f6a86fd4bc1cf04172b0e646a657048cd42) Thanks [@poetrainy](https://github.com/poetrainy)! - Tree: Initial Implementation.
+
+- [#99](https://github.com/dsv-rp/DDS/pull/99) [`0efff7a`](https://github.com/dsv-rp/DDS/commit/0efff7a021f73388d22f50df96be833a4b446ae7) Thanks [@poetrainy](https://github.com/poetrainy)! - Input Group: Updated appearance.
+  Progress bar: Updated appearance.
+
+- [#107](https://github.com/dsv-rp/DDS/pull/107) [`2af6462`](https://github.com/dsv-rp/DDS/commit/2af646292808a87f5095f7d97e7647dde3ac2260) Thanks [@yodas7](https://github.com/yodas7)! - Accordion: Replaced colors with design tokens (brings dark mode support).
+  Breadcrumb: Replaced colors with design tokens (brings dark mode support).
+  Button: Replaced colors with design tokens (brings dark mode support).
+  Checkbox: Replaced colors with design tokens (brings dark mode support).
+  Dropdown: Replaced colors with design tokens (brings dark mode support).
+  Icon: Replaced colors with design tokens (brings dark mode support).
+  Icon Button: Replaced colors with design tokens (brings dark mode support).
+  Input Group: Replaced colors with design tokens (brings dark mode support).
+  Link: Replaced colors with design tokens (brings dark mode support).
+  List: Replaced colors with design tokens (brings dark mode support).
+  Notification: Replaced colors with design tokens (brings dark mode support).
+  Pagination: Replaced colors with design tokens (brings dark mode support).
+  Progress Bar: Replaced colors with design tokens (brings dark mode support).
+  Progress Indicator: Replaced colors with design tokens (brings dark mode support).
+  Radio Button: Replaced colors with design tokens (brings dark mode support).
+  Select: Replaced colors with design tokens (brings dark mode support).
+  Tab: Replaced colors with design tokens (brings dark mode support).
+  Table: Replaced colors with design tokens (brings dark mode support).
+  Text Area: Replaced colors with design tokens (brings dark mode support).
+  Text Field: Replaced colors with design tokens (brings dark mode support).
+  Toggle: Replaced colors with design tokens (brings dark mode support).
+  Tree: Replaced colors with design tokens (brings dark mode support).
+
+### Patch Changes
+
+- [#111](https://github.com/dsv-rp/DDS/pull/111) [`598656f`](https://github.com/dsv-rp/DDS/commit/598656fc3851ac15461ffff9ca228fa9ad904deb) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Card: Initial Implementation. (DDS-1209)
+
+- [#110](https://github.com/dsv-rp/DDS/pull/110) [`5d5db6b`](https://github.com/dsv-rp/DDS/commit/5d5db6b2990aae84511f5c4e721d101dc7887153) Thanks [@poetrainy](https://github.com/poetrainy)! - Icon Button: Fixed the issue where the size could not be changed. (DDS-1650)
+
+- [#101](https://github.com/dsv-rp/DDS/pull/101) [`5150ef1`](https://github.com/dsv-rp/DDS/commit/5150ef1db56729b0adabbc3b246303241af7eed6) Thanks [@poetrainy](https://github.com/poetrainy)! - Text Area: Updated appearance. (DDS-1290)
+
+- [#103](https://github.com/dsv-rp/DDS/pull/103) [`12fcb40`](https://github.com/dsv-rp/DDS/commit/12fcb406567c1a436f3ac39887096e91d63130da) Thanks [@poetrainy](https://github.com/poetrainy)! - Link: Fixed underline not shown correctly with line breaks.
+
+- [#112](https://github.com/dsv-rp/DDS/pull/112) [`ffdda1e`](https://github.com/dsv-rp/DDS/commit/ffdda1eabd3e3e19dd9fe0929c390c9b56ae3340) Thanks [@poetrainy](https://github.com/poetrainy)! - Button: Updated appearance.
+
+## 0.6.0
+
+### Minor Changes
+
+- [#89](https://github.com/dsv-rp/DDS/pull/89) [`c9bd3a7`](https://github.com/dsv-rp/DDS/commit/c9bd3a77932d1f4c3f2547f35daa7b026eff7a08) Thanks [@poetrainy](https://github.com/poetrainy)! - Dropdown: Update appearance.
+  Select: Update appearance.
+  Text Area: Update appearance.
+  Text Input: Update appearance.
+
+- [#53](https://github.com/dsv-rp/DDS/pull/53) [`651bc76`](https://github.com/dsv-rp/DDS/commit/651bc767f92be4a5b48b4c8c48b3378ef0e13855) Thanks [@yodas7](https://github.com/yodas7)! - **BREAKING CHANGE** Some attributes and properties have been renamed or removed.
+
+  The following attributes (not properties) have been renamed to kebab case:
+
+  - `<daikin-notification>`: ~~`closeButton`~~ -> `close-button`
+
+- [#91](https://github.com/dsv-rp/DDS/pull/91) [`a188387`](https://github.com/dsv-rp/DDS/commit/a188387a0da9a452be1ebad4898a54c205d73b8e) Thanks [@poetrainy](https://github.com/poetrainy)! - **BREAKING CHANGE** Dropdown: The `label` attribute has been removed.
+
+### Patch Changes
+
+- [#95](https://github.com/dsv-rp/DDS/pull/95) [`0d78d58`](https://github.com/dsv-rp/DDS/commit/0d78d585963b229c68971d7558b63c2c7d073db9) Thanks [@poetrainy](https://github.com/poetrainy)! - Tooltip: Fixed an issue where the tooltip would remain opened after clicking on the trigger element. (DDS-1631)
+
+- [#88](https://github.com/dsv-rp/DDS/pull/88) [`90e1625`](https://github.com/dsv-rp/DDS/commit/90e1625f6455b60670920e397a51370eba70ace8) Thanks [@poetrainy](https://github.com/poetrainy)! - **BREAKING CHANGE** Icon: The `size` attribute now defaults to `current`.
+  Icon Button: Add Icon Button Component. (DDS-1536)
+  Icon: The `size` attribute now accepts `current`, which references `--dds-icon-size` CSS variable.
+
+- [#96](https://github.com/dsv-rp/DDS/pull/96) [`bdd827f`](https://github.com/dsv-rp/DDS/commit/bdd827fe1bc400de68f11a63bb6312d368cdadd9) Thanks [@poetrainy](https://github.com/poetrainy)! - Accordion: Update appearance.
+
+- [#49](https://github.com/dsv-rp/DDS/pull/49) [`c1f44f8`](https://github.com/dsv-rp/DDS/commit/c1f44f825e0de8422be87a3efdae2e1e84d5d4da) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Add pagination component
+
+- [#79](https://github.com/dsv-rp/DDS/pull/79) [`2e351b8`](https://github.com/dsv-rp/DDS/commit/2e351b8137f5d0aac1c5feb9520d25e35e81f138) Thanks [@yodas7](https://github.com/yodas7)! - Correct package type definitions. (DDS-1529)
+
+- [#93](https://github.com/dsv-rp/DDS/pull/93) [`39a5a8f`](https://github.com/dsv-rp/DDS/commit/39a5a8f27079610bf62094486888b9c7c0af3416) Thanks [@poetrainy](https://github.com/poetrainy)! - Link: Initial Implementation. (DDS-1600)
+
+- [#85](https://github.com/dsv-rp/DDS/pull/85) [`82b4fa9`](https://github.com/dsv-rp/DDS/commit/82b4fa95c1c9c60640ca3ce3d336ed00485908e4) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Modified the descriptions of some properties.
+
+- [#44](https://github.com/dsv-rp/DDS/pull/44) [`d51e2ee`](https://github.com/dsv-rp/DDS/commit/d51e2eed13d3772542fb8141bb524489e2570602) Thanks [@poetrainy](https://github.com/poetrainy)! - Add Table Component.
+
 ## 0.5.0
 
 ### Minor Changes

package/README.md

@@ -9,7 +9,14 @@ This project is an implementation of the Daikin Design Kit using Web Components.
 Start by installing the package:
 
 ```sh
-npm install @daikin-oss/design-system-web-components
+npm install @daikin-oss/design-system-web-components @daikin-oss/dds-tokens
+```
+
+To deploy the necessary CSS variables, import the CSS or SCSS from the `@daikin-oss/dds-tokens` package:
+For details, please check the [dds-tokens repository](https://github.com/dsv-rp/dds-tokens?tab=readme-ov-file#readme).
+
+```js
+import "@daikin-oss/dds-tokens/css/daikin/Light/variables.css";
 ```
 
 You can then import necessary components in your bundle (the .js extension is optional):
@@ -18,8 +25,6 @@ You can then import necessary components in your bundle (the .js extension is op
 import "@daikin-oss/design-system-web-components/components/button/index.js";
 ```
 
-By default, out-of-the-box, the styles are for Daikin brand in light mode.
-
 ### Fonts
 
 We use Roboto as the font for our UI components.
@@ -77,7 +82,7 @@ Reference the CSS in HTML:
 ```html
 <link
   rel="stylesheet"
-  href="node_modules/@daikin-oss/dds-tokens/build/css/DKN/Dark/buttons.css"
+  href="node_modules/@daikin-oss/dds-tokens/build/css/DKN/Dark/variables.css"
   media="(prefers-color-scheme: dark)"
 />
 ```
@@ -85,7 +90,7 @@ Reference the CSS in HTML:
 Using CSS `@import` with `prefers-color-scheme`:
 
 ```css
-@import "@daikin-oss/dds-tokens/css/daikin/Dark/buttons.css"
+@import "@daikin-oss/dds-tokens/css/daikin/Dark/variables.css"
   (prefers-color-scheme: dark);
 ```
 
@@ -96,12 +101,12 @@ Reference the CSS in HTML:
 ```html
 <link
   rel="stylesheet"
-  href="node_modules/@daikin-oss/dds-tokens/build/css/AAF/Dark/buttons.css"
+  href="node_modules/@daikin-oss/dds-tokens/build/css/AAF/Dark/variables.css"
   media="(prefers-color-scheme: light)"
 />
 <link
   rel="stylesheet"
-  href="node_modules/@daikin-oss/dds-tokens/build/css/AAF/Dark/buttons.css"
+  href="node_modules/@daikin-oss/dds-tokens/build/css/AAF/Dark/variables.css"
   media="(prefers-color-scheme: dark)"
 />
 ```
@@ -109,9 +114,9 @@ Reference the CSS in HTML:
 Using CSS `@import` with `prefers-color-scheme`:
 
 ```css
-@import "@daikin-oss/dds-tokens/css/aaf/Light/buttons.css"
+@import "@daikin-oss/dds-tokens/css/aaf/Light/variables.css"
   (prefers-color-scheme: light);
-@import "@daikin-oss/dds-tokens/css/aaf/Dark/buttons.css"
+@import "@daikin-oss/dds-tokens/css/aaf/Dark/variables.css"
   (prefers-color-scheme: dark);
 ```
 
@@ -219,27 +224,39 @@ If you encounter an `Unknown word` error, add the word to the `cspell-dictionary
 
 ### Design Tokens
 
-_We are looking for a more efficient way to import tokens._
+We manage and use design tokens to ensure consistency in our design system.
 
-1. **Source of Truth**: The `tokens` we use is the foundation of our design styles and was grabbed from https://github.com/dsv-rp/dds-tokens/tree/main.
+1. **Source of Truth**:
+   The tokens we use is the foundation of our design styles and was grabbed from https://github.com/dsv-rp/dds-tokens.
+   These design tokens are deployed as CSS variables.
 
-2. **Using in Components**: For the most part, we use the js variables to apply as the default style:
+2. **Usage in Components**:
+   The components make use of design tokens by referencing CSS variables.
+   Since they are integrated with Tailwind CSS, they are mostly used as utility classes, but in some cases they are directly referenced using `var()`.
 
-```javascript
-import {
-  buttonColorBackgroundPrimaryActive
-} from '@daikin-oss/dds-tokens/js/daikin/Light/variables.js';
+```ts
+@customElement("daikin-link")
+export class DaikinLink extends LitElement {
+  static override readonly styles = css`
+    ${unsafeCSS(tailwindStyles)}
 
-class DaikinButton extends LitElement implements DaikinButtonProps {
-  static styles = css`
-    :host {
-      --defaultButtonColorBackgroundPrimaryActive: ${unsafeCSS(
-        buttonColorBackgroundPrimaryActive
-      )};
+    :host([show-visited]:not([disabled])) a:visited {
+      /* HERE */
+      color: var(--dds-color-link-text-visited-default);
     }
   `;
 
-  /* ...rest of the code */
+  override render() {
+    /* AND HERE (`text-ddt-*` classes) */
+    return html`
+      <a
+        class="text-ddt-color-link-text-default hover:text-ddt-color-link-text-hover"
+        href="https://www.example.com/"
+      >
+        ...
+      </a>
+    `;
+  }
 }
 ```
 

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

@@ -35,7 +35,7 @@ exports.DaikinAccordion.styles = lit.css`
     ${lit.unsafeCSS(tailwind.default)}
 
     :host {
-      min-width: 160px;
+      min-width: 10rem;
     }
 
     ::slotted(daikin-accordion-item) {

package/dist/cjs/components/accordion/index.d.cts

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

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

@@ -27,7 +27,7 @@ const cvaSummary = classVarianceAuthority.cva(
     "focus-visible:outline",
     "focus-visible:outline-2",
     "focus-visible:-outline-offset-2",
-    "focus-visible:outline-system-state-focus",
+    "focus-visible:outline-ddt-color-common-border-focus",
     "after:size-6",
     "after:transition-all",
     "after:i-daikin-chevron-down"
@@ -41,12 +41,12 @@ const cvaSummary = classVarianceAuthority.cva(
       disabled: {
         false: [
           "cursor-pointer",
-          "hover:bg-system-background-surface-hover",
-          "active:bg-system-background-surface-press"
+          "hover:bg-ddt-color-common-surface-hover",
+          "active:bg-ddt-color-common-surface-press"
         ],
         true: [
-          "text-system-state-disabled",
-          "after:text-system-state-disabled"
+          "text-ddt-color-common-disabled",
+          "after:text-ddt-color-common-disabled"
         ]
       }
     }
@@ -129,7 +129,7 @@ exports.DaikinAccordionItem = class DaikinAccordionItem extends lit.LitElement {
     const detailsOpen = !this.disabled && this._detailsOpen;
     const open = !this.disabled && this.open;
     return lit.html`<details
-      class="flex w-full text-system-element-text-primary font-daikinSerif overflow-clip"
+      class="w-full text-ddt-color-common-text-primary font-daikinSerif overflow-clip"
       ?open=${detailsOpen}
       ?data-open=${open}
       aria-disabled=${this.disabled}
@@ -192,7 +192,7 @@ exports.DaikinAccordionItem.styles = lit.css`
       display: var(--divider-top-display, none);
       width: 100%;
       height: 1px;
-      background: #828282; /* system-element-divider-primary */
+      background: var(--dds-color-divider);
       position: absolute;
       top: 0;
     }
@@ -202,7 +202,7 @@ exports.DaikinAccordionItem.styles = lit.css`
       display: var(--divider-bottom-display, none);
       width: 100%;
       height: 1px;
-      background: #828282; /* system-element-divider-primary */
+      background: var(--dds-color-divider);
       position: absolute;
       bottom: 0;
     }

package/dist/cjs/components/accordion-item/{daikin-accordion-item.d.ts → daikin-accordion-item.d.cts}

@@ -60,7 +60,7 @@ export declare class DaikinAccordionItem extends LitElement {
      * Focuses on the inner summary.
      * @param options focus options
      */
-    focus(options?: FocusOptions | undefined): void;
+    focus(options?: FocusOptions): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/cjs/components/accordion-item/index.d.cts

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

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

@@ -2,7 +2,6 @@
 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;
@@ -17,105 +16,45 @@ var __decorateClass = (decorators, target, key, kind) => {
 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";
-    }
+    this.showVisited = false;
   }
   _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;
-    }
+    const items = this._items;
+    items.forEach((item, index) => {
+      const isLast = index === items.length - 1;
+      item.variant = isLast ? "current" : "normal";
+      item.showVisited = this.showVisited;
+      item.appendDivider = !isLast;
+    });
   }
-  _handleChange() {
+  _handleSlotChange() {
     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>
+    return lit.html`<nav class="inline-block" aria-label="Breadcrumbs">
+      <div class="inline-block" role="list">
+        <slot @slotchange=${this._handleSlotChange}></slot>
       </div>
-    `;
-  }
-  updated(changedProperties) {
-    if (changedProperties.has("trailingSlash")) {
-      this._updateBreadcrumbs();
-    }
-    if (changedProperties.has("overflow")) {
-      this._omit();
-      this._handleResizeObserver();
-    }
+    </nav>`;
   }
   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;
+      padding-top: 0.25rem;
+      padding-bottom: 0.25rem;
     }
   `;
 __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);
+  decorators_js.property({ type: Boolean, reflect: true, attribute: "show-visited" })
+], exports.DaikinBreadcrumb.prototype, "showVisited", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
-], exports.DaikinBreadcrumb.prototype, "overflow", 2);
+  decorators_js.queryAssignedElements({ selector: "daikin-breadcrumb-item" })
+], exports.DaikinBreadcrumb.prototype, "_items", 2);
 exports.DaikinBreadcrumb = __decorateClass([
   decorators_js.customElement("daikin-breadcrumb")
 ], exports.DaikinBreadcrumb);

package/dist/{cjs-dev/components/breadcrumb/daikin-breadcrumb.d.ts → cjs/components/breadcrumb/daikin-breadcrumb.d.cts}

@@ -1,4 +1,4 @@
-import { LitElement, PropertyValues } from 'lit';
+import { LitElement } from 'lit';
 /**
  * `daikin-breadcrumb` is a component for representing a breadcrumb list, and is used together with the `daikin-breadcrumb-item` component.
  *
@@ -11,43 +11,31 @@ import { LitElement, PropertyValues } from 'lit';
  *
  * ```js
  * import "@daikin-oss/design-system-web-components/components/breadcrumb/index.js";
+ * import "@daikin-oss/design-system-web-components/components/breadcrumb-item/index.js";
  * ```
  *
  * ```html
  * <daikin-breadcrumb>
- *  <daikin-breadcrumb-item href="#">
- *   Breadcrumb Item 1
+ *  <daikin-breadcrumb-item href="https://www.example.com/1">
+ *   Breadcrumb item 1
  *  </daikin-breadcrumb-item>
- *  <daikin-breadcrumb-item href="#">
- *   Breadcrumb Item 2
+ *  <daikin-breadcrumb-item href="https://www.example.com/2">
+ *   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.
+     * Whether or not to change the color of visited links.
      */
-    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;
+    showVisited: boolean;
+    private readonly _items;
     private _updateBreadcrumbs;
-    private _handleChange;
-    private _handleResizeObserver;
+    private _handleSlotChange;
     render(): import('lit-html').TemplateResult<1>;
-    updated(changedProperties: PropertyValues<this>): void;
-    firstUpdated(): void;
+    protected firstUpdated(): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/cjs/components/breadcrumb/index.d.cts

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

package/dist/cjs/components/breadcrumb-item/daikin-breadcrumb-item.cjs

@@ -1,10 +1,10 @@
 "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");
+require("../link/daikin-link.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -15,88 +15,38 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const cvaLink = classVarianceAuthority.cva(
-  [
-    "h-8",
-    "font-normal",
-    "not-italic",
-    "leading-8",
-    "text-sm",
-    "text-daikinBlue-500",
-    "outline-none",
-    "font-daikinSerif"
-  ],
-  {
-    variants: {
-      variant: {
-        normal: [
-          "hover:text-daikinBlue-300",
-          "active:text-daikinNeutral-800",
-          "focus-visible:text-daikinBlue-700"
-        ],
-        ellipsis: ["hover:text-daikinBlue-300"]
-      },
-      disabled: {
-        true: [
-          "!text-daikinNeutral-800",
-          "pointer-events-none",
-          "cursor-default",
-          "focus-visible:!text-daikinNeutral-800"
-        ],
-        false: []
-      }
-    }
-  }
-);
 exports.DaikinBreadcrumbItem = class DaikinBreadcrumbItem extends lit.LitElement {
   constructor() {
     super(...arguments);
-    this.href = "";
+    this.href = null;
     this.variant = "normal";
-    this.disabled = false;
     this.target = null;
-    this.trailingSlash = false;
-    this.last = false;
-    this.hidden = false;
+    this.showVisited = false;
+    this.appendDivider = false;
   }
   render() {
-    const slash = this.trailingSlash ? lit.html`<span
-          class="text-daikinNeutral-800 font-daikinSerif"
+    const link = this.variant === "normal" ? lit.html`<daikin-link
+            class="text-sm"
+            href=${ifDefined_js.ifDefined(this.href ?? void 0)}
+            ?show-visited=${this.showVisited}
+            ><slot></slot
+          ></daikin-link>` : lit.html`<a
+            class="text-sm font-daikinSerif text-ddt-color-common-text-primary"
+            aria-disabled="true"
+            aria-current="true"
+            role="link"
+            ><slot></slot
+          ></a>`;
+    const divider = this.appendDivider ? lit.html`<span
+          class="text-ddt-color-common-text-primary mx-2 text-sm"
           aria-hidden="true"
-        >
-          /
-        </span>` : null;
-    const isDisabled = this.last || this.disabled;
-    return lit.html`
-      ${this.variant === "normal" ? lit.html`<a
-            class=${cvaLink({ variant: this.variant, disabled: isDisabled })}
-            href=${ifDefined_js.ifDefined(!isDisabled && this.href || void 0)}
-            target=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
-    ifDefined_js.ifDefined(this.target)}
-            aria-disabled=${ifDefined_js.ifDefined(isDisabled || void 0)}
-            aria-current=${ifDefined_js.ifDefined(this.last || void 0)}
-          >
-            <slot></slot>
-          </a>` : lit.html`<span class=${cvaLink(this)} aria-label="…">
-            <span>. . .</span>
-          </span> `}
-      ${slash}
-    `;
+          >/</span
+        >` : lit.nothing;
+    return lit.html`<div class="inline" role="listitem">${link}${divider}</div>`;
   }
 };
 exports.DaikinBreadcrumbItem.styles = lit.css`
     ${lit.unsafeCSS(tailwind.default)}
-
-    :host {
-      display: inline-flex;
-      align-items: center;
-      gap: 8px;
-      flex-shrink: 0;
-    }
-
-    :host([hidden]) {
-      display: none;
-    }
   `;
 __decorateClass([
   decorators_js.property({ type: String, reflect: true })
@@ -104,21 +54,15 @@ __decorateClass([
 __decorateClass([
   decorators_js.property({ type: String, reflect: true })
 ], exports.DaikinBreadcrumbItem.prototype, "variant", 2);
-__decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
-], exports.DaikinBreadcrumbItem.prototype, "disabled", 2);
 __decorateClass([
   decorators_js.property({ type: String, reflect: true })
 ], exports.DaikinBreadcrumbItem.prototype, "target", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true, attribute: "trailing-slash" })
-], exports.DaikinBreadcrumbItem.prototype, "trailingSlash", 2);
-__decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
-], exports.DaikinBreadcrumbItem.prototype, "last", 2);
+  decorators_js.property({ type: Boolean, reflect: true, attribute: "show-visited" })
+], exports.DaikinBreadcrumbItem.prototype, "showVisited", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
-], exports.DaikinBreadcrumbItem.prototype, "hidden", 2);
+  decorators_js.property({ type: Boolean, reflect: true, attribute: "append-divider" })
+], exports.DaikinBreadcrumbItem.prototype, "appendDivider", 2);
 exports.DaikinBreadcrumbItem = __decorateClass([
   decorators_js.customElement("daikin-breadcrumb-item")
 ], exports.DaikinBreadcrumbItem);