@ibobbyts/svelte-ui-utils 0.4.1 → 0.4.3

package/README.md

@@ -511,7 +511,12 @@ relational pseudo-class.
 The original flat `options` API remains available. New callers may opt into
 grouped options with `optionGroups`; each group can have an
 optional accessible label and its options keep the same keyboard and disabled
-semantics. `width`, `minWidth`, `maxWidth`, and `className` are optional styling
+semantics. Set `groupsCollapsedByDefault` to `"true"` to initially collapse
+all groups, or to `"auto"` to initially expand only groups containing a
+selected option; `"false"` is the default. The initial state is evaluated each
+time the menu opens, and selecting options while it remains open does not
+change the current collapsed state. Group headings can always be toggled
+manually. `width`, `minWidth`, `maxWidth`, and `className` are optional styling
 hooks. `onTriggerClick` runs before the dropdown toggles, so a nested control
 can stop event propagation without preventing the dropdown from opening.
 
@@ -845,3 +850,23 @@ bun add @ibobbyts/svelte-ui-utils@0.3.1 svelte
 ```
 
 Use it after each release when a Bun-based project will consume the package.
+
+## 分段日期输入（本地新增，尚未发布）
+
+```svelte
+<script lang="ts">
+  import { SegmentedDateInput } from '@ibobbyts/svelte-ui-utils/segmented-date';
+  let dob = $state('');
+</script>
+
+<SegmentedDateInput name="dob" bind:value={dob} ariaLabel="生日"
+  yearLabel="年" monthLabel="月" dayLabel="日" autocomplete="bday" />
+```
+
+支持 `precision="year" | "month" | "day"`（默认 `day`）、数字输入、全角数字归一化、完整日期粘贴及月日失焦补零。`value` 可双向绑定；`onvalueinput` 接收用户输入后的组合值。日历有效性和业务范围由调用方校验。
+
+默认用隐藏字段提交组合值；`submitParts={true}` 改为提交 `${name}Year`、`${name}Month`、`${name}Day`（按精度决定字段）。支持 `required`、`readonly`、`disabled`、`id`（关联年输入框）和生日自动填充。`ariaLabel`、各段标签及占位符由调用方提供，以接入应用本地化。
+
+引入公共 `style.css` 后可独立使用，无需 Tailwind 或 DaisyUI。`class` 定制容器；`inputClass` 替换默认输入框装饰样式，布局仍由组件负责。MMS 通过该参数保留 DaisyUI 外观。
+
+纯函数和类型可从 `@ibobbyts/svelte-ui-utils/segmented-date/state` 引入：`splitSegmentedDate`、`composeSegmentedDate`、`parsePastedSegmentedDate`、`SegmentedDateParts`、`SegmentedDatePrecision`；此入口不加载 Svelte，适用于服务端和 Node。

package/dist/dropdown/Dropdown.svelte

@@ -21,6 +21,7 @@
   export let multiselect = false;
   export let options: DropdownOption[] = [];
   export let optionGroups: DropdownOptionGroup[] | undefined = undefined;
+  export let groupsCollapsedByDefault: 'true' | 'false' | 'auto' = 'false';
   export let ariaLabel: string | undefined = undefined;
   export let placement: DropdownPlacement = 'auto';
   export let menuAlign: DropdownMenuAlign = 'left';
@@ -56,11 +57,15 @@
   let typeaheadBuffer = '';
   let typeaheadTimer: ReturnType<typeof setTimeout> | undefined;
   let typeaheadGeneration = 0;
+  let collapsedGroupIndexes = new Set<number>();
   // Keep the buffer long enough for users to type multi-character aliases
   // while the menu is rendering a large option list.
   const typeaheadTimeoutMs = 1000;
 
   $: resolvedOptions = optionGroups === undefined ? options : optionGroups.flatMap((group) => group.options);
+  $: visibleOptions = optionGroups === undefined
+    ? options
+    : optionGroups.flatMap((group, groupIndex) => group.label && collapsedGroupIndexes.has(groupIndex) ? [] : group.options);
   $: selectedValues = normalizeSelectedValues(multiselect && Array.isArray(value) ? value : []);
   $: selectedOption = Array.isArray(value) ? undefined : resolvedOptions.find((option) => option.value === value);
   $: selectedText = multiselect
@@ -89,7 +94,7 @@
   }
 
   function firstEnabledOption(): DropdownOption | undefined {
-    return resolvedOptions.find((option) => !option.disabled);
+    return visibleOptions.find((option) => !option.disabled);
   }
 
   function normalizeSelectedValues(nextValues: DropdownMultiValue): DropdownMultiValue {
@@ -104,7 +109,7 @@
   }
 
   function initialActiveValue(): DropdownValue {
-    const firstSelectedEnabled = resolvedOptions.find(
+    const firstSelectedEnabled = visibleOptions.find(
       (option) => selectedValues.includes(option.value) && !option.disabled
     );
     return firstSelectedEnabled?.value ?? selectedOption?.value ?? firstEnabledOption()?.value ?? '';
@@ -115,21 +120,21 @@
   }
 
   function activeOptionIndex(nextActiveValue: DropdownValue): number {
-    const index = resolvedOptions.findIndex((option) => option.value === nextActiveValue && !option.disabled);
+    const index = visibleOptions.findIndex((option) => option.value === nextActiveValue && !option.disabled);
     if (index >= 0) {
       return index;
     }
-    const fallbackIndex = resolvedOptions.findIndex(
+    const fallbackIndex = visibleOptions.findIndex(
       (option) => isOptionSelected(option) && !option.disabled
     );
     if (fallbackIndex >= 0) {
       return fallbackIndex;
     }
-    return resolvedOptions.findIndex((option) => !option.disabled);
+    return visibleOptions.findIndex((option) => !option.disabled);
   }
 
   function moveActiveOption(offset: number) {
-    const enabledOptions = resolvedOptions.filter((option) => !option.disabled);
+    const enabledOptions = visibleOptions.filter((option) => !option.disabled);
     if (enabledOptions.length === 0) {
       return;
     }
@@ -180,7 +185,7 @@
       : key.toLocaleLowerCase();
     const nextBuffer = `${typeaheadBuffer}${normalizedKey}`;
     const findMatch = (prefix: string) =>
-      resolvedOptions.find(
+      visibleOptions.find(
         (option) =>
           !option.disabled &&
           [option.searchText, option.label]
@@ -233,12 +238,42 @@
     }
     if (!open) {
       updateResolvedPlacement();
+      initializeCollapsedGroups();
     }
     clearTypeaheadBuffer();
     open = !open;
     activeValue = initialActiveValue();
   }
 
+  function isGroupCollapsed(groupIndex: number): boolean {
+    return collapsedGroupIndexes.has(groupIndex);
+  }
+
+  function initializeCollapsedGroups() {
+    if (optionGroups === undefined || groupsCollapsedByDefault === 'false') {
+      collapsedGroupIndexes = new Set();
+      return;
+    }
+    if (groupsCollapsedByDefault === 'true') {
+      collapsedGroupIndexes = new Set(
+        optionGroups.flatMap((group, index) => group.label ? [index] : [])
+      );
+      return;
+    }
+    collapsedGroupIndexes = new Set(
+      optionGroups.flatMap((group, index) =>
+        group.label && group.options.some((option) => isOptionSelected(option)) ? [] : group.label ? [index] : []
+      )
+    );
+  }
+
+  function toggleGroup(groupIndex: number) {
+    const next = new Set(collapsedGroupIndexes);
+    if (next.has(groupIndex)) next.delete(groupIndex);
+    else next.add(groupIndex);
+    collapsedGroupIndexes = next;
+  }
+
   function handleTriggerClick(event: MouseEvent) {
     onTriggerClick?.(event);
     toggleOpen();
@@ -284,7 +319,7 @@
     if ((event.key === 'Enter' || event.key === ' ') && open) {
       event.preventDefault();
       const index = activeOptionIndex(activeValue);
-      const option = index >= 0 ? resolvedOptions[index] : undefined;
+      const option = index >= 0 ? visibleOptions[index] : undefined;
       if (option) {
         selectOption(option);
       }
@@ -558,15 +593,25 @@
             </button>
           {/each}
         {:else}
-          {#each optionGroups as group}
+          {#each optionGroups as group, groupIndex}
             <div class="suu-dropdown__group" role="group" aria-label={group.label}>
               {#if group.label}
-                <div class="suu-dropdown__group-label">{group.label}</div>
+                <button
+                  type="button"
+                  class="suu-dropdown__group-label"
+                  aria-expanded={!collapsedGroupIndexes.has(groupIndex)}
+                  on:click|stopPropagation={() => toggleGroup(groupIndex)}
+                >
+                  <span>{group.label}</span>
+                  <span class="suu-dropdown__group-chevron" aria-hidden="true"></span>
+                </button>
               {/if}
-              {#each group.options as option}
+              {#if !group.label || !collapsedGroupIndexes.has(groupIndex)}
+                {#each group.options as option, optionIndex}
                 <button
                   type="button"
                   class="suu-dropdown__option"
+                  class:suu-dropdown__option--group-first={Boolean(group.label) && optionIndex === 0}
                   class:suu-dropdown__option--active={option.value === activeValue}
                   class:suu-dropdown__option--disabled={option.disabled}
                   role="option"
@@ -591,7 +636,8 @@
                   {/if}
                   <span class="suu-dropdown__label">{option.label}</span>
                 </button>
-              {/each}
+                {/each}
+              {/if}
             </div>
           {/each}
         {/if}

package/dist/dropdown/Dropdown.svelte.d.ts

@@ -18,6 +18,7 @@ declare const Dropdown: $$__sveltets_2_IsomorphicComponent<{
     multiselect?: boolean;
     options?: DropdownOption[];
     optionGroups?: DropdownOptionGroup[] | undefined;
+    groupsCollapsedByDefault?: "true" | "false" | "auto";
     ariaLabel?: string | undefined;
     placement?: DropdownPlacement;
     menuAlign?: DropdownMenuAlign;

package/dist/dropdown/Dropdown.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/Dropdown.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAER,iBAAiB,EAGjB,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,8BAA8B,EAC9B,iBAAiB,EACjB,2BAA2B,EAE5B,MAAM,YAAY,CAAC;AA+ftB,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,QAAQ;SAVqb,MAAM,GAAG,SAAS;YAAU,iBAAiB;;cAA8C,cAAc,EAAE;mBAAiB,mBAAmB,EAAE,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;gBAAc,iBAAiB;gBAAc,iBAAiB;;;;WAAuG,MAAM,GAAG,SAAS;;YAAsC,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;;eAAqC,8BAA8B,GAAG,SAAS;qBAAmB,2BAA2B,GAAG,SAAS;;;kBAUz/B,CAAC;AAC5E,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AAChD,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/Dropdown.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAER,iBAAiB,EAGjB,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,8BAA8B,EAC9B,iBAAiB,EACjB,2BAA2B,EAE5B,MAAM,YAAY,CAAC;AAuiBtB,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,QAAQ;SAV0e,MAAM,GAAG,SAAS;YAAU,iBAAiB;;cAA8C,cAAc,EAAE;mBAAiB,mBAAmB,EAAE,GAAG,SAAS;+BAA6B,MAAM,GAAG,OAAO,GAAG,MAAM;gBAAc,MAAM,GAAG,SAAS;gBAAc,iBAAiB;gBAAc,iBAAiB;;;;WAAuG,MAAM,GAAG,SAAS;;YAAsC,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;;eAAqC,8BAA8B,GAAG,SAAS;qBAAmB,2BAA2B,GAAG,SAAS;;;kBAUpmC,CAAC;AAC5E,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AAChD,eAAe,QAAQ,CAAC"}

package/dist/dropdown/DropdownMultiSelect.svelte

@@ -16,6 +16,7 @@
   export let value: DropdownMultiValue = [];
   export let options: DropdownOption[] = [];
   export let optionGroups: DropdownOptionGroup[] | undefined = undefined;
+  export let groupsCollapsedByDefault: 'true' | 'false' | 'auto' = 'false';
   export let ariaLabel: string | undefined = undefined;
   export let placement: DropdownPlacement = 'auto';
   export let menuAlign: DropdownMenuAlign = 'left';
@@ -37,6 +38,7 @@
   multiselect={true}
   {options}
   {optionGroups}
+  {groupsCollapsedByDefault}
   {ariaLabel}
   {placement}
   {menuAlign}

package/dist/dropdown/DropdownMultiSelect.svelte.d.ts

@@ -17,6 +17,7 @@ declare const DropdownMultiSelect: $$__sveltets_2_IsomorphicComponent<{
     value?: DropdownMultiValue;
     options?: DropdownOption[];
     optionGroups?: DropdownOptionGroup[] | undefined;
+    groupsCollapsedByDefault?: "true" | "false" | "auto";
     ariaLabel?: string | undefined;
     placement?: DropdownPlacement;
     menuAlign?: DropdownMenuAlign;

package/dist/dropdown/DropdownMultiSelect.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMultiSelect.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/DropdownMultiSelect.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACR,iBAAiB,EACjB,0BAA0B,EAC1B,kBAAkB,EAClB,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,2BAA2B,EAC5B,MAAM,YAAY,CAAC;AA+BtB,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,mBAAmB;SAV6W,MAAM,GAAG,SAAS;YAAU,kBAAkB;cAAY,cAAc,EAAE;mBAAiB,mBAAmB,EAAE,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;gBAAc,iBAAiB;gBAAc,iBAAiB;;;;YAAwG,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;;eAAqC,0BAA0B,GAAG,SAAS;qBAAmB,2BAA2B,GAAG,SAAS;;;kBAUr1B,CAAC;AACvF,KAAK,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACtE,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"DropdownMultiSelect.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/DropdownMultiSelect.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACR,iBAAiB,EACjB,0BAA0B,EAC1B,kBAAkB,EAClB,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,2BAA2B,EAC5B,MAAM,YAAY,CAAC;AAgCtB,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,mBAAmB;SAVka,MAAM,GAAG,SAAS;YAAU,kBAAkB;cAAY,cAAc,EAAE;mBAAiB,mBAAmB,EAAE,GAAG,SAAS;+BAA6B,MAAM,GAAG,OAAO,GAAG,MAAM;gBAAc,MAAM,GAAG,SAAS;gBAAc,iBAAiB;gBAAc,iBAAiB;;;;YAAwG,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;;eAAqC,0BAA0B,GAAG,SAAS;qBAAmB,2BAA2B,GAAG,SAAS;;;kBAUh8B,CAAC;AACvF,KAAK,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACtE,eAAe,mBAAmB,CAAC"}

package/dist/index.d.ts

@@ -9,4 +9,5 @@ export * from './ordered-list/index.js';
 export * from './sortable-table/index.js';
 export { getUiMessages, resolveUiLanguage, uiLanguages } from './i18n.js';
 export type { UiLanguage, UiMessages } from './i18n.js';
+export * from './segmented-date/index.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAC1E,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC;AACxC,cAAc,2BAA2B,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAC1E,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACxD,cAAc,2BAA2B,CAAC"}

package/dist/index.js

@@ -8,3 +8,4 @@ export * from './sortable-list/index.js';
 export * from './ordered-list/index.js';
 export * from './sortable-table/index.js';
 export { getUiMessages, resolveUiLanguage, uiLanguages } from './i18n.js';
+export * from './segmented-date/index.js';

package/dist/segmented-date/SegmentedDateInput.svelte

@@ -0,0 +1,193 @@
+<script lang="ts">
+    import { untrack } from "svelte";
+    import {
+        composeSegmentedDate,
+        parsePastedSegmentedDate,
+        splitSegmentedDate,
+        type SegmentedDatePrecision,
+    } from "./state.js";
+
+    let {
+        value = $bindable(""),
+        precision = "day",
+        name,
+        id,
+        required = false,
+        readonly = false,
+        disabled = false,
+        ariaLabel,
+        yearLabel,
+        monthLabel,
+        dayLabel,
+        yearPlaceholder = "YYYY",
+        monthPlaceholder = "MM",
+        dayPlaceholder = "DD",
+        submitParts = false,
+        autocomplete,
+        class: className = "",
+        inputClass = "",
+        onvalueinput,
+    } = $props<{
+        value?: string;
+        precision?: SegmentedDatePrecision;
+        name: string;
+        id?: string;
+        required?: boolean;
+        readonly?: boolean;
+        disabled?: boolean;
+        ariaLabel: string;
+        yearLabel: string;
+        monthLabel?: string;
+        dayLabel?: string;
+        yearPlaceholder?: string;
+        monthPlaceholder?: string;
+        dayPlaceholder?: string;
+        submitParts?: boolean;
+        autocomplete?: "bday";
+        class?: string;
+        inputClass?: string;
+        onvalueinput?: (value: string) => void;
+    }>();
+
+    let year = $state("");
+    let month = $state("");
+    let day = $state("");
+
+    $effect(() => {
+        const parts = splitSegmentedDate(value, precision);
+        // Keep partially entered segments while the child is emitting an incomplete value.
+        const current = untrack(() => composeSegmentedDate({ year, month, day }, precision));
+        if (value !== current) {
+            year = parts.year;
+            month = parts.month;
+            day = parts.day;
+        }
+    });
+
+    function updateValue() {
+        const nextValue = composeSegmentedDate({ year, month, day }, precision);
+        if (nextValue === value) return;
+        value = nextValue;
+        onvalueinput?.(value);
+    }
+
+    function handleInput(part: SegmentedDatePrecision, event: Event) {
+        const input = event.currentTarget as HTMLInputElement;
+        const normalized = input.value.normalize("NFKC").replace(/\D/g, "")
+            .slice(0, part === "year" ? 4 : 2);
+        input.value = normalized;
+        if (part === "year") year = normalized;
+        if (part === "month") month = normalized;
+        if (part === "day") day = normalized;
+        updateValue();
+    }
+
+    function handleBlur(part: "month" | "day") {
+        if (part === "month" && /^\d$/.test(month)) month = month.padStart(2, "0");
+        if (part === "day" && /^\d$/.test(day)) day = day.padStart(2, "0");
+        updateValue();
+    }
+
+    function handlePaste(event: ClipboardEvent) {
+        const parts = parsePastedSegmentedDate(
+            event.clipboardData?.getData("text") ?? "",
+            precision,
+        );
+        if (!parts) return;
+        event.preventDefault();
+        year = parts.year;
+        month = parts.month;
+        day = parts.day;
+        updateValue();
+    }
+</script>
+
+{#if !submitParts}
+    <input type="hidden" {name} {value} {disabled} />
+{/if}
+
+<div
+    class={["suu-segmented-date", className]}
+    data-precision={precision}
+    role="group"
+    aria-label={ariaLabel}
+>
+    <input
+        class={["suu-segmented-date__input", inputClass]}
+        class:suu-segmented-date__input--default={!inputClass}
+        type="text"
+        name={submitParts ? `${name}Year` : undefined}
+        {id}
+        bind:value={year}
+        oninput={(event) => handleInput("year", event)}
+        onpaste={handlePaste}
+        inputmode="numeric"
+        pattern="[0-9][0-9][0-9][0-9]"
+        maxlength="4"
+        placeholder={yearPlaceholder}
+        aria-label={yearLabel}
+        autocomplete={autocomplete ? "bday-year" : undefined}
+        {required}
+        {readonly}
+        {disabled}
+    />
+    {#if precision !== "year"}
+        <input
+            class={["suu-segmented-date__input", inputClass]}
+        class:suu-segmented-date__input--default={!inputClass}
+            type="text"
+            name={submitParts ? `${name}Month` : undefined}
+            bind:value={month}
+            oninput={(event) => handleInput("month", event)}
+            onblur={() => handleBlur("month")}
+            onpaste={handlePaste}
+            inputmode="numeric"
+            pattern="[0-9][0-9]?"
+            maxlength="2"
+            placeholder={monthPlaceholder}
+            aria-label={monthLabel}
+            autocomplete={autocomplete ? "bday-month" : undefined}
+            {required}
+            {readonly}
+            {disabled}
+        />
+    {/if}
+    {#if precision === "day"}
+        <input
+            class={["suu-segmented-date__input", inputClass]}
+        class:suu-segmented-date__input--default={!inputClass}
+            type="text"
+            name={submitParts ? `${name}Day` : undefined}
+            bind:value={day}
+            oninput={(event) => handleInput("day", event)}
+            onblur={() => handleBlur("day")}
+            onpaste={handlePaste}
+            inputmode="numeric"
+            pattern="[0-9][0-9]?"
+            maxlength="2"
+            placeholder={dayPlaceholder}
+            aria-label={dayLabel}
+            autocomplete={autocomplete ? "bday-day" : undefined}
+            {required}
+            {readonly}
+            {disabled}
+        />
+    {/if}
+</div>
+
+<style>
+    .suu-segmented-date { display: grid; min-width: 0; gap: 0.5rem; }
+    .suu-segmented-date[data-precision="year"] { grid-template-columns: minmax(0, 1fr); }
+    .suu-segmented-date[data-precision="month"] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
+    .suu-segmented-date[data-precision="day"] { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
+    .suu-segmented-date__input { min-width: 0; width: 100%; box-sizing: border-box; }
+    .suu-segmented-date__input--default {
+        padding: 0.5rem 0.75rem;
+        border: 1px solid var(--suu-color-border);
+        border-radius: var(--suu-radius);
+        background: var(--suu-color-bg);
+        color: var(--suu-color-text);
+        font: inherit;
+    }
+    .suu-segmented-date__input--default:focus-visible { outline: 2px solid var(--suu-color-accent); outline-offset: 2px; }
+</style>

package/dist/segmented-date/SegmentedDateInput.svelte.d.ts

@@ -0,0 +1,26 @@
+import { type SegmentedDatePrecision } from "./state.js";
+type $$ComponentProps = {
+    value?: string;
+    precision?: SegmentedDatePrecision;
+    name: string;
+    id?: string;
+    required?: boolean;
+    readonly?: boolean;
+    disabled?: boolean;
+    ariaLabel: string;
+    yearLabel: string;
+    monthLabel?: string;
+    dayLabel?: string;
+    yearPlaceholder?: string;
+    monthPlaceholder?: string;
+    dayPlaceholder?: string;
+    submitParts?: boolean;
+    autocomplete?: "bday";
+    class?: string;
+    inputClass?: string;
+    onvalueinput?: (value: string) => void;
+};
+declare const SegmentedDateInput: import("svelte").Component<$$ComponentProps, {}, "value">;
+type SegmentedDateInput = ReturnType<typeof SegmentedDateInput>;
+export default SegmentedDateInput;
+//# sourceMappingURL=SegmentedDateInput.svelte.d.ts.map

package/dist/segmented-date/SegmentedDateInput.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedDateInput.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/segmented-date/SegmentedDateInput.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAIC,KAAK,sBAAsB,EAC9B,MAAM,YAAY,CAAC;AAEvB,KAAK,gBAAgB,GAAG;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,sBAAsB,CAAC;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C,CAAC;AAkGN,QAAA,MAAM,kBAAkB,2DAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/segmented-date/index.d.ts

@@ -0,0 +1,3 @@
+export { default as SegmentedDateInput } from './SegmentedDateInput.svelte';
+export * from './state.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/segmented-date/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/segmented-date/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,cAAc,YAAY,CAAC"}

package/dist/segmented-date/index.js

@@ -0,0 +1,2 @@
+export { default as SegmentedDateInput } from './SegmentedDateInput.svelte';
+export * from './state.js';

package/dist/segmented-date/state.d.ts

@@ -0,0 +1,10 @@
+export type SegmentedDatePrecision = "year" | "month" | "day";
+export type SegmentedDateParts = {
+    year: string;
+    month: string;
+    day: string;
+};
+export declare function splitSegmentedDate(value: string, precision: SegmentedDatePrecision): SegmentedDateParts;
+export declare function composeSegmentedDate(parts: SegmentedDateParts, precision: SegmentedDatePrecision): string;
+export declare function parsePastedSegmentedDate(value: string, precision: SegmentedDatePrecision): SegmentedDateParts | null;
+//# sourceMappingURL=state.d.ts.map

package/dist/segmented-date/state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"state.d.ts","sourceRoot":"","sources":["../../src/lib/segmented-date/state.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,sBAAsB,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;AAE9D,MAAM,MAAM,kBAAkB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACf,CAAC;AAQF,wBAAgB,kBAAkB,CAC9B,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,sBAAsB,GAClC,kBAAkB,CAuBpB;AAED,wBAAgB,oBAAoB,CAChC,KAAK,EAAE,kBAAkB,EACzB,SAAS,EAAE,sBAAsB,GAClC,MAAM,CAqBR;AAED,wBAAgB,wBAAwB,CACpC,KAAK,EAAE,MAAM,EACb,SAAS,EAAE,sBAAsB,GAClC,kBAAkB,GAAG,IAAI,CAe3B"}

package/dist/segmented-date/state.js

@@ -0,0 +1,67 @@
+const EMPTY_PARTS = { year: "", month: "", day: "" };
+function normalizePart(value) {
+    return value.normalize("NFKC").trim();
+}
+export function splitSegmentedDate(value, precision) {
+    const normalized = value.normalize("NFKC").trim();
+    const patterns = {
+        year: /^([^-]*)$/,
+        month: /^([^-]*)-([^-]*)$/,
+        day: /^([^-]*)-([^-]*)-([^-]*)$/,
+    };
+    const match = normalized.match(patterns[precision]);
+    if (!match) {
+        if (precision === "month" && /^\d{4}$/.test(normalized)) {
+            return { year: normalized, month: "", day: "" };
+        }
+        if (precision === "month" && /^\d{1,2}$/.test(normalized)) {
+            return { year: "", month: normalized, day: "" };
+        }
+        return { ...EMPTY_PARTS };
+    }
+    return {
+        year: match[1] ?? "",
+        month: precision === "year" ? "" : (match[2] ?? ""),
+        day: precision === "day" ? (match[3] ?? "") : "",
+    };
+}
+export function composeSegmentedDate(parts, precision) {
+    const year = normalizePart(parts.year);
+    const month = normalizePart(parts.month);
+    const day = normalizePart(parts.day);
+    if (!year && (precision === "year" || !month) && (precision !== "day" || !day)) {
+        return "";
+    }
+    if (precision === "year")
+        return year;
+    if (precision === "month") {
+        if (/^\d{4}$/.test(year) && /^\d{1,2}$/.test(month)) {
+            return `${year}-${month.padStart(2, "0")}`;
+        }
+        if (/^\d{4}$/.test(year) && !month)
+            return year;
+        if (!year && /^\d{1,2}$/.test(month))
+            return month.padStart(2, "0");
+        return `${year}-${month}`;
+    }
+    if (/^\d{4}$/.test(year) && /^\d{1,2}$/.test(month) && /^\d{1,2}$/.test(day)) {
+        return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
+    }
+    return `${year}-${month}-${day}`;
+}
+export function parsePastedSegmentedDate(value, precision) {
+    const normalized = value.normalize("NFKC").trim();
+    const patterns = {
+        year: /^(\d{4})$/,
+        month: /^(?:(\d{4})[-/.](\d{1,2})|(\d{1,2}))$/,
+        day: /^(\d{4})[-/.](\d{1,2})[-/.](\d{1,2})$/,
+    };
+    const match = normalized.match(patterns[precision]);
+    if (!match)
+        return null;
+    return {
+        year: match[1] ?? "",
+        month: precision === "year" ? "" : (match[2] ?? match[3]).padStart(2, "0"),
+        day: precision === "day" ? match[3].padStart(2, "0") : "",
+    };
+}

package/dist/style.css

@@ -1283,6 +1283,7 @@
 .suu-dropdown__panel {
   max-height: var(--suu-dropdown-panel-max-height, 100vh);
   overflow-y: auto;
+  overflow-x: hidden;
   background: var(--suu-color-bg);
   overscroll-behavior: contain;
 }
@@ -1292,12 +1293,33 @@
 }
 
 .suu-dropdown__group-label {
+  display: flex;
+  width: 100%;
+  border: 0;
   padding: 8px 14px 6px;
   background: var(--suu-color-surface);
   color: var(--suu-color-muted);
+  cursor: pointer;
   font-size: 0.75em;
   font-weight: 700;
   letter-spacing: 0.02em;
+  font: inherit;
+  text-align: left;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.suu-dropdown__group-chevron {
+  width: 7px;
+  height: 7px;
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  transform: rotate(225deg);
+  transition: transform 120ms ease;
+}
+
+.suu-dropdown__group-label[aria-expanded='true'] .suu-dropdown__group-chevron {
+  transform: rotate(45deg);
 }
 
 .suu-dropdown__option {
@@ -1313,6 +1335,10 @@
   text-align: left;
 }
 
+.suu-dropdown__option--group-first {
+  border-top: 1px solid var(--suu-color-border);
+}
+
 .suu-dropdown--multiselect .suu-dropdown__option {
   display: flex;
   gap: 10px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibobbyts/svelte-ui-utils",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "description": "Reusable Svelte 5 UI utilities for dialogs, toast notifications, dropdown search, and data tables.",
   "type": "module",
   "license": "MIT",
@@ -77,7 +77,16 @@
       "svelte": "./dist/sortable-table/index.js",
       "default": "./dist/sortable-table/index.js"
     },
-    "./style.css": "./dist/style.css"
+    "./style.css": "./dist/style.css",
+    "./segmented-date": {
+      "types": "./dist/segmented-date/index.d.ts",
+      "svelte": "./dist/segmented-date/index.js",
+      "default": "./dist/segmented-date/index.js"
+    },
+    "./segmented-date/state": {
+      "types": "./dist/segmented-date/state.d.ts",
+      "default": "./dist/segmented-date/state.js"
+    }
   },
   "publishConfig": {
     "access": "public",