@daikin-oss/design-system-web-components 1.3.2 → 1.4.0-next.1

package/dist/es-dev/components/date-picker/daikin-date-picker.js

@@ -1,15 +1,17 @@
-import { offset, flip, shift } from "@floating-ui/dom";
+import { offset, flip, shift, size } from "@floating-ui/dom";
 import { cva } from "class-variance-authority";
-import { unsafeCSS, css, html } from "lit";
-import { property, state } from "lit/decorators.js";
+import { unsafeCSS, css, nothing, html } from "lit";
+import { state } from "lit/decorators.js";
 import { guard } from "lit/directives/guard.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import "../../base/dds-element.js";
 import { DDSFormElement } from "../../base/dds-form-element.js";
+import { property } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import { FloatingUIAutoUpdateController } from "../../controllers/floating-ui-auto-update.js";
+import { FocusTrapController } from "../../controllers/focus-trap.js";
 import tailwindStyles from "../../tailwind.css.js";
 import { tryParseDateFromProperty, parseDateFromProperty, DEFAULT_MIN_DATE, DEFAULT_MAX_DATE, formatDateForProperty, isDateOutOfRange, cvaIconButton, countDaysForYearMonth } from "../../utils/calendar-common.js";
 import { reDispatch } from "../../utils/re-dispatch.js";
