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

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

@@ -0,0 +1,67 @@
+import { PropertyValues } from 'lit';
+import { DDSFormElement } from "../../base/dds-form-element.cjs";
+/**
+ * The slider component is a control that allows users to input numerical values within a specific range intuitively.
+ * It functions similarly to the HTML `<input type="range">` tag, allows you to set the range of values.
+ *
+ * @fires change - A retargeted event of a [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) emitted from the inner `<input type="range">` element.
+ * @fires input - A retargeted event of a [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/slider/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-slider name="name" value="1" min="1" max="100" step="1"></daikin-slider>
+ * ```
+ */
+export declare class DaikinSlider extends DDSFormElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * The smallest value in the range of permitted values.
+     */
+    min: string;
+    /**
+     * The largest value in the range of permitted values.
+     */
+    max: string;
+    /**
+     * The step attribute is a number that specifies the granularity that the value must adhere to.
+     */
+    step: string;
+    /**
+     * Specify the slider disabled state.
+     */
+    disabled: boolean;
+    /**
+     * The aria-label of the slider.
+     * You should specify this value based on the slider's use case, such as "air conditioner temperature".
+     */
+    sliderAriaLabel: string;
+    constructor();
+    private _dragging;
+    private _sliderRef;
+    private _thumbRef;
+    private _updateFormValue;
+    private get _progress();
+    private _handleDrag;
+    private _handleKeyDown;
+    /**
+     * Returns a normalized value of the mouse position on the slider, in the range 0 to 1.
+     *
+     * @param event A MouseEvent.
+     * @returns The mouse's X coordinate normalized to a range of 0 to 1. The left end and beyond of the slider is 0, and the right end and beyond is 1.
+     */
+    private _calcMousePositionRatio;
+    private _startDrag;
+    private _startTouch;
+    render(): import('lit-html').TemplateResult<1>;
+    updated(changedProperties: PropertyValues<this>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-slider": DaikinSlider;
+    }
+}

package/dist/cjs-dev/components/slider/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinSlider = require("./daikin-slider.cjs");
+Object.defineProperty(exports, "DaikinSlider", {
+  enumerable: true,
+  get: () => daikinSlider.DaikinSlider
+});

package/dist/cjs-dev/components/slider/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-slider.cjs";

package/dist/cjs-dev/components/slider/slider-utils.cjs

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function normalizeNumberString(str) {
+  return str.replace(new RegExp("(?:\\.0*|(?<=\\.\\d*?)0+)$"), "").replace(new RegExp("(?<=-|^)0+(?=[1-9]|0\\.|0)"), "").replace(/^-0$/, "0");
+}
+function formatValue(value, step) {
+  var _a, _b;
+  const decimals = ((_b = (_a = /\.(\d*?)0*$/.exec(step)) == null ? void 0 : _a[1]) == null ? void 0 : _b.length) ?? 0;
+  const formattedValue = value.toFixed(decimals);
+  return normalizeNumberString(formattedValue);
+}
+function getValueFromRatio(slider, ratio) {
+  const minFloat = parseFloat(slider.min);
+  const maxFloat = parseFloat(slider.max);
+  const stepFloat = parseFloat(slider.step);
+  const rawValue = ratio * (maxFloat - minFloat) + minFloat;
+  const steppedValue = Math.round(rawValue / stepFloat) * stepFloat;
+  if (steppedValue <= minFloat) {
+    return normalizeNumberString(slider.min);
+  }
+  if (steppedValue >= maxFloat) {
+    return normalizeNumberString(slider.max);
+  }
+  return formatValue(steppedValue, slider.step);
+}
+function getValueByKeydown(slider, key) {
+  if (key === "Home") {
+    return slider.min;
+  }
+  if (key === "End") {
+    return slider.max;
+  }
+  const offset = {
+    ArrowLeft: -1,
+    ArrowDown: -1,
+    ArrowRight: 1,
+    ArrowUp: 1,
+    PageDown: -10,
+    PageUp: 10
+  }[key];
+  if (!offset) {
+    return;
+  }
+  const minFloat = parseFloat(slider.min);
+  const maxFloat = parseFloat(slider.max);
+  const stepFloat = parseFloat(slider.step);
+  const valueFloat = parseFloat(slider.value);
+  const clampedValue = Math.max(
+    minFloat,
+    Math.min(maxFloat, valueFloat + stepFloat * offset)
+  );
+  return formatValue(clampedValue, slider.step);
+}
+exports.formatValue = formatValue;
+exports.getValueByKeydown = getValueByKeydown;
+exports.getValueFromRatio = getValueFromRatio;
+exports.normalizeNumberString = normalizeNumberString;

