@asnewyla/select 0.2.0 → 0.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.css +4 -2
  2. package/dist/index.css.map +1 -1
  3. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -21,6 +21,8 @@
21
21
  font-size: var(--xd-font-size-sm, 0.8125rem);
22
22
  font-weight: var(--xd-font-weight-semibold, 600);
23
23
  line-height: var(--xd-line-height-normal, 1.25);
24
+ letter-spacing: var(--xd-letter-spacing-label, 0);
25
+ text-transform: var(--xd-text-transform-label, none);
24
26
  color: var(--xd-color-text, #0f172a);
25
27
  }
26
28
  .xd-select-trigger {
@@ -28,7 +30,7 @@
28
30
  align-items: center;
29
31
  flex-wrap: wrap;
30
32
  gap: var(--xd-space-xs, 0.25rem);
31
- min-height: 2.25rem;
33
+ min-height: var(--xd-control-height-md, 2.25rem);
32
34
  border: var(--xd-border-width-thin, 1px) solid var(--xd-color-border-strong, #6b7688);
33
35
  border-radius: var(--xd-radius-md, 0.375rem);
34
36
  padding: var(--xd-space-sm, 0.375rem) var(--xd-space-md, 0.5rem);
@@ -149,7 +151,7 @@
149
151
  overflow-y: auto;
150
152
  overflow-x: hidden;
151
153
  overscroll-behavior: contain;
152
- border: var(--xd-border-width-thin, 1px) solid var(--xd-color-border, #cbd5e1);
154
+ border: var(--xd-frame-border-width, 1px) solid var(--xd-color-border, #cbd5e1);
153
155
  border-radius: var(--xd-radius-md, 0.375rem);
154
156
  padding: var(--xd-space-xs, 0.25rem);
155
157
  background-color: var(--xd-color-surface, #ffffff);
package/dist/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Select.css"],"sourcesContent":["/*\n * asnewyla/select -- Select.css\n *\n * DOM produced by Select.tsx + UnstyledSelect.tsx:\n *\n * div.xd-select Select.tsx wrapper\n * |- label.xd-select-label\n * |- div UnstyledSelect containerRef,\n * | | unclassed -- reached via :has()\n * | |- div.xd-select-trigger role=\"combobox\"\n * | | data-open / data-invalid / data-disabled\n * | | holds span.xd-select-value, or\n * | | span.xd-select-chips when multiple\n * | '- div[role=\"listbox\"] present only while open\n * | |- div > input search field\n * | '- button[role=\"option\"] data-selected / data-disabled\n * '- div.xd-select-error\n *\n * Options take REAL focus (useRovingFocus calls .focus()), so\n * :focus-visible is the keyboard indicator -- there is no data-active\n * attribute to style. :hover and :focus-visible therefore share one fill.\n *\n * ─── Changes in this revision ───\n *\n * 1. The previous version referenced five tokens that do not exist:\n * --xd-color-surface, --xd-color-surface-hover, --xd-shadow-md,\n * --xd-color-focus and --xd-color-text. Every one silently fell back\n * to its hardcoded literal, so the component ignored the active theme\n * entirely and the popover rendered WHITE in dark mode. Those tokens\n * now exist in tokens.css; this file reads them.\n *\n * 2. The popover was in normal flow with a margin-top, so opening the\n * Select pushed everything below it down the page. It is now\n * absolutely positioned against the containerRef.\n *\n * 3. A selected option was filled with --xd-color-primary while focused\n * options also draw a ring, so the selected row swallowed the focus\n * indicator. Selected is now carried by colour plus a check mark;\n * the fill is reserved for hover/focus, which is the transient state\n * the user needs to track.\n *\n * 4. The listbox had no max-height, so a long option list grew without\n * bound. Now caps and scrolls, with a sticky search field.\n *\n * 5. Interactive edges use --xd-color-border-strong. --xd-color-border\n * is ~1.3:1 against its surface: correct for the popover's own outline\n * (decorative), wrong for a control the user has to find (WCAG 1.4.11).\n *\n * 6. The single-select value and the empty-multi-select placeholder are\n * now real elements (span.xd-select-value, from Select.tsx's own\n * renderValue), not a bare text node -- so both can be dimmed and\n * truncated instead of only the (already-wrapped) chips case.\n *\n * Fallbacks below mirror tokens.css's default light palette, per the\n * soft-dependency model -- a consumer importing no token file still gets\n * a working component.\n *\n * Not fixable here, needs measurement in UnstyledSelect.tsx: the popover\n * never flips upward near the viewport bottom.\n */\n\n/* This package has no global reset to rely on, and `width: 100%` +\n padding/border below (the search input, options) needs border-box to\n not overflow its container — content-box (the browser default) adds\n padding/border on top of that 100%, which is exactly what caused the\n horizontal scrollbar on the popup. Scoped to this component's own\n subtree rather than a real global reset, since nothing here should\n reach outside `.xd-select`. */\n.xd-select,\n.xd-select *,\n.xd-select *::before,\n.xd-select *::after {\n box-sizing: border-box;\n}\n\n.xd-select {\n /* Local, component-scoped values. Not tokens: nothing else in the\n library needs a popover offset or a listbox height cap. */\n --xd-select-gap: var(--xd-space-xs, 0.25rem);\n --xd-select-max-h: 17rem;\n\n display: flex;\n flex-direction: column;\n gap: var(--xd-space-xs, 0.25rem);\n /* Without this, a short label/placeholder (\"Fruit\" / \"Choose a fruit\")\n lets the whole field shrink to fit that text, reading as an\n undersized control rather than a normal-width form field. Still just\n a floor — a longer value or a wider parent can grow it past this. */\n min-width: 14rem;\n color: var(--xd-color-text, #0f172a);\n}\n\n/* UnstyledSelect's container has no class of its own; it is the\n positioning context for the popover. :has() is Baseline since 2023.\n To avoid depending on it, add className=\"xd-select-field\" to the\n containerRef div in UnstyledSelect.tsx and swap this one selector. */\n.xd-select > div:has(> .xd-select-trigger) {\n position: relative;\n}\n\n/* --- Label --- */\n\n.xd-select-label {\n font-size: var(--xd-font-size-sm, 0.8125rem);\n font-weight: var(--xd-font-weight-semibold, 600);\n line-height: var(--xd-line-height-normal, 1.25);\n color: var(--xd-color-text, #0f172a);\n}\n\n/* --- Trigger --- */\n\n.xd-select-trigger {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--xd-space-xs, 0.25rem);\n min-height: 2.25rem;\n\n border: var(--xd-border-width-thin, 1px) solid\n var(--xd-color-border-strong, #6b7688);\n border-radius: var(--xd-radius-md, 0.375rem);\n padding: var(--xd-space-sm, 0.375rem) var(--xd-space-md, 0.5rem);\n\n font-family: inherit;\n font-size: var(--xd-font-size-md, 0.875rem);\n line-height: var(--xd-line-height-normal, 1.25);\n\n background-color: var(--xd-color-surface, #ffffff);\n color: var(--xd-color-text, #0f172a);\n cursor: pointer;\n box-shadow: var(--xd-shadow-sm, 0 1px 2px rgb(15 23 42 / 8%));\n\n transition:\n border-color var(--xd-motion-fast, 120ms ease-out),\n background-color var(--xd-motion-fast, 120ms ease-out),\n box-shadow var(--xd-motion-fast, 120ms ease-out);\n}\n\n.xd-select-trigger:hover:not([data-disabled=\"true\"]) {\n background-color: var(--xd-color-surface-hover, #f1f5f9);\n}\n\n.xd-select-trigger:focus-visible {\n outline: var(--xd-focus-ring-width, 2px) solid var(--xd-color-focus, #0f766e);\n outline-offset: var(--xd-focus-ring-offset, 2px);\n}\n\n/* Open: hold the focus colour on the border so the trigger reads as\n connected to the popover, which is a visually separate box. */\n.xd-select-trigger[data-open=\"true\"] {\n border-color: var(--xd-color-focus, #0f766e);\n background-color: var(--xd-color-surface-hover, #f1f5f9);\n}\n\n/* --- Chevron --- */\n\n.xd-select-trigger::after {\n content: \"\";\n flex-shrink: 0;\n margin-left: auto;\n width: 0.45em;\n height: 0.45em;\n border-right: var(--xd-border-width-thin, 1px) solid currentColor;\n border-bottom: var(--xd-border-width-thin, 1px) solid currentColor;\n color: var(--xd-color-text-muted, #475569);\n transform: translateY(-0.15em) rotate(45deg);\n transition:\n transform var(--xd-motion-fast, 120ms ease-out),\n color var(--xd-motion-fast, 120ms ease-out);\n}\n\n.xd-select-trigger[data-open=\"true\"]::after {\n color: var(--xd-color-text, #0f172a);\n transform: translateY(0.1em) rotate(-135deg);\n}\n\n/* --- Value / placeholder --- */\n\n.xd-select-value {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n min-width: 0;\n}\n\n.xd-select-value[data-placeholder=\"true\"] {\n color: var(--xd-color-text-muted, #475569);\n}\n\n/* --- Invalid --- */\n\n.xd-select-trigger[data-invalid=\"true\"] {\n border-color: var(--xd-color-destructive, #dc2626);\n}\n\n.xd-select-trigger[data-invalid=\"true\"]:focus-visible {\n outline-color: var(--xd-color-destructive, #dc2626);\n}\n\n.xd-select-error {\n font-size: var(--xd-font-size-sm, 0.8125rem);\n line-height: var(--xd-line-height-normal, 1.25);\n color: var(--xd-color-destructive, #dc2626);\n}\n\n/* --- Disabled --- */\n\n.xd-select-trigger[data-disabled=\"true\"] {\n opacity: var(--xd-opacity-disabled, 0.5);\n cursor: not-allowed;\n box-shadow: none;\n}\n\n/* --- Multi-select chips ---\n Neutral fill rather than --xd-color-primary: a row of six saturated\n chips overwhelms the trigger in every theme, and a chip is a value\n already chosen, not a call to action. The remove button carries the\n destructive colour on hover, where the warning is actually useful. */\n\n.xd-select-chips {\n display: inline-flex;\n flex-wrap: wrap;\n gap: var(--xd-space-xs, 0.25rem);\n min-width: 0;\n}\n\n.xd-select-chip {\n display: inline-flex;\n align-items: center;\n gap: var(--xd-space-xs, 0.25rem);\n\n border: var(--xd-border-width-thin, 1px) solid var(--xd-color-border, #cbd5e1);\n border-radius: var(--xd-radius-sm, 0.25rem);\n padding: 0.125rem var(--xd-space-xs, 0.25rem) 0.125rem\n var(--xd-space-sm, 0.375rem);\n\n background-color: var(--xd-color-surface-hover, #f1f5f9);\n color: var(--xd-color-text, #0f172a);\n font-size: var(--xd-font-size-sm, 0.8125rem);\n line-height: var(--xd-line-height-normal, 1.25);\n white-space: nowrap;\n}\n\n.xd-select-chip-remove {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: var(--xd-radius-sm, 0.25rem);\n width: 1rem;\n height: 1rem;\n padding: 0;\n\n background: transparent;\n color: var(--xd-color-text-muted, #475569);\n font-size: 0.875rem;\n line-height: 1;\n cursor: pointer;\n\n transition:\n background-color var(--xd-motion-fast, 120ms ease-out),\n color var(--xd-motion-fast, 120ms ease-out);\n}\n\n.xd-select-chip-remove:hover {\n background-color: var(--xd-color-destructive, #dc2626);\n color: var(--xd-on-destructive, #ffffff);\n}\n\n.xd-select-chip-remove:focus-visible {\n outline: var(--xd-focus-ring-width, 2px) solid var(--xd-color-focus, #0f766e);\n outline-offset: 1px;\n}\n\n/* --- Popup (rendered by UnstyledSelect as the trigger's next sibling) ---\n Absolutely positioned so opening does not reflow the page.\n Border AND shadow, both always: themes set --xd-shadow-md to none in\n dark mode, so the border is what keeps the popover legible there. */\n\n.xd-select-trigger + [role=\"listbox\"] {\n position: absolute;\n top: calc(100% + var(--xd-select-gap));\n left: 0;\n right: 0;\n z-index: 50;\n\n max-height: var(--xd-select-max-h);\n overflow-y: auto;\n /* Explicit, not just \"not set\": a non-visible overflow-y with overflow-x\n left at its visible default computes overflow-x to auto too (CSS\n Overflow spec) — so any future horizontal overflow in here would\n silently reappear as a scrollbar instead of just being invisible. */\n overflow-x: hidden;\n overscroll-behavior: contain;\n\n border: var(--xd-border-width-thin, 1px) solid var(--xd-color-border, #cbd5e1);\n border-radius: var(--xd-radius-md, 0.375rem);\n padding: var(--xd-space-xs, 0.25rem);\n background-color: var(--xd-color-surface, #ffffff);\n box-shadow: var(--xd-shadow-md, 0 4px 12px rgb(15 23 42 / 12%));\n\n scrollbar-width: thin;\n scrollbar-color: var(--xd-color-border-strong, #6b7688) transparent;\n\n transform-origin: top center;\n animation: xd-select-open var(--xd-motion-fast, 120ms ease-out);\n}\n\n@keyframes xd-select-open {\n from {\n opacity: 0;\n transform: translateY(-4px) scale(0.98);\n }\n}\n\n/* Search field, kept sticky so it stays reachable once the list scrolls.\n Negative margins let its background bleed to the popover's padding\n edge, so options do not appear to slide out from under it. */\n\n.xd-select-trigger + [role=\"listbox\"] > div:first-child {\n position: sticky;\n top: calc(var(--xd-space-xs, 0.25rem) * -1);\n z-index: 1;\n margin: calc(var(--xd-space-xs, 0.25rem) * -1)\n calc(var(--xd-space-xs, 0.25rem) * -1) var(--xd-space-xs, 0.25rem);\n padding: var(--xd-space-xs, 0.25rem);\n background-color: var(--xd-color-surface, #ffffff);\n}\n\n.xd-select-trigger + [role=\"listbox\"] input {\n width: 100%;\n border: var(--xd-border-width-thin, 1px) solid var(--xd-color-border, #cbd5e1);\n border-radius: var(--xd-radius-sm, 0.25rem);\n padding: var(--xd-space-sm, 0.375rem) var(--xd-space-md, 0.5rem);\n\n font-family: inherit;\n font-size: var(--xd-font-size-md, 0.875rem);\n line-height: var(--xd-line-height-normal, 1.25);\n\n background-color: var(--xd-color-surface-hover, #f1f5f9);\n color: var(--xd-color-text, #0f172a);\n\n transition: border-color var(--xd-motion-fast, 120ms ease-out);\n}\n\n.xd-select-trigger + [role=\"listbox\"] input::placeholder {\n color: var(--xd-color-text-muted, #475569);\n}\n\n.xd-select-trigger + [role=\"listbox\"] input:focus-visible {\n outline: var(--xd-focus-ring-width, 2px) solid var(--xd-color-focus, #0f766e);\n outline-offset: -1px;\n border-color: transparent;\n}\n\n/* --- Options ---\n :hover and :focus-visible share one fill. Two different highlights in\n an open listbox is a real usability bug: the user cannot tell which\n row Enter will commit. */\n\n.xd-select-trigger + [role=\"listbox\"] [role=\"option\"] {\n display: flex;\n align-items: center;\n gap: var(--xd-space-xs, 0.25rem);\n width: 100%;\n\n border: none;\n border-radius: var(--xd-radius-sm, 0.25rem);\n padding: var(--xd-space-sm, 0.375rem) var(--xd-space-md, 0.5rem);\n\n text-align: left;\n font-family: inherit;\n font-size: var(--xd-font-size-md, 0.875rem);\n font-weight: var(--xd-font-weight-regular, 400);\n line-height: var(--xd-line-height-normal, 1.25);\n\n background-color: transparent;\n color: var(--xd-color-text, #0f172a);\n cursor: pointer;\n scroll-margin: var(--xd-space-xs, 0.25rem);\n\n transition:\n background-color var(--xd-motion-fast, 120ms ease-out),\n color var(--xd-motion-fast, 120ms ease-out);\n}\n\n.xd-select-trigger\n + [role=\"listbox\"]\n [role=\"option\"]:hover:not([data-disabled=\"true\"]),\n.xd-select-trigger\n + [role=\"listbox\"]\n [role=\"option\"]:focus-visible:not([data-disabled=\"true\"]) {\n background-color: var(--xd-color-surface-hover, #f1f5f9);\n}\n\n.xd-select-trigger + [role=\"listbox\"] [role=\"option\"]:focus-visible {\n outline: var(--xd-focus-ring-width, 2px) solid var(--xd-color-focus, #0f766e);\n outline-offset: -2px;\n}\n\n/* Selected: colour and a check, never a fill -- a filled selected row\n plus a filled focused row makes the focused row unidentifiable. */\n.xd-select-trigger + [role=\"listbox\"] [role=\"option\"][data-selected=\"true\"] {\n color: var(--xd-color-focus, #0f766e);\n font-weight: var(--xd-font-weight-semibold, 600);\n}\n\n/* Check mark, drawn from two borders. The pseudo-element occupies its\n width on every row so labels stay aligned whether selected or not. */\n.xd-select-trigger + [role=\"listbox\"] [role=\"option\"]::before {\n content: \"\";\n flex-shrink: 0;\n width: 0.35em;\n height: 0.65em;\n margin: 0 0.2em 0.15em 0.1em;\n border-right: 2px solid currentColor;\n border-bottom: 2px solid currentColor;\n transform: rotate(45deg);\n opacity: 0;\n transition: opacity var(--xd-motion-fast, 120ms ease-out);\n}\n\n.xd-select-trigger\n + [role=\"listbox\"]\n [role=\"option\"][data-selected=\"true\"]::before {\n opacity: 1;\n}\n\n.xd-select-trigger + [role=\"listbox\"] [role=\"option\"][data-disabled=\"true\"] {\n opacity: var(--xd-opacity-disabled, 0.5);\n cursor: not-allowed;\n}\n\n/* --- Motion preference --- */\n\n@media (prefers-reduced-motion: reduce) {\n .xd-select-trigger,\n .xd-select-trigger::after,\n .xd-select-chip-remove,\n .xd-select-trigger + [role=\"listbox\"] input,\n .xd-select-trigger + [role=\"listbox\"] [role=\"option\"],\n .xd-select-trigger + [role=\"listbox\"] [role=\"option\"]::before {\n transition-duration: 1ms;\n }\n\n .xd-select-trigger + [role=\"listbox\"] {\n animation: none;\n }\n}\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../src/components/Select.css"],"sourcesContent":["/*\n * asnewyla/select -- Select.css\n *\n * DOM produced by Select.tsx + UnstyledSelect.tsx:\n *\n * div.xd-select Select.tsx wrapper\n * |- label.xd-select-label\n * |- div UnstyledSelect containerRef,\n * | | unclassed -- reached via :has()\n * | |- div.xd-select-trigger role=\"combobox\"\n * | | data-open / data-invalid / data-disabled\n * | | holds span.xd-select-value, or\n * | | span.xd-select-chips when multiple\n * | '- div[role=\"listbox\"] present only while open\n * | |- div > input search field\n * | '- button[role=\"option\"] data-selected / data-disabled\n * '- div.xd-select-error\n *\n * Options take REAL focus (useRovingFocus calls .focus()), so\n * :focus-visible is the keyboard indicator -- there is no data-active\n * attribute to style. :hover and :focus-visible therefore share one fill.\n *\n * ─── Changes in this revision ───\n *\n * 1. The previous version referenced five tokens that do not exist:\n * --xd-color-surface, --xd-color-surface-hover, --xd-shadow-md,\n * --xd-color-focus and --xd-color-text. Every one silently fell back\n * to its hardcoded literal, so the component ignored the active theme\n * entirely and the popover rendered WHITE in dark mode. Those tokens\n * now exist in tokens.css; this file reads them.\n *\n * 2. The popover was in normal flow with a margin-top, so opening the\n * Select pushed everything below it down the page. It is now\n * absolutely positioned against the containerRef.\n *\n * 3. A selected option was filled with --xd-color-primary while focused\n * options also draw a ring, so the selected row swallowed the focus\n * indicator. Selected is now carried by colour plus a check mark;\n * the fill is reserved for hover/focus, which is the transient state\n * the user needs to track.\n *\n * 4. The listbox had no max-height, so a long option list grew without\n * bound. Now caps and scrolls, with a sticky search field.\n *\n * 5. Interactive edges use --xd-color-border-strong. --xd-color-border\n * is ~1.3:1 against its surface: correct for the popover's own outline\n * (decorative), wrong for a control the user has to find (WCAG 1.4.11).\n *\n * 6. The single-select value and the empty-multi-select placeholder are\n * now real elements (span.xd-select-value, from Select.tsx's own\n * renderValue), not a bare text node -- so both can be dimmed and\n * truncated instead of only the (already-wrapped) chips case.\n *\n * Fallbacks below mirror tokens.css's default light palette, per the\n * soft-dependency model -- a consumer importing no token file still gets\n * a working component.\n *\n * Not fixable here, needs measurement in UnstyledSelect.tsx: the popover\n * never flips upward near the viewport bottom.\n */\n\n/* This package has no global reset to rely on, and `width: 100%` +\n padding/border below (the search input, options) needs border-box to\n not overflow its container — content-box (the browser default) adds\n padding/border on top of that 100%, which is exactly what caused the\n horizontal scrollbar on the popup. Scoped to this component's own\n subtree rather than a real global reset, since nothing here should\n reach outside `.xd-select`. */\n.xd-select,\n.xd-select *,\n.xd-select *::before,\n.xd-select *::after {\n box-sizing: border-box;\n}\n\n.xd-select {\n /* Local, component-scoped values. Not tokens: nothing else in the\n library needs a popover offset or a listbox height cap. */\n --xd-select-gap: var(--xd-space-xs, 0.25rem);\n --xd-select-max-h: 17rem;\n\n display: flex;\n flex-direction: column;\n gap: var(--xd-space-xs, 0.25rem);\n /* Without this, a short label/placeholder (\"Fruit\" / \"Choose a fruit\")\n lets the whole field shrink to fit that text, reading as an\n undersized control rather than a normal-width form field. Still just\n a floor — a longer value or a wider parent can grow it past this. */\n min-width: 14rem;\n color: var(--xd-color-text, #0f172a);\n}\n\n/* UnstyledSelect's container has no class of its own; it is the\n positioning context for the popover. :has() is Baseline since 2023.\n To avoid depending on it, add className=\"xd-select-field\" to the\n containerRef div in UnstyledSelect.tsx and swap this one selector. */\n.xd-select > div:has(> .xd-select-trigger) {\n position: relative;\n}\n\n/* --- Label --- */\n\n.xd-select-label {\n font-size: var(--xd-font-size-sm, 0.8125rem);\n font-weight: var(--xd-font-weight-semibold, 600);\n line-height: var(--xd-line-height-normal, 1.25);\n letter-spacing: var(--xd-letter-spacing-label, 0);\n text-transform: var(--xd-text-transform-label, none);\n color: var(--xd-color-text, #0f172a);\n}\n\n/* --- Trigger --- */\n\n.xd-select-trigger {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--xd-space-xs, 0.25rem);\n min-height: var(--xd-control-height-md, 2.25rem);\n\n border: var(--xd-border-width-thin, 1px) solid\n var(--xd-color-border-strong, #6b7688);\n border-radius: var(--xd-radius-md, 0.375rem);\n padding: var(--xd-space-sm, 0.375rem) var(--xd-space-md, 0.5rem);\n\n font-family: inherit;\n font-size: var(--xd-font-size-md, 0.875rem);\n line-height: var(--xd-line-height-normal, 1.25);\n\n background-color: var(--xd-color-surface, #ffffff);\n color: var(--xd-color-text, #0f172a);\n cursor: pointer;\n box-shadow: var(--xd-shadow-sm, 0 1px 2px rgb(15 23 42 / 8%));\n\n transition:\n border-color var(--xd-motion-fast, 120ms ease-out),\n background-color var(--xd-motion-fast, 120ms ease-out),\n box-shadow var(--xd-motion-fast, 120ms ease-out);\n}\n\n.xd-select-trigger:hover:not([data-disabled=\"true\"]) {\n background-color: var(--xd-color-surface-hover, #f1f5f9);\n}\n\n.xd-select-trigger:focus-visible {\n outline: var(--xd-focus-ring-width, 2px) solid var(--xd-color-focus, #0f766e);\n outline-offset: var(--xd-focus-ring-offset, 2px);\n}\n\n/* Open: hold the focus colour on the border so the trigger reads as\n connected to the popover, which is a visually separate box. */\n.xd-select-trigger[data-open=\"true\"] {\n border-color: var(--xd-color-focus, #0f766e);\n background-color: var(--xd-color-surface-hover, #f1f5f9);\n}\n\n/* --- Chevron --- */\n\n.xd-select-trigger::after {\n content: \"\";\n flex-shrink: 0;\n margin-left: auto;\n width: 0.45em;\n height: 0.45em;\n border-right: var(--xd-border-width-thin, 1px) solid currentColor;\n border-bottom: var(--xd-border-width-thin, 1px) solid currentColor;\n color: var(--xd-color-text-muted, #475569);\n transform: translateY(-0.15em) rotate(45deg);\n transition:\n transform var(--xd-motion-fast, 120ms ease-out),\n color var(--xd-motion-fast, 120ms ease-out);\n}\n\n.xd-select-trigger[data-open=\"true\"]::after {\n color: var(--xd-color-text, #0f172a);\n transform: translateY(0.1em) rotate(-135deg);\n}\n\n/* --- Value / placeholder --- */\n\n.xd-select-value {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n min-width: 0;\n}\n\n.xd-select-value[data-placeholder=\"true\"] {\n color: var(--xd-color-text-muted, #475569);\n}\n\n/* --- Invalid --- */\n\n.xd-select-trigger[data-invalid=\"true\"] {\n border-color: var(--xd-color-destructive, #dc2626);\n}\n\n.xd-select-trigger[data-invalid=\"true\"]:focus-visible {\n outline-color: var(--xd-color-destructive, #dc2626);\n}\n\n.xd-select-error {\n font-size: var(--xd-font-size-sm, 0.8125rem);\n line-height: var(--xd-line-height-normal, 1.25);\n color: var(--xd-color-destructive, #dc2626);\n}\n\n/* --- Disabled --- */\n\n.xd-select-trigger[data-disabled=\"true\"] {\n opacity: var(--xd-opacity-disabled, 0.5);\n cursor: not-allowed;\n box-shadow: none;\n}\n\n/* --- Multi-select chips ---\n Neutral fill rather than --xd-color-primary: a row of six saturated\n chips overwhelms the trigger in every theme, and a chip is a value\n already chosen, not a call to action. The remove button carries the\n destructive colour on hover, where the warning is actually useful. */\n\n.xd-select-chips {\n display: inline-flex;\n flex-wrap: wrap;\n gap: var(--xd-space-xs, 0.25rem);\n min-width: 0;\n}\n\n.xd-select-chip {\n display: inline-flex;\n align-items: center;\n gap: var(--xd-space-xs, 0.25rem);\n\n border: var(--xd-border-width-thin, 1px) solid var(--xd-color-border, #cbd5e1);\n border-radius: var(--xd-radius-sm, 0.25rem);\n padding: 0.125rem var(--xd-space-xs, 0.25rem) 0.125rem\n var(--xd-space-sm, 0.375rem);\n\n background-color: var(--xd-color-surface-hover, #f1f5f9);\n color: var(--xd-color-text, #0f172a);\n font-size: var(--xd-font-size-sm, 0.8125rem);\n line-height: var(--xd-line-height-normal, 1.25);\n white-space: nowrap;\n}\n\n.xd-select-chip-remove {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: var(--xd-radius-sm, 0.25rem);\n width: 1rem;\n height: 1rem;\n padding: 0;\n\n background: transparent;\n color: var(--xd-color-text-muted, #475569);\n font-size: 0.875rem;\n line-height: 1;\n cursor: pointer;\n\n transition:\n background-color var(--xd-motion-fast, 120ms ease-out),\n color var(--xd-motion-fast, 120ms ease-out);\n}\n\n.xd-select-chip-remove:hover {\n background-color: var(--xd-color-destructive, #dc2626);\n color: var(--xd-on-destructive, #ffffff);\n}\n\n.xd-select-chip-remove:focus-visible {\n outline: var(--xd-focus-ring-width, 2px) solid var(--xd-color-focus, #0f766e);\n outline-offset: 1px;\n}\n\n/* --- Popup (rendered by UnstyledSelect as the trigger's next sibling) ---\n Absolutely positioned so opening does not reflow the page.\n Border AND shadow, both always: themes set --xd-shadow-md to none in\n dark mode, so the border is what keeps the popover legible there. */\n\n.xd-select-trigger + [role=\"listbox\"] {\n position: absolute;\n top: calc(100% + var(--xd-select-gap));\n left: 0;\n right: 0;\n z-index: 50;\n\n max-height: var(--xd-select-max-h);\n overflow-y: auto;\n /* Explicit, not just \"not set\": a non-visible overflow-y with overflow-x\n left at its visible default computes overflow-x to auto too (CSS\n Overflow spec) — so any future horizontal overflow in here would\n silently reappear as a scrollbar instead of just being invisible. */\n overflow-x: hidden;\n overscroll-behavior: contain;\n\n /* A \"frame\" surface in the same sense Card's own border is — see\n --xd-frame-border-width in tokens.css. Defaults to the hairline. */\n border: var(--xd-frame-border-width, 1px) solid\n var(--xd-color-border, #cbd5e1);\n border-radius: var(--xd-radius-md, 0.375rem);\n padding: var(--xd-space-xs, 0.25rem);\n background-color: var(--xd-color-surface, #ffffff);\n box-shadow: var(--xd-shadow-md, 0 4px 12px rgb(15 23 42 / 12%));\n\n scrollbar-width: thin;\n scrollbar-color: var(--xd-color-border-strong, #6b7688) transparent;\n\n transform-origin: top center;\n animation: xd-select-open var(--xd-motion-fast, 120ms ease-out);\n}\n\n@keyframes xd-select-open {\n from {\n opacity: 0;\n transform: translateY(-4px) scale(0.98);\n }\n}\n\n/* Search field, kept sticky so it stays reachable once the list scrolls.\n Negative margins let its background bleed to the popover's padding\n edge, so options do not appear to slide out from under it. */\n\n.xd-select-trigger + [role=\"listbox\"] > div:first-child {\n position: sticky;\n top: calc(var(--xd-space-xs, 0.25rem) * -1);\n z-index: 1;\n margin: calc(var(--xd-space-xs, 0.25rem) * -1)\n calc(var(--xd-space-xs, 0.25rem) * -1) var(--xd-space-xs, 0.25rem);\n padding: var(--xd-space-xs, 0.25rem);\n background-color: var(--xd-color-surface, #ffffff);\n}\n\n.xd-select-trigger + [role=\"listbox\"] input {\n width: 100%;\n border: var(--xd-border-width-thin, 1px) solid var(--xd-color-border, #cbd5e1);\n border-radius: var(--xd-radius-sm, 0.25rem);\n padding: var(--xd-space-sm, 0.375rem) var(--xd-space-md, 0.5rem);\n\n font-family: inherit;\n font-size: var(--xd-font-size-md, 0.875rem);\n line-height: var(--xd-line-height-normal, 1.25);\n\n background-color: var(--xd-color-surface-hover, #f1f5f9);\n color: var(--xd-color-text, #0f172a);\n\n transition: border-color var(--xd-motion-fast, 120ms ease-out);\n}\n\n.xd-select-trigger + [role=\"listbox\"] input::placeholder {\n color: var(--xd-color-text-muted, #475569);\n}\n\n.xd-select-trigger + [role=\"listbox\"] input:focus-visible {\n outline: var(--xd-focus-ring-width, 2px) solid var(--xd-color-focus, #0f766e);\n outline-offset: -1px;\n border-color: transparent;\n}\n\n/* --- Options ---\n :hover and :focus-visible share one fill. Two different highlights in\n an open listbox is a real usability bug: the user cannot tell which\n row Enter will commit. */\n\n.xd-select-trigger + [role=\"listbox\"] [role=\"option\"] {\n display: flex;\n align-items: center;\n gap: var(--xd-space-xs, 0.25rem);\n width: 100%;\n\n border: none;\n border-radius: var(--xd-radius-sm, 0.25rem);\n padding: var(--xd-space-sm, 0.375rem) var(--xd-space-md, 0.5rem);\n\n text-align: left;\n font-family: inherit;\n font-size: var(--xd-font-size-md, 0.875rem);\n font-weight: var(--xd-font-weight-regular, 400);\n line-height: var(--xd-line-height-normal, 1.25);\n\n background-color: transparent;\n color: var(--xd-color-text, #0f172a);\n cursor: pointer;\n scroll-margin: var(--xd-space-xs, 0.25rem);\n\n transition:\n background-color var(--xd-motion-fast, 120ms ease-out),\n color var(--xd-motion-fast, 120ms ease-out);\n}\n\n.xd-select-trigger\n + [role=\"listbox\"]\n [role=\"option\"]:hover:not([data-disabled=\"true\"]),\n.xd-select-trigger\n + [role=\"listbox\"]\n [role=\"option\"]:focus-visible:not([data-disabled=\"true\"]) {\n background-color: var(--xd-color-surface-hover, #f1f5f9);\n}\n\n.xd-select-trigger + [role=\"listbox\"] [role=\"option\"]:focus-visible {\n outline: var(--xd-focus-ring-width, 2px) solid var(--xd-color-focus, #0f766e);\n outline-offset: -2px;\n}\n\n/* Selected: colour and a check, never a fill -- a filled selected row\n plus a filled focused row makes the focused row unidentifiable. */\n.xd-select-trigger + [role=\"listbox\"] [role=\"option\"][data-selected=\"true\"] {\n color: var(--xd-color-focus, #0f766e);\n font-weight: var(--xd-font-weight-semibold, 600);\n}\n\n/* Check mark, drawn from two borders. The pseudo-element occupies its\n width on every row so labels stay aligned whether selected or not. */\n.xd-select-trigger + [role=\"listbox\"] [role=\"option\"]::before {\n content: \"\";\n flex-shrink: 0;\n width: 0.35em;\n height: 0.65em;\n margin: 0 0.2em 0.15em 0.1em;\n border-right: 2px solid currentColor;\n border-bottom: 2px solid currentColor;\n transform: rotate(45deg);\n opacity: 0;\n transition: opacity var(--xd-motion-fast, 120ms ease-out);\n}\n\n.xd-select-trigger\n + [role=\"listbox\"]\n [role=\"option\"][data-selected=\"true\"]::before {\n opacity: 1;\n}\n\n.xd-select-trigger + [role=\"listbox\"] [role=\"option\"][data-disabled=\"true\"] {\n opacity: var(--xd-opacity-disabled, 0.5);\n cursor: not-allowed;\n}\n\n/* --- Motion preference --- */\n\n@media (prefers-reduced-motion: reduce) {\n .xd-select-trigger,\n .xd-select-trigger::after,\n .xd-select-chip-remove,\n .xd-select-trigger + [role=\"listbox\"] input,\n .xd-select-trigger + [role=\"listbox\"] [role=\"option\"],\n .xd-select-trigger + [role=\"listbox\"] [role=\"option\"]::before {\n transition-duration: 1ms;\n }\n\n .xd-select-trigger + [role=\"listbox\"] {\n animation: none;\n }\n}\n"],"mappings":"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","names":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@asnewyla/select",
3
- "version": "0.2.0",
3
+ "version": "0.2.1",
4
4
  "description": "Styled select/combobox with label, validation error display, and accessibility",
5
5
  "license": "MIT",
6
6
  "repository": {