@stridge/noctis 1.0.0-beta.0

package/dist/components/select/select.js

@@ -0,0 +1,314 @@
+"use client";
+import { Icon } from "../../icons/icon.js";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon, ChevronsUpDownIcon } from "../../icons/glyphs.js";
+import { useNoctisStringFormatter } from "../../core/use-injected-labels.js";
+import { Surface } from "../surface/surface.js";
+import { select_exports } from "../../primitives/select.js";
+import { SelectContextProvider, useSelectContext } from "./select.context.js";
+import { SELECT_SLOTS } from "./select.slots.js";
+import { backdropProps, groupLabelProps, groupProps, iconProps, itemDescriptionProps, itemIconProps, itemIndicatorProps, itemProps, itemTextProps, listProps, popupProps, scrollDownArrowProps, scrollUpArrowProps, separatorProps, triggerProps, valueProps } from "./select.props.js";
+import clsx$1 from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/select/select.tsx
+/**
+* Owns the selected value and open state, sharing the control `size` (plus the `multiple` and `invalid`
+* flags) with the trigger and rows. Wraps Base UI's Select. Pass `value`/`defaultValue` and
+* `onValueChange` to control the selection, `items` to let `Select.Value` render a chosen item's label
+* instead of its raw value, and `multiple` for a multi-select (the trigger then reads "N selected").
+* `readOnly`, `required`, `disabled`, and `name` pass straight through to Base UI; `invalid` is an
+* additive shell override (a `Field.Root` that turns invalid already marks the trigger). `modal`
+* defaults to `false` so the page keeps scrolling while the popup is open — set it `true`
+* to lock page scroll and render the `Backdrop`.
+*/
+function SelectRoot({ size = "md", invalid = false, modal = false, children, ...props }) {
+	return /* @__PURE__ */ jsx(SelectContextProvider, {
+		value: {
+			size,
+			multiple: props.multiple === true,
+			invalid,
+			modal
+		},
+		children: /* @__PURE__ */ jsx(select_exports.Select.Root, {
+			modal,
+			...props,
+			children
+		})
+	});
+}
+/**
+* The field-shaped control that opens the popup. Wears the field look (surface, hairline border, calm
+* ring-less focus — the accent border lights on focus) and pairs a `Select.Value` with a
+* trailing chevron; reads the root's `size` to size itself and the root's `invalid` to paint the danger
+* border. Base UI stamps `data-disabled`/`data-readonly` for the disabled/read-only chrome.
+*/
+function SelectTrigger({ className, children, ...props }) {
+	const { size, invalid } = useSelectContext("Trigger");
+	return /* @__PURE__ */ jsx(select_exports.Select.Trigger, {
+		"data-slot": SELECT_SLOTS.trigger,
+		"data-size": size,
+		...invalid ? { "data-invalid": "" } : {},
+		className: clsx$1(className),
+		...props,
+		children
+	});
+}
+/**
+* Renders the selected item's label inside the trigger, falling back to `placeholder` when nothing is
+* selected. Pass `items` on `Select.Root` (or a formatting child function) to map a raw value to a
+* label. Under a `multiple` root it renders a localized "N selected" summary instead — pass a child
+* function to override the trigger display entirely (e.g. mirror the chosen row's leading glyph).
+*/
+function SelectValue({ className, children, placeholder, ...props }) {
+	const { multiple } = useSelectContext("Value");
+	const formatter = useNoctisStringFormatter();
+	const render = children === void 0 && multiple ? (value) => {
+		const count = Array.isArray(value) ? value.length : 0;
+		return count > 0 ? formatter.format("select.selectedCount", { count }) : placeholder ?? null;
+	} : children;
+	return /* @__PURE__ */ jsx(select_exports.Select.Value, {
+		"data-slot": SELECT_SLOTS.value,
+		placeholder,
+		className: clsx$1(className),
+		...props,
+		children: render
+	});
+}
+/** The trailing chevron on the trigger — a vertical double-chevron marking the control as a select. */
+function SelectIcon({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(select_exports.Select.Icon, {
+		"data-slot": SELECT_SLOTS.icon,
+		className: clsx$1(className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(Icon, {
+			icon: ChevronsUpDownIcon,
+			size: "sm"
+		})
+	});
+}
+/**
+* The modal scrim painted beneath the popup. Auto-rendered inside `Select.Popup` while the select is
+* `modal` (the default); transparent by default so the page is not dimmed, it still
+* captures outside clicks. Re-point `--noctis-select-backdrop-background-color` to a scrim role to dim.
+*/
+function SelectBackdrop({ className, ...props }) {
+	return /* @__PURE__ */ jsx(select_exports.Select.Backdrop, {
+		"data-slot": SELECT_SLOTS.backdrop,
+		className: clsx$1(className),
+		...props
+	});
+}
+/**
+* The floating listbox — portaled, elevated through `<Surface>`, and animated — holding the items,
+* groups, and separators. Opens aligned to the trigger and caps at the available viewport height,
+* scrolling its list while keeping the keyboard highlight in view. By default it overlaps the trigger so
+* the selected row lines up with the trigger's value (the "overlay" variant); pass
+* `alignItemWithTrigger={false}` to open below the trigger instead (the "below" variant). Auto-renders
+* the modal `Backdrop` (while modal), the sticky scroll arrows, and the scrollable `List` for you.
+*/
+function SelectPopup({ side = "bottom", align = "start", sideOffset = 6, alignItemWithTrigger = true, collisionPadding = 8, className, style, children, ...props }) {
+	const { modal } = useSelectContext("Popup");
+	return /* @__PURE__ */ jsxs(select_exports.Select.Portal, { children: [modal ? /* @__PURE__ */ jsx(SelectBackdrop, {}) : null, /* @__PURE__ */ jsx(select_exports.Select.Positioner, {
+		side,
+		align,
+		sideOffset,
+		alignItemWithTrigger,
+		collisionPadding,
+		"data-slot": SELECT_SLOTS.positioner,
+		children: /* @__PURE__ */ jsxs(select_exports.Select.Popup, {
+			"data-slot": SELECT_SLOTS.popup,
+			render: /* @__PURE__ */ jsx(Surface, {
+				elevation: "elevated",
+				bordered: true,
+				shadow: "popover"
+			}),
+			style: {
+				transformOrigin: "var(--transform-origin)",
+				maxHeight: "var(--available-height)",
+				minInlineSize: "max(var(--_select-popup-min-width), calc(var(--anchor-width) + var(--_select-popup-overlay-inset, 0px)))",
+				maxInlineSize: "min(var(--_select-popup-max-width), var(--available-width))",
+				...style
+			},
+			className: clsx$1(className),
+			...props,
+			children: [
+				/* @__PURE__ */ jsx(SelectScrollUpArrow, {}),
+				/* @__PURE__ */ jsx(SelectList, { children }),
+				/* @__PURE__ */ jsx(SelectScrollDownArrow, {})
+			]
+		})
+	})] });
+}
+/**
+* The sticky strip pinned to the popup's top edge that scrolls the list up on hover — a pointer
+* affordance only (it never renders for touch, and keyboard nav scrolls via the arrow keys), so it is
+* `aria-hidden`. Rendered for you inside `Select.Popup`; appears only while the list can scroll up.
+*/
+function SelectScrollUpArrow({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(select_exports.Select.ScrollUpArrow, {
+		"aria-hidden": true,
+		"data-slot": SELECT_SLOTS.scrollUpArrow,
+		className: clsx$1(className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(Icon, {
+			icon: ChevronUpIcon,
+			size: "sm"
+		})
+	});
+}
+/**
+* The sticky strip pinned to the popup's bottom edge that scrolls the list down on hover — a pointer
+* affordance only (`aria-hidden`, like its sibling). Rendered for you inside `Select.Popup`; appears
+* only while the list can scroll down.
+*/
+function SelectScrollDownArrow({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(select_exports.Select.ScrollDownArrow, {
+		"aria-hidden": true,
+		"data-slot": SELECT_SLOTS.scrollDownArrow,
+		className: clsx$1(className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(Icon, {
+			icon: ChevronDownIcon,
+			size: "sm"
+		})
+	});
+}
+/**
+* The scrollable list wrapping the popup's rows. Rendered for you inside `Select.Popup`. Its scrollbar
+* is hidden — the sticky scroll arrows are the overflow affordance (Radix/macOS behaviour).
+*/
+function SelectList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(select_exports.Select.List, {
+		"data-slot": SELECT_SLOTS.list,
+		className: clsx$1(className),
+		...props
+	});
+}
+/**
+* A selectable option. Pass its `value` (any serialisable value, including an object) and label
+* children; an optional leading `icon` (a glyph, colour dot, or avatar) sits in a reserved column, an
+* optional `description` adds a muted second line, and a trailing check marks the selected row. Picking
+* a row updates the value (and closes the popup for single selects).
+*
+* Renders its own `ItemIcon` / `ItemText` / `ItemDescription` / `ItemIndicator` from the props —
+* compose those parts by hand only when a row needs custom inner structure.
+*/
+function SelectItem({ className, children, icon, description, ...props }) {
+	return /* @__PURE__ */ jsxs(select_exports.Select.Item, {
+		"data-slot": SELECT_SLOTS.item,
+		className: clsx$1(className),
+		...props,
+		children: [
+			icon != null ? /* @__PURE__ */ jsx(SelectItemIcon, { children: icon }) : null,
+			/* @__PURE__ */ jsxs("span", {
+				"data-slot": SELECT_SLOTS.itemContent,
+				children: [/* @__PURE__ */ jsx(SelectItemText, { children }), description != null ? /* @__PURE__ */ jsx(SelectItemDescription, { children: description }) : null]
+			}),
+			/* @__PURE__ */ jsx(SelectItemIndicator, { children: /* @__PURE__ */ jsx(Icon, {
+				icon: CheckIcon,
+				size: "sm"
+			}) })
+		]
+	});
+}
+/** The row's leading content column (icon, colour dot, or avatar), reserved so labels align. */
+function SelectItemIcon({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": SELECT_SLOTS.itemIcon,
+		className: clsx$1(className),
+		...props
+	});
+}
+/** The row's label text, mirrored into the trigger's `Select.Value` when the row is selected. */
+function SelectItemText({ className, ...props }) {
+	return /* @__PURE__ */ jsx(select_exports.Select.ItemText, {
+		"data-slot": SELECT_SLOTS.itemText,
+		className: clsx$1(className),
+		...props
+	});
+}
+/** A row's muted second line — a short hint beneath the label on a two-line row. */
+function SelectItemDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": SELECT_SLOTS.itemDescription,
+		className: clsx$1(className),
+		...props
+	});
+}
+/** The trailing check marking the selected row; Base UI mounts it only while the row is selected. */
+function SelectItemIndicator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(select_exports.Select.ItemIndicator, {
+		"data-slot": SELECT_SLOTS.itemIndicator,
+		className: clsx$1(className),
+		...props
+	});
+}
+/** A labelled section of related items. Put a `GroupLabel` inside to name it for screen readers. */
+function SelectGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(select_exports.Select.Group, {
+		"data-slot": SELECT_SLOTS.group,
+		className: clsx$1(className),
+		...props
+	});
+}
+/** The group's muted, non-interactive heading — announced as the group's accessible name. */
+function SelectGroupLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(select_exports.Select.GroupLabel, {
+		"data-slot": SELECT_SLOTS.groupLabel,
+		className: clsx$1(className),
+		...props
+	});
+}
+/**
+* A hairline between groups of options. Presentational (`aria-hidden`) — a `role="separator"` is not a
+* valid `listbox` child, and the grouping is already conveyed by the `Group`/`GroupLabel` structure.
+*/
+function SelectSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": true,
+		"data-slot": SELECT_SLOTS.separator,
+		className: clsx$1(className),
+		...props
+	});
+}
+/**
+* A select: a field-shaped `Trigger` opens a floating listbox of options. Built on Base UI's Select for
+* listbox semantics, keyboard navigation (arrows, Home/End, PageUp/PageDown, typeahead), focus
+* management, scroll arrows, the modal backdrop, and `Escape`/outside-click dismissal, plus native form
+* integration via the hidden input.
+*
+* Compose from parts: `Select.Root` owns the value and open state, `Select.Trigger` (holding a
+* `Select.Value` and a `Select.Icon`) opens it, and `Select.Popup` holds the rows — `Item`s with their
+* leading `icon`, label, optional `description`, and trailing check, `Group`s with a `GroupLabel`, and
+* `Separator`s. The trigger wears the field look (calm ring-less accent-border focus); the popup is an
+* elevated `<Surface>`, the highlighted row picks up a neutral fill, and the selected row is marked by
+* its trailing check (the accent reserved for that check, not a row tint).
+*
+* Styling is precompiled in `select.css`, keyed off each part's prefixed `data-slot`. Each part also
+* carries the D12 `props()` escape hatch via `Object.assign` (e.g. `Select.Item.props({ selected })`),
+* returning a spreadable `{ "data-slot": "noctis-select-<part>", ...dataAttrs }` bag for a foreign
+* element a `<Select.*>` can't wrap.
+*
+* The runtime compound is a plain object (kept tree-shakeable); per-part prop and state types are
+* exposed through the matching `Select` namespace — e.g. `Select.Item.Props`.
+*/
+const Select = {
+	Root: SelectRoot,
+	Trigger: Object.assign(SelectTrigger, { props: triggerProps }),
+	Value: Object.assign(SelectValue, { props: valueProps }),
+	Icon: Object.assign(SelectIcon, { props: iconProps }),
+	Backdrop: Object.assign(SelectBackdrop, { props: backdropProps }),
+	Popup: Object.assign(SelectPopup, { props: popupProps }),
+	ScrollUpArrow: Object.assign(SelectScrollUpArrow, { props: scrollUpArrowProps }),
+	ScrollDownArrow: Object.assign(SelectScrollDownArrow, { props: scrollDownArrowProps }),
+	List: Object.assign(SelectList, { props: listProps }),
+	Item: Object.assign(SelectItem, { props: itemProps }),
+	ItemIcon: Object.assign(SelectItemIcon, { props: itemIconProps }),
+	ItemText: Object.assign(SelectItemText, { props: itemTextProps }),
+	ItemDescription: Object.assign(SelectItemDescription, { props: itemDescriptionProps }),
+	ItemIndicator: Object.assign(SelectItemIndicator, { props: itemIndicatorProps }),
+	Group: Object.assign(SelectGroup, { props: groupProps }),
+	GroupLabel: Object.assign(SelectGroupLabel, { props: groupLabelProps }),
+	Separator: Object.assign(SelectSeparator, { props: separatorProps })
+};
+//#endregion
+export { Select };

