@vielzeug/refine 2.0.3 → 2.1.0

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 (57) hide show
  1. package/dist/content/text/text.css.cjs +1 -1
  2. package/dist/content/text/text.css.cjs.map +1 -1
  3. package/dist/content/text/text.css.js +1 -1
  4. package/dist/content/text/text.css.js.map +1 -1
  5. package/dist/content/text/text.d.ts +1 -1
  6. package/dist/content/text/text.d.ts.map +1 -1
  7. package/dist/core/overlay.cjs.map +1 -1
  8. package/dist/core/overlay.d.ts +2 -2
  9. package/dist/core/overlay.d.ts.map +1 -1
  10. package/dist/core/overlay.js.map +1 -1
  11. package/dist/core/positioner.cjs +1 -1
  12. package/dist/core/positioner.cjs.map +1 -1
  13. package/dist/core/positioner.d.ts +6 -1
  14. package/dist/core/positioner.d.ts.map +1 -1
  15. package/dist/core/positioner.js +11 -11
  16. package/dist/core/positioner.js.map +1 -1
  17. package/dist/custom-elements.json +5635 -5387
  18. package/dist/frameworks/elements.d.ts +86 -0
  19. package/dist/frameworks/react.d.ts +18 -0
  20. package/dist/frameworks/vue.d.ts +16 -0
  21. package/dist/inputs/button/button.css.cjs +1 -1
  22. package/dist/inputs/button/button.css.cjs.map +1 -1
  23. package/dist/inputs/button/button.css.js +1 -1
  24. package/dist/inputs/button/button.css.js.map +1 -1
  25. package/dist/menu.cjs +1 -1
  26. package/dist/menu.cjs.map +1 -1
  27. package/dist/menu.js +2 -2
  28. package/dist/menu.js.map +1 -1
  29. package/dist/navigation-menu.cjs +11 -0
  30. package/dist/navigation-menu.cjs.map +1 -0
  31. package/dist/navigation-menu.js +139 -0
  32. package/dist/navigation-menu.js.map +1 -0
  33. package/dist/overlay/index.d.ts +2 -0
  34. package/dist/overlay/index.d.ts.map +1 -1
  35. package/dist/overlay/navigation-menu/navigation-menu-item.css.cjs +2 -0
  36. package/dist/overlay/navigation-menu/navigation-menu-item.css.cjs.map +1 -0
  37. package/dist/overlay/navigation-menu/navigation-menu-item.css.js +6 -0
  38. package/dist/overlay/navigation-menu/navigation-menu-item.css.js.map +1 -0
  39. package/dist/overlay/navigation-menu/navigation-menu-panel.css.cjs +2 -0
  40. package/dist/overlay/navigation-menu/navigation-menu-panel.css.cjs.map +1 -0
  41. package/dist/overlay/navigation-menu/navigation-menu-panel.css.js +6 -0
  42. package/dist/overlay/navigation-menu/navigation-menu-panel.css.js.map +1 -0
  43. package/dist/overlay/navigation-menu/navigation-menu.css.cjs +2 -0
  44. package/dist/overlay/navigation-menu/navigation-menu.css.cjs.map +1 -0
  45. package/dist/overlay/navigation-menu/navigation-menu.css.js +6 -0
  46. package/dist/overlay/navigation-menu/navigation-menu.css.js.map +1 -0
  47. package/dist/overlay/navigation-menu/navigation-menu.d.ts +75 -0
  48. package/dist/overlay/navigation-menu/navigation-menu.d.ts.map +1 -0
  49. package/dist/refine.cjs +15 -6
  50. package/dist/refine.cjs.map +1 -1
  51. package/dist/refine.iife.js +15 -6
  52. package/dist/refine.iife.js.map +1 -1
  53. package/dist/refine.js +15 -6
  54. package/dist/refine.js.map +1 -1
  55. package/dist/text.cjs.map +1 -1
  56. package/dist/text.js.map +1 -1
  57. package/package.json +29 -2
@@ -1,2 +1,2 @@
1
- var e=`:host{--_size:var(--text-size,var(--text-base));--_weight:var(--text-weight,var(--font-normal));--_color:var(--text-color,var(--text-color-body));--_line-height:var(--text-line-height,var(--leading-normal));--_letter-spacing:var(--text-letter-spacing,normal);font-size:var(--_size);font-weight:var(--_weight);line-height:var(--_line-height);color:var(--_color);letter-spacing:var(--_letter-spacing);display:block}:host([hidden]){display:none}:host([lines]){-webkit-line-clamp:var(--_lines);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}:host(:is([as=span],[as=label],[as=code]):not([align],[truncate])){display:inline}:host([variant=heading]){--_size:var(--text-size,var(--heading-md));--_weight:var(--text-weight,var(--font-semibold));--_color:var(--text-color,var(--text-color-heading));--_line-height:var(--text-line-height,var(--leading-tight));--_letter-spacing:var(--text-letter-spacing,var(--tracking-header))}:host([variant=label]){--_size:var(--text-size,var(--text-sm));--_weight:var(--text-weight,var(--font-medium));--_color:var(--text-color,var(--text-color-heading));--_line-height:var(--text-line-height,var(--leading-snug))}:host([variant=caption]){--_size:var(--text-size,var(--text-sm));--_color:var(--text-color,var(--text-color-secondary))}:host([variant=overline]){--_size:var(--text-size,var(--text-xs));--_weight:var(--text-weight,var(--font-semibold));--_line-height:var(--text-line-height,var(--leading-none));--_letter-spacing:var(--text-letter-spacing,.08em);text-transform:uppercase}:host([variant=code]){--_size:var(--text-size,var(--text-sm));font-family:var(--font-mono,monospace)}:host([size=xs]){--_size:var(--text-size,var(--text-xs))}:host([size=sm]){--_size:var(--text-size,var(--text-sm))}:host([size=md]){--_size:var(--text-size,var(--text-base))}:host([size=lg]){--_size:var(--text-size,var(--text-lg))}:host([size=xl]){--_size:var(--text-size,var(--text-xl))}:host([size="2xl"]){--_size:var(--text-size,var(--text-2xl))}:host([variant=heading][size=xs]){--_size:var(--text-size,var(--heading-xs))}:host([variant=heading][size=sm]){--_size:var(--text-size,var(--heading-sm))}:host([variant=heading][size=md]){--_size:var(--text-size,var(--heading-md))}:host([variant=heading][size=lg]){--_size:var(--text-size,var(--heading-lg))}:host([variant=heading][size=xl]){--_size:var(--text-size,var(--heading-xl))}:host([variant=heading][size="2xl"]){--_size:var(--text-size,var(--heading-2xl))}:host([weight=normal]){--_weight:var(--text-weight,var(--font-normal))}:host([weight=medium]){--_weight:var(--text-weight,var(--font-medium))}:host([weight=semibold]){--_weight:var(--text-weight,var(--font-semibold))}:host([weight=bold]){--_weight:var(--text-weight,var(--font-bold))}:host([color=primary]){--_color:var(--text-color,var(--color-primary))}:host([color=secondary]){--_color:var(--text-color,var(--color-secondary))}:host([color=info]){--_color:var(--text-color,var(--color-info))}:host([color=success]){--_color:var(--text-color,var(--color-success))}:host([color=warning]){--_color:var(--text-color,var(--color-warning))}:host([color=error]){--_color:var(--text-color,var(--color-error))}:host([color=heading]){--_color:var(--text-color,var(--text-color-heading))}:host([color=body]){--_color:var(--text-color,var(--text-color-body))}:host([color=muted]){--_color:var(--text-color,var(--text-color-secondary))}:host([color=tertiary]){--_color:var(--text-color,var(--text-color-tertiary))}:host([color=disabled]){--_color:var(--text-color,var(--text-color-disabled))}:host([color=contrast]){--_color:var(--text-color,var(--text-color-contrast))}@layer refine.utilities{:host([align]){display:block}:host([align=left]){text-align:start}:host([align=center]){text-align:center}:host([align=right]){text-align:end}:host([align=justify]){text-align:justify}:host([truncate]){text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}:host([italic]){font-style:italic}:host([as=p]),:host([as=div]),:host(:is([as=h1],[as=h2],[as=h3],[as=h4],[as=h5],[as=h6])){display:block}}`;exports.default=e;
1
+ var e=`:host{--_size:var(--text-size,var(--text-base));--_weight:var(--text-weight,var(--font-normal));--_color:var(--text-color,var(--text-color-body));--_line-height:var(--text-line-height,var(--leading-normal));--_letter-spacing:var(--text-letter-spacing,normal);font-size:var(--_size);font-weight:var(--_weight);line-height:var(--_line-height);color:var(--_color);letter-spacing:var(--_letter-spacing);display:block}:host([hidden]){display:none}:host([lines]){-webkit-line-clamp:var(--_lines);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}:host(:is([as=span],[as=label],[as=code]):not([align],[truncate])){display:inline}:host([variant=heading]){--_size:var(--text-size,var(--heading-md));--_weight:var(--text-weight,var(--font-semibold));--_color:var(--text-color,var(--text-color-heading));--_line-height:var(--text-line-height,var(--leading-tight));--_letter-spacing:var(--text-letter-spacing,var(--tracking-header))}:host([variant=label]){--_size:var(--text-size,var(--text-sm));--_weight:var(--text-weight,var(--font-medium));--_color:var(--text-color,var(--text-color-heading));--_line-height:var(--text-line-height,var(--leading-snug))}:host([variant=caption]){--_size:var(--text-size,var(--text-sm));--_color:var(--text-color,var(--text-color-secondary))}:host([variant=overline]){--_size:var(--text-size,var(--text-xs));--_weight:var(--text-weight,var(--font-semibold));--_line-height:var(--text-line-height,var(--leading-none));--_letter-spacing:var(--text-letter-spacing,.08em);text-transform:uppercase}:host([variant=code]){--_size:var(--text-size,var(--text-sm));font-family:var(--font-mono,monospace)}:host([size="2xs"]){--_size:var(--text-size,var(--text-2xs))}:host([size=xs]){--_size:var(--text-size,var(--text-xs))}:host([size=sm]){--_size:var(--text-size,var(--text-sm))}:host([size=md]){--_size:var(--text-size,var(--text-base))}:host([size=lg]){--_size:var(--text-size,var(--text-lg))}:host([size=xl]){--_size:var(--text-size,var(--text-xl))}:host([size="2xl"]){--_size:var(--text-size,var(--text-2xl))}:host([variant=heading][size=xs]){--_size:var(--text-size,var(--heading-xs))}:host([variant=heading][size=sm]){--_size:var(--text-size,var(--heading-sm))}:host([variant=heading][size=md]){--_size:var(--text-size,var(--heading-md))}:host([variant=heading][size=lg]){--_size:var(--text-size,var(--heading-lg))}:host([variant=heading][size=xl]){--_size:var(--text-size,var(--heading-xl))}:host([variant=heading][size="2xl"]){--_size:var(--text-size,var(--heading-2xl))}:host([weight=normal]){--_weight:var(--text-weight,var(--font-normal))}:host([weight=medium]){--_weight:var(--text-weight,var(--font-medium))}:host([weight=semibold]){--_weight:var(--text-weight,var(--font-semibold))}:host([weight=bold]){--_weight:var(--text-weight,var(--font-bold))}:host([color=primary]){--_color:var(--text-color,var(--color-primary))}:host([color=secondary]){--_color:var(--text-color,var(--color-secondary))}:host([color=info]){--_color:var(--text-color,var(--color-info))}:host([color=success]){--_color:var(--text-color,var(--color-success))}:host([color=warning]){--_color:var(--text-color,var(--color-warning))}:host([color=error]){--_color:var(--text-color,var(--color-error))}:host([color=heading]){--_color:var(--text-color,var(--text-color-heading))}:host([color=body]){--_color:var(--text-color,var(--text-color-body))}:host([color=muted]){--_color:var(--text-color,var(--text-color-secondary))}:host([color=tertiary]){--_color:var(--text-color,var(--text-color-tertiary))}:host([color=disabled]){--_color:var(--text-color,var(--text-color-disabled))}:host([color=contrast]){--_color:var(--text-color,var(--text-color-contrast))}@layer refine.utilities{:host([align]){display:block}:host([align=left]){text-align:start}:host([align=center]){text-align:center}:host([align=right]){text-align:end}:host([align=justify]){text-align:justify}:host([truncate]){text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}:host([italic]){font-style:italic}:host([as=p]),:host([as=div]),:host(:is([as=h1],[as=h2],[as=h3],[as=h4],[as=h5],[as=h6])){display:block}}`;exports.default=e;
2
2
  //# sourceMappingURL=text.css.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"text.css.cjs","names":[],"sources":["../../../src/content/text/text.css?inline"],"sourcesContent":["/* ========================================\n Base Styles & Defaults\n ======================================== */\n\n:host {\n /* Internal variables with CSS custom property fallbacks */\n --_size: var(--text-size, var(--text-base));\n --_weight: var(--text-weight, var(--font-normal));\n --_color: var(--text-color, var(--text-color-body));\n --_line-height: var(--text-line-height, var(--leading-normal));\n --_letter-spacing: var(--text-letter-spacing, normal);\n\n display: block;\n font-size: var(--_size);\n font-weight: var(--_weight);\n line-height: var(--_line-height);\n color: var(--_color);\n letter-spacing: var(--_letter-spacing);\n}\n\n:host([hidden]) {\n display: none;\n}\n\n/* ========================================\n Unlayered display overrides\n These must live outside any @layer so they can beat the unlayered\n display: block on :host. Same cascade rule that was fixed for [lines].\n ======================================== */\n\n/* Multi-line truncation */\n:host([lines]) {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n -webkit-line-clamp: var(--_lines);\n}\n\n/* Inline semantic tags — but not when align/truncate force block layout */\n:host(:is([as='span'], [as='label'], [as='code']):not([align], [truncate])) {\n display: inline;\n}\n\n/* ========================================\n Variant Styles\n ======================================== */\n\n/* Body (default) — uses base defaults above */\n\n/* Heading\n Default size: --heading-md (24px)\n Letter-spacing: --tracking-header (-0.05em) per theme guidelines\n Line-height: --leading-tight (1.15) for display headings */\n:host([variant='heading']) {\n --_size: var(--text-size, var(--heading-md));\n --_weight: var(--text-weight, var(--font-semibold));\n --_color: var(--text-color, var(--text-color-heading));\n --_line-height: var(--text-line-height, var(--leading-tight));\n --_letter-spacing: var(--text-letter-spacing, var(--tracking-header));\n}\n\n/* Label — slightly tighter line-height for UI labels */\n:host([variant='label']) {\n --_size: var(--text-size, var(--text-sm));\n --_weight: var(--text-weight, var(--font-medium));\n --_color: var(--text-color, var(--text-color-heading));\n --_line-height: var(--text-line-height, var(--leading-snug));\n}\n\n/* Caption */\n:host([variant='caption']) {\n --_size: var(--text-size, var(--text-sm));\n --_color: var(--text-color, var(--text-color-secondary));\n}\n\n/* Overline */\n:host([variant='overline']) {\n --_size: var(--text-size, var(--text-xs));\n --_weight: var(--text-weight, var(--font-semibold));\n --_line-height: var(--text-line-height, var(--leading-none));\n --_letter-spacing: var(--text-letter-spacing, 0.08em);\n\n text-transform: uppercase;\n}\n\n/* Code */\n:host([variant='code']) {\n --_size: var(--text-size, var(--text-sm));\n\n font-family: var(--font-mono, monospace);\n}\n\n/* ========================================\n Size Variants — body scale (--text-*)\n Used by all variants except heading.\n ======================================== */\n\n:host([size='xs']) {\n --_size: var(--text-size, var(--text-xs));\n}\n\n:host([size='sm']) {\n --_size: var(--text-size, var(--text-sm));\n}\n\n:host([size='md']) {\n --_size: var(--text-size, var(--text-base));\n}\n\n:host([size='lg']) {\n --_size: var(--text-size, var(--text-lg));\n}\n\n:host([size='xl']) {\n --_size: var(--text-size, var(--text-xl));\n}\n\n:host([size='2xl']) {\n --_size: var(--text-size, var(--text-2xl));\n}\n\n/* ========================================\n Size Variants — heading scale (--heading-*)\n Compound selectors override the body-scale rules above when\n variant=\"heading\" and a size is also provided.\n ======================================== */\n\n:host([variant='heading'][size='xs']) {\n --_size: var(--text-size, var(--heading-xs));\n}\n\n:host([variant='heading'][size='sm']) {\n --_size: var(--text-size, var(--heading-sm));\n}\n\n:host([variant='heading'][size='md']) {\n --_size: var(--text-size, var(--heading-md));\n}\n\n:host([variant='heading'][size='lg']) {\n --_size: var(--text-size, var(--heading-lg));\n}\n\n:host([variant='heading'][size='xl']) {\n --_size: var(--text-size, var(--heading-xl));\n}\n\n:host([variant='heading'][size='2xl']) {\n --_size: var(--text-size, var(--heading-2xl));\n}\n\n/* ========================================\n Weight Variants\n ======================================== */\n\n:host([weight='normal']) {\n --_weight: var(--text-weight, var(--font-normal));\n}\n\n:host([weight='medium']) {\n --_weight: var(--text-weight, var(--font-medium));\n}\n\n:host([weight='semibold']) {\n --_weight: var(--text-weight, var(--font-semibold));\n}\n\n:host([weight='bold']) {\n --_weight: var(--text-weight, var(--font-bold));\n}\n\n/* ========================================\n Color Variants\n Semantic colors map to --text-color-* tokens.\n Theme colors map to --color-* base tokens.\n ======================================== */\n\n:host([color='primary']) {\n --_color: var(--text-color, var(--color-primary));\n}\n\n:host([color='secondary']) {\n --_color: var(--text-color, var(--color-secondary));\n}\n\n:host([color='info']) {\n --_color: var(--text-color, var(--color-info));\n}\n\n:host([color='success']) {\n --_color: var(--text-color, var(--color-success));\n}\n\n:host([color='warning']) {\n --_color: var(--text-color, var(--color-warning));\n}\n\n:host([color='error']) {\n --_color: var(--text-color, var(--color-error));\n}\n\n/* Semantic text colors */\n:host([color='heading']) {\n --_color: var(--text-color, var(--text-color-heading)); /* --color-contrast-900 */\n}\n\n:host([color='body']) {\n --_color: var(--text-color, var(--text-color-body)); /* --color-contrast-800 */\n}\n\n:host([color='muted']) {\n --_color: var(--text-color, var(--text-color-secondary)); /* --color-contrast-600 — AA compliant */\n}\n\n:host([color='tertiary']) {\n --_color: var(--text-color, var(--text-color-tertiary)); /* --color-contrast-500 — AA for large text */\n}\n\n:host([color='disabled']) {\n --_color: var(--text-color, var(--text-color-disabled)); /* --color-contrast-400 */\n}\n\n:host([color='contrast']) {\n --_color: var(--text-color, var(--text-color-contrast)); /* --color-contrast-100 */\n}\n\n@layer refine.utilities {\n /* ========================================\n Alignment\n ======================================== */\n\n :host([align]) {\n display: block;\n }\n\n :host([align='left']) {\n text-align: start;\n }\n\n :host([align='center']) {\n text-align: center;\n }\n\n :host([align='right']) {\n text-align: end;\n }\n\n :host([align='justify']) {\n text-align: justify;\n }\n\n /* ========================================\n Truncate (single-line)\n ======================================== */\n\n :host([truncate]) {\n display: block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n /* ========================================\n Italic\n ======================================== */\n\n :host([italic]) {\n font-style: italic;\n }\n\n /* ========================================\n Block Display for Certain Tags\n ======================================== */\n\n :host([as='p']),\n :host([as='div']),\n :host(:is([as='h1'], [as='h2'], [as='h3'], [as='h4'], [as='h5'], [as='h6'])) {\n display: block;\n }\n\n /* Note: display: inline for span/label/code is handled outside this @layer\n (above) so it can override the unlayered :host { display: block }. */\n}\n"],"mappings":""}
