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

package/dist/cjs-dev/components/dropdown/daikin-dropdown.cjs

@@ -7,6 +7,7 @@ const decorators_js = require("lit/decorators.js");
 const ref_js = require("lit/directives/ref.js");
 require("../../base/dds-element.cjs");
 const ddsFormElement = require("../../base/dds-form-element.cjs");
+const ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const floatingUiAutoUpdate = require("../../controllers/floating-ui-auto-update.cjs");
@@ -45,7 +46,7 @@ const cvaButton = classVarianceAuthority.cva(
     "outline",
     "outline-1",
     "-outline-offset-1",
-    "break-all",
+    "natural-break",
     "focus-visible:outline-2",
     "focus-visible:-outline-offset-2",
     "enabled:outline-[--color-base]",
@@ -104,7 +105,6 @@ const floatingPositionOptions = {
 exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElement {
   constructor() {
     super(...arguments);
-    this.placeholder = "";
     this.disabled = false;
     this.required = false;
     this.error = false;
@@ -321,7 +321,7 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElem
     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 lit.html`<div class="w-full" @keydown=${this._handleKeyDown}>
       <button
         ${ref_js.ref(this._dropdownRef)}
@@ -333,7 +333,7 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElem
       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=${this.open ? "dropdown-items" : lit.nothing}
@@ -357,7 +357,7 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElem
         @floating-ready=${this._handleFloatingReady}
         ${this._autoUpdateController.refFloating()}
       >
-        <div class="flex-1 overflow-y-auto break-all">
+        <div class="flex-1 overflow-y-auto natural-break">
           <slot
             @slotchange=${this._handleSlotChange}
             @select=${this._handleSelect}
@@ -449,28 +449,28 @@ exports.DaikinDropdown.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "" })
 ], exports.DaikinDropdown.prototype, "placeholder", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinDropdown.prototype, "disabled", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinDropdown.prototype, "required", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinDropdown.prototype, "error", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinDropdown.prototype, "open", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinDropdown.prototype, "multiple", 2);
 __decorateClass([
-  decorators_js.property({ type: Array, attribute: false })
+  ddsProperty.property({ type: Array, attribute: false })
 ], exports.DaikinDropdown.prototype, "selectedOptions", 2);
 __decorateClass([
-  decorators_js.property({ type: Number, reflect: true, attribute: "max-labels" })
+  ddsProperty.property({ type: Number, reflect: true, attribute: "max-labels" })
 ], exports.DaikinDropdown.prototype, "maxLabels", 2);
 __decorateClass([
   decorators_js.queryAssignedElements({ selector: "daikin-dropdown-item" })

package/dist/cjs-dev/components/dropdown/daikin-dropdown.d.cts

@@ -8,6 +8,13 @@ import { DaikinInputGroup } from "../input-group/index.cjs";
  * - `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/cjs-dev/components/dropdown-item/daikin-dropdown-item.cjs

@@ -5,6 +5,7 @@ const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const ddsElement = require("../../base/dds-element.cjs");
 require("../../base/dds-form-element.cjs");
+const ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -162,16 +163,16 @@ exports.DaikinDropdownItem.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String })
+  ddsProperty.property({ type: String })
 ], exports.DaikinDropdownItem.prototype, "value", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinDropdownItem.prototype, "disabled", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinDropdownItem.prototype, "selected", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinDropdownItem.prototype, "selectable", 2);
 __decorateClass([
   decorators_js.query("button,span[role=option]")

package/dist/cjs-dev/components/icon/daikin-icon.cjs

@@ -6,6 +6,7 @@ const decorators_js = require("lit/decorators.js");
 const unsafeHtml_js = require("lit/directives/unsafe-html.js");
 const ddsElement = require("../../base/dds-element.cjs");
 require("../../base/dds-form-element.cjs");
+const ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const iconRegistry = require("../../icon-registry.cjs");
@@ -63,9 +64,6 @@ exports.DaikinIcon = class DaikinIcon extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
     this.registry = iconRegistry.iconRegistry;
-    this.icon = null;
-    this.color = "default";
-    this.size = "current";
     this._iconData = null;
   }
   connectedCallback() {
@@ -209,16 +207,31 @@ exports.DaikinIcon.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ attribute: false })
+  ddsProperty.property({ attribute: false })
 ], exports.DaikinIcon.prototype, "registry", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "" })
 ], exports.DaikinIcon.prototype, "icon", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "default",
+    isAllowedValue: ddsProperty.oneOf([
+      "default",
+      "current",
+      "black",
+      "white"
+    ])
+  })
 ], exports.DaikinIcon.prototype, "color", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "current",
+    isAllowedValue: ddsProperty.oneOf(["s", "m", "l", "xl", "current"])
+  })
 ], exports.DaikinIcon.prototype, "size", 2);
 __decorateClass([
   decorators_js.state()

package/dist/cjs-dev/components/icon/daikin-icon.d.cts

@@ -86,6 +86,10 @@ declare const icons: {
         class: string;
         color: null;
     };
+    download: {
+        class: string;
+        color: null;
+    };
 };
 export declare const iconList: string[];
 export type IconType = keyof typeof icons;
@@ -95,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: {
@@ -145,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/cjs-dev/components/icon/icons.json.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-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 } };
+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/cjs-dev/components/icon/icons.json.d.cts

@@ -83,6 +83,10 @@ declare const _default: {
     "neutral": {
       "class": "i-daikin-neutral",
       "color": null
+    },
+    "download": {
+      "class": "i-daikin-download",
+      "color": null
     }
   }
 }