package/dist/components/select/select.props.d.ts

@@ -0,0 +1,110 @@
+//#region src/components/select/select.props.d.ts
+/** A spreadable data-attribute prop bag — the shape every `Select.*.props()` returns. */
+type SelectPartProps = {
+  /** The slot value the matching `select.css` rules anchor on. */"data-slot": string; /** Forwarded verbatim — styling is attribute-driven, so this is an optional consumer passthrough. */
+  className?: string; /** A data-attribute present (empty string) or absent (`undefined`); never `false`. */
+  [attr: `data-${string}`]: string | undefined;
+};
+/** Common shape: every part's `.props()` accepts an optional `className` passthrough. */
+interface BasePropsArgs {
+  /** Forwarded verbatim onto the returned prop bag. */
+  className?: string;
+}
+/** Argument to `Select.Trigger.props(...)` — the size axis plus the open/disabled/invalid/readonly state. */
+interface SelectTriggerPropsArgs extends BasePropsArgs {
+  /** The trigger size, stamped as `data-size` — the CSS keys the trigger's height/font metrics off it. @default "md" */
+  size?: "md" | "lg";
+  /** Whether the popup is open (drives the open affordance via `data-open`). */
+  open?: boolean;
+  /** Whether the trigger is disabled (drives the not-allowed affordance via `data-disabled`). */
+  disabled?: boolean;
+  /** Whether the field is invalid (drives the danger border/ring via `data-invalid`). */
+  invalid?: boolean;
+  /** Whether the field is read-only (drives the quiet, non-interactive chrome via `data-readonly`). */
+  readonly?: boolean;
+}
+/** Argument to `Select.Item.props(...)` — the per-row selected/highlighted/disabled state the CSS keys off. */
+interface SelectItemPropsArgs extends BasePropsArgs {
+  /** Whether this row is the selected value (drives the trailing check via `data-selected`). */
+  selected?: boolean;
+  /** Whether the pointer/keyboard is over this row (drives the highlight via `data-highlighted`). */
+  highlighted?: boolean;
+  /** Whether this row is disabled (drives the not-allowed affordance via `data-disabled`). */
+  disabled?: boolean;
+}
+/** Argument to a stateless part's `.props(...)` — no variants/state of its own. */
+type SelectStatelessPropsArgs = BasePropsArgs;
+/** Trigger prop bag: slot anchor plus the `data-size` axis and the open/disabled/invalid/readonly state. */
+declare function triggerProps({
+  size,
+  open,
+  disabled,
+  invalid,
+  readonly,
+  className
+}?: SelectTriggerPropsArgs): SelectPartProps;
+/** Value prop bag: just the slot anchor. */
+declare function valueProps({
+  className
+}?: SelectStatelessPropsArgs): SelectPartProps;
+/** Icon prop bag: just the slot anchor (the trailing chevron). */
+declare function iconProps({
+  className
+}?: SelectStatelessPropsArgs): SelectPartProps;
+/** Backdrop prop bag: just the slot anchor (the modal scrim behind the popup). */
+declare function backdropProps({
+  className
+}?: SelectStatelessPropsArgs): SelectPartProps;
+/** Popup prop bag: just the slot anchor (the popup surface paint is owned by the composed Surface). */
+declare function popupProps({
+  className
+}?: SelectStatelessPropsArgs): SelectPartProps;
+/** Scroll-up-arrow prop bag: just the slot anchor (the sticky top scroll affordance). */
+declare function scrollUpArrowProps({
+  className
+}?: SelectStatelessPropsArgs): SelectPartProps;
+/** Scroll-down-arrow prop bag: just the slot anchor (the sticky bottom scroll affordance). */
+declare function scrollDownArrowProps({
+  className
+}?: SelectStatelessPropsArgs): SelectPartProps;
+/** List prop bag: just the slot anchor. */
+declare function listProps({
+  className
+}?: SelectStatelessPropsArgs): SelectPartProps;
+/** Item prop bag: slot anchor plus the `data-selected`/`data-highlighted`/`data-disabled` state. */
+declare function itemProps({
+  selected,
+  highlighted,
+  disabled,
+  className
+}?: SelectItemPropsArgs): SelectPartProps;
+/** Item-icon prop bag: just the slot anchor (the leading icon/dot/avatar column). */
+declare function itemIconProps({
+  className
+}?: SelectStatelessPropsArgs): SelectPartProps;
+/** Item-text prop bag: just the slot anchor. */
+declare function itemTextProps({
+  className
+}?: SelectStatelessPropsArgs): SelectPartProps;
+/** Item-description prop bag: just the slot anchor (the muted second line on a two-line row). */
+declare function itemDescriptionProps({
+  className
+}?: SelectStatelessPropsArgs): SelectPartProps;
+/** Item-indicator prop bag: just the slot anchor (the trailing check). */
+declare function itemIndicatorProps({
+  className
+}?: SelectStatelessPropsArgs): SelectPartProps;
+/** Group prop bag: just the slot anchor. */
+declare function groupProps({
+  className
+}?: SelectStatelessPropsArgs): SelectPartProps;
+/** Group-label prop bag: just the slot anchor. */
+declare function groupLabelProps({
+  className
+}?: SelectStatelessPropsArgs): SelectPartProps;
+/** Separator prop bag: just the slot anchor. */
+declare function separatorProps({
+  className
+}?: SelectStatelessPropsArgs): SelectPartProps;
+//#endregion
+export { SelectPartProps, backdropProps, groupLabelProps, groupProps, iconProps, itemDescriptionProps, itemIconProps, itemIndicatorProps, itemProps, itemTextProps, listProps, popupProps, scrollDownArrowProps, scrollUpArrowProps, separatorProps, triggerProps, valueProps };

