@daikin-oss/design-system-web-components 1.1.0 → 1.3.0-next.2

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

@@ -0,0 +1,165 @@
+import { PropertyValues } from 'lit';
+import { DDSFormElement } from "../../base/dds-form-element.cjs";
+import { default as DaikinInputGroup } from "../input-group/daikin-input-group.cjs";
+/**
+ * Represents the hour and minute parts of a time value.
+ * The `hour` and `minute` values can be placeholder strings ('hh', 'mm') or numeric strings representing time values.
+ */
+type TimeParts = {
+    hour: string;
+    minute: string;
+};
+/**
+ * Type for time input item: hour or minute.
+ */
+type TimeItem = "hour" | "minute";
+/**
+ * Converts a 12-hour time string and AM/PM to 24-hour format (e.g. "02:30", "PM" => "14:30").
+ */
+export declare function to24HourFormat(time: string, meridiem: "AM" | "PM"): string;
+/**
+ * Converts a 24-hour time string to 12-hour format and AM/PM (e.g. "14:30" => { time: "02:30", meridiem: "PM" }).
+ */
+export declare function from24HourFormat(time: string): {
+    time: string;
+    meridiem: "AM" | "PM";
+};
+/**
+ * Validates if a time string matches the 24-hour format.
+ */
+export declare function isValidValueTime(str: string): boolean;
+/**
+ * Checks if a time is out of the given range.
+ */
+export declare function isTimeOutOfRange(time: string, min: string, max: string): boolean;
+/**
+ * Formats a time object as a UI display string (HH:MM).
+ * The hour/minute values do not have to be valid.
+ */
+export declare function formatPartsForUI({ hour, minute, }: Readonly<TimeParts>): string;
+/**
+ * Parses a UI time string (HH:MM) and returns an hour/minute object.
+ * The result is not guaranteed to be valid.
+ */
+export declare function parsePartsFromUIValue(value: string): TimeParts;
+/**
+ * Attempts to parse a valid time string from a UI value (HH:MM).
+ * Returns null if invalid.
+ */
+export declare function tryParseTimeFromUIValue(value: string): string | null;
+/**
+ * Formats a valid time string as a UI display string (HH:MM).
+ */
+export declare function formatTimeForUI(timeString: string): string;
+/**
+ * Determines whether the current selection is on the hour or minute part.
+ * Returns null if no match.
+ */
+export declare function getTimeItemInSelection(selectionStart: number, selectionEnd: number): TimeItem | null;
+/**
+ * Calculate digit key input, returns new time parts and whether input is complete.
+ * @returns { parts, done } or null
+ */
+export declare function calcDigitInput(parts: Readonly<TimeParts>, item: TimeItem, digit: string, hourDigitIndex: number): {
+    parts: TimeParts;
+    done: boolean;
+} | null;
+/**
+ * The time picker provides a time input field and a dropdown button for selecting AM/PM, allowing users to quickly enter a specific time in 12-hour format.
+ * Please note that while the value displayed on the UI is in 12-hour format, the value you get from the component's value property will be automatically converted to 24-hour format.
+ *
+ * @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.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/time-picker/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-time-picker></daikin-time-picker>
+ * ```
+ */
+export declare class DaikinTimePicker extends DDSFormElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Placeholder text.
+     */
+    placeholder: string | null;
+    /**
+     * Minimum time (00:00 - 23:59). If the user's input value is less than this value, the component will display an error state.
+     * Please note that while the UI displays time in a 12-hour format (AM/PM), the component's value is stored in a 24-hour format. The `min` property must also be provided in 24-hour format.
+     */
+    min: string;
+    /**
+     * Maximum time (00:00 - 23:59). If the user's input value is more than this value, the component will display an error state.
+     * Please note that while the UI displays time in a 12-hour format (AM/PM), the component's value is stored in a 24-hour format. The `max` property must also be provided in 24-hour format.
+     */
+    max: string;
+    /**
+     * Whether the field is disabled. Controlled by daikin-input-group.
+     */
+    disabled: boolean;
+    /**
+     * Whether the field is required. Controlled by daikin-input-group.
+     */
+    required: boolean;
+    /**
+     * Whether to show error state. Controlled by daikin-input-group. Ignored if disabled.
+     */
+    error: boolean;
+    /**
+     * Minutes step. Specify the step size for the minutes when using the up and down arrow keys.
+     */
+    minutesStep: string;
+    private _label;
+    private _inputValue;
+    private _currentSelection;
+    private _meridiem;
+    private _timeInputElement;
+    /**
+     * Tracks the current digit index for hour input (0: first digit, 1: second digit).
+     */
+    private _hourDigitIndex;
+    /**
+     * Returns the value to display in the input field (from _inputValue state).
+     */
+    private get _timeValue();
+    /**
+     * Syncs the AM/PM value with the current value (24-hour) if value changes externally.
+     */
+    private _syncMeridiemWithValue;
+    private get _min();
+    private get _max();
+    private _convertZeroHourToTwelve;
+    private _handleFocusIn;
+    private _handleFocusOut;
+    private _handleChange;
+    private _handleMouseUp;
+    private _handleDigitInput;
+    private _handleKeyDown;
+    private _updateTimeByOffset;
+    private _handleBeforeInput;
+    /**
+     * Updates the value in 24-hour format if the input is valid, keeps UI in 12-hour format.
+     */
+    private _updateValue;
+    private _updateInputSelection;
+    private _updateSelection;
+    private _handleDropdownChange;
+    render(): import('lit-html').TemplateResult<1>;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    /**
+     * This method is used by `daikin-input-group` to reflect it's attributes to this component.
+     * @private
+     */
+    reflectInputGroup(inputGroup: DaikinInputGroup): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-time-picker": DaikinTimePicker;
+    }
+}
+export {};

