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

package/dist/cjs-dev/components/date-picker/daikin-date-picker.cjs

@@ -9,9 +9,11 @@ const ifDefined_js = require("lit/directives/if-defined.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 floatingUiAutoUpdate = require("../../controllers/floating-ui-auto-update.cjs");
+const focusTrap = require("../../controllers/focus-trap.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 const calendarCommon = require("../../utils/calendar-common.cjs");
 const reDispatch = require("../../utils/re-dispatch.cjs");
@@ -58,7 +60,7 @@ const cvaField = classVarianceAuthority.cva(
     "pl-4",
     "pr-10",
     "rounded",
-    "overflow-hidden",
+    "truncate",
     "outline",
     "outline-[--color-border]",
     "outline-0",
@@ -231,9 +233,6 @@ function handleOffsetInput(parts, item, offset2, viewDate, minDate, maxDate) {
 exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSFormElement {
   constructor() {
     super(...arguments);
-    this.placeholder = null;
-    this.min = "";
-    this.max = "";
     this.readonly = false;
     this.disabled = false;
     this.required = false;
@@ -245,6 +244,19 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
     this._autoUpdateController = new floatingUiAutoUpdate.FloatingUIAutoUpdateController(this);
     this._dateInputElement = ref_js.createRef();
     this._calendarElement = ref_js.createRef();
+    this._calendarButtonElement = ref_js.createRef();
+    this._ignoreCloseByFocusTrap = false;
+    this._handleCloseCalendar = () => {
+      var _a;
+      if (this._ignoreCloseByFocusTrap) return;
+      this.open = false;
+      (_a = this._calendarButtonElement.value) == null ? void 0 : _a.focus();
+    };
+    this._focusTrapController = new focusTrap.FocusTrapController(
+      this,
+      this._handleCloseCalendar
+    );
+    this.label = null;
   }
   get _value() {
     return calendarCommon.tryParseDateFromProperty(this.value);
@@ -255,9 +267,6 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
   get _max() {
     return calendarCommon.tryParseDateFromProperty(this.max) ?? calendarCommon.parseDateFromProperty(calendarCommon.DEFAULT_MAX_DATE);
   }
-  get _defaultValue() {
-    return calendarCommon.tryParseDateFromProperty(this.defaultValue ?? "");
-  }
   get _viewDate() {
     var _a;
     return ((_a = this._calendarElement.value) == null ? void 0 : _a.viewDate) ?? null;
@@ -408,7 +417,11 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
     }
     this._emitSelect();
   }
+  _handlePointerDown() {
+    this._ignoreCloseByFocusTrap = true;
+  }
   _handlePointerUp() {
+    this._ignoreCloseByFocusTrap = false;
     if (this.disabled || this.readonly) {
       return;
     }
@@ -491,13 +504,13 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
           ${ref_js.ref(this._dateInputElement)}
           class=${cvaField({ error: this.error })}
           type="text"
-          placeholder=${ifDefined_js.ifDefined(this.placeholder ?? void 0)}
-          name=${this.name}
-          aria-label=${ifDefined_js.ifDefined(this._label ?? void 0)}
-          .value=${this._value ? formatDateForUI(this._value) : ""}
+          name=${ifDefined_js.ifDefined(this.getBackingProperty("name"))}
+          placeholder=${ifDefined_js.ifDefined(this.getBackingProperty("placeholder"))}
+          aria-label=${ifDefined_js.ifDefined(this._label ?? this.label ?? "Date Picker")}
           ?disabled=${this.disabled}
           ?readonly=${this.readonly}
           ?required=${this.required}
+          .value=${this._value ? formatDateForUI(this._value) : ""}
           @change=${this._handleChange}
           @focusin=${this._handleFocusIn}
           @focusout=${this._handleFocusOut}
@@ -506,12 +519,14 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
           @mouseup=${this._handleMouseUp}
         />
         <daikin-icon-button
+          ${ref_js.ref(this._calendarButtonElement)}
           class="absolute top-0 bottom-0 right-2 m-auto"
           type="button"
           color="neutral"
           variant="ghost"
           button-aria-label="Open the date picker"
           ?disabled=${this.disabled}
+          @pointerdown=${this._handlePointerDown}
           @pointerup=${this._handlePointerUp}
           @keydown=${this._handleCalendarKeyDown}
         >
@@ -520,14 +535,13 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
       </div>
       <daikin-calendar
         ${ref_js.ref(this._calendarElement)}
+        ${this._focusTrapController.refContainer()}
         id="calendar"
-        .value=${this._value ? calendarCommon.formatDateForProperty(this._value) : null}
+        value=${this._value ? calendarCommon.formatDateForProperty(this._value) : lit.nothing}
         min=${calendarCommon.formatDateForProperty(min)}
         max=${calendarCommon.formatDateForProperty(max)}
-        default-value=${ifDefined_js.ifDefined(
-      this._defaultValue ? calendarCommon.formatDateForProperty(this._defaultValue) : void 0
-    )}
-        popover="auto"
+        default-value=${ifDefined_js.ifDefined(this.defaultValue)}
+        popover="manual"
         class="absolute left-[--floating-x,0] top-[--floating-y,0]"
         @toggle=${this._handleToggle}
         @select=${this._handleSelect}
@@ -535,6 +549,9 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
         ${this._autoUpdateController.refFloating()}
       >
       </daikin-calendar>
+      <span class="sr-only" aria-live="polite"
+        >${this.value ? `${this._label ?? ""} Selected: ${this.value}` : ""}
+      </span>
       ${// Activate auto update only when the tooltip is open.
     // TODO(DDS-1226): refactor here with CSS Anchor Positioning instead of using floating-ui
     guard_js.guard(
@@ -542,10 +559,25 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
       () => this._autoUpdateController.directive(
         {
           placement: "bottom-start",
-          middleware: [dom.offset({ mainAxis: 0 }), dom.flip(), dom.shift()]
+          middleware: [
+            dom.offset({ mainAxis: 0 }),
+            dom.flip(),
+            dom.shift(),
+            dom.size({
+              apply({ availableHeight, elements }) {
+                Object.assign(elements.floating.style, {
+                  maxHeight: `${availableHeight}px`
+                });
+              }
+            })
+          ]
         },
         this.open
       )
+    )}
+      ${guard_js.guard(
+      [this.open],
+      () => this._focusTrapController.directive(this.open)
     )}`;
   }
   willUpdate(changedProperties) {
@@ -563,6 +595,12 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
         }
       }
     }
+    if (changedProperties.has("value")) {
+      if (calendarCommon.tryParseDateFromProperty(this.value)) {
+        const newDate = calendarCommon.parseDateFromProperty(this.value);
+        this.error = calendarCommon.isDateOutOfRange(newDate, this._min, this._max);
+      }
+    }
   }
   updated(changedProperties) {
     var _a;
@@ -603,31 +641,31 @@ exports.DaikinDatePicker.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "" })
 ], exports.DaikinDatePicker.prototype, "placeholder", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "1900-01-01" })
 ], exports.DaikinDatePicker.prototype, "min", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "2099-12-31" })
 ], exports.DaikinDatePicker.prototype, "max", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinDatePicker.prototype, "readonly", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinDatePicker.prototype, "disabled", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinDatePicker.prototype, "required", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinDatePicker.prototype, "error", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinDatePicker.prototype, "open", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true, attribute: "default-value" })
+  ddsProperty.property({ type: String, reflect: true, attribute: "default-value" })
 ], exports.DaikinDatePicker.prototype, "defaultValue", 2);
 __decorateClass([
   decorators_js.state()

package/dist/cjs-dev/components/date-picker/daikin-date-picker.d.cts

@@ -4,6 +4,13 @@ import { DaikinInputGroup } from "../input-group/daikin-input-group.cjs";
 /**
  * The date picker component provides a date selection function that can be combined with forms. This component uses `daikin-calendar` internally (users do not need to nest this).
  *
+ * @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 select - Fires when the date is selected.
  *
  * @example
@@ -21,15 +28,17 @@ export declare class DaikinDatePicker extends DDSFormElement {
     /**
      * The placeholder text.
      */
-    placeholder: string | null;
+    placeholder: string;
     /**
      * The minimum date.
-     * example: `1900-01-01`
+     *
+     * @default "1900-01-01"
      */
     min: string;
     /**
      * The maximum date.
-     * example: `2099-12-31`
+     *
+     * @default "2099-12-31"
      */
     max: string;
     /**
@@ -70,12 +79,15 @@ export declare class DaikinDatePicker extends DDSFormElement {
     private _autoUpdateController;
     private _dateInputElement;
     private _calendarElement;
+    private _calendarButtonElement;
     private get _value();
     private get _min();
     private get _max();
-    private get _defaultValue();
     private get _viewDate();
     private get _open();
+    private _ignoreCloseByFocusTrap;
+    private _handleCloseCalendar;
+    private readonly _focusTrapController;
     private _emitSelect;
     private _handleFocusIn;
     private _handleFocusOut;
@@ -84,12 +96,14 @@ export declare class DaikinDatePicker extends DDSFormElement {
     private _handleKeyDown;
     private _handleBeforeInput;
     private _handleSelect;
+    private _handlePointerDown;
     private _handlePointerUp;
     private _handleCalendarKeyDown;
     private _handleToggle;
     private _updateValue;
     private _updateInputSelection;
     private _updateSelection;
+    label: string | null;
     render(): import('lit-html').TemplateResult<1>;
     protected willUpdate(changedProperties: PropertyValues<this>): void;
     protected updated(changedProperties: PropertyValues<this>): void;

package/dist/cjs-dev/components/dropdown/daikin-dropdown.cjs

@@ -4,10 +4,10 @@ const dom = require("@floating-ui/dom");
 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");
 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 floatingUiAutoUpdate = require("../../controllers/floating-ui-auto-update.cjs");
@@ -46,7 +46,7 @@ const cvaButton = classVarianceAuthority.cva(
     "outline",
     "outline-1",
     "-outline-offset-1",
-    "break-all",
+    "natural-break",
     "focus-visible:outline-2",
     "focus-visible:-outline-offset-2",
     "enabled:outline-[--color-base]",
@@ -105,7 +105,6 @@ const floatingPositionOptions = {
 exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElement {
   constructor() {
     super(...arguments);
-    this.placeholder = "";
     this.disabled = false;
     this.required = false;
     this.error = false;
@@ -322,10 +321,11 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElem
     this._updateItemsSelectable();
   }
   render() {
-    const fallbackLabel = this.open && !this.disabled ? "Close dropdown" : this.selectedOptions.length ? `Selected: ${this._selectionLabels.join(", ")}` : "Open dropdown";
+    const fallbackLabel = this.open && !this.disabled ? "Close dropdown" : this.selectedOptions.length ? `Selected: ${this._selectionLabels.join(", ")}` : this.value ? `Selected: ${this.value}` : "Open dropdown";
     return lit.html`<div class="w-full" @keydown=${this._handleKeyDown}>
       <button
         ${ref_js.ref(this._dropdownRef)}
+        id="dropdown-button"
         type="button"
         class=${cvaButton({
       open: this.open,
@@ -333,10 +333,10 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElem
       placeholder: !this.selectedOptions.length
     })}
         ?disabled=${this.disabled}
-        aria-label=${this._label ?? fallbackLabel}
+        aria-label=${`${this._label ?? ""} ${fallbackLabel}`}
         aria-expanded=${this.open && !this.disabled}
         aria-disabled=${this.disabled}
-        aria-controls="dropdown-items"
+        aria-controls=${this.open ? "dropdown-items" : lit.nothing}
         aria-required=${this.required}
         aria-haspopup="listbox"
         @pointerup=${this._handlePointerUp}
@@ -350,16 +350,14 @@ exports.DaikinDropdown = class DaikinDropdown extends ddsFormElement.DDSFormElem
       </button>
       <div
         id="dropdown-items"
+        role="listbox"
         popover="manual"
         class="flex flex-col overflow-hidden floating-unready:hidden absolute left-[--floating-x,0] top-[--floating-y,0] min-w-[--floating-width] max-h-[12.5rem] border border-ddt-color-divider opacity-1 transition-[opacity] rounded max-w-min"
+        aria-labelledby="dropdown-button"
         @floating-ready=${this._handleFloatingReady}
         ${this._autoUpdateController.refFloating()}
       >
-        <div
-          class="flex-1 overflow-y-auto break-all"
-          aria-label=${ifDefined_js.ifDefined(this._label ?? void 0)}
-          role="listbox"
-        >
+        <div class="flex-1 overflow-y-auto natural-break">
           <slot
             @slotchange=${this._handleSlotChange}
             @select=${this._handleSelect}
@@ -451,28 +449,28 @@ exports.DaikinDropdown.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "" })
 ], exports.DaikinDropdown.prototype, "placeholder", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinDropdown.prototype, "disabled", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinDropdown.prototype, "required", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinDropdown.prototype, "error", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinDropdown.prototype, "open", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinDropdown.prototype, "multiple", 2);
 __decorateClass([
-  decorators_js.property({ type: Array, attribute: false })
+  ddsProperty.property({ type: Array, attribute: false })
 ], exports.DaikinDropdown.prototype, "selectedOptions", 2);
 __decorateClass([
-  decorators_js.property({ type: Number, reflect: true, attribute: "max-labels" })
+  ddsProperty.property({ type: Number, reflect: true, attribute: "max-labels" })
 ], exports.DaikinDropdown.prototype, "maxLabels", 2);
 __decorateClass([
   decorators_js.queryAssignedElements({ selector: "daikin-dropdown-item" })

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

@@ -8,6 +8,13 @@ import { DaikinInputGroup } from "../input-group/index.cjs";
  * - `daikin-dropdown` > `daikin-dropdown-item`
  * - `daikin-input-group` > `daikin-dropdown` > `daikin-dropdown-item`
  *
+ * @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 custom event emitted when a user selects a dropdown item.
  *
  * @slot - Dropdown item list slot. Place `daikin-dropdown-item` elements here.

package/dist/cjs-dev/components/dropdown-item/daikin-dropdown-item.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");
@@ -162,16 +163,16 @@ exports.DaikinDropdownItem.styles = lit.css`
     }
   `;
 __decorateClass([
-  decorators_js.property({ type: String })
+  ddsProperty.property({ type: String })
 ], exports.DaikinDropdownItem.prototype, "value", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinDropdownItem.prototype, "disabled", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinDropdownItem.prototype, "selected", 2);
 __decorateClass([
-  decorators_js.property({ type: Boolean, reflect: true })
+  ddsProperty.property({ type: Boolean, reflect: true })
 ], exports.DaikinDropdownItem.prototype, "selectable", 2);
 __decorateClass([
   decorators_js.query("button,span[role=option]")

package/dist/cjs-dev/components/icon/daikin-icon.cjs

@@ -6,6 +6,7 @@ const decorators_js = require("lit/decorators.js");
 const unsafeHtml_js = require("lit/directives/unsafe-html.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 iconRegistry = require("../../icon-registry.cjs");
@@ -63,9 +64,6 @@ exports.DaikinIcon = class DaikinIcon extends ddsElement.DDSElement {
   constructor() {
     super(...arguments);
     this.registry = iconRegistry.iconRegistry;
-    this.icon = null;
-    this.color = "default";
-    this.size = "current";
     this._iconData = null;
   }
   connectedCallback() {
@@ -193,32 +191,47 @@ exports.DaikinIcon.styles = lit.css`
     }
 
     :host([size="s"]) {
-      --ddc-icon-size: 12px;
+      --ddc-icon-size: 16px;
     }
 
     :host([size="m"]) {
-      --ddc-icon-size: 16px;
+      --ddc-icon-size: 24px;
     }
 
     :host([size="l"]) {
-      --ddc-icon-size: 20px;
+      --ddc-icon-size: 32px;
     }
 
     :host([size="xl"]) {
-      --ddc-icon-size: 24px;
+      --ddc-icon-size: 40px;
     }
   `;
 __decorateClass([
-  decorators_js.property({ attribute: false })
+  ddsProperty.property({ attribute: false })
 ], exports.DaikinIcon.prototype, "registry", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({ type: String, reflect: true, fallbackValue: "" })
 ], exports.DaikinIcon.prototype, "icon", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "default",
+    isAllowedValue: ddsProperty.oneOf([
+      "default",
+      "current",
+      "black",
+      "white"
+    ])
+  })
 ], exports.DaikinIcon.prototype, "color", 2);
 __decorateClass([
-  decorators_js.property({ type: String, reflect: true })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: "current",
+    isAllowedValue: ddsProperty.oneOf(["s", "m", "l", "xl", "current"])
+  })
 ], exports.DaikinIcon.prototype, "size", 2);
 __decorateClass([
   decorators_js.state()