@daikin-oss/design-system-web-components 1.2.0 → 1.3.0-next.2

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

@@ -1,23 +1,103 @@
 import { DDSElement } from "../../base/index.cjs";
+import { IconRegistry } from "../../icon-registry.cjs";
 import { MergeVariantProps } from "../../type-utils.cjs";
-import { icons } from "./icons.json.cjs";
+declare const icons: {
+    "logo-positive": {
+        class: string;
+        color: null;
+    };
+    "logo-negative": {
+        class: string;
+        color: null;
+    };
+    alarm: {
+        class: string;
+        color: null;
+    };
+    close: {
+        class: string;
+        color: string;
+    };
+    information: {
+        class: string;
+        color: null;
+    };
+    error: {
+        class: string;
+        color: null;
+    };
+    success: {
+        class: string;
+        color: null;
+    };
+    warning: {
+        class: string;
+        color: null;
+    };
+    "pagination-chevron-left": {
+        class: string;
+        color: string;
+    };
+    "pagination-chevron-right": {
+        class: string;
+        color: string;
+    };
+    profile: {
+        class: string;
+        color: null;
+    };
+    "chevron-up": {
+        class: string;
+        color: null;
+    };
+    "chevron-down": {
+        class: string;
+        color: null;
+    };
+    "chevron-left": {
+        class: string;
+        color: null;
+    };
+    "chevron-right": {
+        class: string;
+        color: null;
+    };
+    sort: {
+        class: string;
+        color: null;
+    };
+};
 export declare const iconList: string[];
 export type IconType = keyof typeof icons;
 declare const cvaIcon: (props?: ({
-    icon?: string | number | null | undefined;
     color?: "current" | "default" | "black" | "white" | null | undefined;
+    mode?: "mask" | "background" | "inline" | "static" | null | undefined;
 } & 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.
+ * The icon set is provided by DDS, and it also supports custom icons via the icon registry.
  *
- * To use an arbitrary color, specify `"current"` for the `color` property and set the `color` CSS property to the color you want to use.
+ * 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.
  *
- * If you try to use an icon that does not exist, a blank space will be displayed.
- * In the development build, warnings will be displayed in the console, so please check there if you encounter any unexpected behavior.
+ * This component supports multiple rendering modes for enhanced security when using custom icons:
  *
- * @cssprop [--ddc-icon-size] - Icon size. If a value other than "current" is set for the `size` property, it will be overwritten automatically. This may be set by the parent component such as `daikin-icon-button`.
+ * - **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
+ *
+ * **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.
+ *
+ * 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.
+ *
+ * If an icon cannot be loaded, a blank space will be displayed.
+ * In development builds, warnings will be shown in the console for debugging.
+ *
+ * @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`.
  *
  * @example
  *
@@ -26,15 +106,51 @@ export type IconVariantProps = MergeVariantProps<typeof cvaIcon>;
  * ```
  *
  * ```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
+ * iconRegistry.register({
+ *   name: "my-custom-icon",
+ *   svg: {
+ *     svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">...</svg>',
+ *     mode: "mask",
+ *     defaultColor: "#0066cc"
+ *   },
+ * });
+ *
+ * // Register dynamic custom icons
+ * iconRegistry.register({
+ *   match: /^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}"`);
+ *     }
+ *     return response.text();
+ *   },
+ * });
+ * </script>
  * ```
  */
 export declare class DaikinIcon extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
-     * Specify the name of the icon
+     * Specify icon registry instance.
+     * Default is the global icon registry.
+     */
+    registry: IconRegistry;
+    /**
+     * Specify the name of the icon.
+     * Can be a static DDS icon name or a custom icon name registered in the icon registry.
      */
-    icon: IconType | null;
+    icon: string | null;
     /**
      * Specify icon color
      */
@@ -44,6 +160,10 @@ export declare class DaikinIcon extends DDSElement {
      * 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`.
      */
     size: "s" | "m" | "l" | "xl" | "current";
+    private _iconData;
+    connectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    private loadIcon;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

package/dist/cjs/components/icon/icons.json.cjs

@@ -1,4 +1,8 @@
 "use strict";
