@nectary/components 5.17.0 → 5.18.1

package/dialog/index.js

@@ -6,7 +6,7 @@ import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getRect } from "../utils/rect.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { isTargetEqual } from "../utils/event-target.js";
-import { disableScroll, enableScroll } from "./utils.js";
+import { disableScroll, enableScroll } from "../utils/scroll-lock.js";
 const templateHTML = '<style>:host{display:contents;--sinch-comp-dialog-max-width:512px;--sinch-comp-dialog-max-height:90vh;--sinch-comp-dialog-width:fit-content;--sinch-dialog-close-button-display:unset}#dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px 0;width:var(--sinch-comp-dialog-width);max-width:var(--sinch-comp-dialog-max-width);max-height:var(--sinch-comp-dialog-max-height);border-radius:var(--sinch-comp-dialog-shape-radius);box-sizing:border-box;contain:content;background-color:var(--sinch-comp-dialog-color-default-background-initial);border:none;box-shadow:var(--sinch-comp-dialog-shadow);outline:0}#dialog:not([open]){display:none}dialog::backdrop{background-color:#000;opacity:.55}#header{display:flex;flex-direction:row;align-items:flex-start;margin-bottom:12px;padding:0 24px;gap:8px;--sinch-global-size-icon:24px;--sinch-global-color-icon:var(--sinch-comp-dialog-color-default-icon-initial)}#caption{--sinch-global-color-text:var(--sinch-comp-dialog-color-default-title-initial);--sinch-comp-title-font:var(--sinch-comp-dialog-font-title)}#content{min-height:0;overflow:auto;padding:4px 24px}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:20px;padding:0 24px}#action.empty{display:none}#close{display:var(--sinch-dialog-close-button-display,initial);position:relative;left:4px;top:-4px;margin-left:auto}</style><dialog id="dialog"><div id="header"><slot id="icon" name="icon"></slot><sinch-title id="caption" type="m" level="3"></sinch-title><sinch-button id="close" size="s"><sinch-icon icons-version="2" name="fa-xmark" id="icon-close" slot="icon"></sinch-icon></sinch-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="action"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.17.0",
+  "version": "5.18.1",
   "files": [
     "**/*/*.css",
     "**/*/*.json",
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.15",
-    "@nectary/assets": "3.4.2"
+    "@nectary/assets": "3.4.3"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.15",
@@ -40,6 +40,6 @@
     "vite": "^7.0.6"
   },
   "peerDependencies": {
-    "@nectary/theme-base": "1.8.0"
+    "@nectary/theme-base": "1.9.0"
   }
 }

package/sheet/global/index.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/sheet/global/index.js

@@ -0,0 +1,2 @@
+import { defineCustomElement } from "../../utils/element.js";
+defineCustomElement("sinch-sheet");

package/sheet/index.d.ts

@@ -0,0 +1,18 @@
+import '../stop-events';
+import { NectaryElement } from '../utils';
+export * from './types';
+export declare class Sheet extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set open(isOpen: boolean);
+    get open(): boolean;
+    set placement(placement: string);
+    get placement(): string;
+    set overlay(overlayMode: string);
+    get overlay(): string;
+    get dialogRect(): import("../types").TRect;
+}

package/sheet/index.js