@@ -56,7 +58,7 @@ const cvaField = cva(
     "pl-4",
     "pr-10",
     "rounded",
-    "overflow-hidden",
+    "truncate",
     "outline",
     "outline-[--color-border]",
     "outline-0",
@@ -229,9 +231,6 @@ function handleOffsetInput(parts, item, offset2, viewDate, minDate, maxDate) {
 let DaikinDatePicker = class extends DDSFormElement {
   constructor() {
     super(...arguments);
-    this.placeholder = null;
-    this.min = "";
-    this.max = "";
     this.readonly = false;
     this.disabled = false;
     this.required = false;
@@ -243,6 +242,19 @@ let DaikinDatePicker = class extends DDSFormElement {
     this._autoUpdateController = new FloatingUIAutoUpdateController(this);
     this._dateInputElement = createRef();
     this._calendarElement = createRef();
+    this._calendarButtonElement = createRef();
+    this._ignoreCloseByFocusTrap = false;
+    this._handleCloseCalendar = () => {
+      var _a;
+      if (this._ignoreCloseByFocusTrap) return;
+      this.open = false;
+      (_a = this._calendarButtonElement.value) == null ? void 0 : _a.focus();
+    };
+    this._focusTrapController = new FocusTrapController(
+      this,
+      this._handleCloseCalendar
+    );
+    this.label = null;
   }
   get _value() {
     return tryParseDateFromProperty(this.value);
@@ -253,9 +265,6 @@ let DaikinDatePicker = class extends DDSFormElement {
   get _max() {
     return tryParseDateFromProperty(this.max) ?? parseDateFromProperty(DEFAULT_MAX_DATE);
   }
-  get _defaultValue() {
-    return tryParseDateFromProperty(this.defaultValue ?? "");
-  }
   get _viewDate() {
     var _a;
     return ((_a = this._calendarElement.value) == null ? void 0 : _a.viewDate) ?? null;
@@ -406,7 +415,11 @@ let DaikinDatePicker = class extends DDSFormElement {
     }
     this._emitSelect();
   }
+  _handlePointerDown() {
+    this._ignoreCloseByFocusTrap = true;
+  }
   _handlePointerUp() {
+    this._ignoreCloseByFocusTrap = false;
     if (this.disabled || this.readonly) {
       return;
     }
@@ -489,13 +502,13 @@ let DaikinDatePicker = class extends DDSFormElement {
           ${ref(this._dateInputElement)}
           class=${cvaField({ error: this.error })}
           type="text"
-          placeholder=${ifDefined(this.placeholder ?? void 0)}
-          name=${this.name}
-          aria-label=${ifDefined(this._label ?? void 0)}
-          .value=${this._value ? formatDateForUI(this._value) : ""}
+          name=${ifDefined(this.getBackingProperty("name"))}
+          placeholder=${ifDefined(this.getBackingProperty("placeholder"))}
+          aria-label=${ifDefined(this._label ?? this.label ?? "Date Picker")}
           ?disabled=${this.disabled}
           ?readonly=${this.readonly}
           ?required=${this.required}
+          .value=${this._value ? formatDateForUI(this._value) : ""}
           @change=${this._handleChange}
           @focusin=${this._handleFocusIn}
           @focusout=${this._handleFocusOut}
@@ -504,12 +517,14 @@ let DaikinDatePicker = class extends DDSFormElement {
           @mouseup=${this._handleMouseUp}
         />
         <daikin-icon-button
+          ${ref(this._calendarButtonElement)}
           class="absolute top-0 bottom-0 right-2 m-auto"
           type="button"
           color="neutral"
           variant="ghost"
           button-aria-label="Open the date picker"
           ?disabled=${this.disabled}
+          @pointerdown=${this._handlePointerDown}
           @pointerup=${this._handlePointerUp}
           @keydown=${this._handleCalendarKeyDown}
         >
@@ -518,14 +533,13 @@ let DaikinDatePicker = class extends DDSFormElement {
       </div>
       <daikin-calendar
         ${ref(this._calendarElement)}
+        ${this._focusTrapController.refContainer()}
         id="calendar"
-        .value=${this._value ? formatDateForProperty(this._value) : null}
+        value=${this._value ? formatDateForProperty(this._value) : nothing}
         min=${formatDateForProperty(min)}
         max=${formatDateForProperty(max)}
-        default-value=${ifDefined(
-      this._defaultValue ? formatDateForProperty(this._defaultValue) : void 0
-    )}
-        popover="auto"
+        default-value=${ifDefined(this.defaultValue)}
+        popover="manual"
         class="absolute left-[--floating-x,0] top-[--floating-y,0]"
         @toggle=${this._handleToggle}
         @select=${this._handleSelect}
@@ -533,6 +547,9 @@ let DaikinDatePicker = class extends DDSFormElement {
         ${this._autoUpdateController.refFloating()}
       >
       </daikin-calendar>
+      <span class="sr-only" aria-live="polite"
+        >${this.value ? `${this._label ?? ""} Selected: ${this.value}` : ""}
+      </span>
       ${// Activate auto update only when the tooltip is open.
     // TODO(DDS-1226): refactor here with CSS Anchor Positioning instead of using floating-ui
     guard(
@@ -540,10 +557,25 @@ let DaikinDatePicker = class extends DDSFormElement {
       () => this._autoUpdateController.directive(
         {
           placement: "bottom-start",
-          middleware: [offset({ mainAxis: 0 }), flip(), shift()]
+          middleware: [
+            offset({ mainAxis: 0 }),
+            flip(),
+            shift(),
+            size({
+              apply({ availableHeight, elements }) {
+                Object.assign(elements.floating.style, {
+                  maxHeight: `${availableHeight}px`
+                });
+              }
+            })
+          ]
         },
         this.open
       )
+    )}
+      ${guard(
+      [this.open],
+      () => this._focusTrapController.directive(this.open)
     )}`;
   }
   willUpdate(changedProperties) {
@@ -561,6 +593,12 @@ let DaikinDatePicker = class extends DDSFormElement {
         }
       }
     }
+    if (changedProperties.has("value")) {
+      if (tryParseDateFromProperty(this.value)) {
+        const newDate = parseDateFromProperty(this.value);
+        this.error = isDateOutOfRange(newDate, this._min, this._max);
+      }
+    }
   }
   updated(changedProperties) {
     var _a;
@@ -601,13 +639,13 @@ DaikinDatePicker.styles = css`
     }
   `;
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({ type: String, reflect: true, fallbackValue: "" })
 ], DaikinDatePicker.prototype, "placeholder", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({ type: String, reflect: true, fallbackValue: "1900-01-01" })
 ], DaikinDatePicker.prototype, "min", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({ type: String, reflect: true, fallbackValue: "2099-12-31" })
 ], DaikinDatePicker.prototype, "max", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })

package/dist/es-dev/components/dropdown/daikin-dropdown.d.ts

@@ -8,6 +8,13 @@ import { DaikinInputGroup } from "../input-group/index.js";
  * - `daikin-dropdown` > `daikin-dropdown-item`
  * - `daikin-input-group` > `daikin-dropdown` > `daikin-dropdown-item`
  *
+ * @attr form - The form the component belongs to.
+ * @attr name - The form name, submitted as a name/value pair when submitting the form.
+ * @attr value - The initial form value, submitted as a name/value pair when submitting the form.
+ * @prop {String} formAttr - The form the component belongs to.
+ * @prop {String} name - The form name, submitted as a name/value pair when submitting the form.
+ * @prop {String} value - The form value, submitted as a name/value pair when submitting the form.
+ *
  * @fires change - A custom event emitted when a user selects a dropdown item.
  *
  * @slot - Dropdown item list slot. Place `daikin-dropdown-item` elements here.

package/dist/es-dev/components/dropdown/daikin-dropdown.js

@@ -1,11 +1,11 @@
 import { flip, offset, size } from "@floating-ui/dom";
 import { cva } from "class-variance-authority";
-import { unsafeCSS, css, html } from "lit";
-import { property, queryAssignedElements, query, state } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
+import { unsafeCSS, css, nothing, html } from "lit";
+import { queryAssignedElements, query, state } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import "../../base/dds-element.js";
 import { DDSFormElement } from "../../base/dds-form-element.js";
+import { property } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import { FloatingUIAutoUpdateController } from "../../controllers/floating-ui-auto-update.js";
@@ -44,7 +44,7 @@ const cvaButton = cva(
     "outline",
     "outline-1",
     "-outline-offset-1",
-    "break-all",
+    "natural-break",
     "focus-visible:outline-2",
     "focus-visible:-outline-offset-2",
     "enabled:outline-[--color-base]",
@@ -103,7 +103,6 @@ const floatingPositionOptions = {
 let DaikinDropdown = class extends DDSFormElement {
   constructor() {
     super(...arguments);
-    this.placeholder = "";
     this.disabled = false;
     this.required = false;
     this.error = false;
@@ -320,10 +319,11 @@ let DaikinDropdown = class extends DDSFormElement {
     this._updateItemsSelectable();
   }
   render() {
-    const fallbackLabel = this.open && !this.disabled ? "Close dropdown" : this.selectedOptions.length ? `Selected: ${this._selectionLabels.join(", ")}` : "Open dropdown";
+    const fallbackLabel = this.open && !this.disabled ? "Close dropdown" : this.selectedOptions.length ? `Selected: ${this._selectionLabels.join(", ")}` : this.value ? `Selected: ${this.value}` : "Open dropdown";
     return html`<div class="w-full" @keydown=${this._handleKeyDown}>
       <button
         ${ref(this._dropdownRef)}
+        id="dropdown-button"
         type="button"
         class=${cvaButton({
       open: this.open,
@@ -331,10 +331,10 @@ let DaikinDropdown = class extends DDSFormElement {
       placeholder: !this.selectedOptions.length
     })}
         ?disabled=${this.disabled}
-        aria-label=${this._label ?? fallbackLabel}
+        aria-label=${`${this._label ?? ""} ${fallbackLabel}`}
         aria-expanded=${this.open && !this.disabled}
         aria-disabled=${this.disabled}
-        aria-controls="dropdown-items"
+        aria-controls=${this.open ? "dropdown-items" : nothing}
         aria-required=${this.required}
         aria-haspopup="listbox"
         @pointerup=${this._handlePointerUp}
@@ -348,16 +348,14 @@ let DaikinDropdown = class extends DDSFormElement {
       </button>
       <div
         id="dropdown-items"
+        role="listbox"
         popover="manual"
         class="flex flex-col overflow-hidden floating-unready:hidden absolute left-[--floating-x,0] top-[--floating-y,0] min-w-[--floating-width] max-h-[12.5rem] border border-ddt-color-divider opacity-1 transition-[opacity] rounded max-w-min"
+        aria-labelledby="dropdown-button"
         @floating-ready=${this._handleFloatingReady}
         ${this._autoUpdateController.refFloating()}
       >
-        <div
-          class="flex-1 overflow-y-auto break-all"
-          aria-label=${ifDefined(this._label ?? void 0)}
-          role="listbox"
-        >
+        <div class="flex-1 overflow-y-auto natural-break">
           <slot
             @slotchange=${this._handleSlotChange}
             @select=${this._handleSelect}
@@ -449,7 +447,7 @@ DaikinDropdown.styles = css`
     }
   `;
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({ type: String, reflect: true, fallbackValue: "" })
 ], DaikinDropdown.prototype, "placeholder", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })

package/dist/es-dev/components/dropdown-item/daikin-dropdown-item.js

@@ -1,8 +1,9 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
-import { property, query } from "lit/decorators.js";
+import { query } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
 import "../../base/dds-form-element.js";
+import { property } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";

package/dist/es-dev/components/icon/daikin-icon.d.ts

@@ -78,6 +78,18 @@ declare const icons: {
         class: string;
         color: null;
     };
+    notification: {
+        class: string;
+        color: null;
+    };
+    neutral: {
+        class: string;
+        color: null;
+    };
+    download: {
+        class: string;
+        color: null;
+    };
 };
 export declare const iconList: string[];
 export type IconType = keyof typeof icons;
@@ -87,47 +99,44 @@ declare const cvaIcon: (props?: ({
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type IconVariantProps = MergeVariantProps<typeof cvaIcon>;
 /**
- * The icon component is a versatile UI element used to display small graphical symbols or images that represent actions, objects, or concepts within an application.
- * The icon set is provided by DDS, and it also supports custom icons via the icon registry.
+ * A versatile UI element that displays small graphical symbols or images representing actions, objects, or concepts within an application.
+ * The component uses the predefined DDS icon set by default but also supports custom icons via the icon registry.
  *
- * For static DDS icons, the component uses the predefined icon set.
- * For custom icons, it can dynamically load icons from various sources using the icon registry.
+ * Predefined DDS icons are automatically rendered using optimized CSS classes.
+ * Custom icons can be dynamically loaded from various sources using the icon registry.
  *
- * This component supports multiple rendering modes for enhanced security when using custom icons:
+ * If an icon cannot be loaded, a blank space is displayed.
+ * In development builds, warnings are logged to the console for debugging.
  *
- * - **mask** (default for custom icons): Uses CSS mask-image for secure rendering with color customization
- * - **background**: Uses CSS background-image for secure rendering without color customization
- * - **inline**: Traditional SVG rendering using innerHTML (use with caution)
- * - **static** (for DDS icons): Uses predefined CSS classes from the DDS icon set
+ * ### Using Custom Icons
  *
- * **Security Note**: When using custom icons, especially with `inline` mode, ensure that the SVG content comes from trusted sources only.
- * Untrusted input may lead to XSS vulnerabilities. Consider using `mask` or `background` modes for better security.
+ * Custom icons must be registered with the icon registry before use.
+ * They can be registered individually or in bulk using pattern matching, with support for multiple rendering modes.
  *
- * To use a custom color, set the `color` property to `"current"` and apply the desired color using the CSS `color` property.
- * This works out-of-the-box for mask and static modes, and can be achieved for inline mode with additional effort. The background mode does not support custom colors.
+ * #### Rendering Modes
  *
- * If an icon cannot be loaded, a blank space will be displayed.
- * In development builds, warnings will be shown in the console for debugging.
+ * Custom icons support multiple rendering modes, each with different characteristics:
  *
- * @cssprop [--ddc-icon-size] - Icon size. If a value other than "current" is set for the `size` property, it will be automatically overwritten. This may also be set by a parent component such as `daikin-icon-button`.
+ * - **mask** (default): Uses CSS `mask-image` to render the icon.
+ *   - Secure rendering method (SVG is converted to data URL).
+ *   - Supports color customization via the `color` property or CSS `color`.
+ *   - Best choice for most use cases with custom icons.
+ * - **background**: Uses CSS `background-image` to render the icon.
+ *   - Secure rendering method (SVG is converted to data URL).
+ *   - Does NOT support color customization; the icon is rendered with its original colors.
+ *   - Use this mode when you need to preserve the original colors of multi-color SVG icons.
+ * - **inline**: Traditional SVG rendering using `innerHTML`.
+ *   - Renders the raw SVG markup directly in the DOM.
+ *   - Supports color customization if the SVG uses `currentColor` or inheritable properties.
+ *   - ⚠️ **Security Warning**: Only use this mode with SVG content from trusted sources. Untrusted SVG content may lead to XSS vulnerabilities.
+ *   - Use `mask` or `background` modes for better security.
  *
- * @example
+ * #### Registration Examples
  *
  * ```js
- * import "@daikin-oss/design-system-web-components/components/icon/index.js";
- * ```
- *
- * ```html
- * <!-- Using a DDS static icon -->
- * <daikin-icon icon="information" color="black" size="m"></daikin-icon>
- *
- * <!-- Using a custom icon -->
- * <daikin-icon icon="my-custom-icon" color="black" size="m"></daikin-icon>
- *
- * <script>
  * import { iconRegistry } from "@daikin-oss/design-system-web-components/icon-registry.js";
  *
- * // Register with mask mode for secure rendering
+ * // Register a single custom icon using mask mode for secure rendering and color customization
  * iconRegistry.register({
  *   name: "my-custom-icon",
  *   svg: {
@@ -137,39 +146,87 @@ export type IconVariantProps = MergeVariantProps<typeof cvaIcon>;
  *   },
  * });
  *
- * // Register dynamic custom icons
+ * // Register multiple custom icons dynamically using pattern matching
  * iconRegistry.register({
- *   match: /^custom-/,
+ *   match: /^dynamic-custom-/,
  *   async fetch: (name) => {
  *     const response = await fetch(`/path/to/custom/icons/${name}.svg`);
  *     if (!response.ok) {
  *       throw new Error(`Failed to load custom icon "${name}"`);
  *     }
+ *     // You can return just the SVG content as a string (defaults to mask mode)
+ *     // Or return an object with `svg`, `defaultColor` (optional), and `mode` (optional) for more control
  *     return response.text();
  *   },
  * });
- * </script>
+ * ```
+ *
+ * Once registered, you can use your custom icons in components:
+ *
+ * ```html
+ * <daikin-icon icon="my-custom-icon" color="current" size="m"></daikin-icon>
+ * <daikin-icon icon="dynamic-custom-icon-123" color="current" size="m"></daikin-icon>
+ * ```
+ *
+ * ### Changing Icon Color
+ *
+ * To use a custom color, set the `color` property to `"current"` and apply the desired color using the CSS `color` property:
+ *
+ * ```html
+ * <daikin-icon icon="information" color="current" style="color: red;"></daikin-icon>
+ * <!-- or you can inherit the color from a parent element -->
+ * <div style="color: blue;">
+ *   <daikin-icon icon="information" color="current"></daikin-icon>
+ * </div>
+ * ```
+ *
+ * This behavior is supported natively for DDS icons and `mask` mode (the default for custom icons).
+ * In `inline` mode, color inheritance works only if the SVG uses `currentColor` or inheritable properties.
+ * Note that `background` mode does not support custom colors.
+ *
+ * @cssprop [--ddc-icon-size] - The size of the icon. If you set a value other than "current" for the `size` property, this will be automatically overwritten.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/icon/index.js";
+ * ```
+ *
+ * ```html
+ * <!-- Using a DDS static icon -->
+ * <daikin-icon icon="information" color="current" size="m"></daikin-icon>
+ *
+ * <!-- Using a custom icon -->
+ * <daikin-icon icon="my-custom-icon" color="current" size="m"></daikin-icon>
  * ```
  */
 export declare class DaikinIcon extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
-     * Specify icon registry instance.
-     * Default is the global icon registry.
+     * The icon registry instance to use.
+     * Defaults to the global icon registry.
      */
     registry: IconRegistry;
     /**
-     * Specify the name of the icon.
+     * The name of the icon to display.
      * Can be a static DDS icon name or a custom icon name registered in the icon registry.
      */
-    icon: string | null;
+    icon: string;
     /**
-     * Specify icon color
+     * The color of the icon.
+     * Use `"current"` for most cases.
+     *
+     * **This property will be removed in a future release.**
+     * To prepare for this change, start using `color="current"` and set icon colors via the CSS `color` property instead of using predefined color values.
+     *
+     * @default "default"
      */
     color: IconVariantProps["color"];
     /**
-     * Specify the size of the icon.
-     * If "current" is set, `--ddc-icon-size` CSS variable will be used. `--ddc-icon-size` may be set by the parent component such as `daikin-icon-button`.
+     * The size of the icon.
+     * If set to "current", the `--ddc-icon-size` CSS variable will be used. `--ddc-icon-size` may be set by a parent component such as `daikin-icon-button`.
+     *
+     * @default "current"
      */
     size: "s" | "m" | "l" | "xl" | "current";
     private _iconData;

package/dist/es-dev/components/icon/daikin-icon.js

@@ -1,9 +1,10 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
-import { property, state } from "lit/decorators.js";
+import { state } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { DDSElement } from "../../base/dds-element.js";
 import "../../base/dds-form-element.js";
+import { property, oneOf } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import { iconRegistry } from "../../icon-registry.js";
@@ -61,9 +62,6 @@ let DaikinIcon = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.registry = iconRegistry;
-    this.icon = null;
-    this.color = "default";
-    this.size = "current";
     this._iconData = null;
   }
   connectedCallback() {
@@ -191,32 +189,47 @@ DaikinIcon.styles = css`
     }
 
     :host([size="s"]) {
-      --ddc-icon-size: 12px;
+      --ddc-icon-size: 16px;
     }
 
     :host([size="m"]) {
-      --ddc-icon-size: 16px;
+      --ddc-icon-size: 24px;
     }
 
     :host([size="l"]) {
-      --ddc-icon-size: 20px;
+      --ddc-icon-size: 32px;
     }
 
     :host([size="xl"]) {
-      --ddc-icon-size: 24px;
+      --ddc-icon-size: 40px;
     }
   `;
 __decorateClass([
   property({ attribute: false })
 ], DaikinIcon.prototype, "registry", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({ type: String, reflect: true, fallbackValue: "" })
 ], DaikinIcon.prototype, "icon", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "default",
+    isAllowedValue: oneOf([
+      "default",
+      "current",
+      "black",
+      "white"
+    ])
+  })
 ], DaikinIcon.prototype, "color", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "current",
+    isAllowedValue: oneOf(["s", "m", "l", "xl", "current"])
+  })
 ], DaikinIcon.prototype, "size", 2);
 __decorateClass([
   state()

package/dist/es-dev/components/icon/icons.json.d.ts

@@ -75,6 +75,18 @@ declare const _default: {
     "cross": {
       "class": "i-daikin-close",
       "color": null
+    },
+    "notification": {
+      "class": "i-daikin-notification",
+      "color": null
+    },
+    "neutral": {
+      "class": "i-daikin-neutral",
+      "color": null
+    },
+    "download": {
+      "class": "i-daikin-download",
+      "color": null
     }
   }
 }

package/dist/es-dev/components/icon/icons.json.js

@@ -1,4 +1,4 @@
-const icons = { "logo-positive": { "class": "i-daikin-logo-positive", "color": null }, "logo-negative": { "class": "i-daikin-logo-negative", "color": null }, "alarm": { "class": "i-daikin-alarm", "color": null }, "close": { "class": "i-daikin-close", "color": "#a0a0a0" }, "information": { "class": "i-daikin-information", "color": null }, "error": { "class": "i-daikin-error", "color": null }, "success": { "class": "i-daikin-success", "color": null }, "warning": { "class": "i-daikin-warning", "color": null }, "pagination-chevron-left": { "class": "i-daikin-pagination-chevron-left", "color": "#414141" }, "pagination-chevron-right": { "class": "i-daikin-pagination-chevron-right", "color": "#414141" }, "profile": { "class": "i-daikin-profile", "color": null }, "chevron-up": { "class": "i-daikin-chevron-up", "color": null }, "chevron-down": { "class": "i-daikin-chevron-down", "color": null }, "chevron-left": { "class": "i-daikin-chevron-left", "color": null }, "chevron-right": { "class": "i-daikin-chevron-right", "color": null }, "sort": { "class": "i-daikin-sort", "color": null }, "negative": { "class": "i-daikin-error", "color": null }, "positive": { "class": "i-daikin-success", "color": null }, "cross": { "class": "i-daikin-close", "color": null } };
+const icons = { "logo-positive": { "class": "i-daikin-logo-positive", "color": null }, "logo-negative": { "class": "i-daikin-logo-negative", "color": null }, "alarm": { "class": "i-daikin-alarm", "color": null }, "close": { "class": "i-daikin-close", "color": "#a0a0a0" }, "information": { "class": "i-daikin-information", "color": null }, "error": { "class": "i-daikin-error", "color": null }, "success": { "class": "i-daikin-success", "color": null }, "warning": { "class": "i-daikin-warning", "color": null }, "pagination-chevron-left": { "class": "i-daikin-pagination-chevron-left", "color": "#414141" }, "pagination-chevron-right": { "class": "i-daikin-pagination-chevron-right", "color": "#414141" }, "profile": { "class": "i-daikin-profile", "color": null }, "chevron-up": { "class": "i-daikin-chevron-up", "color": null }, "chevron-down": { "class": "i-daikin-chevron-down", "color": null }, "chevron-left": { "class": "i-daikin-chevron-left", "color": null }, "chevron-right": { "class": "i-daikin-chevron-right", "color": null }, "sort": { "class": "i-daikin-sort", "color": null }, "negative": { "class": "i-daikin-error", "color": null }, "positive": { "class": "i-daikin-success", "color": null }, "cross": { "class": "i-daikin-close", "color": null }, "notification": { "class": "i-daikin-notification", "color": null }, "neutral": { "class": "i-daikin-neutral", "color": null }, "download": { "class": "i-daikin-download", "color": null } };
 const iconsJson = {
   icons
 };

package/dist/es-dev/components/icon-button/daikin-icon-button.d.ts

@@ -14,6 +14,9 @@ type IconButtonVariantProps = MergeVariantProps<typeof cvaIconButton>;
  * - About fill color - The icon should be able to accept the CSS `color` property.
  * - About size - The recommended width of the icon is 24px * 24px. Please make sure that the size of the icon you insert conforms to this, or please set the `width` and `height` properties of the icon to 100%.
  *
+ * @attr form - The form the component belongs to.
+ * @prop {String} formAttr - The form the component belongs to.
+ *
  * @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,
  *
  * @slot - A slot for an icon. Place a daikin-icon element or something similar.
@@ -36,10 +39,14 @@ export declare class DaikinIconButton extends DDSFormSubmitElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Variant of the button.
+     *
+     * @default "fill"
      */
     variant: IconButtonVariantProps["variant"];
     /**
      * Color of the button.
+     *
+     * @default "default"
      */
     color: IconButtonVariantProps["color"];
     /**
@@ -55,6 +62,8 @@ export declare class DaikinIconButton extends DDSFormSubmitElement {
     /**
      * Type of the button.
      * If `"link"` is specified, the button will be rendered as an `<a>` element.
+     *
+     * @default "button"
      */
     type: "button" | "submit" | "reset" | "link";
     /**
@@ -74,13 +83,18 @@ export declare class DaikinIconButton extends DDSFormSubmitElement {
      * The aria-expanded of icon button 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.
      */
-    buttonAriaExpanded: boolean | null;
+    buttonAriaExpanded: "true" | "false" | "undefined" | null;
+    /**
+     * The `tabindex` of the button.
+     * If omitted or set to 0, the button follows the default tab flow.
+     * Setting it to -1 makes the button unreachable via the Tab key.
+     * This is useful when the button is part of a composite widget and accessible via other keys.
+     */
+    buttonTabIndex: number;
     /**
      * Size of the button.
      * - `s`: 32px * 32px
      * - `m`: 48px * 48px
-     *
-     * Default is `s`.
      */
     size: "s" | "m";
     private _button;