@daikin-oss/design-system-web-components 1.0.0 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,132 @@
 # @daikin-oss/design-system-web-components
 
+## 1.2.0
+
+### Minor Changes
+
+- [#193](https://github.com/dsv-rp/DDS/pull/193) [`a726caa`](https://github.com/dsv-rp/DDS/commit/a726caa048f528aedda421ace0388683ebd3c804) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Header: Add Recipe. (DDS-2169)
+  Data Display: Add Recipe. (DDS-2284)
+
+- [#144](https://github.com/dsv-rp/DDS/pull/144) [`bde7786`](https://github.com/dsv-rp/DDS/commit/bde778694815e551bcca77c190d13b7b0488728e) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Checkbox Group: Initial Implementation. (DDS-1732)
+
+- [#161](https://github.com/dsv-rp/DDS/pull/161) [`c4f05f8`](https://github.com/dsv-rp/DDS/commit/c4f05f8c2b4feb1fee67bdd7449e3e5429e1d10a) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Menu: Initial Implementation. (DDS-1937)
+
+- [#180](https://github.com/dsv-rp/DDS/pull/180) [`2590eee`](https://github.com/dsv-rp/DDS/commit/2590eee5e2a51dd7a6d9342010c9ce91f101ed20) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Logo: Initial Implementation. (DDS-2122)
+
+- [#120](https://github.com/dsv-rp/DDS/pull/120) [`cd05582`](https://github.com/dsv-rp/DDS/commit/cd055823e21a54de02db36ba0a9cd0488b21c85f) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Slider: Initial Implementation. (DDS-1740)
+
+- [#194](https://github.com/dsv-rp/DDS/pull/194) [`3a0834a`](https://github.com/dsv-rp/DDS/commit/3a0834aade4661eb1b2df6a05a273a9c45c90568) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Button: Fixed an issue where the button did not function as a submit button.
+  Icon Button: Fixed an issue where the button did not function as a submit button.
+  Checkbox: Added `form` attribute. (DDS-2254)
+  Date Picker: Added `form` attribute. (DDS-2254)
+  Dropdown: Added `form` and `name` attributes. (DDS-2254)
+  Dropdown: Fixed an issue where the component is not acting as a form control. (DDS-2254)
+  Radio Group: Added `form` attribute. (DDS-2254)
+  Radio: Added `form` attribute. (DDS-2254)
+  Slider: Added `form` attribute. (DDS-2254)
+  Text Area: Added `form` attribute. (DDS-2254)
+  Text Field: Added `form` attribute. (DDS-2254)
+  Toggle: Added `form` attribute. (DDS-2254)
+
+- [#167](https://github.com/dsv-rp/DDS/pull/167) [`c9d2430`](https://github.com/dsv-rp/DDS/commit/c9d2430520890b3b2fdb9cefb7d552fd3d237d28) Thanks [@poetrainy](https://github.com/poetrainy)! - **BREAKING CHANGE** Inline Notification: The `description` slot has been replaced with the default slot. (DDS-1981)
+  Inline Notification: Updated appearance. (DDS-1981)
+  **BREAKING CHANGE** Toast Notification: The `description` slot has been replaced with the default slot. (DDS-1982)
+  Toast Notification: Updated appearance. (DDS-1982)
+
+- [#204](https://github.com/dsv-rp/DDS/pull/204) [`219547a`](https://github.com/dsv-rp/DDS/commit/219547afb633c0e05504307fa1638852e7b5ec52) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Button: Add large size variant. (DDS-2323)
+
+- [#202](https://github.com/dsv-rp/DDS/pull/202) [`415ddc5`](https://github.com/dsv-rp/DDS/commit/415ddc59a7cd3ca209f6a5c112fc0245bf2e17b6) Thanks [@yodas7](https://github.com/yodas7)! - Date Picker: Initial Implementation. (DDS-1703)
+  Calender: Initial Implementation. (DDS-1704)
+
+- [#157](https://github.com/dsv-rp/DDS/pull/157) [`79b510a`](https://github.com/dsv-rp/DDS/commit/79b510a396435731ba8b2bec6b2fbe1bbcc780d6) Thanks [@poetrainy](https://github.com/poetrainy)! - Text Field: The `type` attribute now accepts `password` and `search` . (DDS-1707, DDS-1709)
+  Text Field: The `type` attribute now accepts `search` . (DDS-1709)
+
+- [#219](https://github.com/dsv-rp/DDS/pull/219) [`36552b0`](https://github.com/dsv-rp/DDS/commit/36552b070cacda6e051ff233df78edfe817527a5) Thanks [@yodas7](https://github.com/yodas7)! - Release v1.2.0.
+
+  The following (stable) components have been added in this release.
+
+  - Slider
+  - Logo
+  - Menu
+  - Checkbox Group
+  - Date Picker
+  - Calendar
+  - Modal
+
+  The following components have been promoted from experimental to stable in this release.
+
+  - Loading
+  - Avatar
+  - Toast Notification
+
+  No new experimental components were added in this release.
+
+- [#182](https://github.com/dsv-rp/DDS/pull/182) [`08cea1b`](https://github.com/dsv-rp/DDS/commit/08cea1bc3a7250a8cbad44363aeb8bb7d2bc084a) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Modal: Initial Implementation. (DDS-1723)
+
+### Patch Changes
+
+- [#200](https://github.com/dsv-rp/DDS/pull/200) [`625ff76`](https://github.com/dsv-rp/DDS/commit/625ff763ee3a41bdf1d448575617b4faf18f0c16) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Loading: Update story appearance and comment about background property. (DDS-2099)
+  Password: Update story appearance and fixed an issue where an extra eye icon appeared in input fields on Edge browser. (DDS-2095)
+  Logo: Automatically select the appropriate logo variant based on the Storybook theme to prevent user confusion. (DDS-2150)
+  Menu: Removed unnecessary items from the story controls and adjusted the text change line strategy. (DDS-2113)
+
+- [#171](https://github.com/dsv-rp/DDS/pull/171) [`48dd161`](https://github.com/dsv-rp/DDS/commit/48dd16156a8776e6fc13fc825bf4bb98270a4488) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Dropdown: Fixed bugs open properties not work in storybook doc. (DDS-1983)
+  Dropdown: Update story appearance.
+  Dropdown: Update appearance when content overflow. (DDS-1983)
+
+- [#182](https://github.com/dsv-rp/DDS/pull/182) [`08cea1b`](https://github.com/dsv-rp/DDS/commit/08cea1bc3a7250a8cbad44363aeb8bb7d2bc084a) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Card: Change padding from 16px to 12px.
+
+- [#212](https://github.com/dsv-rp/DDS/pull/212) [`b299a93`](https://github.com/dsv-rp/DDS/commit/b299a931eebafdddc36e5c3641fcef2c5fa368d1) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Tooltip: fix an issue that tooltip not work in touch device. (DDS-2303)
+
+- [#190](https://github.com/dsv-rp/DDS/pull/190) [`9d1e55b`](https://github.com/dsv-rp/DDS/commit/9d1e55bda7a4032702332b2f894b26fb354a1751) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Icon: Some icons have been updated. (DDS-2249)
+
+  Icon: The following icons have been added. (DDS-2249)
+
+  - `success`
+  - `error`
+
+  **DEPRECATED** Icon: The following icons are deprecated and will be removed in future versions. (DDS-2249)
+
+  - `positive` (Use `success` instead)
+  - `negative` (Use `error` instead)
+  - `cross` (Use `close` instead)
+
+- [#209](https://github.com/dsv-rp/DDS/pull/209) [`8fa51e0`](https://github.com/dsv-rp/DDS/commit/8fa51e071129190733dae441193ed0f34a1c207b) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Modal: Update story appearance and the text change line strategy. (DDS-2012)
+
+- [#183](https://github.com/dsv-rp/DDS/pull/183) [`707676d`](https://github.com/dsv-rp/DDS/commit/707676db9ad8cddab0c7c2e5e8e8a4f22167e14b) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Tooltip: Keep the tooltip component always centered in the storybook view. (DDS-2207)
+
+- [#172](https://github.com/dsv-rp/DDS/pull/172) [`8bb6dde`](https://github.com/dsv-rp/DDS/commit/8bb6ddef0db41b3c220bdd34f41dce95f6b15d89) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Avatar: Added a comment to the `disabled` property. (DDS-2105)
+
+- [#164](https://github.com/dsv-rp/DDS/pull/164) [`4b81d6a`](https://github.com/dsv-rp/DDS/commit/4b81d6a6639dc5bc77496916f22ba4635b9e29fc) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Loading: remove aria-busy from loading component
+
+- [#161](https://github.com/dsv-rp/DDS/pull/161) [`c4f05f8`](https://github.com/dsv-rp/DDS/commit/c4f05f8c2b4feb1fee67bdd7449e3e5429e1d10a) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Button: Add button-aria-haspopup and button-aria-expanded properties.
+  Icon Button: Add button-aria-haspopup and button-aria-expanded properties.
+
+- [#192](https://github.com/dsv-rp/DDS/pull/192) [`511f1dc`](https://github.com/dsv-rp/DDS/commit/511f1dca49c14d2755da8fdf8f4bdcb1d8fb61e9) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Accordion: Improved the responsive behavior for long text content that doesn't contain spaces. (DDS-2257, DDS-2258)
+  Breadcrumb: Fixed an issue where the `target` property setting was not working. (DDS-2259)
+  Avatar, Button, Icon Button: Fix an issue specify `aria-haspopup` and `aria-expanded` not work in storybook. (DDS-2262)
+  Storybook: Fixed some accessibility warning error in storybook. (DDS-2224)
+
+- [#173](https://github.com/dsv-rp/DDS/pull/173) [`2c9fd65`](https://github.com/dsv-rp/DDS/commit/2c9fd658938aa192e5fd39462dde765b393c3785) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Text Field: Added a comment to the `left-icon` and `right-icon` slot. (DDS-2106)
+
+## 1.1.0
+
+### Minor Changes
+
+- [#153](https://github.com/dsv-rp/DDS/pull/153) [`8fe1ed0`](https://github.com/dsv-rp/DDS/commit/8fe1ed0d692f9f85a2c173adeb2111b7715f9f61) Thanks [@poetrainy](https://github.com/poetrainy)! - Loading: Initial Implementation. (DDS-1716)
+
+- [#154](https://github.com/dsv-rp/DDS/pull/154) [`2ad908a`](https://github.com/dsv-rp/DDS/commit/2ad908a4bec6c42414c7427f9262b506aa153c0b) Thanks [@rinjInTokyo](https://github.com/rinjInTokyo)! - Avatar: Initial Implementation. (DDS-1880)
+
+- [#121](https://github.com/dsv-rp/DDS/pull/121) [`72c8153`](https://github.com/dsv-rp/DDS/commit/72c81538970bbd341e5ff6bd25b886cc5056ba42) Thanks [@poetrainy](https://github.com/poetrainy)! - Dropdown: The `multiple`, `selectedOptions` and `maxLabels` properties have been added. (DDS-1695)
+  Dropdown Item: The `selectable` property has been added. (DDS-1695)
+  Checkbox: The `label` CSS part has been added. (DDS-1695)
+
+### Patch Changes
+
+- [#165](https://github.com/dsv-rp/DDS/pull/165) [`d4895ec`](https://github.com/dsv-rp/DDS/commit/d4895eccd896abd6e2ff16b18f61e7acd9d5026f) Thanks [@yodas7](https://github.com/yodas7)! - Removed Provenance.
+
+- [#121](https://github.com/dsv-rp/DDS/pull/121) [`72c8153`](https://github.com/dsv-rp/DDS/commit/72c81538970bbd341e5ff6bd25b886cc5056ba42) Thanks [@poetrainy](https://github.com/poetrainy)! - Dropdown: Updated appearance. (DDS-1870)
+
 ## 1.0.0
 
 ### Major Changes

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 daikinOSS
+Copyright (c) 2025 daikinOSS
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/cjs/base/dds-element.cjs

@@ -3,6 +3,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const lit = require("lit");
 const _DDSElement = class _DDSElement extends lit.LitElement {
 };
-_DDSElement.version = "1.0.0";
+_DDSElement.version = "1.2.0";
 let DDSElement = _DDSElement;
 exports.DDSElement = DDSElement;

package/dist/cjs/base/dds-form-element.cjs

@@ -0,0 +1,139 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const decorators_js = require("lit/decorators.js");
+const ddsElement = require("./dds-element.cjs");
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const _DDSFormElement = class _DDSFormElement extends ddsElement.DDSElement {
+  constructor() {
+    super();
+    this.name = "";
+    this.value = "";
+    this.internals = this.attachInternals();
+  }
+  /**
+   * Returns the form object associated with the element, or null if none exists.
+   * @private
+   */
+  get form() {
+    return this.internals ? this.internals.form : null;
+  }
+  /**
+   * Set the element's name and value within the current form.
+   * @private
+   */
+  setFormValue(value, state) {
+    var _a;
+    (_a = this.internals) == null ? void 0 : _a.setFormValue(value, state);
+  }
+  /**
+   * A function that maps to the form control's `reportValidity()` function.
+   * Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity
+   * @private
+   */
+  reportValidity() {
+    var _a;
+    return (_a = this.internals) == null ? void 0 : _a.reportValidity();
+  }
+  /**
+   * A function that maps to the form control's `checkValidity()` function.
+   * Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/checkValidity
+   * @private
+   */
+  checkValidity() {
+    var _a;
+    return (_a = this.internals) == null ? void 0 : _a.checkValidity();
+  }
+  /**
+   * TODO Enhance these functions to bring our components closer to native form components.
+   * @private
+   */
+  hostConnected() {
+  }
+  /**
+   * TODO Enhance these functions to bring our components closer to native form components.
+   * @private
+   */
+  hostDisconnected() {
+  }
+  /**
+   * TODO Enhance these functions to bring our components closer to native form components.
+   * @private
+   */
+  hostUpdated() {
+  }
+};
+_DDSFormElement.formAssociated = true;
+let DDSFormElement = _DDSFormElement;
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], DDSFormElement.prototype, "name");
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], DDSFormElement.prototype, "value");
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true, attribute: "form" })
+], DDSFormElement.prototype, "formAttr");
+const _DDSFormSubmitElement = class _DDSFormSubmitElement extends ddsElement.DDSElement {
+  constructor() {
+    super();
+    this.internals = this.attachInternals();
+  }
+  /**
+   * Returns the form object associated with the element, or null if none exists.
+   * @private
+   */
+  get form() {
+    return this.internals ? this.internals.form : null;
+  }
+  /**
+   * A function that maps to the form control's `reportValidity()` function.
+   * Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity
+   * @private
+   */
+  requestSubmit() {
+    var _a, _b;
+    (_b = (_a = this.internals) == null ? void 0 : _a.form) == null ? void 0 : _b.requestSubmit();
+  }
+  /**
+   * A function that maps to the form control's `checkValidity()` function.
+   * Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/checkValidity
+   * @private
+   */
+  reset() {
+    var _a, _b;
+    (_b = (_a = this.internals) == null ? void 0 : _a.form) == null ? void 0 : _b.reset();
+  }
+  /**
+   * TODO Enhance these functions to bring our components closer to native form components.
+   * @private
+   */
+  hostConnected() {
+  }
+  /**
+   * TODO Enhance these functions to bring our components closer to native form components.
+   * @private
+   */
+  hostDisconnected() {
+  }
+  /**
+   * TODO Enhance these functions to bring our components closer to native form components.
+   * @private
+   */
+  hostUpdated() {
+  }
+};
+_DDSFormSubmitElement.formAssociated = true;
+let DDSFormSubmitElement = _DDSFormSubmitElement;
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true, attribute: "form" })
+], DDSFormSubmitElement.prototype, "formAttr");
+exports.DDSFormElement = DDSFormElement;
+exports.DDSFormSubmitElement = DDSFormSubmitElement;

package/dist/cjs/base/dds-form-element.d.cts

@@ -0,0 +1,100 @@
+import { DDSElement } from "./dds-element.cjs";
+type FormValueType = string | File | FormData | null;
+export declare class DDSFormElement extends DDSElement {
+    static readonly formAssociated = true;
+    /**
+     * The form name, submitted as a name/value pair when submitting the form.
+     */
+    name: string;
+    /**
+     * The form value, submitted as a name/value pair when submitting the form.
+     */
+    value: string;
+    /**
+     * The form attribute specifies the form the form component belongs to.
+     * The value of this attribute must be equal to the id attribute of a <form> element in the same document.
+     */
+    formAttr: string | undefined;
+    protected internals: ElementInternals | null | undefined;
+    constructor();
+    /**
+     * Returns the form object associated with the element, or null if none exists.
+     * @private
+     */
+    get form(): HTMLFormElement | null;
+    /**
+     * Set the element's name and value within the current form.
+     * @private
+     */
+    setFormValue(value: FormValueType, state?: FormValueType): void;
+    /**
+     * A function that maps to the form control's `reportValidity()` function.
+     * Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity
+     * @private
+     */
+    reportValidity(): boolean | undefined;
+    /**
+     * A function that maps to the form control's `checkValidity()` function.
+     * Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/checkValidity
+     * @private
+     */
+    checkValidity(): boolean | undefined;
+    /**
+     * TODO Enhance these functions to bring our components closer to native form components.
+     * @private
+     */
+    hostConnected(): void;
+    /**
+     * TODO Enhance these functions to bring our components closer to native form components.
+     * @private
+     */
+    hostDisconnected(): void;
+    /**
+     * TODO Enhance these functions to bring our components closer to native form components.
+     * @private
+     */
+    hostUpdated(): void;
+}
+export declare class DDSFormSubmitElement extends DDSElement {
+    static readonly formAssociated = true;
+    /**
+     * The form attribute specifies the form the form component belongs to.
+     * The value of this attribute must be equal to the id attribute of a <form> element in the same document.
+     */
+    formAttr: string | undefined;
+    protected internals: ElementInternals | null | undefined;
+    constructor();
+    /**
+     * Returns the form object associated with the element, or null if none exists.
+     * @private
+     */
+    get form(): HTMLFormElement | null;
+    /**
+     * A function that maps to the form control's `reportValidity()` function.
+     * Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity
+     * @private
+     */
+    requestSubmit(): void;
+    /**
+     * A function that maps to the form control's `checkValidity()` function.
+     * Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/checkValidity
+     * @private
+     */
+    reset(): void;
+    /**
+     * TODO Enhance these functions to bring our components closer to native form components.
+     * @private
+     */
+    hostConnected(): void;
+    /**
+     * TODO Enhance these functions to bring our components closer to native form components.
+     * @private
+     */
+    hostDisconnected(): void;
+    /**
+     * TODO Enhance these functions to bring our components closer to native form components.
+     * @private
+     */
+    hostUpdated(): void;
+}
+export {};

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

@@ -27,13 +27,16 @@ const cvaSummary = classVarianceAuthority.cva(
     "w-full",
     "min-h-12",
     "p-3",
+    "break-all",
+    "text-left",
     "focus-visible:outline",
     "focus-visible:outline-2",
     "focus-visible:-outline-offset-2",
     "focus-visible:outline-ddt-color-common-border-focus",
     "after:size-6",
     "after:transition-all",
-    "after:i-daikin-chevron-down"
+    "after:i-daikin-chevron-down",
+    "after:flex-none"
   ],
   {
     variants: {
@@ -100,7 +103,7 @@ exports.DaikinAccordionItem = class DaikinAccordionItem extends ddsElement.DDSEl
   render() {
     const open = !this.disabled && this.open;
     return lit.html`<div
-      class="w-full text-ddt-color-common-text-primary font-daikinSerif overflow-clip"
+      class="w-full text-ddt-color-common-text-primary font-daikinSerif"
     >
       <button
         id="summary"
@@ -128,7 +131,7 @@ exports.DaikinAccordionItem = class DaikinAccordionItem extends ddsElement.DDSEl
       >
         <div class="overflow-hidden">
           <div class="pt-2 px-3 pb-3">
-            <slot></slot>
+            <slot class="slotted:break-all"></slot>
           </div>
         </div>
       </div>

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

@@ -0,0 +1,160 @@
+"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");
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const cvaWrapper = classVarianceAuthority.cva(
+  [
+    "inline-block",
+    "rounded-full",
+    "relative",
+    "overflow-hidden",
+    "box-border",
+    "size-full",
+    "focus-visible:outline",
+    "focus-visible:outline-2",
+    "focus-visible:outline-offset-2",
+    "focus-visible:outline-ddt-color-common-border-focus"
+  ],
+  {
+    variants: {
+      type: {
+        button: [
+          "enabled:bg-ddt-color-common-neutral-default",
+          "enabled:text-ddt-color-common-surface-default",
+          "enabled:hover:bg-ddt-color-common-neutral-hover",
+          "enabled:hover:text-ddt-color-common-surface-hover",
+          "enabled:active:bg-ddt-color-common-neutral-press",
+          "enabled:active:text-ddt-color-common-surface-press",
+          "disabled:bg-ddt-color-common-disabled",
+          "disabled:text-ddt-color-common-surface-default"
+        ],
+        icon: [
+          "bg-ddt-color-common-neutral-default",
+          "text-ddt-color-common-surface-default"
+        ],
+        link: [
+          "link-enabled:bg-ddt-color-common-neutral-default",
+          "link-enabled:text-ddt-color-common-surface-default",
+          "link-enabled:hover:bg-ddt-color-common-neutral-hover",
+          "link-enabled:hover:text-ddt-color-common-surface-hover",
+          "link-enabled:active:bg-ddt-color-common-neutral-press",
+          "link-enabled:active:text-ddt-color-common-surface-press",
+          "link-disabled:bg-ddt-color-common-disabled",
+          "link-disabled:text-ddt-color-common-surface-default"
+        ]
+      }
+    }
+  }
+);
+exports.DaikinAvatar = class DaikinAvatar extends lit.LitElement {
+  constructor() {
+    super();
+    this.type = "icon";
+    this.href = null;
+    this.alt = null;
+    this.disabled = false;
+    this.avatarAriaHaspopup = null;
+    this.avatarAriaExpanded = null;
+    this.addEventListener("click", (event) => {
+      if (this.disabled || this.type === "link" && this.href == null) {
+        event.stopImmediatePropagation();
+      }
+    });
+  }
+  render() {
+    const icon = lit.html`
+      <span
+        class="i-daikin-profile"
+      >
+      </span>
+    </daikin-icon>`;
+    if (this.type === "icon") {
+      return lit.html`<span
+        class=${cvaWrapper({ type: "icon" })}
+        role="figure"
+        aria-label=${ifDefined_js.ifDefined(this.alt ?? void 0)}
+      >
+        ${icon}
+      </span>`;
+    } else if (this.type === "button") {
+      return lit.html`<button
+        class=${cvaWrapper({ type: "button" })}
+        aria-label=${ifDefined_js.ifDefined(this.alt ?? void 0)}
+        aria-haspopup=${ifDefined_js.ifDefined(this.avatarAriaHaspopup ?? void 0)}
+        aria-expanded=${ifDefined_js.ifDefined(this.avatarAriaExpanded ?? void 0)}
+        ?disabled=${this.disabled}
+      >
+        ${icon}
+      </button>`;
+    } else {
+      const linkDisabled = this.disabled || this.href == null;
+      return lit.html`<a
+        class=${cvaWrapper({ type: "link" })}
+        role=${ifDefined_js.ifDefined(linkDisabled ? "link" : void 0)}
+        aria-label=${ifDefined_js.ifDefined(this.alt ?? void 0)}
+        href=${ifDefined_js.ifDefined(!linkDisabled ? this.href ?? void 0 : void 0)}
+        aria-disabled=${ifDefined_js.ifDefined(linkDisabled ? "true" : void 0)}
+      >
+        ${icon}
+      </a>`;
+    }
+  }
+  /**
+   * Focuses on the inner button or link.
+   * @param options focus options
+   */
+  focus(options) {
+    var _a;
+    (_a = this._focusableElement) == null ? void 0 : _a.focus(options);
+  }
+};
+exports.DaikinAvatar.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: inline-flex;
+      position: relative;
+    }
+
+    :host {
+      width: 2.5rem;
+      height: 2.5rem;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinAvatar.prototype, "type", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinAvatar.prototype, "href", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinAvatar.prototype, "alt", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinAvatar.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true, attribute: "avatar-aria-haspopup" })
+], exports.DaikinAvatar.prototype, "avatarAriaHaspopup", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true, attribute: "avatar-aria-expanded" })
+], exports.DaikinAvatar.prototype, "avatarAriaExpanded", 2);
+__decorateClass([
+  decorators_js.query("a,button")
+], exports.DaikinAvatar.prototype, "_focusableElement", 2);
+exports.DaikinAvatar = __decorateClass([
+  decorators_js.customElement("daikin-avatar")
+], exports.DaikinAvatar);

package/dist/cjs/components/avatar/daikin-avatar.d.cts

@@ -0,0 +1,67 @@
+import { LitElement } from 'lit';
+import { MergeVariantProps } from "../../type-utils.cjs";
+declare const cvaWrapper: (props?: ({
+    type?: "button" | "icon" | "link" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type AvatarVariantProps = MergeVariantProps<typeof cvaWrapper>;
+/**
+ * The avatar is a UI element that represent a user
+ *
+ * @fires click - A retargeted event of a [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event) emitted from the inner `<button>` element. Suppressed if `disabled` is true,
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/avatar/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-avatar></daikin-avatar>
+ * ```
+ */
+export declare class DaikinAvatar extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Replace the wrapping element.
+     */
+    type: AvatarVariantProps["type"];
+    /**
+     * Link `href`.
+     * Only used if the `type` is `"link"`.
+     * If omitted with `type="link"`, the link will be treated type [a placeholder link](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element:~:text=If%20the%20a%20element%20has%20no%20href%20attribute) and rendered type disabled state.
+     */
+    href: string | null;
+    /**
+     * Provides an accessible name of the avatar.
+     */
+    alt: string | null;
+    /**
+     * Specify the avatar disabled state.
+     * Ignored when the `type` is `"icon"`.
+     */
+    disabled: boolean;
+    /**
+     * The aria-haspopup of the avatar when `type="button"`.
+     * When used within a daikin-menu component, this property is automatically assigned the value `buttonAriaHaspopup="menu"`.
+     */
+    avatarAriaHaspopup: "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | null;
+    /**
+     * The aria-expanded of avatar when `type="button"`.
+     * When used within a daikin-menu component, this property will be controlled by daikin-menu, so you don't need to specify it explicitly.
+     */
+    avatarAriaExpanded: boolean | null;
+    private _focusableElement;
+    constructor();
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * Focuses on the inner button or link.
+     * @param options focus options
+     */
+    focus(options?: FocusOptions): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-avatar": DaikinAvatar;
+    }
+}
+export {};

package/dist/cjs/components/avatar/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinAvatar = require("./daikin-avatar.cjs");
+Object.defineProperty(exports, "DaikinAvatar", {
+  enumerable: true,
+  get: () => daikinAvatar.DaikinAvatar
+});

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

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