package/dist/components/select/select.props.js

@@ -0,0 +1,103 @@
+import { SELECT_SLOTS } from "./select.slots.js";
+//#region src/components/select/select.props.ts
+/**
+* The D12 unified variant contract for Select — a per-part set of `props(...)` builders that each
+* return a **spreadable props object** of the form `{ "data-slot": "noctis-select-<part>", ...dataAttrs }`,
+* derived from the part's variant/state inputs.
+*
+* Under the single-`data-slot` anchor model the `data-slot` is the only styling hook needed —
+* `select.css` keys every rule off it — so spreading a part's `props()` onto a *foreign* element
+* styles it as that part:
+*
+*     <div {...Select.Item.props({ selected: true, highlighted: true })}>Apple</div>
+*     // → <div data-slot="noctis-select-item" data-selected="" data-highlighted="">
+*
+* The escape hatch carries no className (styling is attribute-driven); an optional `className`
+* passthrough is accepted and forwarded verbatim. The same variant→data-attribute→values mapping is
+* emitted as data from the token graph (`generated/declarations.json` → `variantSchema`) so non-React /
+* agent consumers can hand-write the markup from the docs.
+*/
+/** Stamp a boolean state as a bare data-attribute: present (`""`) when on, absent (`undefined`) when off. */
+const flag = (on) => on ? "" : void 0;
+const withClassName = (bag, className) => className === void 0 ? bag : {
+	...bag,
+	className
+};
+/** Trigger prop bag: slot anchor plus the `data-size` axis and the open/disabled/invalid/readonly state. */
+function triggerProps({ size = "md", open, disabled, invalid, readonly, className } = {}) {
+	return withClassName({
+		"data-slot": SELECT_SLOTS.trigger,
+		"data-size": size,
+		"data-open": flag(open),
+		"data-disabled": flag(disabled),
+		"data-invalid": flag(invalid),
+		"data-readonly": flag(readonly)
+	}, className);
+}
+/** Value prop bag: just the slot anchor. */
+function valueProps({ className } = {}) {
+	return withClassName({ "data-slot": SELECT_SLOTS.value }, className);
+}
+/** Icon prop bag: just the slot anchor (the trailing chevron). */
+function iconProps({ className } = {}) {
+	return withClassName({ "data-slot": SELECT_SLOTS.icon }, className);
+}
+/** Backdrop prop bag: just the slot anchor (the modal scrim behind the popup). */
+function backdropProps({ className } = {}) {
+	return withClassName({ "data-slot": SELECT_SLOTS.backdrop }, className);
+}
+/** Popup prop bag: just the slot anchor (the popup surface paint is owned by the composed Surface). */
+function popupProps({ className } = {}) {
+	return withClassName({ "data-slot": SELECT_SLOTS.popup }, className);
+}
+/** Scroll-up-arrow prop bag: just the slot anchor (the sticky top scroll affordance). */
+function scrollUpArrowProps({ className } = {}) {
+	return withClassName({ "data-slot": SELECT_SLOTS.scrollUpArrow }, className);
+}
+/** Scroll-down-arrow prop bag: just the slot anchor (the sticky bottom scroll affordance). */
+function scrollDownArrowProps({ className } = {}) {
+	return withClassName({ "data-slot": SELECT_SLOTS.scrollDownArrow }, className);
+}
+/** List prop bag: just the slot anchor. */
+function listProps({ className } = {}) {
+	return withClassName({ "data-slot": SELECT_SLOTS.list }, className);
+}
+/** Item prop bag: slot anchor plus the `data-selected`/`data-highlighted`/`data-disabled` state. */
+function itemProps({ selected, highlighted, disabled, className } = {}) {
+	return withClassName({
+		"data-slot": SELECT_SLOTS.item,
+		"data-selected": flag(selected),
+		"data-highlighted": flag(highlighted),
+		"data-disabled": flag(disabled)
+	}, className);
+}
+/** Item-icon prop bag: just the slot anchor (the leading icon/dot/avatar column). */
+function itemIconProps({ className } = {}) {
+	return withClassName({ "data-slot": SELECT_SLOTS.itemIcon }, className);
+}
+/** Item-text prop bag: just the slot anchor. */
+function itemTextProps({ className } = {}) {
+	return withClassName({ "data-slot": SELECT_SLOTS.itemText }, className);
+}
+/** Item-description prop bag: just the slot anchor (the muted second line on a two-line row). */
+function itemDescriptionProps({ className } = {}) {
+	return withClassName({ "data-slot": SELECT_SLOTS.itemDescription }, className);
+}
+/** Item-indicator prop bag: just the slot anchor (the trailing check). */
+function itemIndicatorProps({ className } = {}) {
+	return withClassName({ "data-slot": SELECT_SLOTS.itemIndicator }, className);
+}
+/** Group prop bag: just the slot anchor. */
+function groupProps({ className } = {}) {
+	return withClassName({ "data-slot": SELECT_SLOTS.group }, className);
+}
+/** Group-label prop bag: just the slot anchor. */
+function groupLabelProps({ className } = {}) {
+	return withClassName({ "data-slot": SELECT_SLOTS.groupLabel }, className);
+}
+/** Separator prop bag: just the slot anchor. */
+function separatorProps({ className } = {}) {
+	return withClassName({ "data-slot": SELECT_SLOTS.separator }, className);
+}
+//#endregion
+export { backdropProps, groupLabelProps, groupProps, iconProps, itemDescriptionProps, itemIconProps, itemIndicatorProps, itemProps, itemTextProps, listProps, popupProps, scrollDownArrowProps, scrollUpArrowProps, separatorProps, triggerProps, valueProps };

