@smwb/ui-solid 0.11.1 → 0.12.0

package/dist/headless/source/components/inputs/selectField/selectField.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/inputs/selectField/selectField.tsx"],"sourcesContent":["import { type JSX, For, Show, createEffect, createMemo, createSignal, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { DropdownMenu, type DropdownItem, type DropdownItemProps } from \"./dropdownMenu\";\nimport { Chip } from \"../../dataDisplay/chip\";\nimport { TextFieldWrapper } from \"../textField\";\nimport { Icon } from \"../../base/icon\";\nimport type { MenuItemProps } from \"../../navigation/menu\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\ntype SelectEvent = Event & { currentTarget: Element; target: Element };\ntype SearchEvent = Event & { currentTarget: HTMLInputElement };\ntype SelectValue = null | string | number | (string | number | undefined | null)[];\n\nexport type OnSelectChange = (e: SelectEvent, data: SelectFieldProps) => void;\n\nexport interface SelectFieldProps {\n  class?: string;\n  value?: SelectValue | undefined;\n  defaultValue?: null | string | number | (string | number)[];\n  onChange?: OnSelectChange;\n  disabled?: boolean;\n  readOnly?: boolean;\n  name?: string | undefined;\n  multiple?: boolean;\n  menuMaxHeight?: number;\n  menuMiddleware?: DropdownItemProps[\"menuMiddleware\"];\n  menuNoItemsMessage?: JSX.Element;\n  menuContainer?: HTMLElement;\n  search?: true | false | \"menu\";\n  chips?: boolean;\n  isFocused?: boolean;\n  error?: boolean;\n  items: DropdownItem[];\n  label?: string;\n  variant?: \"outlined\" | \"filled\";\n  fullWidth?: boolean;\n  helperText?: JSX.Element;\n  onSearch?: (e: SearchEvent) => void;\n  isLoading?: boolean;\n  resetSearch?: () => void;\n  inline?: boolean;\n  endAdornment?: JSX.Element;\n  hideSelectArrowIcon?: boolean;\n  optionRenderer?: (args: MenuItemProps) => JSX.Element;\n  clearable?: boolean;\n  creatable?: boolean;\n  onCreate?: (inputValue: string, event: SelectEvent) => void;\n  virtualized?: boolean;\n  itemHeight?: number;\n  \"aria-label\"?: string;\n  id?: string;\n  ref?: Ref<HTMLSpanElement>;\n}\n\nfunction stopEvent(event: Event): void {\n  event.preventDefault();\n  event.stopPropagation();\n}\n\nexport function SelectField(props: SelectFieldProps): JSX.Element {\n  const [local] = splitProps(props, [\n    \"class\",\n    \"value\",\n    \"defaultValue\",\n    \"onChange\",\n    \"disabled\",\n    \"readOnly\",\n    \"name\",\n    \"multiple\",\n    \"menuMaxHeight\",\n    \"menuMiddleware\",\n    \"menuNoItemsMessage\",\n    \"menuContainer\",\n    \"search\",\n    \"chips\",\n    \"isFocused\",\n    \"error\",\n    \"items\",\n    \"label\",\n    \"variant\",\n    \"fullWidth\",\n    \"helperText\",\n    \"onSearch\",\n    \"resetSearch\",\n    \"isLoading\",\n    \"inline\",\n    \"endAdornment\",\n    \"hideSelectArrowIcon\",\n    \"optionRenderer\",\n    \"clearable\",\n    \"creatable\",\n    \"onCreate\",\n    \"virtualized\",\n    \"itemHeight\",\n    \"aria-label\",\n    \"id\",\n    \"ref\",\n  ]);\n\n  const variant = (): \"outlined\" | \"filled\" => local.variant ?? \"outlined\";\n  const [isOpen, setIsOpen] = createSignal(false);\n  const [valueState, setValueState] = createSignal<SelectValue | undefined>(local.defaultValue);\n  const [searchValue, setSearchValue] = createSignal(\"\");\n\n  const isControlled = local.value != null;\n  let anchorEl: HTMLSpanElement | undefined;\n  let searchWrapperEl: HTMLSpanElement | undefined;\n  let searchInputEl: HTMLInputElement | undefined;\n\n  const value = (): SelectValue | undefined => (isControlled ? local.value : valueState());\n  const isFocused = (): boolean => !!local.isFocused || isOpen();\n\n  // Selection is derived from the current value — no effect-driven sync.\n  const selectedItems = createMemo<DropdownItem[]>(() => {\n    const v = value();\n    if (Array.isArray(v)) return local.items.filter((item) => v.includes(item.value));\n    if (v === undefined || v === null || v === \"\") return [];\n    const item = local.items.find((i) => i.value === v);\n    return item ? [item] : [];\n  });\n\n  const updateValue = (event: SelectEvent, next: SelectValue | undefined): void => {\n    local.onChange?.(event, { ...props, value: next, name: local.name || undefined });\n    setValueState(next);\n  };\n\n  const onMouseDown: JSX.EventHandler<HTMLSpanElement, MouseEvent> = (event) => {\n    if (event.button !== 0) return;\n    event.preventDefault();\n    anchorEl?.focus();\n    setIsOpen(!isOpen());\n  };\n\n  const onClose = (): void => {\n    setIsOpen(false);\n    anchorEl?.focus();\n  };\n\n  const onFocus = (): void => {\n    if (local.search === true) searchInputEl?.focus();\n  };\n\n  const onKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    if (!local.readOnly && [\" \", \"ArrowUp\", \"ArrowDown\", \"Enter\"].includes(event.key)) {\n      event.preventDefault();\n      setIsOpen(!isOpen());\n    }\n  };\n\n  // Reset search text when the field loses focus / menu closes.\n  createEffect(() => {\n    if (!isFocused() || (local.search === \"menu\" && !isOpen())) {\n      setSearchValue(\"\");\n      local.resetSearch?.();\n    }\n  });\n\n  // Keep the multi-value scroller pinned to the end.\n  createEffect(() => {\n    value();\n    if (searchWrapperEl) searchWrapperEl.scrollLeft = searchWrapperEl.scrollWidth;\n  });\n\n  const onItemClick = (event: SelectEvent, item: DropdownItem): void => {\n    let next: SelectValue | undefined;\n    if (local.multiple) {\n      const current = value();\n      const valueArray = (Array.isArray(current) ? current : [current].filter(Boolean)) as Array<string | number | undefined | null>;\n      next = valueArray.slice();\n      const idx = next.findIndex((el) => el === item.value);\n      if (idx === -1) next.push(item.value);\n      else next.splice(idx, 1);\n    } else {\n      next = value() === item.value ? \"\" : item.value;\n    }\n    if (searchValue()) setSearchValue(\"\");\n    if (!local.multiple) {\n      setIsOpen(false);\n      anchorEl?.focus();\n    }\n    updateValue(event, next);\n  };\n\n  const onSearchInputChange = (event: SearchEvent): void => {\n    setSearchValue(event.currentTarget.value);\n    local.onSearch?.(event);\n    if (!isOpen()) setIsOpen(true);\n  };\n\n  const onDeleteChip = (currentValue: string | number | undefined | null) => (event: SelectEvent): void => {\n    const current = value();\n    if (Array.isArray(current)) {\n      updateValue(event, current.filter((v) => currentValue !== v));\n    }\n  };\n\n  const onResetSelected: JSX.EventHandler<HTMLSpanElement, MouseEvent> = (event) => {\n    updateValue(event, []);\n  };\n\n  const filteredItems = (): DropdownItem[] => {\n    if (local.onSearch) return local.items;\n    const sv = searchValue();\n    if (sv) return local.items.filter((el) => el.text.search(new RegExp(sv, \"i\")) !== -1);\n    return local.items;\n  };\n\n  const createOption = (): DropdownItemProps[\"createOption\"] => {\n    const sv = searchValue();\n    if (local.creatable && sv && !local.items.some((i) => i.text.toLowerCase() === sv.toLowerCase())) {\n      return {\n        text: `Создать \"${sv}\"`,\n        onCreate: (event) => {\n          local.onCreate?.(sv, event);\n          setSearchValue(\"\");\n          setIsOpen(false);\n        },\n      };\n    }\n    return undefined;\n  };\n\n  return (\n    <>\n      <TextFieldWrapper\n        label={local.label}\n        helperText={local.helperText}\n        variant={variant()}\n        disabled={local.disabled}\n        class={local.class}\n        error={local.error}\n        fullWidth={local.fullWidth}\n        isFilledState={!!selectedItems().length || !!searchValue()}\n        isFocused={isFocused()}\n        inline={local.inline}\n      >\n        <span\n          ref={mergeRefs(local.ref, (el) => (anchorEl = el as HTMLSpanElement))}\n          id={local.id}\n          class={cn(\"smwb-select-field\", local.class, {\n            \"smwb-select-field--filled\": variant() === \"filled\" && local.label,\n            \"smwb-select-field--disabled\": local.disabled,\n            \"smwb-select-field--search\": local.search,\n            \"smwb-select-field--inline\": local.inline,\n          })}\n          tabindex={local.disabled ? undefined : 0}\n          role=\"button\"\n          aria-haspopup=\"listbox\"\n          aria-expanded={isOpen()}\n          aria-disabled={local.disabled || undefined}\n          aria-label={local[\"aria-label\"]}\n          onMouseDown={local.disabled || local.readOnly ? undefined : onMouseDown}\n          onFocus={onFocus}\n          onKeyDown={onKeyDown}\n          data-testid=\"select-field\"\n        >\n          <span class=\"smwb-select-field__search-wrapper\" ref={(el) => (searchWrapperEl = el)}>\n            <Show\n              when={local.chips}\n              fallback={<span class=\"smwb-select-field__values\">{selectedItems().map((el) => el.text).join(\", \")}</span>}\n            >\n              <span class=\"smwb-select-field__values\">\n                <For each={selectedItems()}>\n                  {(item) => (\n                    <Chip label={item.text} onDelete={onDeleteChip(item.value)} onDeleteMouseDown={stopEvent} />\n                  )}\n                </For>\n              </span>\n            </Show>\n            <Show when={local.search && typeof local.search === \"boolean\" && !local.readOnly}>\n              <span class=\"smwb-select-field__search\">\n                <span class=\"smwb-select-field__search-text\">{searchValue()}</span>\n                <input\n                  class=\"smwb-select-field__search-input\"\n                  ref={(el) => (searchInputEl = el)}\n                  type=\"text\"\n                  value={searchValue()}\n                  onInput={onSearchInputChange}\n                  onMouseDown={(event) => {\n                    event.stopPropagation();\n                    setIsOpen(true);\n                  }}\n                  onKeyDown={(event) => event.stopPropagation()}\n                  data-testid=\"search-input\"\n                />\n              </span>\n            </Show>\n          </span>\n          <span class=\"smwb-select-field__actions\">\n            <Show\n              when={\n                ((Array.isArray(value()) && (value() as unknown[]).length > 0) ||\n                  (local.clearable && selectedItems().length > 0)) &&\n                !local.disabled\n              }\n            >\n              <Icon\n                name=\"close\"\n                size={20}\n                onClick={onResetSelected}\n                onMouseDown={stopEvent}\n                class={cn(\"smwb-select-field__icon\", \"smwb-select-field__icon--close\")}\n                aria-label=\"Clear selection\"\n                role=\"button\"\n              />\n            </Show>\n            {local.endAdornment}\n            <Show when={!local.hideSelectArrowIcon}>\n              <Icon\n                name=\"arrow_drop_down\"\n                class={cn(\"smwb-select-field__icon\", \"smwb-select-field__icon--arrow\", {\n                  \"smwb-select-field__icon--opened\": isOpen(),\n                  \"smwb-select-field__icon--focused\": isFocused(),\n                  \"smwb-select-field__icon--error\": local.error,\n                })}\n              />\n            </Show>\n          </span>\n        </span>\n      </TextFieldWrapper>\n      <DropdownMenu\n        anchorElement={() => anchorEl ?? null}\n        menuMaxHeight={local.menuMaxHeight}\n        menuMiddleware={local.menuMiddleware}\n        search={local.search === \"menu\"}\n        onSearchInputChange={onSearchInputChange}\n        optionRenderer={local.optionRenderer}\n        items={filteredItems()}\n        searchValue={searchValue()}\n        isOpen={isOpen()}\n        onClose={onClose}\n        onItemClick={onItemClick}\n        value={value()}\n        isLoading={local.isLoading}\n        menuNoItemsMessage={local.menuNoItemsMessage}\n        container={local.menuContainer}\n        virtualized={local.virtualized}\n        itemHeight={local.itemHeight}\n        createOption={createOption()}\n      />\n    </>\n  );\n}\n\nexport default SelectField;\n"],"mappings":"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","names":["item"],"file":"selectField.jsx"}
+{"version":3,"sources":["../../../../../../src/components/inputs/selectField/selectField.tsx"],"sourcesContent":["import { type JSX, For, Show, createEffect, createMemo, createSignal, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { DropdownMenu, type DropdownItem, type DropdownItemProps } from \"./dropdownMenu\";\nimport { Chip } from \"../../dataDisplay/chip\";\nimport { TextFieldWrapper } from \"../textField\";\nimport { Icon } from \"../../base/icon\";\nimport type { MenuItemProps } from \"../../navigation/menu\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\ntype SelectEvent = Event & { currentTarget: Element; target: Element };\ntype SearchEvent = Event & { currentTarget: HTMLInputElement };\ntype SelectValue = null | string | number | (string | number | undefined | null)[];\n\nexport type OnSelectChange = (e: SelectEvent, data: SelectFieldProps) => void;\n\nexport interface SelectFieldProps {\n  class?: string;\n  value?: SelectValue | undefined;\n  defaultValue?: null | string | number | (string | number)[];\n  onChange?: OnSelectChange;\n  disabled?: boolean;\n  readOnly?: boolean;\n  name?: string | undefined;\n  multiple?: boolean;\n  menuMaxHeight?: number;\n  menuMiddleware?: DropdownItemProps[\"menuMiddleware\"];\n  menuNoItemsMessage?: JSX.Element;\n  menuContainer?: HTMLElement;\n  search?: true | false | \"menu\";\n  chips?: boolean;\n  isFocused?: boolean;\n  error?: boolean;\n  items: DropdownItem[];\n  label?: string;\n  variant?: \"outlined\" | \"filled\";\n  /** Height of the field, as for TextField: `small` (40px, for toolbars), `medium` (default) or `large`. */\n  size?: \"small\" | \"medium\" | \"large\";\n  fullWidth?: boolean;\n  helperText?: JSX.Element;\n  onSearch?: (e: SearchEvent) => void;\n  isLoading?: boolean;\n  resetSearch?: () => void;\n  inline?: boolean;\n  endAdornment?: JSX.Element;\n  hideSelectArrowIcon?: boolean;\n  optionRenderer?: (args: MenuItemProps) => JSX.Element;\n  clearable?: boolean;\n  creatable?: boolean;\n  onCreate?: (inputValue: string, event: SelectEvent) => void;\n  virtualized?: boolean;\n  itemHeight?: number;\n  \"aria-label\"?: string;\n  id?: string;\n  ref?: Ref<HTMLSpanElement>;\n}\n\nfunction stopEvent(event: Event): void {\n  event.preventDefault();\n  event.stopPropagation();\n}\n\nexport function SelectField(props: SelectFieldProps): JSX.Element {\n  const [local] = splitProps(props, [\n    \"class\",\n    \"value\",\n    \"defaultValue\",\n    \"onChange\",\n    \"disabled\",\n    \"readOnly\",\n    \"name\",\n    \"multiple\",\n    \"menuMaxHeight\",\n    \"menuMiddleware\",\n    \"menuNoItemsMessage\",\n    \"menuContainer\",\n    \"search\",\n    \"chips\",\n    \"isFocused\",\n    \"error\",\n    \"items\",\n    \"label\",\n    \"variant\",\n    \"size\",\n    \"fullWidth\",\n    \"helperText\",\n    \"onSearch\",\n    \"resetSearch\",\n    \"isLoading\",\n    \"inline\",\n    \"endAdornment\",\n    \"hideSelectArrowIcon\",\n    \"optionRenderer\",\n    \"clearable\",\n    \"creatable\",\n    \"onCreate\",\n    \"virtualized\",\n    \"itemHeight\",\n    \"aria-label\",\n    \"id\",\n    \"ref\",\n  ]);\n\n  const variant = (): \"outlined\" | \"filled\" => local.variant ?? \"outlined\";\n  const [isOpen, setIsOpen] = createSignal(false);\n  const [valueState, setValueState] = createSignal<SelectValue | undefined>(local.defaultValue);\n  const [searchValue, setSearchValue] = createSignal(\"\");\n\n  const isControlled = local.value != null;\n  let anchorEl: HTMLSpanElement | undefined;\n  let searchWrapperEl: HTMLSpanElement | undefined;\n  let searchInputEl: HTMLInputElement | undefined;\n\n  const value = (): SelectValue | undefined => (isControlled ? local.value : valueState());\n  const isFocused = (): boolean => !!local.isFocused || isOpen();\n\n  // Selection is derived from the current value — no effect-driven sync.\n  const selectedItems = createMemo<DropdownItem[]>(() => {\n    const v = value();\n    if (Array.isArray(v)) return local.items.filter((item) => v.includes(item.value));\n    if (v === undefined || v === null || v === \"\") return [];\n    const item = local.items.find((i) => i.value === v);\n    return item ? [item] : [];\n  });\n\n  const updateValue = (event: SelectEvent, next: SelectValue | undefined): void => {\n    local.onChange?.(event, { ...props, value: next, name: local.name || undefined });\n    setValueState(next);\n  };\n\n  const onMouseDown: JSX.EventHandler<HTMLSpanElement, MouseEvent> = (event) => {\n    if (event.button !== 0) return;\n    event.preventDefault();\n    anchorEl?.focus();\n    setIsOpen(!isOpen());\n  };\n\n  const onClose = (): void => {\n    setIsOpen(false);\n    anchorEl?.focus();\n  };\n\n  const onFocus = (): void => {\n    if (local.search === true) searchInputEl?.focus();\n  };\n\n  const onKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    if (!local.readOnly && [\" \", \"ArrowUp\", \"ArrowDown\", \"Enter\"].includes(event.key)) {\n      event.preventDefault();\n      setIsOpen(!isOpen());\n    }\n  };\n\n  // Reset search text when the field loses focus / menu closes.\n  createEffect(() => {\n    if (!isFocused() || (local.search === \"menu\" && !isOpen())) {\n      setSearchValue(\"\");\n      local.resetSearch?.();\n    }\n  });\n\n  // Keep the multi-value scroller pinned to the end.\n  createEffect(() => {\n    value();\n    if (searchWrapperEl) searchWrapperEl.scrollLeft = searchWrapperEl.scrollWidth;\n  });\n\n  const onItemClick = (event: SelectEvent, item: DropdownItem): void => {\n    let next: SelectValue | undefined;\n    if (local.multiple) {\n      const current = value();\n      const valueArray = (Array.isArray(current) ? current : [current].filter(Boolean)) as Array<string | number | undefined | null>;\n      next = valueArray.slice();\n      const idx = next.findIndex((el) => el === item.value);\n      if (idx === -1) next.push(item.value);\n      else next.splice(idx, 1);\n    } else {\n      next = value() === item.value ? \"\" : item.value;\n    }\n    if (searchValue()) setSearchValue(\"\");\n    if (!local.multiple) {\n      setIsOpen(false);\n      anchorEl?.focus();\n    }\n    updateValue(event, next);\n  };\n\n  const onSearchInputChange = (event: SearchEvent): void => {\n    setSearchValue(event.currentTarget.value);\n    local.onSearch?.(event);\n    if (!isOpen()) setIsOpen(true);\n  };\n\n  const onDeleteChip = (currentValue: string | number | undefined | null) => (event: SelectEvent): void => {\n    const current = value();\n    if (Array.isArray(current)) {\n      updateValue(event, current.filter((v) => currentValue !== v));\n    }\n  };\n\n  const onResetSelected: JSX.EventHandler<HTMLSpanElement, MouseEvent> = (event) => {\n    updateValue(event, []);\n  };\n\n  const filteredItems = (): DropdownItem[] => {\n    if (local.onSearch) return local.items;\n    const sv = searchValue();\n    if (sv) return local.items.filter((el) => el.text.search(new RegExp(sv, \"i\")) !== -1);\n    return local.items;\n  };\n\n  const createOption = (): DropdownItemProps[\"createOption\"] => {\n    const sv = searchValue();\n    if (local.creatable && sv && !local.items.some((i) => i.text.toLowerCase() === sv.toLowerCase())) {\n      return {\n        text: `Создать \"${sv}\"`,\n        onCreate: (event) => {\n          local.onCreate?.(sv, event);\n          setSearchValue(\"\");\n          setIsOpen(false);\n        },\n      };\n    }\n    return undefined;\n  };\n\n  return (\n    <>\n      <TextFieldWrapper\n        label={local.label}\n        helperText={local.helperText}\n        variant={variant()}\n        disabled={local.disabled}\n        class={cn(local.class, local.size && local.size !== \"medium\" && `smwb-text-field_size-${local.size}`)}\n        error={local.error}\n        fullWidth={local.fullWidth}\n        isFilledState={!!selectedItems().length || !!searchValue()}\n        isFocused={isFocused()}\n        inline={local.inline}\n      >\n        <span\n          ref={mergeRefs(local.ref, (el) => (anchorEl = el as HTMLSpanElement))}\n          id={local.id}\n          class={cn(\"smwb-select-field\", local.class, {\n            \"smwb-select-field--filled\": variant() === \"filled\" && local.label,\n            \"smwb-select-field--disabled\": local.disabled,\n            \"smwb-select-field--search\": local.search,\n            \"smwb-select-field--inline\": local.inline,\n          })}\n          tabindex={local.disabled ? undefined : 0}\n          role=\"button\"\n          aria-haspopup=\"listbox\"\n          aria-expanded={isOpen()}\n          aria-disabled={local.disabled || undefined}\n          aria-label={local[\"aria-label\"]}\n          onMouseDown={local.disabled || local.readOnly ? undefined : onMouseDown}\n          onFocus={onFocus}\n          onKeyDown={onKeyDown}\n          data-testid=\"select-field\"\n        >\n          <span class=\"smwb-select-field__search-wrapper\" ref={(el) => (searchWrapperEl = el)}>\n            <Show\n              when={local.chips}\n              fallback={<span class=\"smwb-select-field__values\">{selectedItems().map((el) => el.text).join(\", \")}</span>}\n            >\n              <span class=\"smwb-select-field__values\">\n                <For each={selectedItems()}>\n                  {(item) => (\n                    <Chip\n                      label={item.text}\n                      size={local.size === \"small\" ? \"small\" : \"medium\"}\n                      onDelete={onDeleteChip(item.value)}\n                      onDeleteMouseDown={stopEvent}\n                    />\n                  )}\n                </For>\n              </span>\n            </Show>\n            <Show when={local.search && typeof local.search === \"boolean\" && !local.readOnly}>\n              <span class=\"smwb-select-field__search\">\n                <span class=\"smwb-select-field__search-text\">{searchValue()}</span>\n                <input\n                  class=\"smwb-select-field__search-input\"\n                  ref={(el) => (searchInputEl = el)}\n                  type=\"text\"\n                  value={searchValue()}\n                  onInput={onSearchInputChange}\n                  onMouseDown={(event) => {\n                    event.stopPropagation();\n                    setIsOpen(true);\n                  }}\n                  onKeyDown={(event) => event.stopPropagation()}\n                  data-testid=\"search-input\"\n                />\n              </span>\n            </Show>\n          </span>\n          <span class=\"smwb-select-field__actions\">\n            <Show\n              when={\n                ((Array.isArray(value()) && (value() as unknown[]).length > 0) ||\n                  (local.clearable && selectedItems().length > 0)) &&\n                !local.disabled\n              }\n            >\n              <Icon\n                name=\"close\"\n                size={20}\n                onClick={onResetSelected}\n                onMouseDown={stopEvent}\n                class={cn(\"smwb-select-field__icon\", \"smwb-select-field__icon--close\")}\n                aria-label=\"Clear selection\"\n                role=\"button\"\n              />\n            </Show>\n            {local.endAdornment}\n            <Show when={!local.hideSelectArrowIcon}>\n              <Icon\n                name=\"arrow_drop_down\"\n                class={cn(\"smwb-select-field__icon\", \"smwb-select-field__icon--arrow\", {\n                  \"smwb-select-field__icon--opened\": isOpen(),\n                  \"smwb-select-field__icon--focused\": isFocused(),\n                  \"smwb-select-field__icon--error\": local.error,\n                })}\n              />\n            </Show>\n          </span>\n        </span>\n      </TextFieldWrapper>\n      <DropdownMenu\n        anchorElement={() => anchorEl ?? null}\n        menuMaxHeight={local.menuMaxHeight}\n        menuMiddleware={local.menuMiddleware}\n        search={local.search === \"menu\"}\n        onSearchInputChange={onSearchInputChange}\n        optionRenderer={local.optionRenderer}\n        items={filteredItems()}\n        searchValue={searchValue()}\n        isOpen={isOpen()}\n        onClose={onClose}\n        onItemClick={onItemClick}\n        value={value()}\n        isLoading={local.isLoading}\n        menuNoItemsMessage={local.menuNoItemsMessage}\n        container={local.menuContainer}\n        virtualized={local.virtualized}\n        itemHeight={local.itemHeight}\n        createOption={createOption()}\n      />\n    </>\n  );\n}\n\nexport default SelectField;\n"],"mappings":"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","names":["item"],"file":"selectField.jsx"}

