@ibobbyts/svelte-ui-utils 0.4.0 → 0.4.2

package/README.md

@@ -393,6 +393,18 @@ use `menuAlign="right"` to align their right edges instead. `fitContent` sizes
 the menu to its longest option while keeping the selected edge aligned.
 `DataTable` uses this same component for its page-size picker.
 
+For keyboard typeahead, an option may provide `searchText` separately from its
+display `label`. Typeahead matches the beginning of `searchText` or `label`,
+while the label remains the only text shown in the trigger and menu:
+
+```svelte
+<Dropdown
+  value="cn"
+  options={[{ label: '中国', searchText: 'China', value: 'cn' }]}
+  ariaLabel="Country"
+/>
+```
+
 Set `multiselect={true}` to control the component with a `DropdownValue[]`.
 Each option then shows a checkbox, selecting or deselecting an option keeps the
 menu open, and `onChange` receives the complete selected-value array in option
@@ -833,3 +845,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

@@ -27,6 +27,8 @@
   export let fitViewport = true;
   export let fitContent = true;
   export let disabled = false;
+  export let name: string | undefined = undefined;
+  export let required = false;
   export let width: string | undefined = undefined;
   export let minWidth: string | undefined = undefined;
   export let maxWidth: string | undefined = undefined;
@@ -51,6 +53,12 @@
   let portalMenuWidth: string | undefined = undefined;
   let removeOpenViewportListeners: (() => void) | undefined = undefined;
   let removeOutsidePointerListener: (() => void) | undefined = undefined;
+  let typeaheadBuffer = '';
+  let typeaheadTimer: ReturnType<typeof setTimeout> | undefined;
+  let typeaheadGeneration = 0;
+  // 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);
   $: selectedValues = normalizeSelectedValues(multiselect && Array.isArray(value) ? value : []);
@@ -131,6 +139,70 @@
     activeValue = enabledOptions[nextIndex]?.value ?? activeValue;
   }
 
+  function clearTypeaheadBuffer() {
+    typeaheadBuffer = '';
+    typeaheadGeneration += 1;
+    if (typeaheadTimer !== undefined) {
+      clearTimeout(typeaheadTimer);
+      typeaheadTimer = undefined;
+    }
+  }
+
+  function scheduleTypeaheadReset() {
+    const generation = ++typeaheadGeneration;
+    if (typeaheadTimer !== undefined) {
+      clearTimeout(typeaheadTimer);
+    }
+    typeaheadTimer = setTimeout(() => {
+      if (generation !== typeaheadGeneration) {
+        return;
+      }
+      typeaheadBuffer = '';
+      typeaheadTimer = undefined;
+    }, typeaheadTimeoutMs);
+  }
+
+  function scrollActiveOptionIntoView() {
+    void tick().then(() => {
+      if (!open || typeof document === 'undefined') {
+        return;
+      }
+      const activeElement = Array.from(
+        menuElement?.querySelectorAll<HTMLElement>('.suu-dropdown__option') ?? []
+      ).find((element) => element.dataset.value === String(activeValue));
+      activeElement?.scrollIntoView?.({ block: 'nearest' });
+    });
+  }
+
+  function handleTypeahead(key: string) {
+    const normalizedKey = key.startsWith('Key') && key.length === 4
+      ? key.slice(3).toLocaleLowerCase()
+      : key.toLocaleLowerCase();
+    const nextBuffer = `${typeaheadBuffer}${normalizedKey}`;
+    const findMatch = (prefix: string) =>
+      resolvedOptions.find(
+        (option) =>
+          !option.disabled &&
+          [option.searchText, option.label]
+            .filter((text): text is string => text !== undefined)
+            .some((text) => text.toLocaleLowerCase().startsWith(prefix))
+      );
+    const match = findMatch(nextBuffer) ?? findMatch(normalizedKey);
+
+    typeaheadBuffer = match ? (findMatch(nextBuffer) ? nextBuffer : normalizedKey) : nextBuffer;
+    scheduleTypeaheadReset();
+    if (!match) {
+      return;
+    }
+
+    if (!open) {
+      updateResolvedPlacement();
+      open = true;
+    }
+    activeValue = match.value;
+    scrollActiveOptionIntoView();
+  }
+
   function selectOption(option: DropdownOption) {
     if (option.disabled) {
       return;
@@ -144,11 +216,13 @@
         nextSelected.add(option.value);
       }
       const nextValues = normalizeSelectedValues([...nextSelected]);
+      clearTypeaheadBuffer();
       void (onChange as DropdownMultiChangeHandler | undefined)?.(nextValues);
       return;
     }
 
     open = false;
+    clearTypeaheadBuffer();
     void (onChange as DropdownChangeHandler | undefined)?.(option.value);
     buttonElement?.focus();
   }