@@ -0,0 +1,230 @@
+import "../stop-events/index.js";
+import { isAttrEqual, updateBooleanAttribute, getBooleanAttribute, updateAttribute, getAttribute, getCssVar, setClass, isAttrTrue } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import { getRect } from "../utils/rect.js";
+import { getReactEventHandler } from "../utils/get-react-event-handler.js";
+import { isTargetEqual } from "../utils/event-target.js";
+import { disableScroll, enableScroll } from "../utils/scroll-lock.js";
+const templateHTML = '<style>:host{display:contents}#dialog{position:fixed;margin:0;display:grid;grid-template-rows:auto 1fr auto;padding:var(--sinch-comp-sheet-size-padding);gap:var(--sinch-comp-sheet-size-gap);max-width:unset;max-height:unset;box-sizing:border-box;contain:content;background-color:var(--sinch-comp-sheet-color-background);border:none;outline:0;opacity:0;transition-property:transform,opacity;transition-duration:var(--sinch-comp-sheet-animation-duration),calc(var(--sinch-comp-sheet-animation-duration) / 2.5);transition-timing-function:var(--sinch-comp-sheet-animation-easing)}#dialog.overlay-push{opacity:.5}#dialog[open],#dialog[open].placement-bottom,#dialog[open].placement-left,#dialog[open].placement-right,#dialog[open].placement-top{transform:translateX(0) translateY(0);opacity:1}#dialog.placement-right{top:0;right:0;margin-left:auto;height:100dvh;transform:translateX(100%);max-width:var(--sinch-comp-sheet-size-max-horizontal)}#dialog.placement-left{top:0;left:0;margin-right:auto;height:100dvh;transform:translateX(-100%);max-width:var(--sinch-comp-sheet-size-max-horizontal)}#dialog.placement-top{top:0;left:0;right:0;width:100%;transform:translateY(-100%);max-height:var(--sinch-comp-sheet-size-max-vertical)}#dialog.placement-bottom{bottom:0;left:0;right:0;width:100%;margin-top:auto;transform:translateY(100%);max-height:var(--sinch-comp-sheet-size-max-vertical)}#dialog::backdrop{display:block;background:linear-gradient(var(--sinch-comp-sheet-color-backdrop-from),var(--sinch-comp-sheet-color-backdrop-to));backdrop-filter:blur(var(--sinch-comp-sheet-size-backdrop-blur))}#content{min-height:0;overflow:auto;overscroll-behavior:contain}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px}#action.empty{display:none}@media screen and (max-width:576px){#dialog.placement-left,#dialog.placement-right{max-width:100dvw}}@media (prefers-reduced-motion:reduce){#dialog{transition-duration:0s}}</style><dialog id="dialog" aria-labelledby="title" aria-describedby="content"><slot id="title" name="title"></slot><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="action"><sinch-stop-events events="close"><slot name="footer"></slot></sinch-stop-events></div></dialog>';
+const template = document.createElement("template");
+template.innerHTML = templateHTML;
+class Sheet extends NectaryElement {
+  #$dialog;
+  #$actionWrapper;
+  #$actionSlot;
+  #controller = null;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$dialog = shadowRoot.querySelector("#dialog");
+    this.#$actionWrapper = shadowRoot.querySelector("#action");
+    this.#$actionSlot = shadowRoot.querySelector('slot[name="footer"]');
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#controller = new AbortController();
+    const options = {
+      signal: this.#controller.signal
+    };
+    this.#$dialog.classList.add(`placement-${this.placement}`);
+    this.#$dialog.classList.add(`overlay-${this.overlay}`);
+    this.#$dialog.addEventListener(
+      "mousedown",
+      this.#onBackdropMouseDown,
+      options
+    );
+    this.#$dialog.addEventListener("cancel", this.#onCancel, options);
+    this.#$dialog.addEventListener(
+      "transitionstart",
+      this.#onAnimationStart,
+      options
+    );
+    this.#$dialog.addEventListener(
+      "transitionend",
+      this.#onAnimationEnd,
+      options
+    );
+    this.#$actionSlot.addEventListener(
+      "slotchange",
+      this.#onActionSlotChange,
+      options
+    );
+    this.addEventListener("-close", this.#onCloseReactHandler, options);
+    this.addEventListener(
+      "-animation-start",
+      this.#onAnimationStartReactHandler,
+      options
+    );
+    this.addEventListener(
+      "-animation-end",
+      this.#onAnimationEndReactHandler,
+      options
+    );
+    this.#onActionSlotChange();
+    if (this.open) {
+      requestAnimationFrame(() => {
+        this.#onExpand();
+      });
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#onCollapse();
+    this.#controller.abort();
+    this.#controller = null;
+    document.body.style.removeProperty("--sinch-sheet-export-current-width");
+    document.body.style.removeProperty("--sinch-sheet-export-current-height");
+  }
+  // overlay attribute is not observed because it is expected to be set once on initialization
+  // there is no practical use case for changing it dynamically
+  static get observedAttributes() {
+    return ["open", "placement"];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (isAttrEqual(oldVal, newVal)) {
+      return;
+    }
+    switch (name) {
+      case "open": {
+        const shouldOpen = isAttrTrue(newVal);
+        if (shouldOpen) {
+          requestAnimationFrame(() => {
+            this.#onExpand();
+          });
+        } else {
+          this.#onCollapse();
+        }
+        updateBooleanAttribute(this, "open", shouldOpen);
+        break;
+      }
+      case "placement": {
+        this.#$dialog.classList.remove(...Array.from(this.#$dialog.classList).filter((cls) => cls.startsWith("placement-")));
+        this.#$dialog.classList.add(`placement-${newVal ?? "right"}`);
+        break;
+      }
+    }
+  }
+  set open(isOpen) {
+    updateBooleanAttribute(this, "open", isOpen);
+  }
+  get open() {
+    return getBooleanAttribute(this, "open");
+  }
+  set placement(placement) {
+    updateAttribute(this, "placement", placement);
+  }
+  get placement() {
+    return getAttribute(this, "placement", "right");
+  }
+  set overlay(overlayMode) {
+    updateAttribute(this, "overlay", overlayMode);
+  }
+  get overlay() {
+    return getAttribute(this, "overlay", "modal");
+  }
+  get dialogRect() {
+    return getRect(this.#$dialog);
+  }
+  #onAnimationStart = (e) => {
+    if (e.propertyName !== "transform") {
+      return;
+    }
+    this.#dispatchAnimationEvent("start");
+  };
+  #onAnimationEnd = (e) => {
+    if (e.propertyName !== "transform") {
+      return;
+    }
+    this.#dispatchAnimationEvent("end");
+  };
+  #onCancel = (e) => {
+    if (e.cancelable) {
+      e.preventDefault();
+    } else {
+      this.#onCollapse();
+    }
+    e.stopPropagation();
+    this.#dispatchCloseEvent("escape", e.cancelable);
+  };
+  #onBackdropMouseDown = (e) => {
+    if (isTargetEqual(e, this.#$dialog)) {
+      const rect = this.dialogRect;
+      const isInside = e.x >= rect.x && e.x < rect.x + rect.width && e.y >= rect.y && e.y < rect.y + rect.height;
+      if (!isInside) {
+        e.stopPropagation();
+        this.#dispatchCloseEvent("backdrop", e.cancelable);
+      }
+    }
+  };
+  #onCloseReactHandler = (e) => {
+    getReactEventHandler(this, "on-close")?.(e);
+    getReactEventHandler(this, "onClose")?.(e);
+  };
+  #onAnimationStartReactHandler = (e) => {
+    getReactEventHandler(this, "on-animation-start")?.(e);
+    getReactEventHandler(this, "onAnimationStart")?.(e);
+  };
+  #onAnimationEndReactHandler = (e) => {
+    getReactEventHandler(this, "on-animation-end")?.(e);
+    getReactEventHandler(this, "onAnimationEnd")?.(e);
+  };
+  #dispatchCloseEvent(detail, cancelable) {
+    this.dispatchEvent(new CustomEvent("-close", { detail, cancelable }));
+  }
+  #dispatchAnimationEvent(type) {
+    const eventName = type === "start" ? "-animation-start" : "-animation-end";
+    const action = this.#$dialog.open ? "expand" : "collapse";
+    const width = this.#$dialog.offsetWidth;
+    const height = this.#$dialog.offsetHeight;
+    const duration = getCssVar(this, "--sinch-comp-sheet-animation-duration") ?? "750ms";
+    const easing = getCssVar(this, "--sinch-comp-sheet-animation-easing") ?? "cubic-bezier(0.25, 1, 0.5, 1)";
+    const detail = {
+      action,
+      width,
+      height,
+      duration,
+      easing
+    };
+    document.body.style.setProperty(
+      "--sinch-sheet-export-current-width",
+      `${width}px`
+    );
+    document.body.style.setProperty(
+      "--sinch-sheet-export-current-height",
+      `${height}px`
+    );
+    this.dispatchEvent(new CustomEvent(eventName, { detail }));
+  }
+  #onExpand() {
+    if (!this.isDomConnected || this.#$dialog.open || !this.open) {
+      return;
+    }
+    if (this.overlay === "modal") {
+      this.#$dialog.showModal();
+      disableScroll();
+    } else {
+      this.#$dialog.show();
+    }
+  }
+  #onCollapse() {
+    if (!this.#$dialog.open) {
+      return;
+    }
+    this.#$dialog.close?.();
+    if (this.overlay === "modal") {
+      enableScroll();
+    }
+  }
+  #onActionSlotChange = () => {
+    setClass(
+      this.#$actionWrapper,
+      "empty",
+      this.#$actionSlot.assignedElements().length === 0
+    );
+  };
+}
+defineCustomElement("sinch-sheet", Sheet);
+export {
+  Sheet
+};

