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

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

@@ -0,0 +1,230 @@
+import { cva } from "class-variance-authority";
+import { unsafeCSS, css, html } from "lit";
+import { guard } from "lit/directives/guard.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 { BlockScrollController } from "../../controllers/block-scroll.js";
+import { FocusTrapController } from "../../controllers/focus-trap.js";
+import tailwindStyles from "../../tailwind.css.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const cvaPanel = cva(
+  [
+    "flex",
+    "flex-col",
+    "justify-between",
+    "gap-4",
+    "z-10000",
+    "overflow-hidden",
+    "p-4",
+    "bg-ddt-color-common-background-default",
+    "transition-transform",
+    "duration-300",
+    "ease-in-out"
+  ],
+  {
+    variants: {
+      placement: {
+        top: [
+          "w-full",
+          "xl:min-h-[min(20rem,calc(100%-5rem))]",
+          "md:max-h-[calc(100%-5rem)]",
+          "md:min-h-[min(15rem,calc(100%-5rem))]",
+          "min-h-[min(12.5rem,calc(100%-3rem))]",
+          "max-h-[calc(100%-3rem)]",
+          "h-fit"
+        ],
+        right: [
+          "h-full",
+          "xl:min-w-[min(20rem,calc(100%-5rem))]",
+          "md:max-w-[calc(100%-5rem)]",
+          "md:min-w-[min(15rem,calc(100%-5rem))]",
+          "min-w-[min(12.5rem,calc(100%-3rem))]",
+          "max-w-[calc(100%-3rem)]",
+          "w-fit"
+        ],
+        bottom: [
+          "w-full",
+          "xl:min-h-[min(20rem,calc(100%-5rem))]",
+          "md:max-h-[calc(100%-5rem)]",
+          "md:min-h-[min(15rem,calc(100%-5rem))]",
+          "min-h-[min(12.5rem,calc(100%-3rem))]",
+          "max-h-[calc(100%-3rem)]",
+          "h-fit"
+        ],
+        left: [
+          "h-full",
+          "xl:min-w-[min(20rem,calc(100%-5rem))]",
+          "md:max-w-[calc(100%-5rem)]",
+          "md:min-w-[min(15rem,calc(100%-5rem))]",
+          "min-w-[min(12.5rem,calc(100%-3rem))]",
+          "max-w-[calc(100%-3rem)]",
+          "w-fit"
+        ]
+      },
+      open: {
+        true: ["translate-x-0", "translate-y-0"],
+        false: []
+      }
+    },
+    compoundVariants: [
+      { placement: "bottom", open: false, class: "translate-y-full" },
+      { placement: "top", open: false, class: "-translate-y-full" },
+      { placement: "left", open: false, class: "-translate-x-full" },
+      { placement: "right", open: false, class: "translate-x-full" }
+    ]
+  }
+);
+const cvaBackDrop = cva(
+  [
+    "flex",
+    "fixed",
+    "inset-0",
+    "z-9999",
+    "overflow-clip",
+    "bg-ddt-color-common-background-overlay",
+    "transition-opacity",
+    "duration-300",
+    "ease-in-out"
+  ],
+  {
+    variants: {
+      open: {
+        true: ["opacity-100"],
+        false: ["opacity-0", "pointer-events-none"]
+      },
+      placement: {
+        top: ["items-start"],
+        right: ["justify-end"],
+        bottom: ["items-end"],
+        left: ["justify-start"]
+      }
+    }
+  }
+);
+let DaikinDrawer = class extends DDSElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.drawerAriaLabel = null;
+    this._blockScrollController = new BlockScrollController(this);
+    this._handleClose = () => {
+      if (!this.open) {
+        return;
+      }
+      this.open = false;
+      this.dispatchEvent(
+        new CustomEvent("close", { composed: true, bubbles: true })
+      );
+    };
+    this._focusTrapController = new FocusTrapController(
+      this,
+      this._handleClose
+    );
+    this._handleBackdropClick = (event) => {
+      if (event.target === event.currentTarget) {
+        this._handleClose();
+      }
+    };
+  }
+  render() {
+    return html`<div
+        class=${cvaBackDrop({ open: this.open, placement: this.placement })}
+        ?inert=${!this.open}
+        aria-hidden=${ifDefined(!this.open ? "true" : void 0)}
+        @click=${this._handleBackdropClick}
+      >
+        <div
+          part="drawer"
+          class=${cvaPanel({ placement: this.placement, open: this.open })}
+          role=${this.drawerRole}
+          aria-modal=${ifDefined(this.open ? "true" : void 0)}
+          aria-label=${ifDefined(this.drawerAriaLabel ?? void 0)}
+          ${this._focusTrapController.refContainer()}
+        >
+          <slot
+            class="text-ddt-color-common-text-primary"
+            @close-drawer=${this._handleClose}
+          ></slot>
+        </div>
+      </div>
+      ${guard(
+      [this.open],
+      () => (
+        // open change will trigger the re-rendering and directive.
+        // Pass handleOutsideClick=false: the backdrop's @click handler closes
+        // the drawer directly. Letting focus-trap handle outside clicks causes
+        // iOS Safari to redirect the tap (it moves focus on pointerdown before
+        // the synthesized click fires, stealing the event from the backdrop).
+        this._focusTrapController.directive(this.open, false, false)
+      )
+    )}
+      ${guard(
+      [this.open],
+      () => this._blockScrollController.directive(this.open)
+    )}`;
+  }
+};
+DaikinDrawer.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    ::slotted(*) {
+      flex-grow: 1;
+      min-height: 0;
+    }
+
+    ::slotted(daikin-drawer-header),
+    ::slotted(daikin-drawer-footer) {
+      flex-shrink: 0;
+      flex-grow: 0;
+    }
+  `;
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinDrawer.prototype, "open", 2);
+__decorateClass([
+  property({
+    type: String,
+    reflect: true,
+    attribute: "drawer-role",
+    fallbackValue: "dialog",
+    isAllowedValue: oneOf([
+      "dialog",
+      "alertdialog"
+    ])
+  })
+], DaikinDrawer.prototype, "drawerRole", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "drawer-aria-label" })
+], DaikinDrawer.prototype, "drawerAriaLabel", 2);
+__decorateClass([
+  property({
+    type: String,
+    reflect: true,
+    fallbackValue: "right",
+    isAllowedValue: oneOf([
+      "top",
+      "right",
+      "bottom",
+      "left"
+    ])
+  })
+], DaikinDrawer.prototype, "placement", 2);
+DaikinDrawer = __decorateClass([
+  ddsElement("daikin-drawer")
+], DaikinDrawer);
+export {
+  DaikinDrawer
+};

package/dist/es-dev/components/drawer/index.d.ts

@@ -0,0 +1 @@
+export * from "./daikin-drawer.js";

package/dist/es-dev/components/drawer/index.js

@@ -0,0 +1,4 @@
+import { DaikinDrawer } from "./daikin-drawer.js";
+export {
+  DaikinDrawer
+};

package/dist/es-dev/components/drawer-footer/daikin-drawer-footer.d.ts

@@ -0,0 +1,33 @@
+import { DDSElement } from "../../base/index.js";
+/**
+ * `daikin-drawer-footer` is used to represent footer of the drawer component, and is used as a child element of the `daikin-drawer` component.
+ *
+ * Hierarchy:
+ * - `daikin-drawer` > `daikin-drawer-footer`
+ *
+ * @slot A slot for drawer footer action element. Place a `daikin-button` or `daikin-link` element here.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/drawer-footer/index.js";
+ * ```
+ *
+ * ```html
+ * <!-- See `daikin-drawer` component for complete example. -->
+ * <daikin-drawer-footer>
+ *  <daikin-button size="small" color="default">
+ *    Button
+ *  </daikin-button>
+ * </daikin-drawer-footer>
+ * ```
+ */
+export declare class DaikinDrawerFooter extends DDSElement {
+    static styles: import('lit').CSSResult;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-drawer-footer": DaikinDrawerFooter;
+    }
+}

