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

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

@@ -6,7 +6,7 @@ import { createRef, ref } from "lit/directives/ref.js";
 import { repeat } from "lit/directives/repeat.js";
 import { DDSElement } from "../../base/dds-element.js";
 import "../../base/dds-form-element.js";
-import { property } from "../../base/dds-property.js";
+import { property, oneOf } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
@@ -23,11 +23,31 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
+const getColumnPartName = (key) => `column-${key.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
+const getRowPartName = (id) => `row-${id.replace(/[^a-zA-Z0-9_-]/g, "-")}`;
 const defaultSort = (a, b, key) => String(a[key]).localeCompare(String(b[key]));
+const cvaTableHeaderCell = cva(["h-full", "p-0"], {
+  variants: {
+    hoverEnabled: {
+      false: [],
+      true: ["hover:bg-ddt-color-common-surface-hover"]
+    },
+    sortable: {
+      false: [],
+      true: [
+        "active:bg-ddt-color-common-surface-press",
+        "focus-within:outline-solid",
+        "focus-within:outline-2",
+        "focus-within:-outline-offset-2",
+        "focus-within:outline-ddt-color-common-border-focus"
+      ]
+    }
+  }
+});
 const cvaRow = cva(
   [
     "border-b",
-    "border-b-ddt-color-divider",
+    "border-b-(--ddc-table-border-color)",
     "focus-visible:outline-solid",
     "focus-visible:outline-2",
     "focus-visible:-outline-offset-2",
@@ -37,6 +57,7 @@ const cvaRow = cva(
     variants: {
       selected: {
         false: [
+          "bg-ddt-color-common-surface-default",
           "hover:group-[:not([data-hover])]:bg-ddt-color-common-surface-hover",
           "data-hover:bg-ddt-color-common-surface-hover"
         ],
@@ -56,6 +77,8 @@ let DaikinTable = class extends DDSElement {
     this.rows = [];
     this.selectable = false;
     this.sortable = false;
+    this.border = "underline";
+    this.stickyHeader = false;
     this.selection = [];
     this.sort = null;
     this.order = null;
@@ -154,12 +177,19 @@ let DaikinTable = class extends DDSElement {
       this.headers,
       ({ key }) => key,
       ({ key, label, alignment, sortable }) => {
-        const currentSort = this.sortable && this.sort === key ? this.order === "asc" ? "ascending" : "descending" : void 0;
+        const isSortableHeader = this.sortable && sortable;
+        const isHeaderHoverEnabled = isSortableHeader;
+        const currentSort = isSortableHeader && this.sort === key ? this.order === "asc" ? "ascending" : "descending" : void 0;
         return html`<th
-            class="h-full p-0"
+            class=${cvaTableHeaderCell({
+          hoverEnabled: isHeaderHoverEnabled,
+          sortable: isSortableHeader
+        })}
+            part=${`header cell ${getColumnPartName(String(key))}`}
             aria-sort=${ifDefined(currentSort)}
           >
             <slot
+              class="block h-full"
               name=${`header:${key}`}
               data-key=${key}
               @change-sort=${(event) => this._handleClickSort(event, key)}
