kanto-ds 1.2.0 → 1.3.0

package/dist/index.d.ts

@@ -80,4 +80,5 @@ export type { KtOption } from './internal/listbox.js';
 export type { KtCountry } from './internal/countries.js';
 export { getIcon, registerIcon, registerIcons, registeredIcons } from './icons/registry.js';
 export type { IconNode } from './icons/registry.js';
+export { defaultStrings, resetStrings, setStrings, strings as getStrings, type KtStrings, } from './internal/strings.js';
 export { KtElement, defineElement } from './internal/kt-element.js';

package/dist/index.js

@@ -1,13 +1,13 @@
-import { KtAvatar as r } from "./components/core/kt-avatar/kt-avatar.js";
+import { KtAvatar as o } from "./components/core/kt-avatar/kt-avatar.js";
 import { KtBadge as m } from "./components/core/kt-badge/kt-badge.js";
 import { KtButton as f } from "./components/core/kt-button/kt-button.js";
 import { KtSplitButton as K } from "./components/core/kt-split-button/kt-split-button.js";
 import { KtCard as n } from "./components/core/kt-card/kt-card.js";
 import { KtCode as g } from "./components/core/kt-code/kt-code.js";
-import { KtIcon as s } from "./components/core/kt-icon/kt-icon.js";
+import { KtIcon as l } from "./components/core/kt-icon/kt-icon.js";
 import { KtKbd as u } from "./components/core/kt-kbd/kt-kbd.js";
-import { KtDragDrop as I } from "./components/forms/kt-drag-drop/kt-drag-drop.js";
-import { KtForm as S } from "./components/forms/kt-form/kt-form.js";
+import { KtDragDrop as T } from "./components/forms/kt-drag-drop/kt-drag-drop.js";
+import { KtForm as b } from "./components/forms/kt-form/kt-form.js";
 import { KtInput as B } from "./components/forms/kt-input/kt-input.js";
 import { KtInputMenu as D } from "./components/forms/kt-input-menu/kt-input-menu.js";
 import { KtLabelInput as P } from "./components/forms/kt-label-input/kt-label-input.js";
@@ -25,16 +25,16 @@ import { KtToggleButtonGroup as W } from "./components/navigation/kt-toggle-butt
 import { KtAlert as Y } from "./components/feedback/kt-alert/kt-alert.js";
 import { KtEmptyState as _ } from "./components/feedback/kt-empty-state/kt-empty-state.js";
 import { KtProgressBar as tt } from "./components/feedback/kt-progress-bar/kt-progress-bar.js";
-import { KtSkeleton as rt } from "./components/feedback/kt-skeleton/kt-skeleton.js";
+import { KtSkeleton as ot } from "./components/feedback/kt-skeleton/kt-skeleton.js";
 import { KtToast as mt } from "./components/feedback/kt-toast/kt-toast.js";
 import { KtToastContainer as ft } from "./components/feedback/kt-toast-container/kt-toast-container.js";
 import { t as Kt } from "./chunks/toaster-PmdKSV5x.js";
 import { KtTooltip as nt } from "./components/feedback/kt-tooltip/kt-tooltip.js";
 import { KtCollapsible as gt } from "./components/overlays/kt-collapsible/kt-collapsible.js";
-import { KtConfirmDialog as st } from "./components/overlays/kt-confirm-dialog/kt-confirm-dialog.js";
+import { KtConfirmDialog as lt } from "./components/overlays/kt-confirm-dialog/kt-confirm-dialog.js";
 import { KtDropdown as ut } from "./components/overlays/kt-dropdown/kt-dropdown.js";