package/sheet/types.d.ts

@@ -0,0 +1,71 @@
+import type { NectaryComponentReact, NectaryComponentReactByType, NectaryComponentVanilla, NectaryComponentVanillaByType, TRect } from '../types';
+export type TSinchSheetCloseDetail = 'close' | 'escape' | 'backdrop';
+export type TSinchSheetAnimationDetail = {
+    action: 'expand' | 'collapse';
+    /** Dialog width, useful for push overlay */
+    width: number;
+    /** Dialog height, useful for push overlay */
+    height: number;
+    /** Animation duration, read from CSS var */
+    duration: string;
+    /** Animation easing, read from CSS var */
+    easing: string;
+};
+export type TSinchSheetPlacement = 'left' | 'right' | 'top' | 'bottom';
+export type TSinchSheetOverlayMode = 'modal' | 'push';
+export type TSinchSheetProps = {
+    /** Controls whether the sheet should be open */
+    open: boolean;
+    /** Sheet placement */
+    placement?: TSinchSheetPlacement;
+    /** Sheet overlay, set once when connecting the component */
+    overlay?: TSinchSheetOverlayMode;
+    readonly dialogRect?: TRect;
+};
+export type TSinchSheetEvents = {
+    /** close event handler */
+    '-close'?: (e: CustomEvent<TSinchSheetCloseDetail>) => void;
+    /** animation start event handler */
+    '-animation-start'?: (e: CustomEvent<TSinchSheetAnimationDetail>) => void;
+    /** animation end event handler */
+    '-animation-end'?: (e: CustomEvent<TSinchSheetAnimationDetail>) => void;
+};
+export type TSinchSheetStyle = {
+    '--sinch-comp-sheet-size-gap'?: string;
+    '--sinch-comp-sheet-size-max-horizontal'?: string;
+    '--sinch-comp-sheet-size-max-vertical'?: string;
+    '--sinch-comp-sheet-size-padding'?: string;
+    '--sinch-comp-sheet-animation-duration'?: string;
+    '--sinch-comp-sheet-animation-easing'?: string;
+    '--sinch-comp-sheet-size-backdrop-blur'?: string;
+    '--sinch-comp-sheet-color-backdrop-from'?: string;
+    '--sinch-comp-sheet-color-backdrop-to'?: string;
+    '--sinch-comp-sheet-color-background'?: string;
+};
+export type TSinchSheet = {
+    props: TSinchSheetProps;
+    events: TSinchSheetEvents;
+    style: TSinchSheetStyle;
+};
+export type TSinchSheetElement = NectaryComponentVanillaByType<TSinchSheet>;
+export type TSinchSheetReact = NectaryComponentReactByType<TSinchSheet>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-sheet': TSinchSheet;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-sheet': NectaryComponentVanilla<'sinch-sheet'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-sheet': NectaryComponentReact<'sinch-sheet'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-sheet': NectaryComponentReact<'sinch-sheet'>;
+        }
+    }
+}