package/dist/components/select/select.slots.d.ts

@@ -0,0 +1,38 @@
+//#region src/components/select/select.slots.d.ts
+/**
+ * The `data-*` hooks `Select` stamps on its parts, for host-side styling and tests. Slot values mark
+ * each rendered element; the state attributes are emitted by Base UI's Select — pair a slot with a
+ * state to target, say, the trigger only while its popup is open or the currently selected item.
+ */
+declare enum SelectDataAttributes {
+  /** The slot marker on every rendered part. */
+  slot = "data-slot",
+  /** The trigger size, mirroring the `size` prop (`md`/`lg`); the component layer keys the trigger's metrics off it. */
+  size = "data-size",
+  /** Present on the trigger and popup while the select is open. */
+  open = "data-open",
+  /** Present on the trigger and popup while the select is closed. */
+  closed = "data-closed",
+  /** Present on the trigger when no value is selected (the placeholder is showing). */
+  placeholder = "data-placeholder",
+  /** Present on the trigger while the field is invalid — paints the danger border/ring. */
+  invalid = "data-invalid",
+  /** Present on the trigger while the select is read-only — quiet, non-interactive chrome. */
+  readonly = "data-readonly",
+  /** Present on the item the pointer or keyboard is currently over. */
+  highlighted = "data-highlighted",
+  /** Present on the currently selected item (and its trailing check). */
+  selected = "data-selected",
+  /** Present on a disabled trigger or item. */
+  disabled = "data-disabled",
+  /** Present on a scroll arrow while the list can scroll in its direction (drives its fade). */
+  visible = "data-visible",
+  /** The side of the anchor the popup actually rendered on (`bottom`, `top`, …). */
+  side = "data-side",
+  /** Present on the popup/backdrop/scroll-arrows for the first frame after mount — the transition's start state. */
+  startingStyle = "data-starting-style",
+  /** Present on the popup/backdrop/scroll-arrows while they transition out before unmounting. */
+  endingStyle = "data-ending-style"
+}
+//#endregion
+export { SelectDataAttributes };

