@ds-mo/ui 0.13.0 → 0.14.1

package/dist/types/.stencil/BarNav/BarNav.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import type { TabItem } from '../TabGroup/tab-item-utils';
+import { type TabItem } from '../TabGroup/tab-item-utils';
 export type BarNavBackground = 'primary' | 'secondary' | 'transparent' | 'translucent';
 /** Same shape as `TabItem` — supports `{ type: 'divider' }` between tab groups. */
 export type BarNavTab = TabItem;
@@ -55,7 +55,10 @@ export declare class BarNav {
     private hideTabsForDetailRoute;
     private tabsCollapsed;
     private menuOpen;
+    /** When false, defer showing expanded tabs or the collapsed trigger until intrinsic width is measured (avoids a one-frame flash of the full tab row on narrow viewports). */
+    private tabLayoutCommitted;
     private static readonly HOST_PROP_SYNC_BUDGET;
+    private static readonly INTRINSIC_WIDTH_RETRY_MAX;
     private leftEl;
     private triggerEl;
     private menuEl;
@@ -63,9 +66,11 @@ export declare class BarNav {
     private probeTabGroupEl;
     private resizeObserver;
     private overflowCheckScheduled;
+    private intrinsicWidthRetryCount;
     private get effectiveValue();
     private get activeTabLabel();
     private get activeTabHasDot();
+    private digestTabsConfig;
     onPropsChange(): void;
     onUrlChange(): void;
     onSelectionChange(): void;
@@ -84,6 +89,7 @@ export declare class BarNav {
     /** Width left for tabs after actions — stable while collapsed (unlike leftEl box when hugging the trigger). */
     private getLeftZoneAvailableWidth;
     private getTabsIntrinsicWidth;
+    private scheduleIntrinsicWidthRetry;
     private updateTabsCollapsed;
     private syncMenuAnchor;
     private handleMenuSelect;

package/dist/types/.stencil/BarNav/bar-nav-dom-utils.d.ts

@@ -0,0 +1,12 @@
+type QueryableHost = {
+    shadowRoot?: ShadowRoot | null;
+    querySelector: (selectors: string) => Element | null;
+};
+/**
+ * Query within a Stencil custom-element host (light DOM today, shadow DOM–safe).
+ * Use for child nodes owned by ds-tab-group and similar components.
+ */
+export declare function queryWithinComponentHost(host: QueryableHost | null | undefined, selector: string): HTMLElement | null;
+export declare function getTabListFromTabGroup(tabGroupEl: QueryableHost | null | undefined): HTMLElement | null;
+export {};
+//# sourceMappingURL=bar-nav-dom-utils.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "0.13.0",
+  "version": "0.14.1",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",
@@ -40,7 +40,9 @@
   ],
   "scripts": {
     "build": "stencil build && node scripts/patch-index-types.mjs",
-    "test": "node --import tsx/esm --test tests/panel-nav-utils.test.ts tests/bar-nav-utils.test.ts tests/bar-nav-tabs-menu-utils.test.ts",
+    "test": "node --import tsx/esm --test tests/panel-nav-utils.test.ts tests/bar-nav-utils.test.ts tests/bar-nav-tabs-menu-utils.test.ts tests/bar-nav-dom-utils.test.ts",
+    "test:e2e": "npm run build && playwright test",
+    "test:e2e:install": "playwright install chromium",
     "build:docs": "stencil build --docs",
     "dev": "stencil build --dev --watch",
     "storybook": "stencil build && storybook dev -p 6006",
@@ -62,6 +64,7 @@
   "devDependencies": {
     "@ds-mo/icons": "^4.3.1",
     "@ds-mo/tokens": "^2.9.0",
+    "@playwright/test": "^1.55.0",
     "@eslint/js": "^10.0.1",
     "@modelcontextprotocol/sdk": "^1.29.0",
     "@stencil/angular-output-target": "^1.3.1",