package/dist/cjs/components/time-picker/index.cjs

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinTimePicker = require("./daikin-time-picker.cjs");
+Object.defineProperty(exports, "DaikinTimePicker", {
+  enumerable: true,
+  get: () => daikinTimePicker.DaikinTimePicker
+});
+exports.calcDigitInput = daikinTimePicker.calcDigitInput;
+exports.formatPartsForUI = daikinTimePicker.formatPartsForUI;
+exports.formatTimeForUI = daikinTimePicker.formatTimeForUI;
+exports.from24HourFormat = daikinTimePicker.from24HourFormat;
+exports.getTimeItemInSelection = daikinTimePicker.getTimeItemInSelection;
+exports.isTimeOutOfRange = daikinTimePicker.isTimeOutOfRange;
+exports.isValidValueTime = daikinTimePicker.isValidValueTime;
+exports.parsePartsFromUIValue = daikinTimePicker.parsePartsFromUIValue;
+exports.to24HourFormat = daikinTimePicker.to24HourFormat;
+exports.tryParseTimeFromUIValue = daikinTimePicker.tryParseTimeFromUIValue;

package/dist/cjs/components/time-picker/index.d.cts

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

package/dist/cjs/components/toast-notification/daikin-toast-notification.cjs

@@ -41,10 +41,7 @@ exports.DaikinToastNotification = class DaikinToastNotification extends ddsEleme
     >
       <div class=${notificationCommon.cvaContent({ layout: this.layout })}>
         <slot class=${notificationCommon.cvaTitle({ layout: this.layout })} name="title"></slot>
-        <slot
-          class=${notificationCommon.cvaDescription({ layout: this.layout })}
-          name="description"
-        ></slot>
+        <slot class=${notificationCommon.cvaDescription({ layout: this.layout })}></slot>
         ${this.timestamp ? lit.html`<span class=${notificationCommon.cvaTimestamp({ layout: this.layout })}
               >${notificationCommon.formatDate(this.timestamp)}</span
             >` : lit.nothing}
@@ -56,7 +53,7 @@ exports.DaikinToastNotification = class DaikinToastNotification extends ddsEleme
             @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>` : lit.nothing}
     </div>`;
