<st-select>

JSON type: Select

A fully custom-styled replacement for native <select>, used everywhere the wizard needs a single-choice dropdown (template source, list, document library, admin roles, ...).

Built on the CSS Customizable Select API (appearance: base-select) — still a real <select>/<option> element tree, so focus, keyboard (arrows/Home/End/typeahead), and ARIA all come from the browser for free, but the trigger (<button>/<selectedcontent>) and popup (::picker(select)) are fully styleable instead of OS-rendered. Chromium only for now (Firefox/Safari fall back to an unstyled native <select> — the extra <button>/<selectedcontent> markup is simply not rendered by browsers that don't support the parsing/CSS additions, so the control still works there, just without the custom look).

options intentionally has no "unselected" placeholder entry — set value="" (or any value with no matching option) and it falls back to showing placeholder in the trigger instead, letting callers swap the placeholder text dynamically (e.g. "Select a list" vs "Select a list first") without needing a synthetic option in the list. Internally this is a real hidden/disabled <option value="">, since a native <select> always has some option selected.

Fires select-change (detail: { value }) only when the value actually changes, matching native <select>'s change event semantics.

link-href optionally renders an external-link button in front of field-label — the same glyph/placement as the "open library" links placed next to the Templates/Save-location breadcrumbs — for callers that want a one-click way to open whatever the current selection points at (e.g. the SharePoint site or library) in a new tab.

Usage

import '@sankhyatronics/sankhya-cms/select'; // registers <st-select>

Properties

Property	Attribute	Type	Default	Description
options	—	SelectOption[]	[]
value	value	string	''
placeholder	placeholder	string	'Select…'
fieldLabel	field-label	string	''	Renders an internal <label> above the trigger, associated via aria-labelledby. Leave empty when the field is labeled some other way (e.g. context alone).
linkHref	link-href	string	''	Optional URL for an external-link button rendered in front of field-label (same glyph/placement as the "open library" links next to the Templates/Save-location breadcrumbs) — e.g. a link to the SharePoint site or library the current selection points at. Ignored when field-label is empty, since there'd be nothing to place it in front of.
linkLabel	link-label	string	'Open'	Accessible name/title for the link-href button.
selectLabel	select-label	string	''	Accessible name for the trigger when there's no visible field-label (e.g. a filter-row select). Ignored when field-label is set.
disabled	disabled	boolean	false
ghost	ghost	boolean	false	Borderless variant for a header/toolbar utility slot — see the :host([ghost]) styles.

See the live examples in Storybook.