package/dist/headless/source/components/inputs/textField/textField.jsx

@@ -1,4 +1,4 @@
-import { createEffect, createSignal, mergeProps, onMount, splitProps } from "solid-js";
+import { children, createEffect, createSignal, mergeProps, onMount, splitProps } from "solid-js";
 import cn from "clsx";
 import { isFilled } from "./utils";
 import { TextFieldWrapper } from "./textFieldWrapper";
@@ -83,11 +83,13 @@ function TextField(props) {
       checkDirty({ value: local.value });
     }
   });
+  const startAdornment = children(() => local.startAdornment);
+  const endAdornment = children(() => local.endAdornment);
   const inputClasses = () => cn(
     "smwb-text-field__input",
     (!local.label || local.inline) && "smwb-text-field__input--show-placeholder",
-    local.startAdornment && "smwb-text-field__input--adornment-start",
-    local.endAdornment && "smwb-text-field__input--adornment-end",
+    startAdornment() && "smwb-text-field__input--adornment-start",
+    endAdornment() && "smwb-text-field__input--adornment-end",
     local.inline && "smwb-text-field__input--inline"
   );
   return <TextFieldWrapper
@@ -101,10 +103,10 @@ function TextField(props) {
     isFilledState={isFilledState()}
     isFocused={isFocused()}
     for={local.id}
-    shrink={Boolean(local.startAdornment)}
+    shrink={Boolean(startAdornment())}
     onHolderMouseDown={onHolderMouseDown}
-    startAdornment={local.startAdornment}
-    endAdornment={local.endAdornment}
+    startAdornment={startAdornment()}
+    endAdornment={endAdornment()}
     inline={local.inline}
   >
       <input

package/dist/headless/source/components/inputs/textField/textField.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/inputs/textField/textField.tsx"],"sourcesContent":["import { type JSX, createEffect, createSignal, mergeProps, onMount, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { isFilled } from \"./utils\";\nimport { TextFieldWrapper } from \"./textFieldWrapper\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\ntype FocusEvt = FocusEvent & { currentTarget: HTMLInputElement; target: Element };\ntype InputEvt = InputEvent & { currentTarget: HTMLInputElement; target: Element };\n\nexport interface TextFieldProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"onBlur\" | \"size\"> {\n  label?: string | undefined;\n  helperText?: JSX.Element;\n  variant?: \"outlined\" | \"filled\";\n  size?: \"small\" | \"medium\" | \"large\";\n  required?: boolean;\n  disabled?: boolean | undefined;\n  value?: string | number | undefined;\n  placeholder?: string;\n  defaultValue?: string;\n  error?: boolean;\n  name?: string;\n  type?: string;\n  readOnly?: boolean;\n  fullWidth?: boolean;\n  onBlur?: (event: FocusEvt, data: TextFieldProps) => void;\n  onChange?: (event: InputEvt, data: TextFieldProps) => void;\n  startAdornment?: JSX.Element;\n  endAdornment?: JSX.Element;\n  id?: string;\n  inline?: boolean;\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport function TextField(props: TextFieldProps): JSX.Element {\n  const merged = mergeProps({ variant: \"outlined\" as const, size: \"medium\" as const, type: \"text\" }, props);\n  const [local, rest] = splitProps(merged, [\n    \"label\",\n    \"helperText\",\n    \"variant\",\n    \"size\",\n    \"required\",\n    \"class\",\n    \"disabled\",\n    \"value\",\n    \"defaultValue\",\n    \"onChange\",\n    \"onFocus\",\n    \"onBlur\",\n    \"error\",\n    \"name\",\n    \"type\",\n    \"readOnly\",\n    \"placeholder\",\n    \"fullWidth\",\n    \"id\",\n    \"startAdornment\",\n    \"endAdornment\",\n    \"inline\",\n    \"autocomplete\",\n    \"inputmode\",\n    \"ref\",\n  ]);\n\n  const [isFocused, setIsFocused] = createSignal(false);\n  const [isFilledState, setIsFilledState] = createSignal(false);\n\n  // One-time snapshot of controlled-ness, matching the React useRef behaviour.\n  const isControlled = local.value != null;\n  let inputEl: HTMLInputElement | undefined;\n\n  const checkDirty = (obj: Parameters<typeof isFilled>[0]): void => {\n    const filled = isFilled(obj);\n    setIsFilledState((prev) => (prev === filled ? prev : filled));\n  };\n\n  const onFocus = (event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }): void => {\n    if (local.disabled) {\n      event.stopPropagation();\n      return;\n    }\n    // local.onFocus is Solid's FocusEventHandlerUnion (function or [handler, data]).\n    const handler = local.onFocus as unknown;\n    if (typeof handler === \"function\") {\n      (handler as (e: typeof event) => void)(event);\n    } else if (Array.isArray(handler)) {\n      (handler[0] as (data: unknown, e: typeof event) => void)(handler[1], event);\n    }\n    setIsFocused(true);\n  };\n\n  const onBlur: JSX.EventHandler<HTMLInputElement, FocusEvent> = (event) => {\n    if (!isControlled) {\n      checkDirty({ value: event.currentTarget.value });\n    }\n    local.onBlur?.(event as FocusEvt, props);\n    setIsFocused(false);\n  };\n\n  const onInput: JSX.EventHandler<HTMLInputElement, InputEvent> = (event) => {\n    if (!isControlled) {\n      checkDirty({ value: event.currentTarget.value });\n    }\n    local.onChange?.(event as InputEvt, props);\n  };\n\n  const onHolderMouseDown: JSX.EventHandler<HTMLDivElement, MouseEvent> = (event) => {\n    if (inputEl && event.currentTarget === event.target) {\n      event.preventDefault();\n      inputEl.focus();\n    }\n  };\n\n  createEffect(() => {\n    if (local.disabled && isFocused()) {\n      setIsFocused(false);\n    }\n  });\n\n  onMount(() => checkDirty(inputEl ? { value: inputEl.value } : null));\n\n  createEffect(() => {\n    if (isControlled) {\n      checkDirty({ value: local.value });\n    }\n  });\n\n  const inputClasses = (): string =>\n    cn(\n      \"smwb-text-field__input\",\n      (!local.label || local.inline) && \"smwb-text-field__input--show-placeholder\",\n      local.startAdornment && \"smwb-text-field__input--adornment-start\",\n      local.endAdornment && \"smwb-text-field__input--adornment-end\",\n      local.inline && \"smwb-text-field__input--inline\"\n    );\n\n  return (\n    <TextFieldWrapper\n      label={local.label}\n      helperText={local.helperText}\n      variant={local.variant}\n      disabled={local.disabled}\n      class={cn(local.class, local.size !== \"medium\" && `smwb-text-field_size-${local.size}`)}\n      error={local.error}\n      fullWidth={local.fullWidth}\n      isFilledState={isFilledState()}\n      isFocused={isFocused()}\n      for={local.id}\n      shrink={Boolean(local.startAdornment)}\n      onHolderMouseDown={onHolderMouseDown}\n      startAdornment={local.startAdornment}\n      endAdornment={local.endAdornment}\n      inline={local.inline}\n    >\n      <input\n        {...rest}\n        type={local.type}\n        name={local.name}\n        readonly={local.readOnly}\n        required={local.required}\n        aria-invalid={local.error || undefined}\n        aria-required={local.required || undefined}\n        placeholder={local.placeholder}\n        disabled={local.disabled}\n        value={isControlled ? local.value : (local.defaultValue ?? \"\")}\n        class={inputClasses()}\n        ref={mergeRefs(local.ref, (el) => (inputEl = el))}\n        onInput={onInput}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        id={local.id}\n        autocomplete={local.autocomplete}\n        inputmode={local.inputmode}\n      />\n    </TextFieldWrapper>\n  );\n}\n\nexport default TextField;\n"],"mappings":"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","names":[],"file":"textField.jsx"}
+{"version":3,"sources":["../../../../../../src/components/inputs/textField/textField.tsx"],"sourcesContent":["import { type JSX, children, createEffect, createSignal, mergeProps, onMount, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { isFilled } from \"./utils\";\nimport { TextFieldWrapper } from \"./textFieldWrapper\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\ntype FocusEvt = FocusEvent & { currentTarget: HTMLInputElement; target: Element };\ntype InputEvt = InputEvent & { currentTarget: HTMLInputElement; target: Element };\n\nexport interface TextFieldProps extends Omit<JSX.InputHTMLAttributes<HTMLInputElement>, \"onChange\" | \"onBlur\" | \"size\"> {\n  label?: string | undefined;\n  helperText?: JSX.Element;\n  variant?: \"outlined\" | \"filled\";\n  size?: \"small\" | \"medium\" | \"large\";\n  required?: boolean;\n  disabled?: boolean | undefined;\n  value?: string | number | undefined;\n  placeholder?: string;\n  defaultValue?: string;\n  error?: boolean;\n  name?: string;\n  type?: string;\n  readOnly?: boolean;\n  fullWidth?: boolean;\n  onBlur?: (event: FocusEvt, data: TextFieldProps) => void;\n  onChange?: (event: InputEvt, data: TextFieldProps) => void;\n  startAdornment?: JSX.Element;\n  endAdornment?: JSX.Element;\n  id?: string;\n  inline?: boolean;\n  ref?: Ref<HTMLInputElement>;\n}\n\nexport function TextField(props: TextFieldProps): JSX.Element {\n  const merged = mergeProps({ variant: \"outlined\" as const, size: \"medium\" as const, type: \"text\" }, props);\n  const [local, rest] = splitProps(merged, [\n    \"label\",\n    \"helperText\",\n    \"variant\",\n    \"size\",\n    \"required\",\n    \"class\",\n    \"disabled\",\n    \"value\",\n    \"defaultValue\",\n    \"onChange\",\n    \"onFocus\",\n    \"onBlur\",\n    \"error\",\n    \"name\",\n    \"type\",\n    \"readOnly\",\n    \"placeholder\",\n    \"fullWidth\",\n    \"id\",\n    \"startAdornment\",\n    \"endAdornment\",\n    \"inline\",\n    \"autocomplete\",\n    \"inputmode\",\n    \"ref\",\n  ]);\n\n  const [isFocused, setIsFocused] = createSignal(false);\n  const [isFilledState, setIsFilledState] = createSignal(false);\n\n  // One-time snapshot of controlled-ness, matching the React useRef behaviour.\n  const isControlled = local.value != null;\n  let inputEl: HTMLInputElement | undefined;\n\n  const checkDirty = (obj: Parameters<typeof isFilled>[0]): void => {\n    const filled = isFilled(obj);\n    setIsFilledState((prev) => (prev === filled ? prev : filled));\n  };\n\n  const onFocus = (event: FocusEvent & { currentTarget: HTMLInputElement; target: HTMLInputElement }): void => {\n    if (local.disabled) {\n      event.stopPropagation();\n      return;\n    }\n    // local.onFocus is Solid's FocusEventHandlerUnion (function or [handler, data]).\n    const handler = local.onFocus as unknown;\n    if (typeof handler === \"function\") {\n      (handler as (e: typeof event) => void)(event);\n    } else if (Array.isArray(handler)) {\n      (handler[0] as (data: unknown, e: typeof event) => void)(handler[1], event);\n    }\n    setIsFocused(true);\n  };\n\n  const onBlur: JSX.EventHandler<HTMLInputElement, FocusEvent> = (event) => {\n    if (!isControlled) {\n      checkDirty({ value: event.currentTarget.value });\n    }\n    local.onBlur?.(event as FocusEvt, props);\n    setIsFocused(false);\n  };\n\n  const onInput: JSX.EventHandler<HTMLInputElement, InputEvent> = (event) => {\n    if (!isControlled) {\n      checkDirty({ value: event.currentTarget.value });\n    }\n    local.onChange?.(event as InputEvt, props);\n  };\n\n  const onHolderMouseDown: JSX.EventHandler<HTMLDivElement, MouseEvent> = (event) => {\n    if (inputEl && event.currentTarget === event.target) {\n      event.preventDefault();\n      inputEl.focus();\n    }\n  };\n\n  createEffect(() => {\n    if (local.disabled && isFocused()) {\n      setIsFocused(false);\n    }\n  });\n\n  onMount(() => checkDirty(inputEl ? { value: inputEl.value } : null));\n\n  createEffect(() => {\n    if (isControlled) {\n      checkDirty({ value: local.value });\n    }\n  });\n\n  // Read each slot once: markup passed as a prop is created anew on every read,\n  // and during hydration a copy the server never rendered has no DOM node.\n  const startAdornment = children(() => local.startAdornment);\n  const endAdornment = children(() => local.endAdornment);\n\n  const inputClasses = (): string =>\n    cn(\n      \"smwb-text-field__input\",\n      (!local.label || local.inline) && \"smwb-text-field__input--show-placeholder\",\n      startAdornment() && \"smwb-text-field__input--adornment-start\",\n      endAdornment() && \"smwb-text-field__input--adornment-end\",\n      local.inline && \"smwb-text-field__input--inline\"\n    );\n\n  return (\n    <TextFieldWrapper\n      label={local.label}\n      helperText={local.helperText}\n      variant={local.variant}\n      disabled={local.disabled}\n      class={cn(local.class, local.size !== \"medium\" && `smwb-text-field_size-${local.size}`)}\n      error={local.error}\n      fullWidth={local.fullWidth}\n      isFilledState={isFilledState()}\n      isFocused={isFocused()}\n      for={local.id}\n      shrink={Boolean(startAdornment())}\n      onHolderMouseDown={onHolderMouseDown}\n      startAdornment={startAdornment()}\n      endAdornment={endAdornment()}\n      inline={local.inline}\n    >\n      <input\n        {...rest}\n        type={local.type}\n        name={local.name}\n        readonly={local.readOnly}\n        required={local.required}\n        aria-invalid={local.error || undefined}\n        aria-required={local.required || undefined}\n        placeholder={local.placeholder}\n        disabled={local.disabled}\n        value={isControlled ? local.value : (local.defaultValue ?? \"\")}\n        class={inputClasses()}\n        ref={mergeRefs(local.ref, (el) => (inputEl = el))}\n        onInput={onInput}\n        onFocus={onFocus}\n        onBlur={onBlur}\n        id={local.id}\n        autocomplete={local.autocomplete}\n        inputmode={local.inputmode}\n      />\n    </TextFieldWrapper>\n  );\n}\n\nexport default TextField;\n"],"mappings":"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","names":[],"file":"textField.jsx"}

