@ds-mo/ui 15.11.1 → 15.12.0

package/dist/types/components.d.ts

@@ -83,7 +83,7 @@ import { SettingRowToggleVariant } from "./components/SettingRowToggle/SettingRo
 import { ShellAppComposition, ShellNavigationConfig, ShellPageChromeConfig, ShellSectionNavigation, ShellToolsConfig } from "./components/ShellApp/shell-app-types";
 import { ShellGradientPreset } from "./shell/shell-gradient-presets";
 import { ShellPageCapacity, ShellPageContentInset, ShellPageContentSurface, ShellPageDesktopHeaderPlacement, ShellPageHeaderPresentation } from "./components/ShellPage/shell-page-types";
-import { SkeletonBackground, SkeletonVariant } from "./components/Skeleton/Skeleton";
+import { SkeletonBackground, SkeletonControlAppearance, SkeletonControlContent, SkeletonVariant } from "./components/Skeleton/Skeleton";
 import { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, TextFontFeature, TextVariant, TextWrap } from "./components/Text/text-types";
 import { SliderOrientation, SliderSize, SliderThumbAlignment, SliderTick, SliderValue } from "./components/Slider/Slider";
 import { SwatchPickerOption, SwatchPickerSection } from "./components/SwatchPicker/swatch-picker-types";
@@ -173,7 +173,7 @@ export { SettingRowToggleVariant } from "./components/SettingRowToggle/SettingRo
 export { ShellAppComposition, ShellNavigationConfig, ShellPageChromeConfig, ShellSectionNavigation, ShellToolsConfig } from "./components/ShellApp/shell-app-types";
 export { ShellGradientPreset } from "./shell/shell-gradient-presets";
 export { ShellPageCapacity, ShellPageContentInset, ShellPageContentSurface, ShellPageDesktopHeaderPlacement, ShellPageHeaderPresentation } from "./components/ShellPage/shell-page-types";
-export { SkeletonBackground, SkeletonVariant } from "./components/Skeleton/Skeleton";
+export { SkeletonBackground, SkeletonControlAppearance, SkeletonControlContent, SkeletonVariant } from "./components/Skeleton/Skeleton";
 export { LineTruncation, TextAlign, TextColor, TextDecoration, TextElement, TextFontFeature, TextVariant, TextWrap } from "./components/Text/text-types";
 export { SliderOrientation, SliderSize, SliderThumbAlignment, SliderTick, SliderValue } from "./components/Slider/Slider";
 export { SwatchPickerOption, SwatchPickerSection } from "./components/SwatchPicker/swatch-picker-types";
