@daikin-oss/design-system-web-components 1.1.0 → 1.2.0

package/dist/es/components/toast-notification/daikin-toast-notification.js

@@ -1,4 +1,4 @@
-import { css, unsafeCSS, html, nothing } from "lit";
+import { unsafeCSS, css, nothing, html } from "lit";
 import { property } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";
@@ -39,10 +39,7 @@ let DaikinToastNotification = class extends DDSElement {
     >
       <div class=${cvaContent({ layout: this.layout })}>
         <slot class=${cvaTitle({ layout: this.layout })} name="title"></slot>
-        <slot
-          class=${cvaDescription({ layout: this.layout })}
-          name="description"
-        ></slot>
+        <slot class=${cvaDescription({ layout: this.layout })}></slot>
         ${this.timestamp ? html`<span class=${cvaTimestamp({ layout: this.layout })}
               >${formatDate(this.timestamp)}</span
             >` : nothing}
@@ -54,7 +51,7 @@ let DaikinToastNotification = class extends DDSElement {
             @click=${this._handleClickClose}
           >
             <span
-              class="flex size-6 text-ddt-color-common-text-secondary relative i-daikin-cross"
+              class="flex size-6 text-ddt-color-common-text-secondary relative i-daikin-close"
             ></span>
           </daikin-icon-button>` : nothing}
     </div>`;
@@ -65,18 +62,24 @@ DaikinToastNotification.styles = css`
 
     :host {
       display: block;
+      width: fit-content;
+      max-width: 100%;
 
       --ddc-toast-animation-duration: ${unsafeCSS(TOAST_ANIMATION_DURATION)}ms;
     }
+
+    :host([layout="horizontal"]) {
+      height: 4rem;
+    }
   `;
 __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinToastNotification.prototype, "name", 2);
 __decorateClass([
-  property({ type: String })
+  property({ type: String, reflect: true })
 ], DaikinToastNotification.prototype, "status", 2);
 __decorateClass([
-  property({ type: String })
+  property({ type: String, reflect: true })
 ], DaikinToastNotification.prototype, "layout", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })

package/dist/es/components/toast-notification-manager/daikin-toast-notification-manager.d.ts