package/dist/cjs-dev/components/icon-button/daikin-icon-button.cjs

@@ -6,6 +6,7 @@ const decorators_js = require("lit/decorators.js");
 const ifDefined_js = require("lit/directives/if-defined.js");
 require("../../base/dds-element.cjs");
 const ddsFormElement = require("../../base/dds-form-element.cjs");
+const ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -80,11 +81,8 @@ const cvaIconButton = classVarianceAuthority.cva(
 exports.DaikinIconButton = class DaikinIconButton extends ddsFormElement.DDSFormSubmitElement {
   constructor() {
     super();
-    this.variant = "fill";
-    this.color = "default";
     this.disabled = false;
     this.href = null;
-    this.type = "button";
     this.buttonAriaLabel = null;
     this.buttonRole = null;
     this.buttonAriaHaspopup = null;
@@ -111,6 +109,7 @@ exports.DaikinIconButton = class DaikinIconButton extends ddsFormElement.DDSForm
       return lit.html`<a
         class=${iconButtonCN}
         href=${ifDefined_js.ifDefined(!linkDisabled ? this.href ?? void 0 : void 0)}
+        tabindex=${ifDefined_js.ifDefined(this.getBackingProperty("buttonTabIndex"))}
         role=${ifDefined_js.ifDefined(
         this.buttonRole ?? (linkDisabled ? "link" : void 0)
       )}
@@ -124,10 +123,11 @@ exports.DaikinIconButton = class DaikinIconButton extends ddsFormElement.DDSForm
       <button
         class=${iconButtonCN}
         type=${this.type}
+        tabindex=${ifDefined_js.ifDefined(this.getBackingProperty("buttonTabIndex"))}
         aria-label=${this.buttonAriaLabel ?? ""}
         ?disabled=${this.disabled}
-        aria-haspopup=${ifDefined_js.ifDefined(this.buttonAriaHaspopup ?? void 0)}
-        aria-expanded=${ifDefined_js.ifDefined(this.buttonAriaExpanded ?? void 0)}
+        aria-expanded=${ifDefined_js.ifDefined(this.buttonAriaExpanded)}
+        aria-haspopup=${ifDefined_js.ifDefined(this.buttonAriaHaspopup)}
       >
         <slot class="icon-size-full"></slot>
       </button>
@@ -150,42 +150,85 @@ exports.DaikinIconButton.styles = lit.css`
       width: var(--ddc-icon-button-size, 2rem);
       height: var(--ddc-icon-button-size, 2rem);
     }
+
     :host([size="s"]) {
       --ddc-icon-button-size: 2rem; /* 32px */
     }
+
     :host([size="m"]) {
       --ddc-icon-button-size: 3rem; /* 48px */
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "fill",
+    isAllowedValue: ddsProperty.oneOf([
+      "outline",
+      "fill",
+      "ghost"
+    ])
+  })
 ], exports.DaikinIconButton.prototype, "variant", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "default",
+    isAllowedValue: ddsProperty.oneOf([
+      "default",
+      "neutral",
+      "danger"
+    ])
+  })
 ], exports.DaikinIconButton.prototype, "color", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinIconButton.prototype, "disabled", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinIconButton.prototype, "href", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "button",
+    isAllowedValue: ddsProperty.oneOf([
+      "button",
+      "submit",
+      "reset",
+      "link"
+    ])
+  })
 ], exports.DaikinIconButton.prototype, "type", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true, attribute: "button-aria-label" })
+  ddsProperty.property({ type: String, reflect: true, attribute: "button-aria-label" })
 ], exports.DaikinIconButton.prototype, "buttonAriaLabel", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true, attribute: "button-role" })
+  ddsProperty.property({ type: String, reflect: true, attribute: "button-role" })
 ], exports.DaikinIconButton.prototype, "buttonRole", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true, attribute: "button-aria-haspopup" })
+  ddsProperty.property({ type: String, reflect: true, attribute: "button-aria-haspopup" })
 ], exports.DaikinIconButton.prototype, "buttonAriaHaspopup", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true, attribute: "button-aria-expanded" })
+  ddsProperty.property({ type: String, reflect: true, attribute: "button-aria-expanded" })
 ], exports.DaikinIconButton.prototype, "buttonAriaExpanded", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: Number,
+    reflect: true,
+    attribute: "button-tabindex",
+    fallbackValue: 0
+  })
+], exports.DaikinIconButton.prototype, "buttonTabIndex", 2);
+__decorateClass([
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "s",
+    isAllowedValue: ddsProperty.oneOf(["s", "m"])
+  })
 ], exports.DaikinIconButton.prototype, "size", 2);
 __decorateClass([
   decorators_js.query("button")

package/dist/cjs-dev/components/icon-button/daikin-icon-button.d.cts

@@ -2,7 +2,7 @@ import { DDSFormSubmitElement } from "../../base/index.cjs";
 import { ARIARole } from "../../lit-analyzer-types.cjs";
 import { MergeVariantProps } from "../../type-utils.cjs";
 declare const cvaIconButton: (props?: ({
-    color?: "danger" | "default" | "neutral" | null | undefined;
+    color?: "default" | "danger" | "neutral" | null | undefined;
     variant?: "fill" | "outline" | "ghost" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type IconButtonVariantProps = MergeVariantProps<typeof cvaIconButton>;
@@ -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;