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

package/dist/es-dev/components/progress-indicator/daikin-progress-indicator.js

@@ -1,7 +1,8 @@
 import { unsafeCSS, css, html } from "lit";
-import { property, queryAssignedElements } from "lit/decorators.js";
+import { queryAssignedElements } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
 import "../../base/dds-form-element.js";
+import { property } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";

package/dist/es-dev/components/progress-indicator-item/daikin-progress-indicator-item.d.ts

@@ -33,6 +33,8 @@ export declare class DaikinProgressIndicatorItem extends DDSElement {
     /**
      * Status of the progress indicator item.
      * Controlled by `daikin-progress-indicator`.
+     *
+     * @default "unfinished"
      */
     status: ProgressIndicatorItemVariantProps["status"];
     render(): import('lit-html').TemplateResult<1>;

package/dist/es-dev/components/progress-indicator-item/daikin-progress-indicator-item.js

@@ -1,9 +1,9 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, nothing, html } from "lit";
-import { property } 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, oneOf } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
@@ -39,10 +39,6 @@ const cvaContainer = cva(
   }
 );
 let DaikinProgressIndicatorItem = class extends DDSElement {
-  constructor() {
-    super(...arguments);
-    this.status = "unfinished";
-  }
   render() {
     return html`<div
       class=${cvaContainer({ status: this.status })}
@@ -75,7 +71,16 @@ DaikinProgressIndicatorItem.styles = css`
     }
   `;
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "unfinished",
+    isAllowedValue: oneOf([
+      "unfinished",
+      "inprogress",
+      "finished"
+    ])
+  })
 ], DaikinProgressIndicatorItem.prototype, "status", 2);
 DaikinProgressIndicatorItem = __decorateClass([
   ddsElement("daikin-progress-indicator-item")

package/dist/es-dev/components/radio/daikin-radio.d.ts

@@ -7,6 +7,13 @@ import { DDSFormElement } from "../../base/index.js";
  * Hierarchies:
  * - `daikin-radio-group` > `daikin-radio`
  *
+ * @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 cloned event of a [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) emitted from the inner `<input type="radio">` element.
  *
  * @slot - A slot for the radio label content.
@@ -31,6 +38,8 @@ export declare class DaikinRadio extends DDSFormElement {
      * Label position.
      * - `right` (default): The label will be placed to the right of the radio button.
      * - `hidden`: The label will not be shown.
+     *
+     * @default "right"
      */
     labelPosition: "right" | "hidden";
     /**

package/dist/es-dev/components/radio/daikin-radio.js

@@ -1,9 +1,10 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, nothing, html } from "lit";
-import { property, query } from "lit/decorators.js";
+import { query } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import "../../base/dds-element.js";
 import { DDSFormElement } from "../../base/dds-form-element.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";
@@ -56,8 +57,6 @@ const cvaLabel = cva([], {
 let DaikinRadio = class extends DDSFormElement {
   constructor() {
     super(...arguments);
-    this.label = "";
-    this.labelPosition = "right";
     this.checked = false;
     this.disabled = false;
     this.disabledByParent = false;
@@ -98,7 +97,7 @@ let DaikinRadio = class extends DDSFormElement {
         <input
           class=${RADIO_CLASS_NAME}
           type="radio"
-          name=${this.name}
+          name=${ifDefined(this.getBackingProperty("name"))}
           aria-label=${this._labelHidden ? this.label : nothing}
           tabindex=${ifDefined(this.skipTab ? "-1" : void 0)}
           ?disabled=${disabled}
@@ -140,10 +139,16 @@ DaikinRadio.styles = css`
     }
   `;
 __decorateClass([
-  property({ type: String })
+  property({ type: String, reflect: true, fallbackValue: "" })
 ], DaikinRadio.prototype, "label", 2);
 __decorateClass([
-  property({ type: String, attribute: "label-position" })
+  property({
+    type: String,
+    reflect: true,
+    attribute: "label-position",
+    fallbackValue: "right",
+    isAllowedValue: oneOf(["right", "hidden"])
+  })
 ], DaikinRadio.prototype, "labelPosition", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })

package/dist/es-dev/components/radio-group/daikin-radio-group.d.ts

@@ -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/es-dev/components/radio-group/daikin-radio-group.js

@@ -1,9 +1,10 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
-import { queryAssignedElements, property, state } from "lit/decorators.js";
+import { queryAssignedElements, state } 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, oneOf } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
@@ -29,8 +30,6 @@ const cvaRadioGroup = cva(["size-full", "flex", "gap-x-8", "gap-y-2"], {
 let DaikinRadioGroup = class extends DDSElement {
   constructor() {
     super(...arguments);
-    this.orientation = "vertical";
-    this.name = "";
     this.value = "";
     this.required = false;
     this.disabled = false;
@@ -49,7 +48,7 @@ let DaikinRadioGroup = class extends 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;
@@ -142,13 +141,21 @@ __decorateClass([
   queryAssignedElements({ selector: "daikin-radio" })
 ], DaikinRadioGroup.prototype, "_radios", 2);
 __decorateClass([
-  property({ type: String })
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "vertical",
+    isAllowedValue: oneOf([
+      "horizontal",
+      "vertical"
+    ])
+  })
 ], DaikinRadioGroup.prototype, "orientation", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({ type: String, reflect: true, fallbackValue: "" })
 ], DaikinRadioGroup.prototype, "name", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({ type: String })
 ], DaikinRadioGroup.prototype, "value", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })

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

@@ -1,8 +1,9 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
-import { property, queryAssignedElements, state } from "lit/decorators.js";
+import { queryAssignedElements, state } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
 import "../../base/dds-form-element.js";
+import { property } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";

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

@@ -4,6 +4,13 @@ import { DDSFormElement } from "../../base/index.js";
  * 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/es-dev/components/slider/daikin-slider.js

@@ -1,9 +1,10 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
-import { property, state } from "lit/decorators.js";
+import { state } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import "../../base/dds-element.js";
 import { DDSFormElement } from "../../base/dds-form-element.js";
+import { property } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
@@ -69,11 +70,7 @@ const cvaSliderTrack = cva(
 let DaikinSlider = class extends DDSFormElement {
   constructor() {
     super();
-    this.min = "1";
-    this.max = "100";
-    this.step = "1";
     this.disabled = false;
-    this.sliderAriaLabel = "slider";
     this._dragging = false;
     this._sliderRef = createRef();
     this._thumbRef = createRef();
@@ -242,19 +239,24 @@ DaikinSlider.styles = css`
     }
   `;
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({ type: String, reflect: true, fallbackValue: "0" })
 ], DaikinSlider.prototype, "min", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({ type: String, reflect: true, fallbackValue: "100" })
 ], DaikinSlider.prototype, "max", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({ type: String, reflect: true, fallbackValue: "1" })
 ], DaikinSlider.prototype, "step", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinSlider.prototype, "disabled", 2);
 __decorateClass([
-  property({ type: String, reflect: true, attribute: "slider-aria-label" })
+  property({
+    type: String,
+    reflect: true,
+    attribute: "slider-aria-label",
+    fallbackValue: "slider"
+  })
 ], DaikinSlider.prototype, "sliderAriaLabel", 2);
 __decorateClass([
   state()

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

@@ -18,6 +18,8 @@ export declare class DaikinStatusMessage extends DDSElement {
      * Sets the size of the status message component.
      * - "small": Compact status message style.
      * - "medium": Default status message style.
+     *
+     * @default "medium"
      */
     size: "small" | "medium";
     /**
@@ -26,6 +28,8 @@ export declare class DaikinStatusMessage extends DDSElement {
      * - "positive": Success or confirmation status.
      * - "negative": Error or failure status.
      * - "warning": Warning or caution status.
+     *
+     * @default "positive"
      */
     status: "neutral" | "positive" | "negative" | "warning";
     /**

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

@@ -1,9 +1,9 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, nothing, html } from "lit";
-import { property } 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, oneOf } from "../../base/dds-property.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
@@ -26,15 +26,15 @@ const cvaWrapper = cva(
     "font-normal",
     "leading-[130%]",
     "gap-1",
-    "break-all",
+    "natural-break",
     "before:content-['']",
     "before:flex-none"
   ],
   {
     variants: {
       size: {
-        small: ["before:size-4", "text-sm", "h-[18px]"],
-        medium: ["before:size-6", "text-base", "h-6"]
+        small: ["before:size-4", "text-sm"],
+        medium: ["before:size-6", "text-base"]
       },
       status: {
         neutral: [
@@ -64,8 +64,6 @@ const cvaWrapper = cva(
 let DaikinStatusMessage = class extends DDSElement {
   constructor() {
     super(...arguments);
-    this.size = "medium";
-    this.status = "positive";
     this.statusMessageRole = null;
     this.screenReaderText = null;
   }
@@ -92,10 +90,25 @@ DaikinStatusMessage.styles = css`
     }
   `;
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "medium",
+    isAllowedValue: oneOf(["small", "medium"])
+  })
 ], DaikinStatusMessage.prototype, "size", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "positive",
+    isAllowedValue: oneOf([
+      "neutral",
+      "positive",
+      "negative",
+      "warning"
+    ])
+  })
 ], DaikinStatusMessage.prototype, "status", 2);
 __decorateClass([
   property({ type: String, reflect: true, attribute: "status-message-role" })

package/dist/es-dev/components/tab/daikin-tab.js

@@ -1,8 +1,9 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
-import { property, query } from "lit/decorators.js";
+import { query } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
 import "../../base/dds-form-element.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";
@@ -122,13 +123,18 @@ DaikinTab.styles = css`
     }
   `;
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({ type: String })
 ], DaikinTab.prototype, "value", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinTab.prototype, "disabled", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "stretch",
+    isAllowedValue: oneOf(["stretch", "fit"])
+  })
 ], DaikinTab.prototype, "sizing", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })

package/dist/es-dev/components/tab-panels/daikin-tab-panels.js

@@ -1,8 +1,8 @@
 import { unsafeCSS, css, nothing, html } from "lit";
-import { property } from "lit/decorators.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 { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";
@@ -47,7 +47,7 @@ DaikinTabPanels.styles = css`
     ${unsafeCSS(tailwindStyles)}
   `;
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({ type: String })
 ], DaikinTabPanels.prototype, "value", 2);
 __decorateClass([
   property({

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

@@ -1,11 +1,12 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, nothing, html } from "lit";
-import { property, state } from "lit/decorators.js";
+import { state } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 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 { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
 import tailwindStyles from "../../tailwind.css.js";

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

@@ -1,7 +1,7 @@
 import { DDSElement } from "../../base/index.js";
 import { MergeVariantProps } from "../../type-utils.js";
 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/es-dev/components/table-cell/daikin-table-cell.js

@@ -1,8 +1,8 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
-import { property } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
 import "../../base/dds-form-element.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";
@@ -27,7 +27,7 @@ const cvaCell = cva(
     "px-4",
     "py-3",
     "text-ddt-color-common-text-primary",
-    "break-all"
+    "natural-break"
   ],
   {
     variants: {
@@ -40,10 +40,6 @@ const cvaCell = cva(
   }
 );
 let DaikinTableCell = class extends DDSElement {
-  constructor() {
-    super(...arguments);
-    this.alignment = "left";
-  }
   render() {
     return html`<span class=${cvaCell({ alignment: this.alignment })}>
       <slot></slot>
