@ds-mo/ui 14.34.0 → 14.36.0

package/dist/types/utils/button-render.d.ts

@@ -1,6 +1,6 @@
 import { type ButtonSize, type ButtonVariant } from './button-types';
 interface ButtonContentOptions {
-    namespace: 'button-filled' | 'button-unfilled';
+    namespace: 'button-filled' | 'button-inverted' | 'button-unfilled';
     variant: ButtonVariant;
     size: ButtonSize;
     label: string;

package/dist/types/utils/clock-time.d.ts

@@ -0,0 +1,23 @@
+export type ClockPeriod = 'AM' | 'PM';
+export interface ClockTimeParts {
+    hour12: number;
+    minute: number;
+    period: ClockPeriod;
+}
+export declare const CLOCK_HOURS: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
+export declare const CLOCK_PERIODS: readonly ClockPeriod[];
+export declare function isClockTime(value: string): boolean;
+export declare function clockMinuteStep(step?: string | number): number;
+export declare function clockMinutes(step?: number, baseMinute?: number): number[];
+export declare function splitClockTime(value: string): ClockTimeParts | null;
+export declare function joinClockTime(parts: ClockTimeParts): string;
+/** Readable 12-hour label for filled clock values such as `09:00` → `9:00 AM`. */
+export declare function formatClockTimeLabel(value: string): string;
+/** Parse a typed clock time: `HH:MM`, `H:MM`, or a 12-hour label such as `9:00 AM`. */
+export declare function parseLooseClockTime(value: string): string;
+export declare function isClockTimeOutOfRange(value: string, min?: string, max?: string): boolean;
+/** Whether a minute-precision clock value aligns to the configured native step. */
+export declare function isClockTimeStepAligned(value: string, step?: string | number, min?: string): boolean;
+/** Move within a finite list without wrapping past the first or last item. */
+export declare function stepBoundedIndex(index: number, offset: number, length: number): number;
+//# sourceMappingURL=clock-time.d.ts.map

package/dist/types/utils/date-filter-value.d.ts

@@ -49,6 +49,10 @@ export type ParsedDateFilterValue = {
     kind: 'range';
 } & DateFilterRange);
 export declare function isIsoCalendarDate(value: string): boolean;
+/** Readable calendar date for filled ISO values such as `2026-09-10` → `Sep 10, 2026`. */
+export declare function formatIsoCalendarDateLabel(value: string): string;
+/** Parse a typed calendar date: ISO, `M/D/YYYY`, or a short-month label such as `Sep 10, 2026`. */
+export declare function parseLooseCalendarDate(value: string): string;
 export declare function shiftIsoCalendarDate(value: string, days: number): string;
 export declare function dateFilterRelativeValue(preset: DateFilterRelativePreset): DateFilterRelativeValue;
 export declare function dateFilterRangeValue(start: string, end?: string): DateFilterRangeValue;

package/dist/types/utils/index.d.ts

@@ -25,6 +25,8 @@ export { CONTROL_SUPPORTING_TEXT_VARIANT, CONTROL_TEXT_VARIANT } from './control
 export type { ControlInsetDepth, ControlSize } from './control-text';
 export { choicePopupMinWidth, resolveChoicePopupAlignOffset } from './choice-popup-alignment';
 export type { ChoicePopupAnchorAlignment } from './choice-popup-alignment';
-export { DATE_FILTER_RELATIVE_PRESETS, dateFilterRangeValue, dateFilterRelativeValue, isIsoCalendarDate, normalizeDateFilterValue, parseDateFilterValue, resolveDateFilterRange, shiftIsoCalendarDate, } from './date-filter-value';
+export { CLOCK_HOURS, CLOCK_PERIODS, clockMinuteStep, clockMinutes, formatClockTimeLabel, isClockTime, isClockTimeOutOfRange, isClockTimeStepAligned, joinClockTime, parseLooseClockTime, splitClockTime, stepBoundedIndex, } from './clock-time';
+export type { ClockPeriod, ClockTimeParts } from './clock-time';
+export { DATE_FILTER_RELATIVE_PRESETS, dateFilterRangeValue, dateFilterRelativeValue, formatIsoCalendarDateLabel, isIsoCalendarDate, parseLooseCalendarDate, normalizeDateFilterValue, parseDateFilterValue, resolveDateFilterRange, shiftIsoCalendarDate, } from './date-filter-value';
 export type { DateFilterRange, DateFilterRangeValue, DateFilterRelativePreset, DateFilterRelativeValue, DateFilterValue, ParsedDateFilterValue, } from './date-filter-value';
 //# sourceMappingURL=index.d.ts.map

package/dist/vue/components.d.ts

@@ -18,7 +18,9 @@ export { DsBarTitle } from './ds-bar-title.js';
 export { DsBarWorkflow } from './ds-bar-workflow.js';
 export { DsBreadcrumb } from './ds-breadcrumb.js';
 export { DsButtonFilled } from './ds-button-filled.js';
+export { DsButtonInverted } from './ds-button-inverted.js';
 export { DsButtonUnfilled } from './ds-button-unfilled.js';
+export { DsCalendar } from './ds-calendar.js';
 export { DsCardActionCenter } from './ds-card-action-center.js';
 export { DsCardChart } from './ds-card-chart.js';
 export { DsCardNavigation } from './ds-card-navigation.js';
@@ -39,6 +41,8 @@ export { DsField } from './ds-field.js';
 export { DsFilterMenu } from './ds-filter-menu.js';
 export { DsIcon } from './ds-icon.js';
 export { DsInput } from './ds-input.js';
+export { DsInputDate } from './ds-input-date.js';
+export { DsInputTime } from './ds-input-time.js';
 export { DsLoader } from './ds-loader.js';
 export { DsMarkdown } from './ds-markdown.js';
 export { DsMenu } from './ds-menu.js';
@@ -74,6 +78,7 @@ export { DsTabGroup } from './ds-tab-group.js';
 export { DsTable } from './ds-table.js';
 export { DsTableFilter } from './ds-table-filter.js';
 export { DsTableGroup } from './ds-table-group.js';
+export { DsTablePreferences } from './ds-table-preferences.js';
 export { DsTableSavedViews } from './ds-table-saved-views.js';
 export { DsTableSearch } from './ds-table-search.js';
 export { DsTableSort } from './ds-table-sort.js';