@@ -67,18 +64,24 @@ exports.DaikinToastNotification.styles = lit.css`
 
     :host {
       display: block;
+      width: fit-content;
+      max-width: 100%;
 
       --ddc-toast-animation-duration: ${lit.unsafeCSS(notificationCommon.TOAST_ANIMATION_DURATION)}ms;
     }
+
+    :host([layout="horizontal"]) {
+      height: 4rem;
+    }
   `;
 __decorateClass([
   decorators_js.property({ type: String, reflect: true })
 ], exports.DaikinToastNotification.prototype, "name", 2);
 __decorateClass([
-  decorators_js.property({ type: String })
+  decorators_js.property({ type: String, reflect: true })
 ], exports.DaikinToastNotification.prototype, "status", 2);
 __decorateClass([
-  decorators_js.property({ type: String })
+  decorators_js.property({ type: String, reflect: true })
 ], exports.DaikinToastNotification.prototype, "layout", 2);
 __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })

package/dist/cjs/components/toast-notification/daikin-toast-notification.d.cts

@@ -11,6 +11,8 @@ export type ToastNotificationVariantProps = MergeVariantProps<typeof cvaContaine
  * Hierarchy:
  * - `daikin-toast-notification-manager` > `daikin-toast-notification`
  *
+ * @tokenImports ../../utils/notification-common.ts
+ *
  * @fires close - A custom event emitted when a user clicks the close button.
  *
  * @slot A slot for the toast notification description content.

package/dist/cjs/components/toast-notification-manager/daikin-toast-notification-manager.cjs

@@ -28,7 +28,7 @@ const cvaContainer = classVarianceAuthority.cva(
   [
     "flex",
     "gap-2",
-    "w-max",
+    "w-[calc(100vw_-_2rem)]",
     "fixed",
     "transition-transform",
     "translate-y-[var(--container-move-offset-y,0)]",

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

@@ -3,9 +3,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
-const ddsElement = require("../../base/dds-element.cjs");
+require("../../base/dds-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
+const ddsFormElement = require("../../base/dds-form-element.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -51,17 +52,14 @@ const TOGGLE_CLASS_NAME = classVarianceAuthority.cva([
   "enabled:before:bg-ddt-color-common-background-default",
   "disabled:before:bg-ddt-color-common-surface-hover"
 ])();
-exports.DaikinToggle = class DaikinToggle extends ddsElement.DDSElement {
+exports.DaikinToggle = class DaikinToggle extends ddsFormElement.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;
@@ -93,13 +91,6 @@ exports.DaikinToggle.styles = lit.css`
       display: inline-flex;
     }
   `;
-exports.DaikinToggle.formAssociated = true;
-__decorateClass([
-  decorators_js.property({ type: String, reflect: true })
-], exports.DaikinToggle.prototype, "name", 2);
-__decorateClass([
-  decorators_js.property({ type: String, reflect: true })
-], exports.DaikinToggle.prototype, "value", 2);
 __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.DaikinToggle.prototype, "checked", 2);

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

@@ -1,5 +1,5 @@
 import { PropertyValues } from 'lit';
-import { DDSElement } from "../../base/index.cjs";
+import { DDSFormElement } from "../../base/dds-form-element.cjs";
 /**
  * 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.cjs";
  * <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/cjs/components/tooltip/daikin-tooltip.cjs

@@ -63,6 +63,7 @@ exports.DaikinTooltip = class DaikinTooltip extends ddsElement.DDSElement {
     this.description = "";
     this.popoverValue = "auto";
     this.trigger = "hover";
+    this._willBeFocusedByPress = false;
     this._autoUpdateController = new floatingUiAutoUpdate.FloatingUIAutoUpdateController(this);
     this._hostStyles = isClient.isClient ? window.getComputedStyle(this) : null;
   }
@@ -84,21 +85,34 @@ exports.DaikinTooltip = class DaikinTooltip extends ddsElement.DDSElement {
     }
   }
   _handleFocusIn() {
-    this.open = true;
+    if (this.trigger !== "manual" && !this._willBeFocusedByPress) {
+      this.open = true;
+    }
   }
   _handleFocusOut() {
-    this.open = false;
+    if (this.trigger !== "manual") {
+      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;
     }
   }
+  _handlePointerDown() {
+    this._willBeFocusedByPress = this.trigger === "click" && !this.matches(":focus-within");
+  }
+  _handlePointerUp(event) {
+    this._willBeFocusedByPress = false;
+    if (this.trigger === "hover" && event.pointerType === "touch") {
+      this.open = !this.open;
+    }
+  }
   _handleBeforeToggle(event) {
     reDispatch.reDispatch(this, event, new ToggleEvent("beforetoggle", event));
   }
@@ -126,8 +140,10 @@ exports.DaikinTooltip = class DaikinTooltip extends ddsElement.DDSElement {
           @click=${this._handleClick}
           @focusin=${this._handleFocusIn}
           @focusout=${this._handleFocusOut}
-          @mouseenter=${this._handleMouseEnter}
-          @mouseleave=${this._handleMouseLeave}
+          @pointerenter=${this._handlePointerEnter}
+          @pointerleave=${this._handlePointerLeave}
+          @pointerdown=${this._handlePointerDown}
+          @pointerup=${this._handlePointerUp}
         ></slot>
       </div>
       <span

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

@@ -12,7 +12,7 @@ type TooltipVariantProps = MergeVariantProps<typeof cvaTooltip>;
  * @fires toggle - A event emitted when the tooltip is opened or closed.
  *
  * @slot - A slot for the element to which the tooltip is attached (the trigger element).
- * @slot description - A slot for the tooltip description content.
+ * @slot description - A slot for the tooltip description content. Tooltips don't have a prescribed maximum or minimum width. If you plan to use longer text, please note that you'll need to manually implement line breaks.
  *
  * @cssprop [--ddc-tooltip-spacing=20px] - Spacing between the tooltip and the trigger.
  *
@@ -55,6 +55,7 @@ export declare class DaikinTooltip extends DDSElement {
     /**
      * Specifies the content of the tooltip.
      * Ignored if the `tooltip` slot exists.
+     * Tooltips don't have a prescribed maximum or minimum width. If you plan to use longer text, please note that you'll need to manually implement line breaks.
      */
     description: string;
     /**
@@ -70,13 +71,20 @@ export declare class DaikinTooltip extends DDSElement {
      * - `manual`: The tooltip does not respond to user interaction. Use this to control the tooltip programmatically.
      */
     trigger: "hover" | "click" | "manual";
+    /**
+     * Internal state to track whether the element will be focused by a press interaction.
+     * In this case, the tooltip will not be open via focus to prevent it from disappearing immediately afterward.
+     */
+    private _willBeFocusedByPress;
     private _autoUpdateController;
     private _hostStyles;
     private _handleClick;
     private _handleFocusIn;
     private _handleFocusOut;
-    private _handleMouseEnter;
-    private _handleMouseLeave;
+    private _handlePointerEnter;
+    private _handlePointerLeave;
+    private _handlePointerDown;
+    private _handlePointerUp;
     private _handleBeforeToggle;
     private _handleToggle;
     render(): import('lit-html').TemplateResult<1>;

package/dist/cjs/components/tree-section/daikin-tree-section.d.cts

@@ -9,6 +9,8 @@ import { DDSElement } from "../../base/index.cjs";
  * - `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/cjs/controllers/click-outside.cjs

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

package/dist/cjs/controllers/floating-ui-auto-update.cjs

@@ -5,7 +5,7 @@ const lit = require("lit");
 const ref_js = require("lit/directives/ref.js");
 const controllerDirective = require("./helpers/controller-directive.cjs");
 const floatingUIAutoUpdateDirective = controllerDirective.createControllerDirective(
-  (referenceElement, floatingElement, options) => {
+  (referenceElement, floatingElement, options, _isOptionsUpdated, triggerContext) => {
     const cleanupAutoUpdate = dom.autoUpdate(
       referenceElement,
       floatingElement,
@@ -18,7 +18,10 @@ const floatingUIAutoUpdateDirective = controllerDirective.createControllerDirect
           floatingElement.style.setProperty("--floating-y", `${y}px`);
           floatingElement.setAttribute("data-floating-ready", "");
           if (isFirst) {
-            floatingElement.dispatchEvent(new Event("floating-ready"));
+            const event = new CustomEvent("floating-ready", {
+              detail: triggerContext
+            });
+            floatingElement.dispatchEvent(event);
           }
         }).catch((error) => {
         });
@@ -36,7 +39,8 @@ const floatingUIAutoUpdateDirective = controllerDirective.createControllerDirect
       current[0] !== previous[0] || // Check if the floating element is changed
       current[1] !== previous[1] || // Check if the options is changed.
       // If option comparison function (current[3]) is provided, use it to compare options. Otherwise, use `!==` to compare options.
-      (((_a = current[3]) == null ? void 0 : _a.call(current, current[2], previous[2])) ?? current[2] !== previous[2])
+      (((_a = current[3]) == null ? void 0 : _a.call(current, current[2], previous[2])) ?? current[2] !== previous[2]) || // Check if the trigger context is changed
+      current[4] !== previous[4]
     );
   }
 );
@@ -44,6 +48,7 @@ class FloatingUIAutoUpdateController {
   constructor(_host, _isOptionsUpdated) {
     this._host = _host;
     this._isOptionsUpdated = _isOptionsUpdated;
+    this._triggerContext = {};
     this._refCallbackFloating = (element) => {
       this._floatingElement = element;
       this._host.requestUpdate();
@@ -54,6 +59,18 @@ class FloatingUIAutoUpdateController {
     };
     _host.addController(this);
   }
+  /**
+   * Set context information that will be included in the floating-ready event
+   */
+  setTriggerContext(context) {
+    this._triggerContext = { ...context };
+  }
+  /**
+   * Clear the trigger context
+   */
+  clearTriggerContext() {
+    this._triggerContext = {};
+  }
   get floatingElement() {
     return this._floatingElement;
   }
@@ -74,7 +91,8 @@ class FloatingUIAutoUpdateController {
       this._referenceElement,
       this._floatingElement,
       options,
-      this._isOptionsUpdated
+      this._isOptionsUpdated,
+      this._triggerContext
     );
   }
 }

package/dist/cjs/controllers/floating-ui-auto-update.d.cts

@@ -13,7 +13,19 @@ export declare class FloatingUIAutoUpdateController<T extends ReactiveController
     private readonly _isOptionsUpdated?;
     private _floatingElement;
     private _referenceElement;
+    /**
+     * Context information to be passed with floating-ready event
+     */
+    private _triggerContext;
     constructor(_host: T, _isOptionsUpdated?: ((current: Partial<ComputePositionConfig>, previous: Partial<ComputePositionConfig>) => boolean) | undefined);
+    /**
+     * Set context information that will be included in the floating-ready event
+     */
+    setTriggerContext(context: Record<string, unknown>): void;
+    /**
+     * Clear the trigger context
+     */
+    clearTriggerContext(): void;
     private readonly _refCallbackFloating;
     private readonly _refCallbackReference;
     get floatingElement(): HTMLElement | undefined;

package/dist/cjs/controllers/focus-trap.cjs

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const focusTrap = require("focus-trap");
+const lit = require("lit");
+const ref_js = require("lit/directives/ref.js");
+const controllerDirective = require("./helpers/controller-directive.cjs");
+const focusTrapDirective = controllerDirective.createControllerDirective((container, persistent, onDeactivate) => {
+  const trap = focusTrap.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_js.ref(this._refCallbackContainer);
+  }
+  directive(open = true, persistent = false) {
+    if (!open || !this._container) {
+      return lit.nothing;
+    }
+    return focusTrapDirective(this._container, persistent, this._onDeactivate);
+  }
+}
+exports.FocusTrapController = FocusTrapController;

package/dist/cjs/controllers/focus-trap.d.cts

@@ -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>;
+}