@@ -167,7 +197,7 @@ let DaikinTable = class extends DDSElement {
             >
               <daikin-table-header-cell
                 alignment=${alignment ?? "left"}
-                ?sortable=${this.sortable && sortable}
+                ?sortable=${isSortableHeader}
                 order=${ifDefined(currentSort && this.order)}
               >
                 ${label}
@@ -176,10 +206,20 @@ let DaikinTable = class extends DDSElement {
           </th>`;
       }
     );
-    const createRow = (item) => repeat(
+    const createRow = (item, isOddRow, isSelectedRow) => repeat(
       this.headers,
       ({ key }) => `${item.id}:${key}`,
-      ({ key, alignment }) => html`<td class="h-full p-0">
+      ({ key, alignment }) => html`<td
+            class="h-full p-0"
+            part=${[
+        "body",
+        "cell",
+        getRowPartName(String(item.id)),
+        getColumnPartName(String(key)),
+        isSelectedRow ? "selected" : null,
+        isOddRow ? "odd" : null
+      ].filter((partName) => !!partName).join(" ")}
+          >
             <slot name=${`cell:${item.id}:${key}`}>
               <daikin-table-cell alignment=${alignment ?? "left"}>
                 ${item[key]}
@@ -194,10 +234,13 @@ let DaikinTable = class extends DDSElement {
         ?data-hover=${this._currentTouchHoverRowId != null}
       >
         <thead>
-          <tr class="border-b border-b-ddt-color-divider">
+          <tr
+            class="border-b border-b-(--ddc-table-border-color)"
+            part="header row"
+          >
             ${this.selectable ? html`<td class="w-12 p-0">
                   <span
-                    class="flex items-center justify-center size-full min-h-12"
+                    class="flex items-center justify-center size-full min-h-(--dds-input-height)"
                   >
                     <daikin-checkbox
                       name="allItem"
@@ -226,16 +269,35 @@ let DaikinTable = class extends DDSElement {
           ${repeat(
       this._currentView,
       ({ id }) => id,
-      (row) => html`<tr
+      (row, index) => {
+        const isOddRow = index % 2 === 0;
+        const isSelectedRow = this.selectable && this.selection.includes(row.id);
+        return html`<tr
                 class=${cvaRow({
-        selected: this.selectable && !!this.selection.find((id) => id === row.id)
-      })}
+          selected: isSelectedRow
+        })}
+                part=${[
+          "body",
+          "row",
+          getRowPartName(String(row.id)),
+          isSelectedRow ? "selected" : null
+        ].filter((partName) => !!partName).join(" ")}
                 data-id=${row.id}
                 ?data-hover=${this._currentTouchHoverRowId === row.id}
               >
-                ${this.selectable ? html`<td class="w-12 p-0">
+                ${this.selectable ? html`<td
+                      class="w-12 p-0"
+                      part=${[
+          "body",
+          "cell",
+          "checkbox-cell",
+          getRowPartName(String(row.id)),
+          isSelectedRow ? "selected" : null,
+          isOddRow ? "odd" : null
+        ].filter((partName) => !!partName).join(" ")}
+                    >
                       <span
-                        class="flex justify-center items-center size-full min-h-12"
+                        class="flex justify-center items-center size-full min-h-(--dds-input-height)"
                       >
                         <daikin-checkbox
                           name=${row.id}
@@ -246,8 +308,9 @@ let DaikinTable = class extends DDSElement {
                         ></daikin-checkbox>
                       </span>
                     </td>` : nothing}
-                ${createRow(row)}
-              </tr>`
+                ${createRow(row, isOddRow, isSelectedRow)}
+              </tr>`;
+      }
     )}
         </tbody>
       </table>
@@ -276,7 +339,25 @@ DaikinTable.styles = css`
     :host {
       display: block;
       width: 100%;
-      overflow: auto;
+      overflow-x: auto;
+      overflow-y: visible;
+      --ddc-table-border-color: var(--dds-color-divider);
+    }
+
+    :host([border="none"]) {
+      --ddc-table-border-color: transparent;
+    }
+
+    :host([sticky-header]) {
+      overflow: visible;
+    }
+
+    :host([sticky-header]) thead tr > th,
+    :host([sticky-header]) thead tr > td {
+      position: sticky;
+      top: var(--table-sticky-header-top, 0px);
+      z-index: 1;
+      background-color: var(--dds-color-common-surface-default);
     }
   `;
 __decorateClass([
@@ -291,6 +372,17 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinTable.prototype, "sortable", 2);
+__decorateClass([
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "underline",
+    isAllowedValue: oneOf(["none", "underline"])
+  })
+], DaikinTable.prototype, "border", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "sticky-header" })
+], DaikinTable.prototype, "stickyHeader", 2);
 __decorateClass([
   property({ type: Array, attribute: false })
 ], DaikinTable.prototype, "selection", 2);

package/dist/es/components/table-cell/daikin-table-cell.js

@@ -23,9 +23,9 @@ const cvaCell = cva(
     "gap-1",
     "justify-center",
     "size-full",
-    "min-h-12",
-    "px-4",
-    "py-3",
+    "px-(--dds-space-400)",
+    "py-(--dds-padding-30)",
+    "text-(length:--dds-font-size-label-text)",
     "text-ddt-color-common-text-primary",
     "natural-break"
   ],
@@ -56,7 +56,6 @@ DaikinTableCell.styles = css`
     :host {
       display: block;
       width: 100%;
-      min-height: 3rem;
     }
   `;
 __decorateClass([

package/dist/es/components/table-header-cell/daikin-table-header-cell.js

@@ -23,9 +23,10 @@ const cvaHeaderCell = cva(
     "items-center",
     "gap-2",
     "size-full",
-    "min-h-12",
-    "px-4",
-    "py-2",
+    "px-(--dds-space-400)",
+    "py-(--dds-padding-30)",
+    "text-(length:--dds-font-size-label-text)",
+    "leading-normal",
     "text-ddt-color-common-text-primary",
     "font-bold",
     "natural-break"
@@ -39,16 +40,7 @@ const cvaHeaderCell = cva(
       },
       sortable: {
         false: [],
-        true: [
-          "hover:bg-ddt-color-common-surface-hover",
-          "active:bg-ddt-color-common-surface-press",
-          "focus-visible:outline-solid",
-          "focus-visible:outline-2",
-          "focus-visible:-outline-offset-2",
-          "focus-visible:outline-ddt-color-common-border-focus",
-          "after:flex-none",
-          "after:size-6"
-        ]
+        true: ["after:flex-none", "after:size-(--dds-icon)"]
       },
       order: {
         asc: [],
@@ -91,20 +83,34 @@ let DaikinTableHeaderCell = class extends DDSElement {
     (_a = this._focusableRef.value) == null ? void 0 : _a.focus(options);
   }
   render() {
+    const rootNode = this.getRootNode();
+    const rootHost = rootNode instanceof ShadowRoot ? rootNode.host : null;
+    const isInDaikinTable = !!this.closest("daikin-table") || (rootHost == null ? void 0 : rootHost.tagName) === "DAIKIN-TABLE";
     const headerCellCN = cvaHeaderCell({
       alignment: this.alignment,
       sortable: this.sortable,
       order: this.order === "asc" || this.order === "desc" ? this.order : null
     });
+    const sortableInteractionCN = this.sortable && !isInDaikinTable ? "hover:bg-ddt-color-common-surface-hover active:bg-ddt-color-common-surface-press focus-visible:outline-solid focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ddt-color-common-border-focus" : "";
+    const suppressNativeFocusRingCN = isInDaikinTable ? "focus:outline-none focus-visible:outline-none" : "";
     const content = html`<slot
         name="left-icon"
-        class="flex-none slotted:flex-none icon-size-6"
+        class="flex-none slotted:flex-none icon-size-token"
       ></slot
       ><slot></slot>`;
     return this.sortable ? html`<button
           ${ref(this._focusableRef)}
           type="button"
-          class=${headerCellCN}
+          class=${[
+      headerCellCN,
+      sortableInteractionCN,
+      suppressNativeFocusRingCN
+    ].filter((className) => !!className).join(" ")}
+          @mousedown=${(event) => {
+      if (isInDaikinTable) {
+        event.preventDefault();
+      }
+    }}
           @click=${() => this.dispatchEvent(new Event("change-sort", { bubbles: true }))}
         >
           ${content}

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

@@ -4,6 +4,8 @@ import { DDSElement } from "../../base/index.js";
  *
  * @fires remove - A custom event emitted when a user clicks the remove button.
  *
+ * @csspart tag - Targets the internal <span> element wrapping the tag. This is typically used to control the tag's styling and interactivity. For example, you can adjust spacing and customize the cursor appearance during dragging: daikin-tag::part(tag) { margin: -4px; padding: 4px; cursor: grab; } daikin-tag::part(tag):active { cursor: grabbing; }
+ *
  * @slot - A slot for the tag content.
  *
  * @example
@@ -26,6 +28,18 @@ export declare class DaikinTag extends DDSElement {
      * Provides an accessible name of the tag.
      */
     tagAriaLabel: string | null;
+    /**
+     * Specify the color of the tag.
+     *
+     * @default "gray"
+     */
+    color: "gray" | "red" | "blue" | "yellow" | "green" | "orange" | "purple";
+    /**
+     * Whether the tag has a shadow to indicate elevation.
+     *
+     * @default false
+     */
+    elevated: boolean;
     /**
      * Provides an accessible name of the remove button.
      */

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

@@ -4,7 +4,7 @@ import { query } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { DDSElement } from "../../base/dds-element.js";
 import "../../base/dds-form-element.js";
-import { property } from "../../base/dds-property.js";
+import { property, oneOf } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
@@ -18,35 +18,53 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const cvaWrapper = cva([
-  "flex",
-  "items-center",
-  "justify-between",
-  "rounded",
-  "overflow-hidden",
-  "size-full",
-  "gap-1",
-  "bg-(--dds-color-common-surface-secondary-default)"
-]);
+const cvaWrapper = cva(
+  [
+    "flex",
+    "items-center",
+    "justify-between",
+    "rounded",
+    "overflow-hidden",
+    "size-full",
+    "gap-1",
+    "bg-(--bg-color-base)"
+  ],
+  {
+    variants: {
+      elevated: {
+        true: [
+          "shadow-[0px_1px_2px_1px_var(--dds-color-common-background-overlay)]"
+        ],
+        false: []
+      }
+    }
+  }
+);
 const cvaRemoveButton = cva([
   "mr-1",
+  "flex-none",
+  "relative",
   "w-6",
   "h-6",
   "flex",
-  "flex-none",
   "items-center",
   "justify-center",
   "rounded-full",
   "overflow-hidden",
-  "focus-visible:outline-solid",
+  "focus-visible:outline",
   "focus-visible:outline-2",
+  "after:absolute",
+  "after:bg-transparent",
+  "after:size-6",
+  "after:top-1/2",
+  "after:left-1/2",
+  "after:-translate-x-1/2",
+  "after:-translate-y-1/2",
+  "after:rounded-full",
   "focus-visible:outline-ddt-color-common-border-focus",
-  "enabled:[--color-primary:var(--dds-color-common-neutral-default)]",
-  "enabled:hover:[--color-primary:var(--dds-color-common-neutral-hover)]",
-  "enabled:active:[--color-primary:var(--dds-color-common-neutral-press)]",
-  "enabled:[--color-secondary:var(--dds-color-common-surface-secondary-default)]",
-  "enabled:hover:[--color-secondary:var(--dds-color-common-surface-secondary-hover)]",
-  "enabled:active:[--color-secondary:var(--dds-color-common-surface-secondary-press)]",
+  "enabled:[--color-primary:var(--dds-color-common-text-primary)]",
+  "enabled:hover:[--color-secondary:var(--dds-color-common-surface-neutral-overlay-hover)]",
+  "enabled:active:[--color-secondary:var(--dds-color-common-surface-neutral-overlay-press)]",
   "text-(--color-primary)",
   "bg-(--color-secondary)"
 ]);
@@ -55,6 +73,7 @@ let DaikinTag = class extends DDSElement {
     super(...arguments);
     this.hideRemoveButton = false;
     this.tagAriaLabel = null;
+    this.elevated = false;
     this.removeButtonAriaLabel = null;
   }
   _handleRemoveClick(event) {
@@ -64,9 +83,10 @@ let DaikinTag = class extends DDSElement {
   render() {
     return html`
       <div
+        part="tag"
         role="group"
         aria-label=${ifDefined(this.tagAriaLabel ?? void 0)}
-        class=${cvaWrapper()}
+        class=${cvaWrapper({ elevated: this.elevated })}
       >
         <span
           class="text-ddt-color-common-text-primary p-2 text-(length:--dds-font-size-350) natural-break"
@@ -80,7 +100,9 @@ let DaikinTag = class extends DDSElement {
                 aria-label=${ifDefined(this.removeButtonAriaLabel ?? "Remove")}
                 @click=${this._handleRemoveClick}
               >
-                <span class="icon-[daikin--close] size-6"></span>
+                <span
+                  class="icon-[daikin--close] text-(--color-primary) size-6 flex-none"
+                ></span>
               </button>
             `}
       </div>
@@ -101,6 +123,52 @@ DaikinTag.styles = css`
     :host {
       display: block;
       width: fit-content;
+      --bg-color-base: var(--dds-color-common-accent-lv2-base-gray);
+    }
+
+    :host([color="gray"]) {
+      --bg-color-base: var(--dds-color-common-accent-lv2-base-gray);
+    }
+    :host([color="red"]) {
+      --bg-color-base: var(--dds-color-common-accent-lv2-base-red);
+    }
+    :host([color="blue"]) {
+      --bg-color-base: var(--dds-color-common-accent-lv2-base-blue);
+    }
+    :host([color="yellow"]) {
+      --bg-color-base: var(--dds-color-common-accent-lv2-base-yellow);
+    }
+    :host([color="green"]) {
+      --bg-color-base: var(--dds-color-common-accent-lv2-base-green);
+    }
+    :host([color="orange"]) {
+      --bg-color-base: var(--dds-color-common-accent-lv2-base-orange);
+    }
+    :host([color="purple"]) {
+      --bg-color-base: var(--dds-color-common-accent-lv2-base-purple);
+    }
+
+    :host([elevated]),
+    :host([elevated][color="gray"]) {
+      --bg-color-base: var(--dds-color-common-accent-lv2-elevated-gray);
+    }
+    :host([elevated][color="red"]) {
+      --bg-color-base: var(--dds-color-common-accent-lv2-elevated-red);
+    }
+    :host([elevated][color="blue"]) {
+      --bg-color-base: var(--dds-color-common-accent-lv2-elevated-blue);
+    }
+    :host([elevated][color="yellow"]) {
+      --bg-color-base: var(--dds-color-common-accent-lv2-elevated-yellow);
+    }
+    :host([elevated][color="green"]) {
+      --bg-color-base: var(--dds-color-common-accent-lv2-elevated-green);
+    }
+    :host([elevated][color="orange"]) {
+      --bg-color-base: var(--dds-color-common-accent-lv2-elevated-orange);
+    }
+    :host([elevated][color="purple"]) {
+      --bg-color-base: var(--dds-color-common-accent-lv2-elevated-purple);
     }
   `;
 __decorateClass([
@@ -109,6 +177,17 @@ __decorateClass([
 __decorateClass([
   property({ type: String, reflect: true, attribute: "tag-aria-label" })
 ], DaikinTag.prototype, "tagAriaLabel", 2);
+__decorateClass([
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "gray",
+    isAllowedValue: oneOf(["gray", "red", "blue", "yellow", "green", "orange", "purple"])
+  })
+], DaikinTag.prototype, "color", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinTag.prototype, "elevated", 2);
 __decorateClass([
   property({
     type: String,

package/dist/es/components/text-area/daikin-text-area.js

@@ -21,8 +21,9 @@ var __decorateClass = (decorators, target, key, kind) => {
 };
 const cvaTextArea = cva(
   [
+    "block",
     "w-full",
-    "h-full",
+    "box-border",
     "bg-ddt-color-common-background-default",
     "px-4",
     "py-3",
@@ -103,6 +104,7 @@ let DaikinTextArea = class extends DDSFormElement {
       error: !this.disabled && this.error,
       resize: this.resizable
     })}
+      style="height: inherit; min-height: inherit;"
       name=${ifDefined(this.getBackingProperty("name"))}
       placeholder=${ifDefined(this.getBackingProperty("placeholder"))}
       autocomplete=${ifDefined(this.getBackingProperty("autocomplete"))}
@@ -130,6 +132,7 @@ let DaikinTextArea = class extends DDSFormElement {
   reflectInputGroup(inputGroup) {
     const isError = !inputGroup.disabled && (!!inputGroup.error || !!inputGroup.textareaLimitExceeded);
     this.disabled = !!inputGroup.disabled;
+    this.readonly = !!inputGroup.readonly;
     this.required = !!inputGroup.required;
     this.error = isError;
     this._label = inputGroup.label;
@@ -140,9 +143,26 @@ DaikinTextArea.styles = css`
 
     :host {
       display: block;
-      height: 5.5rem;
+      min-height: 5.5rem;
       position: relative;
     }
+
+    :host([readonly]:not([disabled])) textarea {
+      --color-base: var(--dds-color-common-surface-secondary);
+      background-color: var(--dds-color-common-surface-secondary);
+    }
+
+    :host([readonly]:not([disabled])) textarea:hover,
+    :host([readonly]:not([disabled])) textarea:active {
+      --color-base: var(--dds-color-common-surface-secondary);
+      background-color: var(--dds-color-common-surface-secondary);
+    }
+
+    :host([readonly][error]:not([disabled])) textarea,
+    :host([readonly][error]:not([disabled])) textarea:hover,
+    :host([readonly][error]:not([disabled])) textarea:active {
+      --color-base: var(--dds-color-common-danger-default);
+    }
   `;
 __decorateClass([
   property({ type: String, reflect: true, fallbackValue: "" })

package/dist/es/components/text-field/daikin-text-field.d.ts

@@ -97,6 +97,15 @@ export declare class DaikinTextField extends DDSFormElement {
      * Interval between values. This is valid when `type="number"`.
      */
     step: string | null;
+    /**
+     * When `type="number"`, whether to allow free input or snap to step boundaries.
+     * - `"free"`: Do not snap to step boundaries; increment/decrement relative to the current value.
+     * - `"snap"`: If the current value is off a step boundary, snap to the next/previous step boundary in the given direction (and finish without applying an extra step).
+     * Note that step boundaries are aligned to the `min` value if specified; otherwise, they are aligned to `0`. For example, with `step="3"`, boundaries are `..., -3, 0, 3, 6, ...`. If `min="-4"` is also set, the boundaries become `-4, -1, 2, 5, ...`.
+     *
+     * @default "free"
+     */
+    stepMode: "free" | "snap";
     /**
      * The minimum value. This is valid when `type="number"`.
      */