package/dist/es-dev/components/drawer-footer/daikin-drawer-footer.js

@@ -0,0 +1,37 @@
+import { unsafeCSS, css, html } from "lit";
+import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-form-element.js";
+import "lit/decorators.js";
+import { ddsElement } from "../../base/decorators.js";
+import "../../base/define.js";
+import tailwindStyles from "../../tailwind.css.js";
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(result) || result;
+  return result;
+};
+let DaikinDrawerFooter = class extends DDSElement {
+  render() {
+    return html`<div class="flex flex-wrap justify-end w-full gap-4">
+      <slot></slot>
+    </div>`;
+  }
+};
+DaikinDrawerFooter.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: flex;
+      align-items: center;
+      width: 100%;
+    }
+  `;
+DaikinDrawerFooter = __decorateClass([
+  ddsElement("daikin-drawer-footer")
+], DaikinDrawerFooter);
+export {
+  DaikinDrawerFooter
+};

package/dist/es-dev/components/drawer-footer/index.d.ts

@@ -0,0 +1 @@
+export * from "./daikin-drawer-footer.js";

package/dist/es-dev/components/drawer-footer/index.js

@@ -0,0 +1,4 @@
+import { DaikinDrawerFooter } from "./daikin-drawer-footer.js";
+export {
+  DaikinDrawerFooter
+};

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

@@ -0,0 +1,41 @@
+import { DDSElement } from "../../base/index.js";
+/**
+ * `daikin-drawer-header` is used to represent header of the drawer component, and is used as a child element of the `daikin-drawer` component.
+ *
+ * Hierarchy:
+ * - `daikin-drawer` > `daikin-drawer-header`
+ *
+ * @slot - A slot for drawer title.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/drawer-header/index.js";
+ * ```
+ *
+ * ```html
+ * <!-- See `daikin-drawer` component for complete example. -->
+ * <daikin-drawer-header>
+ *   <span>Drawer Title</span>
+ * </daikin-drawer-header>
+ * ```
+ */
+export declare class DaikinDrawerHeader extends DDSElement {
+    static styles: import('lit').CSSResult;
+    /**
+     * Whether to render the close button in the drawer header.
+     */
+    withCloseButton: boolean;
+    private _closeButton;
+    private _handleClick;
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * Focuses on the header close button.
+     */
+    focusCloseButton(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-drawer-header": DaikinDrawerHeader;
+    }
+}

