npm - @daikin-oss/design-system-web-components - Versions diffs - 1.5.2-next.0 → 1.6.0-next.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (483) hide show

package/dist/cjs/components/modal/daikin-modal.d.cts CHANGED Viewed

@@ -2,6 +2,29 @@ import { DDSElement } from "../../base/index.cjs";
 /**
  * `daikin-modal` is an interactive overlay that appears on top of the main content to prompt user input or display important information, temporarily blocking interaction with the rest of the page. It's crucial for capturing user attention and guiding specific actions.
  *
+ * ### Scroll Lock
+ *
+ * When the modal is open, it sets the CSS custom property `--ddc-scroll-lock: hidden` on the `<html>` element and removes it when the modal is closed.
+ * To enable scroll locking, add the following CSS. If you use a custom scroll container instead of `body`, replace the selector accordingly:
+ *
+ * ```css
+ * body {
+ *   overflow: var(--ddc-scroll-lock, auto);
+ * }
+ * ```
+ *
+ * When no modal is open, `--ddc-scroll-lock` is absent and the fallback value (`auto`) takes effect.
+ * When a modal opens, it is set to `hidden`, locking scroll on every element that uses it.
+ *
+ * ## Multiple modals or drawers
+ *
+ * If multiple `daikin-modal` or `daikin-drawer` instances are open at the same time, the component tracks them with an internal reference count.
+ * `--ddc-scroll-lock` is only removed from `<html>` once **every** open modal or drawer has been closed - closing one modal or drawer while others remain open will not unlock scroll.
+ * This means your CSS declaration requires no extra logic to handle concurrent modals or drawers correctly.
+ *
+ * > **Note:** The `--ddc-scroll-lock` property is set on `<html>` and inherits through the entire document,
+ * > so the CSS declaration above works on any element regardless of its position in the DOM tree.
+ *
  * Hierarchy:
  * - `daikin-modal` > `daikin-modal-header`
  * - `daikin-modal` > `daikin-modal-footer`
@@ -37,6 +60,7 @@ export declare class DaikinModal extends DDSElement {
     static styles: import('lit').CSSResult;
     /**
      * Whether the modal is open.
+     * When controlling this property externally, listen to the `close` event and set your state to `false` to keep it in sync.
      */
     open: boolean;
     /**
@@ -49,6 +73,7 @@ export declare class DaikinModal extends DDSElement {
      * The aria-label of the modal.
      */
     modalAriaLabel: string | null;