package/sheet/types.js

@@ -0,0 +1 @@
+

package/sheet-title/global/index.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/sheet-title/global/index.js

@@ -0,0 +1,2 @@
+import { defineCustomElement } from "../../utils/element.js";
+defineCustomElement("sinch-sheet-title");

package/sheet-title/index.d.ts

@@ -0,0 +1,17 @@
+import '../icon';
+import '../title';
+import { NectaryElement } from '../utils';
+export * from './types';
+export declare class SheetTitle extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set title(caption: string);
+    get title(): string;
+    set description(description: string);
+    get description(): string;
+    get closeButtonRect(): import("../types").TRect;
+}

package/sheet-title/index.js

@@ -0,0 +1,79 @@
+import "../icon/index.js";
+import "../title/index.js";
+import { isAttrEqual, updateAttribute, getAttribute } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import { getRect } from "../utils/rect.js";
+const templateHTML = '<style>:host{display:contents;--sinch-sheet-close-button-display:unset}#top{display:flex;flex-direction:row;align-items:center;margin-top:8px;gap:8px}#text{--sinch-global-color-text:var(--sinch-comp-sheet-color-title);--sinch-comp-title-font:var(--sinch-comp-sheet-font-title)}#description{--sinch-global-color-text:var(--sinch-comp-sheet-color-description);--sinch-comp-text-font:var(--sinch-comp-sheet-font-description)}#close{display:var(--sinch-sheet-close-button-display,initial);margin-left:auto}</style><div id="title"><div id="top"><slot id="icon" name="icon"></slot><sinch-title id="text" type="m" level="3"></sinch-title><sinch-button id="close" size="s" aria-label="Close"><sinch-icon icons-version="2" name="fa-xmark" id="icon-close" slot="icon"></sinch-icon></sinch-button></div><sinch-text id="description" type="m"></sinch-text></div>';
+const template = document.createElement("template");
+template.innerHTML = templateHTML;
+class SheetTitle extends NectaryElement {
+  #$closeButton;
+  #$text;
+  #$description;
+  #controller = null;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$closeButton = shadowRoot.querySelector("#close");
+    this.#$text = shadowRoot.querySelector("#text");
+    this.#$description = shadowRoot.querySelector("#description");
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#controller = new AbortController();
+    const options = {
+      signal: this.#controller.signal
+    };
+    this.#$closeButton.addEventListener("click", this.#onCloseClick, options);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#controller.abort();
+    this.#controller = null;
+  }
+  static get observedAttributes() {
+    return ["title", "description", "close-aria-label"];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (isAttrEqual(oldVal, newVal)) {
+      return;
+    }
+    switch (name) {
+      case "title": {
+        updateAttribute(this.#$text, "text", newVal);
+        break;
+      }
+      case "description": {
+        this.#$description.textContent = newVal;
+        break;
+      }
+      case "close-aria-label": {
+        updateAttribute(this.#$closeButton, "aria-label", newVal);
+        break;
+      }
+    }
+  }
+  set title(caption) {
+    updateAttribute(this, "title", caption);
+  }
+  get title() {
+    return getAttribute(this, "title", "");
+  }
+  set description(description) {
+    updateAttribute(this, "description", description);
+  }
+  get description() {
+    return getAttribute(this, "description", "");
+  }
+  get closeButtonRect() {
+    return getRect(this.#$closeButton);
+  }
+  #onCloseClick = () => {
+    this.dispatchEvent(new CustomEvent("-close", { cancelable: true, bubbles: true, detail: "close" }));
+  };
+}
+defineCustomElement("sinch-sheet-title", SheetTitle);
+export {
+  SheetTitle
+};

package/sheet-title/types.d.ts

@@ -0,0 +1,53 @@
+import type { NectaryComponentReact, NectaryComponentReactByType, NectaryComponentVanilla, NectaryComponentVanillaByType, TRect } from '../types';
+export type TSinchSheetTitleProps = {
+    /** The title of the sheet. */
+    title: string;
+    /** The description of the sheet. */
+    description?: string;
+    /** Close button label that is used for a11y */
+    'close-aria-label'?: string;
+    readonly closeButtonRect?: TRect;
+};
+export type TSinchSheetTitleEvents = {
+    /** close event handler */
+    '-close'?: (e: CustomEvent<'close'>) => void;
+};
+export type TSinchSheetTitleStyle = {
+    '--sinch-sheet-close-button-display'?: string;
+    '--sinch-comp-sheet-font-description'?: string;
+    '--sinch-comp-sheet-font-title'?: string;
+    '--sinch-comp-sheet-color-description'?: string;
+    '--sinch-comp-sheet-color-title'?: string;
+    '--sinch-global-size-icon'?: string;
+    '--sinch-global-color-icon'?: string;
+    '--sinch-global-color-text'?: string;
+    '--sinch-comp-title-font'?: string;
+    '--sinch-comp-text-font'?: string;
+};
+export type TSinchSheetTitle = {
+    props: TSinchSheetTitleProps;
+    events: TSinchSheetTitleEvents;
+    style: TSinchSheetTitleStyle;
+};
+export type TSinchSheetTitleElement = NectaryComponentVanillaByType<TSinchSheetTitle>;
+export type TSinchSheetTitleReact = NectaryComponentReactByType<TSinchSheetTitle>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-sheet-title': TSinchSheetTitle;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-sheet-title': NectaryComponentVanilla<'sinch-sheet-title'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-sheet-title': NectaryComponentReact<'sinch-sheet-title'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-sheet-title': NectaryComponentReact<'sinch-sheet-title'>;
+        }
+    }
+}