1
+ {"version":3,"file":"text.css.cjs","names":[],"sources":["../../../src/content/text/text.css?inline"],"sourcesContent":["/* ========================================\n Base Styles & Defaults\n ======================================== */\n\n:host {\n /* Internal variables with CSS custom property fallbacks */\n --_size: var(--text-size, var(--text-base));\n --_weight: var(--text-weight, var(--font-normal));\n --_color: var(--text-color, var(--text-color-body));\n --_line-height: var(--text-line-height, var(--leading-normal));\n --_letter-spacing: var(--text-letter-spacing, normal);\n\n display: block;\n font-size: var(--_size);\n font-weight: var(--_weight);\n line-height: var(--_line-height);\n color: var(--_color);\n letter-spacing: var(--_letter-spacing);\n}\n\n:host([hidden]) {\n display: none;\n}\n\n/* ========================================\n Unlayered display overrides\n These must live outside any @layer so they can beat the unlayered\n display: block on :host. Same cascade rule that was fixed for [lines].\n ======================================== */\n\n/* Multi-line truncation */\n:host([lines]) {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n -webkit-line-clamp: var(--_lines);\n}\n\n/* Inline semantic tags — but not when align/truncate force block layout */\n:host(:is([as='span'], [as='label'], [as='code']):not([align], [truncate])) {\n display: inline;\n}\n\n/* ========================================\n Variant Styles\n ======================================== */\n\n/* Body (default) — uses base defaults above */\n\n/* Heading\n Default size: --heading-md (24px)\n Letter-spacing: --tracking-header (-0.05em) per theme guidelines\n Line-height: --leading-tight (1.15) for display headings */\n:host([variant='heading']) {\n --_size: var(--text-size, var(--heading-md));\n --_weight: var(--text-weight, var(--font-semibold));\n --_color: var(--text-color, var(--text-color-heading));\n --_line-height: var(--text-line-height, var(--leading-tight));\n --_letter-spacing: var(--text-letter-spacing, var(--tracking-header));\n}\n\n/* Label — slightly tighter line-height for UI labels */\n:host([variant='label']) {\n --_size: var(--text-size, var(--text-sm));\n --_weight: var(--text-weight, var(--font-medium));\n --_color: var(--text-color, var(--text-color-heading));\n --_line-height: var(--text-line-height, var(--leading-snug));\n}\n\n/* Caption */\n:host([variant='caption']) {\n --_size: var(--text-size, var(--text-sm));\n --_color: var(--text-color, var(--text-color-secondary));\n}\n\n/* Overline */\n:host([variant='overline']) {\n --_size: var(--text-size, var(--text-xs));\n --_weight: var(--text-weight, var(--font-semibold));\n --_line-height: var(--text-line-height, var(--leading-none));\n --_letter-spacing: var(--text-letter-spacing, 0.08em);\n\n text-transform: uppercase;\n}\n\n/* Code */\n:host([variant='code']) {\n --_size: var(--text-size, var(--text-sm));\n\n font-family: var(--font-mono, monospace);\n}\n\n/* ========================================\n Size Variants — body scale (--text-*)\n Used by all variants except heading.\n ======================================== */\n\n:host([size='2xs']) {\n --_size: var(--text-size, var(--text-2xs));\n}\n\n:host([size='xs']) {\n --_size: var(--text-size, var(--text-xs));\n}\n\n:host([size='sm']) {\n --_size: var(--text-size, var(--text-sm));\n}\n\n:host([size='md']) {\n --_size: var(--text-size, var(--text-base));\n}\n\n:host([size='lg']) {\n --_size: var(--text-size, var(--text-lg));\n}\n\n:host([size='xl']) {\n --_size: var(--text-size, var(--text-xl));\n}\n\n:host([size='2xl']) {\n --_size: var(--text-size, var(--text-2xl));\n}\n\n/* ========================================\n Size Variants — heading scale (--heading-*)\n Compound selectors override the body-scale rules above when\n variant=\"heading\" and a size is also provided.\n ======================================== */\n\n:host([variant='heading'][size='xs']) {\n --_size: var(--text-size, var(--heading-xs));\n}\n\n:host([variant='heading'][size='sm']) {\n --_size: var(--text-size, var(--heading-sm));\n}\n\n:host([variant='heading'][size='md']) {\n --_size: var(--text-size, var(--heading-md));\n}\n\n:host([variant='heading'][size='lg']) {\n --_size: var(--text-size, var(--heading-lg));\n}\n\n:host([variant='heading'][size='xl']) {\n --_size: var(--text-size, var(--heading-xl));\n}\n\n:host([variant='heading'][size='2xl']) {\n --_size: var(--text-size, var(--heading-2xl));\n}\n\n/* ========================================\n Weight Variants\n ======================================== */\n\n:host([weight='normal']) {\n --_weight: var(--text-weight, var(--font-normal));\n}\n\n:host([weight='medium']) {\n --_weight: var(--text-weight, var(--font-medium));\n}\n\n:host([weight='semibold']) {\n --_weight: var(--text-weight, var(--font-semibold));\n}\n\n:host([weight='bold']) {\n --_weight: var(--text-weight, var(--font-bold));\n}\n\n/* ========================================\n Color Variants\n Semantic colors map to --text-color-* tokens.\n Theme colors map to --color-* base tokens.\n ======================================== */\n\n:host([color='primary']) {\n --_color: var(--text-color, var(--color-primary));\n}\n\n:host([color='secondary']) {\n --_color: var(--text-color, var(--color-secondary));\n}\n\n:host([color='info']) {\n --_color: var(--text-color, var(--color-info));\n}\n\n:host([color='success']) {\n --_color: var(--text-color, var(--color-success));\n}\n\n:host([color='warning']) {\n --_color: var(--text-color, var(--color-warning));\n}\n\n:host([color='error']) {\n --_color: var(--text-color, var(--color-error));\n}\n\n/* Semantic text colors */\n:host([color='heading']) {\n --_color: var(--text-color, var(--text-color-heading)); /* --color-contrast-900 */\n}\n\n:host([color='body']) {\n --_color: var(--text-color, var(--text-color-body)); /* --color-contrast-800 */\n}\n\n:host([color='muted']) {\n --_color: var(--text-color, var(--text-color-secondary)); /* --color-contrast-600 — AA compliant */\n}\n\n:host([color='tertiary']) {\n --_color: var(--text-color, var(--text-color-tertiary)); /* --color-contrast-500 — AA for large text */\n}\n\n:host([color='disabled']) {\n --_color: var(--text-color, var(--text-color-disabled)); /* --color-contrast-400 */\n}\n\n:host([color='contrast']) {\n --_color: var(--text-color, var(--text-color-contrast)); /* --color-contrast-100 */\n}\n\n@layer refine.utilities {\n /* ========================================\n Alignment\n ======================================== */\n\n :host([align]) {\n display: block;\n }\n\n :host([align='left']) {\n text-align: start;\n }\n\n :host([align='center']) {\n text-align: center;\n }\n\n :host([align='right']) {\n text-align: end;\n }\n\n :host([align='justify']) {\n text-align: justify;\n }\n\n /* ========================================\n Truncate (single-line)\n ======================================== */\n\n :host([truncate]) {\n display: block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n /* ========================================\n Italic\n ======================================== */\n\n :host([italic]) {\n font-style: italic;\n }\n\n /* ========================================\n Block Display for Certain Tags\n ======================================== */\n\n :host([as='p']),\n :host([as='div']),\n :host(:is([as='h1'], [as='h2'], [as='h3'], [as='h4'], [as='h5'], [as='h6'])) {\n display: block;\n }\n\n /* Note: display: inline for span/label/code is handled outside this @layer\n (above) so it can override the unlayered :host { display: block }. */\n}\n"],"mappings":""}
@@ -1,5 +1,5 @@
1
1
  //#region src/content/text/text.css?inline
2
- var e = ":host{--_size:var(--text-size,var(--text-base));--_weight:var(--text-weight,var(--font-normal));--_color:var(--text-color,var(--text-color-body));--_line-height:var(--text-line-height,var(--leading-normal));--_letter-spacing:var(--text-letter-spacing,normal);font-size:var(--_size);font-weight:var(--_weight);line-height:var(--_line-height);color:var(--_color);letter-spacing:var(--_letter-spacing);display:block}:host([hidden]){display:none}:host([lines]){-webkit-line-clamp:var(--_lines);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}:host(:is([as=span],[as=label],[as=code]):not([align],[truncate])){display:inline}:host([variant=heading]){--_size:var(--text-size,var(--heading-md));--_weight:var(--text-weight,var(--font-semibold));--_color:var(--text-color,var(--text-color-heading));--_line-height:var(--text-line-height,var(--leading-tight));--_letter-spacing:var(--text-letter-spacing,var(--tracking-header))}:host([variant=label]){--_size:var(--text-size,var(--text-sm));--_weight:var(--text-weight,var(--font-medium));--_color:var(--text-color,var(--text-color-heading));--_line-height:var(--text-line-height,var(--leading-snug))}:host([variant=caption]){--_size:var(--text-size,var(--text-sm));--_color:var(--text-color,var(--text-color-secondary))}:host([variant=overline]){--_size:var(--text-size,var(--text-xs));--_weight:var(--text-weight,var(--font-semibold));--_line-height:var(--text-line-height,var(--leading-none));--_letter-spacing:var(--text-letter-spacing,.08em);text-transform:uppercase}:host([variant=code]){--_size:var(--text-size,var(--text-sm));font-family:var(--font-mono,monospace)}:host([size=xs]){--_size:var(--text-size,var(--text-xs))}:host([size=sm]){--_size:var(--text-size,var(--text-sm))}:host([size=md]){--_size:var(--text-size,var(--text-base))}:host([size=lg]){--_size:var(--text-size,var(--text-lg))}:host([size=xl]){--_size:var(--text-size,var(--text-xl))}:host([size=\"2xl\"]){--_size:var(--text-size,var(--text-2xl))}:host([variant=heading][size=xs]){--_size:var(--text-size,var(--heading-xs))}:host([variant=heading][size=sm]){--_size:var(--text-size,var(--heading-sm))}:host([variant=heading][size=md]){--_size:var(--text-size,var(--heading-md))}:host([variant=heading][size=lg]){--_size:var(--text-size,var(--heading-lg))}:host([variant=heading][size=xl]){--_size:var(--text-size,var(--heading-xl))}:host([variant=heading][size=\"2xl\"]){--_size:var(--text-size,var(--heading-2xl))}:host([weight=normal]){--_weight:var(--text-weight,var(--font-normal))}:host([weight=medium]){--_weight:var(--text-weight,var(--font-medium))}:host([weight=semibold]){--_weight:var(--text-weight,var(--font-semibold))}:host([weight=bold]){--_weight:var(--text-weight,var(--font-bold))}:host([color=primary]){--_color:var(--text-color,var(--color-primary))}:host([color=secondary]){--_color:var(--text-color,var(--color-secondary))}:host([color=info]){--_color:var(--text-color,var(--color-info))}:host([color=success]){--_color:var(--text-color,var(--color-success))}:host([color=warning]){--_color:var(--text-color,var(--color-warning))}:host([color=error]){--_color:var(--text-color,var(--color-error))}:host([color=heading]){--_color:var(--text-color,var(--text-color-heading))}:host([color=body]){--_color:var(--text-color,var(--text-color-body))}:host([color=muted]){--_color:var(--text-color,var(--text-color-secondary))}:host([color=tertiary]){--_color:var(--text-color,var(--text-color-tertiary))}:host([color=disabled]){--_color:var(--text-color,var(--text-color-disabled))}:host([color=contrast]){--_color:var(--text-color,var(--text-color-contrast))}@layer refine.utilities{:host([align]){display:block}:host([align=left]){text-align:start}:host([align=center]){text-align:center}:host([align=right]){text-align:end}:host([align=justify]){text-align:justify}:host([truncate]){text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}:host([italic]){font-style:italic}:host([as=p]),:host([as=div]),:host(:is([as=h1],[as=h2],[as=h3],[as=h4],[as=h5],[as=h6])){display:block}}";
2
+ var e = ":host{--_size:var(--text-size,var(--text-base));--_weight:var(--text-weight,var(--font-normal));--_color:var(--text-color,var(--text-color-body));--_line-height:var(--text-line-height,var(--leading-normal));--_letter-spacing:var(--text-letter-spacing,normal);font-size:var(--_size);font-weight:var(--_weight);line-height:var(--_line-height);color:var(--_color);letter-spacing:var(--_letter-spacing);display:block}:host([hidden]){display:none}:host([lines]){-webkit-line-clamp:var(--_lines);-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}:host(:is([as=span],[as=label],[as=code]):not([align],[truncate])){display:inline}:host([variant=heading]){--_size:var(--text-size,var(--heading-md));--_weight:var(--text-weight,var(--font-semibold));--_color:var(--text-color,var(--text-color-heading));--_line-height:var(--text-line-height,var(--leading-tight));--_letter-spacing:var(--text-letter-spacing,var(--tracking-header))}:host([variant=label]){--_size:var(--text-size,var(--text-sm));--_weight:var(--text-weight,var(--font-medium));--_color:var(--text-color,var(--text-color-heading));--_line-height:var(--text-line-height,var(--leading-snug))}:host([variant=caption]){--_size:var(--text-size,var(--text-sm));--_color:var(--text-color,var(--text-color-secondary))}:host([variant=overline]){--_size:var(--text-size,var(--text-xs));--_weight:var(--text-weight,var(--font-semibold));--_line-height:var(--text-line-height,var(--leading-none));--_letter-spacing:var(--text-letter-spacing,.08em);text-transform:uppercase}:host([variant=code]){--_size:var(--text-size,var(--text-sm));font-family:var(--font-mono,monospace)}:host([size=\"2xs\"]){--_size:var(--text-size,var(--text-2xs))}:host([size=xs]){--_size:var(--text-size,var(--text-xs))}:host([size=sm]){--_size:var(--text-size,var(--text-sm))}:host([size=md]){--_size:var(--text-size,var(--text-base))}:host([size=lg]){--_size:var(--text-size,var(--text-lg))}:host([size=xl]){--_size:var(--text-size,var(--text-xl))}:host([size=\"2xl\"]){--_size:var(--text-size,var(--text-2xl))}:host([variant=heading][size=xs]){--_size:var(--text-size,var(--heading-xs))}:host([variant=heading][size=sm]){--_size:var(--text-size,var(--heading-sm))}:host([variant=heading][size=md]){--_size:var(--text-size,var(--heading-md))}:host([variant=heading][size=lg]){--_size:var(--text-size,var(--heading-lg))}:host([variant=heading][size=xl]){--_size:var(--text-size,var(--heading-xl))}:host([variant=heading][size=\"2xl\"]){--_size:var(--text-size,var(--heading-2xl))}:host([weight=normal]){--_weight:var(--text-weight,var(--font-normal))}:host([weight=medium]){--_weight:var(--text-weight,var(--font-medium))}:host([weight=semibold]){--_weight:var(--text-weight,var(--font-semibold))}:host([weight=bold]){--_weight:var(--text-weight,var(--font-bold))}:host([color=primary]){--_color:var(--text-color,var(--color-primary))}:host([color=secondary]){--_color:var(--text-color,var(--color-secondary))}:host([color=info]){--_color:var(--text-color,var(--color-info))}:host([color=success]){--_color:var(--text-color,var(--color-success))}:host([color=warning]){--_color:var(--text-color,var(--color-warning))}:host([color=error]){--_color:var(--text-color,var(--color-error))}:host([color=heading]){--_color:var(--text-color,var(--text-color-heading))}:host([color=body]){--_color:var(--text-color,var(--text-color-body))}:host([color=muted]){--_color:var(--text-color,var(--text-color-secondary))}:host([color=tertiary]){--_color:var(--text-color,var(--text-color-tertiary))}:host([color=disabled]){--_color:var(--text-color,var(--text-color-disabled))}:host([color=contrast]){--_color:var(--text-color,var(--text-color-contrast))}@layer refine.utilities{:host([align]){display:block}:host([align=left]){text-align:start}:host([align=center]){text-align:center}:host([align=right]){text-align:end}:host([align=justify]){text-align:justify}:host([truncate]){text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}:host([italic]){font-style:italic}:host([as=p]),:host([as=div]),:host(:is([as=h1],[as=h2],[as=h3],[as=h4],[as=h5],[as=h6])){display:block}}";
3
3
  //#endregion