package/dist/components/select/select.slots.js

@@ -0,0 +1,67 @@
+//#region src/components/select/select.slots.ts
+/**
+* The slot vocabulary every `Select` part stamps as its `data-slot`. The authored source the
+* orchestration file reads from, prefixed `noctis-{component}-{part}` (the precompiled `select.css`
+* keys every rule off these anchors); SLOTS.md still generates from the token-graph declarations.
+*
+* `positioner` is a styling-only anchor (the z-index wrapper around the portalled popup) — it carries
+* no token mints, so it lives here but not in the token-graph anatomy.
+*/
+const SELECT_SLOTS = {
+	trigger: "noctis-select-trigger",
+	value: "noctis-select-value",
+	icon: "noctis-select-icon",
+	backdrop: "noctis-select-backdrop",
+	positioner: "noctis-select-positioner",
+	popup: "noctis-select-popup",
+	scrollUpArrow: "noctis-select-scroll-up-arrow",
+	scrollDownArrow: "noctis-select-scroll-down-arrow",
+	list: "noctis-select-list",
+	item: "noctis-select-item",
+	itemIcon: "noctis-select-item-icon",
+	itemContent: "noctis-select-item-content",
+	itemText: "noctis-select-item-text",
+	itemDescription: "noctis-select-item-description",
+	itemIndicator: "noctis-select-item-indicator",
+	group: "noctis-select-group",
+	groupLabel: "noctis-select-group-label",
+	separator: "noctis-select-separator"
+};
+/**
+* The `data-*` hooks `Select` stamps on its parts, for host-side styling and tests. Slot values mark
+* each rendered element; the state attributes are emitted by Base UI's Select — pair a slot with a
+* state to target, say, the trigger only while its popup is open or the currently selected item.
+*/
+let SelectDataAttributes = /* @__PURE__ */ function(SelectDataAttributes) {
+	/** The slot marker on every rendered part. */
+	SelectDataAttributes["slot"] = "data-slot";
+	/** The trigger size, mirroring the `size` prop (`md`/`lg`); the component layer keys the trigger's metrics off it. */
+	SelectDataAttributes["size"] = "data-size";
+	/** Present on the trigger and popup while the select is open. */
+	SelectDataAttributes["open"] = "data-open";
+	/** Present on the trigger and popup while the select is closed. */
+	SelectDataAttributes["closed"] = "data-closed";
+	/** Present on the trigger when no value is selected (the placeholder is showing). */
+	SelectDataAttributes["placeholder"] = "data-placeholder";
+	/** Present on the trigger while the field is invalid — paints the danger border/ring. */
+	SelectDataAttributes["invalid"] = "data-invalid";
+	/** Present on the trigger while the select is read-only — quiet, non-interactive chrome. */
+	SelectDataAttributes["readonly"] = "data-readonly";
+	/** Present on the item the pointer or keyboard is currently over. */
+	SelectDataAttributes["highlighted"] = "data-highlighted";
+	/** Present on the currently selected item (and its trailing check). */
+	SelectDataAttributes["selected"] = "data-selected";
+	/** Present on a disabled trigger or item. */
+	SelectDataAttributes["disabled"] = "data-disabled";
+	/** Present on a scroll arrow while the list can scroll in its direction (drives its fade). */
+	SelectDataAttributes["visible"] = "data-visible";
+	/** The side of the anchor the popup actually rendered on (`bottom`, `top`, …). */
+	SelectDataAttributes["side"] = "data-side";
+	/** Present on the popup/backdrop/scroll-arrows for the first frame after mount — the transition's start state. */
+	SelectDataAttributes["startingStyle"] = "data-starting-style";
+	/** Present on the popup/backdrop/scroll-arrows while they transition out before unmounting. */
+	SelectDataAttributes["endingStyle"] = "data-ending-style";
+	return SelectDataAttributes;
+}({});
+//#endregion
+export { SELECT_SLOTS, SelectDataAttributes };

package/dist/components/separator/index.d.ts

@@ -0,0 +1,2 @@
+import { SeparatorDataAttributes } from "./separator.slots.js";
+import { Separator } from "./separator.js";