@@ -81,6 +86,7 @@ export { DsTableToolbar } from './ds-table-toolbar.js';
 export { DsTag } from './ds-tag.js';
 export { DsText } from './ds-text.js';
 export { DsTextarea } from './ds-textarea.js';
+export { DsTimePicker } from './ds-time-picker.js';
 export { DsToast } from './ds-toast.js';
 export { DsTooltip } from './ds-tooltip.js';
 export { DsTooltipChart } from './ds-tooltip-chart.js';

package/dist/vue/components.js

@@ -20,7 +20,9 @@ export { DsBarTitle } from './ds-bar-title.js';
 export { DsBarWorkflow } from './ds-bar-workflow.js';
 export { DsBreadcrumb } from './ds-breadcrumb.js';
 export { DsButtonFilled } from './ds-button-filled.js';
+export { DsButtonInverted } from './ds-button-inverted.js';
 export { DsButtonUnfilled } from './ds-button-unfilled.js';
+export { DsCalendar } from './ds-calendar.js';
 export { DsCardActionCenter } from './ds-card-action-center.js';
 export { DsCardChart } from './ds-card-chart.js';
 export { DsCardNavigation } from './ds-card-navigation.js';
@@ -41,6 +43,8 @@ export { DsField } from './ds-field.js';
 export { DsFilterMenu } from './ds-filter-menu.js';
 export { DsIcon } from './ds-icon.js';
 export { DsInput } from './ds-input.js';
+export { DsInputDate } from './ds-input-date.js';
+export { DsInputTime } from './ds-input-time.js';
 export { DsLoader } from './ds-loader.js';
 export { DsMarkdown } from './ds-markdown.js';
 export { DsMenu } from './ds-menu.js';
@@ -76,6 +80,7 @@ export { DsTabGroup } from './ds-tab-group.js';
 export { DsTable } from './ds-table.js';
 export { DsTableFilter } from './ds-table-filter.js';
 export { DsTableGroup } from './ds-table-group.js';
+export { DsTablePreferences } from './ds-table-preferences.js';
 export { DsTableSavedViews } from './ds-table-saved-views.js';
 export { DsTableSearch } from './ds-table-search.js';
 export { DsTableSort } from './ds-table-sort.js';
@@ -83,6 +88,7 @@ export { DsTableToolbar } from './ds-table-toolbar.js';
 export { DsTag } from './ds-tag.js';
 export { DsText } from './ds-text.js';
 export { DsTextarea } from './ds-textarea.js';
+export { DsTimePicker } from './ds-time-picker.js';
 export { DsToast } from './ds-toast.js';
 export { DsTooltip } from './ds-tooltip.js';
 export { DsTooltipChart } from './ds-tooltip-chart.js';

package/dist/vue/ds-button-inverted.d.ts

@@ -0,0 +1,3 @@
+import { type StencilVueComponent } from './vue-runtime.js';
+import type { JSX } from '@ds-mo/ui/components';
+export declare const DsButtonInverted: StencilVueComponent<JSX.DsButtonInverted>;

package/dist/vue/ds-button-inverted.js

@@ -0,0 +1,33 @@
+/* eslint-disable */
+/* tslint:disable */
+/* auto-generated vue proxies */
+import { defineContainer } from './vue-runtime.js';
+import { defineCustomElement as defineDsButtonInverted } from '@ds-mo/ui/components/ds-button-inverted.js';
+export const DsButtonInverted = /*@__PURE__*/ defineContainer('ds-button-inverted', defineDsButtonInverted, [
+    'variant',
+    'size',
+    'isInset',
+    'insetDepth',
+    'width',
+    'label',
+    'labelEmphasis',
+    'icon',
+    'rounded',
+    'pressScale',
+    'isInactive',
+    'isLoading',
+    'type',
+    'ariaLabel',
+    'controls',
+    'expanded',
+    'surfaceOpen',
+    'haspopup',
+    'split',
+    'menuAriaLabel',
+    'hasMenu',
+    'dsClick',
+    'dsMenuClick'
+], [
+    'dsClick',
+    'dsMenuClick'
+]);

package/dist/vue/ds-calendar.d.ts

@@ -0,0 +1,3 @@
+import { type StencilVueComponent } from './vue-runtime.js';
+import type { JSX } from '@ds-mo/ui/components';
+export declare const DsCalendar: StencilVueComponent<JSX.DsCalendar>;

package/dist/vue/ds-calendar.js

@@ -0,0 +1,16 @@
+/* eslint-disable */
+/* tslint:disable */
+/* auto-generated vue proxies */
+import { defineContainer } from './vue-runtime.js';
+import { defineCustomElement as defineDsCalendar } from '@ds-mo/ui/components/ds-calendar.js';
+export const DsCalendar = /*@__PURE__*/ defineContainer('ds-calendar', defineDsCalendar, [
+    'selectionMode',
+    'value',
+    'min',
+    'max',
+    'isInactive',
+    'autoFocus',
+    'dsChange'
+], [
+    'dsChange'
+]);

package/dist/vue/ds-filter-menu.js