package/dist/cjs-dev/components/slider/slider-utils.d.cts

@@ -0,0 +1,37 @@
+import { DaikinSlider } from "./daikin-slider.cjs";
+/**
+ * Returns a normalized numerical representation.
+ *
+ * - Removes trailing zeros from the decimal part.
+ * - Removes the decimal point if it becomes the last character.
+ * - Removes leading zeros from the integer part.
+ *
+ * @param str A numeric string.
+ * @returns Formatted value.
+ */
+export declare function normalizeNumberString(str: string): string;
+/**
+ * This function is used to handle floating-point errors in calculations.
+ * Ensuring that the number of decimal places matches the decimal places of the step value.
+ *
+ * @param value The current value.
+ * @param step The step value.
+ * @returns Formatted current value.
+ */
+export declare function formatValue(value: number, step: string): string;
+/**
+ * Get the current value and track bar's progress percentage from the distance to the left.
+ *
+ * @param slider The daikin-slider instance.
+ * @param ratio The ratio of the slider value (0-1).
+ * @returns Current value.
+ */
+export declare function getValueFromRatio(slider: DaikinSlider, ratio: number): string;
+/**
+ * Get the current value and track bar's progress percentage when use keyboard.
+ *
+ * @param slider The daikin-slider instance.
+ * @param moveOffset The number of thumb icon's move offset.
+ * @returns Current value.
+ */
+export declare function getValueByKeydown(slider: DaikinSlider, key: string): string | undefined;

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

@@ -4,6 +4,7 @@ const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const ifDefined_js = require("lit/directives/if-defined.js");
+const ref_js = require("lit/directives/ref.js");
 const repeat_js = require("lit/directives/repeat.js");
 const ddsElement = require("../../base/dds-element.cjs");
 const decorators = require("../../base/decorators.cjs");