package/sheet-title/types.js

@@ -0,0 +1 @@
+

package/utils/component-names.d.ts

@@ -1,3 +1,3 @@
-export declare const BASE_COMPONENT_NAMES_LIST: readonly ["accordion-item", "accordion", "action-menu-option", "action-menu", "alert", "avatar", "badge", "button-group-item", "button-group", "button", "card-container", "card-v2-title", "card-v2", "checkbox", "chip", "code-tag", "color-menu-option", "color-menu", "color-swatch", "date-picker", "dialog", "emoji-picker", "emoji", "field", "file-drop", "file-picker", "file-status", "flag", "grid-item", "grid", "help-tooltip", "icon", "inline-alert", "input", "link", "list-item", "list", "pagination", "persistent-overlay", "pop", "popover", "progress-stepper-item", "progress-stepper", "progress", "radio-option", "radio", "rich-text", "rich-textarea", "rich-textarea-chip", "segment-collapse", "segmented-control-option", "segmented-control", "segmented-icon-control-option", "segmented-icon-control", "select-button", "select-menu-option", "select-menu", "skeleton-item", "skeleton", "spinner", "stop-events", "table-body", "table-cell", "table-head-cell", "table-head", "table-row", "table", "tabs-icon-option", "tabs-option", "tabs", "tag", "text", "textarea", "time-picker", "title", "toast-manager", "toast", "toggle", "tooltip"];
-export declare const BASE_COMPONENT_NAMES: Set<"pop" | "button" | "dialog" | "input" | "link" | "progress" | "table" | "textarea" | "title" | "accordion-item" | "accordion" | "action-menu-option" | "action-menu" | "alert" | "avatar" | "badge" | "button-group-item" | "button-group" | "card-container" | "card-v2-title" | "card-v2" | "checkbox" | "chip" | "code-tag" | "color-menu-option" | "color-menu" | "color-swatch" | "date-picker" | "emoji-picker" | "emoji" | "field" | "file-drop" | "file-picker" | "file-status" | "flag" | "grid-item" | "grid" | "help-tooltip" | "icon" | "inline-alert" | "list-item" | "list" | "pagination" | "persistent-overlay" | "popover" | "progress-stepper-item" | "progress-stepper" | "radio-option" | "radio" | "rich-text" | "rich-textarea" | "rich-textarea-chip" | "segment-collapse" | "segmented-control-option" | "segmented-control" | "segmented-icon-control-option" | "segmented-icon-control" | "select-button" | "select-menu-option" | "select-menu" | "skeleton-item" | "skeleton" | "spinner" | "stop-events" | "table-body" | "table-cell" | "table-head-cell" | "table-head" | "table-row" | "tabs-icon-option" | "tabs-option" | "tabs" | "tag" | "text" | "time-picker" | "toast-manager" | "toast" | "toggle" | "tooltip">;
+export declare const BASE_COMPONENT_NAMES_LIST: readonly ["accordion-item", "accordion", "action-menu-option", "action-menu", "alert", "avatar", "badge", "button-group-item", "button-group", "button", "card-container", "card-v2-title", "card-v2", "checkbox", "chip", "code-tag", "color-menu-option", "color-menu", "color-swatch", "date-picker", "dialog", "emoji-picker", "emoji", "field", "file-drop", "file-picker", "file-status", "flag", "grid-item", "grid", "help-tooltip", "icon", "inline-alert", "input", "link", "list-item", "list", "pagination", "persistent-overlay", "pop", "popover", "progress-stepper-item", "progress-stepper", "progress", "radio-option", "radio", "rich-text", "rich-textarea", "rich-textarea-chip", "segment-collapse", "segmented-control-option", "segmented-control", "segmented-icon-control-option", "segmented-icon-control", "select-button", "select-menu-option", "select-menu", "sheet", "sheet-title", "skeleton-item", "skeleton", "spinner", "stop-events", "table-body", "table-cell", "table-head-cell", "table-head", "table-row", "table", "tabs-icon-option", "tabs-option", "tabs", "tag", "text", "textarea", "time-picker", "title", "toast-manager", "toast", "toggle", "tooltip"];
+export declare const BASE_COMPONENT_NAMES: Set<"pop" | "button" | "dialog" | "input" | "link" | "progress" | "table" | "textarea" | "title" | "accordion-item" | "accordion" | "action-menu-option" | "action-menu" | "alert" | "avatar" | "badge" | "button-group-item" | "button-group" | "card-container" | "card-v2-title" | "card-v2" | "checkbox" | "chip" | "code-tag" | "color-menu-option" | "color-menu" | "color-swatch" | "date-picker" | "emoji-picker" | "emoji" | "field" | "file-drop" | "file-picker" | "file-status" | "flag" | "grid-item" | "grid" | "help-tooltip" | "icon" | "inline-alert" | "list-item" | "list" | "pagination" | "persistent-overlay" | "popover" | "progress-stepper-item" | "progress-stepper" | "radio-option" | "radio" | "rich-text" | "rich-textarea" | "rich-textarea-chip" | "segment-collapse" | "segmented-control-option" | "segmented-control" | "segmented-icon-control-option" | "segmented-icon-control" | "select-button" | "select-menu-option" | "select-menu" | "sheet" | "sheet-title" | "skeleton-item" | "skeleton" | "spinner" | "stop-events" | "table-body" | "table-cell" | "table-head-cell" | "table-head" | "table-row" | "tabs-icon-option" | "tabs-option" | "tabs" | "tag" | "text" | "time-picker" | "toast-manager" | "toast" | "toggle" | "tooltip">;
 export type ComponentName = `sinch-${typeof BASE_COMPONENT_NAMES_LIST[number]}`;

package/utils/component-names.js

@@ -56,6 +56,8 @@ const BASE_COMPONENT_NAMES_LIST = [
   "select-button",
   "select-menu-option",
   "select-menu",
+  "sheet",
+  "sheet-title",
   "skeleton-item",
   "skeleton",
   "spinner",

package/utils/element.d.ts

@@ -65,6 +65,8 @@ declare const BASE_COMPONENT_NAMES_LIST: readonly [
 	"select-button",
 	"select-menu-option",
 	"select-menu",
+	"sheet",
+	"sheet-title",
 	"skeleton-item",
 	"skeleton",
 	"spinner",