4
4
  export { e as default };
5
5
 
@@ -1 +1 @@
1
- {"version":3,"file":"text.css.js","names":[],"sources":["../../../src/content/text/text.css?inline"],"sourcesContent":["/* ========================================\n Base Styles & Defaults\n ======================================== */\n\n:host {\n /* Internal variables with CSS custom property fallbacks */\n --_size: var(--text-size, var(--text-base));\n --_weight: var(--text-weight, var(--font-normal));\n --_color: var(--text-color, var(--text-color-body));\n --_line-height: var(--text-line-height, var(--leading-normal));\n --_letter-spacing: var(--text-letter-spacing, normal);\n\n display: block;\n font-size: var(--_size);\n font-weight: var(--_weight);\n line-height: var(--_line-height);\n color: var(--_color);\n letter-spacing: var(--_letter-spacing);\n}\n\n:host([hidden]) {\n display: none;\n}\n\n/* ========================================\n Unlayered display overrides\n These must live outside any @layer so they can beat the unlayered\n display: block on :host. Same cascade rule that was fixed for [lines].\n ======================================== */\n\n/* Multi-line truncation */\n:host([lines]) {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n -webkit-line-clamp: var(--_lines);\n}\n\n/* Inline semantic tags — but not when align/truncate force block layout */\n:host(:is([as='span'], [as='label'], [as='code']):not([align], [truncate])) {\n display: inline;\n}\n\n/* ========================================\n Variant Styles\n ======================================== */\n\n/* Body (default) — uses base defaults above */\n\n/* Heading\n Default size: --heading-md (24px)\n Letter-spacing: --tracking-header (-0.05em) per theme guidelines\n Line-height: --leading-tight (1.15) for display headings */\n:host([variant='heading']) {\n --_size: var(--text-size, var(--heading-md));\n --_weight: var(--text-weight, var(--font-semibold));\n --_color: var(--text-color, var(--text-color-heading));\n --_line-height: var(--text-line-height, var(--leading-tight));\n --_letter-spacing: var(--text-letter-spacing, var(--tracking-header));\n}\n\n/* Label — slightly tighter line-height for UI labels */\n:host([variant='label']) {\n --_size: var(--text-size, var(--text-sm));\n --_weight: var(--text-weight, var(--font-medium));\n --_color: var(--text-color, var(--text-color-heading));\n --_line-height: var(--text-line-height, var(--leading-snug));\n}\n\n/* Caption */\n:host([variant='caption']) {\n --_size: var(--text-size, var(--text-sm));\n --_color: var(--text-color, var(--text-color-secondary));\n}\n\n/* Overline */\n:host([variant='overline']) {\n --_size: var(--text-size, var(--text-xs));\n --_weight: var(--text-weight, var(--font-semibold));\n --_line-height: var(--text-line-height, var(--leading-none));\n --_letter-spacing: var(--text-letter-spacing, 0.08em);\n\n text-transform: uppercase;\n}\n\n/* Code */\n:host([variant='code']) {\n --_size: var(--text-size, var(--text-sm));\n\n font-family: var(--font-mono, monospace);\n}\n\n/* ========================================\n Size Variants — body scale (--text-*)\n Used by all variants except heading.\n ======================================== */\n\n:host([size='xs']) {\n --_size: var(--text-size, var(--text-xs));\n}\n\n:host([size='sm']) {\n --_size: var(--text-size, var(--text-sm));\n}\n\n:host([size='md']) {\n --_size: var(--text-size, var(--text-base));\n}\n\n:host([size='lg']) {\n --_size: var(--text-size, var(--text-lg));\n}\n\n:host([size='xl']) {\n --_size: var(--text-size, var(--text-xl));\n}\n\n:host([size='2xl']) {\n --_size: var(--text-size, var(--text-2xl));\n}\n\n/* ========================================\n Size Variants — heading scale (--heading-*)\n Compound selectors override the body-scale rules above when\n variant=\"heading\" and a size is also provided.\n ======================================== */\n\n:host([variant='heading'][size='xs']) {\n --_size: var(--text-size, var(--heading-xs));\n}\n\n:host([variant='heading'][size='sm']) {\n --_size: var(--text-size, var(--heading-sm));\n}\n\n:host([variant='heading'][size='md']) {\n --_size: var(--text-size, var(--heading-md));\n}\n\n:host([variant='heading'][size='lg']) {\n --_size: var(--text-size, var(--heading-lg));\n}\n\n:host([variant='heading'][size='xl']) {\n --_size: var(--text-size, var(--heading-xl));\n}\n\n:host([variant='heading'][size='2xl']) {\n --_size: var(--text-size, var(--heading-2xl));\n}\n\n/* ========================================\n Weight Variants\n ======================================== */\n\n:host([weight='normal']) {\n --_weight: var(--text-weight, var(--font-normal));\n}\n\n:host([weight='medium']) {\n --_weight: var(--text-weight, var(--font-medium));\n}\n\n:host([weight='semibold']) {\n --_weight: var(--text-weight, var(--font-semibold));\n}\n\n:host([weight='bold']) {\n --_weight: var(--text-weight, var(--font-bold));\n}\n\n/* ========================================\n Color Variants\n Semantic colors map to --text-color-* tokens.\n Theme colors map to --color-* base tokens.\n ======================================== */\n\n:host([color='primary']) {\n --_color: var(--text-color, var(--color-primary));\n}\n\n:host([color='secondary']) {\n --_color: var(--text-color, var(--color-secondary));\n}\n\n:host([color='info']) {\n --_color: var(--text-color, var(--color-info));\n}\n\n:host([color='success']) {\n --_color: var(--text-color, var(--color-success));\n}\n\n:host([color='warning']) {\n --_color: var(--text-color, var(--color-warning));\n}\n\n:host([color='error']) {\n --_color: var(--text-color, var(--color-error));\n}\n\n/* Semantic text colors */\n:host([color='heading']) {\n --_color: var(--text-color, var(--text-color-heading)); /* --color-contrast-900 */\n}\n\n:host([color='body']) {\n --_color: var(--text-color, var(--text-color-body)); /* --color-contrast-800 */\n}\n\n:host([color='muted']) {\n --_color: var(--text-color, var(--text-color-secondary)); /* --color-contrast-600 — AA compliant */\n}\n\n:host([color='tertiary']) {\n --_color: var(--text-color, var(--text-color-tertiary)); /* --color-contrast-500 — AA for large text */\n}\n\n:host([color='disabled']) {\n --_color: var(--text-color, var(--text-color-disabled)); /* --color-contrast-400 */\n}\n\n:host([color='contrast']) {\n --_color: var(--text-color, var(--text-color-contrast)); /* --color-contrast-100 */\n}\n\n@layer refine.utilities {\n /* ========================================\n Alignment\n ======================================== */\n\n :host([align]) {\n display: block;\n }\n\n :host([align='left']) {\n text-align: start;\n }\n\n :host([align='center']) {\n text-align: center;\n }\n\n :host([align='right']) {\n text-align: end;\n }\n\n :host([align='justify']) {\n text-align: justify;\n }\n\n /* ========================================\n Truncate (single-line)\n ======================================== */\n\n :host([truncate]) {\n display: block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n /* ========================================\n Italic\n ======================================== */\n\n :host([italic]) {\n font-style: italic;\n }\n\n /* ========================================\n Block Display for Certain Tags\n ======================================== */\n\n :host([as='p']),\n :host([as='div']),\n :host(:is([as='h1'], [as='h2'], [as='h3'], [as='h4'], [as='h5'], [as='h6'])) {\n display: block;\n }\n\n /* Note: display: inline for span/label/code is handled outside this @layer\n (above) so it can override the unlayered :host { display: block }. */\n}\n"],"mappings":""}
1
+ {"version":3,"file":"text.css.js","names":[],"sources":["../../../src/content/text/text.css?inline"],"sourcesContent":["/* ========================================\n Base Styles & Defaults\n ======================================== */\n\n:host {\n /* Internal variables with CSS custom property fallbacks */\n --_size: var(--text-size, var(--text-base));\n --_weight: var(--text-weight, var(--font-normal));\n --_color: var(--text-color, var(--text-color-body));\n --_line-height: var(--text-line-height, var(--leading-normal));\n --_letter-spacing: var(--text-letter-spacing, normal);\n\n display: block;\n font-size: var(--_size);\n font-weight: var(--_weight);\n line-height: var(--_line-height);\n color: var(--_color);\n letter-spacing: var(--_letter-spacing);\n}\n\n:host([hidden]) {\n display: none;\n}\n\n/* ========================================\n Unlayered display overrides\n These must live outside any @layer so they can beat the unlayered\n display: block on :host. Same cascade rule that was fixed for [lines].\n ======================================== */\n\n/* Multi-line truncation */\n:host([lines]) {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n -webkit-line-clamp: var(--_lines);\n}\n\n/* Inline semantic tags — but not when align/truncate force block layout */\n:host(:is([as='span'], [as='label'], [as='code']):not([align], [truncate])) {\n display: inline;\n}\n\n/* ========================================\n Variant Styles\n ======================================== */\n\n/* Body (default) — uses base defaults above */\n\n/* Heading\n Default size: --heading-md (24px)\n Letter-spacing: --tracking-header (-0.05em) per theme guidelines\n Line-height: --leading-tight (1.15) for display headings */\n:host([variant='heading']) {\n --_size: var(--text-size, var(--heading-md));\n --_weight: var(--text-weight, var(--font-semibold));\n --_color: var(--text-color, var(--text-color-heading));\n --_line-height: var(--text-line-height, var(--leading-tight));\n --_letter-spacing: var(--text-letter-spacing, var(--tracking-header));\n}\n\n/* Label — slightly tighter line-height for UI labels */\n:host([variant='label']) {\n --_size: var(--text-size, var(--text-sm));\n --_weight: var(--text-weight, var(--font-medium));\n --_color: var(--text-color, var(--text-color-heading));\n --_line-height: var(--text-line-height, var(--leading-snug));\n}\n\n/* Caption */\n:host([variant='caption']) {\n --_size: var(--text-size, var(--text-sm));\n --_color: var(--text-color, var(--text-color-secondary));\n}\n\n/* Overline */\n:host([variant='overline']) {\n --_size: var(--text-size, var(--text-xs));\n --_weight: var(--text-weight, var(--font-semibold));\n --_line-height: var(--text-line-height, var(--leading-none));\n --_letter-spacing: var(--text-letter-spacing, 0.08em);\n\n text-transform: uppercase;\n}\n\n/* Code */\n:host([variant='code']) {\n --_size: var(--text-size, var(--text-sm));\n\n font-family: var(--font-mono, monospace);\n}\n\n/* ========================================\n Size Variants — body scale (--text-*)\n Used by all variants except heading.\n ======================================== */\n\n:host([size='2xs']) {\n --_size: var(--text-size, var(--text-2xs));\n}\n\n:host([size='xs']) {\n --_size: var(--text-size, var(--text-xs));\n}\n\n:host([size='sm']) {\n --_size: var(--text-size, var(--text-sm));\n}\n\n:host([size='md']) {\n --_size: var(--text-size, var(--text-base));\n}\n\n:host([size='lg']) {\n --_size: var(--text-size, var(--text-lg));\n}\n\n:host([size='xl']) {\n --_size: var(--text-size, var(--text-xl));\n}\n\n:host([size='2xl']) {\n --_size: var(--text-size, var(--text-2xl));\n}\n\n/* ========================================\n Size Variants — heading scale (--heading-*)\n Compound selectors override the body-scale rules above when\n variant=\"heading\" and a size is also provided.\n ======================================== */\n\n:host([variant='heading'][size='xs']) {\n --_size: var(--text-size, var(--heading-xs));\n}\n\n:host([variant='heading'][size='sm']) {\n --_size: var(--text-size, var(--heading-sm));\n}\n\n:host([variant='heading'][size='md']) {\n --_size: var(--text-size, var(--heading-md));\n}\n\n:host([variant='heading'][size='lg']) {\n --_size: var(--text-size, var(--heading-lg));\n}\n\n:host([variant='heading'][size='xl']) {\n --_size: var(--text-size, var(--heading-xl));\n}\n\n:host([variant='heading'][size='2xl']) {\n --_size: var(--text-size, var(--heading-2xl));\n}\n\n/* ========================================\n Weight Variants\n ======================================== */\n\n:host([weight='normal']) {\n --_weight: var(--text-weight, var(--font-normal));\n}\n\n:host([weight='medium']) {\n --_weight: var(--text-weight, var(--font-medium));\n}\n\n:host([weight='semibold']) {\n --_weight: var(--text-weight, var(--font-semibold));\n}\n\n:host([weight='bold']) {\n --_weight: var(--text-weight, var(--font-bold));\n}\n\n/* ========================================\n Color Variants\n Semantic colors map to --text-color-* tokens.\n Theme colors map to --color-* base tokens.\n ======================================== */\n\n:host([color='primary']) {\n --_color: var(--text-color, var(--color-primary));\n}\n\n:host([color='secondary']) {\n --_color: var(--text-color, var(--color-secondary));\n}\n\n:host([color='info']) {\n --_color: var(--text-color, var(--color-info));\n}\n\n:host([color='success']) {\n --_color: var(--text-color, var(--color-success));\n}\n\n:host([color='warning']) {\n --_color: var(--text-color, var(--color-warning));\n}\n\n:host([color='error']) {\n --_color: var(--text-color, var(--color-error));\n}\n\n/* Semantic text colors */\n:host([color='heading']) {\n --_color: var(--text-color, var(--text-color-heading)); /* --color-contrast-900 */\n}\n\n:host([color='body']) {\n --_color: var(--text-color, var(--text-color-body)); /* --color-contrast-800 */\n}\n\n:host([color='muted']) {\n --_color: var(--text-color, var(--text-color-secondary)); /* --color-contrast-600 — AA compliant */\n}\n\n:host([color='tertiary']) {\n --_color: var(--text-color, var(--text-color-tertiary)); /* --color-contrast-500 — AA for large text */\n}\n\n:host([color='disabled']) {\n --_color: var(--text-color, var(--text-color-disabled)); /* --color-contrast-400 */\n}\n\n:host([color='contrast']) {\n --_color: var(--text-color, var(--text-color-contrast)); /* --color-contrast-100 */\n}\n\n@layer refine.utilities {\n /* ========================================\n Alignment\n ======================================== */\n\n :host([align]) {\n display: block;\n }\n\n :host([align='left']) {\n text-align: start;\n }\n\n :host([align='center']) {\n text-align: center;\n }\n\n :host([align='right']) {\n text-align: end;\n }\n\n :host([align='justify']) {\n text-align: justify;\n }\n\n /* ========================================\n Truncate (single-line)\n ======================================== */\n\n :host([truncate]) {\n display: block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n /* ========================================\n Italic\n ======================================== */\n\n :host([italic]) {\n font-style: italic;\n }\n\n /* ========================================\n Block Display for Certain Tags\n ======================================== */\n\n :host([as='p']),\n :host([as='div']),\n :host(:is([as='h1'], [as='h2'], [as='h3'], [as='h4'], [as='h5'], [as='h6'])) {\n display: block;\n }\n\n /* Note: display: inline for span/label/code is handled outside this @layer\n (above) so it can override the unlayered :host { display: block }. */\n}\n"],"mappings":""}
@@ -11,7 +11,7 @@ export type OreTextProps = {
11
11
  /** Clamp text to N lines with an ellipsis (multi-line truncation) */
12
12
  lines?: number;
13
13
  /** Text size — maps to --text-* tokens for body variants and --heading-* tokens for the heading variant */
14
- size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
14
+ size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
15
15
  /** Enable single-line text truncation with ellipsis */
16
16
  truncate?: boolean;
17
17
  /** Text semantic variant */
@@ -1 +1 @@
1
- {"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/content/text/text.ts"],"names":[],"mappings":"AAIA,gCAAgC;AAChC,MAAM,MAAM,YAAY,GAAG;IACzB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;IAChD,wFAAwF;IACxF,EAAE,CAAC,EAAE,MAAM,GAAG,GAAG,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,OAAO,GAAG,MAAM,CAAC;IACvF,2CAA2C;IAC3C,KAAK,CAAC,EACF,SAAS,GACT,WAAW,GACX,MAAM,GACN,SAAS,GACT,SAAS,GACT,OAAO,GACP,SAAS,GACT,MAAM,GACN,OAAO,GACP,UAAU,GACV,UAAU,GACV,UAAU,CAAC;IACf,wBAAwB;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2GAA2G;IAC3G,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IAChD,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;IACzE,kBAAkB;IAClB,MAAM,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;CACpD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,eAAO,MAAM,QAAQ,EAAG,UAAmB,CAAC"}
1
+ {"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../src/content/text/text.ts"],"names":[],"mappings":"AAIA,gCAAgC;AAChC,MAAM,MAAM,YAAY,GAAG;IACzB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;IAChD,wFAAwF;IACxF,EAAE,CAAC,EAAE,MAAM,GAAG,GAAG,GAAG,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,OAAO,GAAG,MAAM,CAAC;IACvF,2CAA2C;IAC3C,KAAK,CAAC,EACF,SAAS,GACT,WAAW,GACX,MAAM,GACN,SAAS,GACT,SAAS,GACT,OAAO,GACP,SAAS,GACT,MAAM,GACN,OAAO,GACP,UAAU,GACV,UAAU,GACV,UAAU,CAAC;IACf,wBAAwB;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2GAA2G;IAC3G,IAAI,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;IACxD,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC;IACzE,kBAAkB;IAClB,MAAM,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;CACpD,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,eAAO,MAAM,QAAQ,EAAG,UAAmB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"overlay.cjs","names":[],"sources":["../../src/core/overlay.ts"],"sourcesContent":["/**\n * Why an overlay was opened.\n * - `'click'` — user clicked the trigger element\n * - `'focus'` — focus entered the trigger (tooltip, popover)\n * - `'hover'` — pointer entered the trigger (tooltip)\n * - `'keyboard'` — keyboard shortcut or Enter/Space on a trigger\n * - `'programmatic'` — opened via the JS API without a user gesture\n * - `'trigger'` — opened via the Invoker Commands API (`command=\"show-modal\"`)\n */\nexport type OverlayOpenReason = 'click' | 'focus' | 'hover' | 'keyboard' | 'programmatic' | 'trigger';\n\n/** Close reasons valid for modal dialogs (includes 'swipe' for drawer). */\nexport type DialogCloseReason = 'escape' | 'outsideClick' | 'programmatic' | 'swipe' | 'trigger';\n/** Close reasons valid for dropdown overlays (no swipe). */\nexport type DropdownCloseReason = Exclude<DialogCloseReason, 'swipe'>;\n\n/** Detail shape for overlay open events emitted by components. */\nexport type OverlayOpenDetail = { reason: OverlayOpenReason };\n/** Detail shape for overlay close events emitted by components. */\nexport type OverlayCloseDetail = { reason: DialogCloseReason };\n/** Detail shape for state changes emitted by overlay components. */\nexport type OverlayOpenChangeDetail = {\n open: boolean;\n reason: DialogCloseReason | OverlayOpenReason;\n};\n\nexport type OutsidePointerDismissalOptions = {\n getTargets: () => Array<Element | null | undefined>;\n isActive: () => boolean;\n onDismiss: () => void;\n signal: AbortSignal;\n};\n\n/**\n * Dismisses an active floating surface when a pointer begins outside all of its\n * supplied boundary elements. Components retain ownership of their open state.\n */\nexport const createOutsidePointerDismissal = (options: OutsidePointerDismissalOptions): (() => void) => {\n const onPointerDown = (event: PointerEvent): void => {\n if (!options.isActive()) return;\n\n const path = event.composedPath();\n const target = path[0] instanceof Node ? path[0] : event.target instanceof Node ? event.target : null;\n const inside = options.getTargets().some((element) => {\n return (\n element !== null &&\n element !== undefined &&\n (path.includes(element) || Boolean(target && element.contains(target)))\n );\n });\n\n if (!inside) options.onDismiss();\n };\n\n const dispose = (): void => {\n document.removeEventListener('pointerdown', onPointerDown, { capture: true });\n };\n\n document.addEventListener('pointerdown', onPointerDown, { capture: true });\n options.signal.addEventListener('abort', dispose, { once: true });\n\n return dispose;\n};\n\n/**\n * Restores focus to a dropdown/floating-panel trigger when the owning overlay closes.\n *\n * Named distinctly from `FocusManager.restoreFocus()` (`./focus.ts`) — that method restores a\n * captured dialog-opener element from internal state; this function takes the trigger directly,\n * for dropdown-style overlays (menu) that never captured one.\n */\nexport const restoreTriggerFocus = (getTrigger: () => HTMLElement | null | undefined): void => {\n getTrigger()?.focus();\n};\n"],"mappings":"AAqCA,IAAa,EAAiC,GAA0D,CACtG,IAAM,EAAiB,GAA8B,CACnD,GAAI,CAAC,EAAQ,SAAS,EAAG,OAEzB,IAAM,EAAO,EAAM,aAAa,EAC1B,EAAS,EAAK,aAAc,KAAO,EAAK,GAAK,EAAM,kBAAkB,KAAO,EAAM,OAAS,KAClF,EAAQ,WAAW,CAAC,CAAC,KAAM,GAEtC,GAAY,OAEX,EAAK,SAAS,CAAO,GAAK,GAAQ,GAAU,EAAQ,SAAS,CAAM,GAInE,GAAQ,EAAQ,UAAU,CACjC,EAEM,MAAsB,CAC1B,SAAS,oBAAoB,cAAe,EAAe,CAAE,QAAS,EAAK,CAAC,CAC9E,EAKA,OAHA,SAAS,iBAAiB,cAAe,EAAe,CAAE,QAAS,EAAK,CAAC,EACzE,EAAQ,OAAO,iBAAiB,QAAS,EAAS,CAAE,KAAM,EAAK,CAAC,EAEzD,CACT,EASa,EAAuB,GAA2D,CAC7F,EAAW,CAAC,EAAE,MAAM,CACtB"}
1
+ {"version":3,"file":"overlay.cjs","names":[],"sources":["../../src/core/overlay.ts"],"sourcesContent":["/**\n * Why an overlay was opened.\n * - `'click'` — user clicked the trigger element\n * - `'focus'` — focus entered the trigger (tooltip, popover)\n * - `'hover'` — pointer entered the trigger (tooltip)\n * - `'keyboard'` — keyboard shortcut or Enter/Space on a trigger\n * - `'programmatic'` — opened via the JS API without a user gesture\n * - `'trigger'` — opened via the Invoker Commands API (`command=\"show-modal\"`)\n */\nexport type OverlayOpenReason = 'click' | 'focus' | 'hover' | 'keyboard' | 'programmatic' | 'trigger';\n\n/** Close reasons valid for modal dialogs (includes 'swipe' for drawer). */\nexport type DialogCloseReason = 'escape' | 'outsideClick' | 'programmatic' | 'swipe' | 'trigger';\n/** Close reasons valid for dropdown overlays (no swipe). */\nexport type DropdownCloseReason = Exclude<DialogCloseReason, 'swipe'> | 'select';\n\n/** Detail shape for overlay open events emitted by components. */\nexport type OverlayOpenDetail = { reason: OverlayOpenReason };\n/** Detail shape for overlay close events emitted by components. */\nexport type OverlayCloseDetail = { reason: DialogCloseReason };\n/** Detail shape for state changes emitted by overlay components. */\nexport type OverlayOpenChangeDetail = {\n open: boolean;\n reason: DialogCloseReason | DropdownCloseReason | OverlayOpenReason;\n};\n\nexport type OutsidePointerDismissalOptions = {\n getTargets: () => Array<Element | null | undefined>;\n isActive: () => boolean;\n onDismiss: () => void;\n signal: AbortSignal;\n};\n\n/**\n * Dismisses an active floating surface when a pointer begins outside all of its\n * supplied boundary elements. Components retain ownership of their open state.\n */\nexport const createOutsidePointerDismissal = (options: OutsidePointerDismissalOptions): (() => void) => {\n const onPointerDown = (event: PointerEvent): void => {\n if (!options.isActive()) return;\n\n const path = event.composedPath();\n const target = path[0] instanceof Node ? path[0] : event.target instanceof Node ? event.target : null;\n const inside = options.getTargets().some((element) => {\n return (\n element !== null &&\n element !== undefined &&\n (path.includes(element) || Boolean(target && element.contains(target)))\n );\n });\n\n if (!inside) options.onDismiss();\n };\n\n const dispose = (): void => {\n document.removeEventListener('pointerdown', onPointerDown, { capture: true });\n };\n\n document.addEventListener('pointerdown', onPointerDown, { capture: true });\n options.signal.addEventListener('abort', dispose, { once: true });\n\n return dispose;\n};\n\n/**\n * Restores focus to a dropdown/floating-panel trigger when the owning overlay closes.\n *\n * Named distinctly from `FocusManager.restoreFocus()` (`./focus.ts`) — that method restores a\n * captured dialog-opener element from internal state; this function takes the trigger directly,\n * for dropdown-style overlays (menu) that never captured one.\n */\nexport const restoreTriggerFocus = (getTrigger: () => HTMLElement | null | undefined): void => {\n getTrigger()?.focus();\n};\n"],"mappings":"AAqCA,IAAa,EAAiC,GAA0D,CACtG,IAAM,EAAiB,GAA8B,CACnD,GAAI,CAAC,EAAQ,SAAS,EAAG,OAEzB,IAAM,EAAO,EAAM,aAAa,EAC1B,EAAS,EAAK,aAAc,KAAO,EAAK,GAAK,EAAM,kBAAkB,KAAO,EAAM,OAAS,KAClF,EAAQ,WAAW,CAAC,CAAC,KAAM,GAEtC,GAAY,OAEX,EAAK,SAAS,CAAO,GAAK,GAAQ,GAAU,EAAQ,SAAS,CAAM,GAInE,GAAQ,EAAQ,UAAU,CACjC,EAEM,MAAsB,CAC1B,SAAS,oBAAoB,cAAe,EAAe,CAAE,QAAS,EAAK,CAAC,CAC9E,EAKA,OAHA,SAAS,iBAAiB,cAAe,EAAe,CAAE,QAAS,EAAK,CAAC,EACzE,EAAQ,OAAO,iBAAiB,QAAS,EAAS,CAAE,KAAM,EAAK,CAAC,EAEzD,CACT,EASa,EAAuB,GAA2D,CAC7F,EAAW,CAAC,EAAE,MAAM,CACtB"}
@@ -11,7 +11,7 @@ export type OverlayOpenReason = 'click' | 'focus' | 'hover' | 'keyboard' | 'prog
11
11
  /** Close reasons valid for modal dialogs (includes 'swipe' for drawer). */
