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

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

@@ -40,9 +40,7 @@ const cvaInput = classVarianceAuthority.cva(
     "pr-16",
     "rounded-sm",
     "overflow-hidden",
-    "font-daikinSerif",
     "text-left",
-    "leading-[130%]",
     "relative",
     "outline-solid",
     "outline-1",
@@ -82,8 +80,6 @@ const cvaOption = classVarianceAuthority.cva(
     "size-full",
     "min-h-12",
     "p-3",
-    "font-daikinSerif",
-    "leading-[130%]",
     "text-left",
     "relative",
     "data-focus:outline-solid",
@@ -542,6 +538,17 @@ exports.DaikinCombobox = class DaikinCombobox extends ddsFormElement.DDSFormElem
         this.focus();
       }
     }
+    if (changedProperties.has("open")) {
+      const wasOpen = changedProperties.get("open");
+      if (wasOpen !== void 0) {
+        this.dispatchEvent(
+          new ToggleEvent("toggle", {
+            oldState: wasOpen ? "open" : "closed",
+            newState: this.open ? "open" : "closed"
+          })
+        );
+      }
+    }
     if (changedProperties.has("_currentFocusItemIndex")) {
       const focusedItem = this.renderRoot.querySelector("[data-focus]");
       focusedItem == null ? void 0 : focusedItem.scrollIntoView({ block: "nearest" });

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

@@ -23,10 +23,11 @@ export declare function defaultFilterFn(items: readonly ComboboxItem[], value: s
  * @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.
+ * @prop {String} value - The form value, submitted as a name/value pair when submitting the form. To keep external state in sync, listen to the `change` event.
  *
  * @fires change - A custom event emitted when a user selects a combobox item or inputs a custom value.
  * @fires input - A retargeted event of a [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event). Triggered when the user types in the input field, clicks clear button, or selects from dropdown options.
+ * @fires toggle - A custom event emitted when the combobox menu opens or closes.
  *
  * @example
  *
@@ -63,6 +64,7 @@ export declare class DaikinCombobox extends DDSFormElement {
     error: boolean;
     /**
      * Whether the combobox menu is opened.
+     * When controlling this property externally, listen to the `toggle` event and sync your state based on `event.newState` to keep it in sync.
      */
     open: boolean;
     /**

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

@@ -29,28 +29,62 @@ var __decorateClass = (decorators2, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-const DATE_ITEMS = [
-  {
-    type: "month",
-    range: [0, 2]
-  },
-  {
-    type: "day",
-    range: [3, 5]
-  },
-  {
-    type: "year",
-    range: [6, 10]
+const dateTimeFormatPartsCache = /* @__PURE__ */ new Map();
+function getSafeDateTimeFormatParts(locale) {
+  const options = {
+    year: "numeric",
+    month: "numeric",
+    day: "numeric"
+  };
+  const key = locale ?? "__DEFAULT__";
+  const cached = dateTimeFormatPartsCache.get(key);
+  if (cached) return cached;
+  try {
+    const parts = new Intl.DateTimeFormat(
+      locale ?? void 0,
+      options
+    ).formatToParts(0);
+    dateTimeFormatPartsCache.set(key, parts);
+    return parts;
+  } catch {
+    const parts = new Intl.DateTimeFormat(void 0, options).formatToParts(0);
+    dateTimeFormatPartsCache.set(key, parts);
+    return parts;
   }
-];
+}
+function getDateOrderAndSeparator(locale) {
+  const parts = getSafeDateTimeFormatParts(locale ?? void 0);
+  const order = parts.filter(
+    (p) => ["year", "month", "day"].includes(p.type)
+  ).map((p) => p.type);
+  const literals = parts.filter((p) => p.type === "literal");
+  const sep = literals.length >= 2 && literals[0].value === literals[1].value ? literals[0].value : "/";
+  const requiredParts = ["year", "month", "day"];
+  const isValidOrder = order.length === 3 && requiredParts.every((part) => order.includes(part));
+  const isValidSep = sep.length > 0 && /^\D+$/.test(sep);
+  if (!isValidOrder || !isValidSep) {
+    return {
+      order: ["month", "day", "year"],
+      sep: "/"
+    };
+  }
+  return { order, sep };
+}
+function getDateItems(locale) {
+  const { order, sep } = getDateOrderAndSeparator(locale);
+  const lengths = { year: 4, month: 2, day: 2 };
+  const items = order.map((key, i) => {
+    const type = key;
+    const len = lengths[type];
+    const start = order.slice(0, i).reduce((sum, k) => sum + lengths[k], 0) + i * sep.length;
+    const end = start + len;
+    return { type, range: [start, end] };
+  });
+  return items;
+}
 const PLACEHOLDER_YEAR = "YYYY";
 const PLACEHOLDER_MONTH = "MM";
 const PLACEHOLDER_DAY = "DD";
-const PLACEHOLDER_ALL = formatPartsForUI({
-  year: PLACEHOLDER_YEAR,
-  month: PLACEHOLDER_MONTH,
-  day: PLACEHOLDER_DAY
-});
 const cvaField = classVarianceAuthority.cva(
   [
     "flex",
@@ -94,15 +128,25 @@ const cvaField = classVarianceAuthority.cva(
     }
   }
 );
-function parsePartsFromUIValue(value) {
-  const [month, day, year] = value.split("/");
-  return { year, month, day };
+function parsePartsFromUIValue(value, locale) {
+  const { order, sep } = getDateOrderAndSeparator(locale);
+  const parts = value.split(sep);
+  return Object.fromEntries(
+    order.map((key, i) => [key, parts[i] ?? ""])
+  );
 }
-function formatPartsForUI({ year, month, day }) {
-  return `${month}/${day}/${year}`;
+function formatPartsForUI(parts, locale) {
+  const { order, sep } = getDateOrderAndSeparator(locale);
+  return order.map((k) => parts[k]).join(sep);
 }
-function tryParseDateFromUIValue(value) {
-  const { year, month, day } = parsePartsFromUIValue(value);
+function getPlaceholderAll(locale) {
+  return formatPartsForUI(
+    { year: PLACEHOLDER_YEAR, month: PLACEHOLDER_MONTH, day: PLACEHOLDER_DAY },
+    locale
+  );
+}
+function tryParseDateFromUIValue(value, locale) {
+  const { year, month, day } = parsePartsFromUIValue(value, locale);
   if (
     // Prevent treating incomplete year entries (such as 0202) as valid.
     // This also means that dates less than 1000 years ago cannot be handled.
@@ -116,15 +160,18 @@ function tryParseDateFromUIValue(value) {
   }
   return date;
 }
-function formatDateForUI(date) {
-  return formatPartsForUI({
-    year: String(date.getUTCFullYear()).padStart(4, "0"),
-    month: String(date.getUTCMonth() + 1).padStart(2, "0"),
-    day: String(date.getUTCDate()).padStart(2, "0")
-  });
+function formatDateForUI(date, locale) {
+  return formatPartsForUI(
+    {
+      year: String(date.getUTCFullYear()).padStart(4, "0"),
+      month: String(date.getUTCMonth() + 1).padStart(2, "0"),
+      day: String(date.getUTCDate()).padStart(2, "0")
+    },
+    locale
+  );
 }
-function getDateItemInSelection(selectionStart, selectionEnd) {
-  for (const { type, range } of DATE_ITEMS) {
+function getDateItemInSelection(selectionStart, selectionEnd, locale) {
+  for (const { type, range } of getDateItems(locale)) {
     if (range[0] <= selectionStart && selectionStart <= range[1] && range[0] <= selectionEnd && selectionEnd <= range[1]) {
       return type;
     }
@@ -239,12 +286,21 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
     this.error = false;
     this.open = false;
     this.defaultValue = null;
+    this.locale = null;
     this._label = null;
     this._currentSelection = "month";
     this._autoUpdateController = new floatingUiAutoUpdate.FloatingUIAutoUpdateController(this);
     this._dateInputElement = ref_js.createRef();
     this._calendarElement = ref_js.createRef();
     this._calendarButtonElement = ref_js.createRef();
+    this._getLocale = () => this.locale ?? null;
+    this._getDateItems = () => getDateItems(this._getLocale());
+    this._parsePartsFromUIValue = (v) => parsePartsFromUIValue(v, this._getLocale());
+    this._formatPartsForUI = (p) => formatPartsForUI(p, this._getLocale());
+    this._tryParseDateFromUIValue = (v) => tryParseDateFromUIValue(v, this._getLocale());
+    this._formatDateForUI = (d) => formatDateForUI(d, this._getLocale());
+    this._getPlaceholderAll = () => getPlaceholderAll(this._getLocale());
+    this._getDateItemInSelection = (s, e) => getDateItemInSelection(s, e, this._getLocale());
     this._ignoreCloseByFocusTrap = false;
     this._handleCloseCalendar = () => {
       var _a;
@@ -258,6 +314,9 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
     );
     this.label = null;
   }
+  static getDefaultPlaceholder(element) {
+    return getPlaceholderAll(element._getLocale());
+  }
   get _value() {
     return calendarCommon.tryParseDateFromProperty(this.value);
   }
@@ -288,7 +347,7 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
   }
   _handleFocusOut(event) {
     const target = event.target;
-    if (target.value === PLACEHOLDER_ALL) {
+    if (target.value === this._getPlaceholderAll()) {
       target.value = "";
     }
   }
@@ -300,11 +359,11 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
     event.preventDefault();
     const selectionStart = ((_a = this._dateInputElement.value) == null ? void 0 : _a.selectionStart) ?? 0;
     const selectionEnd = ((_b = this._dateInputElement.value) == null ? void 0 : _b.selectionEnd) ?? 0;
-    const dateItemInSelection = getDateItemInSelection(
+    const dateItemInSelection = this._getDateItemInSelection(
       selectionStart,
       selectionEnd
     );
-    if (event.target.value === PLACEHOLDER_ALL && !dateItemInSelection) {
+    if (event.target.value === this._getPlaceholderAll() && !dateItemInSelection) {
       this._updateSelection("month");
       return;
     }
@@ -318,7 +377,7 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
     }
     const target = event.target;
     const key = event.key;
-    const parts = parsePartsFromUIValue(target.value);
+    const parts = this._parsePartsFromUIValue(target.value);
     if (key === "Backspace") {
       event.preventDefault();
       const itemToRemove = this._currentSelection;
@@ -328,7 +387,7 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
         day: PLACEHOLDER_DAY
       }[itemToRemove];
       if (parts[itemToRemove] !== placeholder) {
-        target.value = formatPartsForUI({
+        target.value = this._formatPartsForUI({
           ...parts,
           [itemToRemove]: placeholder
         });
@@ -341,13 +400,14 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
       event.preventDefault();
       const newState = handleDigitInput(parts, this._currentSelection, key);
       if (newState) {
-        target.value = formatPartsForUI(newState.parts);
-        const currentIndex = DATE_ITEMS.findIndex(
+        target.value = this._formatPartsForUI(newState.parts);
+        const items = this._getDateItems();
+        const currentIndex = items.findIndex(
           ({ type }) => type === this._currentSelection
         );
-        const nextIndex = currentIndex >= 0 ? Math.min(currentIndex + 1, DATE_ITEMS.length - 1) : -1;
+        const nextIndex = currentIndex >= 0 ? Math.min(currentIndex + 1, items.length - 1) : -1;
         this._updateSelection(
-          newState.done && nextIndex >= 0 ? DATE_ITEMS[nextIndex].type : this._currentSelection
+          newState.done && nextIndex >= 0 ? items[nextIndex].type : this._currentSelection
         );
       }
       this._updateValue(event);
@@ -359,14 +419,12 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
     }[key];
     if (moveOffset) {
       event.preventDefault();
-      const currentIndex = DATE_ITEMS.findIndex(
+      const items = this._getDateItems();
+      const currentIndex = items.findIndex(
         ({ type }) => type === this._currentSelection
       );
-      const newIndex = currentIndex >= 0 ? Math.min(
-        Math.max(currentIndex + moveOffset, 0),
-        DATE_ITEMS.length - 1
-      ) : 0;
-      this._updateSelection(DATE_ITEMS[newIndex].type);
+      const newIndex = currentIndex >= 0 ? Math.min(Math.max(currentIndex + moveOffset, 0), items.length - 1) : 0;
+      this._updateSelection(items[newIndex].type);
       return;
     }
     const countOffset = {
@@ -384,7 +442,7 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
         this._max
       );
       if (newParts) {
-        target.value = formatPartsForUI(newParts);
+        target.value = this._formatPartsForUI(newParts);
         this._updateSelection(this._currentSelection);
       }
       this._updateValue(event);
@@ -410,7 +468,7 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
     const target = this._dateInputElement.value;
     const value = calendarCommon.parseDateFromProperty(calendar.value);
     this.value = calendarCommon.formatDateForProperty(value);
-    target.value = formatDateForUI(value);
+    target.value = this._formatDateForUI(value);
     this.error = false;
     if (event.type === "select") {
       this.open = false;
@@ -448,11 +506,11 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
   }
   _updateValue(event) {
     const target = event.target;
-    if (target.value === PLACEHOLDER_ALL) {
+    if (target.value === this._getPlaceholderAll()) {
       this.error = false;
       return;
     }
-    const newDate = tryParseDateFromUIValue(target.value);
+    const newDate = this._tryParseDateFromUIValue(target.value);
     if (!newDate || calendarCommon.isDateOutOfRange(newDate, this._min, this._max)) {
       this.error = true;
       return;
@@ -469,9 +527,9 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
       return;
     }
     if (target.value === "") {
-      target.value = PLACEHOLDER_ALL;
+      target.value = this._getPlaceholderAll();
     }
-    const itemInfo = DATE_ITEMS[0];
+    const itemInfo = this._getDateItems()[0];
     (_a = this._dateInputElement.value) == null ? void 0 : _a.setSelectionRange(
       itemInfo.range[0],
       itemInfo.range[1]
@@ -484,7 +542,7 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
     if (!selection) {
       return;
     }
-    const itemInfo = DATE_ITEMS.find(({ type }) => type === dateItem);
+    const itemInfo = this._getDateItems().find(({ type }) => type === dateItem);
     if (itemInfo) {
       (_a = this._dateInputElement.value) == null ? void 0 : _a.setSelectionRange(
         itemInfo.range[0],
@@ -505,7 +563,7 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
     const min = this._min;
     const max = this._max;
     return lit.html`<div
-        class="size-full relative font-daikinSerif"
+        class="size-full relative"
         ${this._autoUpdateController.refReference()}
       >
         <input
@@ -513,12 +571,12 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
           class=${cvaField({ error: this.error })}
           type="text"
           name=${ifDefined_js.ifDefined(this.getBackingProperty("name"))}
-          placeholder=${ifDefined_js.ifDefined(this.getBackingProperty("placeholder"))}
+          placeholder=${ifDefined_js.ifDefined(this.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) : ""}
+          .value=${this._value ? this._formatDateForUI(this._value) : ""}
           @change=${this._handleChange}
           @focusin=${this._handleFocusIn}
           @focusout=${this._handleFocusOut}
@@ -540,6 +598,9 @@ exports.DaikinDatePicker = class DaikinDatePicker extends ddsFormElement.DDSForm
         >
           <span class=${calendarCommon.cvaIconButton({ intent: "calender" })}></span>
         </daikin-icon-button>
+        <span class="sr-only" aria-live="polite"
+          >${this.value ? `${this._label ?? ""} Selected: ${this.value}` : ""}
+        </span>
       </div>
       <daikin-calendar
         ${ref_js.ref(this._calendarElement)}
@@ -557,9 +618,6 @@ 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(
@@ -638,7 +696,11 @@ exports.DaikinDatePicker.styles = lit.css`
     }
   `;
 __decorateClass([
-  ddsProperty.property({ type: String, reflect: true, fallbackValue: "" })
+  ddsProperty.property({
+    type: String,
+    reflect: true,
+    fallbackValue: exports.DaikinDatePicker.getDefaultPlaceholder
+  })
 ], exports.DaikinDatePicker.prototype, "placeholder", 2);
 __decorateClass([
   ddsProperty.property({ type: String, reflect: true, fallbackValue: "1900-01-01" })
@@ -664,6 +726,9 @@ __decorateClass([
 __decorateClass([
   ddsProperty.property({ type: String, reflect: true, attribute: "default-value" })
 ], exports.DaikinDatePicker.prototype, "defaultValue", 2);
+__decorateClass([
+  ddsProperty.property({ type: String, reflect: true })
+], exports.DaikinDatePicker.prototype, "locale", 2);
 __decorateClass([
   decorators_js.state()
 ], exports.DaikinDatePicker.prototype, "_label", 2);

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

@@ -9,9 +9,10 @@ import { DaikinInputGroup } from "../input-group/daikin-input-group.cjs";
  * @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.
+ * @prop {String} value - The form value, submitted as a name/value pair when submitting the form. To keep external state in sync, listen to the `select` event.
  *
  * @fires select - Fires when the date is selected.
+ * @fires toggle - A custom event emitted when the calendar picker opens or closes.
  *
  * @example
  *
@@ -25,6 +26,7 @@ import { DaikinInputGroup } from "../input-group/daikin-input-group.cjs";
  */
 export declare class DaikinDatePicker extends DDSFormElement {
     static readonly styles: import('lit').CSSResult;
+    private static getDefaultPlaceholder;
     /**
      * The placeholder text.
      */
@@ -63,6 +65,7 @@ export declare class DaikinDatePicker extends DDSFormElement {
     error: boolean;
     /**
      * Whether the date picker is open.
+     * When controlling this property externally, listen to the `toggle` event and sync your state based on `event.newState` to keep it in sync.
      */
     open: boolean;
     /**
@@ -70,6 +73,13 @@ export declare class DaikinDatePicker extends DDSFormElement {
      * If there is a `value` attribute, this is ignored.
      */
     defaultValue: string | null;
+    /**
+     * The locale used for date formatting.
+     * If not provided, the browser's default locale will be used. It is usually not necessary to specify it explicitly.
+     *
+     * @private
+     */
+    locale: string | null;
     /**
      * The label text used as the value of aria-label.
      * Set automatically by `reflectInputGroup` method.
@@ -80,6 +90,14 @@ export declare class DaikinDatePicker extends DDSFormElement {
     private _dateInputElement;
     private _calendarElement;
     private _calendarButtonElement;
+    private _getLocale;
+    private _getDateItems;
+    private _parsePartsFromUIValue;
+    private _formatPartsForUI;
+    private _tryParseDateFromUIValue;
+    private _formatDateForUI;
+    private _getPlaceholderAll;
+    private _getDateItemInSelection;
     private get _value();
     private get _min();
     private get _max();

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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const classVarianceAuthority = require("class-variance-authority");
+const lit = require("lit");
+const ddsElement = require("../../base/dds-element.cjs");
+require("../../base/dds-form-element.cjs");
+require("lit/decorators.js");
+const decorators = require("../../base/decorators.cjs");
+require("../../base/define.cjs");
+const tailwind = require("../../tailwind.css.cjs");
+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 = decorator(result) || result;
+  return result;
+};
+const DIVIDER_CLASS_NAME = classVarianceAuthority.cva([
+  "w-full",
+  "m-0",
+  "border-t",
+  "border-ddt-color-divider"
+])();
+exports.DaikinDivider = class DaikinDivider extends ddsElement.DDSElement {
+  render() {
+    return lit.html`<hr
+      class=${DIVIDER_CLASS_NAME}
+      aria-orientation="horizontal"
+    />`;
+  }
+};
+exports.DaikinDivider.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: block;
+    }
+  `;
+exports.DaikinDivider = __decorateClass([
+  decorators.ddsElement("daikin-divider")
+], exports.DaikinDivider);

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

@@ -0,0 +1,23 @@
+import { DDSElement } from "../../base/index.cjs";
+/**
+ * The divider is a UI element that represents a thematic break between paragraph-level elements. It can be used to separate content in a list, or to divide sections of a page.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/divider/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-divider></daikin-divider>
+ * ```
+ */
+export declare class DaikinDivider extends DDSElement {
+    static readonly styles: import('lit').CSSResult;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-divider": DaikinDivider;
+    }
+}

package/dist/cjs/components/divider/index.cjs

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

package/dist/cjs/components/divider/index.d.cts

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