@@ -4,13 +4,18 @@
 import { defineContainer } from './vue-runtime.js';
 import { defineCustomElement as defineDsFilterMenu } from '@ds-mo/ui/components/ds-filter-menu.js';
 export const DsFilterMenu = /*@__PURE__*/ defineContainer('ds-filter-menu', defineDsFilterMenu, [
+    'embedded',
+    'vertical',
     'open',
     'triggerLabel',
     'showSelectedCount',
     'icon',
     'size',
     'width',
+    'showIndicator',
     'hasBorder',
+    'neutralTrigger',
+    'applyRequired',
     'activeFill',
     'collapseLabel',
     'inputId',

package/dist/vue/ds-input-date.d.ts

@@ -0,0 +1,3 @@
+import { type StencilVueComponent } from './vue-runtime.js';
+import type { JSX } from '@ds-mo/ui/components';
+export declare const DsInputDate: StencilVueComponent<JSX.DsInputDate, JSX.DsInputDate["value"]>;

package/dist/vue/ds-input-date.js

@@ -0,0 +1,31 @@
+/* eslint-disable */
+/* tslint:disable */
+/* auto-generated vue proxies */
+import { defineContainer } from './vue-runtime.js';
+import { defineCustomElement as defineDsInputDate } from '@ds-mo/ui/components/ds-input-date.js';
+export const DsInputDate = /*@__PURE__*/ defineContainer('ds-input-date', defineDsInputDate, [
+    'value',
+    'name',
+    'form',
+    'disabled',
+    'readOnly',
+    'required',
+    'requiredMessage',
+    'min',
+    'max',
+    'size',
+    'width',
+    'hasBorder',
+    'hasInteractionFill',
+    'isInactive',
+    'autoFocus',
+    'error',
+    'errorMessage',
+    'inputId',
+    'ariaLabel',
+    'ariaLabelledby',
+    'ariaDescribedby',
+    'dsChange'
+], [
+    'dsChange'
+], 'value', 'dsChange', 'detail');

package/dist/vue/ds-input-time.d.ts

@@ -0,0 +1,3 @@
+import { type StencilVueComponent } from './vue-runtime.js';
+import type { JSX } from '@ds-mo/ui/components';
+export declare const DsInputTime: StencilVueComponent<JSX.DsInputTime, JSX.DsInputTime["value"]>;

package/dist/vue/ds-input-time.js

@@ -0,0 +1,32 @@
+/* eslint-disable */
+/* tslint:disable */
+/* auto-generated vue proxies */
+import { defineContainer } from './vue-runtime.js';
+import { defineCustomElement as defineDsInputTime } from '@ds-mo/ui/components/ds-input-time.js';
+export const DsInputTime = /*@__PURE__*/ defineContainer('ds-input-time', defineDsInputTime, [
+    'value',
+    'name',
+    'form',
+    'disabled',
+    'readOnly',
+    'required',
+    'requiredMessage',
+    'step',
+    'min',
+    'max',
+    'size',
+    'width',
+    'hasBorder',
+    'hasInteractionFill',
+    'isInactive',
+    'autoFocus',
+    'error',
+    'errorMessage',
+    'inputId',
+    'ariaLabel',
+    'ariaLabelledby',
+    'ariaDescribedby',
+    'dsChange'
+], [
+    'dsChange'
+], 'value', 'dsChange', 'detail');

package/dist/vue/ds-input.js

@@ -12,6 +12,8 @@ export const DsInput = /*@__PURE__*/ defineContainer('ds-input', defineDsInput,
     'required',
     'requiredMessage',
     'clearLabel',
+    'showPasswordLabel',
+    'hidePasswordLabel',
     'placeholder',
     'type',
     'min',

package/dist/vue/ds-menu.js

@@ -4,6 +4,7 @@
 import { defineContainer } from './vue-runtime.js';
 import { defineCustomElement as defineDsMenu } from '@ds-mo/ui/components/ds-menu.js';
 export const DsMenu = /*@__PURE__*/ defineContainer('ds-menu', defineDsMenu, [
+    'embedded',
     'open',
     'items',
     'size',

package/dist/vue/ds-select.js

@@ -18,14 +18,19 @@ export const DsSelect = /*@__PURE__*/ defineContainer('ds-select', defineDsSelec
     'triggerLabelPlaceholder',
     'dot',
     'size',
+    'isInset',
+    'insetDepth',
     'width',
     'popupAlign',
     'boundary',
     'isInactive',
     'isLoading',
+    'neutralTrigger',
     'activeFill',
     'collapseLabel',
+    'iconOnly',
     'hasBorder',
+    'rounded',
     'icon',
     'indicator',
     'allowClear',

package/dist/vue/ds-tab-group.js

@@ -8,6 +8,7 @@ export const DsTabGroup = /*@__PURE__*/ defineContainer('ds-tab-group', defineDs
     'tabs',
     'size',
     'width',
+    'presentation',
     'hasContainer',
     'background',
     'ariaLabel',

package/dist/vue/ds-table-filter.js

@@ -5,6 +5,7 @@ import { defineContainer } from './vue-runtime.js';
 import { defineCustomElement as defineDsTableFilter } from '@ds-mo/ui/components/ds-table-filter.js';
 export const DsTableFilter = /*@__PURE__*/ defineContainer('ds-table-filter', defineDsTableFilter, [
     'open',
+    'hasBorder',
     'filters',
     'values',
     'matchModes',

package/dist/vue/ds-table-group.js

@@ -4,6 +4,9 @@
 import { defineContainer } from './vue-runtime.js';
 import { defineCustomElement as defineDsTableGroup } from '@ds-mo/ui/components/ds-table-group.js';
 export const DsTableGroup = /*@__PURE__*/ defineContainer('ds-table-group', defineDsTableGroup, [
+    'hasBorder',
+    'vertical',
+    'embedded',
     'options',
     'grouping',
     'ariaLabel',

package/dist/vue/ds-table-preferences.d.ts

@@ -0,0 +1,3 @@
+import { type StencilVueComponent } from './vue-runtime.js';
+import type { JSX } from '@ds-mo/ui/components';
+export declare const DsTablePreferences: StencilVueComponent<JSX.DsTablePreferences>;

package/dist/vue/ds-table-preferences.js

@@ -0,0 +1,45 @@
+/* eslint-disable */
+/* tslint:disable */
+/* auto-generated vue proxies */
+import { defineContainer } from './vue-runtime.js';
+import { defineCustomElement as defineDsTablePreferences } from '@ds-mo/ui/components/ds-table-preferences.js';
+export const DsTablePreferences = /*@__PURE__*/ defineContainer('ds-table-preferences', defineDsTablePreferences, [
+    'hasBorder',
+    'filters',
+    'values',
+    'matchModes',
+    'activeFilterId',
+    'columns',
+    'customizeOptions',
+    'customizeSections',
+    'sortColumns',
+    'sort',
+    'groupingOptions',
+    'grouping',
+    'hiddenColumnIds',
+    'columnOrder',
+    'embedded',
+    'activeTab',
+    'label',
+    'dsCustomizeOptionChange',
+    'dsPreferencesTabChange',
+    'dsFilterChange',
+    'dsFilterMatchModeChange',
+    'dsActiveFilterChange',
+    'dsFiltersClear',
+    'dsSortChange',
+    'dsGroupChange',
+    'dsGroupClear',
+    'dsColumnsConfigChange'
+], [
+    'dsCustomizeOptionChange',
+    'dsPreferencesTabChange',
+    'dsFilterChange',
+    'dsFilterMatchModeChange',
+    'dsActiveFilterChange',
+    'dsFiltersClear',
+    'dsSortChange',
+    'dsGroupChange',
+    'dsGroupClear',
+    'dsColumnsConfigChange'
+]);

package/dist/vue/ds-table-saved-views.js

@@ -4,6 +4,7 @@
 import { defineContainer } from './vue-runtime.js';
 import { defineCustomElement as defineDsTableSavedViews } from '@ds-mo/ui/components/ds-table-saved-views.js';
 export const DsTableSavedViews = /*@__PURE__*/ defineContainer('ds-table-saved-views', defineDsTableSavedViews, [
+    'hasBorder',
     'views',
     'value',
     'dirty',
@@ -11,6 +12,7 @@ export const DsTableSavedViews = /*@__PURE__*/ defineContainer('ds-table-saved-v
     'defaultViewLabel',
     'label',
     'triggerLabel',
+    'compact',
     'createLabel',
     'dsViewChange',
     'dsViewCreate',

package/dist/vue/ds-table-search.js

@@ -4,6 +4,7 @@
 import { defineContainer } from './vue-runtime.js';
 import { defineCustomElement as defineDsTableSearch } from '@ds-mo/ui/components/ds-table-search.js';
 export const DsTableSearch = /*@__PURE__*/ defineContainer('ds-table-search', defineDsTableSearch, [
+    'hasBorder',
     'value',
     'columns',
     'selectedFieldIds',

package/dist/vue/ds-table-sort.js

@@ -4,6 +4,7 @@
 import { defineContainer } from './vue-runtime.js';
 import { defineCustomElement as defineDsTableSort } from '@ds-mo/ui/components/ds-table-sort.js';
 export const DsTableSort = /*@__PURE__*/ defineContainer('ds-table-sort', defineDsTableSort, [
+    'hasBorder',
     'columns',
     'sort',
     'ariaLabel',

package/dist/vue/ds-table-toolbar.js

@@ -4,5 +4,6 @@
 import { defineContainer } from './vue-runtime.js';
 import { defineCustomElement as defineDsTableToolbar } from '@ds-mo/ui/components/ds-table-toolbar.js';
 export const DsTableToolbar = /*@__PURE__*/ defineContainer('ds-table-toolbar', defineDsTableToolbar, [
-    'label'
+    'label',
+    'borderless'
 ]);

package/dist/vue/ds-table.js

@@ -5,6 +5,7 @@ import { defineContainer } from './vue-runtime.js';
 import { defineCustomElement as defineDsTable } from '@ds-mo/ui/components/ds-table.js';
 export const DsTable = /*@__PURE__*/ defineContainer('ds-table', defineDsTable, [
     'columns',
+    'customizeOptions',
     'rows',
     'groups',
     'grouping',
@@ -15,6 +16,8 @@ export const DsTable = /*@__PURE__*/ defineContainer('ds-table', defineDsTable,
     'caption',
     'captionVisibility',
     'columnCustomizer',
+    'captionControlsBorderless',
+    'hideColumnCustomizerTrigger',
     'hiddenColumnIds',
     'columnOrder',
     'displayedCount',
@@ -65,6 +68,7 @@ export const DsTable = /*@__PURE__*/ defineContainer('ds-table', defineDsTable,
     'groupLoadingMoreLabel',
     'groupEndOfResultsLabel',
     'groupRowsLoadedLabel',
+    'dsCustomizeOptionChange',
     'dsSortChange',
     'dsGroupCollapseChange',
     'dsSelectionChange',
@@ -76,6 +80,7 @@ export const DsTable = /*@__PURE__*/ defineContainer('ds-table', defineDsTable,
     'dsColumnsConfigChange',
     'dsDataModeChange'
 ], [
+    'dsCustomizeOptionChange',
     'dsSortChange',
     'dsGroupCollapseChange',
     'dsSelectionChange',

package/dist/vue/ds-time-picker.d.ts

@@ -0,0 +1,3 @@
+import { type StencilVueComponent } from './vue-runtime.js';
+import type { JSX } from '@ds-mo/ui/components';
+export declare const DsTimePicker: StencilVueComponent<JSX.DsTimePicker>;

package/dist/vue/ds-time-picker.js

@@ -0,0 +1,16 @@
+/* eslint-disable */
+/* tslint:disable */
+/* auto-generated vue proxies */
+import { defineContainer } from './vue-runtime.js';
+import { defineCustomElement as defineDsTimePicker } from '@ds-mo/ui/components/ds-time-picker.js';
+export const DsTimePicker = /*@__PURE__*/ defineContainer('ds-time-picker', defineDsTimePicker, [
+    'value',
+    'min',
+    'max',
+    'step',
+    'isInactive',
+    'autoFocus',
+    'dsChange'
+], [
+    'dsChange'
+]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ds-mo/ui",
-  "version": "14.34.0",
+  "version": "14.36.0",
   "description": "CompoMo — composable web components styled with TokoMo design tokens",
   "keywords": [
     "web-components",

package/dist/components/p-B_nPct4G.js

@@ -1,2 +0,0 @@
-import{p as e,H as t,h as i,a as s,t as d}from"./index.js";import{d as n}from"./p-AkSwrAKR.js";const r=()=>`.ds-field-stack.sc-ds-field-h,.ds-field-stack.sc-ds-field{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.sc-ds-field-h{display:block}.field__control.sc-ds-field{display:flex;min-width:0}.field__control.sc-ds-field>*.sc-ds-field{width:100%}`;let a=0;const o=e=>e?.split(/\s+/).filter(Boolean)??[];const l=(...e)=>[...new Set(e.flat())];const h=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.error=false;this.focused=false;this.filled=false;this.dirty=false;this.touched=false;this.controlDisabled=false;this.controlRequired=false;this.slotRevision=0;this.generatedId=`ds-field-${++a}`;this.initialValue="";this.authoredAria=new WeakMap;this.didLoad=false;this.syncControl=()=>{const e=this.findControl();if(!e)return;if(e!==this.control){this.control=e;this.initialValue=this.readValue(e);this.authoredAria.set(e,{labelledby:o(e.getAttribute("aria-labelledby")),describedby:o(e.getAttribute("aria-describedby"))})}const t=e.tagName.startsWith("DS-");if(t&&"inputId"in e)e.inputId=this.controlId;else this.updateControlAttribute(e,"id",this.controlId);const i=this.authoredAria.get(e)??{labelledby:[],describedby:[]};const s=l(i.labelledby,[this.labelId]).join(" ");const d=l(i.describedby,this.renderedDescription?[this.descriptionId]:[],this.renderedError?[this.errorId]:[]).join(" ");this.updateControlAttribute(e,"aria-labelledby",s);this.updateControlAttribute(e,"aria-describedby",d||undefined);this.updateControlAttribute(e,"aria-invalid",this.error?"true":undefined);if(t&&"error"in e&&e.error!==this.error)e.error=this.error;const n=this.readValue(e);this.filled=n.length>0;this.dirty=n!==this.initialValue;this.controlDisabled=Boolean(e.disabled||e.isInactive||e.hasAttribute("disabled"));this.controlRequired=Boolean(e.required||e.hasAttribute("required"))};this.handleLabelClick=e=>{if(!this.control?.tagName.startsWith("DS-"))return;e.preventDefault();this.control.setFocus?.()};this.handleFocusIn=()=>{this.focused=true};this.handleFocusOut=e=>{if(e.relatedTarget instanceof Node&&this.el.contains(e.relatedTarget))return;this.focused=false;this.touched=true};this.handleValueChange=()=>{this.syncControl()}}connectedCallback(){if(this.didLoad)this.observeLateControls()}disconnectedCallback(){this.childObserver?.disconnect();this.childObserver=undefined}componentDidLoad(){this.syncControl();this.didLoad=true;this.observeLateControls();requestAnimationFrame((()=>this.syncControl()))}componentDidRender(){this.syncControl()}onFieldContractChange(){this.syncControl()}get controlId(){return this.fieldId||this.generatedId}get labelId(){return`${this.controlId}-label`}get descriptionId(){return`${this.controlId}-description`}get errorId(){return`${this.controlId}-error`}get renderedDescription(){return Boolean(this.description)&&!this.renderedError}get renderedError(){return this.error&&Boolean(this.errorMessage)}readValue(e){const t=e.value;return Array.isArray(t)?t.join(""):String(t??"")}updateControlAttribute(e,t,i){if(i===undefined){if(e.hasAttribute(t))e.removeAttribute(t);return}if(e.getAttribute(t)!==i)e.setAttribute(t,i)}findControl(){return this.controlContainer?.querySelector(":scope > :not(slot)")??undefined}observeLateControls(){if(this.childObserver||typeof MutationObserver==="undefined")return;this.childObserver=new MutationObserver((e=>{const t=e.some((e=>Array.from(e.addedNodes).some((e=>e.nodeType===1))));if(t)this.slotRevision++}));this.childObserver.observe(this.el,{childList:true})}render(){return i(s,{key:"dd5f0c2e3de7473f50d0d3f6cf2b1184734b88de","data-focused":this.focused?"":undefined,"data-filled":this.filled?"":undefined,"data-dirty":this.dirty?"":undefined,"data-touched":this.touched?"":undefined,"data-invalid":this.error?"":undefined,"data-disabled":this.controlDisabled?"":undefined,"data-required":this.controlRequired?"":undefined,onFocusin:this.handleFocusIn,onFocusout:this.handleFocusOut,onInput:this.handleValueChange,onChange:this.handleValueChange,onDsChange:this.handleValueChange},i("div",{key:"4689ec1bffebbc868a939a1930205b8004650f1e",class:"field ds-field-stack"},i("ds-text",{key:"2aa66db9c8bd5bd262a507e61b3b82a186b7c30f",class:"field__label",as:"label",variant:"text-body-small",color:"primary",emphasis:true,for:this.controlId,textId:this.labelId,onClick:this.handleLabelClick},this.label),i("div",{key:"5a4b9300f320e086c8e76614ac3dda4c3523f751",class:"field__control",ref:e=>this.controlContainer=e},i("slot",{key:"47b4319e25cc88e1b2eb3a35b8481cd9e419db33",onSlotchange:this.syncControl})),this.renderedDescription&&i("ds-text",{key:"80dcc312d12b8a68437fe55173e80a70b4f4f046",class:"field__description",as:"div",variant:"text-body-small",color:"secondary",textId:this.descriptionId},this.description),this.renderedError&&i("ds-text",{key:"bf830f9ca09ac38f31ea02a9bfaaed4ec9054f87",class:"field__error",as:"div",variant:"text-body-small",color:"negative",textId:this.errorId,role:"alert"},this.errorMessage)))}get el(){return this}static get watchers(){return{fieldId:[{onFieldContractChange:0}],description:[{onFieldContractChange:0}],error:[{onFieldContractChange:0}],errorMessage:[{onFieldContractChange:0}]}}static get style(){return r()}},[262,"ds-field",{label:[1],fieldId:[1,"field-id"],description:[1],error:[4],errorMessage:[1,"error-message"],focused:[32],filled:[32],dirty:[32],touched:[32],controlDisabled:[32],controlRequired:[32],slotRevision:[32]},undefined,{fieldId:[{onFieldContractChange:0}],description:[{onFieldContractChange:0}],error:[{onFieldContractChange:0}],errorMessage:[{onFieldContractChange:0}]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-field","ds-text"];e.forEach((e=>{switch(e){case"ds-field":if(!customElements.get(d(e))){customElements.define(d(e),h)}break;case"ds-text":if(!customElements.get(d(e))){n()}break}}))}c();export{h as F,c as d};
-//# sourceMappingURL=p-B_nPct4G.js.map

package/dist/components/p-B_nPct4G.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["fieldCss","fieldCounter","tokens","value","split","filter","Boolean","uniqueTokens","groups","Set","flat","Field","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","error","focused","filled","dirty","touched","controlDisabled","controlRequired","slotRevision","generatedId","initialValue","authoredAria","WeakMap","didLoad","syncControl","control","findControl","readValue","set","labelledby","getAttribute","describedby","isDsControl","tagName","startsWith","inputId","controlId","updateControlAttribute","authored","get","labelId","join","renderedDescription","descriptionId","renderedError","errorId","undefined","length","disabled","isInactive","hasAttribute","required","handleLabelClick","event","preventDefault","setFocus","handleFocusIn","handleFocusOut","relatedTarget","Node","el","contains","handleValueChange","connectedCallback","observeLateControls","disconnectedCallback","childObserver","disconnect","componentDidLoad","requestAnimationFrame","componentDidRender","onFieldContractChange","fieldId","description","errorMessage","Array","isArray","String","name","removeAttribute","setAttribute","controlContainer","querySelector","MutationObserver","records","addedControl","some","record","from","addedNodes","node","nodeType","observe","childList","render","h","Host","key","onFocusin","onFocusout","onInput","onChange","onDsChange","class","as","variant","color","emphasis","for","textId","onClick","label","ref","onSlotchange","role"],"sources":["src/wc/components/Field/Field.css?tag=ds-field&encapsulation=scoped","src/wc/components/Field/Field.tsx"],"sourcesContent":["@import '../../utils/field-stack.css';\n\n:host {\n  display: block;\n}\n\n.field__control {\n  display: flex;\n  min-width: 0;\n}\n\n.field__control > * {\n  width: 100%;\n}\n","import { Component, Element, Prop, State, Watch, h, Host } from '@stencil/core';\n\ninterface FieldControl extends HTMLElement {\n  value?: string | string[];\n  inputId?: string;\n  error?: boolean;\n  disabled?: boolean;\n  isInactive?: boolean;\n  required?: boolean;\n  setFocus?: () => Promise<void> | void;\n}\n\ninterface AuthoredAria {\n  labelledby: string[];\n  describedby: string[];\n}\n\nlet fieldCounter = 0;\n\nconst tokens = (value: string | null | undefined): string[] =>\n  value?.split(/\\s+/).filter(Boolean) ?? [];\n\nconst uniqueTokens = (...groups: string[][]): string[] => [...new Set(groups.flat())];\n\n@Component({\n  tag: 'ds-field',\n  styleUrl: 'Field.css',\n  scoped: true,\n})\nexport class Field {\n  @Element() el!: HTMLElement;\n\n  /** Persistent visible label for the single slotted control. */\n  @Prop() label!: string;\n  /** Explicit ID for the slotted control; generated when omitted. */\n  @Prop() fieldId: string | undefined;\n  /** Optional guidance associated with the slotted control while no visible error is shown. */\n  @Prop() description: string | undefined;\n  /** Invalid visual and accessible state forwarded to supported ds controls. */\n  @Prop() error: boolean = false;\n  /** Visible error associated with the slotted control while error is true. */\n  @Prop() errorMessage: string | undefined;\n\n  @State() private focused = false;\n  @State() private filled = false;\n  @State() private dirty = false;\n  @State() private touched = false;\n  @State() private controlDisabled = false;\n  @State() private controlRequired = false;\n  /** Bumped to let Stencil relocate a control added after the initial render. */\n  @State() private slotRevision = 0;\n\n  private readonly generatedId = `ds-field-${++fieldCounter}`;\n  private controlContainer?: HTMLDivElement;\n  private control?: FieldControl;\n  private initialValue = '';\n  private authoredAria = new WeakMap<FieldControl, AuthoredAria>();\n  private childObserver?: MutationObserver;\n  private didLoad = false;\n\n  connectedCallback() {\n    if (this.didLoad) this.observeLateControls();\n  }\n\n  disconnectedCallback() {\n    this.childObserver?.disconnect();\n    this.childObserver = undefined;\n  }\n\n  componentDidLoad() {\n    this.syncControl();\n    this.didLoad = true;\n    this.observeLateControls();\n    requestAnimationFrame(() => this.syncControl());\n  }\n\n  componentDidRender() {\n    this.syncControl();\n  }\n\n  @Watch('fieldId')\n  @Watch('description')\n  @Watch('error')\n  @Watch('errorMessage')\n  onFieldContractChange() {\n    this.syncControl();\n  }\n\n  private get controlId(): string {\n    return this.fieldId || this.generatedId;\n  }\n\n  private get labelId(): string {\n    return `${this.controlId}-label`;\n  }\n\n  private get descriptionId(): string {\n    return `${this.controlId}-description`;\n  }\n\n  private get errorId(): string {\n    return `${this.controlId}-error`;\n  }\n\n  private get renderedDescription(): boolean {\n    return Boolean(this.description) && !this.renderedError;\n  }\n\n  private get renderedError(): boolean {\n    return this.error && Boolean(this.errorMessage);\n  }\n\n  private readValue(control: FieldControl): string {\n    const value = control.value;\n    return Array.isArray(value) ? value.join('\\u001f') : String(value ?? '');\n  }\n\n  private updateControlAttribute(control: FieldControl, name: string, value: string | undefined) {\n    if (value === undefined) {\n      if (control.hasAttribute(name)) control.removeAttribute(name);\n      return;\n    }\n    if (control.getAttribute(name) !== value) control.setAttribute(name, value);\n  }\n\n  private findControl(): FieldControl | undefined {\n    return this.controlContainer?.querySelector<FieldControl>(':scope > :not(slot)') ?? undefined;\n  }\n\n  private observeLateControls() {\n    if (this.childObserver || typeof MutationObserver === 'undefined') return;\n    this.childObserver = new MutationObserver(records => {\n      const addedControl = records.some(record =>\n        Array.from(record.addedNodes).some(node => node.nodeType === 1)\n      );\n      if (addedControl) this.slotRevision++;\n    });\n    this.childObserver.observe(this.el, { childList: true });\n  }\n\n  private syncControl = () => {\n    const control = this.findControl();\n    if (!control) return;\n\n    if (control !== this.control) {\n      this.control = control;\n      this.initialValue = this.readValue(control);\n      this.authoredAria.set(control, {\n        labelledby: tokens(control.getAttribute('aria-labelledby')),\n        describedby: tokens(control.getAttribute('aria-describedby')),\n      });\n    }\n\n    const isDsControl = control.tagName.startsWith('DS-');\n    if (isDsControl && 'inputId' in control) control.inputId = this.controlId;\n    else this.updateControlAttribute(control, 'id', this.controlId);\n\n    const authored = this.authoredAria.get(control) ?? { labelledby: [], describedby: [] };\n    const labelledby = uniqueTokens(authored.labelledby, [this.labelId]).join(' ');\n    const describedby = uniqueTokens(\n      authored.describedby,\n      this.renderedDescription ? [this.descriptionId] : [],\n      this.renderedError ? [this.errorId] : []\n    ).join(' ');\n\n    this.updateControlAttribute(control, 'aria-labelledby', labelledby);\n    this.updateControlAttribute(control, 'aria-describedby', describedby || undefined);\n    this.updateControlAttribute(control, 'aria-invalid', this.error ? 'true' : undefined);\n\n    if (isDsControl && 'error' in control && control.error !== this.error)\n      control.error = this.error;\n\n    const value = this.readValue(control);\n    this.filled = value.length > 0;\n    this.dirty = value !== this.initialValue;\n    this.controlDisabled = Boolean(\n      control.disabled || control.isInactive || control.hasAttribute('disabled')\n    );\n    this.controlRequired = Boolean(control.required || control.hasAttribute('required'));\n  };\n\n  private handleLabelClick = (event: MouseEvent) => {\n    if (!this.control?.tagName.startsWith('DS-')) return;\n    event.preventDefault();\n    this.control.setFocus?.();\n  };\n\n  private handleFocusIn = () => {\n    this.focused = true;\n  };\n\n  private handleFocusOut = (event: FocusEvent) => {\n    if (event.relatedTarget instanceof Node && this.el.contains(event.relatedTarget)) return;\n    this.focused = false;\n    this.touched = true;\n  };\n\n  private handleValueChange = () => {\n    this.syncControl();\n  };\n\n  render() {\n    return (\n      <Host\n        data-focused={this.focused ? '' : undefined}\n        data-filled={this.filled ? '' : undefined}\n        data-dirty={this.dirty ? '' : undefined}\n        data-touched={this.touched ? '' : undefined}\n        data-invalid={this.error ? '' : undefined}\n        data-disabled={this.controlDisabled ? '' : undefined}\n        data-required={this.controlRequired ? '' : undefined}\n        onFocusin={this.handleFocusIn}\n        onFocusout={this.handleFocusOut}\n        onInput={this.handleValueChange}\n        onChange={this.handleValueChange}\n        onDsChange={this.handleValueChange}\n      >\n        <div class=\"field ds-field-stack\">\n          <ds-text\n            class=\"field__label\"\n            as=\"label\"\n            variant=\"text-body-small\"\n            color=\"primary\"\n            emphasis\n            for={this.controlId}\n            textId={this.labelId}\n            onClick={this.handleLabelClick}\n          >\n            {this.label}\n          </ds-text>\n          <div class=\"field__control\" ref={el => (this.controlContainer = el)}>\n            <slot onSlotchange={this.syncControl} />\n          </div>\n          {this.renderedDescription && (\n            <ds-text\n              class=\"field__description\"\n              as=\"div\"\n              variant=\"text-body-small\"\n              color=\"secondary\"\n              textId={this.descriptionId}\n            >\n              {this.description}\n            </ds-text>\n          )}\n          {this.renderedError && (\n            <ds-text\n              class=\"field__error\"\n              as=\"div\"\n              variant=\"text-body-small\"\n              color=\"negative\"\n              textId={this.errorId}\n              role=\"alert\"\n            >\n              {this.errorMessage}\n            </ds-text>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"+FAAA,MAAMA,EAAW,IAAM,sQCiBvB,IAAIC,EAAe,EAEnB,MAAMC,EAAUC,GACdA,GAAOC,MAAM,OAAOC,OAAOC,UAAY,GAEzC,MAAMC,EAAe,IAAIC,IAAiC,IAAI,IAAIC,IAAID,EAAOE,S,MAOhEC,EAAKC,EAAA,MAAAD,UAAAE,EALlB,WAAAC,CAAAC,G,4CAeUC,KAAAC,MAAiB,MAIRD,KAAAE,QAAU,MACVF,KAAAG,OAAS,MACTH,KAAAI,MAAQ,MACRJ,KAAAK,QAAU,MACVL,KAAAM,gBAAkB,MAClBN,KAAAO,gBAAkB,MAElBP,KAAAQ,aAAe,EAEfR,KAAAS,YAAc,cAAcxB,IAGrCe,KAAAU,aAAe,GACfV,KAAAW,aAAe,IAAIC,QAEnBZ,KAAAa,QAAU,MAkFVb,KAAAc,YAAc,KACpB,MAAMC,EAAUf,KAAKgB,cACrB,IAAKD,EAAS,OAEd,GAAIA,IAAYf,KAAKe,QAAS,CAC5Bf,KAAKe,QAAUA,EACff,KAAKU,aAAeV,KAAKiB,UAAUF,GACnCf,KAAKW,aAAaO,IAAIH,EAAS,CAC7BI,WAAYjC,EAAO6B,EAAQK,aAAa,oBACxCC,YAAanC,EAAO6B,EAAQK,aAAa,sB,CAI7C,MAAME,EAAcP,EAAQQ,QAAQC,WAAW,OAC/C,GAAIF,GAAe,YAAaP,EAASA,EAAQU,QAAUzB,KAAK0B,eAC3D1B,KAAK2B,uBAAuBZ,EAAS,KAAMf,KAAK0B,WAErD,MAAME,EAAW5B,KAAKW,aAAakB,IAAId,IAAY,CAAEI,WAAY,GAAIE,YAAa,IAClF,MAAMF,EAAa5B,EAAaqC,EAAST,WAAY,CAACnB,KAAK8B,UAAUC,KAAK,KAC1E,MAAMV,EAAc9B,EAClBqC,EAASP,YACTrB,KAAKgC,oBAAsB,CAAChC,KAAKiC,eAAiB,GAClDjC,KAAKkC,cAAgB,CAAClC,KAAKmC,SAAW,IACtCJ,KAAK,KAEP/B,KAAK2B,uBAAuBZ,EAAS,kBAAmBI,GACxDnB,KAAK2B,uBAAuBZ,EAAS,mBAAoBM,GAAee,WACxEpC,KAAK2B,uBAAuBZ,EAAS,eAAgBf,KAAKC,MAAQ,OAASmC,WAE3E,GAAId,GAAe,UAAWP,GAAWA,EAAQd,QAAUD,KAAKC,MAC9Dc,EAAQd,MAAQD,KAAKC,MAEvB,MAAMd,EAAQa,KAAKiB,UAAUF,GAC7Bf,KAAKG,OAAShB,EAAMkD,OAAS,EAC7BrC,KAAKI,MAAQjB,IAAUa,KAAKU,aAC5BV,KAAKM,gBAAkBhB,QACrByB,EAAQuB,UAAYvB,EAAQwB,YAAcxB,EAAQyB,aAAa,aAEjExC,KAAKO,gBAAkBjB,QAAQyB,EAAQ0B,UAAY1B,EAAQyB,aAAa,YAAY,EAG9ExC,KAAA0C,iBAAoBC,IAC1B,IAAK3C,KAAKe,SAASQ,QAAQC,WAAW,OAAQ,OAC9CmB,EAAMC,iBACN5C,KAAKe,QAAQ8B,YAAY,EAGnB7C,KAAA8C,cAAgB,KACtB9C,KAAKE,QAAU,IAAI,EAGbF,KAAA+C,eAAkBJ,IACxB,GAAIA,EAAMK,yBAAyBC,MAAQjD,KAAKkD,GAAGC,SAASR,EAAMK,eAAgB,OAClFhD,KAAKE,QAAU,MACfF,KAAKK,QAAU,IAAI,EAGbL,KAAAoD,kBAAoB,KAC1BpD,KAAKc,aAAa,CA8DrB,CAxMC,iBAAAuC,GACE,GAAIrD,KAAKa,QAASb,KAAKsD,qB,CAGzB,oBAAAC,GACEvD,KAAKwD,eAAeC,aACpBzD,KAAKwD,cAAgBpB,S,CAGvB,gBAAAsB,GACE1D,KAAKc,cACLd,KAAKa,QAAU,KACfb,KAAKsD,sBACLK,uBAAsB,IAAM3D,KAAKc,e,CAGnC,kBAAA8C,GACE5D,KAAKc,a,CAOP,qBAAA+C,GACE7D,KAAKc,a,CAGP,aAAYY,GACV,OAAO1B,KAAK8D,SAAW9D,KAAKS,W,CAG9B,WAAYqB,GACV,MAAO,GAAG9B,KAAK0B,iB,CAGjB,iBAAYO,GACV,MAAO,GAAGjC,KAAK0B,uB,CAGjB,WAAYS,GACV,MAAO,GAAGnC,KAAK0B,iB,CAGjB,uBAAYM,GACV,OAAO1C,QAAQU,KAAK+D,eAAiB/D,KAAKkC,a,CAG5C,iBAAYA,GACV,OAAOlC,KAAKC,OAASX,QAAQU,KAAKgE,a,CAG5B,SAAA/C,CAAUF,GAChB,MAAM5B,EAAQ4B,EAAQ5B,MACtB,OAAO8E,MAAMC,QAAQ/E,GAASA,EAAM4C,KAAK,KAAYoC,OAAOhF,GAAS,G,CAG/D,sBAAAwC,CAAuBZ,EAAuBqD,EAAcjF,GAClE,GAAIA,IAAUiD,UAAW,CACvB,GAAIrB,EAAQyB,aAAa4B,GAAOrD,EAAQsD,gBAAgBD,GACxD,M,CAEF,GAAIrD,EAAQK,aAAagD,KAAUjF,EAAO4B,EAAQuD,aAAaF,EAAMjF,E,CAG/D,WAAA6B,GACN,OAAOhB,KAAKuE,kBAAkBC,cAA4B,wBAA0BpC,S,CAG9E,mBAAAkB,GACN,GAAItD,KAAKwD,sBAAwBiB,mBAAqB,YAAa,OACnEzE,KAAKwD,cAAgB,IAAIiB,kBAAiBC,IACxC,MAAMC,EAAeD,EAAQE,MAAKC,GAChCZ,MAAMa,KAAKD,EAAOE,YAAYH,MAAKI,GAAQA,EAAKC,WAAa,MAE/D,GAAIN,EAAc3E,KAAKQ,cAAc,IAEvCR,KAAKwD,cAAc0B,QAAQlF,KAAKkD,GAAI,CAAEiC,UAAW,M,CAgEnD,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,0DACWvF,KAAKE,QAAU,GAAKkC,UAAS,cAC9BpC,KAAKG,OAAS,GAAKiC,UAAS,aAC7BpC,KAAKI,MAAQ,GAAKgC,UAAS,eACzBpC,KAAKK,QAAU,GAAK+B,UAAS,eAC7BpC,KAAKC,MAAQ,GAAKmC,UAAS,gBAC1BpC,KAAKM,gBAAkB,GAAK8B,UAAS,gBACrCpC,KAAKO,gBAAkB,GAAK6B,UAC3CoD,UAAWxF,KAAK8C,cAChB2C,WAAYzF,KAAK+C,eACjB2C,QAAS1F,KAAKoD,kBACduC,SAAU3F,KAAKoD,kBACfwC,WAAY5F,KAAKoD,mBAEjBiC,EAAA,OAAAE,IAAA,2CAAKM,MAAM,wBACTR,EAAA,WAAAE,IAAA,2CACEM,MAAM,eACNC,GAAG,QACHC,QAAQ,kBACRC,MAAM,UACNC,SAAQ,KACRC,IAAKlG,KAAK0B,UACVyE,OAAQnG,KAAK8B,QACbsE,QAASpG,KAAK0C,kBAEb1C,KAAKqG,OAERhB,EAAA,OAAAE,IAAA,2CAAKM,MAAM,iBAAiBS,IAAKpD,GAAOlD,KAAKuE,iBAAmBrB,GAC9DmC,EAAA,QAAAE,IAAA,2CAAMgB,aAAcvG,KAAKc,eAE1Bd,KAAKgC,qBACJqD,EAAA,WAAAE,IAAA,2CACEM,MAAM,qBACNC,GAAG,MACHC,QAAQ,kBACRC,MAAM,YACNG,OAAQnG,KAAKiC,eAEZjC,KAAK+D,aAGT/D,KAAKkC,eACJmD,EAAA,WAAAE,IAAA,2CACEM,MAAM,eACNC,GAAG,MACHC,QAAQ,kBACRC,MAAM,WACNG,OAAQnG,KAAKmC,QACbqE,KAAK,SAEJxG,KAAKgE,e","ignoreList":[]}