+    private readonly _blockScrollController;
     /**
      * If this property set by `true`, you can't close modal by clicking outside of modal or Escape key.
      * In this case, please ensure you provide users with a method to close the modal, such as a close button in the header or a close button in the footer.

package/dist/cjs/components/modal-footer/daikin-modal-footer.cjs CHANGED Viewed

@@ -17,7 +17,7 @@ var __decorateClass = (decorators2, target, key, kind) => {
 };
 exports.DaikinModalFooter = class DaikinModalFooter extends ddsElement.DDSElement {
   render() {
-    return lit.html`<div class="flex flex-wrap justify-end w-full gap-4">
+    return lit.html`<div class="flex flex-wrap justify-end w-full gap-x-4 gap-y-3">
       <slot></slot>
     </div>`;
   }

package/dist/cjs/components/modal-header/daikin-modal-header.cjs CHANGED Viewed

@@ -24,7 +24,6 @@ var __decorateClass = (decorators2, target, key, kind) => {
 const cvaTitle = classVarianceAuthority.cva([
   "flex-none",
   "text-ddt-color-common-text-primary",
-  "font-daikinSerif",
   "text-xl",
   "leading-[1.3]",
   "not-italic",
@@ -33,7 +32,6 @@ const cvaTitle = classVarianceAuthority.cva([
 const cvaDescription = classVarianceAuthority.cva([
   "flex-none",
   "text-ddt-color-common-text-primary",
-  "font-daikinSerif",
   "text-base",
   "leading-normal",
   "not-italic",

package/dist/cjs/components/navigation/daikin-navigation.cjs CHANGED Viewed

@@ -36,7 +36,8 @@ exports.DaikinNavigation.styles = lit.css`
     :host {
       display: flex;
-      width: 100%;
+      min-width: 100%;
+      width: max-content;
     }
   `;
 __decorateClass([

package/dist/cjs/components/navigation/daikin-navigation.d.cts CHANGED Viewed

@@ -24,6 +24,7 @@ import { DDSElement } from "../../base/index.cjs";
  *   <daikin-navigation-item href="#" current>
  *     Navigation content 1
  *   </daikin-navigation-item>
+ *   <!-- Menu width can be set on the slotted <daikin-list slot="menu">, or via daikin-menu::part(menu). See the menu documentation for details. -->
  *   <daikin-menu placement="bottom-start">
  *     <daikin-navigation-item type="menu">
  *       Navigation content 2

package/dist/cjs/components/navigation-item/daikin-navigation-item.cjs CHANGED Viewed

@@ -23,6 +23,8 @@ var __decorateClass = (decorators2, target, key, kind) => {
 const cvaBaseClasses = [
   "flex",
   "relative",
+  "h-full",
+  "w-full",
   "gap-1",
   "justify-center",
   "items-center",
@@ -30,9 +32,6 @@ const cvaBaseClasses = [
   "px-8",
   "pt-2",
   "pb-3",
-  "font-daikinSerif",
-  "text-base",
-  "leading-[130%]",
   "font-bold",
   "focus-visible:outline-hidden",
   "focus-visible:before:absolute",
@@ -115,7 +114,7 @@ exports.DaikinNavigationItem = class DaikinNavigationItem extends ddsElement.DDS
       case "link": {
         const linkDisabled = this.disabled || this.href == null;
         return lit.html`
-          <div role="listitem">
+          <div role="listitem" class="h-full">
             <a
               href=${ifDefined_js.ifDefined(!linkDisabled ? this.href : void 0)}
               class=${cvaLinkItem({
@@ -129,14 +128,14 @@ exports.DaikinNavigationItem = class DaikinNavigationItem extends ddsElement.DDS
                 name="left-icon"
                 class="icon-size-6 slotted:flex-none"
               ></slot
-              ><span class="px-1"><slot class="text-nowrap"></slot></span
+              ><span class="px-1 natural-break text-left"><slot></slot></span
             ></a>
           </div>
         `;
       }
       case "menu":
         return lit.html`
-          <div role="listitem">
+          <div role="listitem" class="h-full">
             <button
               type="button"
               class=${cvaMenuItem({
@@ -152,7 +151,7 @@ exports.DaikinNavigationItem = class DaikinNavigationItem extends ddsElement.DDS
                 name="left-icon"
                 class="icon-size-6 slotted:flex-none"
               ></slot
-              ><span class="px-1"><slot class="text-nowrap"></slot></span
+              ><span class="px-1 natural-break text-left"><slot></slot></span
               ><span
                 class="icon-[daikin--chevron-down] size-6 flex-none rotate-(--chevron-rotation)"
               ></span>

package/dist/cjs/components/pagination/daikin-pagination.cjs CHANGED Viewed

@@ -32,7 +32,6 @@ const cvaPageButton = classVarianceAuthority.cva(
     "min-w-12",
     "min-h-12",
     "p-1",
-    "font-daikinSerif",
     "text-base",
     "not-italic",
     "leading-6",
@@ -81,7 +80,6 @@ const cvaEllipsis = classVarianceAuthority.cva([
   "justify-center",
   "w-12",
   "h-12",
-  "font-daikinSerif",
   "text-base",
   "not-italic",
   "font-normal",
@@ -97,7 +95,6 @@ const cvaChevronButton = classVarianceAuthority.cva([
   "w-12",
   "h-12",
   "text-ddt-color-common-neutral-default",
-  "font-daikinSerif",
   "text-base",
   "not-italic",
   "font-normal",
@@ -120,12 +117,22 @@ exports.DaikinPagination = class DaikinPagination extends ddsElement.DDSElement
     this.window = 5;
   }
   _goto(page) {
-    this.current = this.current = Math.max(Math.min(page, this.total), 1);
+    const newPage = Math.max(Math.min(page, this.total), 1);
+    if (!this.dispatchEvent(
+      new CustomEvent("before-change", {
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+        detail: { page: newPage }
+      })
+    )) {
+      return;
+    }
+    this.current = newPage;
     this.dispatchEvent(
       new Event("change", {
         bubbles: true,
-        composed: true,
-        cancelable: true
+        composed: true
       })
     );
   }

package/dist/cjs/components/pagination/daikin-pagination.d.cts CHANGED Viewed

@@ -2,7 +2,8 @@ import { DDSElement } from "../../base/index.cjs";
 /**
  * The pagination component is used to navigate through a list of items that are divided into multiple pages.
  *
- * @fires change - Emitted when the current page number is changed.
+ * @fires before-change - _Cancellable._ A custom event emitted before the current page changes. The pending page number is available as `event.detail.page`. If cancelled, the page will not change.
+ * @fires change - A custom event emitted when the current page number is changed.
  *
  * @example
  *
@@ -19,6 +20,8 @@ export declare class DaikinPagination extends DDSElement {
     /**
      * The current page number, starting at 1.
      * Must be greater than 0 and less than or equal to `this.total`.
+     * To keep external state in sync, listen to the `change` event.
+     * To cancel a page change before it happens, listen to the `before-change` event and call `event.preventDefault()`.
      */
     current: number;
     /**

package/dist/cjs/components/progress-bar/daikin-progress-bar.cjs CHANGED Viewed

@@ -57,7 +57,6 @@ const cvaBarContainer = classVarianceAuthority.cva(
     "justify-between",
     "items-center",
     "text-ddt-color-common-text-primary",
-    "leading-[130%]",
     "font-bold",
     "natural-break"
   ],
@@ -82,7 +81,7 @@ const cvaBarContainer = classVarianceAuthority.cva(
     }
   }
 );
-const cvaHelper = classVarianceAuthority.cva(["text-sm", "leading-[130%]", "natural-break"], {
+const cvaHelper = classVarianceAuthority.cva(["text-(length:--dds-font-size-350)", "natural-break"], {
   variants: {
     variant: {
       inprogress: ["text-ddt-color-common-text-secondary"],
@@ -116,7 +115,7 @@ exports.DaikinProgressBar = class DaikinProgressBar extends ddsElement.DDSElemen
   }
   render() {
     const progressRatio = Math.min(Math.max(this.value / this.max, 0), 1);
-    return lit.html`<div class="flex flex-col gap-2 w-full font-daikinSerif">
+    return lit.html`<div class="flex flex-col gap-2 w-full">
       <div class=${cvaBarContainer({ variant: this.variant })}>
         <slot></slot>
       </div>

package/dist/cjs/components/progress-indicator/daikin-progress-indicator.cjs CHANGED Viewed

@@ -34,7 +34,7 @@ exports.DaikinProgressIndicator = class DaikinProgressIndicator extends ddsEleme
   }
   render() {
     return lit.html`<div
-      class="flex justify-stretch items-start gap-2 w-full font-daikinSerif"
+      class="flex justify-stretch items-start gap-2 w-full"
       role="list"
     >
       <slot @slotchange=${this._handleSlotChange}></slot>

package/dist/cjs/components/progress-indicator/daikin-progress-indicator.d.cts CHANGED Viewed

@@ -16,16 +16,16 @@ import { DDSElement } from "../../base/index.cjs";
  * ```
  *
  * ```html
- * <daikin-progress-indicator>
- *   <daikin-progress-indicator-item state="unfinished">
+ * <daikin-progress-indicator currentItem="1">
+ *   <daikin-progress-indicator-item>
  *     Title 1
  *     <span slot="description">Description 1</span>
  *   </daikin-progress-indicator-item>
- *   <daikin-progress-indicator-item state="inprogress">
+ *   <daikin-progress-indicator-item>
  *     Title 2
  *     <span slot="description">Description 2</span>
  *   </daikin-progress-indicator-item>
- *   <daikin-progress-indicator-item state="finished">
+ *   <daikin-progress-indicator-item>
  *     Title 3
  *     <span slot="description">Description 3</span>
  *   </daikin-progress-indicator-item>

package/dist/cjs/components/progress-indicator-item/daikin-progress-indicator-item.cjs CHANGED Viewed

@@ -27,8 +27,7 @@ const cvaContainer = classVarianceAuthority.cva(
     "w-full",
     "text-ddt-color-common-text-primary",
     "pt-2",
-    "border-t-4",
-    "font-daikinSerif"
+    "border-t-4"
   ],
   {
     variants: {
@@ -50,13 +49,16 @@ exports.DaikinProgressIndicatorItem = class DaikinProgressIndicatorItem extends
     )}
     >
       <div class="flex flex-col gap-1 w-full overflow-auto natural-break">
-        <slot class="font-bold leading-[130%]"></slot>
-        <slot name="description" class="text-sm leading-[130%]"></slot>
+        <span class="font-bold"><slot></slot></span>
+        <slot
+          class="text-(length:--dds-font-size-350)"
+          name="description"
+        ></slot>
       </div>
       ${this.status === "finished" ? lit.html`
             <span
               role="img"
-              class="flex-none size-4 icon-[daikin--success] text-ddt-color-common-brand-default"
+              class="flex-none size-4 icon-[daikin--success] text-ddt-color-common-brand-default mt-0.5"
               aria-label="Completed"
             ></span>
           ` : lit.nothing}

package/dist/cjs/components/progress-indicator-item/daikin-progress-indicator-item.d.cts CHANGED Viewed

@@ -22,7 +22,7 @@ type ProgressIndicatorItemVariantProps = MergeVariantProps<typeof cvaContainer>;
  * ```
  *
  * ```html
- * <daikin-progress-indicator-item state="unfinished">
+ * <daikin-progress-indicator-item>
  *   Progress indicator label
  *   <span slot="description">Progress indicator description</span>
  * </daikin-progress-indicator-item>

package/dist/cjs/components/radio/daikin-radio.cjs CHANGED Viewed

@@ -20,6 +20,17 @@ var __decorateClass = (decorators2, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
+const cvaWrapper = classVarianceAuthority.cva(
+  ["group", "flex", "gap-2", "items-center", "size-full"],
+  {
+    variants: {
+      disabled: {
+        false: ["cursor-pointer"],
+        true: []
+      }
+    }
+  }
+);
 const RADIO_CLASS_NAME = classVarianceAuthority.cva([
   "flex",
   "justify-center",
@@ -33,6 +44,7 @@ const RADIO_CLASS_NAME = classVarianceAuthority.cva([
   "focus-visible:outline-offset-2",
   "focus-visible:outline-ddt-color-common-border-focus",
   "unchecked:border-2",
+  "enabled:cursor-pointer",
   "enabled:unchecked:border-ddt-color-common-neutral-default",
   "group-hover:unchecked:enabled:border-ddt-color-common-neutral-hover",
   "group-active:unchecked:enabled:border-ddt-color-common-neutral-press",
@@ -72,7 +84,7 @@ exports.DaikinRadio = class DaikinRadio extends ddsFormElement.DDSFormElement {
   }
   _handleClick(event) {
     var _a;
-    if (this.disabled) {
+    if (this.disabled || this.disabledByParent) {
       event.preventDefault();
     }
     if (((_a = event.target) == null ? void 0 : _a.tagName) !== "INPUT") {
@@ -92,7 +104,7 @@ exports.DaikinRadio = class DaikinRadio extends ddsFormElement.DDSFormElement {
   render() {
     const disabled = this.disabled || this.disabledByParent;
     return lit.html`<label
-      class="group flex gap-2 items-center size-full font-daikinSerif"
+      class=${cvaWrapper({ disabled })}
       @click=${this._handleClick}
     >
       <span class="p-2">

package/dist/cjs/components/radio/daikin-radio.d.cts CHANGED Viewed

@@ -44,6 +44,7 @@ export declare class DaikinRadio extends DDSFormElement {
     labelPosition: "right" | "hidden";
     /**
      * Specify the radio button checked state.
+     * To keep external state in sync, listen to the `change` event.
      */
     checked: boolean;
     /**

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

@@ -37,7 +37,9 @@ exports.DaikinRadioGroup = class DaikinRadioGroup extends ddsElement.DDSElement
     this.disabled = false;
     this._label = null;
     this._handleRadioChange = (event) => {
+      event.stopPropagation();
       this.value = event.target.value;
+      this.dispatchEvent(new Event("change"));
     };
   }
   _reflectSlotProperties() {

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

@@ -48,7 +48,8 @@ export declare class DaikinRadioGroup extends DDSElement {
     name: string;
     /**
      * `value` of the currently selected radio.
-     * See {@link DaikinRadio.value}.
+     * See the `value` property of `daikin-radio`.
+     * To keep external state in sync, listen to the `change` event.
      */
     value: string;
     /**

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

@@ -44,7 +44,6 @@ const cvaSelect = classVarianceAuthority.cva(
     "slotted-select:pl-4!",
     "slotted-select:pr-12!",
     "slotted-select:text-base!",
-    "slotted-select:font-daikinSerif!",
     "slotted-select:border!",
     "slotted-select:border-(--color-base)!",
     "slotted-select:rounded-sm!",

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

@@ -21,6 +21,14 @@ var __decorateClass = (decorators2, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
+const cvaWrapper = classVarianceAuthority.cva(["relative", "w-full", "h-6"], {
+  variants: {
+    disabled: {
+      false: ["cursor-pointer"],
+      true: []
+    }
+  }
+});
 const cvaSliderThumb = classVarianceAuthority.cva(
   [
     "absolute",
@@ -36,7 +44,6 @@ const cvaSliderThumb = classVarianceAuthority.cva(
     variants: {
       disabled: {
         false: [
-          "cursor-pointer",
           "[&:not([data-dragging])]:bg-ddt-color-common-brand-default",
           "[&:not([data-dragging])]:hover:bg-ddt-color-common-brand-hover",
           "[&:not([data-dragging])]:active:bg-ddt-color-common-brand-press",
@@ -78,11 +85,14 @@ exports.DaikinSlider = class DaikinSlider extends ddsFormElement.DDSFormElement
     this._thumbRef = ref_js.createRef();
     this.value = this.min;
   }
-  _updateFormValue() {
+  _updateFormValue(emitEvents) {
     if (this.disabled) {
       return;
     }
     this.setFormValue(this.value);
+    if (!emitEvents) {
+      return;
+    }
     this.dispatchEvent(
       new Event("change", {
         bubbles: true,
@@ -207,7 +217,7 @@ exports.DaikinSlider = class DaikinSlider extends ddsFormElement.DDSFormElement
     return lit.html`
       <span
         ${ref_js.ref(this._sliderRef)}
-        class="w-full h-6 relative"
+        class=${cvaWrapper({ disabled: this.disabled })}
         style="--slider-ratio:${progress}%"
         @mousedown=${this._startDrag}
         @touchstart=${this._startTouch}
@@ -237,7 +247,7 @@ exports.DaikinSlider = class DaikinSlider extends ddsFormElement.DDSFormElement
     if (!changedProperties.has("value")) {
       return;
     }
-    this._updateFormValue();
+    this._updateFormValue(changedProperties.get("value") !== void 0);
   }
 };
 exports.DaikinSlider.styles = lit.css`

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

@@ -9,7 +9,7 @@ import { DDSFormElement } from "../../base/index.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 `change` event.
  *
  * @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).

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

@@ -22,11 +22,10 @@ var __decorateClass = (decorators2, target, key, kind) => {
 const cvaWrapper = classVarianceAuthority.cva(
   [
     "flex",
+    "relative",
     "items-center",
     "size-full",
-    "font-daikinSerif",
     "font-normal",
-    "leading-[130%]",
     "gap-1",
     "natural-break",
     "before:content-['']",
@@ -35,8 +34,8 @@ const cvaWrapper = classVarianceAuthority.cva(
   {
     variants: {
       size: {
-        small: ["before:size-4", "text-sm"],
-        medium: ["before:size-6", "text-base"]
+        small: ["before:size-4", "text-(length:--dds-font-size-350)"],
+        medium: ["before:size-6"]
       },
       status: {
         neutral: [

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

@@ -28,9 +28,7 @@ const cvaTab = classVarianceAuthority.cva(
     "px-4",
     "pt-2",
     "pb-3",
-    "leading-[130%]",
     "text-center",
-    "font-daikinSerif",
     "tracking-wide",
     "relative",
     "focus-visible:outline-hidden",

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

@@ -189,7 +189,7 @@ exports.DaikinTable = class DaikinTable extends ddsElement.DDSElement {
             </slot>
           </td>`
     );
-    return lit.html`<div class="flex flex-col gap-6 w-full font-daikinSerif">
+    return lit.html`<div class="flex flex-col gap-6 w-full">
       <table
         ${ref_js.ref(this._tableRef)}
         class="w-full group"

package/dist/cjs/components/table/daikin-table.d.cts CHANGED Viewed

@@ -120,6 +120,7 @@ export declare class DaikinTable<T extends {
     sortable: boolean;
     /**
      * An array of `id` values for the selected rows.
+     * When controlling this property externally, listen to the `change-check` event and read the updated `selection` from the component to keep your state in sync.
      */
     selection: string[];
     /**
@@ -127,6 +128,7 @@ export declare class DaikinTable<T extends {
      * Used with the `order` property to determine which column is sorted and in which direction.
      *
      * For example, if `sort = "name"` and `order = "asc"`, the table will be sorted by the "name" column in ascending order.
+     * When controlling `sort` and `order` externally, listen to the `change-sort` event and read the updated `sort` and `order` from the component to keep your state in sync.
      */
     sort: keyof T | null;
     /**

package/dist/cjs/components/tabs/daikin-tabs.d.cts CHANGED Viewed

@@ -43,6 +43,7 @@ export declare class DaikinTabs extends DDSElement {
     static readonly styles: import('lit').CSSResult;
     /**
      * `value` of the currently selected tab (`daikin-tab`).
+     * When controlling this property externally, listen to the `change` event and read the updated `value` from the component to keep your state in sync.
      */
     value: string;
     /**

package/dist/cjs/components/tag/daikin-tag.cjs CHANGED Viewed

@@ -71,7 +71,7 @@ exports.DaikinTag = class DaikinTag extends ddsElement.DDSElement {
         class=${cvaWrapper()}
       >
         <span
-          class="text-ddt-color-common-text-primary p-2 text-sm leading-[130%] font-daikinSerif natural-break"
+          class="text-ddt-color-common-text-primary p-2 text-(length:--dds-font-size-350) natural-break"
         >
           <slot></slot>
         </span>

package/dist/cjs/components/text-area/daikin-text-area.cjs CHANGED Viewed

@@ -29,7 +29,6 @@ const cvaTextArea = classVarianceAuthority.cva(
     "px-4",
     "py-3",
     "rounded-sm",
-    "font-daikinSerif",
     "outline-solid",
     "outline-(--color-border)",
     "outline-1",

package/dist/cjs/components/text-area/daikin-text-area.d.cts CHANGED Viewed

@@ -15,7 +15,7 @@ import { DaikinInputGroup } from "../input-group/index.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 `change` event.
  *
  * @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 `<textarea>` element.
  * @fires input - A retargeted event of a [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).

package/dist/cjs/components/text-field/daikin-text-field.cjs CHANGED Viewed

@@ -36,7 +36,6 @@ const cvaInput = classVarianceAuthority.cva(
     "relative",
     "rounded-sm",
     "overflow-hidden",
-    "font-daikinSerif",
     "outline-solid",
     "outline-(--color-border)",
     "outline-0",

package/dist/cjs/components/text-field/daikin-text-field.d.cts CHANGED Viewed

@@ -15,7 +15,7 @@ import { DaikinInputGroup } from "../input-group/index.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 `change` event.
  *
  * @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>` element.
  * @fires input - A retargeted event of a [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).

package/dist/cjs/components/text-masked-field/daikin-text-masked-field.cjs CHANGED Viewed

@@ -32,7 +32,6 @@ const cvaInput = classVarianceAuthority.cva(
     "relative",
     "rounded-sm",
     "overflow-hidden",
-    "font-daikinSerif",
     "outline-solid",
     "outline-(--color-border)",
     "outline-0",

package/dist/cjs/components/text-masked-field/daikin-text-masked-field.d.cts CHANGED Viewed

@@ -17,7 +17,7 @@ export type { FactoryOpts, InputMask };
  * @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 cloned event of a [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) emitted from the inner `<input>` element.
  * @fires input - A retargeted event of a [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).

package/dist/cjs/components/time-picker/daikin-time-picker.cjs CHANGED Viewed

@@ -487,7 +487,7 @@ exports.DaikinTimePicker = class DaikinTimePicker extends ddsFormElement.DDSForm
     return lit.html`<div
       role="group"
       aria-label=${ifDefined_js.ifDefined(this._label ?? void 0)}
-      class="flex flex-row h-full gap-2 font-daikinSerif"
+      class="flex flex-row h-full gap-2"
     >
       <input
         ${ref_js.ref(this._timeInputElement)}

package/dist/cjs/components/time-picker/daikin-time-picker.d.cts CHANGED Viewed

@@ -73,7 +73,7 @@ export declare function calcDigitInput(parts: Readonly<TimeParts>, item: TimeIte
  * @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 the value of component changed. Validation errors will not trigger this event.
  * @fires input - A retargeted event of a [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event). Triggered when user type value to input area and change the value of component. change dropdown or validation errors will not trigger this event.