@@ -64,7 +60,16 @@ DaikinTableCell.styles = css`
     }
   `;
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "left",
+    isAllowedValue: oneOf([
+      "left",
+      "right",
+      "center"
+    ])
+  })
 ], DaikinTableCell.prototype, "alignment", 2);
 DaikinTableCell = __decorateClass([
   ddsElement("daikin-table-cell")

package/dist/es-dev/components/table-header-cell/daikin-table-header-cell.d.ts

@@ -1,7 +1,7 @@
 import { DDSElement } from "../../base/index.js";
 import { MergeVariantProps } from "../../type-utils.js";
 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>;

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

@@ -1,8 +1,8 @@
 import { cva } from "class-variance-authority";
 import { unsafeCSS, css, html } from "lit";
-import { property } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
 import "../../base/dds-form-element.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";
@@ -75,7 +75,6 @@ const cvaHeaderCell = cva(
 let DaikinTableHeaderCell = class extends DDSElement {
   constructor() {
     super(...arguments);
-    this.alignment = "left";
     this.sortable = false;
     this.order = null;
   }
@@ -106,7 +105,16 @@ DaikinTableHeaderCell.styles = css`
     }
   `;
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "left",
+    isAllowedValue: oneOf([
+      "left",
+      "right",
+      "center"
+    ])
+  })
 ], DaikinTableHeaderCell.prototype, "alignment", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })

package/dist/es-dev/components/tabs/daikin-tabs.d.ts

@@ -47,6 +47,8 @@ export declare class DaikinTabs extends DDSElement {
     value: string;
     /**
      * Whether the tab width stretches or fits.
+     *
+     * @default "stretch"
      */
     sizing: "stretch" | "fit";
     /**

package/dist/es-dev/components/tabs/daikin-tabs.js

@@ -1,11 +1,13 @@
 import { unsafeCSS, css, html } from "lit";
-import { property, queryAssignedElements } from "lit/decorators.js";
+import { queryAssignedElements } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
 import "../../base/dds-form-element.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";
 import { scrollIntoViewOnlyParent } from "../../utils/scroller.js";
+import "../tab/daikin-tab.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -20,7 +22,6 @@ let DaikinTabs = class extends DDSElement {
   constructor() {
     super(...arguments);
     this.value = "";
-    this.sizing = "stretch";
   }
   /**
    * Emits `beforechange` event if necessary and returns whether we should proceed.
@@ -218,10 +219,15 @@ DaikinTabs.styles = css`
     }
   `;
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({ type: String })
 ], DaikinTabs.prototype, "value", 2);
 __decorateClass([
-  property({ type: String, reflect: true })
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "stretch",
+    isAllowedValue: oneOf(["stretch", "fit"])
+  })
 ], DaikinTabs.prototype, "sizing", 2);
 __decorateClass([
   queryAssignedElements({ selector: "daikin-tab" })