-Object.defineProperty(exports, 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 } };
+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 } };
+const iconsJson = {
+  icons
+};
+exports.default = iconsJson;
 exports.icons = icons;

package/dist/cjs/components/icon/icons.json.d.cts

@@ -63,18 +63,6 @@ declare const _default: {
     "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
     }
   }
 }

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

@@ -89,6 +89,7 @@ exports.DaikinIconButton = class DaikinIconButton extends ddsFormElement.DDSForm
     this.buttonRole = null;
     this.buttonAriaHaspopup = null;
     this.buttonAriaExpanded = null;
+    this.size = "s";
     this.addEventListener("click", (event) => {
       if (this.disabled) {
         event.stopImmediatePropagation();
@@ -146,8 +147,14 @@ exports.DaikinIconButton.styles = lit.css`
 
     :host {
       display: inline-block;
-      width: 2rem;
-      height: 2rem;
+      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([
@@ -177,6 +184,9 @@ __decorateClass([
 __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true, attribute: "button-aria-expanded" })
 ], exports.DaikinIconButton.prototype, "buttonAriaExpanded", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinIconButton.prototype, "size", 2);
 __decorateClass([
   decorators_js.query("button")
 ], exports.DaikinIconButton.prototype, "_button", 2);

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

@@ -75,6 +75,14 @@ export declare class DaikinIconButton extends DDSFormSubmitElement {
      * 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;
+    /**
+     * Size of the button.
+     * - `s`: 32px * 32px
+     * - `m`: 48px * 48px
+     *
+     * Default is `s`.
+     */
+    size: "s" | "m";
     private _button;
     constructor();
     render(): import('lit-html').TemplateResult<1>;

package/dist/cjs/components/index.cjs

@@ -14,6 +14,8 @@ const daikinCarousel = require("./carousel/daikin-carousel.cjs");
 const daikinCarouselItem = require("./carousel-item/daikin-carousel-item.cjs");
 const daikinCheckbox = require("./checkbox/daikin-checkbox.cjs");
 const daikinCheckboxGroup = require("./checkbox-group/daikin-checkbox-group.cjs");
+const daikinChip = require("./chip/daikin-chip.cjs");
+const daikinCombobox = require("./combobox/daikin-combobox.cjs");
 const daikinDatePicker = require("./date-picker/daikin-date-picker.cjs");
 const daikinDropdown = require("./dropdown/daikin-dropdown.cjs");
 const daikinDropdownItem = require("./dropdown-item/daikin-dropdown-item.cjs");
@@ -35,6 +37,7 @@ const daikinProgressBar = require("./progress-bar/daikin-progress-bar.cjs");
 const daikinProgressIndicator = require("./progress-indicator/daikin-progress-indicator.cjs");
 const daikinProgressIndicatorItem = require("./progress-indicator-item/daikin-progress-indicator-item.cjs");
 const daikinRadio = require("./radio/daikin-radio.cjs");
+const daikinRadioGroup = require("./radio-group/daikin-radio-group.cjs");
 const daikinSelect = require("./select/daikin-select.cjs");
 const daikinSlider = require("./slider/daikin-slider.cjs");
 const daikinTab = require("./tab/daikin-tab.cjs");
@@ -45,6 +48,8 @@ const daikinTableHeaderCell = require("./table-header-cell/daikin-table-header-c
 const daikinTabs = require("./tabs/daikin-tabs.cjs");
 const daikinTextArea = require("./text-area/daikin-text-area.cjs");
 const daikinTextField = require("./text-field/daikin-text-field.cjs");
+const daikinTextMaskedField = require("./text-masked-field/daikin-text-masked-field.cjs");
+const daikinTimePicker = require("./time-picker/daikin-time-picker.cjs");
 const daikinToastNotification = require("./toast-notification/daikin-toast-notification.cjs");
 const daikinToastNotificationManager = require("./toast-notification-manager/daikin-toast-notification-manager.cjs");
 const daikinToggle = require("./toggle/daikin-toggle.cjs");
@@ -108,6 +113,15 @@ Object.defineProperty(exports, "DaikinCheckboxGroup", {
   enumerable: true,
   get: () => daikinCheckboxGroup.DaikinCheckboxGroup
 });
+Object.defineProperty(exports, "DaikinChip", {
+  enumerable: true,
+  get: () => daikinChip.DaikinChip
+});
+Object.defineProperty(exports, "DaikinCombobox", {
+  enumerable: true,
+  get: () => daikinCombobox.DaikinCombobox
+});
+exports.defaultFilterFn = daikinCombobox.defaultFilterFn;
 Object.defineProperty(exports, "DaikinDatePicker", {
   enumerable: true,
   get: () => daikinDatePicker.DaikinDatePicker
@@ -193,6 +207,10 @@ Object.defineProperty(exports, "DaikinRadio", {
   enumerable: true,
   get: () => daikinRadio.DaikinRadio
 });
+Object.defineProperty(exports, "DaikinRadioGroup", {
+  enumerable: true,
+  get: () => daikinRadioGroup.DaikinRadioGroup
+});
 Object.defineProperty(exports, "DaikinSelect", {
   enumerable: true,
   get: () => daikinSelect.DaikinSelect
@@ -233,6 +251,24 @@ Object.defineProperty(exports, "DaikinTextField", {
   enumerable: true,
   get: () => daikinTextField.DaikinTextField
 });
+Object.defineProperty(exports, "DaikinTextMaskedField", {
+  enumerable: true,
+  get: () => daikinTextMaskedField.DaikinTextMaskedField
+});
+Object.defineProperty(exports, "DaikinTimePicker", {
+  enumerable: true,
+  get: () => daikinTimePicker.DaikinTimePicker
+});
+exports.calcDigitInput = daikinTimePicker.calcDigitInput;
+exports.formatPartsForUI = daikinTimePicker.formatPartsForUI;
+exports.formatTimeForUI = daikinTimePicker.formatTimeForUI;
+exports.from24HourFormat = daikinTimePicker.from24HourFormat;
+exports.getTimeItemInSelection = daikinTimePicker.getTimeItemInSelection;
+exports.isTimeOutOfRange = daikinTimePicker.isTimeOutOfRange;
+exports.isValidValueTime = daikinTimePicker.isValidValueTime;
+exports.parsePartsFromUIValue = daikinTimePicker.parsePartsFromUIValue;
+exports.to24HourFormat = daikinTimePicker.to24HourFormat;
+exports.tryParseTimeFromUIValue = daikinTimePicker.tryParseTimeFromUIValue;
 Object.defineProperty(exports, "DaikinToastNotification", {
   enumerable: true,
   get: () => daikinToastNotification.DaikinToastNotification

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

@@ -12,6 +12,8 @@ export * from "./carousel/index.cjs";
 export * from "./carousel-item/index.cjs";
 export * from "./checkbox/index.cjs";
 export * from "./checkbox-group/index.cjs";
+export * from "./chip/index.cjs";
+export * from "./combobox/index.cjs";
 export * from "./date-picker/index.cjs";
 export * from "./dropdown/index.cjs";
 export * from "./dropdown-item/index.cjs";
@@ -33,6 +35,7 @@ export * from "./progress-bar/index.cjs";
 export * from "./progress-indicator/index.cjs";
 export * from "./progress-indicator-item/index.cjs";
 export * from "./radio/index.cjs";
+export * from "./radio-group/index.cjs";
 export * from "./select/index.cjs";
 export * from "./slider/index.cjs";
 export * from "./tab/index.cjs";
@@ -43,6 +46,8 @@ export * from "./table-header-cell/index.cjs";
 export * from "./tabs/index.cjs";
 export * from "./text-area/index.cjs";
 export * from "./text-field/index.cjs";
+export * from "./text-masked-field/index.cjs";
+export * from "./time-picker/index.cjs";
 export * from "./toast-notification/index.cjs";
 export * from "./toast-notification-manager/index.cjs";
 export * from "./toggle/index.cjs";

package/dist/cjs/components/input-group/daikin-input-group.cjs

@@ -184,7 +184,7 @@ __decorateClass([
 ], exports.DaikinInputGroup.prototype, "_textareas", 2);
 __decorateClass([
   decorators_js.queryAssignedElements({
-    selector: "daikin-date-picker,daikin-dropdown,daikin-radio-group,daikin-checkbox-group,daikin-select,daikin-text-field,daikin-text-area"
+    selector: "daikin-checkbox-group,daikin-combobox,daikin-date-picker,daikin-dropdown,daikin-radio-group,daikin-select,daikin-text-area,daikin-text-field,daikin-time-picker"
   })
 ], exports.DaikinInputGroup.prototype, "_controls", 2);
 __decorateClass([

package/dist/cjs/components/input-group/daikin-input-group.d.cts

@@ -5,12 +5,15 @@ import { DDSElement } from "../../base/index.cjs";
  * This component is particularly useful for creating complex forms where clear communication and guidance are essential.
  *
  * Hierarchies:
+ * - `daikin-input-group` > `daikin-checkbox-group` > `daikin-checkbox`
+ * - `daikin-input-group` > `daikin-combobox`
  * - `daikin-input-group` > `daikin-date-picker`
  * - `daikin-input-group` > `daikin-dropdown` > `daikin-dropdown-item`
  * - `daikin-input-group` > `daikin-radio-group` > `daikin-radio`
  * - `daikin-input-group` > `daikin-select`
  * - `daikin-input-group` > `daikin-text-area`
  * - `daikin-input-group` > `daikin-text-field`
+ * - `daikin-input-group` > `daikin-time-picker`
  *
  * @slot - A slot for an input component. See **Hierarchies** for supported components.
  *
@@ -19,14 +22,43 @@ import { DDSElement } from "../../base/index.cjs";
  * ```js
  * import "@daikin-oss/design-system-web-components/components/input-group/index.js";
  * <!-- Import the following as necessary. -->
+ * import "@daikin-oss/design-system-web-components/components/checkbox-group/index.js";
+ * import "@daikin-oss/design-system-web-components/components/checkbox/index.js";
+ * import "@daikin-oss/design-system-web-components/components/combobox/index.js";
  * import "@daikin-oss/design-system-web-components/components/date-picker/index.js";
  * import "@daikin-oss/design-system-web-components/components/dropdown/index.js";
  * import "@daikin-oss/design-system-web-components/components/dropdown-item/index.js";
- * import "@daikin-oss/design-system-web-components/components/radio/index.js";
  * import "@daikin-oss/design-system-web-components/components/radio-group/index.js";
+ * import "@daikin-oss/design-system-web-components/components/radio/index.js";
  * import "@daikin-oss/design-system-web-components/components/select/index.js";
  * import "@daikin-oss/design-system-web-components/components/text-area/index.js";
  * import "@daikin-oss/design-system-web-components/components/text-field/index.js";
+ * import "@daikin-oss/design-system-web-components/components/time-picker/index.js";
+ * ```
+ *
+ * With Checkbox Group:
+ *
+ * ```html
+ * <daikin-input-group>
+ *   <daikin-checkbox-group>
+ *     <daikin-checkbox name="name1" value="value1" label="Checkbox Item 1"></daikin-checkbox>
+ *     <daikin-checkbox name="name2" value="value2" label="Checkbox Item 2"></daikin-checkbox>
+ *     <daikin-checkbox name="name3" value="value3" label="Checkbox Item 3"></daikin-checkbox>
+ *   </daikin-checkbox-group>
+ * </daikin-input-group>
+ * ```
+ *
+ * With Combobox:
+ *
+ * ```html
+ * <daikin-input-group>
+ *   <daikin-combobox></daikin-combobox>
+ * </daikin-input-group>
+ *
+ * <script>
+ *   const combobox = document.querySelector("daikin-combobox");
+ *   combobox.items = ["Apple", "Banana", "Cherry"];
+ * </script>
  * ```
  *
  * With Date Picker:
@@ -67,18 +99,6 @@ import { DDSElement } from "../../base/index.cjs";
  * </daikin-input-group>
  * ```
  *
- * With Checkbox Group:
- *
- * ```html
- * <daikin-input-group>
- *   <daikin-checkbox-group>
- *     <daikin-checkbox name="name1" value="value1" label="Checkbox Item 1"></daikin-checkbox>
- *     <daikin-checkbox name="name2" value="value2" label="Checkbox Item 2"></daikin-checkbox>
- *     <daikin-checkbox name="name3" value="value3" label="Checkbox Item 3"></daikin-checkbox>
- *   </daikin-checkbox-group>
- * </daikin-input-group>
- * ```
- *
  * With Select:
  *
  * ```html
@@ -108,6 +128,13 @@ import { DDSElement } from "../../base/index.cjs";
  *   <daikin-text-area value="Content of TextArea"></daikin-text-area>
  * </daikin-input-group>
  * ```
+ *
+ * With Time Picker:
+ *
+ * ```html
+ * <daikin-input-group>
+ *   <daikin-time-picker></daikin-time-picker>
+ * </daikin-input-group>
  * ```
  */
 export declare class DaikinInputGroup extends DDSElement {

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

@@ -55,7 +55,7 @@ const WRAPPER = classVarianceAuthority.cva([
   "relative",
   "break-all"
 ])();
-const cvaIcon = classVarianceAuthority.cva(["icon-size-6"], {
+const cvaIcon = classVarianceAuthority.cva(["icon-size-6", "slotted:flex-none"], {
   variants: {
     position: {
       left: [],
@@ -97,7 +97,7 @@ exports.DaikinListItem = class DaikinListItem extends ddsElement.DDSElement {
         name="left-icon"
         class=${cvaIcon({ disabled: this.disabled, position: "left" })}
       >
-        <span class="block -ml-1"></span>
+        <span class="flex-none block -ml-1"></span>
       </slot>
       <slot class=${cvaContent({ disabled: this.disabled })}></slot>
     </span>`;

package/dist/cjs/components/modal-header/daikin-modal-header.cjs

@@ -31,7 +31,7 @@ const cvaTitle = classVarianceAuthority.cva([
 ])();
 const cvaDescription = classVarianceAuthority.cva([
   "flex-none",
-  "text-ddt-color-common-text-secondary",
+  "text-ddt-color-common-text-primary",
   "font-daikinSerif",
   "text-base",
   "leading-normal",

package/dist/cjs/components/progress-bar/daikin-progress-bar.cjs

@@ -83,9 +83,9 @@ const cvaBarContainer = classVarianceAuthority.cva(
 const cvaHelper = classVarianceAuthority.cva(["text-sm", "leading-[130%]"], {
   variants: {
     variant: {
-      inprogress: ["text-ddt-color-common-text-primary"],
-      completed: ["text-ddt-color-common-text-primary"],
-      indeterminate: ["text-ddt-color-common-text-primary"],
+      inprogress: ["text-ddt-color-common-text-secondary"],
+      completed: ["text-ddt-color-common-text-secondary"],
+      indeterminate: ["text-ddt-color-common-text-secondary"],
       error: ["text-ddt-color-common-danger-default", "font-bold"]
     },
     visible: {

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

@@ -23,7 +23,7 @@ const cvaSelect = classVarianceAuthority.cva(
     "w-full",
     "h-full",
     "relative",
-    "after:i-daikin-dropdown-chevron-down",
+    "after:i-daikin-chevron-down",
     "after:w-6",
     "after:h-6",
     "after:m-auto",
@@ -150,6 +150,11 @@ exports.DaikinSelect.styles = lit.css`
       background: transparent;
     }
 
+    ::slotted(select) {
+      background-color: var(--dds-color-common-surface-default) !important;
+      color: var(--ddt-color-common-text-primary) !important;
+    }
+
     ${lit.unsafeCSS(tailwind.default)}
 
     :host {

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

@@ -92,6 +92,7 @@ exports.DaikinTab = class DaikinTab extends ddsElement.DDSElement {
   render() {
     return lit.html`
       <button
+        type="button"
         class=${cvaTab({ active: this.active })}
         ?disabled=${this.disabled}
         role="tab"

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

@@ -57,8 +57,8 @@ exports.DaikinTable = class DaikinTable extends ddsElement.DDSElement {
     this.selectable = false;
     this.sortable = false;
     this.selection = [];
-    this.order = null;
     this.sort = null;
+    this.order = null;
     this.sortFunction = null;
     this._bulkRowsCheckState = "unchecked";
     this._currentView = [];
@@ -134,28 +134,47 @@ exports.DaikinTable = class DaikinTable extends ddsElement.DDSElement {
     const selectionCount = this.selection.length;
     this._bulkRowsCheckState = this._currentView.length === selectionCount ? "checked" : selectionCount ? "indeterminate" : "unchecked";
   }
+  _reflectSlotProperties() {
+    var _a;
+    for (const { key } of this.headers) {
+      const headerCell = (_a = (this.shadowRoot ?? this).querySelector(
+        `slot[name="header:${CSS.escape(String(key))}"]`
+      )) == null ? void 0 : _a.assignedElements()[0];
+      if ((headerCell == null ? void 0 : headerCell.tagName) !== "DAIKIN-TABLE-HEADER-CELL") {
+        continue;
+      }
+      headerCell.order = this.sort === key ? this.order : null;
+    }
+  }
+  _handleSlotChange() {
+    this._reflectSlotProperties();
+  }
   render() {
     const createHeaderRow = () => repeat_js.repeat(
       this.headers,
       ({ key }) => key,
-      ({ key, label, alignment, sortable }) => lit.html`<th
+      ({ key, label, alignment, sortable }) => {
+        const currentSort = this.sortable && this.sort === key ? this.order === "asc" ? "ascending" : "descending" : void 0;
+        return lit.html`<th
             class="h-full p-0"
-            aria-sort=${ifDefined_js.ifDefined(
-        this.sortable && this.sort === key ? this.order === "asc" ? "ascending" : "descending" : void 0
-      )}
+            aria-sort=${ifDefined_js.ifDefined(currentSort)}
           >
             <slot
               name=${`header:${key}`}
+              data-key=${key}
               @change-sort=${(event) => this._handleClickSort(event, key)}
+              @slotchange=${this._handleSlotChange}
             >
               <daikin-table-header-cell
                 alignment=${alignment ?? "left"}
                 ?sortable=${this.sortable && sortable}
+                order=${ifDefined_js.ifDefined(currentSort && this.order)}
               >
                 ${label}
               </daikin-table-header-cell>
             </slot>
-          </th>`
+          </th>`;
+      }
     );
     const createRow = (item) => repeat_js.repeat(
       this.headers,
@@ -228,7 +247,7 @@ exports.DaikinTable = class DaikinTable extends ddsElement.DDSElement {
     </div>`;
   }
   willUpdate(changedProperties) {
-    const viewChanged = changedProperties.has("rows") || changedProperties.has("sort") || changedProperties.has("order") || changedProperties.has("sortFunction");
+    const viewChanged = changedProperties.has("headers") || changedProperties.has("rows") || changedProperties.has("sort") || changedProperties.has("order") || changedProperties.has("sortFunction");
     const selectionChanged = changedProperties.has("selection");
     if (viewChanged) {
       this._updateCurrentView();
@@ -238,8 +257,10 @@ exports.DaikinTable = class DaikinTable extends ddsElement.DDSElement {
     }
   }
   updated(changedProperties) {
-    if (changedProperties.has("headers")) ;
-    if (changedProperties.has("rows")) ;
+    const sortChanged = changedProperties.has("headers") || changedProperties.has("sort") || changedProperties.has("order");
+    if (sortChanged) {
+      this._reflectSlotProperties();
+    }
   }
 };
 exports.DaikinTable.styles = lit.css`
@@ -248,7 +269,7 @@ exports.DaikinTable.styles = lit.css`
     :host {
       display: block;
       width: 100%;
-      overflow: scroll;
+      overflow: auto;
     }
   `;
 __decorateClass([
@@ -268,10 +289,10 @@ __decorateClass([
 ], exports.DaikinTable.prototype, "selection", 2);
 __decorateClass([
   decorators_js.property({ type: String, reflect: true })
-], exports.DaikinTable.prototype, "order", 2);
+], exports.DaikinTable.prototype, "sort", 2);
 __decorateClass([
   decorators_js.property({ type: String, reflect: true })
-], exports.DaikinTable.prototype, "sort", 2);
+], exports.DaikinTable.prototype, "order", 2);
 __decorateClass([
   decorators_js.property({ attribute: false })
 ], exports.DaikinTable.prototype, "sortFunction", 2);