@@ -35,10 +36,14 @@ const cvaRow = classVarianceAuthority.cva(
   {
     variants: {
       selected: {
-        false: ["hover:bg-ddt-color-common-surface-hover"],
+        false: [
+          "group-[:not([data-hover])]:media-hover:bg-ddt-color-common-surface-hover",
+          "data-[hover]:bg-ddt-color-common-surface-hover"
+        ],
         true: [
           "bg-ddt-color-common-surface-selected-default",
-          "hover:bg-ddt-color-common-surface-selected-hover"
+          "group-[:not([data-hover])]:media-hover:bg-ddt-color-common-surface-selected-hover",
+          "data-[hover]:bg-ddt-color-common-surface-selected-hover"
         ]
       }
     }
@@ -52,11 +57,13 @@ 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 = [];
+    this._currentTouchHoverRowId = null;
+    this._tableRef = ref_js.createRef();
   }
   _updateCurrentView() {
     var _a;
@@ -104,34 +111,70 @@ exports.DaikinTable = class DaikinTable extends ddsElement.DDSElement {
     }
     this.dispatchEvent(new Event("change-sort"));
   }
+  _handleTouchMove(event) {
+    var _a;
+    const touch = event.touches[0];
+    const row = touch && ((_a = (this.shadowRoot ?? document).elementsFromPoint(touch.clientX, touch.clientY).find(
+      (element) => {
+        var _a2;
+        return ((_a2 = this._tableRef.value) == null ? void 0 : _a2.contains(element)) && element.closest("tr");
+      }
+    )) == null ? void 0 : _a.closest("tr"));
+    this._currentTouchHoverRowId = (row == null ? void 0 : row.dataset.id) ?? null;
+  }
+  _handleTouchStart(event) {
+    this._handleTouchMove(event);
+  }
+  _handleTouchEnd() {
+    this._currentTouchHoverRowId = null;
+  }
   _updateHeaderCheckboxState() {
     const rowIdSet = new Set(this.rows.map(({ id }) => id));
     this.selection = this.selection.filter((id) => rowIdSet.has(id));
     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,
@@ -145,7 +188,11 @@ exports.DaikinTable = class DaikinTable extends ddsElement.DDSElement {
           </td>`
     );
     return lit.html`<div class="flex flex-col gap-6 w-full font-daikinSerif">
-      <table class="w-full">
+      <table
+        ${ref_js.ref(this._tableRef)}
+        class="w-full group"
+        ?data-hover=${this._currentTouchHoverRowId != null}
+      >
         <thead>
           <tr class="border-b border-b-ddt-color-divider">
             ${this.selectable ? lit.html`<td class="w-12 p-0">
@@ -164,7 +211,11 @@ exports.DaikinTable = class DaikinTable extends ddsElement.DDSElement {
             ${createHeaderRow()}
           </tr>
         </thead>
-        <tbody>
+        <tbody
+          @touchstart=${this._handleTouchStart}
+          @touchmove=${this._handleTouchMove}
+          @touchend=${this._handleTouchEnd}
+        >
           ${repeat_js.repeat(
       this._currentView,
       ({ id }) => id,
@@ -172,6 +223,8 @@ exports.DaikinTable = class DaikinTable extends ddsElement.DDSElement {
                 class=${cvaRow({
         selected: this.selectable && !!this.selection.find((id) => id === row.id)
       })}
+                data-id=${row.id}
+                ?data-hover=${this._currentTouchHoverRowId === row.id}
               >
                 ${this.selectable ? lit.html`<td class="w-12 p-0">
                       <span
@@ -194,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();
@@ -204,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`
@@ -226,6 +281,7 @@ exports.DaikinTable.styles = lit.css`
     :host {
       display: block;
       width: 100%;
+      overflow: auto;
     }
   `;
 __decorateClass([
@@ -245,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);
@@ -258,6 +314,9 @@ __decorateClass([
 __decorateClass([
   decorators_js.state()
 ], exports.DaikinTable.prototype, "_currentView", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.DaikinTable.prototype, "_currentTouchHoverRowId", 2);
 exports.DaikinTable = __decorateClass([
   decorators.ddsElement("daikin-table")
 ], exports.DaikinTable);

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,59 +79,90 @@ 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;
+    private _tableRef;
     private _updateCurrentView;
     private _emitChangeCheckEvent;
     private _handleHeaderCheckboxChange;
     private _handleBodyCheckboxChange;
     private _handleClickSort;
+    private _handleTouchMove;
+    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-cell/daikin-table-cell.cjs

@@ -27,7 +27,8 @@ const cvaCell = classVarianceAuthority.cva(
     "min-h-12",
     "px-4",
     "py-3",
-    "text-ddt-color-common-text-primary"
+    "text-ddt-color-common-text-primary",
+    "break-all"
   ],
   {
     variants: {

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

@@ -1,7 +1,7 @@
 import { DDSElement } from "../../base/index.cjs";
 import { MergeVariantProps } from "../../type-utils.cjs";
 declare const cvaCell: (props?: ({
-    alignment?: "right" | "left" | "center" | null | undefined;
+    alignment?: "center" | "right" | "left" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type TableCellVariantProps = MergeVariantProps<typeof cvaCell>;
 /**

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);