@@ -1,7 +1,7 @@
 import { DDSElement } from "../../base/index.js";
 import { MergeVariantProps } from "../../type-utils.js";
 declare const cvaContainer: (props?: ({
-    position?: "bottom" | "top" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | null | undefined;
+    position?: "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type ToastPosition = MergeVariantProps<typeof cvaContainer>["position"];
 /**

package/dist/es/components/toast-notification-manager/daikin-toast-notification-manager.js

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { property, queryAssignedElements } from "lit/decorators.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { DDSElement } from "../../base/dds-element.js";
@@ -26,7 +26,7 @@ const cvaContainer = cva(
   [
     "flex",
     "gap-2",
-    "w-max",
+    "w-[calc(100vw_-_2rem)]",
     "fixed",
     "transition-transform",
     "translate-y-[var(--container-move-offset-y,0)]",

package/dist/es/components/toggle/daikin-toggle.d.ts

@@ -1,5 +1,5 @@
 import { PropertyValues } from 'lit';
-import { DDSElement } from "../../base/index.js";
+import { DDSFormElement } from "../../base/dds-form-element.js";
 /**
  * The toggle switch component is a UI element that allows users to switch between two states, typically "on" and "off".
  * It functions similarly to a `daikin-checkbox` component but provides a more visually intuitive way to represent binary options.
@@ -18,16 +18,8 @@ import { DDSElement } from "../../base/index.js";
  * <daikin-toggle name="name" value="value"></daikin-toggle>
  * ```
  */
-export declare class DaikinToggle extends DDSElement {
+export declare class DaikinToggle extends DDSFormElement {
     static readonly styles: import('lit').CSSResult;
-    /**
-     * The form name, submitted as a name/value pair when submitting the form.
-     */
-    name: string;
-    /**
-     * The form value, submitted as a name/value pair when submitting the form.
-     */
-    value: string;
     /**
      * Whether the toggle switch is turned on.
      */
@@ -36,8 +28,6 @@ export declare class DaikinToggle extends DDSElement {
      * Specify the toggle switch disabled state.
      */
     disabled: boolean;
-    static readonly formAssociated = true;
-    private _internals;
     private _updateFormValue;
     private _handleChange;
     render(): import('lit-html').TemplateResult<1>;

package/dist/es/components/toggle/daikin-toggle.js

@@ -1,9 +1,10 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { property } from "lit/decorators.js";
-import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
+import { DDSFormElement } from "../../base/dds-form-element.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -49,17 +50,14 @@ const TOGGLE_CLASS_NAME = cva([
   "enabled:before:bg-ddt-color-common-background-default",
   "disabled:before:bg-ddt-color-common-surface-hover"
 ])();
-let DaikinToggle = class extends DDSElement {
+let DaikinToggle = class extends DDSFormElement {
   constructor() {
     super(...arguments);
-    this.name = "";
-    this.value = "";
     this.checked = false;
     this.disabled = false;
-    this._internals = this.attachInternals();
   }
   _updateFormValue() {
-    this._internals.setFormValue(this.checked ? this.value : null);
+    this.setFormValue(this.checked ? this.value : null);
   }
   _handleChange(event) {
     this.checked = event.target.checked;
@@ -91,13 +89,6 @@ DaikinToggle.styles = css`
       display: inline-flex;
     }
   `;
-DaikinToggle.formAssociated = true;
-__decorateClass([
-  property({ type: String, reflect: true })
-], DaikinToggle.prototype, "name", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], DaikinToggle.prototype, "value", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinToggle.prototype, "checked", 2);

package/dist/es/components/tooltip/daikin-tooltip.d.ts

@@ -75,8 +75,9 @@ export declare class DaikinTooltip extends DDSElement {
     private _handleClick;
     private _handleFocusIn;
     private _handleFocusOut;
-    private _handleMouseEnter;
-    private _handleMouseLeave;
+    private _handlePointerEnter;
+    private _handlePointerLeave;
+    private _handlePointerUp;
     private _handleBeforeToggle;
     private _handleToggle;
     render(): import('lit-html').TemplateResult<1>;

package/dist/es/components/tooltip/daikin-tooltip.js

@@ -1,6 +1,6 @@
 import { offset, flip, shift } from "@floating-ui/dom";
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { property } from "lit/decorators.js";
 import { guard } from "lit/directives/guard.js";
 import { DDSElement } from "../../base/dds-element.js";
@@ -87,16 +87,21 @@ let DaikinTooltip = class extends DDSElement {
   _handleFocusOut() {
     this.open = false;
   }
-  _handleMouseEnter() {
-    if (this.trigger === "hover") {
+  _handlePointerEnter(event) {
+    if (this.trigger === "hover" && event.pointerType === "mouse") {
       this.open = true;
     }
   }
-  _handleMouseLeave() {
-    if (this.trigger === "hover") {
+  _handlePointerLeave(event) {
+    if (this.trigger === "hover" && event.pointerType === "mouse") {
       this.open = false;
     }
   }
+  _handlePointerUp(event) {
+    if (this.trigger === "hover" && event.pointerType === "touch") {
+      this.open = !this.open;
+    }
+  }
   _handleBeforeToggle(event) {
     reDispatch(this, event, new ToggleEvent("beforetoggle", event));
   }
@@ -124,8 +129,9 @@ let DaikinTooltip = class extends DDSElement {
           @click=${this._handleClick}
           @focusin=${this._handleFocusIn}
           @focusout=${this._handleFocusOut}
-          @mouseenter=${this._handleMouseEnter}
-          @mouseleave=${this._handleMouseLeave}
+          @pointerenter=${this._handlePointerEnter}
+          @pointerleave=${this._handlePointerLeave}
+          @pointerup=${this._handlePointerUp}
         ></slot>
       </div>
       <span

package/dist/es/components/tree/daikin-tree.js

@@ -1,4 +1,4 @@
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { property, queryAssignedElements } from "lit/decorators.js";
 import { DDSElement } from "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";

package/dist/es/components/tree-item/daikin-tree-item.js

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { createRef, ref } from "lit/directives/ref.js";

package/dist/es/components/tree-section/daikin-tree-section.d.ts

@@ -9,6 +9,8 @@ import { DDSElement } from "../../base/index.js";
  * - `daikin-tree` > `daikin-tree-section` > `daikin-tree-item`
  * - `daikin-tree` > `daikin-tree-section` > `daikin-tree-section` ...
  *
+ * @tokenImports ../tree-item/daikin-tree-item.ts
+ *
  * @fires toggle - _Cancellable._ A custom event emitted when the user clicks the header.
  * @fires tree-move-focus - _Internal use._ A custom event used to move the focus within a tree.
  *

package/dist/es/components/tree-section/daikin-tree-section.js

@@ -1,4 +1,4 @@
-import { css, unsafeCSS, html } from "lit";
+import { unsafeCSS, css, html } from "lit";
 import { property, queryAssignedElements } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { createRef, ref } from "lit/directives/ref.js";

package/dist/es/controllers/click-outside.js

@@ -8,7 +8,9 @@ const clickOutsideDirective = createControllerDirective(
       }
       callback.call(element, event);
     };
-    window.addEventListener("click", listener);
+    setTimeout(() => {
+      window.addEventListener("click", listener);
+    }, 0);
     return () => {
       window.removeEventListener("click", listener);
     };

package/dist/es/controllers/focus-trap.d.ts

@@ -0,0 +1,10 @@
+import { ReactiveControllerHost } from 'lit';
+export declare class FocusTrapController<T extends ReactiveControllerHost & HTMLElement> {
+    private readonly _host;
+    private readonly _onDeactivate;
+    private _container;
+    private readonly _refCallbackContainer;
+    constructor(_host: T, _onDeactivate: () => void);
+    refContainer(): import('lit-html/directive.js').DirectiveResult<typeof import('lit-html/directives/ref.js').RefDirective>;
+    directive(open?: boolean, persistent?: boolean): import('lit-html/directive.js').DirectiveResult<import('lit-html/directive.js').DirectiveClass>;
+}

package/dist/es/controllers/focus-trap.js

@@ -0,0 +1,42 @@
+import { createFocusTrap } from "focus-trap";
+import { nothing } from "lit";
+import { ref } from "lit/directives/ref.js";
+import { createControllerDirective } from "./helpers/controller-directive.js";
+const focusTrapDirective = createControllerDirective((container, persistent, onDeactivate) => {
+  const trap = createFocusTrap(container, {
+    escapeDeactivates: !persistent,
+    fallbackFocus: container,
+    tabbableOptions: {
+      getShadowRoot: (node) => node.shadowRoot ?? void 0
+    },
+    clickOutsideDeactivates: !persistent,
+    onDeactivate
+  });
+  trap.activate();
+  return () => {
+    trap.deactivate();
+  };
+});
+class FocusTrapController {
+  constructor(_host, _onDeactivate) {
+    this._host = _host;
+    this._onDeactivate = _onDeactivate;
+    this._refCallbackContainer = (element) => {
+      this._container = element;
+      this._host.requestUpdate();
+    };
+    _host.addController(this);
+  }
+  refContainer() {
+    return ref(this._refCallbackContainer);
+  }
+  directive(open = true, persistent = false) {
+    if (!open || !this._container) {
+      return nothing;
+    }
+    return focusTrapDirective(this._container, persistent, this._onDeactivate);
+  }
+}
+export {
+  FocusTrapController
+};

package/dist/es/index.js

@@ -4,12 +4,15 @@ import { DaikinAvatar } from "./components/avatar/daikin-avatar.js";
 import { DaikinBreadcrumb } from "./components/breadcrumb/daikin-breadcrumb.js";
 import { DaikinBreadcrumbItem } from "./components/breadcrumb-item/daikin-breadcrumb-item.js";
 import { DaikinButton } from "./components/button/daikin-button.js";
+import { DaikinCalendar } from "./components/calendar/daikin-calendar.js";
 import { DaikinCard } from "./components/card/daikin-card.js";
 import { DaikinCardFooter } from "./components/card-footer/daikin-card-footer.js";
 import { DaikinCardHeader } from "./components/card-header/daikin-card-header.js";
 import { DaikinCarousel } from "./components/carousel/daikin-carousel.js";
 import { DaikinCarouselItem } from "./components/carousel-item/daikin-carousel-item.js";
 import { DaikinCheckbox } from "./components/checkbox/daikin-checkbox.js";
+import { DaikinCheckboxGroup } from "./components/checkbox-group/daikin-checkbox-group.js";
+import { DaikinDatePicker } from "./components/date-picker/daikin-date-picker.js";
 import { DaikinDropdown } from "./components/dropdown/daikin-dropdown.js";
 import { DaikinDropdownItem } from "./components/dropdown-item/daikin-dropdown-item.js";
 import { DaikinIcon, iconList } from "./components/icon/daikin-icon.js";
@@ -20,12 +23,18 @@ import { DaikinLink } from "./components/link/daikin-link.js";
 import { DaikinList } from "./components/list/daikin-list.js";
 import { DaikinListItem } from "./components/list-item/daikin-list-item.js";
 import { DaikinLoading } from "./components/loading/daikin-loading.js";
+import { DaikinLogo } from "./components/logo/daikin-logo.js";
+import { DaikinMenu } from "./components/menu/daikin-menu.js";
+import { DaikinModal } from "./components/modal/daikin-modal.js";
+import { DaikinModalFooter } from "./components/modal-footer/daikin-modal-footer.js";
+import { DaikinModalHeader } from "./components/modal-header/daikin-modal-header.js";
 import { DaikinPagination } from "./components/pagination/daikin-pagination.js";
 import { DaikinProgressBar } from "./components/progress-bar/daikin-progress-bar.js";
 import { DaikinProgressIndicator } from "./components/progress-indicator/daikin-progress-indicator.js";
 import { DaikinProgressIndicatorItem } from "./components/progress-indicator-item/daikin-progress-indicator-item.js";
 import { DaikinRadio } from "./components/radio/daikin-radio.js";
 import { DaikinSelect } from "./components/select/daikin-select.js";
+import { DaikinSlider } from "./components/slider/daikin-slider.js";
 import { DaikinTab } from "./components/tab/daikin-tab.js";
 import { DaikinTabPanels } from "./components/tab-panels/daikin-tab-panels.js";
 import { DaikinTable } from "./components/table/daikin-table.js";
@@ -48,12 +57,15 @@ export {
   DaikinBreadcrumb,
   DaikinBreadcrumbItem,
   DaikinButton,
+  DaikinCalendar,
   DaikinCard,
   DaikinCardFooter,
   DaikinCardHeader,
   DaikinCarousel,
   DaikinCarouselItem,
   DaikinCheckbox,
+  DaikinCheckboxGroup,
+  DaikinDatePicker,
   DaikinDropdown,
   DaikinDropdownItem,
   DaikinIcon,
@@ -64,12 +76,18 @@ export {
   DaikinList,
   DaikinListItem,
   DaikinLoading,
+  DaikinLogo,
+  DaikinMenu,
+  DaikinModal,
+  DaikinModalFooter,
+  DaikinModalHeader,
   DaikinPagination,
   DaikinProgressBar,
   DaikinProgressIndicator,
   DaikinProgressIndicatorItem,
   DaikinRadio,
   DaikinSelect,
+  DaikinSlider,
   DaikinTab,
   DaikinTabPanels,
   DaikinTable,