-import { KtModal as It } from "./components/overlays/kt-modal/kt-modal.js";
-import { KtSidePanel as St } from "./components/overlays/kt-side-panel/kt-side-panel.js";
+import { KtModal as Tt } from "./components/overlays/kt-modal/kt-modal.js";
+import { KtSidePanel as bt } from "./components/overlays/kt-side-panel/kt-side-panel.js";
 import { KtChart as Bt } from "./components/data/kt-chart/kt-chart.js";
 import { KtMeter as Dt } from "./components/data/kt-meter/kt-meter.js";
 import { KtPagination as Pt } from "./components/data/kt-pagination/kt-pagination.js";
@@ -42,10 +42,11 @@ import { KtStat as vt } from "./components/data/kt-stat/kt-stat.js";
 import { KtTable as Ht } from "./components/data/kt-table/kt-table.js";
 import { KtTimeline as kt, KtTimelineItem as wt } from "./components/data/kt-timeline/kt-timeline.js";
 import { g as Ft, r as Gt, a as Lt, b as Nt } from "./chunks/defaults-DKzFsNbv.js";
-import { K as qt, d as zt } from "./chunks/kt-element-B_jjQDhg.js";
+import { d as qt, s as zt, r as Jt, a as Ot } from "./chunks/index-fzPIgxe2.js";
+import { K as Rt, d as Ut } from "./chunks/kt-element-mdd5cXZX.js";
 export {
   Y as KtAlert,
-  r as KtAvatar,
+  o as KtAvatar,
   m as KtBadge,
   y as KtBreadcrumb,
   f as KtButton,
@@ -53,27 +54,27 @@ export {
   Bt as KtChart,
   g as KtCode,
   gt as KtCollapsible,
-  st as KtConfirmDialog,
-  I as KtDragDrop,
+  lt as KtConfirmDialog,
+  T as KtDragDrop,
   ut as KtDropdown,
-  qt as KtElement,
+  Rt as KtElement,
   _ as KtEmptyState,
-  S as KtForm,
+  b as KtForm,
   Q as KtHeader,
-  s as KtIcon,
+  l as KtIcon,
   B as KtInput,
   D as KtInputMenu,
   u as KtKbd,
   P as KtLabelInput,
   Dt as KtMeter,
-  It as KtModal,
+  Tt as KtModal,
   G as KtPageHeader,
   Pt as KtPagination,
   tt as KtProgressBar,
   N as KtSegmentedControl,
   v as KtSelect,
-  St as KtSidePanel,
-  rt as KtSkeleton,
+  bt as KtSidePanel,
+  ot as KtSkeleton,
   K as KtSplitButton,
   vt as KtStat,
   q as KtSubMenuNavigation,
@@ -88,11 +89,15 @@ export {
   U as KtToggleButton,
   W as KtToggleButtonGroup,
   nt as KtTooltip,
-  zt as defineElement,
+  qt as defaultStrings,
+  Ut as defineElement,
   Ft as getIcon,
+  zt as getStrings,
   Gt as registerIcon,
   Lt as registerIcons,
   Nt as registeredIcons,
+  Jt as resetStrings,
+  Ot as setStrings,
   Kt as toaster
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/internal/kt-element.d.ts

@@ -1,4 +1,4 @@
-import { LitElement, type CSSResultGroup } from 'lit';
+import { LitElement, type CSSResultGroup, type PropertyValues } from 'lit';
 /**
  * Base class for every Kanto element.
  *
@@ -10,6 +10,11 @@ import { LitElement, type CSSResultGroup } from 'lit';
  */
 export declare class KtElement extends LitElement {
     static styles: CSSResultGroup;
+    private unsubscribeStrings;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** True when this update was triggered by `setStrings`. */
+    protected stringsChanged(changed: PropertyValues): boolean;
 }
 /**
  * Registers a custom element, tolerating a repeat call.

package/dist/internal/strings.d.ts

@@ -0,0 +1,93 @@
+/**
+ * Every piece of copy the elements write themselves — empty states, button
+ * labels, validation messages, and the accessible names a screen reader
+ * announces but nobody sees.
+ *
+ * English by default. An application in another language replaces them once,
+ * at start-up, and every element follows:
+ *
+ *     import { setStrings } from 'kanto-ds/strings';
+ *
+ *     setStrings({
+ *       clear: 'Effacer',
+ *       pageOf: (page, total) => `Page ${page} sur ${total}`,
+ *     });
+ *
+ * Anything left out keeps its English default. A string an element also takes
+ * as a property — `emptyText`, `placeholder`, `confirmLabel` — still wins when
+ * it is set, so one screen can say something different from the rest.
+ *
+ * Copy that carries a value is a function, not a template with placeholders:
+ * the translation owns the word order, and "Remove {name}" does not survive
+ * languages that put the object first.
+ */
+export interface KtStrings {
+    /** Clear button in fields. */
+    clear: string;
+    /** Close button on toasts, alerts' dismiss button. */
+    close: string;
+    dismiss: string;
+    /** Copy button on `kt-code`, and its state once copied. */
+    copy: string;
+    copied: string;
+    copyCode: string;
+    /** The countdown bar on a toast that closes itself. */
+    timeRemaining: string;
+    /** Remove button on a badge or a dropped file. */
+    remove: (name: string) => string;
+    noOptions: string;
+    noResults: string;
+    noActions: string;
+    noData: string;
+    loading: string;
+    /** `kt-select` with nothing chosen. */
+    select: string;
+    openList: string;
+    closeList: string;
+    showPassword: string;
+    hidePassword: string;
+    searchCountry: string;
+    noCountry: string;
+    countryCode: (country: string | undefined) => string;
+    dragAndDrop: string;
+    browseFiles: string;
+    recommendedSize: (size: string) => string;
+    selectedFiles: string;
+    required: string;
+    selectOption: string;
+    selectFile: string;
+    openMenu: string;
+    closeMenu: string;
+    breadcrumb: string;
+    secondaryNavigation: string;
+    pagination: string;
+    previous: string;
+    next: string;
+    pageOf: (page: number, total: number) => string;
+    moreActions: string;
+    selectRow: string;
+    selectAll: string;
+    total: string;
+    /** Column headers of the data table every chart renders for assistive tech. */
+    chartSeries: string;
+    chartPoint: string;
+    chartSlice: string;
+    chartShare: string;
+    confirmHeading: string;
+    confirm: string;
+    cancel: string;
+    details: string;
+    avatar: string;
+}
+export declare const defaultStrings: Readonly<KtStrings>;
+/** The strings in effect. Elements read them at render time. */
+export declare function strings(): Readonly<KtStrings>;
+/**
+ * Replaces some or all of the strings, and re-renders every connected element
+ * so the change shows at once — switching language at runtime works.
+ */
+export declare function setStrings(overrides: Partial<KtStrings>): void;
+/** Back to the English defaults. */
+export declare function resetStrings(): void;
+/** Calls `listener` after every `setStrings`. Returns the unsubscribe function. */
+export declare function onStringsChange(listener: () => void): () => void;

package/dist/strings/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * The copy Kanto's elements write themselves, and the way to translate it.
+ *
+ *     import { setStrings } from 'kanto-ds/strings';
+ *
+ *     setStrings({ clear: 'Effacer', noData: 'Aucune donnée' });
+ *
+ * A light entry point: it loads no element, so it can run before any of them.
+ * The same functions are exported from `kanto-ds`.
+ */
+export { defaultStrings, resetStrings, setStrings, strings as getStrings, type KtStrings, } from '#internal/strings';

package/dist/strings/index.js

@@ -0,0 +1,8 @@
+import { d as r, s as a, r as e, a as g } from "../chunks/index-fzPIgxe2.js";
+export {
+  r as defaultStrings,
+  a as getStrings,
+  e as resetStrings,
+  g as setStrings
+};
+//# sourceMappingURL=index.js.map

package/dist/strings/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/tokens/base.css

@@ -77,3 +77,56 @@ pre {
   outline: var(--outline-width) solid var(--color-primary-base);
   outline-offset: 2px;
 }
+
+/* Before its definition loads, a custom element is an unknown inline element:
+   its slotted text and icons show raw, unstyled, then jump into place. Hidden
+   instead — `visibility`, not `display`, so the page keeps its layout and does
+   not shift twice. Scoped to Kanto's own tags, never to every :not(:defined)
+   element on the page. */
+:is(
+  kt-alert,
+  kt-avatar,
+  kt-badge,
+  kt-breadcrumb,
+  kt-button,
+  kt-card,
+  kt-chart,
+  kt-code,
+  kt-collapsible,
+  kt-confirm-dialog,
+  kt-drag-drop,
+  kt-dropdown,
+  kt-empty-state,
+  kt-form,
+  kt-header,
+  kt-icon,
+  kt-input,
+  kt-input-menu,
+  kt-kbd,
+  kt-label-input,
+  kt-meter,
+  kt-modal,
+  kt-page-header,
+  kt-pagination,
+  kt-progress-bar,
+  kt-segmented-control,
+  kt-select,
+  kt-side-panel,
+  kt-skeleton,
+  kt-split-button,
+  kt-stat,
+  kt-sub-menu-navigation,
+  kt-table,
+  kt-tabs,
+  kt-textarea,
+  kt-timeline,
+  kt-timeline-item,
+  kt-toast,
+  kt-toast-container,
+  kt-toggle,
+  kt-toggle-button,
+  kt-toggle-button-group,
+  kt-tooltip
+):not(:defined) {
+  visibility: hidden;
+}

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "kanto-ds",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -587,7 +587,7 @@
             {
               "name": "menu-label",
               "description": "Accessible name of the caret, which has no text of its own.",
-              "value": { "type": "string", "default": "'More actions'" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
               "name": "preferred-placement",
@@ -596,7 +596,7 @@
             },
             {
               "name": "empty-text",
-              "value": { "type": "string", "default": "'No actions'" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "slots": [
@@ -636,14 +636,14 @@
               {
                 "name": "menuLabel",
                 "description": "Accessible name of the caret, which has no text of its own.",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "preferredPlacement",
                 "description": "Where to put the menu when there is room on both sides.",
                 "type": "KtDropdownPlacement"
               },
-              { "name": "emptyText", "type": "string" },
+              { "name": "emptyText", "type": "string | undefined" },
               {
                 "name": "isOpen",
                 "description": "Whether the menu is showing.",
@@ -716,12 +716,12 @@
             {
               "name": "center-label",
               "description": "Names the total in the middle of a doughnut.",
-              "value": { "type": "string", "default": "'Total'" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
               "name": "total-label",
               "description": "Names the sum in a stacked chart's tooltip and table.",
-              "value": { "type": "string", "default": "'Total'" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
               "name": "label",
@@ -802,12 +802,12 @@
               {
                 "name": "centerLabel",
                 "description": "Names the total in the middle of a doughnut.",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "totalLabel",
                 "description": "Names the sum in a stacked chart's tooltip and table.",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "label",
@@ -918,7 +918,7 @@
             },
             {
               "name": "label",
-              "value": { "type": "string", "default": "'Pagination'" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "events": [
@@ -935,7 +935,7 @@
                 "type": "number"
               },
               { "name": "totalPages", "type": "number" },
-              { "name": "label", "type": "string" }
+              { "name": "label", "type": "string | undefined" }
             ],
             "events": [
               {
@@ -1067,11 +1067,11 @@
             },
             {
               "name": "empty-text",
-              "value": { "type": "string", "default": "'No data to display'" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
               "name": "loading-text",
-              "value": { "type": "string", "default": "'Loading…'" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
               "name": "label",
@@ -1122,8 +1122,8 @@
                 "description": "Renders a cell. Return `undefined` to fall back to the raw value.",
                 "type": "KtCellRenderer | undefined"
               },
-              { "name": "emptyText", "type": "string" },
-              { "name": "loadingText", "type": "string" },
+              { "name": "emptyText", "type": "string | undefined" },
+              { "name": "loadingText", "type": "string | undefined" },
               {
                 "name": "label",
                 "description": "Accessible name for the table.",
@@ -1656,12 +1656,12 @@
             {
               "name": "heading",
               "description": "The prompt above the browse link.\n\nNamed `heading`, not `title`: an element already has a `title`, and\nreusing it would put the prompt in a native tooltip on the whole zone.",
-              "value": { "type": "string", "default": "'Drag and drop or'" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
               "name": "link-text",
               "description": "The clickable-looking part of the prompt.",
-              "value": { "type": "string", "default": "'browse your files'" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
               "name": "recommended-size",
@@ -1711,12 +1711,12 @@
               {
                 "name": "heading",
                 "description": "The prompt above the browse link.\n\nNamed `heading`, not `title`: an element already has a `title`, and\nreusing it would put the prompt in a native tooltip on the whole zone.",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "linkText",
                 "description": "The clickable-looking part of the prompt.",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "recommendedSize",
@@ -2007,7 +2007,7 @@
             { "name": "label", "value": { "type": "string", "default": "''" } },
             {
               "name": "empty-text",
-              "value": { "type": "string", "default": "'No options available'" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "events": [
@@ -2030,7 +2030,7 @@
               { "name": "required", "type": "boolean" },
               { "name": "error", "type": "string" },
               { "name": "label", "type": "string" },
-              { "name": "emptyText", "type": "string" },
+              { "name": "emptyText", "type": "string | undefined" },
               { "name": "selectedOption", "type": "KtOption | undefined" }
             ],
             "events": [
@@ -2093,7 +2093,7 @@
             },
             {
               "name": "placeholder",
-              "value": { "type": "string", "default": "'Select'" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             { "name": "name", "value": { "type": "string", "default": "''" } },
             {
@@ -2126,7 +2126,7 @@
             {
               "name": "empty-text",
               "description": "Shown when `options` is empty.",
-              "value": { "type": "string", "default": "'No options available'" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "events": [
@@ -2147,7 +2147,7 @@
                 "description": "The selected option's id, or `null`.",
                 "type": "string | number | null"
               },
-              { "name": "placeholder", "type": "string" },
+              { "name": "placeholder", "type": "string | undefined" },
               { "name": "name", "type": "string" },
               { "name": "size", "type": "KtSelectSize" },
               { "name": "disabled", "type": "boolean" },
@@ -2170,7 +2170,7 @@
               {
                 "name": "emptyText",
                 "description": "Shown when `options` is empty.",
-                "type": "string"
+                "type": "string | undefined"
               },
               {
                 "name": "selectedOption",
@@ -2349,7 +2349,7 @@
             {
               "name": "label",
               "description": "Accessible name for the navigation landmark.",
-              "value": { "type": "string", "default": "'Breadcrumb'" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "events": [
@@ -2368,7 +2368,7 @@
               {
                 "name": "label",
                 "description": "Accessible name for the navigation landmark.",
-                "type": "string"
+                "type": "string | undefined"
               }
             ],
             "events": [
@@ -2590,7 +2590,7 @@
             },
             {
               "name": "label",
-              "value": { "type": "string", "default": "'Secondary navigation'" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
               "name": "flush",
@@ -2621,7 +2621,7 @@
                 "description": "The href of the current page. Marks the matching link active.",
                 "type": "string"
               },
-              { "name": "label", "type": "string" },
+              { "name": "label", "type": "string | undefined" },
               {
                 "name": "flush",
                 "description": "Drops the card background, for a sidebar that owns its own surface.",
@@ -2907,7 +2907,7 @@
             },
             {
               "name": "heading",
-              "value": { "type": "string", "default": "'Are you sure?'" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
               "name": "message",
@@ -2915,11 +2915,11 @@
             },
             {
               "name": "confirm-label",
-              "value": { "type": "string", "default": "'Confirm'" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
               "name": "cancel-label",
-              "value": { "type": "string", "default": "'Cancel'" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
               "name": "variant",
@@ -2946,10 +2946,10 @@
           "js": {
             "properties": [
               { "name": "open", "type": "boolean" },
-              { "name": "heading", "type": "string" },
+              { "name": "heading", "type": "string | undefined" },
               { "name": "message", "type": "string" },
-              { "name": "confirmLabel", "type": "string" },
-              { "name": "cancelLabel", "type": "string" },
+              { "name": "confirmLabel", "type": "string | undefined" },
+              { "name": "cancelLabel", "type": "string | undefined" },
               {
                 "name": "variant",
                 "description": "`danger` gives the confirm button the solid red treatment.",
@@ -2994,7 +2994,7 @@
             },
             {
               "name": "empty-text",
-              "value": { "type": "string", "default": "'No results'" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             }
           ],
           "slots": [
@@ -3035,7 +3035,7 @@
                 "type": "KtDropdownAlign"
               },
               { "name": "disabled", "type": "boolean" },
-              { "name": "emptyText", "type": "string" },
+              { "name": "emptyText", "type": "string | undefined" },
               {
                 "name": "isOpen",
                 "description": "Whether the panel is showing.",
@@ -3135,7 +3135,7 @@
             {
               "name": "eyebrow",
               "description": "Small uppercase label above the heading — \"Details\", \"Editing\".",
-              "value": { "type": "string", "default": "'Details'" }
+              "value": { "type": "string | undefined", "default": "undefined" }
             },
             {
               "name": "heading",
@@ -3163,7 +3163,7 @@
               {
                 "name": "eyebrow",
                 "description": "Small uppercase label above the heading — \"Details\", \"Editing\".",
-                "type": "string"
+                "type": "string | undefined"
               },
               { "name": "heading", "type": "string" },
               {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kanto-ds",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Framework-agnostic design system for data-dense product interfaces.",
   "keywords": [
     "design-system",
@@ -11,7 +11,9 @@
     "dark-theme"
   ],
   "homepage": "https://kanto.arnaudmichel.fr",
-  "bugs": "https://github.com/MrArnaudMichel/kanto/issues",
+  "bugs": {
+    "url": "https://github.com/MrArnaudMichel/kanto/issues"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/MrArnaudMichel/kanto.git"
@@ -51,6 +53,10 @@
       "types": "./dist/icons/index.d.ts",
       "default": "./dist/icons/index.js"
     },
+    "./strings": {
+      "types": "./dist/strings/index.d.ts",
+      "default": "./dist/strings/index.js"
+    },
     "./react": {
       "types": "./dist/react/index.d.ts",
       "default": "./dist/react/index.js"
@@ -264,7 +270,8 @@
     "format:check": "prettier --check .",
     "clean": "node -e \"fs.rmSync(dist,{recursive:true,force:true})\"",
     "check:exports": "node scripts/check-exports.js",
-    "verify": "npm run format:check && npm run lint && npm run typecheck && npm run test && npm run build && npm run check:exports && npm run build:demo",
+    "check:size": "node scripts/check-size.js",
+    "verify": "npm run format:check && npm run lint && npm run typecheck && npm run test && npm run build && npm run check:exports && npm run check:size && npm run build:demo",
     "release": "node scripts/release.js",
     "release:dry": "node scripts/release.js --dry-run",
     "prepublishOnly": "npm run verify"
@@ -300,6 +307,7 @@
     "axe-core": "^4.13.0",
     "custom-element-jet-brains-integration": "^1.8.0",
     "custom-element-vs-code-integration": "^1.5.0",
+    "esbuild": "^0.28.2",
     "eslint": "^10.10.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-lit": "^2.3.1",