@@ -1061,6 +1061,11 @@ export namespace Components {
           * @default 'No actions available'
          */
         "emptyMessage": string;
+        /**
+          * Retain sections and rows while replacing their headings, labels, and values with skeletons.
+          * @default false
+         */
+        "isLoading": boolean;
         /**
           * Ordered groups of actions rendered in the card. Empty groups are omitted.
           * @default []
@@ -1085,6 +1090,11 @@ export namespace Components {
           * Chart heading shown in the card header.
          */
         "heading": string;
+        /**
+          * Skeletonize the header and chart canvas; custom body content owns its loading atoms.
+          * @default false
+         */
+        "isLoading": boolean;
         /**
           * Renders the standard filter action before custom actions.
           * @default false
@@ -1114,6 +1124,11 @@ export namespace Components {
           * Destination for the card's native link.
          */
         "href": string;
+        /**
+          * Preserve the card layout while its copy and navigation affordance show skeletons.
+          * @default false
+         */
+        "isLoading": boolean;
         /**
           * `navigation-only` makes the complete card the link. `content` keeps the header as the link and exposes a non-interactive body slot below it.
           * @default 'navigation-only'
@@ -1198,6 +1213,11 @@ export namespace Components {
           * Section heading shown in the card header.
          */
         "heading": string;
+        /**
+          * Keep the card and projected content in place while its header shows skeletons.
+          * @default false
+         */
+        "isLoading": boolean;
         /**
           * @default 'Save'
          */
@@ -1228,6 +1248,11 @@ export namespace Components {
           * @default 'for'
          */
         "forLabel": string;
+        /**
+          * Replace sentence fragments and controls with skeletons inside the same card.
+          * @default false
+         */
+        "isLoading": boolean;
         /**
           * Sentence prefix, supplied separately for localization.
           * @default 'Managing'
@@ -1983,6 +2008,11 @@ export namespace Components {
           * Explicit ID for the slotted control; generated when omitted.
          */
         "fieldId": string | undefined;
+        /**
+          * Masks field copy and its mounted control while preserving layout and form state.
+          * @default false
+         */
+        "isLoading": boolean;
         /**
           * Visible label for the slotted control. Omit when a nearby heading already names the field.
          */
@@ -2183,6 +2213,11 @@ export namespace Components {
           * Authored informational copy rendered without transformation.
          */
         "description": string;
+        /**
+          * Keep the informational row footprint while its copy is loading.
+          * @default false
+         */
+        "isLoading": boolean;
     }
     interface DsInput {
         /**
@@ -3082,6 +3117,11 @@ export namespace Components {
         "width": TabGroupWidth;
     }
     interface DsPagination {
+        /**
+          * Show skeletons for the existing controls without changing their geometry.
+          * @default false
+         */
+        "chromeLoading": boolean;
         /**
           * Effective whole-item capacity to request when Fit is selected.
          */
@@ -3520,6 +3560,11 @@ export namespace Components {
           * @default false
          */
         "isInactive": boolean;
+        /**
+          * Preserve each option while replacing its circle and copy with loading atoms.
+          * @default false
+         */
+        "isLoading": boolean;
         /**
           * Native form field name.
          */
@@ -3955,6 +4000,11 @@ export namespace Components {
           * Optional consequence or supporting copy for the saved option.
          */
         "description"?: string;
+        /**
+          * Skeletonize the row copy without changing the saved choice or edit presentation.
+          * @default false
+         */
+        "isLoading": boolean;
         /**
           * Settings heading shown in both presentations. Not Radio's form groupLabel.
          */
@@ -3987,6 +4037,11 @@ export namespace Components {
           * @default false
          */
         "disabled": boolean;
+        /**
+          * Preserve the real row geometry while replacing copy and switch with skeletons.
+          * @default false
+         */
+        "isLoading": boolean;
         /**
           * Name of the enabled setting.
          */
@@ -4187,6 +4242,16 @@ export namespace Components {
           * Actual parent surface context. Omit on primary and secondary surfaces.
          */
         "background": SkeletonBackground | undefined;
+        /**
+          * Filled controls replace the entire shape; other appearances retain the frame and mask its contents.
+          * @default 'filled'
+         */
+        "controlAppearance": SkeletonControlAppearance;
+        /**
+          * Content anatomy for outlined and borderless control placeholders.
+          * @default 'label'
+         */
+        "controlContent": SkeletonControlContent;
         /**
           * Shared control-density size whose height defines the control canvas.
           * @default 'md'
@@ -4197,6 +4262,16 @@ export namespace Components {
           * @default 'md'
          */
         "iconSize": IconSize1;
+        /**
+          * With preserveLayout, reveal the same projected content when loading completes.
+          * @default true
+         */
+        "isLoading": boolean;
+        /**
+          * Derive geometry from a projected control or text instead of estimating its footprint.
+          * @default false
+         */
+        "preserveLayout": boolean;
         /**
           * Round icon skeletons into circles and control skeletons into pills. Ignored for text.
           * @default false
@@ -4487,7 +4562,7 @@ export namespace Components {
          */
         "chromeLayout": TableChromeLayout;
         /**
-          * Replace opted-in table-owned caption controls with same-size visual skeletons.
+          * Replace column headers and table-owned caption controls with same-size visual skeletons.
           * @default false
          */
         "chromeLoading": boolean;
@@ -8109,6 +8184,11 @@ declare namespace LocalJSX {
           * @default 'No actions available'
          */
         "emptyMessage"?: string;
+        /**
+          * Retain sections and rows while replacing their headings, labels, and values with skeletons.
+          * @default false
+         */
+        "isLoading"?: boolean;
         /**
           * Emitted when an available row is activated. When a row has an `href`, prevent this event to take over navigation with an application router.
          */
@@ -8137,6 +8217,11 @@ declare namespace LocalJSX {
           * Chart heading shown in the card header.
          */
         "heading": string;
+        /**
+          * Skeletonize the header and chart canvas; custom body content owns its loading atoms.
+          * @default false
+         */
+        "isLoading"?: boolean;
         /**
           * Emits when the standard header filter control is activated.
          */
@@ -8170,6 +8255,11 @@ declare namespace LocalJSX {
           * Destination for the card's native link.
          */
         "href": string;
+        /**
+          * Preserve the card layout while its copy and navigation affordance show skeletons.
+          * @default false
+         */
+        "isLoading"?: boolean;
         /**
           * Emits before native navigation. Prevent this event to take over routing; the component will then prevent the original link navigation.
          */
@@ -8262,6 +8352,11 @@ declare namespace LocalJSX {
           * Section heading shown in the card header.
          */
         "heading": string;
+        /**
+          * Keep the card and projected content in place while its header shows skeletons.
+          * @default false
+         */
+        "isLoading"?: boolean;
         /**
           * Emits a controlled edit, save, or cancel request.
          */
@@ -8296,6 +8391,11 @@ declare namespace LocalJSX {
           * @default 'for'
          */
         "forLabel"?: string;
+        /**
+          * Replace sentence fragments and controls with skeletons inside the same card.
+          * @default false
+         */
+        "isLoading"?: boolean;
         /**
           * Sentence prefix, supplied separately for localization.
           * @default 'Managing'
@@ -9153,6 +9253,11 @@ declare namespace LocalJSX {
           * Explicit ID for the slotted control; generated when omitted.
          */
         "fieldId"?: string | undefined;
+        /**
+          * Masks field copy and its mounted control while preserving layout and form state.
+          * @default false
+         */
+        "isLoading"?: boolean;
         /**
           * Visible label for the slotted control. Omit when a nearby heading already names the field.
          */
@@ -9381,6 +9486,11 @@ declare namespace LocalJSX {
           * Authored informational copy rendered without transformation.
          */
         "description": string;
+        /**
+          * Keep the informational row footprint while its copy is loading.
+          * @default false
+         */
+        "isLoading"?: boolean;
     }
     interface DsInput {
         /**
@@ -10332,6 +10442,11 @@ declare namespace LocalJSX {
         "width"?: TabGroupWidth;
     }
     interface DsPagination {
+        /**
+          * Show skeletons for the existing controls without changing their geometry.
+          * @default false
+         */
+        "chromeLoading"?: boolean;
         /**
           * Effective whole-item capacity to request when Fit is selected.
          */
@@ -10819,6 +10934,11 @@ declare namespace LocalJSX {
           * @default false
          */
         "isInactive"?: boolean;
+        /**
+          * Preserve each option while replacing its circle and copy with loading atoms.
+          * @default false
+         */
+        "isLoading"?: boolean;
         /**
           * Native form field name.
          */
@@ -11270,6 +11390,11 @@ declare namespace LocalJSX {
           * Optional consequence or supporting copy for the saved option.
          */
         "description"?: string;
+        /**
+          * Skeletonize the row copy without changing the saved choice or edit presentation.
+          * @default false
+         */
+        "isLoading"?: boolean;
         /**
           * Settings heading shown in both presentations. Not Radio's form groupLabel.
          */
@@ -11302,6 +11427,11 @@ declare namespace LocalJSX {
           * @default false
          */
         "disabled"?: boolean;
+        /**
+          * Preserve the real row geometry while replacing copy and switch with skeletons.
+          * @default false
+         */
+        "isLoading"?: boolean;
         /**
           * Name of the enabled setting.
          */
@@ -11558,6 +11688,16 @@ declare namespace LocalJSX {
           * Actual parent surface context. Omit on primary and secondary surfaces.
          */
         "background"?: SkeletonBackground | undefined;
+        /**
+          * Filled controls replace the entire shape; other appearances retain the frame and mask its contents.
+          * @default 'filled'
+         */
+        "controlAppearance"?: SkeletonControlAppearance;
+        /**
+          * Content anatomy for outlined and borderless control placeholders.
+          * @default 'label'
+         */
+        "controlContent"?: SkeletonControlContent;
         /**
           * Shared control-density size whose height defines the control canvas.
           * @default 'md'
@@ -11568,6 +11708,16 @@ declare namespace LocalJSX {
           * @default 'md'
          */
         "iconSize"?: IconSize1;
+        /**
+          * With preserveLayout, reveal the same projected content when loading completes.
+          * @default true
+         */
+        "isLoading"?: boolean;
+        /**
+          * Derive geometry from a projected control or text instead of estimating its footprint.
+          * @default false
+         */
+        "preserveLayout"?: boolean;
         /**
           * Round icon skeletons into circles and control skeletons into pills. Ignored for text.
           * @default false
@@ -11868,7 +12018,7 @@ declare namespace LocalJSX {
          */
         "chromeLayout"?: TableChromeLayout;
         /**
-          * Replace opted-in table-owned caption controls with same-size visual skeletons.
+          * Replace column headers and table-owned caption controls with same-size visual skeletons.
           * @default false
          */
         "chromeLoading"?: boolean;
@@ -12785,6 +12935,7 @@ declare namespace LocalJSX {
     }
     interface DsCardActionCenterAttributes {
         "emptyMessage": string;
+        "isLoading": boolean;
     }
     interface DsCardChartAttributes {
         "heading": string;
@@ -12792,11 +12943,13 @@ declare namespace LocalJSX {
         "cardWidth": CardChartWidth;
         "showFilter": boolean;
         "filterLabel": string;
+        "isLoading": boolean;
     }
     interface DsCardNavigationAttributes {
         "href": string;
         "heading": string;
         "description": string | undefined;
+        "isLoading": boolean;
         "variant": CardNavigationVariant;
         "cardWidth": CardNavigationWidth;
     }
@@ -12816,6 +12969,7 @@ declare namespace LocalJSX {
         "cardWidth": CardSettingWidth;
         "variant": CardSettingVariant;
         "editing": boolean;
+        "isLoading": boolean;
         "editLabel": string;
         "cancelLabel": string;
         "saveLabel": string;
@@ -12832,6 +12986,7 @@ declare namespace LocalJSX {
         "areaExpanded": boolean;
         "profileExpanded": boolean;
         "profilePopup": 'menu' | 'dialog';
+        "isLoading": boolean;
     }
     interface DsChartAttributes {
         "label": string;
@@ -12989,6 +13144,7 @@ declare namespace LocalJSX {
         "description": string | undefined;
         "error": boolean;
         "errorMessage": string | undefined;
+        "isLoading": boolean;
     }
     interface DsFilterMenuAttributes {
         "embedded": boolean;
@@ -13030,6 +13186,7 @@ declare namespace LocalJSX {
     }
     interface DsInlineBannerSettingsAttributes {
         "description": string;
+        "isLoading": boolean;
     }
     interface DsInputAttributes {
         "value": string;
@@ -13289,6 +13446,7 @@ declare namespace LocalJSX {
         "label": string;
         "showFirstLastButtons": boolean;
         "loading": boolean;
+        "chromeLoading": boolean;
     }
     interface DsPanelNavAttributes {
         "navStyle": NavChromeStyle;
@@ -13367,6 +13525,7 @@ declare namespace LocalJSX {
         "requiredMessage": string;
         "direction": 'vertical' | 'horizontal';
         "isInactive": boolean;
+        "isLoading": boolean;
         "hasInteractionFill": boolean;
         "ariaLabel": string | null;
         "ariaLabelledby": string | undefined;
@@ -13464,12 +13623,14 @@ declare namespace LocalJSX {
         "label": string;
         "valueLabel": string;
         "description": string;
+        "isLoading": boolean;
     }
     interface DsSettingRowToggleAttributes {
         "label": string;
         "description": string;
         "checked": boolean;
         "disabled": boolean;
+        "isLoading": boolean;
         "variant": SettingRowToggleVariant;
     }
     interface DsShellAppAttributes {
@@ -13510,9 +13671,13 @@ declare namespace LocalJSX {
         "textVariant": TextVariant;
         "iconSize": IconSize;
         "controlSize": ControlSize;
+        "controlAppearance": SkeletonControlAppearance;
+        "controlContent": SkeletonControlContent;
         "width": string;
         "rounded": boolean;
         "shimmer": boolean;
+        "preserveLayout": boolean;
+        "isLoading": boolean;
         "background": SkeletonBackground | undefined;
     }
     interface DsSliderAttributes {

package/dist/types/utils/picker-popup-controller.d.ts

@@ -0,0 +1,24 @@
+import type { AnchoredOverlayInteractionController } from './anchored-overlay-interaction-controller';
+import type { AnchoredPositionController } from './anchored-position-controller';
+export type PickerPopupPhase = 'closed' | 'open' | 'closing';
+interface PickerPopupControllerOptions {
+    position: Pick<AnchoredPositionController, 'observe' | 'unobserve' | 'schedule'>;
+    interaction: Pick<AnchoredOverlayInteractionController, 'connect' | 'disconnect'>;
+    getPopup: () => HTMLElement | null;
+    onPhaseChange: (phase: PickerPopupPhase) => void;
+}
+/** Shared presence and teardown for the internally opened date/time pickers. */
+export declare class PickerPopupController {
+    private readonly options;
+    private phase;
+    private closeTimer;
+    constructor(options: PickerPopupControllerOptions);
+    open(): void;
+    close(restoreFocus?: () => void): void;
+    disconnect(): void;
+    private teardown;
+    private finishClose;
+    private setPhase;
+}
+export {};
+//# sourceMappingURL=picker-popup-controller.d.ts.map

package/dist/types/utils/select-controller.d.ts

@@ -39,6 +39,7 @@ export declare class SelectController<T extends ChoiceOption> {
     private typeaheadTimer;
     private outsideHandler;
     private readonly position;
+    private readonly tasks;
     constructor(state: SelectControllerState<T>);
     get activeOptionId(): string | undefined;
     setTriggerElement: (element: HTMLButtonElement | null) => void;

package/dist/vue/ds-card-action-center.js

@@ -6,6 +6,7 @@ import { defineCustomElement as defineDsCardActionCenter } from '@ds-mo/ui/compo
 export const DsCardActionCenter = /*@__PURE__*/ defineContainer('ds-card-action-center', defineDsCardActionCenter, [
     'sections',
     'emptyMessage',
+    'isLoading',
     'dsAction'
 ], [
     'dsAction'

package/dist/vue/ds-card-chart.js

@@ -9,6 +9,7 @@ export const DsCardChart = /*@__PURE__*/ defineContainer('ds-card-chart', define
     'cardWidth',
     'showFilter',
     'filterLabel',
+    'isLoading',
     'dsFilterClick'
 ], [
     'dsFilterClick'

package/dist/vue/ds-card-navigation.js

@@ -7,6 +7,7 @@ export const DsCardNavigation = /*@__PURE__*/ defineContainer('ds-card-navigatio
     'href',
     'heading',
     'description',
+    'isLoading',
     'variant',
     'cardWidth',
     'dsNavigate'

package/dist/vue/ds-card-setting.js

@@ -8,6 +8,7 @@ export const DsCardSetting = /*@__PURE__*/ defineContainer('ds-card-setting', de
     'cardWidth',
     'variant',
     'editing',
+    'isLoading',
     'editLabel',
     'cancelLabel',
     'saveLabel',

package/dist/vue/ds-card-settings-scope.js

@@ -15,6 +15,7 @@ export const DsCardSettingsScope = /*@__PURE__*/ defineContainer('ds-card-settin
     'areaExpanded',
     'profileExpanded',
     'profilePopup',
+    'isLoading',
     'dsScopeRequest'
 ], [
     'dsScopeRequest'

package/dist/vue/ds-field.js

@@ -8,5 +8,6 @@ export const DsField = /*@__PURE__*/ defineContainer('ds-field', defineDsField,
     'fieldId',
     'description',
     'error',
-    'errorMessage'
+    'errorMessage',
+    'isLoading'
 ]);

package/dist/vue/ds-inline-banner-settings.js

@@ -4,5 +4,6 @@
 import { defineContainer } from './vue-runtime.js';
 import { defineCustomElement as defineDsInlineBannerSettings } from '@ds-mo/ui/components/ds-inline-banner-settings.js';
 export const DsInlineBannerSettings = /*@__PURE__*/ defineContainer('ds-inline-banner-settings', defineDsInlineBannerSettings, [
-    'description'
+    'description',
+    'isLoading'
 ]);

package/dist/vue/ds-pagination.js

@@ -20,6 +20,7 @@ export const DsPagination = /*@__PURE__*/ defineContainer('ds-pagination', defin
     'label',
     'showFirstLastButtons',
     'loading',
+    'chromeLoading',
     'dsChange'
 ], [
     'dsChange'

package/dist/vue/ds-radio.js

@@ -15,6 +15,7 @@ export const DsRadio = /*@__PURE__*/ defineContainer('ds-radio', defineDsRadio,
     'requiredMessage',
     'direction',
     'isInactive',
+    'isLoading',
     'hasInteractionFill',
     'ariaLabel',
     'ariaLabelledby',

package/dist/vue/ds-setting-row-radio.js

@@ -7,5 +7,6 @@ export const DsSettingRowRadio = /*@__PURE__*/ defineContainer('ds-setting-row-r
     'presentation',
     'label',
     'valueLabel',
-    'description'
+    'description',
+    'isLoading'
 ]);

package/dist/vue/ds-setting-row-toggle.js

@@ -8,6 +8,7 @@ export const DsSettingRowToggle = /*@__PURE__*/ defineContainer('ds-setting-row-
     'description',
     'checked',
     'disabled',
+    'isLoading',
     'variant',
     'dsChange'
 ], [

package/dist/vue/ds-skeleton.js

@@ -8,8 +8,12 @@ export const DsSkeleton = /*@__PURE__*/ defineContainer('ds-skeleton', defineDsS
     'textVariant',
     'iconSize',
     'controlSize',
+    'controlAppearance',
+    'controlContent',
     'width',
     'rounded',
     'shimmer',
+    'preserveLayout',
+    'isLoading',
     'background'
 ]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "15.11.1",
+  "version": "15.12.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",
@@ -93,7 +93,7 @@
     "component:new": "node scripts/create-component.mjs",
     "verify:authoring": "node scripts/verify-component-authoring.mjs",
     "pretest": "node scripts/generate-icon-catalog.mjs",
-    "build": "stencil build && node scripts/build-component-notices.mjs && node scripts/verify-framework-proxies.mjs && node scripts/patch-index-types.mjs && node scripts/verify-icons-externalized.mjs && node scripts/build-lib-exports.mjs && node scripts/build-style-exports.mjs && node scripts/build-framework-exports.mjs && node scripts/build-registry.mjs && node scripts/build-agent-manifest.mjs && node scripts/build-lint.mjs && node scripts/build-mcp.mjs && node scripts/verify-framework-proxies.mjs && node scripts/write-build-stamp.mjs",
+    "build": "stencil build && node scripts/finalize-package.mjs",
     "verify:pack": "node scripts/verify-framework-proxies.mjs && node scripts/verify-npm-pack.mjs && node scripts/verify-package-imports.mjs",
     "verify:local": "npm run format:check && npm run typecheck && npm run typecheck:storybook && npm run lint && npm test && npm run build && npm run agent:validate && npm run verify:pack",
     "verify:local:full": "npm run verify:local && npm run test:e2e:chromium",
@@ -133,8 +133,8 @@
   "peerDependencies": {
     "@angular/core": ">=19 <23",
     "@angular/forms": ">=19 <23",
-    "@ds-mo/icons": "^8.1.1",
-    "@ds-mo/tokens": "^8.0.0",
+    "@ds-mo/icons": "^8.1.2",
+    "@ds-mo/tokens": "^8.0.1",
     "@eslint/css": "^2.0.0",
     "eslint": "^10.7.0",
     "react": "^18 || ^19",
@@ -179,8 +179,8 @@
     "@csstools/css-syntax-patches-for-csstree": "^1.1.7",
     "@csstools/css-tokenizer": "^4.0.0",
     "@csstools/media-query-list-parser": "^5.0.0",
-    "@ds-mo/icons": "^8.1.1",
-    "@ds-mo/tokens": "^8.0.0",
+    "@ds-mo/icons": "^8.1.2",
+    "@ds-mo/tokens": "^8.0.1",
     "@eslint/css": "^2.0.0",
     "@eslint/js": "^10.0.1",
     "@fontsource-variable/inter": "^5.3.0",