@@ -160,6 +234,7 @@
     if (!open) {
       updateResolvedPlacement();
     }
+    clearTypeaheadBuffer();
     open = !open;
     activeValue = initialActiveValue();
   }
@@ -179,6 +254,7 @@
         event.preventDefault();
         open = false;
       }
+      clearTypeaheadBuffer();
       return;
     }
 
@@ -193,6 +269,18 @@
       return;
     }
 
+    if (
+      ((event.key.length === 1 && event.key !== ' ') ||
+        (event.key.startsWith('Key') && event.key.length === 4)) &&
+      !event.ctrlKey &&
+      !event.metaKey &&
+      !event.altKey
+    ) {
+      event.preventDefault();
+      handleTypeahead(event.key);
+      return;
+    }
+
     if ((event.key === 'Enter' || event.key === ' ') && open) {
       event.preventDefault();
       const index = activeOptionIndex(activeValue);
@@ -366,6 +454,7 @@
   onDestroy(() => {
     disableOpenViewportTracking();
     disableOutsidePointerDismissal();
+    clearTypeaheadBuffer();
   });
 </script>
 
@@ -402,6 +491,19 @@
     <span class="suu-dropdown__chevron" aria-hidden="true"></span>
   </button>
 
+  {#if name !== undefined && !multiselect}
+    <input
+      class="suu-visually-hidden"
+      type="text"
+      name={name}
+      value={String(value)}
+      required={required}
+      disabled={disabled}
+      tabindex="-1"
+      aria-label={ariaLabel}
+    />
+  {/if}
+
   {#if open}
     <div
       bind:this={menuElement}
@@ -461,10 +563,11 @@
               {#if group.label}
                 <div class="suu-dropdown__group-label">{group.label}</div>
               {/if}
-              {#each group.options as option}
+              {#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"

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

@@ -24,6 +24,8 @@ declare const Dropdown: $$__sveltets_2_IsomorphicComponent<{
     fitViewport?: boolean;
     fitContent?: boolean;
     disabled?: boolean;
+    name?: string | undefined;
+    required?: boolean;
     width?: string | undefined;
     minWidth?: string | undefined;
     maxWidth?: string | undefined;

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;AAkatB,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;SAVmZ,MAAM,GAAG,SAAS;YAAU,iBAAiB;;cAA8C,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,8BAA8B,GAAG,SAAS;qBAAmB,2BAA2B,GAAG,SAAS;;;kBAUh6B,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;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"}

package/dist/dropdown/types.d.ts

@@ -5,6 +5,8 @@ export type DropdownPlacement = 'auto' | 'up' | 'down';
 export type DropdownMenuAlign = 'left' | 'right';
 export interface DropdownOption {
     label: string;
+    /** Optional text used for keyboard typeahead matching instead of (or in addition to) the label. */
+    searchText?: string;
     value: DropdownValue;
     disabled?: boolean;
 }

package/dist/dropdown/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,MAAM,CAAC;AAE5C,MAAM,MAAM,kBAAkB,GAAG,aAAa,EAAE,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG,aAAa,GAAG,kBAAkB,CAAC;AAEnE,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,IAAI,GAAG,MAAM,CAAC;AAEvD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,OAAO,CAAC;AAEjD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,cAAc,EAAE,CAAC;CAC3B;AAED,MAAM,MAAM,qBAAqB,GAAG,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AAEnF,MAAM,MAAM,0BAA0B,GAAG,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AAE7F,MAAM,MAAM,8BAA8B,GAAG;IAC5C,cAAc,CAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC/D,CAAC,gBAAgB,CAAC,CAAC;AAEpB,MAAM,MAAM,2BAA2B,GAAG,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,MAAM,CAAC;AAE5C,MAAM,MAAM,kBAAkB,GAAG,aAAa,EAAE,CAAC;AAEjD,MAAM,MAAM,iBAAiB,GAAG,aAAa,GAAG,kBAAkB,CAAC;AAEnE,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,IAAI,GAAG,MAAM,CAAC;AAEvD,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,OAAO,CAAC;AAEjD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,mGAAmG;IACnG,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,cAAc,EAAE,CAAC;CAC3B;AAED,MAAM,MAAM,qBAAqB,GAAG,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AAEnF,MAAM,MAAM,0BAA0B,GAAG,CAAC,KAAK,EAAE,kBAAkB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;AAE7F,MAAM,MAAM,8BAA8B,GAAG;IAC5C,cAAc,CAAC,KAAK,EAAE,iBAAiB,GAAG,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC/D,CAAC,gBAAgB,CAAC,CAAC;AAEpB,MAAM,MAAM,2BAA2B,GAAG,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC"}

package/dist/dropdown-search/DropdownSearch.svelte

@@ -561,7 +561,24 @@
     if (searchOnExternalValueChange && normalizeDropdownSearchValue(value)) {
       handleExternalValue(value);
     }
-    return () => formElement?.removeEventListener('reset', handleFormReset);
+
+    const visibilityObserver =
+      typeof IntersectionObserver === 'undefined'
+        ? undefined
+        : new IntersectionObserver(([entry]) => {
+            if (!entry?.isIntersecting) {
+              focused = false;
+              showingFocusOptions = false;
+            }
+          });
+    if (inputElement && visibilityObserver) {
+      visibilityObserver.observe(inputElement);
+    }
+
+    return () => {
+      formElement?.removeEventListener('reset', handleFormReset);
+      visibilityObserver?.disconnect();
+    };
   });
 </script>
 

package/dist/dropdown-search/DropdownSearch.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownSearch.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown-search/DropdownSearch.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAM5D,OAAO,KAAK,EACR,0BAA0B,EAC1B,yBAAyB,EACzB,kBAAkB,EAClB,6BAA6B,EAC7B,yBAAyB,EACzB,qCAAqC,EACrC,wCAAwC,EACxC,oBAAoB,EACrB,MAAM,YAAY,CAAC;AAynBtB,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,cAAc;;mBAdihC,kBAAkB,GAAG,IAAI;oBAAkB,kBAAkB,EAAE;aAAW,oBAAoB;;;;;;;;;mBAAyR,kBAAkB,EAAE;iBAAe,MAAM,GAAG,SAAS;iBAAe,yBAAyB;SAAO,MAAM,GAAG,SAAS;WAAS,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;;eAAyC,UAAU;oBAAkB,MAAM,GAAG,SAAS;kBAAgB,MAAM,GAAG,SAAS;iBAAe,MAAM,GAAG,SAAS;;YAA4E,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;;8BAA8E,qCAAqC,GAChhE,SAAS;mBAAiB,6BAA6B;eAAe,CAAC,CAAC,MAAM,EAAE,0BAA0B,KAAK,IAAI,CAAC,GACpH,SAAS;eAAa,CAAC,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC,GAAG,SAAS;iBAAe,CAAC,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC,GAAG,SAAS;4BAA4B,wCAAwC,GACzM,SAAS;qBAAqB,CAAC,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC,GACtE,SAAS;kBAAgB,CAAC,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC,GAAG,SAAS;cAAY,CAAC,CAAC,MAAM,EAAE,yBAAyB,KAAK,IAAI,CAAC,GAAG,SAAS;;;;;kBAU1C,CAAC;AAClF,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAC5D,eAAe,cAAc,CAAC"}
+{"version":3,"file":"DropdownSearch.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/dropdown-search/DropdownSearch.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAM5D,OAAO,KAAK,EACR,0BAA0B,EAC1B,yBAAyB,EACzB,kBAAkB,EAClB,6BAA6B,EAC7B,yBAAyB,EACzB,qCAAqC,EACrC,wCAAwC,EACxC,oBAAoB,EACrB,MAAM,YAAY,CAAC;AA0oBtB,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,cAAc;;mBAdihC,kBAAkB,GAAG,IAAI;oBAAkB,kBAAkB,EAAE;aAAW,oBAAoB;;;;;;;;;mBAAyR,kBAAkB,EAAE;iBAAe,MAAM,GAAG,SAAS;iBAAe,yBAAyB;SAAO,MAAM,GAAG,SAAS;WAAS,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;gBAAc,MAAM,GAAG,SAAS;;eAAyC,UAAU;oBAAkB,MAAM,GAAG,SAAS;kBAAgB,MAAM,GAAG,SAAS;iBAAe,MAAM,GAAG,SAAS;;YAA4E,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;eAAa,MAAM,GAAG,SAAS;;8BAA8E,qCAAqC,GAChhE,SAAS;mBAAiB,6BAA6B;eAAe,CAAC,CAAC,MAAM,EAAE,0BAA0B,KAAK,IAAI,CAAC,GACpH,SAAS;eAAa,CAAC,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC,GAAG,SAAS;iBAAe,CAAC,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC,GAAG,SAAS;4BAA4B,wCAAwC,GACzM,SAAS;qBAAqB,CAAC,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC,GACtE,SAAS;kBAAgB,CAAC,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC,GAAG,SAAS;cAAY,CAAC,CAAC,MAAM,EAAE,yBAAyB,KAAK,IAAI,CAAC,GAAG,SAAS;;;;;kBAU1C,CAAC;AAClF,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC;AAC5D,eAAe,cAAc,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

@@ -41,6 +41,7 @@
 
 .suu-visually-hidden {
   position: absolute;
+  pointer-events: none;
   overflow: hidden;
   width: 1px;
   height: 1px;
@@ -1282,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;
 }
@@ -1312,6 +1314,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.0",
+  "version": "0.4.2",
   "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",