package/dist/headless/source/components/inputs/textField/textFieldAdornment.jsx

@@ -1,4 +1,4 @@
-import { splitProps } from "solid-js";
+import { children, splitProps } from "solid-js";
 import cn from "clsx";
 function TextFieldAdornment(props) {
   const [local] = splitProps(props, [
@@ -9,6 +9,7 @@ function TextFieldAdornment(props) {
     "disablePointerEvents",
     "inline"
   ]);
+  const content = children(() => local.children);
   return <span
     class={cn(
       "smwb-text-field__adornment",
@@ -17,10 +18,10 @@ function TextFieldAdornment(props) {
       local.position === "end" && "smwb-text-field__adornment--end",
       local.disablePointerEvents && "smwb-text-field__adornment--disable-pointer",
       !local.inline && local.variant === "filled" && "smwb-text-field__adornment--filled",
-      typeof local.children === "string" && "smwb-text-field__adornment--text"
+      typeof content() === "string" && "smwb-text-field__adornment--text"
     )}
   >
-      {local.children}
+      {content()}
     </span>;
 }
 var textFieldAdornment_default = TextFieldAdornment;

package/dist/headless/source/components/inputs/textField/textFieldAdornment.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/inputs/textField/textFieldAdornment.tsx"],"sourcesContent":["import { type JSX, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport type { TextFieldVariant } from \"./types\";\n\nexport interface TextFieldAdornmentProps {\n  position?: \"start\" | \"end\";\n  disablePointerEvents?: boolean;\n  variant?: TextFieldVariant | undefined;\n  inline?: boolean;\n  class?: string;\n  children?: JSX.Element;\n}\n\nexport function TextFieldAdornment(props: TextFieldAdornmentProps): JSX.Element {\n  const [local] = splitProps(props, [\n    \"position\",\n    \"variant\",\n    \"children\",\n    \"class\",\n    \"disablePointerEvents\",\n    \"inline\",\n  ]);\n\n  return (\n    <span\n      class={cn(\n        \"smwb-text-field__adornment\",\n        local.class,\n        local.position === \"start\" && \"smwb-text-field__adornment--start\",\n        local.position === \"end\" && \"smwb-text-field__adornment--end\",\n        local.disablePointerEvents && \"smwb-text-field__adornment--disable-pointer\",\n        !local.inline && local.variant === \"filled\" && \"smwb-text-field__adornment--filled\",\n        typeof local.children === \"string\" && \"smwb-text-field__adornment--text\"\n      )}\n    >\n      {local.children}\n    </span>\n  );\n}\n\nexport default TextFieldAdornment;\n"],"mappings":"AAAA,SAAmB,kBAAkB;AACrC,OAAO,QAAQ;AAYR,SAAS,mBAAmB,OAA6C;AAC9E,QAAM,CAAC,KAAK,IAAI,WAAW,OAAO;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,CAAC;AAAA,IACC,OAAO;AAAA,MACL;AAAA,MACA,MAAM;AAAA,MACN,MAAM,aAAa,WAAW;AAAA,MAC9B,MAAM,aAAa,SAAS;AAAA,MAC5B,MAAM,wBAAwB;AAAA,MAC9B,CAAC,MAAM,UAAU,MAAM,YAAY,YAAY;AAAA,MAC/C,OAAO,MAAM,aAAa,YAAY;AAAA,IACxC;AAAA,GACD;AAAA,OACE,MAAM,SAAS;AAAA,IAClB,EAZC;AAcL;AAEA,IAAO,6BAAQ;","names":[],"file":"textFieldAdornment.jsx"}
+{"version":3,"sources":["../../../../../../src/components/inputs/textField/textFieldAdornment.tsx"],"sourcesContent":["import { type JSX, children, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport type { TextFieldVariant } from \"./types\";\n\nexport interface TextFieldAdornmentProps {\n  position?: \"start\" | \"end\";\n  disablePointerEvents?: boolean;\n  variant?: TextFieldVariant | undefined;\n  inline?: boolean;\n  class?: string;\n  children?: JSX.Element;\n}\n\nexport function TextFieldAdornment(props: TextFieldAdornmentProps): JSX.Element {\n  const [local] = splitProps(props, [\n    \"position\",\n    \"variant\",\n    \"children\",\n    \"class\",\n    \"disablePointerEvents\",\n    \"inline\",\n  ]);\n\n  // Read once: markup passed as children is created anew on every read, and\n  // during hydration a copy the server never rendered has no DOM node.\n  const content = children(() => local.children);\n\n  return (\n    <span\n      class={cn(\n        \"smwb-text-field__adornment\",\n        local.class,\n        local.position === \"start\" && \"smwb-text-field__adornment--start\",\n        local.position === \"end\" && \"smwb-text-field__adornment--end\",\n        local.disablePointerEvents && \"smwb-text-field__adornment--disable-pointer\",\n        !local.inline && local.variant === \"filled\" && \"smwb-text-field__adornment--filled\",\n        typeof content() === \"string\" && \"smwb-text-field__adornment--text\"\n      )}\n    >\n      {content()}\n    </span>\n  );\n}\n\nexport default TextFieldAdornment;\n"],"mappings":"AAAA,SAAmB,UAAU,kBAAkB;AAC/C,OAAO,QAAQ;AAYR,SAAS,mBAAmB,OAA6C;AAC9E,QAAM,CAAC,KAAK,IAAI,WAAW,OAAO;AAAA,IAChC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAID,QAAM,UAAU,SAAS,MAAM,MAAM,QAAQ;AAE7C,SACE,CAAC;AAAA,IACC,OAAO;AAAA,MACL;AAAA,MACA,MAAM;AAAA,MACN,MAAM,aAAa,WAAW;AAAA,MAC9B,MAAM,aAAa,SAAS;AAAA,MAC5B,MAAM,wBAAwB;AAAA,MAC9B,CAAC,MAAM,UAAU,MAAM,YAAY,YAAY;AAAA,MAC/C,OAAO,QAAQ,MAAM,YAAY;AAAA,IACnC;AAAA,GACD;AAAA,OACE,QAAQ,EAAE;AAAA,IACb,EAZC;AAcL;AAEA,IAAO,6BAAQ;","names":[],"file":"textFieldAdornment.jsx"}

package/dist/headless/source/components/inputs/textField/textFieldWrapper.jsx

@@ -1,4 +1,4 @@
-import { Show, splitProps } from "solid-js";
+import { Show, children, splitProps } from "solid-js";
 import cn from "clsx";
 import { TextFieldAdornment } from "./textFieldAdornment";
 function TextFieldWrapper(props) {
@@ -20,7 +20,10 @@ function TextFieldWrapper(props) {
     "endAdornment",
     "inline"
   ]);
-  const helperText = () => local.helperText ?? "\xA0";
+  const helper = children(() => local.inline ? void 0 : local.helperText);
+  const startAdornment = children(() => local.startAdornment);
+  const endAdornment = children(() => local.endAdornment);
+  const helperText = () => helper() ?? "\xA0";
   const isFilledVariant = () => local.variant === "filled";
   const isNotchedActive = () => !!local.label && (!!local.isFilledState || !!local.isFocused || !!local.shrink);
   return <div
@@ -44,14 +47,14 @@ function TextFieldWrapper(props) {
         </label>
       </Show>
       <div class="smwb-text-field__input-holder" onMouseDown={local.onHolderMouseDown}>
-        <Show when={local.startAdornment}>
+        <Show when={startAdornment()}>
           <TextFieldAdornment variant={local.variant} inline={Boolean(local.inline)} position="start">
-            {local.startAdornment}
+            {startAdornment()}
           </TextFieldAdornment>
         </Show>
         {local.children}
-        <Show when={local.endAdornment}>
-          <TextFieldAdornment position="end">{local.endAdornment}</TextFieldAdornment>
+        <Show when={endAdornment()}>
+          <TextFieldAdornment position="end">{endAdornment()}</TextFieldAdornment>
         </Show>
         <Show when={!local.inline && local.variant === "outlined"}>
           <fieldset

package/dist/headless/source/components/inputs/textField/textFieldWrapper.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/inputs/textField/textFieldWrapper.tsx"],"sourcesContent":["import { type JSX, Show, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { TextFieldAdornment } from \"./textFieldAdornment\";\nimport type { TextFieldVariant } from \"./types\";\n\nexport interface TextFieldWrapperProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  label?: string | undefined;\n  helperText?: JSX.Element;\n  variant?: TextFieldVariant | undefined;\n  disabled?: boolean | undefined;\n  error?: boolean | undefined;\n  fullWidth?: boolean | undefined;\n  isFilledState?: boolean | undefined;\n  isFocused?: boolean | undefined;\n  for?: string | undefined;\n  shrink?: boolean | undefined;\n  onHolderMouseDown?: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent>;\n  startAdornment?: JSX.Element;\n  endAdornment?: JSX.Element;\n  inline?: boolean | undefined;\n  children?: JSX.Element;\n}\n\nexport function TextFieldWrapper(props: TextFieldWrapperProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"label\",\n    \"helperText\",\n    \"variant\",\n    \"disabled\",\n    \"class\",\n    \"error\",\n    \"fullWidth\",\n    \"isFilledState\",\n    \"isFocused\",\n    \"for\",\n    \"shrink\",\n    \"children\",\n    \"onHolderMouseDown\",\n    \"startAdornment\",\n    \"endAdornment\",\n    \"inline\",\n  ]);\n\n  const helperText = (): JSX.Element => local.helperText ?? \" \";\n  const isFilledVariant = (): boolean => local.variant === \"filled\";\n  const isNotchedActive = (): boolean =>\n    !!local.label && (!!local.isFilledState || !!local.isFocused || !!local.shrink);\n\n  return (\n    <div\n      {...rest}\n      class={cn(local.class, \"smwb-text-field\", {\n        \"smwb-text-field--filled\": !local.inline && isFilledVariant(),\n        \"smwb-text-field--inline\": local.inline,\n        \"smwb-text-field--focused\": !local.inline && local.isFocused,\n        \"smwb-text-field--error\": local.error,\n        \"smwb-text-field--disabled\": local.disabled,\n        \"smwb-text-field--full-width\": local.fullWidth,\n      })}\n      data-testid=\"text-field\"\n    >\n      <Show when={!local.inline && local.label}>\n        <label\n          class={cn(\"smwb-text-field__label\", { \"smwb-text-field__label--shrink\": isNotchedActive() })}\n          for={local.for || \"\"}\n        >\n          {local.label}\n        </label>\n      </Show>\n      <div class=\"smwb-text-field__input-holder\" onMouseDown={local.onHolderMouseDown}>\n        <Show when={local.startAdornment}>\n          <TextFieldAdornment variant={local.variant} inline={Boolean(local.inline)} position=\"start\">\n            {local.startAdornment}\n          </TextFieldAdornment>\n        </Show>\n        {local.children}\n        <Show when={local.endAdornment}>\n          <TextFieldAdornment position=\"end\">{local.endAdornment}</TextFieldAdornment>\n        </Show>\n        <Show when={!local.inline && local.variant === \"outlined\"}>\n          <fieldset\n            class={cn(\"smwb-text-field__notched\", {\n              \"smwb-text-field__notched--with-label\": local.label,\n              \"smwb-text-field__notched--active\": isNotchedActive(),\n            })}\n          >\n            <legend>\n              <Show when={local.label} fallback={<span class=\"smwb-notranslate\">&#8203;</span>}>\n                <span>{local.label}</span>\n              </Show>\n            </legend>\n          </fieldset>\n        </Show>\n      </div>\n      <Show when={!local.inline && helperText()}>\n        <p class=\"smwb-text-field__helper-line\">\n          <span class=\"smwb-text-field__helper-text\">{helperText()}</span>\n        </p>\n      </Show>\n    </div>\n  );\n}\n\nexport default TextFieldWrapper;\n"],"mappings":"AAAA,SAAmB,MAAM,kBAAkB;AAC3C,OAAO,QAAQ;AACf,SAAS,0BAA0B;AAqB5B,SAAS,iBAAiB,OAA2C;AAC1E,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,OAAO;AAAA,IACtC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,aAAa,MAAmB,MAAM,cAAc;AAC1D,QAAM,kBAAkB,MAAe,MAAM,YAAY;AACzD,QAAM,kBAAkB,MACtB,CAAC,CAAC,MAAM,UAAU,CAAC,CAAC,MAAM,iBAAiB,CAAC,CAAC,MAAM,aAAa,CAAC,CAAC,MAAM;AAE1E,SACE,CAAC;AAAA,QACK;AAAA,IACJ,OAAO,GAAG,MAAM,OAAO,mBAAmB;AAAA,MACxC,2BAA2B,CAAC,MAAM,UAAU,gBAAgB;AAAA,MAC5D,2BAA2B,MAAM;AAAA,MACjC,4BAA4B,CAAC,MAAM,UAAU,MAAM;AAAA,MACnD,0BAA0B,MAAM;AAAA,MAChC,6BAA6B,MAAM;AAAA,MACnC,+BAA+B,MAAM;AAAA,IACvC,CAAC;AAAA,IACD,YAAY;AAAA,GACb;AAAA,MACC,CAAC,KAAK,MAAM,CAAC,MAAM,UAAU,MAAM,OAAO;AAAA,QACxC,CAAC;AAAA,IACC,OAAO,GAAG,0BAA0B,EAAE,kCAAkC,gBAAgB,EAAE,CAAC;AAAA,IAC3F,KAAK,MAAM,OAAO;AAAA,GACnB;AAAA,WACE,MAAM,MAAM;AAAA,QACf,EALC,MAKO;AAAA,MACV,EAPC,KAOM;AAAA,MACP,CAAC,IAAI,MAAM,gCAAgC,aAAa,MAAM,mBAAmB;AAAA,QAC/E,CAAC,KAAK,MAAM,MAAM,gBAAgB;AAAA,UAChC,CAAC,mBAAmB,SAAS,MAAM,SAAS,QAAQ,QAAQ,MAAM,MAAM,GAAG,SAAS,QAAQ;AAAA,aACzF,MAAM,eAAe;AAAA,UACxB,EAFC,mBAEoB;AAAA,QACvB,EAJC,KAIM;AAAA,SACN,MAAM,SAAS;AAAA,QAChB,CAAC,KAAK,MAAM,MAAM,cAAc;AAAA,UAC9B,CAAC,mBAAmB,SAAS,OAAO,MAAM,aAAa,EAAtD,mBAA2E;AAAA,QAC9E,EAFC,KAEM;AAAA,QACP,CAAC,KAAK,MAAM,CAAC,MAAM,UAAU,MAAM,YAAY,YAAY;AAAA,UACzD,CAAC;AAAA,IACC,OAAO,GAAG,4BAA4B;AAAA,MACpC,wCAAwC,MAAM;AAAA,MAC9C,oCAAoC,gBAAgB;AAAA,IACtD,CAAC;AAAA,GACF;AAAA,YACC,CAAC,OAAO;AAAA,cACN,CAAC,KAAK,MAAM,MAAM,OAAO,UAAU,CAAC,KAAK,MAAM,mBAAmB,OAAO,EAArC,OAA8C;AAAA,gBAChF,CAAC,MAAM,MAAM,MAAM,EAAlB,KAAyB;AAAA,cAC5B,EAFC,KAEM;AAAA,YACT,EAJC,OAIQ;AAAA,UACX,EAXC,SAWU;AAAA,QACb,EAbC,KAaM;AAAA,MACT,EAxBC,IAwBK;AAAA,MACN,CAAC,KAAK,MAAM,CAAC,MAAM,UAAU,WAAW,GAAG;AAAA,QACzC,CAAC,EAAE,MAAM,+BAA+B;AAAA,UACtC,CAAC,KAAK,MAAM,gCAAgC,WAAW,EAAE,EAAxD,KAA+D;AAAA,QAClE,EAFC,EAEG;AAAA,MACN,EAJC,KAIM;AAAA,IACT,EAlDC;AAoDL;AAEA,IAAO,2BAAQ;","names":[],"file":"textFieldWrapper.jsx"}
+{"version":3,"sources":["../../../../../../src/components/inputs/textField/textFieldWrapper.tsx"],"sourcesContent":["import { type JSX, Show, children, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { TextFieldAdornment } from \"./textFieldAdornment\";\nimport type { TextFieldVariant } from \"./types\";\n\nexport interface TextFieldWrapperProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  label?: string | undefined;\n  helperText?: JSX.Element;\n  variant?: TextFieldVariant | undefined;\n  disabled?: boolean | undefined;\n  error?: boolean | undefined;\n  fullWidth?: boolean | undefined;\n  isFilledState?: boolean | undefined;\n  isFocused?: boolean | undefined;\n  for?: string | undefined;\n  shrink?: boolean | undefined;\n  onHolderMouseDown?: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent>;\n  startAdornment?: JSX.Element;\n  endAdornment?: JSX.Element;\n  inline?: boolean | undefined;\n  children?: JSX.Element;\n}\n\nexport function TextFieldWrapper(props: TextFieldWrapperProps): JSX.Element {\n  const [local, rest] = splitProps(props, [\n    \"label\",\n    \"helperText\",\n    \"variant\",\n    \"disabled\",\n    \"class\",\n    \"error\",\n    \"fullWidth\",\n    \"isFilledState\",\n    \"isFocused\",\n    \"for\",\n    \"shrink\",\n    \"children\",\n    \"onHolderMouseDown\",\n    \"startAdornment\",\n    \"endAdornment\",\n    \"inline\",\n  ]);\n\n  // Read each slot once: markup passed as a prop is created anew on every read,\n  // and during hydration a copy the server never rendered has no DOM node.\n  // The helper text is read only where it is drawn: not for an inline field.\n  const helper = children(() => (local.inline ? undefined : local.helperText));\n  const startAdornment = children(() => local.startAdornment);\n  const endAdornment = children(() => local.endAdornment);\n  const helperText = (): JSX.Element => helper() ?? \" \";\n  const isFilledVariant = (): boolean => local.variant === \"filled\";\n  const isNotchedActive = (): boolean =>\n    !!local.label && (!!local.isFilledState || !!local.isFocused || !!local.shrink);\n\n  return (\n    <div\n      {...rest}\n      class={cn(local.class, \"smwb-text-field\", {\n        \"smwb-text-field--filled\": !local.inline && isFilledVariant(),\n        \"smwb-text-field--inline\": local.inline,\n        \"smwb-text-field--focused\": !local.inline && local.isFocused,\n        \"smwb-text-field--error\": local.error,\n        \"smwb-text-field--disabled\": local.disabled,\n        \"smwb-text-field--full-width\": local.fullWidth,\n      })}\n      data-testid=\"text-field\"\n    >\n      <Show when={!local.inline && local.label}>\n        <label\n          class={cn(\"smwb-text-field__label\", { \"smwb-text-field__label--shrink\": isNotchedActive() })}\n          for={local.for || \"\"}\n        >\n          {local.label}\n        </label>\n      </Show>\n      <div class=\"smwb-text-field__input-holder\" onMouseDown={local.onHolderMouseDown}>\n        <Show when={startAdornment()}>\n          <TextFieldAdornment variant={local.variant} inline={Boolean(local.inline)} position=\"start\">\n            {startAdornment()}\n          </TextFieldAdornment>\n        </Show>\n        {local.children}\n        <Show when={endAdornment()}>\n          <TextFieldAdornment position=\"end\">{endAdornment()}</TextFieldAdornment>\n        </Show>\n        <Show when={!local.inline && local.variant === \"outlined\"}>\n          <fieldset\n            class={cn(\"smwb-text-field__notched\", {\n              \"smwb-text-field__notched--with-label\": local.label,\n              \"smwb-text-field__notched--active\": isNotchedActive(),\n            })}\n          >\n            <legend>\n              <Show when={local.label} fallback={<span class=\"smwb-notranslate\">&#8203;</span>}>\n                <span>{local.label}</span>\n              </Show>\n            </legend>\n          </fieldset>\n        </Show>\n      </div>\n      <Show when={!local.inline && helperText()}>\n        <p class=\"smwb-text-field__helper-line\">\n          <span class=\"smwb-text-field__helper-text\">{helperText()}</span>\n        </p>\n      </Show>\n    </div>\n  );\n}\n\nexport default TextFieldWrapper;\n"],"mappings":"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","names":[],"file":"textFieldWrapper.jsx"}

package/dist/headless/source/components/inputs/valueSlider/valueSlider.jsx

@@ -1,4 +1,4 @@
-import { Show, splitProps } from "solid-js";
+import { Show, children, splitProps } from "solid-js";
 import cn from "clsx";
 import { Slider } from "../slider";
 const formatReadout = (readout, value) => {
@@ -15,8 +15,9 @@ function ValueSlider(props) {
     "label",
     "class"
   ]);
+  const endAdornment = children(() => local.endAdornment);
   const hasReadout = () => local.readout !== void 0 && local.readout !== false;
-  const showHeader = () => local.label != null || hasReadout() || local.endAdornment != null || local.onReset != null;
+  const showHeader = () => local.label != null || hasReadout() || endAdornment() != null || local.onReset != null;
   return <div class={cn("smwb-value-slider", local.class)}>
       <Show when={showHeader()}>
         <div class="smwb-value-slider__header">
@@ -27,7 +28,7 @@ function ValueSlider(props) {
           <Show when={hasReadout()}>
             <span class="smwb-value-slider__readout">{formatReadout(local.readout, sliderProps.value)}</span>
           </Show>
-          {local.endAdornment}
+          {endAdornment()}
           <Show when={local.onReset != null}>
             <button
     type="button"

package/dist/headless/source/components/inputs/valueSlider/valueSlider.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/inputs/valueSlider/valueSlider.tsx"],"sourcesContent":["import { type JSX, Show, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Slider, type SliderProps, type SliderValue } from \"../slider\";\n\nexport interface ValueSliderProps extends SliderProps {\n  /**\n   * Read-only value readout beside the label. `true` shows the raw value; pass a\n   * formatter for units/precision (e.g. `(v) => `${v}%``). Reflects `props.value`.\n   */\n  readout?: boolean | ((value: SliderValue | undefined) => string);\n  /** Content at the end of the header row — a reset button, a favourite star, etc. */\n  endAdornment?: JSX.Element;\n  /** Renders a built-in reset control in the header; called on click. */\n  onReset?: () => void;\n  /** Accessible label for the reset control. */\n  resetLabel?: string;\n}\n\nconst formatReadout = (\n  readout: ValueSliderProps[\"readout\"],\n  value: SliderValue | undefined,\n): string => {\n  if (typeof readout === \"function\") return readout(value);\n  if (Array.isArray(value)) return `${value[0]} – ${value[1]}`;\n  return value == null ? \"\" : String(value);\n};\n\n/**\n * `Slider` plus the value-readout + adornment header row every app rebuilds: a\n * read-only formatted value next to the label, an optional reset \"eraser\", and an\n * `endAdornment` slot (favourite star, etc.). A drop-in preset — all `Slider`\n * props pass through; the label is rendered in the header instead of inside Slider.\n */\nexport function ValueSlider(props: ValueSliderProps): JSX.Element {\n  const [local, sliderProps] = splitProps(props, [\n    \"readout\",\n    \"endAdornment\",\n    \"onReset\",\n    \"resetLabel\",\n    \"label\",\n    \"class\",\n  ]);\n\n  const hasReadout = (): boolean => local.readout !== undefined && local.readout !== false;\n  const showHeader = (): boolean =>\n    local.label != null || hasReadout() || local.endAdornment != null || local.onReset != null;\n\n  return (\n    <div class={cn(\"smwb-value-slider\", local.class)}>\n      <Show when={showHeader()}>\n        <div class=\"smwb-value-slider__header\">\n          <Show when={local.label != null}>\n            <span class=\"smwb-value-slider__label\">{local.label}</span>\n          </Show>\n          <span class=\"smwb-value-slider__spacer\" />\n          <Show when={hasReadout()}>\n            <span class=\"smwb-value-slider__readout\">{formatReadout(local.readout, sliderProps.value)}</span>\n          </Show>\n          {local.endAdornment}\n          <Show when={local.onReset != null}>\n            <button\n              type=\"button\"\n              class=\"smwb-value-slider__reset\"\n              aria-label={local.resetLabel ?? \"Reset\"}\n              disabled={sliderProps.disabled}\n              onClick={() => local.onReset?.()}\n            >\n              <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M3 12a9 9 0 1 0 3-6.7M3 4v4h4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              </svg>\n            </button>\n          </Show>\n        </div>\n      </Show>\n      <Slider {...sliderProps} />\n    </div>\n  );\n}\n\nexport default ValueSlider;\n"],"mappings":"AAAA,SAAmB,MAAM,kBAAkB;AAC3C,OAAO,QAAQ;AACf,SAAS,cAAkD;AAgB3D,MAAM,gBAAgB,CACpB,SACA,UACW;AACX,MAAI,OAAO,YAAY,WAAY,QAAO,QAAQ,KAAK;AACvD,MAAI,MAAM,QAAQ,KAAK,EAAG,QAAO,GAAG,MAAM,CAAC,CAAC,WAAM,MAAM,CAAC,CAAC;AAC1D,SAAO,SAAS,OAAO,KAAK,OAAO,KAAK;AAC1C;AAQO,SAAS,YAAY,OAAsC;AAChE,QAAM,CAAC,OAAO,WAAW,IAAI,WAAW,OAAO;AAAA,IAC7C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,aAAa,MAAe,MAAM,YAAY,UAAa,MAAM,YAAY;AACnF,QAAM,aAAa,MACjB,MAAM,SAAS,QAAQ,WAAW,KAAK,MAAM,gBAAgB,QAAQ,MAAM,WAAW;AAExF,SACE,CAAC,IAAI,OAAO,GAAG,qBAAqB,MAAM,KAAK,GAAG;AAAA,MAChD,CAAC,KAAK,MAAM,WAAW,GAAG;AAAA,QACxB,CAAC,IAAI,MAAM,4BAA4B;AAAA,UACrC,CAAC,KAAK,MAAM,MAAM,SAAS,MAAM;AAAA,YAC/B,CAAC,KAAK,MAAM,4BAA4B,MAAM,MAAM,EAAnD,KAA0D;AAAA,UAC7D,EAFC,KAEM;AAAA,UACP,CAAC,KAAK,MAAM,4BAA4B,EAAE;AAAA,UAC1C,CAAC,KAAK,MAAM,WAAW,GAAG;AAAA,YACxB,CAAC,KAAK,MAAM,8BAA8B,cAAc,MAAM,SAAS,YAAY,KAAK,EAAE,EAAzF,KAAgG;AAAA,UACnG,EAFC,KAEM;AAAA,WACN,MAAM,aAAa;AAAA,UACpB,CAAC,KAAK,MAAM,MAAM,WAAW,MAAM;AAAA,YACjC,CAAC;AAAA,IACC,KAAK;AAAA,IACL,MAAM;AAAA,IACN,YAAY,MAAM,cAAc;AAAA,IAChC,UAAU,YAAY;AAAA,IACtB,SAAS,MAAM,MAAM,UAAU;AAAA,GAChC;AAAA,cACC,CAAC,IAAI,QAAQ,YAAY,MAAM,KAAK,OAAO,KAAK,YAAY,OAAO,KAAK,OAAO,OAAO,eAAe,aAAa,IAAI;AAAA,gBACpH,CAAC,KAAK,EAAE,gCAAgC,eAAe,QAAQ,gBAAgB,QAAQ,EAAE;AAAA,cAC3F,EAFC,IAEK;AAAA,YACR,EAVC,OAUQ;AAAA,UACX,EAZC,KAYM;AAAA,QACT,EAtBC,IAsBK;AAAA,MACR,EAxBC,KAwBM;AAAA,MACP,CAAC,WAAW,aAAa,EAAE;AAAA,IAC7B,EA3BC;AA6BL;AAEA,IAAO,sBAAQ;","names":[],"file":"valueSlider.jsx"}
+{"version":3,"sources":["../../../../../../src/components/inputs/valueSlider/valueSlider.tsx"],"sourcesContent":["import { type JSX, Show, children, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Slider, type SliderProps, type SliderValue } from \"../slider\";\n\nexport interface ValueSliderProps extends SliderProps {\n  /**\n   * Read-only value readout beside the label. `true` shows the raw value; pass a\n   * formatter for units/precision (e.g. `(v) => `${v}%``). Reflects `props.value`.\n   */\n  readout?: boolean | ((value: SliderValue | undefined) => string);\n  /** Content at the end of the header row — a reset button, a favourite star, etc. */\n  endAdornment?: JSX.Element;\n  /** Renders a built-in reset control in the header; called on click. */\n  onReset?: () => void;\n  /** Accessible label for the reset control. */\n  resetLabel?: string;\n}\n\nconst formatReadout = (\n  readout: ValueSliderProps[\"readout\"],\n  value: SliderValue | undefined,\n): string => {\n  if (typeof readout === \"function\") return readout(value);\n  if (Array.isArray(value)) return `${value[0]} – ${value[1]}`;\n  return value == null ? \"\" : String(value);\n};\n\n/**\n * `Slider` plus the value-readout + adornment header row every app rebuilds: a\n * read-only formatted value next to the label, an optional reset \"eraser\", and an\n * `endAdornment` slot (favourite star, etc.). A drop-in preset — all `Slider`\n * props pass through; the label is rendered in the header instead of inside Slider.\n */\nexport function ValueSlider(props: ValueSliderProps): JSX.Element {\n  const [local, sliderProps] = splitProps(props, [\n    \"readout\",\n    \"endAdornment\",\n    \"onReset\",\n    \"resetLabel\",\n    \"label\",\n    \"class\",\n  ]);\n\n  // Read once: markup passed as a prop is created anew on every read, and\n  // during hydration a copy the server never rendered has no DOM node.\n  const endAdornment = children(() => local.endAdornment);\n  const hasReadout = (): boolean => local.readout !== undefined && local.readout !== false;\n  const showHeader = (): boolean =>\n    local.label != null || hasReadout() || endAdornment() != null || local.onReset != null;\n\n  return (\n    <div class={cn(\"smwb-value-slider\", local.class)}>\n      <Show when={showHeader()}>\n        <div class=\"smwb-value-slider__header\">\n          <Show when={local.label != null}>\n            <span class=\"smwb-value-slider__label\">{local.label}</span>\n          </Show>\n          <span class=\"smwb-value-slider__spacer\" />\n          <Show when={hasReadout()}>\n            <span class=\"smwb-value-slider__readout\">{formatReadout(local.readout, sliderProps.value)}</span>\n          </Show>\n          {endAdornment()}\n          <Show when={local.onReset != null}>\n            <button\n              type=\"button\"\n              class=\"smwb-value-slider__reset\"\n              aria-label={local.resetLabel ?? \"Reset\"}\n              disabled={sliderProps.disabled}\n              onClick={() => local.onReset?.()}\n            >\n              <svg viewBox=\"0 0 24 24\" width=\"16\" height=\"16\" aria-hidden=\"true\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M3 12a9 9 0 1 0 3-6.7M3 4v4h4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\n              </svg>\n            </button>\n          </Show>\n        </div>\n      </Show>\n      <Slider {...sliderProps} />\n    </div>\n  );\n}\n\nexport default ValueSlider;\n"],"mappings":"AAAA,SAAmB,MAAM,UAAU,kBAAkB;AACrD,OAAO,QAAQ;AACf,SAAS,cAAkD;AAgB3D,MAAM,gBAAgB,CACpB,SACA,UACW;AACX,MAAI,OAAO,YAAY,WAAY,QAAO,QAAQ,KAAK;AACvD,MAAI,MAAM,QAAQ,KAAK,EAAG,QAAO,GAAG,MAAM,CAAC,CAAC,WAAM,MAAM,CAAC,CAAC;AAC1D,SAAO,SAAS,OAAO,KAAK,OAAO,KAAK;AAC1C;AAQO,SAAS,YAAY,OAAsC;AAChE,QAAM,CAAC,OAAO,WAAW,IAAI,WAAW,OAAO;AAAA,IAC7C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAID,QAAM,eAAe,SAAS,MAAM,MAAM,YAAY;AACtD,QAAM,aAAa,MAAe,MAAM,YAAY,UAAa,MAAM,YAAY;AACnF,QAAM,aAAa,MACjB,MAAM,SAAS,QAAQ,WAAW,KAAK,aAAa,KAAK,QAAQ,MAAM,WAAW;AAEpF,SACE,CAAC,IAAI,OAAO,GAAG,qBAAqB,MAAM,KAAK,GAAG;AAAA,MAChD,CAAC,KAAK,MAAM,WAAW,GAAG;AAAA,QACxB,CAAC,IAAI,MAAM,4BAA4B;AAAA,UACrC,CAAC,KAAK,MAAM,MAAM,SAAS,MAAM;AAAA,YAC/B,CAAC,KAAK,MAAM,4BAA4B,MAAM,MAAM,EAAnD,KAA0D;AAAA,UAC7D,EAFC,KAEM;AAAA,UACP,CAAC,KAAK,MAAM,4BAA4B,EAAE;AAAA,UAC1C,CAAC,KAAK,MAAM,WAAW,GAAG;AAAA,YACxB,CAAC,KAAK,MAAM,8BAA8B,cAAc,MAAM,SAAS,YAAY,KAAK,EAAE,EAAzF,KAAgG;AAAA,UACnG,EAFC,KAEM;AAAA,WACN,aAAa,EAAE;AAAA,UAChB,CAAC,KAAK,MAAM,MAAM,WAAW,MAAM;AAAA,YACjC,CAAC;AAAA,IACC,KAAK;AAAA,IACL,MAAM;AAAA,IACN,YAAY,MAAM,cAAc;AAAA,IAChC,UAAU,YAAY;AAAA,IACtB,SAAS,MAAM,MAAM,UAAU;AAAA,GAChC;AAAA,cACC,CAAC,IAAI,QAAQ,YAAY,MAAM,KAAK,OAAO,KAAK,YAAY,OAAO,KAAK,OAAO,OAAO,eAAe,aAAa,IAAI;AAAA,gBACpH,CAAC,KAAK,EAAE,gCAAgC,eAAe,QAAQ,gBAAgB,QAAQ,EAAE;AAAA,cAC3F,EAFC,IAEK;AAAA,YACR,EAVC,OAUQ;AAAA,UACX,EAZC,KAYM;AAAA,QACT,EAtBC,IAsBK;AAAA,MACR,EAxBC,KAwBM;AAAA,MACP,CAAC,WAAW,aAAa,EAAE;AAAA,IAC7B,EA3BC;AA6BL;AAEA,IAAO,sBAAQ;","names":[],"file":"valueSlider.jsx"}

