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

package/CHANGELOG.md

@@ -1,5 +1,68 @@
 # @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

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

@@ -10,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

@@ -8,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>
  * ```
  */
@@ -21,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

@@ -54,12 +54,9 @@ exports.DaikinBreadcrumb = class DaikinBreadcrumb extends lit.LitElement {
   _updateBreadcrumbs() {
     const daikinBreadCrumbItems = this._slottedDaikinBreadCrumbItems;
     for (const [index, item] of daikinBreadCrumbItems.entries()) {
-      if (index === daikinBreadCrumbItems.length - 1) {
-        item.trailingSlash = this.trailingSlash;
-        item.disabled = true;
-        continue;
-      }
-      item.trailingSlash = true;
+      const isLast = index === daikinBreadCrumbItems.length - 1;
+      item.trailingSlash = !isLast || this.trailingSlash;
+      item.last = isLast;
     }
   }
   _handleChange() {

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

@@ -9,6 +9,10 @@ import { LitElement, PropertyValues } from 'lit';
  *
  * @example
  *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/breadcrumb/index.js";
+ * ```
+ *
  * ```html
  * <daikin-breadcrumb>
  *  <daikin-breadcrumb-item href="#">

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

@@ -15,33 +15,33 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const cvaLinkSlot = classVarianceAuthority.cva(
+const cvaLink = classVarianceAuthority.cva(
   [
-    "slotted:h-8",
-    "slotted:font-normal",
-    "slotted:not-italic",
-    "slotted:leading-8",
-    "slotted:text-sm",
-    "slotted:text-daikinBlue-500",
-    "slotted:outline-none",
-    "slotted:font-daikinSerif"
+    "h-8",
+    "font-normal",
+    "not-italic",
+    "leading-8",
+    "text-sm",
+    "text-daikinBlue-500",
+    "outline-none",
+    "font-daikinSerif"
   ],
   {
     variants: {
       variant: {
         normal: [
-          "slotted:hover:text-daikinBlue-300",
-          "slotted:active:text-daikinNeutral-800",
-          "slotted-[*:focus-visible]:text-daikinBlue-700"
+          "hover:text-daikinBlue-300",
+          "active:text-daikinNeutral-800",
+          "focus-visible:text-daikinBlue-700"
         ],
-        ellipsis: ["slotted:hover:text-daikinBlue-300"]
+        ellipsis: ["hover:text-daikinBlue-300"]
       },
       disabled: {
         true: [
-          "slotted:!text-daikinNeutral-800",
-          "slotted:pointer-events-none",
-          "slotted:cursor-default",
-          "slotted-[*:focus-visible]:!text-daikinNeutral-800"
+          "!text-daikinNeutral-800",
+          "pointer-events-none",
+          "cursor-default",
+          "focus-visible:!text-daikinNeutral-800"
         ],
         false: []
       }
@@ -56,25 +56,30 @@ exports.DaikinBreadcrumbItem = class DaikinBreadcrumbItem extends lit.LitElement
     this.disabled = false;
     this.target = null;
     this.trailingSlash = false;
+    this.last = false;
     this.hidden = false;
   }
   render() {
-    const slash = this.trailingSlash ? lit.html`<span class="text-daikinNeutral-800 font-daikinSerif">/</span>` : null;
+    const slash = this.trailingSlash ? lit.html`<span
+          class="text-daikinNeutral-800 font-daikinSerif"
+          aria-hidden="true"
+        >
+          /
+        </span>` : null;
+    const isDisabled = this.last || this.disabled;
     return lit.html`
-      ${this.variant === "normal" ? lit.html`<slot name="link" class=${cvaLinkSlot(this)}>
-            <a
-              href=${ifDefined_js.ifDefined(this.href)}
-              target=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
+      ${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)}
-            >
-              <slot></slot>
-            </a>
-          </slot>` : (
-      // Though `cvaLinkSlot` is designed for slots, it contains "& > *" selector for fallback content so it can be used here.
-      lit.html`<span class=${cvaLinkSlot(this)} aria-label="…">
+            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> `
-    )}
+          </span> `}
       ${slash}
     `;
   }
@@ -108,6 +113,9 @@ __decorateClass([
 __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);
 __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.DaikinBreadcrumbItem.prototype, "hidden", 2);

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

@@ -1,10 +1,10 @@
 import { LitElement } from 'lit';
 import { MergeVariantProps } from '../../type-utils';
-declare const cvaLinkSlot: (props?: ({
+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 cvaLinkSlot>;
+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.
  *
@@ -15,6 +15,10 @@ type LinkVariantProps = MergeVariantProps<typeof cvaLinkSlot>;
  *
  * @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="#">
@@ -47,6 +51,12 @@ export declare class DaikinBreadcrumbItem extends LitElement {
      * 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`.