@daikin-oss/design-system-web-components 1.6.0 → 2.0.0

package/dist/es/components/select/daikin-select.js

@@ -6,6 +6,7 @@ import "../../base/dds-form-element.js";
 import { property } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
+import { CustomReadonlyController } from "../../controllers/custom-readonly.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -21,26 +22,15 @@ const cvaSelect = cva(
   [
     "block",
     "w-full",
-    "h-full",
     "relative",
-    "after:icon-[daikin--chevron-down]",
-    "after:w-6",
-    "after:h-6",
-    "after:m-auto",
-    "after:absolute",
-    "after:top-0",
-    "after:bottom-0",
-    "after:right-3.25",
-    "after:pointer-events-none",
     "slotted-select:appearance-none!",
     "slotted-select:flex!",
     "slotted-select:items-center!",
     "slotted-select:gap-2!",
     "slotted-select:w-full!",
     "slotted-select:h-full!",
-    "slotted-select:min-h-12!",
-    "slotted-select:pl-4!",
-    "slotted-select:pr-12!",
+    "slotted-select:min-h-(--dds-input-height)!",
+    "slotted-select:pr-[calc(var(--dds-padding-30)+var(--dds-gap-10)+var(--dds-icon))]!",
     "slotted-select:text-base!",
     "slotted-select:border!",
     "slotted-select:border-(--color-base)!",
@@ -51,10 +41,7 @@ const cvaSelect = cva(
     "slotted-select:-outline-offset-2!",
     "slotted-select-focus-visible:outline-2!",
     "slotted-select-focus-visible:outline-(--color-focus)!",
-    "slotted-select-enabled:cursor-pointer!",
     "slotted-select-enabled:text-ddt-color-common-text-primary!",
-    "slotted-select-hover:bg-ddt-color-common-surface-hover!",
-    "slotted-select-active:bg-ddt-color-common-surface-press!",
     "slotted-select-disabled:text-ddt-color-common-disabled!",
     "slotted-select-disabled:border-ddt-color-common-disabled!"
   ],
@@ -64,6 +51,24 @@ const cvaSelect = cva(
         false: ["after:text-ddt-color-common-text-primary"],
         true: ["after:text-ddt-color-common-disabled"]
       },
+      readonly: {
+        false: [
+          "after:icon-[daikin--chevron-down]",
+          "after:size-(--dds-icon)",
+          "after:m-auto",
+          "after:absolute",
+          "after:top-0",
+          "after:bottom-0",
+          "after:right-(--dds-padding-30)",
+          "after:pointer-events-none"
+        ],
+        true: [
+          "slotted-select:[--color-base:var(--dds-color-common-surface-secondary)]",
+          "slotted-select:bg-(--dds-color-common-surface-secondary)!",
+          "slotted-select:hover:bg-(--dds-color-common-surface-secondary)!",
+          "slotted-select:active:bg-(--dds-color-common-surface-secondary)!"
+        ]
+      },
       error: {
         false: [
           "slotted-select-enabled:[--color-base:var(--dds-color-common-neutral-default)]",
@@ -75,6 +80,63 @@ const cvaSelect = cva(
           "[--color-base:var(--dds-color-common-danger-default)]",
           "[--color-focus:var(--dds-color-common-danger-default)]"
         ]
+      },
+      hasLeftIcon: {
+        false: [
+          "slotted-select:pl-[calc(var(--dds-padding-30)+var(--dds-space-100))]!"
+        ],
+        true: [
+          "slotted-select:pl-[calc(var(--dds-padding-30)+var(--dds-gap-10)+var(--dds-icon)+var(--dds-space-100))]!"
+        ]
+      }
+    },
+    compoundVariants: [
+      {
+        readonly: false,
+        disabled: false,
+        class: ["cursor-pointer slotted-select:cursor-pointer"]
+      },
+      {
+        readonly: false,
+        class: [
+          "slotted-select-hover:bg-ddt-color-common-surface-hover!",
+          "slotted-select-active:bg-ddt-color-common-surface-press!"
+        ]
+      },
+      {
+        readonly: true,
+        error: false,
+        class: [
+          "slotted-select-enabled:[--color-base:var(--dds-color-common-surface-secondary)]",
+          "slotted-select-hover:[--color-base:var(--dds-color-common-surface-secondary)]",
+          "slotted-select-active:[--color-base:var(--dds-color-common-surface-secondary)]"
+        ]
+      },
+      {
+        readonly: true,
+        error: true,
+        class: [
+          "slotted-select-enabled:[--color-base:var(--dds-color-common-danger-default)]"
+        ]
+      }
+    ]
+  }
+);
+const cvaLeftIcon = cva(
+  [
+    "absolute",
+    "z-1",
+    "top-1/2",
+    "-translate-y-1/2",
+    "left-(--dds-padding-30)",
+    "shrink-0",
+    "size-(--dds-icon)"
+  ],
+  {
+    variants: {
+      disabled: {
+        false: ["text-ddt-color-common-text-primary"],
+        true: ["text-ddt-color-common-disabled"]
       }
     }
   }
@@ -84,8 +146,30 @@ let DaikinSelect = class extends DDSElement {
     super(...arguments);
     this.error = false;
     this.required = false;
+    this.readonly = false;
     this.disabled = false;
+    this._hasLeftIcon = false;
     this._label = null;
+    this._readonlyController = new CustomReadonlyController(this, {
+      isReadonly: () => this.readonly,
+      isDisabled: () => this.disabled,
+      blockedKeys: [
+        "ArrowUp",
+        "ArrowDown",
+        "ArrowLeft",
+        "ArrowRight",
+        "Home",
+        "End",
+        "PageUp",
+        "PageDown",
+        "Enter",
+        " "
+      ]
+    });
+  }
+  _handleLeftIconSlotChange(event) {
+    const slot = event.target;
+    this._hasLeftIcon = slot.assignedElements().length > 0;
   }
   get _select() {
     return this._selects[0] ?? null;
@@ -93,23 +177,38 @@ let DaikinSelect = class extends DDSElement {
   _updateSelect() {
     const select = this._select;
     if (!select) {
+      this._readonlyController.setTarget(null);
       return;
     }
     select.disabled = this.disabled;
     select.required = this.required;
     select.ariaLabel = this._label;
+    this._readonlyController.setTarget(select);
   }
   _handleSlotChange() {
     this._updateSelect();
   }
   render() {
-    return html`<slot
-      class=${cvaSelect({ disabled: this.disabled, error: this.error })}
-      @slotchange=${this._handleSlotChange}
-    ></slot>`;
+    return html`<span
+        class=${cvaLeftIcon({
+      disabled: this.disabled
+    })}
+        ><slot
+          name="left-icon"
+          @slotchange=${this._handleLeftIconSlotChange}
+        ></slot></span
+      ><slot
+        class=${cvaSelect({
+      disabled: this.disabled,
+      readonly: this.readonly && !this.disabled,
+      error: this.error,
+      hasLeftIcon: this._hasLeftIcon
+    })}
+        @slotchange=${this._handleSlotChange}
+      ></slot>`;
   }
   updated(changedProperties) {
-    if (changedProperties.has("disabled") || changedProperties.has("required")) {
+    if (changedProperties.has("disabled") || changedProperties.has("required") || changedProperties.has("readonly")) {
       this._updateSelect();
     }
   }
@@ -120,6 +219,7 @@ let DaikinSelect = class extends DDSElement {
   reflectInputGroup(inputGroup) {
     const isError = !inputGroup.disabled && !!inputGroup.error;
     this.disabled = !!inputGroup.disabled;
+    this.readonly = !!inputGroup.readonly;
     this.required = !!inputGroup.required;
     this.error = isError;
     this._label = inputGroup.label;
@@ -159,6 +259,7 @@ DaikinSelect.styles = css`
     :host {
       display: block;
       width: 100%;
+      position: relative;
     }
   `;
 __decorateClass([
@@ -167,12 +268,18 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinSelect.prototype, "required", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinSelect.prototype, "readonly", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinSelect.prototype, "disabled", 2);
 __decorateClass([
   queryAssignedElements({ selector: "select" })
 ], DaikinSelect.prototype, "_selects", 2);
+__decorateClass([
+  state()
+], DaikinSelect.prototype, "_hasLeftIcon", 2);
 __decorateClass([
   state()
 ], DaikinSelect.prototype, "_label", 2);

package/dist/es/components/slider/daikin-slider.d.ts

@@ -48,6 +48,10 @@ export declare class DaikinSlider extends DDSFormElement {
      * Specify the slider disabled state.
      */
     disabled: boolean;
+    /**
+     * Whether the slider is readonly.
+     */
+    readonly: boolean;
     /**
      * The aria-label of the slider.
      * You should specify this value based on the slider's use case, such as "air conditioner temperature".

package/dist/es/components/slider/daikin-slider.js

@@ -22,10 +22,21 @@ var __decorateClass = (decorators, target, key, kind) => {
 const cvaWrapper = cva(["relative", "w-full", "h-6"], {
   variants: {
     disabled: {
-      false: ["cursor-pointer"],
+      false: [],
+      true: []
+    },
+    readonly: {
+      false: [],
       true: []
     }
-  }
+  },
+  compoundVariants: [
+    {
+      disabled: false,
+      readonly: false,
+      class: ["cursor-pointer"]
+    }
+  ]
 });
 const cvaSliderThumb = cva(
   [
@@ -33,27 +44,42 @@ const cvaSliderThumb = cva(
     "top-1/2",
     "-translate-x-1/2",
     "-translate-y-1/2",
-    "w-4",
-    "h-4",
-    "rounded-full",
     "left-(--slider-ratio)"
   ],
   {
     variants: {
       disabled: {
         false: [
-          "[&:not([data-dragging])]:bg-ddt-color-common-brand-default",
-          "[&:not([data-dragging])]:hover:bg-ddt-color-common-brand-hover",
-          "[&:not([data-dragging])]:active:bg-ddt-color-common-brand-press",
-          "data-dragging:bg-ddt-color-common-brand-press",
           "focus-visible:outline-solid",
           "focus-visible:outline-2",
           "focus-visible:outline-offset-2",
           "focus-visible:outline-ddt-color-common-border-focus"
         ],
         true: ["bg-ddt-color-common-disabled", "pointer-events-none"]
+      },
+      readonly: {
+        false: ["w-4", "h-4", "rounded-full"],
+        true: [
+          "w-1",
+          "h-3",
+          "rounded-xs",
+          "bg-ddt-color-common-neutral-default",
+          "pointer-events-none"
+        ]
       }
-    }
+    },
+    compoundVariants: [
+      {
+        disabled: false,
+        readonly: false,
+        class: [
+          "[&:not([data-dragging])]:bg-ddt-color-common-brand-default",
+          "[&:not([data-dragging])]:hover:bg-ddt-color-common-brand-hover",
+          "[&:not([data-dragging])]:active:bg-ddt-color-common-brand-press",
+          "data-dragging:bg-ddt-color-common-brand-press"
+        ]
+      }
+    ]
   }
 );
 const cvaSliderTrack = cva(
@@ -70,6 +96,10 @@ const cvaSliderTrack = cva(
       disabled: {
         false: ["bg-ddt-color-common-brand-default"],
         true: ["bg-ddt-color-common-border-empty"]
+      },
+      readonly: {
+        false: [],
+        true: ["bg-ddt-color-common-neutral-default"]
       }
     }
   }
@@ -78,6 +108,7 @@ let DaikinSlider = class extends DDSFormElement {
   constructor() {
     super();
     this.disabled = false;
+    this.readonly = false;
     this._dragging = false;
     this._sliderRef = createRef();
     this._thumbRef = createRef();
@@ -120,7 +151,7 @@ let DaikinSlider = class extends DDSFormElement {
   }
   // This function is called when an arrow key is pressed while the thumb is focused.
   _handleKeyDown(event) {
-    if (this.disabled) {
+    if (this.disabled || this.readonly) {
       return;
     }
     const value = getValueByKeydown(this, event.key);
@@ -150,7 +181,7 @@ let DaikinSlider = class extends DDSFormElement {
   _startDrag(event) {
     var _a;
     event.preventDefault();
-    if (this.disabled) {
+    if (this.disabled || this.readonly) {
       return;
     }
     const controller = new AbortController();
@@ -178,7 +209,7 @@ let DaikinSlider = class extends DDSFormElement {
   _startTouch(event) {
     var _a;
     event.preventDefault();
-    if (this.disabled) {
+    if (this.disabled || this.readonly) {
       return;
     }
     const controller = new AbortController();
@@ -215,7 +246,10 @@ let DaikinSlider = class extends DDSFormElement {
     return html`
       <span
         ${ref(this._sliderRef)}
-        class=${cvaWrapper({ disabled: this.disabled })}
+        class=${cvaWrapper({
+      disabled: this.disabled,
+      readonly: this.readonly && !this.disabled
+    })}
         style="--slider-ratio:${progress}%"
         @mousedown=${this._startDrag}
         @touchstart=${this._startTouch}
@@ -223,10 +257,18 @@ let DaikinSlider = class extends DDSFormElement {
         <span
           class="w-full absolute top-1/2 -translate-y-1/2 left-0 h-1 bg-ddt-color-common-border-empty"
         ></span>
-        <span class=${cvaSliderTrack({ disabled: this.disabled })}></span>
+        <span
+          class=${cvaSliderTrack({
+      disabled: this.disabled,
+      readonly: this.readonly && !this.disabled
+    })}
+        ></span>
         <span
           ${ref(this._thumbRef)}
-          class=${cvaSliderThumb({ disabled: this.disabled })}
+          class=${cvaSliderThumb({
+      disabled: this.disabled,
+      readonly: this.readonly && !this.disabled
+    })}
           tabindex=${this.disabled ? -1 : 0}
           role="slider"
           ?data-dragging=${this._dragging}
@@ -268,6 +310,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinSlider.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinSlider.prototype, "readonly", 2);
 __decorateClass([
   property({
     type: String,

package/dist/es/components/status-message/daikin-status-message.d.ts

@@ -2,6 +2,8 @@ import { DDSElement } from "../../base/index.js";
 /**
  * A status message is a concise UI component for displaying status feedback, notifications, or contextual information to users. It typically indicates success, warning, error, or other states, helping users quickly understand the current state or important updates in the interface.
  *
+ * @csspart status-message - CSS styles applied to the `status-message` part target the internal content container.
+ *
  * @example
  *
  * ```js

package/dist/es/components/status-message/daikin-status-message.js

@@ -69,6 +69,7 @@ let DaikinStatusMessage = class extends DDSElement {
   render() {
     return html`
       <div
+        part="status-message"
         class=${cvaWrapper({ status: this.status, size: this.size })}
         role=${ifDefined(this.statusMessageRole ?? void 0)}
       >

package/dist/es/components/table/daikin-table.d.ts

@@ -29,6 +29,21 @@ export type HeaderType<T extends string = string> = {
  * @slot cell:${rows[j].id}:${headers[i].key} - A slot for the data cell of a table. Use `daikin-table-cell` for the wrapper.
  * @slot empty - A slot to define the content displayed when the table rows are empty. Typically, the `daikin-empty-state` component can be used.
  *
+ * @csspart header - Targets the table header region.
+ * @csspart body - Targets the table body region.
+ * @csspart row - Targets all table rows.
+ * @csspart cell - Targets all table cells.
+ * @csspart row-${row.id} - Targets the specified body row.
+ * @csspart selected - Added to selected body rows and their body cells.
+ * @csspart odd - Added to body cells in odd-numbered rows (1st, 3rd, ...).
+ * @csspart checkbox-cell - Targets body cells in the selectable checkbox column.
+ * @csspart column-${header.key} - Targets both header and body cells for the specified column key. This is typically used to control a specific column's width and text wrapping. For example, you can allow the column to fit content by default, while enforcing min and max width: `daikin-table::part(column-name) { min-width: 12rem; max-width: 20rem; }` and optional truncation: `white-space: nowrap; overflow: hidden; text-overflow: ellipsis;`.
+ *
+ * Background customization is also supported via CSS Parts. You can target an entire row (`row-${row.id} cell`), a specific column (`column-${header.key}`), or a row+column pair (`row-${row.id} column-${header.key}`), then apply design tokens for background colors. Example:
+ * `daikin-table::part(row-2 cell) { background-color: var(--dds-color-common-surface-danger-hover); }`
+ * `daikin-table::part(row-3 column-price) { background-color: var(--dds-color-common-warning); }`
+ * `daikin-table::part(row-2 cell):hover { background-color: var(--dds-color-common-surface-hover); }`
+ *
  * @example
  *
  * ```js
@@ -38,7 +53,32 @@ export type HeaderType<T extends string = string> = {
  * ```
  *
  * ```html
- * <daikin-table>
+ * <!-- Column width can be set on the slotted <daikin-table-header-cell>, or via daikin-table::part(column-${headers[i].key}). -->
+ * <style>
+ *   daikin-table::part(column-price) {
+ *     min-width: 8rem;
+ *     max-width: 10rem;
+ *     white-space: nowrap;
+ *   }
+ *
+ *   .table-status-color-sample::part(row-3 column-price) {
+ *     background-color: var(--dds-color-common-warning);
+ *   }
+ *
+ *   .table-status-color-sample::part(row-2 row):hover {
+ *     --row-2-hover-bg: var(--dds-color-common-surface-danger-press);
+ *   }
+ *
+ *   .table-status-color-sample::part(row-2 cell) {
+ *     background-color: var(--row-2-hover-bg, var(--dds-color-common-surface-danger-hover));
+ *   }
+ * </style>
+ *
+ * <daikin-table class="table-status-color-sample">
+ *   <daikin-table-header-cell slot="header:name" style="min-width: 12rem; max-width: 20rem;">
+ *     Name
+ *   </daikin-table-header-cell>
+ *
  *   <!-- By using a slot, you can add a subtitle below the content in the name column for each row. -->
  *   <daikin-table-cell slot="cell:1:name">
  *     Apple
@@ -118,6 +158,23 @@ export declare class DaikinTable<T extends {
      * When `true`, a sort button will be displayed to the right of each sortable header cell.
      */
     sortable: boolean;
+    /**
+     * The border style of the table row separators.
+     * - "none": Hide all table separator lines.
+     * - "underline": Show table separator lines.
+     *
+     * @default "underline"
+     */
+    border: "none" | "underline";
+    /**
+     * Whether to keep the header row fixed while the body scrolls.
+     *
+     * When `true`, header cells become sticky relative to this component's
+     * nearest scroll container. This works with page scrolling, and also works
+     * with internal scrolling when the host has a constrained height and
+     * `overflow: auto`.
+     */
+    stickyHeader: boolean;
     /**
      * An array of `id` values for the selected rows.
      * When controlling this property externally, listen to the `change-check` event and read the updated `selection` from the component to keep your state in sync.