package/dist/es-dev/components/drawer-header/daikin-drawer-header.js

@@ -0,0 +1,84 @@
+import { cva } from "class-variance-authority";
+import { unsafeCSS, css, nothing, html } from "lit";
+import { createRef, ref } from "lit/directives/ref.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";
+import "../icon-button/daikin-icon-button.js";
+import "../icon/daikin-icon.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const cvaTitle = cva([
+  "flex-none",
+  "text-ddt-color-common-text-primary",
+  "text-(length:--dds-font-size-500)",
+  "not-italic",
+  "font-bold"
+])();
+let DaikinDrawerHeader = class extends DDSElement {
+  constructor() {
+    super(...arguments);
+    this.withCloseButton = false;
+    this._closeButton = createRef();
+  }
+  _handleClick() {
+    this.dispatchEvent(
+      new CustomEvent("close-drawer", {
+        composed: true,
+        bubbles: true
+      })
+    );
+  }
+  render() {
+    return html`<div class="flex justify-between w-full gap-2 natural-break">
+      <div class="pr-8 pt-0.5">
+        <slot class=${cvaTitle}></slot>
+      </div>
+      ${this.withCloseButton ? html`<daikin-icon-button
+            ${ref(this._closeButton)}
+            variant="ghost"
+            color="neutral"
+            button-aria-label="Close"
+            class="flex-none size-8"
+            @click=${this._handleClick}
+          >
+            <daikin-icon icon="close" color="current"></daikin-icon>
+          </daikin-icon-button>` : nothing}
+    </div>`;
+  }
+  /**
+   * Focuses on the header close button.
+   */
+  focusCloseButton() {
+    var _a;
+    (_a = this._closeButton.value) == null ? void 0 : _a.focus();
+  }
+};
+DaikinDrawerHeader.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: flex;
+      align-items: center;
+    }
+  `;
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "with-close-button" })
+], DaikinDrawerHeader.prototype, "withCloseButton", 2);
+DaikinDrawerHeader = __decorateClass([
+  ddsElement("daikin-drawer-header")
+], DaikinDrawerHeader);
+export {
+  DaikinDrawerHeader
+};

package/dist/es-dev/components/drawer-header/index.d.ts

@@ -0,0 +1 @@
+export * from "./daikin-drawer-header.js";

package/dist/es-dev/components/drawer-header/index.js

@@ -0,0 +1,4 @@
+import { DaikinDrawerHeader } from "./daikin-drawer-header.js";
+export {
+  DaikinDrawerHeader
+};

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

@@ -13,9 +13,10 @@ import { DaikinInputGroup } from "../input-group/index.js";
  * @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 dropdown item.
+ * @fires toggle - A custom event emitted when the dropdown menu opens or closes.
  *
  * @slot - Dropdown item list slot. Place `daikin-dropdown-item` elements here.
  *
@@ -54,6 +55,7 @@ export declare class DaikinDropdown extends DDSFormElement {
     error: boolean;
     /**
      * Whether the dropdown 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/es-dev/components/dropdown/daikin-dropdown.js

@@ -37,9 +37,7 @@ const cvaButton = cva(
     "pr-3",
     "rounded-sm",
     "overflow-hidden",
-    "font-daikinSerif",
     "text-left",
-    "leading-[130%]",
     "relative",
     "outline-solid",
     "outline-1",
@@ -412,6 +410,17 @@ let DaikinDropdown = class extends DDSFormElement {
         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("selectedOptions")) {
       const items = this._items;
       for (const item of items) {

package/dist/es-dev/components/dropdown-item/daikin-dropdown-item.js

@@ -26,8 +26,6 @@ const cvaOption = cva(
     "gap-1",
     "size-full",
     "min-h-12",
-    "font-daikinSerif",
-    "leading-[130%]",
     "text-left",
     "relative",
     "focus-visible:outline-solid",

package/dist/es-dev/components/empty-state/daikin-empty-state.js

@@ -23,11 +23,11 @@ let DaikinEmptyState = class extends DDSElement {
         ></slot>
         <slot
           name="title"
-          class="slotted:text-base slotted:font-bold slotted:natural-break slotted:text-center slotted:font-daikinSerif slotted:leading-[130%] slotted:text-ddt-color-common-text-primary"
+          class="slotted:font-bold slotted:natural-break slotted:text-center slotted:text-ddt-color-common-text-primary"
         ></slot>
         <slot
           name="description"
-          class="slotted:text-sm slotted:font-normal slotted:natural-break slotted:text-center slotted:font-daikinSerif slotted:leading-[150%] slotted:text-ddt-color-common-text-primary"
+          class="slotted:text-(length:--dds-font-size-350) slotted:font-normal slotted:natural-break slotted:text-center slotted:leading-normal slotted:text-ddt-color-common-text-primary"
           ><span class="-mt-1"></span
         ></slot>
       </div>

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

@@ -31,7 +31,7 @@ function svgToDataUrl(svg) {
 const cvaIcon = cva(["inline-flex size-full"], {
   variants: {
     color: {
-      black: ["text-ddt-color-common-background-overlay"],
+      black: ["text-black"],
       white: ["text-ddt-color-common-text-inverse"],
       default: ["text-(--default-color)"],
       current: []
@@ -92,7 +92,6 @@ let DaikinIcon = class extends DDSElement {
         defaultColor: staticIcon.color,
         class: staticIcon.class
       };
-      console.log(this._iconData);
       return;
     }
     try {

package/dist/es-dev/components/icon-button/daikin-icon-button.js

@@ -25,7 +25,6 @@ const cvaIconButton = cva(
     "justify-center",
     "items-center",
     "size-full",
-    "font-daikinSerif",
     "font-bold",
     "rounded-sm",
     "tracking-wide",

package/dist/es-dev/components/index.d.ts

@@ -16,6 +16,10 @@ export * from "./checkbox-group/index.js";
 export * from "./chip/index.js";
 export * from "./combobox/index.js";
 export * from "./date-picker/index.js";
+export * from "./divider/index.js";
+export * from "./drawer/index.js";
+export * from "./drawer-footer/index.js";
+export * from "./drawer-header/index.js";
 export * from "./dropdown/index.js";
 export * from "./dropdown-item/index.js";
 export * from "./empty-state/index.js";
@@ -61,3 +65,6 @@ export * from "./tooltip/index.js";
 export * from "./tree/index.js";
 export * from "./tree-item/index.js";
 export * from "./tree-section/index.js";
+export * from "./vertical-navigation/index.js";
+export * from "./vertical-navigation-item/index.js";
+export * from "./vertical-navigation-menu-item/index.js";

package/dist/es-dev/components/index.js

@@ -16,6 +16,10 @@ import { DaikinCheckboxGroup } from "./checkbox-group/daikin-checkbox-group.js";
 import { DaikinChip } from "./chip/daikin-chip.js";
 import { DaikinCombobox, defaultFilterFn } from "./combobox/daikin-combobox.js";
 import { DaikinDatePicker } from "./date-picker/daikin-date-picker.js";
+import { DaikinDivider } from "./divider/daikin-divider.js";
+import { DaikinDrawer } from "./drawer/daikin-drawer.js";
+import { DaikinDrawerFooter } from "./drawer-footer/daikin-drawer-footer.js";
+import { DaikinDrawerHeader } from "./drawer-header/daikin-drawer-header.js";
 import { DaikinDropdown } from "./dropdown/daikin-dropdown.js";
 import { DaikinDropdownItem } from "./dropdown-item/daikin-dropdown-item.js";
 import { DaikinEmptyState } from "./empty-state/daikin-empty-state.js";
@@ -61,6 +65,9 @@ import { DaikinTooltip } from "./tooltip/daikin-tooltip.js";
 import { DaikinTree } from "./tree/daikin-tree.js";
 import { DaikinTreeItem, cvaTreeChildren } from "./tree-item/daikin-tree-item.js";
 import { DaikinTreeSection } from "./tree-section/daikin-tree-section.js";
+import { DaikinVerticalNavigation } from "./vertical-navigation/daikin-vertical-navigation.js";
+import { DaikinVerticalNavigationItem } from "./vertical-navigation-item/daikin-vertical-navigation-item.js";
+import { DaikinVerticalNavigationMenuItem } from "./vertical-navigation-menu-item/daikin-vertical-navigation-menu-item.js";
 export {
   DaikinAccordion,
   DaikinAccordionItem,
@@ -80,6 +87,10 @@ export {
   DaikinChip,
   DaikinCombobox,
   DaikinDatePicker,
+  DaikinDivider,
+  DaikinDrawer,
+  DaikinDrawerFooter,
+  DaikinDrawerHeader,
   DaikinDropdown,
   DaikinDropdownItem,
   DaikinEmptyState,
@@ -125,6 +136,9 @@ export {
   DaikinTree,
   DaikinTreeItem,
   DaikinTreeSection,
+  DaikinVerticalNavigation,
+  DaikinVerticalNavigationItem,
+  DaikinVerticalNavigationMenuItem,
   calcDigitInput,
   cvaTreeChildren,
   defaultFilterFn,

package/dist/es-dev/components/inline-notification/daikin-inline-notification.js

@@ -29,7 +29,6 @@ const cvaContainer = cva(
     "bg-ddt-color-common-background-default",
     "p-4",
     "overflow-hidden",
-    "font-daikinSerif",
     "transition",
     "box-border",
     "before:size-6",
@@ -94,14 +93,9 @@ const cvaTextContent = cva(["flex"], {
 const TITLE_CLASS_NAME = cva([
   "slotted:inline-block",
   "font-bold",
-  "leading-[130%]",
   "slotted:natural-break"
 ])();
-const DESCRIPTION_CLASS_NAME = cva([
-  "inline-block",
-  "leading-[130%]",
-  "natural-break"
-])();
+const DESCRIPTION_CLASS_NAME = cva(["inline-block", "natural-break"])();
 let DaikinInlineNotification = class extends DDSElement {
   constructor() {
     super(...arguments);