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

package/dist/cjs-dev/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-dev/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-dev/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-dev/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-dev/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-dev/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-dev/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,20 +257,22 @@ exports.DaikinTable = class DaikinTable extends ddsElement.DDSElement {
     }
   }
   updated(changedProperties) {
-    if (changedProperties.has("headers")) {
-      {
+    {
+      if (changedProperties.has("headers")) {
         if (this.headers.length !== [...new Set(this.headers.map(({ key }) => key))].length) {
           console.warn("The `key` values in `headers` are duplicated");
         }
       }
-    }
-    if (changedProperties.has("rows")) {
-      {
+      if (changedProperties.has("rows")) {
         if (this.rows.length !== [...new Set(this.rows.map(({ id }) => id))].length) {
           console.warn("The `id` values in `rows` are duplicated");
         }
       }
     }
+    const sortChanged = changedProperties.has("headers") || changedProperties.has("sort") || changedProperties.has("order");
+    if (sortChanged) {
+      this._reflectSlotProperties();
+    }
   }
 };
 exports.DaikinTable.styles = lit.css`
@@ -260,7 +281,7 @@ exports.DaikinTable.styles = lit.css`
     :host {
       display: block;
       width: 100%;
-      overflow: scroll;
+      overflow: auto;
     }
   `;
 __decorateClass([
@@ -280,10 +301,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);

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

@@ -9,9 +9,11 @@ export type HeaderType<T extends string = string> = {
 /**
  * The table component is a component that can display multiple data objects in a tabular format.
  *
- * It is modeled on the HTML `<table>` element. However, unlike a normal `<table>` element, this component does not require its child elements to have cells. Instead, it can be made to function as a table by giving the properties `headers` and `rows` appropriate arrays.
+ * It is modeled on the HTML `<table>` element. However, unlike a normal `<table>` element, this component generates table structure automatically from data. You must provide the `headers` and `rows` properties to define the table structure and content. You can also customize table cell content by providing custom content in slots.
  *
- * If the contents of the table are plain text only, give them to the `rows` property. However, if you want to give contents other than text, such as buttons or images, you will need to prepare a element with the corresponding `slot` attribute. The value of this attribute must be structured as follows: ``slot=${`cell:${headers[i].key}:${rows[i].id}`}``
+ * By specifying the `rows` property, you can only display plain text content. If you need to display richer content within the row cells, such as an icon or a button, provide custom content using the cell slot pattern: ``slot=${`cell:${rows[j].id}:${headers[i].key}`}``
+ *
+ * By specifying the headers property, you can only display plain text, define text alignment and sorting buttons. If you need to display richer content within the header cells, such as an icon or a button, provide custom content using the cell slot pattern: ``slot=${`header:${headers[i].key}`}``
  *
  * The table provides two functions: checkboxes and sorting, and you can select the functions you need.
  *
@@ -34,19 +36,8 @@ export type HeaderType<T extends string = string> = {
  * ```
  *
  * ```html
- * <daikin-table
- *   .headers="[
- *     { key: 'name', label: 'Name', sortable: true },
- *     { key: 'season', label: 'Season', sortable: true },
- *     { key: 'price', label: 'Price', alignment: 'right', sortable: false },
- *   ]"
- *   .rows="[
- *     { id: '1', name: 'Apple', season: 'Autumn', price: '$2' },
- *     { id: '2', name: 'Peach', season: 'Summer', price: '$4' },
- *     { id: '3', name: 'Orange', season: 'Winter', price: '$1' },
- *     { id: '4', name: 'Strawberry', season: 'Spring', price: '$4' },
- *   ]"
- * >
+ * <daikin-table>
+ *   <!-- 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
  *     <span slot="subtitle">This is a autumn fruit.</span>
@@ -64,6 +55,22 @@ export type HeaderType<T extends string = string> = {
  *     <span slot="subtitle">This is a spring fruit.</span>
  *   </daikin-table-cell>
  * </daikin-table>
+ *
+ * <script>
+ *   // Set up the table data
+ *   const tableElement = document.querySelector('daikin-table');
+ *   tableElement.headers = [
+ *     { key: 'name', label: 'Name', sortable: true },
+ *     { key: 'season', label: 'Season', sortable: true },
+ *     { key: 'price', label: 'Price', alignment: 'right', sortable: false },
+ *   ];
+ *   tableElement.rows = [
+ *     { id: '1', name: 'Apple', season: 'Autumn', price: '$2' },
+ *     { id: '2', name: 'Peach', season: 'Summer', price: '$4' },
+ *     { id: '3', name: 'Orange', season: 'Winter', price: '$1' },
+ *     { id: '4', name: 'Strawberry', season: 'Spring', price: '$4' },
+ *   ];
+ * </script>
  * ```
  */
 export declare class DaikinTable<T extends {
@@ -72,51 +79,75 @@ export declare class DaikinTable<T extends {
     static readonly styles: import('lit').CSSResult;
     /**
      * Headers of the table.
-     * - key: The value of `key` corresponds to the key, excluding the id of rows. As a whole array, the value of `key` must be unique. Also, only use alphanumeric characters, `$`, and `_` in the `key`.
-     * - label: This is the text that is displayed in the header cells.
-     * - alignment: The direction in which the characters are aligned can be omitted. If it is omitted, the characters will be aligned to the left.
-     * - sortable: If sortable (`sortable = true`), this specifies whether sorting is performed on this column.
+     * An array of header configuration objects that define the table columns.
+     * Each object must have a unique `key` (used to match row data) and a `label` (displayed text).
+     *
+     * - key: The `key` value corresponds to the property name in the row data (excluding `id`). All `key` values must be unique within the headers array. Use only alphanumeric characters, `$`, and `_` in the `key`.
+     * - label: The text displayed in the header cells.
+     * - alignment: The text alignment direction. Defaults to left alignment if omitted.
+     * - sortable: When `sortable = true`, enables sorting for this column.
+     *
+     * @example
+     * [
+     *   { key: 'name', label: 'Name', sortable: true },
+     *   { key: 'price', label: 'Price', alignment: 'right', sortable: false },
+     * ]
      */
     headers: readonly HeaderType<Extract<keyof T, string>>[];
     /**
      * Rows of the table.
-     * An array that uses the element `key` in the column as the key and stores the corresponding value.
-     * As a whole array, the value of `id` should be unique.
+     * An array of data objects where each object represents a table row.
+     * Each object must have a unique `id` property and properties that match the `key` values defined in `headers`.
+     *
+     * @example
+     * [
+     *   { id: '1', name: 'Apple', price: '$2' },
+     *   { id: '2', name: 'Orange', price: '$1' },
+     * ]
      */
     rows: T[];
     /**
-     * Whether or not to enable selection of rows.
-     * If `true`, a checkbox will be displayed to the left of each row.
+     * Whether to enable row selection.
+     * When `true`, a checkbox will be displayed to the left of each row.
      */
     selectable: boolean;
     /**
-     * Whether or not to enable sorting of the rows.
-     * If `true`, a button for sorting will be displayed to the right of each header cell text.
+     * Whether to enable row sorting.
+     * When `true`, a sort button will be displayed to the right of each sortable header cell.
      */
     sortable: boolean;
     /**
-     * An array of `id`s for the `rows` that have been checked.
+     * An array of `id` values for the selected rows.
      */
     selection: string[];
-    /**
-     * Sort order of the table.
-     */
-    order: "asc" | "desc" | null;
     /**
      * The `key` of the currently sorted column.
+     * Used with the `order` property to determine which column is sorted and in which direction.
+     *
+     * For example, if `sort = "name"` and `order = "asc"`, the table will be sorted by the "name" column in ascending order.
      */
     sort: keyof T | null;
     /**
-     * Specify this when you want to customize the sort function.
-     * The function must be ascending, and the return value must be `0`, `1` or `-1`.
+     * The sort order of the table.
+     * Used with the `sort` property.
+     *
+     * - "asc": ascending order
+     * - "desc": descending order
+     *
+     * For example, if `sort = "price"` and `order = "desc"`, the table will be sorted by the "price" column in descending order.
+     */
+    order: "asc" | "desc" | null;
+    /**
+     * Custom sort function for table columns.
+     * The function should return a comparison result for ascending order: `0`, `1`, or `-1`.
      */
     sortFunction: {
         [key in keyof T]?: (a: T, b: T, key: key) => number;
     } | ((a: T, b: T, key: keyof T) => number) | false | null;
     private _bulkRowsCheckState;
     /**
-     * The rows displayed in the current table.
-     * Currently this is a sorted `rows`, but pagination may be considered in the future.
+     * The rows currently displayed in the table.
+     * This is a sorted version of `rows`. Pagination may be added in the future.
      */
     private _currentView;
     private _currentTouchHoverRowId;
@@ -130,6 +161,8 @@ export declare class DaikinTable<T extends {
     private _handleTouchStart;
     private _handleTouchEnd;
     private _updateHeaderCheckboxState;
+    private _reflectSlotProperties;
+    private _handleSlotChange;
     render(): import('lit-html').TemplateResult<1>;
     protected willUpdate(changedProperties: PropertyValues<this>): void;
     protected updated(changedProperties: PropertyValues<this>): void;

package/dist/cjs-dev/components/table-header-cell/daikin-table-header-cell.cjs

@@ -46,11 +46,31 @@ const cvaHeaderCell = classVarianceAuthority.cva(
           "focus-visible:-outline-offset-2",
           "focus-visible:outline-ddt-color-common-border-focus",
           "after:flex-none",
-          "after:size-6",
-          "after:i-daikin-sort"
+          "after:size-6"
         ]
+      },
+      order: {
+        asc: [],
+        desc: []
       }
-    }
+    },
+    compoundVariants: [
+      {
+        sortable: true,
+        order: null,
+        class: ["after:i-daikin-sort"]
+      },
+      {
+        sortable: true,
+        order: "asc",
+        class: ["after:i-daikin-chevron-up"]
+      },
+      {
+        sortable: true,
+        order: "desc",
+        class: ["after:i-daikin-chevron-up", "after:rotate-180"]
+      }
+    ]
   }
 );
 exports.DaikinTableHeaderCell = class DaikinTableHeaderCell extends ddsElement.DDSElement {
@@ -58,14 +78,16 @@ exports.DaikinTableHeaderCell = class DaikinTableHeaderCell extends ddsElement.D
     super(...arguments);
     this.alignment = "left";
     this.sortable = false;
+    this.order = null;
   }
   render() {
     const headerCellCN = cvaHeaderCell({
       alignment: this.alignment,
-      sortable: this.sortable
+      sortable: this.sortable,
+      order: this.order === "asc" || this.order === "desc" ? this.order : null
     });
-    const content = lit.html`<slot name="left-icon" class="icon-size-6"></slot>
-      <slot></slot>`;
+    const content = lit.html`<slot name="left-icon" class="icon-size-6"></slot
+      ><slot></slot>`;
     return this.sortable ? lit.html`<button
           type="button"
           class=${headerCellCN}
@@ -90,6 +112,9 @@ __decorateClass([
 __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.DaikinTableHeaderCell.prototype, "sortable", 2);
+__decorateClass([
+  decorators_js.property({ type: String, reflect: true })
+], exports.DaikinTableHeaderCell.prototype, "order", 2);
 exports.DaikinTableHeaderCell = __decorateClass([
   decorators.ddsElement("daikin-table-header-cell")
 ], exports.DaikinTableHeaderCell);

package/dist/cjs-dev/components/table-header-cell/daikin-table-header-cell.d.cts

@@ -3,6 +3,7 @@ import { MergeVariantProps } from "../../type-utils.cjs";
 declare const cvaHeaderCell: (props?: ({
     alignment?: "center" | "right" | "left" | null | undefined;
     sortable?: boolean | null | undefined;
+    order?: "desc" | "asc" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type TableHeaderCellVariantProps = MergeVariantProps<typeof cvaHeaderCell>;
 /**
@@ -44,6 +45,12 @@ export declare class DaikinTableHeaderCell extends DDSElement {
      * It also makes the component emit the `change-sort` event when clicked.
      */
     sortable: boolean;
+    /**
+     * The current sort order of the column.
+     * Can be "asc", "desc", or null if not sorted.
+     * Controlled by `daikin-table`.
+     */
+    order: TableHeaderCellVariantProps["order"] | null;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {