@daikin-oss/design-system-web-components 1.3.2 → 1.4.0-next.1

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

@@ -6,6 +6,7 @@ const decorators_js = require("lit/decorators.js");
 const ifDefined_js = require("lit/directives/if-defined.js");
 const ddsElement = require("../../base/dds-element.cjs");
 require("../../base/dds-form-element.cjs");
+const ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -31,8 +32,6 @@ const cvaRadioGroup = classVarianceAuthority.cva(["size-full", "flex", "gap-x-8"
 exports.DaikinRadioGroup = class DaikinRadioGroup extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
-    this.orientation = "vertical";
-    this.name = "";
     this.value = "";
     this.required = false;
     this.disabled = false;
@@ -51,7 +50,7 @@ exports.DaikinRadioGroup = class DaikinRadioGroup extends ddsElement.DDSElement
     const selectedRadio = radios.find((radio) => radio.value === this.value);
     const firstEnabledRadio = radios.find((radio) => !radio.disabled);
     for (const daikinRadio of this._radios) {
-      if (this.name) {
+      if (this.getBackingProperty("name") != null) {
         daikinRadio.name = this.name;
       }
       const isSelected = daikinRadio === selectedRadio;
@@ -144,19 +143,27 @@ __decorateClass([
   decorators_js.queryAssignedElements({ selector: "daikin-radio" })
 ], exports.DaikinRadioGroup.prototype, "_radios", 2);
 __decorateClass([
-  decorators_js.property({ type: String })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "vertical",
+    isAllowedValue: ddsProperty.oneOf([
+      "horizontal",
+      "vertical"
+    ])
+  })
 ], exports.DaikinRadioGroup.prototype, "orientation", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "" })
 ], exports.DaikinRadioGroup.prototype, "name", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String })
 ], exports.DaikinRadioGroup.prototype, "value", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinRadioGroup.prototype, "required", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinRadioGroup.prototype, "disabled", 2);
 __decorateClass([
   decorators_js.state()

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

@@ -37,6 +37,8 @@ export declare class DaikinRadioGroup extends DDSElement {
     private readonly _radios;
     /**
      * Specify the radio group orientation
+     *
+     * @default "vertical"
      */
     orientation: RadioGroupProps["orientation"];
     /**
@@ -46,7 +48,7 @@ export declare class DaikinRadioGroup extends DDSElement {
     name: string;
     /**
      * `value` of the currently selected radio.
-     * see {@link DaikinRadio.value}
+     * See {@link DaikinRadio.value}.
      */
     value: string;
     /**

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

@@ -5,6 +5,7 @@ const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const ddsElement = require("../../base/dds-element.cjs");
 require("../../base/dds-form-element.cjs");
+const ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -164,13 +165,13 @@ exports.DaikinSelect.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinSelect.prototype, "error", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinSelect.prototype, "required", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinSelect.prototype, "disabled", 2);
 __decorateClass([
   decorators_js.queryAssignedElements({ selector: "select" })

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

@@ -6,6 +6,7 @@ const decorators_js = require("lit/decorators.js");
 const ref_js = require("lit/directives/ref.js");
 require("../../base/dds-element.cjs");
 const ddsFormElement = require("../../base/dds-form-element.cjs");
+const ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -71,11 +72,7 @@ const cvaSliderTrack = classVarianceAuthority.cva(
 exports.DaikinSlider = class DaikinSlider extends ddsFormElement.DDSFormElement {
   constructor() {
     super();
-    this.min = "1";
-    this.max = "100";
-    this.step = "1";
     this.disabled = false;
-    this.sliderAriaLabel = "slider";
     this._dragging = false;
     this._sliderRef = ref_js.createRef();
     this._thumbRef = ref_js.createRef();
@@ -244,19 +241,24 @@ exports.DaikinSlider.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "0" })
 ], exports.DaikinSlider.prototype, "min", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "100" })
 ], exports.DaikinSlider.prototype, "max", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "1" })
 ], exports.DaikinSlider.prototype, "step", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinSlider.prototype, "disabled", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true, attribute: "slider-aria-label" })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    attribute: "slider-aria-label",
+    fallbackValue: "slider"
+  })
 ], exports.DaikinSlider.prototype, "sliderAriaLabel", 2);
 __decorateClass([
   decorators_js.state()

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

@@ -4,6 +4,13 @@ import { DDSFormElement } from "../../base/index.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.
  *
+ * @attr form - The form the component belongs to.
+ * @attr name - The form name, submitted as a name/value pair when submitting the form.
+ * @attr value - The initial form value, submitted as a name/value pair when submitting the form.
+ * @prop {String} formAttr - The form the component belongs to.
+ * @prop {String} name - The form name, submitted as a name/value pair when submitting the form.
+ * @prop {String} value - The form value, submitted as a name/value pair when submitting the form.
+ *
  * @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).
  *
@@ -21,14 +28,20 @@ export declare class DaikinSlider extends DDSFormElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * The smallest value in the range of permitted values.
+     *
+     * @default "0"
      */
     min: string;
     /**
      * The largest value in the range of permitted values.
+     *
+     * @default "100"
      */
     max: string;
     /**
      * The step attribute is a number that specifies the granularity that the value must adhere to.
+     *
+     * @default "1"
      */
     step: string;
     /**
@@ -38,6 +51,8 @@ export declare class DaikinSlider extends DDSFormElement {
     /**
      * The aria-label of the slider.
      * You should specify this value based on the slider's use case, such as "air conditioner temperature".
+     *
+     * @default "slider"
      */
     sliderAriaLabel: string;
     constructor();

package/dist/cjs/components/status-message/daikin-status-message.cjs

@@ -0,0 +1,123 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const classVarianceAuthority = require("class-variance-authority");
+const lit = require("lit");
+const ifDefined_js = require("lit/directives/if-defined.js");
+const ddsElement = require("../../base/dds-element.cjs");
+require("../../base/dds-form-element.cjs");
+const ddsProperty = require("../../base/dds-property.cjs");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
+const tailwind = require("../../tailwind.css.cjs");
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators2, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators2[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const cvaWrapper = classVarianceAuthority.cva(
+  [
+    "flex",
+    "items-center",
+    "size-full",
+    "font-daikinSerif",
+    "font-normal",
+    "leading-[130%]",
+    "gap-1",
+    "natural-break",
+    "before:content-['']",
+    "before:flex-none"
+  ],
+  {
+    variants: {
+      size: {
+        small: ["before:size-4", "text-sm"],
+        medium: ["before:size-6", "text-base"]
+      },
+      status: {
+        neutral: [
+          "text-ddt-color-common-text-primary",
+          "before:i-daikin-neutral",
+          "before:text-ddt-color-common-disabled"
+        ],
+        positive: [
+          "text-ddt-color-common-text-primary",
+          "before:i-daikin-success",
+          "before:text-ddt-color-common-success"
+        ],
+        negative: [
+          "text-ddt-color-common-danger-default",
+          "before:i-daikin-error",
+          "before:text-ddt-color-common-danger-default"
+        ],
+        warning: [
+          "text-ddt-color-common-text-primary",
+          "before:i-daikin-warning",
+          "before:text-ddt-color-common-warning"
+        ]
+      }
+    }
+  }
+);
+exports.DaikinStatusMessage = class DaikinStatusMessage extends ddsElement.DDSElement {
+  constructor() {
+    super(...arguments);
+    this.statusMessageRole = null;
+    this.screenReaderText = null;
+  }
+  render() {
+    return lit.html`
+      <div
+        class=${cvaWrapper({ status: this.status, size: this.size })}
+        role=${ifDefined_js.ifDefined(this.statusMessageRole ?? void 0)}
+      >
+        ${this.screenReaderText ? lit.html`<span class="sr-only">${this.screenReaderText}</span>` : lit.nothing}
+        <span>
+          <slot></slot>
+        </span>
+      </div>
+    `;
+  }
+};
+exports.DaikinStatusMessage.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: flex;
+      width: 100%;
+    }
+  `;
+__decorateClass([
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "medium",
+    isAllowedValue: ddsProperty.oneOf(["small", "medium"])
+  })
+], exports.DaikinStatusMessage.prototype, "size", 2);
+__decorateClass([
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "positive",
+    isAllowedValue: ddsProperty.oneOf([
+      "neutral",
+      "positive",
+      "negative",
+      "warning"
+    ])
+  })
+], exports.DaikinStatusMessage.prototype, "status", 2);
+__decorateClass([
+  ddsProperty.property({ type: String, reflect: true, attribute: "status-message-role" })
+], exports.DaikinStatusMessage.prototype, "statusMessageRole", 2);
+__decorateClass([
+  ddsProperty.property({ type: String, reflect: true, attribute: "screen-reader-text" })
+], exports.DaikinStatusMessage.prototype, "screenReaderText", 2);
+exports.DaikinStatusMessage = __decorateClass([
+  decorators.ddsElement("daikin-status-message")
+], exports.DaikinStatusMessage);

package/dist/cjs/components/status-message/daikin-status-message.d.cts

@@ -0,0 +1,55 @@
+import { DDSElement } from "../../base/index.cjs";
+/**
+ * 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.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/status-message/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-status-message>description</daikin-status-message>
+ * ```
+ */
+export declare class DaikinStatusMessage extends DDSElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Sets the size of the status message component.
+     * - "small": Compact status message style.
+     * - "medium": Default status message style.
+     *
+     * @default "medium"
+     */
+    size: "small" | "medium";
+    /**
+     * Specifies the status of the message.
+     * - "neutral": Neutral or incomplete status.
+     * - "positive": Success or confirmation status.
+     * - "negative": Error or failure status.
+     * - "warning": Warning or caution status.
+     *
+     * @default "positive"
+     */
+    status: "neutral" | "positive" | "negative" | "warning";
+    /**
+     * Sets the ARIA role of the status message component.
+     * - "[alert](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/alert_role)": Indicates an important message that requires user attention.
+     * - "[status](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/status_role)": Indicates an advisory message that provides feedback or updates.
+     * - `null` (default): No specific ARIA role, meaning the message content will not be announced automatically when it changes.
+     */
+    statusMessageRole: "alert" | "status" | null;
+    /**
+     * Provides an alternative text for screen readers that is read by assistive technologies but not displayed visually.
+     *
+     * e.g. If you use the message component for a password validation status (ensure the statusMessageRole is `status`), you might do the following:
+     * When the user inputs an 8-character password, set the status to `positive` and update the screenReaderText to "Met,". This allows the screen reader to announce the full updated message, such as "Met, minimum 8 characters".
+     */
+    screenReaderText: string | null;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-status-message": DaikinStatusMessage;
+    }
+}

package/dist/cjs/components/status-message/index.cjs

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

package/dist/cjs/components/status-message/index.d.cts

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

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

@@ -5,6 +5,7 @@ const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
 const ddsElement = require("../../base/dds-element.cjs");
 require("../../base/dds-form-element.cjs");
+const ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -124,16 +125,21 @@ exports.DaikinTab.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String })
 ], exports.DaikinTab.prototype, "value", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTab.prototype, "disabled", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "stretch",
+    isAllowedValue: ddsProperty.oneOf(["stretch", "fit"])
+  })
 ], exports.DaikinTab.prototype, "sizing", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTab.prototype, "active", 2);
 __decorateClass([
   decorators_js.query("button")

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

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const lit = require("lit");
-const decorators_js = require("lit/decorators.js");
 const repeat_js = require("lit/directives/repeat.js");
 const ddsElement = require("../../base/dds-element.cjs");
 require("../../base/dds-form-element.cjs");
+const ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -42,16 +42,16 @@ exports.DaikinTabPanels.styles = lit.css`
     ${lit.unsafeCSS(tailwind.default)}
   `;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String })
 ], exports.DaikinTabPanels.prototype, "value", 2);
 __decorateClass([
-  decorators_js.property({
+  ddsProperty.property({
     type: Array,
     hasChanged: (newValue, oldValue) => JSON.stringify(newValue) !== JSON.stringify(oldValue)
   })
 ], exports.DaikinTabPanels.prototype, "panels", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true, attribute: "panel-role" })
+  ddsProperty.property({ type: String, reflect: true, attribute: "panel-role" })
 ], exports.DaikinTabPanels.prototype, "panelRole", 2);
 exports.DaikinTabPanels = __decorateClass([
   decorators.ddsElement("daikin-tab-panels")

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

@@ -8,6 +8,7 @@ const ref_js = require("lit/directives/ref.js");
 const repeat_js = require("lit/directives/repeat.js");
 const ddsElement = require("../../base/dds-element.cjs");
 require("../../base/dds-form-element.cjs");
+const ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -38,12 +39,12 @@ const cvaRow = classVarianceAuthority.cva(
     variants: {
       selected: {
         false: [
-          "group-[:not([data-hover])]:media-hover:bg-ddt-color-common-surface-hover",
+          "group-[:not([data-hover])]:hover:bg-ddt-color-common-surface-hover",
           "data-[hover]:bg-ddt-color-common-surface-hover"
         ],
         true: [
           "bg-ddt-color-common-surface-selected-default",
-          "group-[:not([data-hover])]:media-hover:bg-ddt-color-common-surface-selected-hover",
+          "group-[:not([data-hover])]:hover:bg-ddt-color-common-surface-selected-hover",
           "data-[hover]:bg-ddt-color-common-surface-selected-hover"
         ]
       }
@@ -274,28 +275,28 @@ exports.DaikinTable.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: Array, attribute: false })
+  ddsProperty.property({ type: Array, attribute: false })
 ], exports.DaikinTable.prototype, "headers", 2);
 __decorateClass([
-  decorators_js.property({ type: Array, attribute: false })
+  ddsProperty.property({ type: Array, attribute: false })
 ], exports.DaikinTable.prototype, "rows", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTable.prototype, "selectable", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTable.prototype, "sortable", 2);
 __decorateClass([
-  decorators_js.property({ type: Array, attribute: false })
+  ddsProperty.property({ type: Array, attribute: false })
 ], exports.DaikinTable.prototype, "selection", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinTable.prototype, "sort", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinTable.prototype, "order", 2);
 __decorateClass([
-  decorators_js.property({ attribute: false })
+  ddsProperty.property({ attribute: false })
 ], exports.DaikinTable.prototype, "sortFunction", 2);
 __decorateClass([
   decorators_js.state()

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

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
-const decorators_js = require("lit/decorators.js");
 const ddsElement = require("../../base/dds-element.cjs");
 require("../../base/dds-form-element.cjs");
+const ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -29,7 +29,7 @@ const cvaCell = classVarianceAuthority.cva(
     "px-4",
     "py-3",
     "text-ddt-color-common-text-primary",
-    "break-all"
+    "natural-break"
   ],
   {
     variants: {
@@ -42,10 +42,6 @@ const cvaCell = classVarianceAuthority.cva(
   }
 );
 exports.DaikinTableCell = class DaikinTableCell extends ddsElement.DDSElement {
-  constructor() {
-    super(...arguments);
-    this.alignment = "left";
-  }
   render() {
     return lit.html`<span class=${cvaCell({ alignment: this.alignment })}>
       <slot></slot>
@@ -66,7 +62,16 @@ exports.DaikinTableCell.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "left",
+    isAllowedValue: ddsProperty.oneOf([
+      "left",
+      "right",
+      "center"
+    ])
+  })
 ], exports.DaikinTableCell.prototype, "alignment", 2);
 exports.DaikinTableCell = __decorateClass([
   decorators.ddsElement("daikin-table-cell")

package/dist/cjs/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?: "center" | "right" | "left" | null | undefined;
+    alignment?: "left" | "right" | "center" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type TableCellVariantProps = MergeVariantProps<typeof cvaCell>;
 /**
@@ -31,8 +31,10 @@ type TableCellVariantProps = MergeVariantProps<typeof cvaCell>;
 export declare class DaikinTableCell extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
-     * Specify the direction of cell alignment.
-     * This is not normally something that users need to specify.
+     * Alignment of cell contents.
+     * Controlled by `daikin-table` component.
+     *
+     * @default "left"
      */
     alignment: TableCellVariantProps["alignment"];
     render(): import('lit-html').TemplateResult<1>;

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

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
-const decorators_js = require("lit/decorators.js");
 const ddsElement = require("../../base/dds-element.cjs");
 require("../../base/dds-form-element.cjs");
+const ddsProperty = require("../../base/dds-property.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
 const tailwind = require("../../tailwind.css.cjs");
@@ -77,7 +77,6 @@ const cvaHeaderCell = classVarianceAuthority.cva(
 exports.DaikinTableHeaderCell = class DaikinTableHeaderCell extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
-    this.alignment = "left";
     this.sortable = false;
     this.order = null;
   }
@@ -108,13 +107,22 @@ exports.DaikinTableHeaderCell.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "left",
+    isAllowedValue: ddsProperty.oneOf([
+      "left",
+      "right",
+      "center"
+    ])
+  })
 ], exports.DaikinTableHeaderCell.prototype, "alignment", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinTableHeaderCell.prototype, "sortable", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true })
 ], exports.DaikinTableHeaderCell.prototype, "order", 2);
 exports.DaikinTableHeaderCell = __decorateClass([
   decorators.ddsElement("daikin-table-header-cell")

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

@@ -1,7 +1,7 @@
 import { DDSElement } from "../../base/index.cjs";
 import { MergeVariantProps } from "../../type-utils.cjs";
 declare const cvaHeaderCell: (props?: ({
-    alignment?: "center" | "right" | "left" | null | undefined;
+    alignment?: "left" | "right" | "center" | null | undefined;
     sortable?: boolean | null | undefined;
     order?: "desc" | "asc" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
@@ -37,18 +37,22 @@ export declare class DaikinTableHeaderCell extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * Alignment of cell contents.
+     * Controlled by `daikin-table` component.
+     *
+     * @default "left"
      */
     alignment: TableHeaderCellVariantProps["alignment"];
     /**
      * Whether to display as a sortable column or not.
      * When set to `true`, it becomes clickable and the sort icon is displayed on the right.
      * It also makes the component emit the `change-sort` event when clicked.
+     * Controlled by `daikin-table` component.
      */
     sortable: boolean;
     /**
      * The current sort order of the column.
      * Can be "asc", "desc", or null if not sorted.
-     * Controlled by `daikin-table`.
+     * Controlled by `daikin-table` component.
      */
     order: TableHeaderCellVariantProps["order"] | null;
     render(): import('lit-html').TemplateResult<1>;