12
12
  export type DialogCloseReason = 'escape' | 'outsideClick' | 'programmatic' | 'swipe' | 'trigger';
13
13
  /** Close reasons valid for dropdown overlays (no swipe). */
14
- export type DropdownCloseReason = Exclude<DialogCloseReason, 'swipe'>;
14
+ export type DropdownCloseReason = Exclude<DialogCloseReason, 'swipe'> | 'select';
15
15
  /** Detail shape for overlay open events emitted by components. */
16
16
  export type OverlayOpenDetail = {
17
17
  reason: OverlayOpenReason;
@@ -23,7 +23,7 @@ export type OverlayCloseDetail = {
23
23
  /** Detail shape for state changes emitted by overlay components. */
24
24
  export type OverlayOpenChangeDetail = {
25
25
  open: boolean;
26
- reason: DialogCloseReason | OverlayOpenReason;
26
+ reason: DialogCloseReason | DropdownCloseReason | OverlayOpenReason;
27
27
  };
28
28
  export type OutsidePointerDismissalOptions = {
29
29
  getTargets: () => Array<Element | null | undefined>;
@@ -1 +1 @@
1
- {"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/core/overlay.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,cAAc,GAAG,SAAS,CAAC;AAEtG,2EAA2E;AAC3E,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,cAAc,GAAG,cAAc,GAAG,OAAO,GAAG,SAAS,CAAC;AACjG,4DAA4D;AAC5D,MAAM,MAAM,mBAAmB,GAAG,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC;AAEtE,kEAAkE;AAClE,MAAM,MAAM,iBAAiB,GAAG;IAAE,MAAM,EAAE,iBAAiB,CAAA;CAAE,CAAC;AAC9D,mEAAmE;AACnE,MAAM,MAAM,kBAAkB,GAAG;IAAE,MAAM,EAAE,iBAAiB,CAAA;CAAE,CAAC;AAC/D,oEAAoE;AACpE,MAAM,MAAM,uBAAuB,GAAG;IACpC,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,iBAAiB,GAAG,iBAAiB,CAAC;CAC/C,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG;IAC3C,UAAU,EAAE,MAAM,KAAK,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACpD,QAAQ,EAAE,MAAM,OAAO,CAAC;IACxB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,EAAE,WAAW,CAAC;CACrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,6BAA6B,GAAI,SAAS,8BAA8B,KAAG,CAAC,MAAM,IAAI,CAyBlG,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,GAAI,YAAY,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS,KAAG,IAEtF,CAAC"}
1
+ {"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/core/overlay.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,MAAM,MAAM,iBAAiB,GAAG,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,cAAc,GAAG,SAAS,CAAC;AAEtG,2EAA2E;AAC3E,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,cAAc,GAAG,cAAc,GAAG,OAAO,GAAG,SAAS,CAAC;AACjG,4DAA4D;AAC5D,MAAM,MAAM,mBAAmB,GAAG,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC;AAEjF,kEAAkE;AAClE,MAAM,MAAM,iBAAiB,GAAG;IAAE,MAAM,EAAE,iBAAiB,CAAA;CAAE,CAAC;AAC9D,mEAAmE;AACnE,MAAM,MAAM,kBAAkB,GAAG;IAAE,MAAM,EAAE,iBAAiB,CAAA;CAAE,CAAC;AAC/D,oEAAoE;AACpE,MAAM,MAAM,uBAAuB,GAAG;IACpC,IAAI,EAAE,OAAO,CAAC;IACd,MAAM,EAAE,iBAAiB,GAAG,mBAAmB,GAAG,iBAAiB,CAAC;CACrE,CAAC;AAEF,MAAM,MAAM,8BAA8B,GAAG;IAC3C,UAAU,EAAE,MAAM,KAAK,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC;IACpD,QAAQ,EAAE,MAAM,OAAO,CAAC;IACxB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,EAAE,WAAW,CAAC;CACrB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,6BAA6B,GAAI,SAAS,8BAA8B,KAAG,CAAC,MAAM,IAAI,CAyBlG,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,GAAI,YAAY,MAAM,WAAW,GAAG,IAAI,GAAG,SAAS,KAAG,IAEtF,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"overlay.js","names":[],"sources":["../../src/core/overlay.ts"],"sourcesContent":["/**\n * Why an overlay was opened.\n * - `'click'` — user clicked the trigger element\n * - `'focus'` — focus entered the trigger (tooltip, popover)\n * - `'hover'` — pointer entered the trigger (tooltip)\n * - `'keyboard'` — keyboard shortcut or Enter/Space on a trigger\n * - `'programmatic'` — opened via the JS API without a user gesture\n * - `'trigger'` — opened via the Invoker Commands API (`command=\"show-modal\"`)\n */\nexport type OverlayOpenReason = 'click' | 'focus' | 'hover' | 'keyboard' | 'programmatic' | 'trigger';\n\n/** Close reasons valid for modal dialogs (includes 'swipe' for drawer). */\nexport type DialogCloseReason = 'escape' | 'outsideClick' | 'programmatic' | 'swipe' | 'trigger';\n/** Close reasons valid for dropdown overlays (no swipe). */\nexport type DropdownCloseReason = Exclude<DialogCloseReason, 'swipe'>;\n\n/** Detail shape for overlay open events emitted by components. */\nexport type OverlayOpenDetail = { reason: OverlayOpenReason };\n/** Detail shape for overlay close events emitted by components. */\nexport type OverlayCloseDetail = { reason: DialogCloseReason };\n/** Detail shape for state changes emitted by overlay components. */\nexport type OverlayOpenChangeDetail = {\n open: boolean;\n reason: DialogCloseReason | OverlayOpenReason;\n};\n\nexport type OutsidePointerDismissalOptions = {\n getTargets: () => Array<Element | null | undefined>;\n isActive: () => boolean;\n onDismiss: () => void;\n signal: AbortSignal;\n};\n\n/**\n * Dismisses an active floating surface when a pointer begins outside all of its\n * supplied boundary elements. Components retain ownership of their open state.\n */\nexport const createOutsidePointerDismissal = (options: OutsidePointerDismissalOptions): (() => void) => {\n const onPointerDown = (event: PointerEvent): void => {\n if (!options.isActive()) return;\n\n const path = event.composedPath();\n const target = path[0] instanceof Node ? path[0] : event.target instanceof Node ? event.target : null;\n const inside = options.getTargets().some((element) => {\n return (\n element !== null &&\n element !== undefined &&\n (path.includes(element) || Boolean(target && element.contains(target)))\n );\n });\n\n if (!inside) options.onDismiss();\n };\n\n const dispose = (): void => {\n document.removeEventListener('pointerdown', onPointerDown, { capture: true });\n };\n\n document.addEventListener('pointerdown', onPointerDown, { capture: true });\n options.signal.addEventListener('abort', dispose, { once: true });\n\n return dispose;\n};\n\n/**\n * Restores focus to a dropdown/floating-panel trigger when the owning overlay closes.\n *\n * Named distinctly from `FocusManager.restoreFocus()` (`./focus.ts`) — that method restores a\n * captured dialog-opener element from internal state; this function takes the trigger directly,\n * for dropdown-style overlays (menu) that never captured one.\n */\nexport const restoreTriggerFocus = (getTrigger: () => HTMLElement | null | undefined): void => {\n getTrigger()?.focus();\n};\n"],"mappings":";AAqCA,IAAa,KAAiC,MAA0D;CACtG,IAAM,KAAiB,MAA8B;EACnD,IAAI,CAAC,EAAQ,SAAS,GAAG;EAEzB,IAAM,IAAO,EAAM,aAAa,GAC1B,IAAS,EAAK,cAAc,OAAO,EAAK,KAAK,EAAM,kBAAkB,OAAO,EAAM,SAAS;EASjG,AARe,EAAQ,WAAW,CAAC,CAAC,MAAM,MAEtC,KAAY,SAEX,EAAK,SAAS,CAAO,KAAK,GAAQ,KAAU,EAAQ,SAAS,CAAM,GAInE,KAAQ,EAAQ,UAAU;CACjC,GAEM,UAAsB;EAC1B,SAAS,oBAAoB,eAAe,GAAe,EAAE,SAAS,GAAK,CAAC;CAC9E;CAKA,OAHA,SAAS,iBAAiB,eAAe,GAAe,EAAE,SAAS,GAAK,CAAC,GACzE,EAAQ,OAAO,iBAAiB,SAAS,GAAS,EAAE,MAAM,GAAK,CAAC,GAEzD;AACT,GASa,KAAuB,MAA2D;CAC7F,EAAW,CAAC,EAAE,MAAM;AACtB"}
1
+ {"version":3,"file":"overlay.js","names":[],"sources":["../../src/core/overlay.ts"],"sourcesContent":["/**\n * Why an overlay was opened.\n * - `'click'` — user clicked the trigger element\n * - `'focus'` — focus entered the trigger (tooltip, popover)\n * - `'hover'` — pointer entered the trigger (tooltip)\n * - `'keyboard'` — keyboard shortcut or Enter/Space on a trigger\n * - `'programmatic'` — opened via the JS API without a user gesture\n * - `'trigger'` — opened via the Invoker Commands API (`command=\"show-modal\"`)\n */\nexport type OverlayOpenReason = 'click' | 'focus' | 'hover' | 'keyboard' | 'programmatic' | 'trigger';\n\n/** Close reasons valid for modal dialogs (includes 'swipe' for drawer). */\nexport type DialogCloseReason = 'escape' | 'outsideClick' | 'programmatic' | 'swipe' | 'trigger';\n/** Close reasons valid for dropdown overlays (no swipe). */\nexport type DropdownCloseReason = Exclude<DialogCloseReason, 'swipe'> | 'select';\n\n/** Detail shape for overlay open events emitted by components. */\nexport type OverlayOpenDetail = { reason: OverlayOpenReason };\n/** Detail shape for overlay close events emitted by components. */\nexport type OverlayCloseDetail = { reason: DialogCloseReason };\n/** Detail shape for state changes emitted by overlay components. */\nexport type OverlayOpenChangeDetail = {\n open: boolean;\n reason: DialogCloseReason | DropdownCloseReason | OverlayOpenReason;\n};\n\nexport type OutsidePointerDismissalOptions = {\n getTargets: () => Array<Element | null | undefined>;\n isActive: () => boolean;\n onDismiss: () => void;\n signal: AbortSignal;\n};\n\n/**\n * Dismisses an active floating surface when a pointer begins outside all of its\n * supplied boundary elements. Components retain ownership of their open state.\n */\nexport const createOutsidePointerDismissal = (options: OutsidePointerDismissalOptions): (() => void) => {\n const onPointerDown = (event: PointerEvent): void => {\n if (!options.isActive()) return;\n\n const path = event.composedPath();\n const target = path[0] instanceof Node ? path[0] : event.target instanceof Node ? event.target : null;\n const inside = options.getTargets().some((element) => {\n return (\n element !== null &&\n element !== undefined &&\n (path.includes(element) || Boolean(target && element.contains(target)))\n );\n });\n\n if (!inside) options.onDismiss();\n };\n\n const dispose = (): void => {\n document.removeEventListener('pointerdown', onPointerDown, { capture: true });\n };\n\n document.addEventListener('pointerdown', onPointerDown, { capture: true });\n options.signal.addEventListener('abort', dispose, { once: true });\n\n return dispose;\n};\n\n/**\n * Restores focus to a dropdown/floating-panel trigger when the owning overlay closes.\n *\n * Named distinctly from `FocusManager.restoreFocus()` (`./focus.ts`) — that method restores a\n * captured dialog-opener element from internal state; this function takes the trigger directly,\n * for dropdown-style overlays (menu) that never captured one.\n */\nexport const restoreTriggerFocus = (getTrigger: () => HTMLElement | null | undefined): void => {\n getTrigger()?.focus();\n};\n"],"mappings":";AAqCA,IAAa,KAAiC,MAA0D;CACtG,IAAM,KAAiB,MAA8B;EACnD,IAAI,CAAC,EAAQ,SAAS,GAAG;EAEzB,IAAM,IAAO,EAAM,aAAa,GAC1B,IAAS,EAAK,cAAc,OAAO,EAAK,KAAK,EAAM,kBAAkB,OAAO,EAAM,SAAS;EASjG,AARe,EAAQ,WAAW,CAAC,CAAC,MAAM,MAEtC,KAAY,SAEX,EAAK,SAAS,CAAO,KAAK,GAAQ,KAAU,EAAQ,SAAS,CAAM,GAInE,KAAQ,EAAQ,UAAU;CACjC,GAEM,UAAsB;EAC1B,SAAS,oBAAoB,eAAe,GAAe,EAAE,SAAS,GAAK,CAAC;CAC9E;CAKA,OAHA,SAAS,iBAAiB,eAAe,GAAe,EAAE,SAAS,GAAK,CAAC,GACzE,EAAQ,OAAO,iBAAiB,SAAS,GAAS,EAAE,MAAM,GAAK,CAAC,GAEzD;AACT,GASa,KAAuB,MAA2D;CAC7F,EAAW,CAAC,EAAE,MAAM;AACtB"}
@@ -1,2 +1,2 @@
1
- const e=require("./direction.cjs");let t=require("@vielzeug/orbit");var n=e=>e.endsWith(`-start`)?e.replace(`-start`,`-end`):e.endsWith(`-end`)?e.replace(`-end`,`-start`):e;function r({boundary:r,getDir:i,getFloating:a,getPlacement:o,getReference:s,matchWidth:c=!0,offsetPx:l=0,padding:u=6}){function d(){let t=o?.()??`bottom-start`;return(i?.()??e.elementDirection(s()))===`rtl`?n(t):t}function f(){let e=s(),n=a();if(!e||!n)return;let i=d(),o=r??(0,t.getClippingAncestorRect)(n),f=(0,t.computePosition)(e,n,{boundary:o,middleware:[...l?[(0,t.offset)(l)]:[],(0,t.flip)({padding:u}),(0,t.shift)({padding:u}),...c?[(0,t.size)({padding:u})]:[]],placement:i});n.style.left=`${f.x}px`,n.style.top=`${f.y}px`;let p=n.style.transition,m=n.style.transform;n.style.transition=`none`,n.style.transform=`none`;let h=n.getBoundingClientRect(),g=f.x-h.left,_=f.y-h.top;n.style.transition=p,n.style.transform=m,(g!==0||_!==0)&&(n.style.left=`${f.x+g}px`,n.style.top=`${f.y+_}px`),c&&(n.style.width=`${e.getBoundingClientRect().width}px`)}function p(){let e=s(),n=a();return!e||!n?()=>{}:(0,t.autoUpdate)(e,n,f)}return{floating:a,reference:s,startAutoUpdate:p,update:f}}exports.createDropdownPositioner=r;
1
+ const e=require("./direction.cjs");let t=require("@vielzeug/orbit");var n=e=>e.endsWith(`-start`)?e.replace(`-start`,`-end`):e.endsWith(`-end`)?e.replace(`-end`,`-start`):e;function r({boundary:r,getDir:i,getFloating:a,getPlacement:o,getReference:s,matchWidth:c=!0,offsetPx:l=0,padding:u=6,useClippingAncestor:d=!0}){function f(){let t=o?.()??`bottom-start`;return(i?.()??e.elementDirection(s()))===`rtl`?n(t):t}function p(){let e=s(),n=a();if(!e||!n)return;let i=f(),o=r??(d?(0,t.getClippingAncestorRect)(n):void 0),p=(0,t.computePosition)(e,n,{boundary:o,middleware:[...l?[(0,t.offset)(l)]:[],(0,t.flip)({padding:u}),(0,t.shift)({padding:u}),...c?[(0,t.size)({padding:u})]:[]],placement:i});n.style.left=`${p.x}px`,n.style.top=`${p.y}px`;let m=n.style.transition,h=n.style.transform;n.style.transition=`none`,n.style.transform=`none`;let g=n.getBoundingClientRect(),_=p.x-g.left,v=p.y-g.top;n.style.transition=m,n.style.transform=h,(_!==0||v!==0)&&(n.style.left=`${p.x+_}px`,n.style.top=`${p.y+v}px`),c&&(n.style.width=`${e.getBoundingClientRect().width}px`)}function m(){let e=s(),n=a();return!e||!n?()=>{}:(0,t.autoUpdate)(e,n,p)}return{floating:a,reference:s,startAutoUpdate:m,update:p}}exports.createDropdownPositioner=r;
2
2
  //# sourceMappingURL=positioner.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"positioner.cjs","names":[],"sources":["../../src/core/positioner.ts"],"sourcesContent":["import {\n autoUpdate,\n computePosition,\n flip,\n getClippingAncestorRect,\n offset,\n type Placement,\n type Rect,\n shift,\n size,\n} from '@vielzeug/orbit';\n\nimport { elementDirection } from './direction';\n\n// ── Overlay positioner contract ──────────────────────────────────────────────\n\nexport type OverlayPositioner = {\n floating: () => HTMLElement | null;\n reference: () => HTMLElement | null;\n /** Start continuous position auto-updates. Returns a stop function. */\n startAutoUpdate?: () => () => void;\n update: () => void;\n};\n\n// ── Dropdown positioner ───────────────────────────────────────────────────────\n\nexport type DropdownPositionerOptions = {\n /**\n * Clipping boundary for flip/shift/size — the edges the dropdown must stay within.\n * Defaults to the nearest ancestor that actually clips content (`overflow:\n * hidden|auto|scroll|clip`, e.g. a dialog panel), auto-detected per update via\n * `getClippingAncestorRect()`, intersected with the viewport. Without this, flip/shift only\n * avoid the full page viewport — a dropdown can be \"in view\" by that measure while still\n * visibly overhanging a much smaller container it's actually nested in. Pass an explicit\n * boundary to override auto-detection.\n */\n boundary?: Element | Rect;\n /**\n * Returns the text direction used for placement mirroring. Defaults to the resolved\n * direction of the reference element (nearest `dir=\"ltr\"|\"rtl\"` ancestor, falling back to\n * computed style) — most callers never need to pass this explicitly.\n */\n getDir?: () => 'ltr' | 'rtl';\n /** Getter for the floating (dropdown panel) element. */\n getFloating: () => HTMLElement | null;\n /** Getter for the current placement. Defaults to 'bottom-start' (RTL-aware: flips to 'bottom-end'). */\n getPlacement?: () => Placement;\n /** Getter for the reference (trigger) element. */\n getReference: () => HTMLElement | null;\n /** Whether to match the floating element width to the reference. Default: true */\n matchWidth?: boolean;\n /** Additional offset in pixels between reference and floating element. Default: 0 */\n offsetPx?: number;\n /** Padding (px) used by flip, shift, and size middleware. Default: 6 */\n padding?: number;\n};\n\n/** Mirrors a start/end placement for RTL layouts. */\nconst rtlPlacement = (p: Placement): Placement => {\n if (p.endsWith('-start')) return p.replace('-start', '-end') as Placement;\n\n if (p.endsWith('-end')) return p.replace('-end', '-start') as Placement;\n\n return p;\n};\n\n/**\n * Creates an Orbit-powered positioner for dropdown overlays (select, combobox, menu).\n *\n * Uses flip + shift + optional width-matching middleware. Supports continuous\n * auto-update for repositioning on scroll or resize.\n *\n * RTL-aware: start/end placements are automatically mirrored so dropdowns open on the\n * correct side, based on `getDir` (or the reference element's resolved direction when\n * `getDir` is omitted).\n */\nexport function createDropdownPositioner({\n boundary,\n getDir,\n getFloating,\n getPlacement,\n getReference,\n matchWidth = true,\n offsetPx = 0,\n padding = 6,\n}: DropdownPositionerOptions): OverlayPositioner {\n function resolvedPlacement(): Placement {\n const base = getPlacement?.() ?? 'bottom-start';\n const dir = getDir?.() ?? elementDirection(getReference());\n\n return dir === 'rtl' ? rtlPlacement(base) : base;\n }\n\n function updatePosition(): void {\n const ref = getReference();\n const floating = getFloating();\n\n if (!ref || !floating) return;\n\n const placement = resolvedPlacement();\n // Defaults to `undefined` (meaning \"auto-detect\"), not the detected value itself —\n // re-running the detection on every update (rather than once, at positioner-creation time)\n // matters because the dialog/scroll-container an instance is rendered into can change\n // across opens (e.g. the same `<ore-select>` reused in different dialogs), and the detected\n // ancestor's own rect can change between opens even when it's the same element (a resized\n // dialog).\n const resolvedBoundary = boundary ?? getClippingAncestorRect(floating);\n\n const result = computePosition(ref, floating, {\n boundary: resolvedBoundary,\n middleware: [\n ...(offsetPx ? [offset(offsetPx)] : []),\n flip({ padding }),\n shift({ padding }),\n ...(matchWidth ? [size({ padding })] : []),\n ],\n placement,\n });\n\n floating.style.left = `${result.x}px`;\n floating.style.top = `${result.y}px`;\n\n // `computePosition()` assumes `left`/`top` resolve relative to the viewport (correct for\n // `position: fixed`) — true almost always, but not when some ancestor establishes a\n // containing block for fixed descendants (a non-`none` `transform`, even a visually-identity\n // one left over from an entrance transition that never resets to `none` at rest is a real,\n // easy-to-hit case — a modal dialog's panel, say). Analytically detecting *that* ancestor via\n // `getContainingBlock()` and pre-subtracting its rect turned out to be unreliable in\n // practice: browsers don't apply the \"ancestor transform traps fixed descendants\" rule\n // uniformly across every element nested under it in every case we tested — some floating\n // elements in the exact same subtree needed the correction and some didn't, for reasons we\n // couldn't fully pin down. Measuring what actually happened after writing `left`/`top`\n // and correcting only the observed gap sidesteps that: it's a no-op when the browser already\n // put the element where asked, and it fixes the same class of bug the moment there's a real\n // mismatch, regardless of which specific ancestor (if any) turns out to be responsible.\n //\n // The measurement itself must not be fooled by the floating element's *own* transform,\n // though: dropdowns/popovers here all use a `transform: translateY(...)` entrance transition\n // driven by a `[data-open]` attribute + `@starting-style` — right at open, before the\n // transition has visibly progressed, `getBoundingClientRect()` can still reflect that\n // starting offset (a handful of px, matching `--overlay-enter-translate-y`), which this\n // correction would otherwise misread as a permanent ancestor-driven mismatch and bake in\n // forever. Temporarily neutralizing the floating element's own transform for the measurement\n // (and restoring it before anything paints, so there's no visible flash) isolates the\n // correction to ancestor-driven offsets only, which is the only thing it's meant to fix.\n const prevTransition = floating.style.transition;\n const prevTransform = floating.style.transform;\n\n floating.style.transition = 'none';\n floating.style.transform = 'none';\n\n const actual = floating.getBoundingClientRect();\n const deltaX = result.x - actual.left;\n const deltaY = result.y - actual.top;\n\n floating.style.transition = prevTransition;\n floating.style.transform = prevTransform;\n\n if (deltaX !== 0 || deltaY !== 0) {\n floating.style.left = `${result.x + deltaX}px`;\n floating.style.top = `${result.y + deltaY}px`;\n }\n\n if (matchWidth) {\n floating.style.width = `${ref.getBoundingClientRect().width}px`;\n }\n }\n\n function startAutoUpdate(): () => void {\n const ref = getReference();\n const floating = getFloating();\n\n if (!ref || !floating) return () => {};\n\n return autoUpdate(ref, floating, updatePosition);\n }\n\n return { floating: getFloating, reference: getReference, startAutoUpdate, update: updatePosition };\n}\n"],"mappings":"oEA0DA,IAAM,EAAgB,GAChB,EAAE,SAAS,QAAQ,EAAU,EAAE,QAAQ,SAAU,MAAM,EAEvD,EAAE,SAAS,MAAM,EAAU,EAAE,QAAQ,OAAQ,QAAQ,EAElD,EAaT,SAAgB,EAAyB,CACvC,WACA,SACA,cACA,eACA,eACA,aAAa,GACb,WAAW,EACX,UAAU,GACqC,CAC/C,SAAS,GAA+B,CACtC,IAAM,EAAO,IAAe,GAAK,eAGjC,OAFY,IAAS,GAAK,EAAA,iBAAiB,EAAa,CAAC,KAE1C,MAAQ,EAAa,CAAI,EAAI,CAC9C,CAEA,SAAS,GAAuB,CAC9B,IAAM,EAAM,EAAa,EACnB,EAAW,EAAY,EAE7B,GAAI,CAAC,GAAO,CAAC,EAAU,OAEvB,IAAM,EAAY,EAAkB,EAO9B,EAAmB,IAAA,EAAY,EAAA,wBAAA,CAAwB,CAAQ,EAE/D,GAAA,EAAS,EAAA,gBAAA,CAAgB,EAAK,EAAU,CAC5C,SAAU,EACV,WAAY,CACV,GAAI,EAAW,EAAA,EAAC,EAAA,OAAA,CAAO,CAAQ,CAAC,EAAI,CAAC,GACrC,EAAA,EAAA,KAAA,CAAK,CAAE,SAAQ,CAAC,GAChB,EAAA,EAAA,MAAA,CAAM,CAAE,SAAQ,CAAC,EACjB,GAAI,EAAa,EAAA,EAAC,EAAA,KAAA,CAAK,CAAE,SAAQ,CAAC,CAAC,EAAI,CAAC,CAC1C,EACA,WACF,CAAC,EAED,EAAS,MAAM,KAAO,GAAG,EAAO,EAAE,IAClC,EAAS,MAAM,IAAM,GAAG,EAAO,EAAE,IAyBjC,IAAM,EAAiB,EAAS,MAAM,WAChC,EAAgB,EAAS,MAAM,UAErC,EAAS,MAAM,WAAa,OAC5B,EAAS,MAAM,UAAY,OAE3B,IAAM,EAAS,EAAS,sBAAsB,EACxC,EAAS,EAAO,EAAI,EAAO,KAC3B,EAAS,EAAO,EAAI,EAAO,IAEjC,EAAS,MAAM,WAAa,EAC5B,EAAS,MAAM,UAAY,GAEvB,IAAW,GAAK,IAAW,KAC7B,EAAS,MAAM,KAAO,GAAG,EAAO,EAAI,EAAO,IAC3C,EAAS,MAAM,IAAM,GAAG,EAAO,EAAI,EAAO,KAGxC,IACF,EAAS,MAAM,MAAQ,GAAG,EAAI,sBAAsB,CAAC,CAAC,MAAM,IAEhE,CAEA,SAAS,GAA8B,CACrC,IAAM,EAAM,EAAa,EACnB,EAAW,EAAY,EAI7B,MAFI,CAAC,GAAO,CAAC,MAAuB,CAAC,GAErC,EAAO,EAAA,WAAA,CAAW,EAAK,EAAU,CAAc,CACjD,CAEA,MAAO,CAAE,SAAU,EAAa,UAAW,EAAc,kBAAiB,OAAQ,CAAe,CACnG"}
1
+ {"version":3,"file":"positioner.cjs","names":[],"sources":["../../src/core/positioner.ts"],"sourcesContent":["import {\n autoUpdate,\n computePosition,\n flip,\n getClippingAncestorRect,\n offset,\n type Placement,\n type Rect,\n shift,\n size,\n} from '@vielzeug/orbit';\n\nimport { elementDirection } from './direction';\n\n// ── Overlay positioner contract ──────────────────────────────────────────────\n\nexport type OverlayPositioner = {\n floating: () => HTMLElement | null;\n reference: () => HTMLElement | null;\n /** Start continuous position auto-updates. Returns a stop function. */\n startAutoUpdate?: () => () => void;\n update: () => void;\n};\n\n// ── Dropdown positioner ───────────────────────────────────────────────────────\n\nexport type DropdownPositionerOptions = {\n /**\n * Clipping boundary for flip/shift/size — the edges the dropdown must stay within.\n * Defaults to the nearest ancestor that actually clips content (`overflow:\n * hidden|auto|scroll|clip`, e.g. a dialog panel), auto-detected per update via\n * `getClippingAncestorRect()`, intersected with the viewport. Without this, flip/shift only\n * avoid the full page viewport — a dropdown can be \"in view\" by that measure while still\n * visibly overhanging a much smaller container it's actually nested in. Pass an explicit\n * boundary to override auto-detection.\n */\n boundary?: Element | Rect;\n /**\n * Returns the text direction used for placement mirroring. Defaults to the resolved\n * direction of the reference element (nearest `dir=\"ltr\"|\"rtl\"` ancestor, falling back to\n * computed style) — most callers never need to pass this explicitly.\n */\n getDir?: () => 'ltr' | 'rtl';\n /** Getter for the floating (dropdown panel) element. */\n getFloating: () => HTMLElement | null;\n /** Getter for the current placement. Defaults to 'bottom-start' (RTL-aware: flips to 'bottom-end'). */\n getPlacement?: () => Placement;\n /** Getter for the reference (trigger) element. */\n getReference: () => HTMLElement | null;\n /** Whether to match the floating element width to the reference. Default: true */\n matchWidth?: boolean;\n /** Additional offset in pixels between reference and floating element. Default: 0 */\n offsetPx?: number;\n /** Padding (px) used by flip, shift, and size middleware. Default: 6 */\n padding?: number;\n /**\n * Whether to constrain placement to a clipping ancestor when `boundary` is unset. Default:\n * true. Disable for native Popover API panels, which render in the top layer.\n */\n useClippingAncestor?: boolean;\n};\n\n/** Mirrors a start/end placement for RTL layouts. */\nconst rtlPlacement = (p: Placement): Placement => {\n if (p.endsWith('-start')) return p.replace('-start', '-end') as Placement;\n\n if (p.endsWith('-end')) return p.replace('-end', '-start') as Placement;\n\n return p;\n};\n\n/**\n * Creates an Orbit-powered positioner for dropdown overlays (select, combobox, menu).\n *\n * Uses flip + shift + optional width-matching middleware. Supports continuous\n * auto-update for repositioning on scroll or resize.\n *\n * RTL-aware: start/end placements are automatically mirrored so dropdowns open on the\n * correct side, based on `getDir` (or the reference element's resolved direction when\n * `getDir` is omitted).\n */\nexport function createDropdownPositioner({\n boundary,\n getDir,\n getFloating,\n getPlacement,\n getReference,\n matchWidth = true,\n offsetPx = 0,\n padding = 6,\n useClippingAncestor = true,\n}: DropdownPositionerOptions): OverlayPositioner {\n function resolvedPlacement(): Placement {\n const base = getPlacement?.() ?? 'bottom-start';\n const dir = getDir?.() ?? elementDirection(getReference());\n\n return dir === 'rtl' ? rtlPlacement(base) : base;\n }\n\n function updatePosition(): void {\n const ref = getReference();\n const floating = getFloating();\n\n if (!ref || !floating) return;\n\n const placement = resolvedPlacement();\n // Defaults to `undefined` (meaning \"auto-detect\"), not the detected value itself —\n // re-running the detection on every update (rather than once, at positioner-creation time)\n // matters because the dialog/scroll-container an instance is rendered into can change\n // across opens (e.g. the same `<ore-select>` reused in different dialogs), and the detected\n // ancestor's own rect can change between opens even when it's the same element (a resized\n // dialog).\n const resolvedBoundary = boundary ?? (useClippingAncestor ? getClippingAncestorRect(floating) : undefined);\n\n const result = computePosition(ref, floating, {\n boundary: resolvedBoundary,\n middleware: [\n ...(offsetPx ? [offset(offsetPx)] : []),\n flip({ padding }),\n shift({ padding }),\n ...(matchWidth ? [size({ padding })] : []),\n ],\n placement,\n });\n\n floating.style.left = `${result.x}px`;\n floating.style.top = `${result.y}px`;\n\n // `computePosition()` assumes `left`/`top` resolve relative to the viewport (correct for\n // `position: fixed`) — true almost always, but not when some ancestor establishes a\n // containing block for fixed descendants (a non-`none` `transform`, even a visually-identity\n // one left over from an entrance transition that never resets to `none` at rest is a real,\n // easy-to-hit case — a modal dialog's panel, say). Analytically detecting *that* ancestor via\n // `getContainingBlock()` and pre-subtracting its rect turned out to be unreliable in\n // practice: browsers don't apply the \"ancestor transform traps fixed descendants\" rule\n // uniformly across every element nested under it in every case we tested — some floating\n // elements in the exact same subtree needed the correction and some didn't, for reasons we\n // couldn't fully pin down. Measuring what actually happened after writing `left`/`top`\n // and correcting only the observed gap sidesteps that: it's a no-op when the browser already\n // put the element where asked, and it fixes the same class of bug the moment there's a real\n // mismatch, regardless of which specific ancestor (if any) turns out to be responsible.\n //\n // The measurement itself must not be fooled by the floating element's *own* transform,\n // though: dropdowns/popovers here all use a `transform: translateY(...)` entrance transition\n // driven by a `[data-open]` attribute + `@starting-style` — right at open, before the\n // transition has visibly progressed, `getBoundingClientRect()` can still reflect that\n // starting offset (a handful of px, matching `--overlay-enter-translate-y`), which this\n // correction would otherwise misread as a permanent ancestor-driven mismatch and bake in\n // forever. Temporarily neutralizing the floating element's own transform for the measurement\n // (and restoring it before anything paints, so there's no visible flash) isolates the\n // correction to ancestor-driven offsets only, which is the only thing it's meant to fix.\n const prevTransition = floating.style.transition;\n const prevTransform = floating.style.transform;\n\n floating.style.transition = 'none';\n floating.style.transform = 'none';\n\n const actual = floating.getBoundingClientRect();\n const deltaX = result.x - actual.left;\n const deltaY = result.y - actual.top;\n\n floating.style.transition = prevTransition;\n floating.style.transform = prevTransform;\n\n if (deltaX !== 0 || deltaY !== 0) {\n floating.style.left = `${result.x + deltaX}px`;\n floating.style.top = `${result.y + deltaY}px`;\n }\n\n if (matchWidth) {\n floating.style.width = `${ref.getBoundingClientRect().width}px`;\n }\n }\n\n function startAutoUpdate(): () => void {\n const ref = getReference();\n const floating = getFloating();\n\n if (!ref || !floating) return () => {};\n\n return autoUpdate(ref, floating, updatePosition);\n }\n\n return { floating: getFloating, reference: getReference, startAutoUpdate, update: updatePosition };\n}\n"],"mappings":"oEA+DA,IAAM,EAAgB,GAChB,EAAE,SAAS,QAAQ,EAAU,EAAE,QAAQ,SAAU,MAAM,EAEvD,EAAE,SAAS,MAAM,EAAU,EAAE,QAAQ,OAAQ,QAAQ,EAElD,EAaT,SAAgB,EAAyB,CACvC,WACA,SACA,cACA,eACA,eACA,aAAa,GACb,WAAW,EACX,UAAU,EACV,sBAAsB,IACyB,CAC/C,SAAS,GAA+B,CACtC,IAAM,EAAO,IAAe,GAAK,eAGjC,OAFY,IAAS,GAAK,EAAA,iBAAiB,EAAa,CAAC,KAE1C,MAAQ,EAAa,CAAI,EAAI,CAC9C,CAEA,SAAS,GAAuB,CAC9B,IAAM,EAAM,EAAa,EACnB,EAAW,EAAY,EAE7B,GAAI,CAAC,GAAO,CAAC,EAAU,OAEvB,IAAM,EAAY,EAAkB,EAO9B,EAAmB,IAAa,GAAA,EAAsB,EAAA,wBAAA,CAAwB,CAAQ,EAAI,IAAA,IAE1F,GAAA,EAAS,EAAA,gBAAA,CAAgB,EAAK,EAAU,CAC5C,SAAU,EACV,WAAY,CACV,GAAI,EAAW,EAAA,EAAC,EAAA,OAAA,CAAO,CAAQ,CAAC,EAAI,CAAC,GACrC,EAAA,EAAA,KAAA,CAAK,CAAE,SAAQ,CAAC,GAChB,EAAA,EAAA,MAAA,CAAM,CAAE,SAAQ,CAAC,EACjB,GAAI,EAAa,EAAA,EAAC,EAAA,KAAA,CAAK,CAAE,SAAQ,CAAC,CAAC,EAAI,CAAC,CAC1C,EACA,WACF,CAAC,EAED,EAAS,MAAM,KAAO,GAAG,EAAO,EAAE,IAClC,EAAS,MAAM,IAAM,GAAG,EAAO,EAAE,IAyBjC,IAAM,EAAiB,EAAS,MAAM,WAChC,EAAgB,EAAS,MAAM,UAErC,EAAS,MAAM,WAAa,OAC5B,EAAS,MAAM,UAAY,OAE3B,IAAM,EAAS,EAAS,sBAAsB,EACxC,EAAS,EAAO,EAAI,EAAO,KAC3B,EAAS,EAAO,EAAI,EAAO,IAEjC,EAAS,MAAM,WAAa,EAC5B,EAAS,MAAM,UAAY,GAEvB,IAAW,GAAK,IAAW,KAC7B,EAAS,MAAM,KAAO,GAAG,EAAO,EAAI,EAAO,IAC3C,EAAS,MAAM,IAAM,GAAG,EAAO,EAAI,EAAO,KAGxC,IACF,EAAS,MAAM,MAAQ,GAAG,EAAI,sBAAsB,CAAC,CAAC,MAAM,IAEhE,CAEA,SAAS,GAA8B,CACrC,IAAM,EAAM,EAAa,EACnB,EAAW,EAAY,EAI7B,MAFI,CAAC,GAAO,CAAC,MAAuB,CAAC,GAErC,EAAO,EAAA,WAAA,CAAW,EAAK,EAAU,CAAc,CACjD,CAEA,MAAO,CAAE,SAAU,EAAa,UAAW,EAAc,kBAAiB,OAAQ,CAAe,CACnG"}
@@ -35,6 +35,11 @@ export type DropdownPositionerOptions = {
35
35
  offsetPx?: number;
36
36
  /** Padding (px) used by flip, shift, and size middleware. Default: 6 */
37
37
  padding?: number;
38
+ /**
39
+ * Whether to constrain placement to a clipping ancestor when `boundary` is unset. Default:
40
+ * true. Disable for native Popover API panels, which render in the top layer.
41
+ */
42
+ useClippingAncestor?: boolean;
38
43
  };
39
44
  /**
40
45
  * Creates an Orbit-powered positioner for dropdown overlays (select, combobox, menu).
@@ -46,5 +51,5 @@ export type DropdownPositionerOptions = {
46
51
  * correct side, based on `getDir` (or the reference element's resolved direction when
47
52
  * `getDir` is omitted).
48
53
  */
49
- export declare function createDropdownPositioner({ boundary, getDir, getFloating, getPlacement, getReference, matchWidth, offsetPx, padding, }: DropdownPositionerOptions): OverlayPositioner;
54
+ export declare function createDropdownPositioner({ boundary, getDir, getFloating, getPlacement, getReference, matchWidth, offsetPx, padding, useClippingAncestor, }: DropdownPositionerOptions): OverlayPositioner;
50
55
  //# sourceMappingURL=positioner.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"positioner.d.ts","sourceRoot":"","sources":["../../src/core/positioner.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACd,KAAK,IAAI,EAGV,MAAM,iBAAiB,CAAC;AAMzB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACnC,SAAS,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACpC,uEAAuE;IACvE,eAAe,CAAC,EAAE,MAAM,MAAM,IAAI,CAAC;IACnC,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAIF,MAAM,MAAM,yBAAyB,GAAG;IACtC;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,KAAK,GAAG,KAAK,CAAC;IAC7B,wDAAwD;IACxD,WAAW,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACtC,uGAAuG;IACvG,YAAY,CAAC,EAAE,MAAM,SAAS,CAAC;IAC/B,kDAAkD;IAClD,YAAY,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACvC,kFAAkF;IAClF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAWF;;;;;;;;;GASG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,QAAQ,EACR,MAAM,EACN,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAiB,EACjB,QAAY,EACZ,OAAW,GACZ,EAAE,yBAAyB,GAAG,iBAAiB,CA6F/C"}
1
+ {"version":3,"file":"positioner.d.ts","sourceRoot":"","sources":["../../src/core/positioner.ts"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EACd,KAAK,IAAI,EAGV,MAAM,iBAAiB,CAAC;AAMzB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACnC,SAAS,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACpC,uEAAuE;IACvE,eAAe,CAAC,EAAE,MAAM,MAAM,IAAI,CAAC;IACnC,MAAM,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAIF,MAAM,MAAM,yBAAyB,GAAG;IACtC;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IAC1B;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,KAAK,GAAG,KAAK,CAAC;IAC7B,wDAAwD;IACxD,WAAW,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACtC,uGAAuG;IACvG,YAAY,CAAC,EAAE,MAAM,SAAS,CAAC;IAC/B,kDAAkD;IAClD,YAAY,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IACvC,kFAAkF;IAClF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wEAAwE;IACxE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B,CAAC;AAWF;;;;;;;;;GASG;AACH,wBAAgB,wBAAwB,CAAC,EACvC,QAAQ,EACR,MAAM,EACN,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,UAAiB,EACjB,QAAY,EACZ,OAAW,EACX,mBAA0B,GAC3B,EAAE,yBAAyB,GAAG,iBAAiB,CA6F/C"}
@@ -2,15 +2,15 @@ import { elementDirection as e } from "./direction.js";
2
2
  import { autoUpdate as t, computePosition as n, flip as r, getClippingAncestorRect as i, offset as a, shift as o, size as s } from "@vielzeug/orbit";
3
3
  //#region src/core/positioner.ts
4
4
  var c = (e) => e.endsWith("-start") ? e.replace("-start", "-end") : e.endsWith("-end") ? e.replace("-end", "-start") : e;
5
- function l({ boundary: l, getDir: u, getFloating: d, getPlacement: f, getReference: p, matchWidth: m = !0, offsetPx: h = 0, padding: g = 6 }) {
6
- function _() {
5
+ function l({ boundary: l, getDir: u, getFloating: d, getPlacement: f, getReference: p, matchWidth: m = !0, offsetPx: h = 0, padding: g = 6, useClippingAncestor: _ = !0 }) {
6
+ function v() {
7
7
  let t = f?.() ?? "bottom-start";
8
8
  return (u?.() ?? e(p())) === "rtl" ? c(t) : t;
9
9
  }
10
- function v() {
10
+ function y() {
11
11
  let e = p(), t = d();
12
12
  if (!e || !t) return;
13
- let c = _(), u = l ?? i(t), f = n(e, t, {
13
+ let c = v(), u = l ?? (_ ? i(t) : void 0), f = n(e, t, {
14
14
  boundary: u,
15
15
  middleware: [
16
16
  ...h ? [a(h)] : [],
@@ -21,20 +21,20 @@ function l({ boundary: l, getDir: u, getFloating: d, getPlacement: f, getReferen
21
21
  placement: c
22
22
  });
23
23
  t.style.left = `${f.x}px`, t.style.top = `${f.y}px`;
24
- let v = t.style.transition, y = t.style.transform;
24
+ let y = t.style.transition, b = t.style.transform;
25
25
  t.style.transition = "none", t.style.transform = "none";
26
- let b = t.getBoundingClientRect(), x = f.x - b.left, S = f.y - b.top;
27
- t.style.transition = v, t.style.transform = y, (x !== 0 || S !== 0) && (t.style.left = `${f.x + x}px`, t.style.top = `${f.y + S}px`), m && (t.style.width = `${e.getBoundingClientRect().width}px`);
26
+ let x = t.getBoundingClientRect(), S = f.x - x.left, C = f.y - x.top;
27
+ t.style.transition = y, t.style.transform = b, (S !== 0 || C !== 0) && (t.style.left = `${f.x + S}px`, t.style.top = `${f.y + C}px`), m && (t.style.width = `${e.getBoundingClientRect().width}px`);
28
28
  }
29
- function y() {
29
+ function b() {
30
30
  let e = p(), n = d();
31
- return !e || !n ? () => {} : t(e, n, v);
31
+ return !e || !n ? () => {} : t(e, n, y);
32
32
  }
33
33
  return {
34
34
  floating: d,
35
35
  reference: p,
36
- startAutoUpdate: y,
37
- update: v
36
+ startAutoUpdate: b,
37
+ update: y
38
38
  };
39
39
  }
40
40
  //#endregion
@@ -1 +1 @@
1
- {"version":3,"file":"positioner.js","names":[],"sources":["../../src/core/positioner.ts"],"sourcesContent":["import {\n autoUpdate,\n computePosition,\n flip,\n getClippingAncestorRect,\n offset,\n type Placement,\n type Rect,\n shift,\n size,\n} from '@vielzeug/orbit';\n\nimport { elementDirection } from './direction';\n\n// ── Overlay positioner contract ──────────────────────────────────────────────\n\nexport type OverlayPositioner = {\n floating: () => HTMLElement | null;\n reference: () => HTMLElement | null;\n /** Start continuous position auto-updates. Returns a stop function. */\n startAutoUpdate?: () => () => void;\n update: () => void;\n};\n\n// ── Dropdown positioner ───────────────────────────────────────────────────────\n\nexport type DropdownPositionerOptions = {\n /**\n * Clipping boundary for flip/shift/size — the edges the dropdown must stay within.\n * Defaults to the nearest ancestor that actually clips content (`overflow:\n * hidden|auto|scroll|clip`, e.g. a dialog panel), auto-detected per update via\n * `getClippingAncestorRect()`, intersected with the viewport. Without this, flip/shift only\n * avoid the full page viewport — a dropdown can be \"in view\" by that measure while still\n * visibly overhanging a much smaller container it's actually nested in. Pass an explicit\n * boundary to override auto-detection.\n */\n boundary?: Element | Rect;\n /**\n * Returns the text direction used for placement mirroring. Defaults to the resolved\n * direction of the reference element (nearest `dir=\"ltr\"|\"rtl\"` ancestor, falling back to\n * computed style) — most callers never need to pass this explicitly.\n */\n getDir?: () => 'ltr' | 'rtl';\n /** Getter for the floating (dropdown panel) element. */\n getFloating: () => HTMLElement | null;\n /** Getter for the current placement. Defaults to 'bottom-start' (RTL-aware: flips to 'bottom-end'). */\n getPlacement?: () => Placement;\n /** Getter for the reference (trigger) element. */\n getReference: () => HTMLElement | null;\n /** Whether to match the floating element width to the reference. Default: true */\n matchWidth?: boolean;\n /** Additional offset in pixels between reference and floating element. Default: 0 */\n offsetPx?: number;\n /** Padding (px) used by flip, shift, and size middleware. Default: 6 */\n padding?: number;\n};\n\n/** Mirrors a start/end placement for RTL layouts. */\nconst rtlPlacement = (p: Placement): Placement => {\n if (p.endsWith('-start')) return p.replace('-start', '-end') as Placement;\n\n if (p.endsWith('-end')) return p.replace('-end', '-start') as Placement;\n\n return p;\n};\n\n/**\n * Creates an Orbit-powered positioner for dropdown overlays (select, combobox, menu).\n *\n * Uses flip + shift + optional width-matching middleware. Supports continuous\n * auto-update for repositioning on scroll or resize.\n *\n * RTL-aware: start/end placements are automatically mirrored so dropdowns open on the\n * correct side, based on `getDir` (or the reference element's resolved direction when\n * `getDir` is omitted).\n */\nexport function createDropdownPositioner({\n boundary,\n getDir,\n getFloating,\n getPlacement,\n getReference,\n matchWidth = true,\n offsetPx = 0,\n padding = 6,\n}: DropdownPositionerOptions): OverlayPositioner {\n function resolvedPlacement(): Placement {\n const base = getPlacement?.() ?? 'bottom-start';\n const dir = getDir?.() ?? elementDirection(getReference());\n\n return dir === 'rtl' ? rtlPlacement(base) : base;\n }\n\n function updatePosition(): void {\n const ref = getReference();\n const floating = getFloating();\n\n if (!ref || !floating) return;\n\n const placement = resolvedPlacement();\n // Defaults to `undefined` (meaning \"auto-detect\"), not the detected value itself —\n // re-running the detection on every update (rather than once, at positioner-creation time)\n // matters because the dialog/scroll-container an instance is rendered into can change\n // across opens (e.g. the same `<ore-select>` reused in different dialogs), and the detected\n // ancestor's own rect can change between opens even when it's the same element (a resized\n // dialog).\n const resolvedBoundary = boundary ?? getClippingAncestorRect(floating);\n\n const result = computePosition(ref, floating, {\n boundary: resolvedBoundary,\n middleware: [\n ...(offsetPx ? [offset(offsetPx)] : []),\n flip({ padding }),\n shift({ padding }),\n ...(matchWidth ? [size({ padding })] : []),\n ],\n placement,\n });\n\n floating.style.left = `${result.x}px`;\n floating.style.top = `${result.y}px`;\n\n // `computePosition()` assumes `left`/`top` resolve relative to the viewport (correct for\n // `position: fixed`) — true almost always, but not when some ancestor establishes a\n // containing block for fixed descendants (a non-`none` `transform`, even a visually-identity\n // one left over from an entrance transition that never resets to `none` at rest is a real,\n // easy-to-hit case — a modal dialog's panel, say). Analytically detecting *that* ancestor via\n // `getContainingBlock()` and pre-subtracting its rect turned out to be unreliable in\n // practice: browsers don't apply the \"ancestor transform traps fixed descendants\" rule\n // uniformly across every element nested under it in every case we tested — some floating\n // elements in the exact same subtree needed the correction and some didn't, for reasons we\n // couldn't fully pin down. Measuring what actually happened after writing `left`/`top`\n // and correcting only the observed gap sidesteps that: it's a no-op when the browser already\n // put the element where asked, and it fixes the same class of bug the moment there's a real\n // mismatch, regardless of which specific ancestor (if any) turns out to be responsible.\n //\n // The measurement itself must not be fooled by the floating element's *own* transform,\n // though: dropdowns/popovers here all use a `transform: translateY(...)` entrance transition\n // driven by a `[data-open]` attribute + `@starting-style` — right at open, before the\n // transition has visibly progressed, `getBoundingClientRect()` can still reflect that\n // starting offset (a handful of px, matching `--overlay-enter-translate-y`), which this\n // correction would otherwise misread as a permanent ancestor-driven mismatch and bake in\n // forever. Temporarily neutralizing the floating element's own transform for the measurement\n // (and restoring it before anything paints, so there's no visible flash) isolates the\n // correction to ancestor-driven offsets only, which is the only thing it's meant to fix.\n const prevTransition = floating.style.transition;\n const prevTransform = floating.style.transform;\n\n floating.style.transition = 'none';\n floating.style.transform = 'none';\n\n const actual = floating.getBoundingClientRect();\n const deltaX = result.x - actual.left;\n const deltaY = result.y - actual.top;\n\n floating.style.transition = prevTransition;\n floating.style.transform = prevTransform;\n\n if (deltaX !== 0 || deltaY !== 0) {\n floating.style.left = `${result.x + deltaX}px`;\n floating.style.top = `${result.y + deltaY}px`;\n }\n\n if (matchWidth) {\n floating.style.width = `${ref.getBoundingClientRect().width}px`;\n }\n }\n\n function startAutoUpdate(): () => void {\n const ref = getReference();\n const floating = getFloating();\n\n if (!ref || !floating) return () => {};\n\n return autoUpdate(ref, floating, updatePosition);\n }\n\n return { floating: getFloating, reference: getReference, startAutoUpdate, update: updatePosition };\n}\n"],"mappings":";;;AA0DA,IAAM,KAAgB,MAChB,EAAE,SAAS,QAAQ,IAAU,EAAE,QAAQ,UAAU,MAAM,IAEvD,EAAE,SAAS,MAAM,IAAU,EAAE,QAAQ,QAAQ,QAAQ,IAElD;AAaT,SAAgB,EAAyB,EACvC,aACA,WACA,gBACA,iBACA,iBACA,gBAAa,IACb,cAAW,GACX,aAAU,KACqC;CAC/C,SAAS,IAA+B;EACtC,IAAM,IAAO,IAAe,KAAK;EAGjC,QAFY,IAAS,KAAK,EAAiB,EAAa,CAAC,OAE1C,QAAQ,EAAa,CAAI,IAAI;CAC9C;CAEA,SAAS,IAAuB;EAC9B,IAAM,IAAM,EAAa,GACnB,IAAW,EAAY;EAE7B,IAAI,CAAC,KAAO,CAAC,GAAU;EAEvB,IAAM,IAAY,EAAkB,GAO9B,IAAmB,KAAY,EAAwB,CAAQ,GAE/D,IAAS,EAAgB,GAAK,GAAU;GAC5C,UAAU;GACV,YAAY;IACV,GAAI,IAAW,CAAC,EAAO,CAAQ,CAAC,IAAI,CAAC;IACrC,EAAK,EAAE,WAAQ,CAAC;IAChB,EAAM,EAAE,WAAQ,CAAC;IACjB,GAAI,IAAa,CAAC,EAAK,EAAE,WAAQ,CAAC,CAAC,IAAI,CAAC;GAC1C;GACA;EACF,CAAC;EAGD,AADA,EAAS,MAAM,OAAO,GAAG,EAAO,EAAE,KAClC,EAAS,MAAM,MAAM,GAAG,EAAO,EAAE;EAyBjC,IAAM,IAAiB,EAAS,MAAM,YAChC,IAAgB,EAAS,MAAM;EAGrC,AADA,EAAS,MAAM,aAAa,QAC5B,EAAS,MAAM,YAAY;EAE3B,IAAM,IAAS,EAAS,sBAAsB,GACxC,IAAS,EAAO,IAAI,EAAO,MAC3B,IAAS,EAAO,IAAI,EAAO;EAUjC,AARA,EAAS,MAAM,aAAa,GAC5B,EAAS,MAAM,YAAY,IAEvB,MAAW,KAAK,MAAW,OAC7B,EAAS,MAAM,OAAO,GAAG,EAAO,IAAI,EAAO,KAC3C,EAAS,MAAM,MAAM,GAAG,EAAO,IAAI,EAAO,MAGxC,MACF,EAAS,MAAM,QAAQ,GAAG,EAAI,sBAAsB,CAAC,CAAC,MAAM;CAEhE;CAEA,SAAS,IAA8B;EACrC,IAAM,IAAM,EAAa,GACnB,IAAW,EAAY;EAI7B,OAFI,CAAC,KAAO,CAAC,UAAuB,CAAC,IAE9B,EAAW,GAAK,GAAU,CAAc;CACjD;CAEA,OAAO;EAAE,UAAU;EAAa,WAAW;EAAc;EAAiB,QAAQ;CAAe;AACnG"}
1
+ {"version":3,"file":"positioner.js","names":[],"sources":["../../src/core/positioner.ts"],"sourcesContent":["import {\n autoUpdate,\n computePosition,\n flip,\n getClippingAncestorRect,\n offset,\n type Placement,\n type Rect,\n shift,\n size,\n} from '@vielzeug/orbit';\n\nimport { elementDirection } from './direction';\n\n// ── Overlay positioner contract ──────────────────────────────────────────────\n\nexport type OverlayPositioner = {\n floating: () => HTMLElement | null;\n reference: () => HTMLElement | null;\n /** Start continuous position auto-updates. Returns a stop function. */\n startAutoUpdate?: () => () => void;\n update: () => void;\n};\n\n// ── Dropdown positioner ───────────────────────────────────────────────────────\n\nexport type DropdownPositionerOptions = {\n /**\n * Clipping boundary for flip/shift/size — the edges the dropdown must stay within.\n * Defaults to the nearest ancestor that actually clips content (`overflow:\n * hidden|auto|scroll|clip`, e.g. a dialog panel), auto-detected per update via\n * `getClippingAncestorRect()`, intersected with the viewport. Without this, flip/shift only\n * avoid the full page viewport — a dropdown can be \"in view\" by that measure while still\n * visibly overhanging a much smaller container it's actually nested in. Pass an explicit\n * boundary to override auto-detection.\n */\n boundary?: Element | Rect;\n /**\n * Returns the text direction used for placement mirroring. Defaults to the resolved\n * direction of the reference element (nearest `dir=\"ltr\"|\"rtl\"` ancestor, falling back to\n * computed style) — most callers never need to pass this explicitly.\n */\n getDir?: () => 'ltr' | 'rtl';\n /** Getter for the floating (dropdown panel) element. */\n getFloating: () => HTMLElement | null;\n /** Getter for the current placement. Defaults to 'bottom-start' (RTL-aware: flips to 'bottom-end'). */\n getPlacement?: () => Placement;\n /** Getter for the reference (trigger) element. */\n getReference: () => HTMLElement | null;\n /** Whether to match the floating element width to the reference. Default: true */\n matchWidth?: boolean;\n /** Additional offset in pixels between reference and floating element. Default: 0 */\n offsetPx?: number;\n /** Padding (px) used by flip, shift, and size middleware. Default: 6 */\n padding?: number;\n /**\n * Whether to constrain placement to a clipping ancestor when `boundary` is unset. Default:\n * true. Disable for native Popover API panels, which render in the top layer.\n */\n useClippingAncestor?: boolean;\n};\n\n/** Mirrors a start/end placement for RTL layouts. */\nconst rtlPlacement = (p: Placement): Placement => {\n if (p.endsWith('-start')) return p.replace('-start', '-end') as Placement;\n\n if (p.endsWith('-end')) return p.replace('-end', '-start') as Placement;\n\n return p;\n};\n\n/**\n * Creates an Orbit-powered positioner for dropdown overlays (select, combobox, menu).\n *\n * Uses flip + shift + optional width-matching middleware. Supports continuous\n * auto-update for repositioning on scroll or resize.\n *\n * RTL-aware: start/end placements are automatically mirrored so dropdowns open on the\n * correct side, based on `getDir` (or the reference element's resolved direction when\n * `getDir` is omitted).\n */\nexport function createDropdownPositioner({\n boundary,\n getDir,\n getFloating,\n getPlacement,\n getReference,\n matchWidth = true,\n offsetPx = 0,\n padding = 6,\n useClippingAncestor = true,\n}: DropdownPositionerOptions): OverlayPositioner {\n function resolvedPlacement(): Placement {\n const base = getPlacement?.() ?? 'bottom-start';\n const dir = getDir?.() ?? elementDirection(getReference());\n\n return dir === 'rtl' ? rtlPlacement(base) : base;\n }\n\n function updatePosition(): void {\n const ref = getReference();\n const floating = getFloating();\n\n if (!ref || !floating) return;\n\n const placement = resolvedPlacement();\n // Defaults to `undefined` (meaning \"auto-detect\"), not the detected value itself —\n // re-running the detection on every update (rather than once, at positioner-creation time)\n // matters because the dialog/scroll-container an instance is rendered into can change\n // across opens (e.g. the same `<ore-select>` reused in different dialogs), and the detected\n // ancestor's own rect can change between opens even when it's the same element (a resized\n // dialog).\n const resolvedBoundary = boundary ?? (useClippingAncestor ? getClippingAncestorRect(floating) : undefined);\n\n const result = computePosition(ref, floating, {\n boundary: resolvedBoundary,\n middleware: [\n ...(offsetPx ? [offset(offsetPx)] : []),\n flip({ padding }),\n shift({ padding }),\n ...(matchWidth ? [size({ padding })] : []),\n ],\n placement,\n });\n\n floating.style.left = `${result.x}px`;\n floating.style.top = `${result.y}px`;\n\n // `computePosition()` assumes `left`/`top` resolve relative to the viewport (correct for\n // `position: fixed`) — true almost always, but not when some ancestor establishes a\n // containing block for fixed descendants (a non-`none` `transform`, even a visually-identity\n // one left over from an entrance transition that never resets to `none` at rest is a real,\n // easy-to-hit case — a modal dialog's panel, say). Analytically detecting *that* ancestor via\n // `getContainingBlock()` and pre-subtracting its rect turned out to be unreliable in\n // practice: browsers don't apply the \"ancestor transform traps fixed descendants\" rule\n // uniformly across every element nested under it in every case we tested — some floating\n // elements in the exact same subtree needed the correction and some didn't, for reasons we\n // couldn't fully pin down. Measuring what actually happened after writing `left`/`top`\n // and correcting only the observed gap sidesteps that: it's a no-op when the browser already\n // put the element where asked, and it fixes the same class of bug the moment there's a real\n // mismatch, regardless of which specific ancestor (if any) turns out to be responsible.\n //\n // The measurement itself must not be fooled by the floating element's *own* transform,\n // though: dropdowns/popovers here all use a `transform: translateY(...)` entrance transition\n // driven by a `[data-open]` attribute + `@starting-style` — right at open, before the\n // transition has visibly progressed, `getBoundingClientRect()` can still reflect that\n // starting offset (a handful of px, matching `--overlay-enter-translate-y`), which this\n // correction would otherwise misread as a permanent ancestor-driven mismatch and bake in\n // forever. Temporarily neutralizing the floating element's own transform for the measurement\n // (and restoring it before anything paints, so there's no visible flash) isolates the\n // correction to ancestor-driven offsets only, which is the only thing it's meant to fix.\n const prevTransition = floating.style.transition;\n const prevTransform = floating.style.transform;\n\n floating.style.transition = 'none';\n floating.style.transform = 'none';\n\n const actual = floating.getBoundingClientRect();\n const deltaX = result.x - actual.left;\n const deltaY = result.y - actual.top;\n\n floating.style.transition = prevTransition;\n floating.style.transform = prevTransform;\n\n if (deltaX !== 0 || deltaY !== 0) {\n floating.style.left = `${result.x + deltaX}px`;\n floating.style.top = `${result.y + deltaY}px`;\n }\n\n if (matchWidth) {\n floating.style.width = `${ref.getBoundingClientRect().width}px`;\n }\n }\n\n function startAutoUpdate(): () => void {\n const ref = getReference();\n const floating = getFloating();\n\n if (!ref || !floating) return () => {};\n\n return autoUpdate(ref, floating, updatePosition);\n }\n\n return { floating: getFloating, reference: getReference, startAutoUpdate, update: updatePosition };\n}\n"],"mappings":";;;AA+DA,IAAM,KAAgB,MAChB,EAAE,SAAS,QAAQ,IAAU,EAAE,QAAQ,UAAU,MAAM,IAEvD,EAAE,SAAS,MAAM,IAAU,EAAE,QAAQ,QAAQ,QAAQ,IAElD;AAaT,SAAgB,EAAyB,EACvC,aACA,WACA,gBACA,iBACA,iBACA,gBAAa,IACb,cAAW,GACX,aAAU,GACV,yBAAsB,MACyB;CAC/C,SAAS,IAA+B;EACtC,IAAM,IAAO,IAAe,KAAK;EAGjC,QAFY,IAAS,KAAK,EAAiB,EAAa,CAAC,OAE1C,QAAQ,EAAa,CAAI,IAAI;CAC9C;CAEA,SAAS,IAAuB;EAC9B,IAAM,IAAM,EAAa,GACnB,IAAW,EAAY;EAE7B,IAAI,CAAC,KAAO,CAAC,GAAU;EAEvB,IAAM,IAAY,EAAkB,GAO9B,IAAmB,MAAa,IAAsB,EAAwB,CAAQ,IAAI,KAAA,IAE1F,IAAS,EAAgB,GAAK,GAAU;GAC5C,UAAU;GACV,YAAY;IACV,GAAI,IAAW,CAAC,EAAO,CAAQ,CAAC,IAAI,CAAC;IACrC,EAAK,EAAE,WAAQ,CAAC;IAChB,EAAM,EAAE,WAAQ,CAAC;IACjB,GAAI,IAAa,CAAC,EAAK,EAAE,WAAQ,CAAC,CAAC,IAAI,CAAC;GAC1C;GACA;EACF,CAAC;EAGD,AADA,EAAS,MAAM,OAAO,GAAG,EAAO,EAAE,KAClC,EAAS,MAAM,MAAM,GAAG,EAAO,EAAE;EAyBjC,IAAM,IAAiB,EAAS,MAAM,YAChC,IAAgB,EAAS,MAAM;EAGrC,AADA,EAAS,MAAM,aAAa,QAC5B,EAAS,MAAM,YAAY;EAE3B,IAAM,IAAS,EAAS,sBAAsB,GACxC,IAAS,EAAO,IAAI,EAAO,MAC3B,IAAS,EAAO,IAAI,EAAO;EAUjC,AARA,EAAS,MAAM,aAAa,GAC5B,EAAS,MAAM,YAAY,IAEvB,MAAW,KAAK,MAAW,OAC7B,EAAS,MAAM,OAAO,GAAG,EAAO,IAAI,EAAO,KAC3C,EAAS,MAAM,MAAM,GAAG,EAAO,IAAI,EAAO,MAGxC,MACF,EAAS,MAAM,QAAQ,GAAG,EAAI,sBAAsB,CAAC,CAAC,MAAM;CAEhE;CAEA,SAAS,IAA8B;EACrC,IAAM,IAAM,EAAa,GACnB,IAAW,EAAY;EAI7B,OAFI,CAAC,KAAO,CAAC,UAAuB,CAAC,IAE9B,EAAW,GAAK,GAAU,CAAc;CACjD;CAEA,OAAO;EAAE,UAAU;EAAa,WAAW;EAAc;EAAiB,QAAQ;CAAe;AACnG"}