package/dist/headless/source/components/layout/appLayout/appLayout.jsx

@@ -44,6 +44,7 @@ function AppLayout(props) {
   const headerSlot = children(() => local.header);
   const sidebarSlot = children(() => local.sidebar);
   const footerSlot = children(() => local.footer);
+  const collapseToggleSlot = children(() => local.collapsible ? local.collapseToggle : void 0);
   const style = () => ({
     "--smui-app-sidebar-w": collapsed() ? len(local.sidebarCollapsedWidth) : len(local.sidebarWidth),
     ...typeof local.style === "object" && local.style ? local.style : {}
@@ -68,7 +69,7 @@ function AppLayout(props) {
             <Show when={local.collapsible}>
               <div class="smwb-app-layout__collapse">
                 <Show
-    when={local.collapseToggle}
+    when={collapseToggleSlot()}
     fallback={<button
       type="button"
       class="smwb-app-layout__collapse-btn"
@@ -80,7 +81,7 @@ function AppLayout(props) {
                       <Icon name={collapsed() ? "chevron_right" : "chevron_left"} size={20} />
                     </button>}
   >
-                  {local.collapseToggle}
+                  {collapseToggleSlot()}
                 </Show>
               </div>
             </Show>

package/dist/headless/source/components/layout/appLayout/appLayout.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/layout/appLayout/appLayout.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { createId } from \"../../../primitives/createId\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface AppLayoutProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Top bar slot (e.g. <AppBar />). Spans full width. */\n  header?: JSX.Element;\n  /** Side navigation slot (e.g. <Sidebar />). */\n  sidebar?: JSX.Element;\n  /** Footer slot, below the content. */\n  footer?: JSX.Element;\n  /** Sidebar width (px or any CSS length). */\n  sidebarWidth?: number | string;\n  /** Controlled collapsed state of the sidebar rail. */\n  sidebarCollapsed?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultSidebarCollapsed?: boolean;\n  /** Called whenever the collapsed state changes. */\n  onSidebarCollapsedChange?: (collapsed: boolean) => void;\n  /** Renders a built-in toggle button to collapse/expand the sidebar. */\n  collapsible?: boolean;\n  /** Custom toggle node replacing the default icon button. */\n  collapseToggle?: JSX.Element;\n  /** Accessible label for the default toggle button. */\n  collapseToggleAriaLabel?: string;\n  /** Sidebar collapsed width. */\n  sidebarCollapsedWidth?: number | string;\n  /** Keep the header pinned while content scrolls. */\n  stickyHeader?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst len = (v: number | string): string => (typeof v === \"number\" ? `${v}px` : v);\n\nexport function AppLayout(props: ParentProps<AppLayoutProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      sidebarWidth: 260 as number | string,\n      defaultSidebarCollapsed: false,\n      collapsible: false,\n      collapseToggleAriaLabel: \"Toggle navigation\",\n      sidebarCollapsedWidth: 72 as number | string,\n      stickyHeader: true,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"header\",\n    \"sidebar\",\n    \"footer\",\n    \"sidebarWidth\",\n    \"sidebarCollapsed\",\n    \"defaultSidebarCollapsed\",\n    \"onSidebarCollapsedChange\",\n    \"collapsible\",\n    \"collapseToggle\",\n    \"collapseToggleAriaLabel\",\n    \"sidebarCollapsedWidth\",\n    \"stickyHeader\",\n    \"class\",\n    \"style\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const [collapsed, setCollapsed] = createControllableState<boolean>({\n    value: () => local.sidebarCollapsed,\n    defaultValue: local.defaultSidebarCollapsed,\n    onChange: (next) => local.onSidebarCollapsedChange?.(next),\n  });\n\n  const sidebarId = createId();\n\n  // Resolve slot props through `children()` so each is created once, in THIS\n  // component's reactive context. A pre-created element passed straight into a\n  // <Show> gets its hydration key at the caller's position but renders at the\n  // Show's, so the hydration walk can't find it (\"Unable to find DOM nodes for\n  // key\"). Resolving here keeps the key sequence aligned on server and client.\n  const headerSlot = children(() => local.header);\n  const sidebarSlot = children(() => local.sidebar);\n  const footerSlot = children(() => local.footer);\n\n  const style = (): JSX.CSSProperties => ({\n    \"--smui-app-sidebar-w\": collapsed() ? len(local.sidebarCollapsedWidth) : len(local.sidebarWidth),\n    ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n  });\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"app-layout\"\n      class={cn(\n        \"smwb-app-layout\",\n        { \"smwb-app-layout_sticky-header\": local.stickyHeader, \"smwb-app-layout_collapsed\": collapsed() },\n        local.class\n      )}\n      style={style()}\n    >\n      <Show when={headerSlot()}>\n        <div class=\"smwb-app-layout__header\">{headerSlot()}</div>\n      </Show>\n      <div class=\"smwb-app-layout__body\">\n        <Show when={sidebarSlot()}>\n          <aside id={sidebarId} class=\"smwb-app-layout__sidebar\">\n            <Show when={local.collapsible}>\n              <div class=\"smwb-app-layout__collapse\">\n                <Show\n                  when={local.collapseToggle}\n                  fallback={\n                    <button\n                      type=\"button\"\n                      class=\"smwb-app-layout__collapse-btn\"\n                      aria-label={local.collapseToggleAriaLabel}\n                      aria-expanded={!collapsed()}\n                      aria-controls={sidebarId}\n                      onClick={() => setCollapsed(!collapsed())}\n                    >\n                      <Icon name={collapsed() ? \"chevron_right\" : \"chevron_left\"} size={20} />\n                    </button>\n                  }\n                >\n                  {local.collapseToggle}\n                </Show>\n              </div>\n            </Show>\n            {sidebarSlot()}\n          </aside>\n        </Show>\n        <div class=\"smwb-app-layout__content\">\n          {local.children}\n          <Show when={footerSlot()}>\n            <div class=\"smwb-app-layout__footer\">{footerSlot()}</div>\n          </Show>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default AppLayout;\n"],"mappings":"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","names":[],"file":"appLayout.jsx"}
+{"version":3,"sources":["../../../../../../src/components/layout/appLayout/appLayout.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { createId } from \"../../../primitives/createId\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface AppLayoutProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Top bar slot (e.g. <AppBar />). Spans full width. */\n  header?: JSX.Element;\n  /** Side navigation slot (e.g. <Sidebar />). */\n  sidebar?: JSX.Element;\n  /** Footer slot, below the content. */\n  footer?: JSX.Element;\n  /** Sidebar width (px or any CSS length). */\n  sidebarWidth?: number | string;\n  /** Controlled collapsed state of the sidebar rail. */\n  sidebarCollapsed?: boolean;\n  /** Initial collapsed state (uncontrolled). */\n  defaultSidebarCollapsed?: boolean;\n  /** Called whenever the collapsed state changes. */\n  onSidebarCollapsedChange?: (collapsed: boolean) => void;\n  /** Renders a built-in toggle button to collapse/expand the sidebar. */\n  collapsible?: boolean;\n  /** Custom toggle node replacing the default icon button. */\n  collapseToggle?: JSX.Element;\n  /** Accessible label for the default toggle button. */\n  collapseToggleAriaLabel?: string;\n  /** Sidebar collapsed width. */\n  sidebarCollapsedWidth?: number | string;\n  /** Keep the header pinned while content scrolls. */\n  stickyHeader?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst len = (v: number | string): string => (typeof v === \"number\" ? `${v}px` : v);\n\nexport function AppLayout(props: ParentProps<AppLayoutProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      sidebarWidth: 260 as number | string,\n      defaultSidebarCollapsed: false,\n      collapsible: false,\n      collapseToggleAriaLabel: \"Toggle navigation\",\n      sidebarCollapsedWidth: 72 as number | string,\n      stickyHeader: true,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"header\",\n    \"sidebar\",\n    \"footer\",\n    \"sidebarWidth\",\n    \"sidebarCollapsed\",\n    \"defaultSidebarCollapsed\",\n    \"onSidebarCollapsedChange\",\n    \"collapsible\",\n    \"collapseToggle\",\n    \"collapseToggleAriaLabel\",\n    \"sidebarCollapsedWidth\",\n    \"stickyHeader\",\n    \"class\",\n    \"style\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const [collapsed, setCollapsed] = createControllableState<boolean>({\n    value: () => local.sidebarCollapsed,\n    defaultValue: local.defaultSidebarCollapsed,\n    onChange: (next) => local.onSidebarCollapsedChange?.(next),\n  });\n\n  const sidebarId = createId();\n\n  // Resolve slot props through `children()` so each is created once, in THIS\n  // component's reactive context. A pre-created element passed straight into a\n  // <Show> gets its hydration key at the caller's position but renders at the\n  // Show's, so the hydration walk can't find it (\"Unable to find DOM nodes for\n  // key\"). Resolving here keeps the key sequence aligned on server and client.\n  const headerSlot = children(() => local.header);\n  const sidebarSlot = children(() => local.sidebar);\n  const footerSlot = children(() => local.footer);\n  // The toggle is drawn only on a collapsible layout, so it is read only then.\n  const collapseToggleSlot = children(() => (local.collapsible ? local.collapseToggle : undefined));\n\n  const style = (): JSX.CSSProperties => ({\n    \"--smui-app-sidebar-w\": collapsed() ? len(local.sidebarCollapsedWidth) : len(local.sidebarWidth),\n    ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n  });\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"app-layout\"\n      class={cn(\n        \"smwb-app-layout\",\n        { \"smwb-app-layout_sticky-header\": local.stickyHeader, \"smwb-app-layout_collapsed\": collapsed() },\n        local.class\n      )}\n      style={style()}\n    >\n      <Show when={headerSlot()}>\n        <div class=\"smwb-app-layout__header\">{headerSlot()}</div>\n      </Show>\n      <div class=\"smwb-app-layout__body\">\n        <Show when={sidebarSlot()}>\n          <aside id={sidebarId} class=\"smwb-app-layout__sidebar\">\n            <Show when={local.collapsible}>\n              <div class=\"smwb-app-layout__collapse\">\n                <Show\n                  when={collapseToggleSlot()}\n                  fallback={\n                    <button\n                      type=\"button\"\n                      class=\"smwb-app-layout__collapse-btn\"\n                      aria-label={local.collapseToggleAriaLabel}\n                      aria-expanded={!collapsed()}\n                      aria-controls={sidebarId}\n                      onClick={() => setCollapsed(!collapsed())}\n                    >\n                      <Icon name={collapsed() ? \"chevron_right\" : \"chevron_left\"} size={20} />\n                    </button>\n                  }\n                >\n                  {collapseToggleSlot()}\n                </Show>\n              </div>\n            </Show>\n            {sidebarSlot()}\n          </aside>\n        </Show>\n        <div class=\"smwb-app-layout__content\">\n          {local.children}\n          <Show when={footerSlot()}>\n            <div class=\"smwb-app-layout__footer\">{footerSlot()}</div>\n          </Show>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default AppLayout;\n"],"mappings":"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","names":[],"file":"appLayout.jsx"}

package/dist/headless/source/components/layout/divider/divider.jsx

@@ -1,4 +1,4 @@
-import { Show, mergeProps, splitProps } from "solid-js";
+import { Show, children, mergeProps, splitProps } from "solid-js";
 import cn from "clsx";
 import { mergeRefs } from "../../../primitives/mergeRefs";
 const colorVar = {
@@ -32,7 +32,11 @@ function Divider(props) {
     "children",
     "ref"
   ]);
-  const hasText = () => local.children !== void 0 && local.children !== null && local.children !== false;
+  const text = children(() => local.orientation === "horizontal" ? local.children : void 0);
+  const hasText = () => {
+    const resolved = text();
+    return resolved !== void 0 && resolved !== null && resolved !== false;
+  };
   const dividerStyle = () => {
     const c = colorVar[local.color];
     const t = typeof local.thickness === "number" ? `${local.thickness}px` : local.thickness;
@@ -49,14 +53,14 @@ function Divider(props) {
     role="separator"
     aria-orientation={local.orientation}
     class={cn("smwb-divider", `smwb-divider_${local.orientation}`, `smwb-divider_${local.variant}`, {
-      "smwb-divider_with-text": hasText() && local.orientation === "horizontal",
-      [`smwb-divider_align-${local.textAlign}`]: hasText() && local.orientation === "horizontal",
+      "smwb-divider_with-text": hasText(),
+      [`smwb-divider_align-${local.textAlign}`]: hasText(),
       "smwb-divider_flex-item": local.flexItem
     }, local.class)}
     style={dividerStyle()}
   >
-      <Show when={hasText() && local.orientation === "horizontal"}>
-        <span class="smwb-divider__text">{local.children}</span>
+      <Show when={hasText()}>
+        <span class="smwb-divider__text">{text()}</span>
       </Show>
     </div>;
 }

package/dist/headless/source/components/layout/divider/divider.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/layout/divider/divider.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type DividerColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface DividerProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Direction of the divider line. */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Inset behaviour of the line relative to its container. */\n  variant?: \"fullWidth\" | \"inset\" | \"middle\";\n  /** Horizontal alignment of the optional text content. */\n  textAlign?: \"left\" | \"center\" | \"right\";\n  /** Line color (semantic token). */\n  color?: DividerColor;\n  /** Line thickness (number = px, or any CSS length). */\n  thickness?: number | string;\n  /** Stretch to fill a flex container along the cross axis. */\n  flexItem?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst colorVar: Record<DividerColor, string | undefined> = {\n  default: undefined,\n  primary: \"var(--smui-primaryColor)\",\n  secondary: \"var(--smui-secondaryColor)\",\n  error: \"var(--smui-errorColor)\",\n  success: \"var(--smui-successColor)\",\n  warning: \"var(--smui-warningColor)\",\n  info: \"var(--smui-infoColor)\",\n};\n\nexport function Divider(props: ParentProps<DividerProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      orientation: \"horizontal\" as const,\n      variant: \"fullWidth\" as const,\n      textAlign: \"center\" as const,\n      color: \"default\" as DividerColor,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"orientation\",\n    \"variant\",\n    \"textAlign\",\n    \"color\",\n    \"thickness\",\n    \"flexItem\",\n    \"style\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const hasText = (): boolean =>\n    local.children !== undefined && local.children !== null && (local.children as unknown) !== false;\n\n  const dividerStyle = (): JSX.CSSProperties => {\n    const c = colorVar[local.color];\n    const t = typeof local.thickness === \"number\" ? `${local.thickness}px` : local.thickness;\n    return {\n      ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n      ...(c ? { \"border-color\": c } : {}),\n      ...(t ? (local.orientation === \"vertical\" ? { \"border-left-width\": t } : { \"border-bottom-width\": t }) : {}),\n    };\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"divider\"\n      role=\"separator\"\n      aria-orientation={local.orientation}\n      class={cn(\"smwb-divider\", `smwb-divider_${local.orientation}`, `smwb-divider_${local.variant}`, {\n        \"smwb-divider_with-text\": hasText() && local.orientation === \"horizontal\",\n        [`smwb-divider_align-${local.textAlign}`]: hasText() && local.orientation === \"horizontal\",\n        \"smwb-divider_flex-item\": local.flexItem,\n      }, local.class)}\n      style={dividerStyle()}\n    >\n      <Show when={hasText() && local.orientation === \"horizontal\"}>\n        <span class=\"smwb-divider__text\">{local.children}</span>\n      </Show>\n    </div>\n  );\n}\n\nexport default Divider;\n"],"mappings":"AAAA,SAAqC,MAAM,YAAY,kBAAkB;AACzE,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAoBpC,MAAM,WAAqD;AAAA,EACzD,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AACR;AAEO,SAAS,QAAQ,OAA+C;AACrE,QAAM,SAAS;AAAA,IACb;AAAA,MACE,aAAa;AAAA,MACb,SAAS;AAAA,MACT,WAAW;AAAA,MACX,OAAO;AAAA,IACT;AAAA,IACA;AAAA,EACF;AACA,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,UAAU,MACd,MAAM,aAAa,UAAa,MAAM,aAAa,QAAS,MAAM,aAAyB;AAE7F,QAAM,eAAe,MAAyB;AAC5C,UAAM,IAAI,SAAS,MAAM,KAAK;AAC9B,UAAM,IAAI,OAAO,MAAM,cAAc,WAAW,GAAG,MAAM,SAAS,OAAO,MAAM;AAC/E,WAAO;AAAA,MACL,GAAI,OAAO,MAAM,UAAU,YAAY,MAAM,QAAQ,MAAM,QAAQ,CAAC;AAAA,MACpE,GAAI,IAAI,EAAE,gBAAgB,EAAE,IAAI,CAAC;AAAA,MACjC,GAAI,IAAK,MAAM,gBAAgB,aAAa,EAAE,qBAAqB,EAAE,IAAI,EAAE,uBAAuB,EAAE,IAAK,CAAC;AAAA,IAC5G;AAAA,EACF;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,kBAAkB,MAAM;AAAA,IACxB,OAAO,GAAG,gBAAgB,gBAAgB,MAAM,WAAW,IAAI,gBAAgB,MAAM,OAAO,IAAI;AAAA,MAC9F,0BAA0B,QAAQ,KAAK,MAAM,gBAAgB;AAAA,MAC7D,CAAC,sBAAsB,MAAM,SAAS,EAAE,GAAG,QAAQ,KAAK,MAAM,gBAAgB;AAAA,MAC9E,0BAA0B,MAAM;AAAA,IAClC,GAAG,MAAM,KAAK;AAAA,IACd,OAAO,aAAa;AAAA,GACrB;AAAA,MACC,CAAC,KAAK,MAAM,QAAQ,KAAK,MAAM,gBAAgB,cAAc;AAAA,QAC3D,CAAC,KAAK,MAAM,sBAAsB,MAAM,SAAS,EAAhD,KAAuD;AAAA,MAC1D,EAFC,KAEM;AAAA,IACT,EAhBC;AAkBL;AAEA,IAAO,kBAAQ;","names":[],"file":"divider.jsx"}
+{"version":3,"sources":["../../../../../../src/components/layout/divider/divider.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type DividerColor = \"default\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\";\n\nexport interface DividerProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Direction of the divider line. */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Inset behaviour of the line relative to its container. */\n  variant?: \"fullWidth\" | \"inset\" | \"middle\";\n  /** Horizontal alignment of the optional text content. */\n  textAlign?: \"left\" | \"center\" | \"right\";\n  /** Line color (semantic token). */\n  color?: DividerColor;\n  /** Line thickness (number = px, or any CSS length). */\n  thickness?: number | string;\n  /** Stretch to fill a flex container along the cross axis. */\n  flexItem?: boolean;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst colorVar: Record<DividerColor, string | undefined> = {\n  default: undefined,\n  primary: \"var(--smui-primaryColor)\",\n  secondary: \"var(--smui-secondaryColor)\",\n  error: \"var(--smui-errorColor)\",\n  success: \"var(--smui-successColor)\",\n  warning: \"var(--smui-warningColor)\",\n  info: \"var(--smui-infoColor)\",\n};\n\nexport function Divider(props: ParentProps<DividerProps>): JSX.Element {\n  const merged = mergeProps(\n    {\n      orientation: \"horizontal\" as const,\n      variant: \"fullWidth\" as const,\n      textAlign: \"center\" as const,\n      color: \"default\" as DividerColor,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"orientation\",\n    \"variant\",\n    \"textAlign\",\n    \"color\",\n    \"thickness\",\n    \"flexItem\",\n    \"style\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  // Read the text once, and only where it is drawn (a horizontal divider):\n  // markup passed as children is created anew on every read, and during\n  // hydration a copy the server never rendered has no DOM node.\n  const text = children(() => (local.orientation === \"horizontal\" ? local.children : undefined));\n  const hasText = (): boolean => {\n    const resolved = text();\n    return resolved !== undefined && resolved !== null && (resolved as unknown) !== false;\n  };\n\n  const dividerStyle = (): JSX.CSSProperties => {\n    const c = colorVar[local.color];\n    const t = typeof local.thickness === \"number\" ? `${local.thickness}px` : local.thickness;\n    return {\n      ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n      ...(c ? { \"border-color\": c } : {}),\n      ...(t ? (local.orientation === \"vertical\" ? { \"border-left-width\": t } : { \"border-bottom-width\": t }) : {}),\n    };\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"divider\"\n      role=\"separator\"\n      aria-orientation={local.orientation}\n      class={cn(\"smwb-divider\", `smwb-divider_${local.orientation}`, `smwb-divider_${local.variant}`, {\n        \"smwb-divider_with-text\": hasText(),\n        [`smwb-divider_align-${local.textAlign}`]: hasText(),\n        \"smwb-divider_flex-item\": local.flexItem,\n      }, local.class)}\n      style={dividerStyle()}\n    >\n      <Show when={hasText()}>\n        <span class=\"smwb-divider__text\">{text()}</span>\n      </Show>\n    </div>\n  );\n}\n\nexport default Divider;\n"],"mappings":"AAAA,SAAqC,MAAM,UAAU,YAAY,kBAAkB;AACnF,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAoBpC,MAAM,WAAqD;AAAA,EACzD,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AAAA,EACT,MAAM;AACR;AAEO,SAAS,QAAQ,OAA+C;AACrE,QAAM,SAAS;AAAA,IACb;AAAA,MACE,aAAa;AAAA,MACb,SAAS;AAAA,MACT,WAAW;AAAA,MACX,OAAO;AAAA,IACT;AAAA,IACA;AAAA,EACF;AACA,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAKD,QAAM,OAAO,SAAS,MAAO,MAAM,gBAAgB,eAAe,MAAM,WAAW,MAAU;AAC7F,QAAM,UAAU,MAAe;AAC7B,UAAM,WAAW,KAAK;AACtB,WAAO,aAAa,UAAa,aAAa,QAAS,aAAyB;AAAA,EAClF;AAEA,QAAM,eAAe,MAAyB;AAC5C,UAAM,IAAI,SAAS,MAAM,KAAK;AAC9B,UAAM,IAAI,OAAO,MAAM,cAAc,WAAW,GAAG,MAAM,SAAS,OAAO,MAAM;AAC/E,WAAO;AAAA,MACL,GAAI,OAAO,MAAM,UAAU,YAAY,MAAM,QAAQ,MAAM,QAAQ,CAAC;AAAA,MACpE,GAAI,IAAI,EAAE,gBAAgB,EAAE,IAAI,CAAC;AAAA,MACjC,GAAI,IAAK,MAAM,gBAAgB,aAAa,EAAE,qBAAqB,EAAE,IAAI,EAAE,uBAAuB,EAAE,IAAK,CAAC;AAAA,IAC5G;AAAA,EACF;AAEA,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,kBAAkB,MAAM;AAAA,IACxB,OAAO,GAAG,gBAAgB,gBAAgB,MAAM,WAAW,IAAI,gBAAgB,MAAM,OAAO,IAAI;AAAA,MAC9F,0BAA0B,QAAQ;AAAA,MAClC,CAAC,sBAAsB,MAAM,SAAS,EAAE,GAAG,QAAQ;AAAA,MACnD,0BAA0B,MAAM;AAAA,IAClC,GAAG,MAAM,KAAK;AAAA,IACd,OAAO,aAAa;AAAA,GACrB;AAAA,MACC,CAAC,KAAK,MAAM,QAAQ,GAAG;AAAA,QACrB,CAAC,KAAK,MAAM,sBAAsB,KAAK,EAAE,EAAxC,KAA+C;AAAA,MAClD,EAFC,KAEM;AAAA,IACT,EAhBC;AAkBL;AAEA,IAAO,kBAAQ;","names":[],"file":"divider.jsx"}

package/dist/headless/source/components/layout/pageHeader/pageHeader.jsx

@@ -1,4 +1,4 @@
-import { Show, mergeProps, splitProps } from "solid-js";
+import { Show, children, mergeProps, splitProps } from "solid-js";
 import cn from "clsx";
 import { Typography } from "../../dataDisplay/typography";
 import { mergeRefs } from "../../../primitives/mergeRefs";
@@ -13,33 +13,37 @@ function PageHeader(props) {
     "class",
     "ref"
   ]);
+  const title = children(() => local.title);
+  const subtitle = children(() => local.subtitle);
+  const breadcrumbs = children(() => local.breadcrumbs);
+  const actions = children(() => local.actions);
   return <header
     {...rest}
     ref={mergeRefs(local.ref)}
     data-testid="page-header"
     class={cn("smwb-page-header", { "smwb-page-header_divider": local.divider }, local.class)}
   >
-      <Show when={local.breadcrumbs}>
-        <div class="smwb-page-header__breadcrumbs">{local.breadcrumbs}</div>
+      <Show when={breadcrumbs()}>
+        <div class="smwb-page-header__breadcrumbs">{breadcrumbs()}</div>
       </Show>
       <div class="smwb-page-header__row">
         <div class="smwb-page-header__titles">
           <Show
-    when={typeof local.title === "string"}
-    fallback={<div class="smwb-page-header__title">{local.title}</div>}
+    when={typeof title() === "string"}
+    fallback={<div class="smwb-page-header__title">{title()}</div>}
   >
             <Typography variant="h4" component="h1" class="smwb-page-header__title">
-              {local.title}
+              {title()}
             </Typography>
           </Show>
-          <Show when={local.subtitle}>
+          <Show when={subtitle()}>
             <Typography variant="body2" color="textSecondary" class="smwb-page-header__subtitle">
-              {local.subtitle}
+              {subtitle()}
             </Typography>
           </Show>
         </div>
-        <Show when={local.actions}>
-          <div class="smwb-page-header__actions">{local.actions}</div>
+        <Show when={actions()}>
+          <div class="smwb-page-header__actions">{actions()}</div>
         </Show>
       </div>
     </header>;

package/dist/headless/source/components/layout/pageHeader/pageHeader.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/components/layout/pageHeader/pageHeader.tsx"],"sourcesContent":["import { type JSX, Show, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Typography } from \"../../dataDisplay/typography\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface PageHeaderProps extends Omit<JSX.HTMLAttributes<HTMLElement>, \"title\"> {\n  title: JSX.Element | string;\n  subtitle?: JSX.Element | string;\n  /** Slot above the title (e.g. <Breadcrumbs />). */\n  breadcrumbs?: JSX.Element;\n  /** Slot on the trailing side (e.g. action buttons). */\n  actions?: JSX.Element;\n  /** Render a divider below the header. */\n  divider?: boolean;\n  ref?: Ref<HTMLElement>;\n}\n\nexport function PageHeader(props: PageHeaderProps): JSX.Element {\n  const merged = mergeProps({ divider: false }, props);\n  const [local, rest] = splitProps(merged, [\n    \"title\",\n    \"subtitle\",\n    \"breadcrumbs\",\n    \"actions\",\n    \"divider\",\n    \"class\",\n    \"ref\",\n  ]);\n\n  return (\n    <header\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"page-header\"\n      class={cn(\"smwb-page-header\", { \"smwb-page-header_divider\": local.divider }, local.class)}\n    >\n      <Show when={local.breadcrumbs}>\n        <div class=\"smwb-page-header__breadcrumbs\">{local.breadcrumbs}</div>\n      </Show>\n      <div class=\"smwb-page-header__row\">\n        <div class=\"smwb-page-header__titles\">\n          <Show\n            when={typeof local.title === \"string\"}\n            fallback={<div class=\"smwb-page-header__title\">{local.title}</div>}\n          >\n            <Typography variant=\"h4\" component=\"h1\" class=\"smwb-page-header__title\">\n              {local.title}\n            </Typography>\n          </Show>\n          <Show when={local.subtitle}>\n            <Typography variant=\"body2\" color=\"textSecondary\" class=\"smwb-page-header__subtitle\">\n              {local.subtitle}\n            </Typography>\n          </Show>\n        </div>\n        <Show when={local.actions}>\n          <div class=\"smwb-page-header__actions\">{local.actions}</div>\n        </Show>\n      </div>\n    </header>\n  );\n}\n\nexport default PageHeader;\n"],"mappings":"AAAA,SAAmB,MAAM,YAAY,kBAAkB;AACvD,OAAO,QAAQ;AACf,SAAS,kBAAkB;AAC3B,SAAS,iBAA2B;AAc7B,SAAS,WAAW,OAAqC;AAC9D,QAAM,SAAS,WAAW,EAAE,SAAS,MAAM,GAAG,KAAK;AACnD,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,YAAY;AAAA,IACZ,OAAO,GAAG,oBAAoB,EAAE,4BAA4B,MAAM,QAAQ,GAAG,MAAM,KAAK;AAAA,GACzF;AAAA,MACC,CAAC,KAAK,MAAM,MAAM,aAAa;AAAA,QAC7B,CAAC,IAAI,MAAM,iCAAiC,MAAM,YAAY,EAA7D,IAAmE;AAAA,MACtE,EAFC,KAEM;AAAA,MACP,CAAC,IAAI,MAAM,wBAAwB;AAAA,QACjC,CAAC,IAAI,MAAM,2BAA2B;AAAA,UACpC,CAAC;AAAA,IACC,MAAM,OAAO,MAAM,UAAU;AAAA,IAC7B,UAAU,CAAC,IAAI,MAAM,2BAA2B,MAAM,MAAM,EAAjD;AAAA,GACZ;AAAA,YACC,CAAC,WAAW,QAAQ,KAAK,UAAU,KAAK,MAAM,0BAA0B;AAAA,eACrE,MAAM,MAAM;AAAA,YACf,EAFC,WAEY;AAAA,UACf,EAPC,KAOM;AAAA,UACP,CAAC,KAAK,MAAM,MAAM,UAAU;AAAA,YAC1B,CAAC,WAAW,QAAQ,QAAQ,MAAM,gBAAgB,MAAM,6BAA6B;AAAA,eAClF,MAAM,SAAS;AAAA,YAClB,EAFC,WAEY;AAAA,UACf,EAJC,KAIM;AAAA,QACT,EAdC,IAcK;AAAA,QACN,CAAC,KAAK,MAAM,MAAM,SAAS;AAAA,UACzB,CAAC,IAAI,MAAM,6BAA6B,MAAM,QAAQ,EAArD,IAA2D;AAAA,QAC9D,EAFC,KAEM;AAAA,MACT,EAnBC,IAmBK;AAAA,IACR,EA7BC;AA+BL;AAEA,IAAO,qBAAQ;","names":[],"file":"pageHeader.jsx"}
+{"version":3,"sources":["../../../../../../src/components/layout/pageHeader/pageHeader.tsx"],"sourcesContent":["import { type JSX, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Typography } from \"../../dataDisplay/typography\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface PageHeaderProps extends Omit<JSX.HTMLAttributes<HTMLElement>, \"title\"> {\n  title: JSX.Element | string;\n  subtitle?: JSX.Element | string;\n  /** Slot above the title (e.g. <Breadcrumbs />). */\n  breadcrumbs?: JSX.Element;\n  /** Slot on the trailing side (e.g. action buttons). */\n  actions?: JSX.Element;\n  /** Render a divider below the header. */\n  divider?: boolean;\n  ref?: Ref<HTMLElement>;\n}\n\nexport function PageHeader(props: PageHeaderProps): JSX.Element {\n  const merged = mergeProps({ divider: false }, props);\n  const [local, rest] = splitProps(merged, [\n    \"title\",\n    \"subtitle\",\n    \"breadcrumbs\",\n    \"actions\",\n    \"divider\",\n    \"class\",\n    \"ref\",\n  ]);\n\n  // Read each slot once: markup passed as a prop is created anew on every read,\n  // and during hydration a copy the server never rendered has no DOM node.\n  const title = children(() => local.title);\n  const subtitle = children(() => local.subtitle);\n  const breadcrumbs = children(() => local.breadcrumbs);\n  const actions = children(() => local.actions);\n\n  return (\n    <header\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"page-header\"\n      class={cn(\"smwb-page-header\", { \"smwb-page-header_divider\": local.divider }, local.class)}\n    >\n      <Show when={breadcrumbs()}>\n        <div class=\"smwb-page-header__breadcrumbs\">{breadcrumbs()}</div>\n      </Show>\n      <div class=\"smwb-page-header__row\">\n        <div class=\"smwb-page-header__titles\">\n          <Show\n            when={typeof title() === \"string\"}\n            fallback={<div class=\"smwb-page-header__title\">{title()}</div>}\n          >\n            <Typography variant=\"h4\" component=\"h1\" class=\"smwb-page-header__title\">\n              {title()}\n            </Typography>\n          </Show>\n          <Show when={subtitle()}>\n            <Typography variant=\"body2\" color=\"textSecondary\" class=\"smwb-page-header__subtitle\">\n              {subtitle()}\n            </Typography>\n          </Show>\n        </div>\n        <Show when={actions()}>\n          <div class=\"smwb-page-header__actions\">{actions()}</div>\n        </Show>\n      </div>\n    </header>\n  );\n}\n\nexport default PageHeader;\n"],"mappings":"AAAA,SAAmB,MAAM,UAAU,YAAY,kBAAkB;AACjE,OAAO,QAAQ;AACf,SAAS,kBAAkB;AAC3B,SAAS,iBAA2B;AAc7B,SAAS,WAAW,OAAqC;AAC9D,QAAM,SAAS,WAAW,EAAE,SAAS,MAAM,GAAG,KAAK;AACnD,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAID,QAAM,QAAQ,SAAS,MAAM,MAAM,KAAK;AACxC,QAAM,WAAW,SAAS,MAAM,MAAM,QAAQ;AAC9C,QAAM,cAAc,SAAS,MAAM,MAAM,WAAW;AACpD,QAAM,UAAU,SAAS,MAAM,MAAM,OAAO;AAE5C,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,YAAY;AAAA,IACZ,OAAO,GAAG,oBAAoB,EAAE,4BAA4B,MAAM,QAAQ,GAAG,MAAM,KAAK;AAAA,GACzF;AAAA,MACC,CAAC,KAAK,MAAM,YAAY,GAAG;AAAA,QACzB,CAAC,IAAI,MAAM,iCAAiC,YAAY,EAAE,EAAzD,IAA+D;AAAA,MAClE,EAFC,KAEM;AAAA,MACP,CAAC,IAAI,MAAM,wBAAwB;AAAA,QACjC,CAAC,IAAI,MAAM,2BAA2B;AAAA,UACpC,CAAC;AAAA,IACC,MAAM,OAAO,MAAM,MAAM;AAAA,IACzB,UAAU,CAAC,IAAI,MAAM,2BAA2B,MAAM,EAAE,EAA7C;AAAA,GACZ;AAAA,YACC,CAAC,WAAW,QAAQ,KAAK,UAAU,KAAK,MAAM,0BAA0B;AAAA,eACrE,MAAM,EAAE;AAAA,YACX,EAFC,WAEY;AAAA,UACf,EAPC,KAOM;AAAA,UACP,CAAC,KAAK,MAAM,SAAS,GAAG;AAAA,YACtB,CAAC,WAAW,QAAQ,QAAQ,MAAM,gBAAgB,MAAM,6BAA6B;AAAA,eAClF,SAAS,EAAE;AAAA,YACd,EAFC,WAEY;AAAA,UACf,EAJC,KAIM;AAAA,QACT,EAdC,IAcK;AAAA,QACN,CAAC,KAAK,MAAM,QAAQ,GAAG;AAAA,UACrB,CAAC,IAAI,MAAM,6BAA6B,QAAQ,EAAE,EAAjD,IAAuD;AAAA,QAC1D,EAFC,KAEM;AAAA,MACT,EAnBC,IAmBK;AAAA,IACR,EA7BC;AA+BL;AAEA,IAAO,qBAAQ;","names":[],"file":"pageHeader.jsx"}

package/dist/headless/source/components/layout/sectionHeader/index.js

@@ -0,0 +1,6 @@
+import { SectionHeader, default as default2 } from "./sectionHeader";
+export {
+  SectionHeader,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/headless/source/components/layout/sectionHeader/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/components/layout/sectionHeader/index.ts"],
+  "sourcesContent": ["export { SectionHeader, default } from \"./sectionHeader\";\nexport type { SectionHeaderProps } from \"./sectionHeader\";\n"],
+  "mappings": "AAAA,SAAS,eAAe,WAAAA,gBAAe;",
+  "names": ["default"]
+}