@ds-mo/ui 13.4.0 → 13.5.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 (85) hide show
  1. package/dist/.package-ready.json +1 -1
  2. package/dist/agent-patterns.json +1 -1
  3. package/dist/agent.json +19 -21
  4. package/dist/components/ds-card-overview.js +1 -1
  5. package/dist/components/ds-card-overview.js.map +1 -1
  6. package/dist/components/ds-input.js +1 -1
  7. package/dist/components/ds-input.js.map +1 -1
  8. package/dist/components/ds-select.js +1 -1
  9. package/dist/components/ds-select.js.map +1 -1
  10. package/dist/docs/components.json +10 -16
  11. package/dist/mcp-data/registry/agent-activity.json +1 -1
  12. package/dist/mcp-data/registry/agent-response.json +1 -1
  13. package/dist/mcp-data/registry/agent-source-list.json +1 -1
  14. package/dist/mcp-data/registry/agent-tool-call.json +1 -1
  15. package/dist/mcp-data/registry/attachment-list.json +1 -1
  16. package/dist/mcp-data/registry/avatar.json +1 -1
  17. package/dist/mcp-data/registry/badge.json +1 -1
  18. package/dist/mcp-data/registry/bar-nav.json +1 -1
  19. package/dist/mcp-data/registry/bar-title.json +1 -1
  20. package/dist/mcp-data/registry/bar-workflow.json +1 -1
  21. package/dist/mcp-data/registry/breadcrumb.json +1 -1
  22. package/dist/mcp-data/registry/button-filled.json +1 -1
  23. package/dist/mcp-data/registry/button-unfilled.json +1 -1
  24. package/dist/mcp-data/registry/card-data-viz.json +1 -1
  25. package/dist/mcp-data/registry/card-overview.json +33 -35
  26. package/dist/mcp-data/registry/card-setting.json +1 -1
  27. package/dist/mcp-data/registry/chart-bar.json +1 -1
  28. package/dist/mcp-data/registry/chart-donut.json +1 -1
  29. package/dist/mcp-data/registry/chart-legend.json +1 -1
  30. package/dist/mcp-data/registry/chart-line.json +1 -1
  31. package/dist/mcp-data/registry/checkbox.json +1 -1
  32. package/dist/mcp-data/registry/chip.json +1 -1
  33. package/dist/mcp-data/registry/code-block.json +1 -1
  34. package/dist/mcp-data/registry/conversation-list-item.json +1 -1
  35. package/dist/mcp-data/registry/conversation-list-section.json +1 -1
  36. package/dist/mcp-data/registry/conversation-list.json +1 -1
  37. package/dist/mcp-data/registry/divider.json +1 -1
  38. package/dist/mcp-data/registry/empty-state.json +1 -1
  39. package/dist/mcp-data/registry/field.json +1 -1
  40. package/dist/mcp-data/registry/icon.json +1 -1
  41. package/dist/mcp-data/registry/input.json +6 -6
  42. package/dist/mcp-data/registry/loader.json +1 -1
  43. package/dist/mcp-data/registry/markdown.json +1 -1
  44. package/dist/mcp-data/registry/menu.json +1 -1
  45. package/dist/mcp-data/registry/message-actions.json +1 -1
  46. package/dist/mcp-data/registry/message-bubble.json +1 -1
  47. package/dist/mcp-data/registry/message-composer.json +1 -1
  48. package/dist/mcp-data/registry/message-scroller.json +1 -1
  49. package/dist/mcp-data/registry/message.json +1 -1
  50. package/dist/mcp-data/registry/mobile-bar-nav.json +1 -1
  51. package/dist/mcp-data/registry/mobile-header.json +1 -1
  52. package/dist/mcp-data/registry/mobile-section-switcher.json +1 -1
  53. package/dist/mcp-data/registry/mobile-sheet-nav.json +1 -1
  54. package/dist/mcp-data/registry/modal.json +1 -1
  55. package/dist/mcp-data/registry/panel-nav.json +1 -1
  56. package/dist/mcp-data/registry/panel-sub-nav.json +1 -1
  57. package/dist/mcp-data/registry/panel-tool-header.json +1 -1
  58. package/dist/mcp-data/registry/panel-tool-search.json +1 -1
  59. package/dist/mcp-data/registry/panel-tools.json +1 -1
  60. package/dist/mcp-data/registry/radio.json +1 -1
  61. package/dist/mcp-data/registry/registry.json +19 -21
  62. package/dist/mcp-data/registry/scroll-overlay.json +1 -1
  63. package/dist/mcp-data/registry/select.json +5 -5
  64. package/dist/mcp-data/registry/shell-app.json +1 -1
  65. package/dist/mcp-data/registry/shell-page.json +1 -1
  66. package/dist/mcp-data/registry/shell-tools.json +1 -1
  67. package/dist/mcp-data/registry/skeleton.json +1 -1
  68. package/dist/mcp-data/registry/slider.json +1 -1
  69. package/dist/mcp-data/registry/swatch-picker.json +1 -1
  70. package/dist/mcp-data/registry/switch.json +1 -1
  71. package/dist/mcp-data/registry/tab-group.json +1 -1
  72. package/dist/mcp-data/registry/tag.json +1 -1
  73. package/dist/mcp-data/registry/text.json +1 -1
  74. package/dist/mcp-data/registry/toast.json +1 -1
  75. package/dist/mcp-data/registry/tooltip-data-viz.json +1 -1
  76. package/dist/mcp-data/registry/tooltip.json +1 -1
  77. package/dist/mcp-data/registry/typing-indicator.json +1 -1
  78. package/dist/types/components/CardOverview/CardOverview.d.ts +10 -9
  79. package/dist/types/components/CardOverview/card-overview-controller.d.ts +13 -1
  80. package/dist/types/components/CardOverview/card-overview-types.d.ts +8 -2
  81. package/dist/types/components/CardOverview/index.d.ts +1 -1
  82. package/dist/types/components/Input/Input.d.ts +1 -1
  83. package/dist/types/components/Select/Select.d.ts +1 -1
  84. package/dist/types/components.d.ts +16 -16
  85. package/package.json +3 -3
package/dist/components/ds-input.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as t,H as i,c as s,h as e,a as n,t as o}from"./index.js";import{d as r}from"./p-DoNdiEly.js";import{d}from"./p-Bgh0uG51.js";import{d as a}from"./p-BAfG3M8z.js";import{d as c}from"./p-Ca-I2UnB.js";import{d as l}from"./p-w2kKeG_h.js";import{D as p,s as u}from"./p-DOUk4KoT.js";import{s as h,r as f}from"./p-D2xWcVv6.js";import{C as v}from"./p-CuwopElg.js";import{c as g}from"./p-DAW6G8Sl.js";const m=()=>`@media (forced-colors: active){.sc-ds-input:root,.sc-ds-input-h,.ds-forced-colors-scope.sc-ds-input{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-input-h,.ds-interaction-fill.sc-ds-input{position:relative;z-index:0;cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-input-h::before,.ds-interaction-fill.sc-ds-input::before,.ds-interaction-fill.sc-ds-input-h::after,.ds-interaction-fill.sc-ds-input::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-input-h::before,.ds-interaction-fill.sc-ds-input::before{z-index:1}.ds-interaction-fill.sc-ds-input-h::after,.ds-interaction-fill.sc-ds-input::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-input-h,.ds-interaction-fill--bordered.sc-ds-input{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-input-h::before,.ds-interaction-fill--selected.sc-ds-input::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-input-h,.ds-interaction-fill--selected.sc-ds-input{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-input-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-input:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-input-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-input:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-input-h>.ds-interaction-fill__content.sc-ds-input,.ds-interaction-fill.sc-ds-input>.ds-interaction-fill__content.sc-ds-input,.ds-interaction-fill__content.sc-ds-input{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-input-h,.ds-interaction-fill--on-faint.sc-ds-input{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-input-h,.ds-interaction-fill--on-medium.sc-ds-input{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-input-h,.ds-interaction-fill--on-bold.sc-ds-input{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-input-h,.ds-interaction-fill--on-strong.sc-ds-input{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-input-h,.ds-interaction-fill--on-translucent.sc-ds-input{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-input-h,.ds-interaction-fill--on-inverted.sc-ds-input{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-input-h,.ds-interaction-fill--on-media.sc-ds-input{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-input-h,.ds-interaction-fill--on-always-dark.sc-ds-input{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-input-h,.ds-interaction-fill--on-navigation.sc-ds-input{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-input-h::after,.ds-interaction-fill.sc-ds-input::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-input-h::before,.ds-interaction-fill--selected.sc-ds-input::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-input-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-input:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-input:root,.sc-ds-input-h,.ds-forced-colors-scope.sc-ds-input{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-input-h,.ds-control-inactive.sc-ds-input{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-input-h,.ds-control-inactive.sc-ds-input{color:var(--ds-forced-color-disabled);opacity:1}}.ds-control--lg.sc-ds-input,.ds-control--lg.sc-ds-input-h,.ds-control--md.sc-ds-input-h,.ds-control--md.sc-ds-input,.ds-control--sm.sc-ds-input-h,.ds-control--sm.sc-ds-input,.ds-control--xs.sc-ds-input-h,.ds-control--xs.sc-ds-input{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-input-h,.ds-control--lg.sc-ds-input{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-input-h,.ds-control--md.sc-ds-input{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-input-h,.ds-control--sm.sc-ds-input{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-input-h,.ds-control--xs.sc-ds-input{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-control-frame.sc-ds-input{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-icon-box.sc-ds-input{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md))}.ds-control-label-box.sc-ds-input{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-control-width--hug.sc-ds-input-h,.ds-control-width--hug.sc-ds-input{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-input-h,.ds-control-width--fill.sc-ds-input{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.ds-field-stack.sc-ds-input-h,.ds-field-stack.sc-ds-input{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.ds-text--display-medium.sc-ds-input-h,.ds-text--display-medium.sc-ds-input{font-size:var(--typography-fontsize-3xl);line-height:var(--typography-lineheight-3xl)}.ds-text--display-small.sc-ds-input-h,.ds-text--display-small.sc-ds-input{font-size:var(--typography-fontsize-2xl);line-height:var(--typography-lineheight-2xl)}.ds-text--title-large.sc-ds-input-h,.ds-text--title-large.sc-ds-input{font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl)}.ds-text--title-medium.sc-ds-input-h,.ds-text--title-medium.sc-ds-input{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--title-small.sc-ds-input-h,.ds-text--title-small.sc-ds-input{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-large.sc-ds-input-h,.ds-text--body-large.sc-ds-input{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--body-medium.sc-ds-input-h,.ds-text--body-medium.sc-ds-input{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-small.sc-ds-input-h,.ds-text--body-small.sc-ds-input{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm)}.ds-text--caption.sc-ds-input-h,.ds-text--caption.sc-ds-input{font-size:var(--typography-fontsize-xs);line-height:var(--typography-lineheight-xs);text-transform:uppercase}.ds-text--display-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--display-small.ds-text--emphasis.sc-ds-input-h,.ds-text--display-medium.ds-text--emphasis.sc-ds-input,.ds-text--display-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-bold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--display-medium.ds-text--regular.sc-ds-input-h,.ds-text--display-small.ds-text--regular.sc-ds-input-h,.ds-text--display-medium.ds-text--regular.sc-ds-input,.ds-text--display-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-large.ds-text--emphasis.sc-ds-input-h,.ds-text--title-large.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--title-large.ds-text--regular.sc-ds-input-h,.ds-text--title-large.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--title-small.ds-text--emphasis.sc-ds-input-h,.ds-text--title-medium.ds-text--emphasis.sc-ds-input,.ds-text--title-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--regular.sc-ds-input-h,.ds-text--title-small.ds-text--regular.sc-ds-input-h,.ds-text--title-medium.ds-text--regular.sc-ds-input,.ds-text--title-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-large.ds-text--emphasis.sc-ds-input-h,.ds-text--body-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--body-large.ds-text--emphasis.sc-ds-input,.ds-text--body-medium.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--body-large.ds-text--regular.sc-ds-input-h,.ds-text--body-medium.ds-text--regular.sc-ds-input-h,.ds-text--body-large.ds-text--regular.sc-ds-input,.ds-text--body-medium.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--emphasis.sc-ds-input-h,.ds-text--body-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--regular.sc-ds-input-h,.ds-text--body-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-none)}.ds-text--caption.ds-text--emphasis.sc-ds-input-h,.ds-text--caption.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-positive)}.ds-text--caption.ds-text--regular.sc-ds-input-h,.ds-text--caption.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive)}@media (forced-colors: active){.sc-ds-input:root,.sc-ds-input-h,.ds-forced-colors-scope.sc-ds-input{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.input-host.sc-ds-input-h{display:inline-flex;--ds-input-fg:var(--color-foreground-primary);--ds-input-placeholder:var(--color-foreground-secondary);--ds-input-placeholder-active:var(--color-foreground-quaternary);--ds-input-adornment-fg:var(--color-foreground-secondary);--ds-input-border:var(--color-border-secondary)}.ds-control-width--fill.sc-ds-input-h,.ds-control-width--fill.sc-ds-input-h .input-control.sc-ds-input{width:100%}.input-control.sc-ds-input{overflow:hidden;background:transparent;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));color:var(--ds-input-fg)}.input-control--bordered.sc-ds-input{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-input-border)}.input-control--error.sc-ds-input{--ds-interaction-border-width:var(--dimension-stroke-width-018);--ds-interaction-border-color:var(--color-border-bold-negative)}.input-control.sc-ds-input:focus-within:not(.input-control--error){--ds-interaction-border-width:var(--dimension-stroke-width-018);--ds-interaction-border-color:var(--color-border-bold-brand)}.ds-control-inactive.sc-ds-input-h .input-control.sc-ds-input::after{background:transparent}.native-input.sc-ds-input{position:relative;z-index:2;flex:1 1 auto;min-width:0;height:100%;background:transparent;border:none;border-radius:inherit;outline:none;color:var(--ds-input-fg);font-family:inherit;-webkit-appearance:none;appearance:none}.native-input.sc-ds-input:disabled{cursor:not-allowed}.native-input.sc-ds-input:read-only:not(:disabled){cursor:default}.native-input.sc-ds-input::placeholder{color:var(--ds-input-placeholder)}.native-input.sc-ds-input:focus::placeholder{color:var(--ds-input-placeholder-active)}.native-input[type='search'].sc-ds-input::-webkit-search-cancel-button,.native-input[type='search'].sc-ds-input::-webkit-search-decoration{display:none}.input-control__prefix.sc-ds-input,.input-control__suffix.sc-ds-input{position:relative;z-index:2;color:var(--ds-input-adornment-fg)}.input-control__suffix--empty.sc-ds-input{display:none}.input-control__clear.sc-ds-input{position:relative;z-index:2;flex-shrink:0;align-self:center}.input-control.ds-control--lg.sc-ds-input:has(.input-control__clear),.input-control.ds-control--md.sc-ds-input:has(.input-control__clear),.input-control.ds-control--sm.sc-ds-input:has(.input-control__clear){padding-right:var(--dimension-space-050)}.input-control.ds-control--xs.sc-ds-input:has(.input-control__clear){padding-right:0}.error-text.sc-ds-input{width:100%}@media (forced-colors: active){.input-control.sc-ds-input:focus-within:not(.input-control--error)::after{outline-color:var(--ds-forced-color-selected)}.input-control--error.sc-ds-input::after{outline-style:dashed}}`;const b={lg:"lg",md:"md",sm:"sm",xs:"xs"};const y={lg:"md",md:"sm",sm:"xs",xs:"xs"};let x=0;const w=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.dsChange=s(this,"dsChange");this.dsClear=s(this,"dsClear");this.internals=this.attachInternals();this.generatedId=`ds-input-${++x}`;this.errorId=`${this.generatedId}-error`;this.value="";this.disabled=false;this.readOnly=false;this.required=false;this.requiredMessage=p;this.clearLabel="Clear";this.type="text";this.inputMode="";this.enterKeyHint="";this.size="md";this.width="fill";this.hasBorder=true;this.isInactive=false;this.autoFocus=false;this.error=false;this.ariaLabel=null;this.initialValue="";this.formDisabled=false;this.hasSuffix=false;this.focused=false;this.touched=false;this.handleInput=t=>{this.value=t.target.value;this.dsChange.emit(this.value)};this.handleFocus=()=>{this.focused=true};this.handleBlur=()=>{this.focused=false;this.touched=true};this.handleClear=()=>{this.value="";this.dsChange.emit("");this.dsClear.emit();this.el.querySelector("input")?.focus()}}componentWillLoad(){this.initialValue=this.value;this.hasSuffix=Boolean(this.el.querySelector('[slot="suffix"]'));this.syncFormValue()}componentDidRender(){const t=Boolean(this.el.querySelector('[slot="suffix"]'));if(t!==this.hasSuffix)this.hasSuffix=t}syncFormValue(){const t=this.isInactive||this.disabled||this.formDisabled;h(this.internals,this.value,{inactive:t});const i=this.required&&!t&&this.value.length===0;u(this.internals,i,this.requiredMessage)}formDisabledCallback(t){this.formDisabled=t;this.syncFormValue()}formResetCallback(){this.value=this.initialValue}formStateRestoreCallback(t){this.value=f(t)}async setFocus(){this.el.querySelector("input")?.focus()}render(){const t=this.inputId??this.generatedId;const i=this.isInactive||this.disabled||this.formDisabled;const s=this.value.length>0;const o=this.value!==this.initialValue;const r=this.type==="search"&&s&&!i&&!this.readOnly;const d=this.error&&Boolean(this.errorMessage);const a=v[this.size];const c=b[this.size];const l=[this.ariaDescribedby,d?this.errorId:undefined].filter(Boolean).join(" ")||undefined;return e(n,{key:"37b148a43f1746908ffb9aae04759663c9abb18a",class:{"input-host":true,"ds-field-stack":true,"ds-control-inactive":i,[`ds-control--${this.size}`]:true,...g(this.width)},"data-disabled":i?"":undefined,"data-readonly":this.readOnly?"":undefined,"data-required":this.required?"":undefined,"data-invalid":this.error?"":undefined,"data-filled":s?"":undefined,"data-focused":this.focused?"":undefined,"data-dirty":o?"":undefined,"data-touched":this.touched?"":undefined},e("div",{key:"1dd834759203c3fc52b63ebd95a60169429dee8d",class:{"input-control":true,"ds-control-frame":true,"input-control--bordered":this.hasBorder||this.error,"input-control--error":this.error,"ds-interaction-fill":true,[`ds-control--${this.size}`]:true}},this.icon&&e("span",{key:"0f5397b200fdc936ddb0923f0b8643b420832e16",class:"input-control__prefix ds-control-icon-box ds-interaction-fill__content","aria-hidden":"true"},e("ds-icon",{key:"c3948ba794e99d8d4ef4cd3271ca9d229360d5f8",name:this.icon,size:c,color:"inherit"})),e("input",{key:"ea65ff97c273b2c0a0d2b6f2c2a72be2aa8af4d8",type:this.type,id:t,value:this.value,placeholder:this.placeholder,disabled:i,readOnly:this.readOnly,required:this.required,autoFocus:this.autoFocus,autoComplete:this.autoComplete,inputMode:this.inputMode||undefined,enterKeyHint:this.enterKeyHint||undefined,class:`native-input ds-control-label-box ds-text--${a.replace("text-","")} ds-text--regular ds-interaction-fill__content`,"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-describedby":l,"aria-invalid":this.error?"true":undefined,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur}),e("span",{key:"062f42ea332f6c3369ab2543d8dae2eb43b06b99",class:{"input-control__suffix":true,"ds-control-icon-box":true,"input-control__suffix--empty":!this.hasSuffix}},e("slot",{key:"dc8bd5b3aa753bcf6309da09bb6755fccd116a2a",name:"suffix"})),r&&e("ds-button-unfilled",{key:"1550303ee6aee1c4b3cdacb48e4e648c0d218e39",class:"input-control__clear",variant:"icon",size:y[this.size],icon:"CrossCircle",hasBorder:false,rounded:true,ariaLabel:this.clearLabel,onDsClick:this.handleClear})),d&&e("ds-text",{key:"8da0be8094648b480a59d7a5c20425c62bd1934f",class:"error-text",as:"div",variant:"text-body-small",color:"negative",textId:this.errorId,role:"alert"},this.errorMessage))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return m()}},[326,"ds-input",{value:[1025],name:[513],form:[513],disabled:[516],readOnly:[516,"read-only"],required:[516],requiredMessage:[1,"required-message"],clearLabel:[1,"clear-label"],placeholder:[1],type:[1],autoComplete:[1,"autocomplete"],inputMode:[1,"inputmode"],enterKeyHint:[1,"enterkeyhint"],size:[1],width:[1],hasBorder:[4,"has-border"],icon:[1],isInactive:[4,"is-inactive"],autoFocus:[4,"auto-focus"],error:[4],errorMessage:[1,"error-message"],inputId:[1,"input-id"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],formDisabled:[32],hasSuffix:[32],focused:[32],touched:[32],setFocus:[64]},undefined,{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function k(){if(typeof customElements==="undefined"){return}const t=["ds-input","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text"];t.forEach((t=>{switch(t){case"ds-input":if(!customElements.get(o(t))){customElements.define(o(t),w)}break;case"ds-badge":if(!customElements.get(o(t))){r()}break;case"ds-button-unfilled":if(!customElements.get(o(t))){d()}break;case"ds-icon":if(!customElements.get(o(t))){a()}break;case"ds-loader":if(!customElements.get(o(t))){c()}break;case"ds-text":if(!customElements.get(o(t))){l()}break}}))}k();const z=w;const _=k;export{z as DsInput,_ as defineCustomElement};
1
+ import{p as t,H as i,c as s,h as e,a as n,t as o}from"./index.js";import{d as r}from"./p-DoNdiEly.js";import{d}from"./p-Bgh0uG51.js";import{d as a}from"./p-BAfG3M8z.js";import{d as c}from"./p-Ca-I2UnB.js";import{d as l}from"./p-w2kKeG_h.js";import{D as p,s as u}from"./p-DOUk4KoT.js";import{s as h,r as f}from"./p-D2xWcVv6.js";import{C as v}from"./p-CuwopElg.js";import{c as g}from"./p-DAW6G8Sl.js";const m=()=>`@media (forced-colors: active){.sc-ds-input:root,.sc-ds-input-h,.ds-forced-colors-scope.sc-ds-input{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-input-h,.ds-interaction-fill.sc-ds-input{position:relative;z-index:0;cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-input-h::before,.ds-interaction-fill.sc-ds-input::before,.ds-interaction-fill.sc-ds-input-h::after,.ds-interaction-fill.sc-ds-input::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-input-h::before,.ds-interaction-fill.sc-ds-input::before{z-index:1}.ds-interaction-fill.sc-ds-input-h::after,.ds-interaction-fill.sc-ds-input::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-input-h,.ds-interaction-fill--bordered.sc-ds-input{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-input-h::before,.ds-interaction-fill--selected.sc-ds-input::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-input-h,.ds-interaction-fill--selected.sc-ds-input{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-input-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-input:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-input-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-input:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-input-h>.ds-interaction-fill__content.sc-ds-input,.ds-interaction-fill.sc-ds-input>.ds-interaction-fill__content.sc-ds-input,.ds-interaction-fill__content.sc-ds-input{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-input-h,.ds-interaction-fill--on-faint.sc-ds-input{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-input-h,.ds-interaction-fill--on-medium.sc-ds-input{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-input-h,.ds-interaction-fill--on-bold.sc-ds-input{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-input-h,.ds-interaction-fill--on-strong.sc-ds-input{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-input-h,.ds-interaction-fill--on-translucent.sc-ds-input{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-input-h,.ds-interaction-fill--on-inverted.sc-ds-input{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-input-h,.ds-interaction-fill--on-media.sc-ds-input{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-input-h,.ds-interaction-fill--on-always-dark.sc-ds-input{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-input-h,.ds-interaction-fill--on-navigation.sc-ds-input{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-input-h::after,.ds-interaction-fill.sc-ds-input::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-input-h::before,.ds-interaction-fill--selected.sc-ds-input::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-input-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-input:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-input:root,.sc-ds-input-h,.ds-forced-colors-scope.sc-ds-input{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-input-h,.ds-control-inactive.sc-ds-input{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-input-h,.ds-control-inactive.sc-ds-input{color:var(--ds-forced-color-disabled);opacity:1}}.ds-control--lg.sc-ds-input,.ds-control--lg.sc-ds-input-h,.ds-control--md.sc-ds-input-h,.ds-control--md.sc-ds-input,.ds-control--sm.sc-ds-input-h,.ds-control--sm.sc-ds-input,.ds-control--xs.sc-ds-input-h,.ds-control--xs.sc-ds-input{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-input-h,.ds-control--lg.sc-ds-input{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-input-h,.ds-control--md.sc-ds-input{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-input-h,.ds-control--sm.sc-ds-input{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-input-h,.ds-control--xs.sc-ds-input{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-control-frame.sc-ds-input{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-icon-box.sc-ds-input{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md))}.ds-control-label-box.sc-ds-input{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-control-width--hug.sc-ds-input-h,.ds-control-width--hug.sc-ds-input{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-input-h,.ds-control-width--fill.sc-ds-input{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.ds-field-stack.sc-ds-input-h,.ds-field-stack.sc-ds-input{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.ds-text--display-medium.sc-ds-input-h,.ds-text--display-medium.sc-ds-input{font-size:var(--typography-fontsize-3xl);line-height:var(--typography-lineheight-3xl)}.ds-text--display-small.sc-ds-input-h,.ds-text--display-small.sc-ds-input{font-size:var(--typography-fontsize-2xl);line-height:var(--typography-lineheight-2xl)}.ds-text--title-large.sc-ds-input-h,.ds-text--title-large.sc-ds-input{font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl)}.ds-text--title-medium.sc-ds-input-h,.ds-text--title-medium.sc-ds-input{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--title-small.sc-ds-input-h,.ds-text--title-small.sc-ds-input{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-large.sc-ds-input-h,.ds-text--body-large.sc-ds-input{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--body-medium.sc-ds-input-h,.ds-text--body-medium.sc-ds-input{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-small.sc-ds-input-h,.ds-text--body-small.sc-ds-input{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm)}.ds-text--caption.sc-ds-input-h,.ds-text--caption.sc-ds-input{font-size:var(--typography-fontsize-xs);line-height:var(--typography-lineheight-xs);text-transform:uppercase}.ds-text--display-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--display-small.ds-text--emphasis.sc-ds-input-h,.ds-text--display-medium.ds-text--emphasis.sc-ds-input,.ds-text--display-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-bold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--display-medium.ds-text--regular.sc-ds-input-h,.ds-text--display-small.ds-text--regular.sc-ds-input-h,.ds-text--display-medium.ds-text--regular.sc-ds-input,.ds-text--display-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-large.ds-text--emphasis.sc-ds-input-h,.ds-text--title-large.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--title-large.ds-text--regular.sc-ds-input-h,.ds-text--title-large.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--title-small.ds-text--emphasis.sc-ds-input-h,.ds-text--title-medium.ds-text--emphasis.sc-ds-input,.ds-text--title-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--regular.sc-ds-input-h,.ds-text--title-small.ds-text--regular.sc-ds-input-h,.ds-text--title-medium.ds-text--regular.sc-ds-input,.ds-text--title-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-large.ds-text--emphasis.sc-ds-input-h,.ds-text--body-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--body-large.ds-text--emphasis.sc-ds-input,.ds-text--body-medium.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--body-large.ds-text--regular.sc-ds-input-h,.ds-text--body-medium.ds-text--regular.sc-ds-input-h,.ds-text--body-large.ds-text--regular.sc-ds-input,.ds-text--body-medium.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--emphasis.sc-ds-input-h,.ds-text--body-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--regular.sc-ds-input-h,.ds-text--body-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-none)}.ds-text--caption.ds-text--emphasis.sc-ds-input-h,.ds-text--caption.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-positive)}.ds-text--caption.ds-text--regular.sc-ds-input-h,.ds-text--caption.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive)}@media (forced-colors: active){.sc-ds-input:root,.sc-ds-input-h,.ds-forced-colors-scope.sc-ds-input{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.input-host.sc-ds-input-h{display:inline-flex;--ds-input-fg:var(--color-foreground-primary);--ds-input-placeholder:var(--color-foreground-secondary);--ds-input-placeholder-active:var(--color-foreground-quaternary);--ds-input-adornment-fg:var(--color-foreground-secondary);--ds-input-border:var(--color-border-secondary)}.ds-control-width--fill.sc-ds-input-h,.ds-control-width--fill.sc-ds-input-h .input-control.sc-ds-input{width:100%}.input-control.sc-ds-input{overflow:hidden;background:transparent;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));color:var(--ds-input-fg)}.input-control--bordered.sc-ds-input{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-input-border)}.input-control--error.sc-ds-input{--ds-interaction-border-width:var(--dimension-stroke-width-018);--ds-interaction-border-color:var(--color-border-bold-negative)}.input-control--bordered.sc-ds-input:focus-within:not(.input-control--error){--ds-interaction-border-width:var(--dimension-stroke-width-018);--ds-interaction-border-color:var(--color-border-bold-brand)}.ds-control-inactive.sc-ds-input-h .input-control.sc-ds-input::after{background:transparent}.native-input.sc-ds-input{position:relative;z-index:2;flex:1 1 auto;min-width:0;height:100%;background:transparent;border:none;border-radius:inherit;outline:none;color:var(--ds-input-fg);font-family:inherit;-webkit-appearance:none;appearance:none}.native-input.sc-ds-input:disabled{cursor:not-allowed}.native-input.sc-ds-input:read-only:not(:disabled){cursor:default}.native-input.sc-ds-input::placeholder{color:var(--ds-input-placeholder)}.native-input.sc-ds-input:focus::placeholder{color:var(--ds-input-placeholder-active)}.native-input[type='search'].sc-ds-input::-webkit-search-cancel-button,.native-input[type='search'].sc-ds-input::-webkit-search-decoration{display:none}.input-control__prefix.sc-ds-input,.input-control__suffix.sc-ds-input{position:relative;z-index:2;color:var(--ds-input-adornment-fg)}.input-control__suffix--empty.sc-ds-input{display:none}.input-control__clear.sc-ds-input{position:relative;z-index:2;flex-shrink:0;align-self:center}.input-control.ds-control--lg.sc-ds-input:has(.input-control__clear),.input-control.ds-control--md.sc-ds-input:has(.input-control__clear),.input-control.ds-control--sm.sc-ds-input:has(.input-control__clear){padding-right:var(--dimension-space-050)}.input-control.ds-control--xs.sc-ds-input:has(.input-control__clear){padding-right:0}.error-text.sc-ds-input{width:100%}@media (forced-colors: active){.input-control--bordered.sc-ds-input:focus-within:not(.input-control--error)::after{outline-color:var(--ds-forced-color-selected)}.input-control--error.sc-ds-input::after{outline-style:dashed}}`;const y={lg:"lg",md:"md",sm:"sm",xs:"xs"};const b={lg:"md",md:"sm",sm:"xs",xs:"xs"};let x=0;const w=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.dsChange=s(this,"dsChange");this.dsClear=s(this,"dsClear");this.internals=this.attachInternals();this.generatedId=`ds-input-${++x}`;this.errorId=`${this.generatedId}-error`;this.value="";this.disabled=false;this.readOnly=false;this.required=false;this.requiredMessage=p;this.clearLabel="Clear";this.type="text";this.inputMode="";this.enterKeyHint="";this.size="md";this.width="fill";this.hasBorder=true;this.isInactive=false;this.autoFocus=false;this.error=false;this.ariaLabel=null;this.initialValue="";this.formDisabled=false;this.hasSuffix=false;this.focused=false;this.touched=false;this.handleInput=t=>{this.value=t.target.value;this.dsChange.emit(this.value)};this.handleFocus=()=>{this.focused=true};this.handleBlur=()=>{this.focused=false;this.touched=true};this.handleClear=()=>{this.value="";this.dsChange.emit("");this.dsClear.emit();this.el.querySelector("input")?.focus()}}componentWillLoad(){this.initialValue=this.value;this.hasSuffix=Boolean(this.el.querySelector('[slot="suffix"]'));this.syncFormValue()}componentDidRender(){const t=Boolean(this.el.querySelector('[slot="suffix"]'));if(t!==this.hasSuffix)this.hasSuffix=t}syncFormValue(){const t=this.isInactive||this.disabled||this.formDisabled;h(this.internals,this.value,{inactive:t});const i=this.required&&!t&&this.value.length===0;u(this.internals,i,this.requiredMessage)}formDisabledCallback(t){this.formDisabled=t;this.syncFormValue()}formResetCallback(){this.value=this.initialValue}formStateRestoreCallback(t){this.value=f(t)}async setFocus(){this.el.querySelector("input")?.focus()}render(){const t=this.inputId??this.generatedId;const i=this.isInactive||this.disabled||this.formDisabled;const s=this.value.length>0;const o=this.value!==this.initialValue;const r=this.type==="search"&&s&&!i&&!this.readOnly;const d=this.error&&Boolean(this.errorMessage);const a=v[this.size];const c=y[this.size];const l=[this.ariaDescribedby,d?this.errorId:undefined].filter(Boolean).join(" ")||undefined;return e(n,{key:"6a5fc236b630ec7513700d30644cbc4c148a1cc4",class:{"input-host":true,"ds-field-stack":true,"ds-control-inactive":i,[`ds-control--${this.size}`]:true,...g(this.width)},"data-disabled":i?"":undefined,"data-readonly":this.readOnly?"":undefined,"data-required":this.required?"":undefined,"data-invalid":this.error?"":undefined,"data-filled":s?"":undefined,"data-focused":this.focused?"":undefined,"data-dirty":o?"":undefined,"data-touched":this.touched?"":undefined},e("div",{key:"7f6ec00f8d36bf141a47cf6c241172628ccdfa13",class:{"input-control":true,"ds-control-frame":true,"input-control--bordered":this.hasBorder,"input-control--error":this.hasBorder&&this.error,"ds-interaction-fill":true,[`ds-control--${this.size}`]:true}},this.icon&&e("span",{key:"3c7d21c1ab5f0f21c9b4c6b8a93102d93e8f80e7",class:"input-control__prefix ds-control-icon-box ds-interaction-fill__content","aria-hidden":"true"},e("ds-icon",{key:"ee70d9b89887ce515e749ec850d09aa7d2c10020",name:this.icon,size:c,color:"inherit"})),e("input",{key:"05cfe467319ce43c750acf3eeb71a5d63aa0f751",type:this.type,id:t,value:this.value,placeholder:this.placeholder,disabled:i,readOnly:this.readOnly,required:this.required,autoFocus:this.autoFocus,autoComplete:this.autoComplete,inputMode:this.inputMode||undefined,enterKeyHint:this.enterKeyHint||undefined,class:`native-input ds-control-label-box ds-text--${a.replace("text-","")} ds-text--regular ds-interaction-fill__content`,"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-describedby":l,"aria-invalid":this.error?"true":undefined,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur}),e("span",{key:"74e9df2f63940693f356dff70614b9cb2cc5dc0b",class:{"input-control__suffix":true,"ds-control-icon-box":true,"input-control__suffix--empty":!this.hasSuffix}},e("slot",{key:"d5d9209d1067170dcf12a109be07159efe8299fd",name:"suffix"})),r&&e("ds-button-unfilled",{key:"de1e5fa03c6651e90483e658c43fac950b228eb6",class:"input-control__clear",variant:"icon",size:b[this.size],icon:"CrossCircle",hasBorder:false,rounded:true,ariaLabel:this.clearLabel,onDsClick:this.handleClear})),d&&e("ds-text",{key:"7acc9863efe4250c9cd5e94358e19d217acd1ac1",class:"error-text",as:"div",variant:"text-body-small",color:"negative",textId:this.errorId,role:"alert"},this.errorMessage))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return m()}},[326,"ds-input",{value:[1025],name:[513],form:[513],disabled:[516],readOnly:[516,"read-only"],required:[516],requiredMessage:[1,"required-message"],clearLabel:[1,"clear-label"],placeholder:[1],type:[1],autoComplete:[1,"autocomplete"],inputMode:[1,"inputmode"],enterKeyHint:[1,"enterkeyhint"],size:[1],width:[1],hasBorder:[4,"has-border"],icon:[1],isInactive:[4,"is-inactive"],autoFocus:[4,"auto-focus"],error:[4],errorMessage:[1,"error-message"],inputId:[1,"input-id"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],formDisabled:[32],hasSuffix:[32],focused:[32],touched:[32],setFocus:[64]},undefined,{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function k(){if(typeof customElements==="undefined"){return}const t=["ds-input","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text"];t.forEach((t=>{switch(t){case"ds-input":if(!customElements.get(o(t))){customElements.define(o(t),w)}break;case"ds-badge":if(!customElements.get(o(t))){r()}break;case"ds-button-unfilled":if(!customElements.get(o(t))){d()}break;case"ds-icon":if(!customElements.get(o(t))){a()}break;case"ds-loader":if(!customElements.get(o(t))){c()}break;case"ds-text":if(!customElements.get(o(t))){l()}break}}))}k();const z=w;const _=k;export{z as DsInput,_ as defineCustomElement};
2
2
  //# sourceMappingURL=ds-input.js.map
package/dist/components/ds-input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"names":["inputCss","ICON_SIZE","lg","md","sm","xs","CLEAR_BUTTON_SIZE","idCounter","Input","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","generatedId","errorId","value","disabled","readOnly","required","requiredMessage","DEFAULT_REQUIRED_MESSAGE","clearLabel","type","inputMode","enterKeyHint","size","width","hasBorder","isInactive","autoFocus","error","ariaLabel","initialValue","formDisabled","hasSuffix","focused","touched","handleInput","e","target","dsChange","emit","handleFocus","handleBlur","handleClear","dsClear","el","querySelector","focus","componentWillLoad","Boolean","syncFormValue","componentDidRender","inactive","setFormControlValue","internals","missing","length","setRequiredValidity","formDisabledCallback","formResetCallback","formStateRestoreCallback","state","restoreStringFormState","setFocus","render","inputId","filled","dirty","showClear","showError","errorMessage","textVariant","CONTROL_TEXT_VARIANT","iconSize","describedBy","ariaDescribedby","undefined","filter","join","h","Host","key","class","controlWidthClass","icon","name","color","id","placeholder","autoComplete","replace","ariaLabelledby","onInput","onFocus","onBlur","variant","rounded","onDsClick","as","textId","role"],"sources":["src/wc/components/Input/Input.css?tag=ds-input&encapsulation=scoped","src/wc/components/Input/Input.tsx"],"sourcesContent":["@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-parts.css';\n@import '../../utils/control-width.css';\n@import '../../utils/field-stack.css';\n@import '../../utils/typography.css';\n@import '../../utils/forced-colors.css';\n\n:host(.input-host) {\n display: inline-flex;\n --ds-input-fg: var(--color-foreground-primary);\n --ds-input-placeholder: var(--color-foreground-secondary);\n --ds-input-placeholder-active: var(--color-foreground-quaternary);\n --ds-input-adornment-fg: var(--color-foreground-secondary);\n --ds-input-border: var(--color-border-secondary);\n}\n\n:host(.ds-control-width--fill),\n:host(.ds-control-width--fill) .input-control {\n width: 100%;\n}\n\n.input-control {\n overflow: hidden;\n background: transparent;\n border: none;\n border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n color: var(--ds-input-fg);\n}\n\n.input-control--bordered {\n --ds-interaction-border-width: var(--dimension-stroke-width-012);\n --ds-interaction-border-color: var(--ds-input-border);\n}\n\n.input-control--error {\n --ds-interaction-border-width: var(--dimension-stroke-width-018);\n --ds-interaction-border-color: var(--color-border-bold-negative);\n}\n\n.input-control:focus-within:not(.input-control--error) {\n --ds-interaction-border-width: var(--dimension-stroke-width-018);\n --ds-interaction-border-color: var(--color-border-bold-brand);\n}\n\n:host(.ds-control-inactive) .input-control::after {\n background: transparent;\n}\n\n.native-input {\n position: relative;\n z-index: 2;\n flex: 1 1 auto;\n min-width: 0;\n height: 100%;\n background: transparent;\n border: none;\n border-radius: inherit;\n outline: none;\n color: var(--ds-input-fg);\n font-family: inherit;\n -webkit-appearance: none;\n appearance: none;\n}\n\n.native-input:disabled {\n cursor: not-allowed;\n}\n\n.native-input:read-only:not(:disabled) {\n cursor: default;\n}\n\n.native-input::placeholder {\n color: var(--ds-input-placeholder);\n}\n\n.native-input:focus::placeholder {\n color: var(--ds-input-placeholder-active);\n}\n\n.native-input[type='search']::-webkit-search-cancel-button,\n.native-input[type='search']::-webkit-search-decoration {\n display: none;\n}\n\n.input-control__prefix,\n.input-control__suffix {\n position: relative;\n z-index: 2;\n color: var(--ds-input-adornment-fg);\n}\n\n.input-control__suffix--empty {\n display: none;\n}\n\n.input-control__clear {\n position: relative;\n z-index: 2;\n flex-shrink: 0;\n align-self: center;\n}\n\n.input-control.ds-control--lg:has(.input-control__clear),\n.input-control.ds-control--md:has(.input-control__clear),\n.input-control.ds-control--sm:has(.input-control__clear) {\n padding-right: var(--dimension-space-050);\n}\n\n.input-control.ds-control--xs:has(.input-control__clear) {\n padding-right: 0;\n}\n\n.error-text {\n width: 100%;\n}\n\n@media (forced-colors: active) {\n .input-control:focus-within:not(.input-control--error)::after {\n outline-color: var(--ds-forced-color-selected);\n }\n\n .input-control--error::after {\n outline-style: dashed;\n }\n}\n","import { AttachInternals, Component, Prop, State, Event, EventEmitter, Element, Method, Watch, h, Host } from '@stencil/core';\nimport {\n controlWidthClass,\n CONTROL_TEXT_VARIANT,\n DEFAULT_REQUIRED_MESSAGE,\n restoreStringFormState,\n setFormControlValue,\n setRequiredValidity,\n type ControlWidth,\n} from '../../utils';\n\nexport type InputType = 'text' | 'email' | 'tel' | 'url' | 'search' | 'password';\nexport type InputSize = 'lg' | 'md' | 'sm' | 'xs';\nexport type InputWidth = ControlWidth;\n\nconst ICON_SIZE: Record<InputSize, 'lg' | 'md' | 'sm' | 'xs'> = {\n lg: 'lg',\n md: 'md',\n sm: 'sm',\n xs: 'xs',\n};\n\nconst CLEAR_BUTTON_SIZE: Record<InputSize, 'md' | 'sm' | 'xs'> = {\n lg: 'md',\n md: 'sm',\n sm: 'xs',\n xs: 'xs',\n};\n\nlet idCounter = 0;\n\n@Component({\n tag: 'ds-input',\n styleUrl: 'Input.css',\n scoped: true,\n formAssociated: true,\n})\nexport class Input {\n @Element() el!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n private generatedId = `ds-input-${++idCounter}`;\n private errorId = `${this.generatedId}-error`;\n\n @Prop({ mutable: true }) value: string = '';\n @Prop({ reflect: true }) name: string | undefined;\n @Prop({ reflect: true }) form: string | undefined;\n @Prop({ reflect: true }) disabled: boolean = false;\n /** Keeps the value focusable and submittable while preventing edits. */\n @Prop({ reflect: true }) readOnly: boolean = false;\n @Prop({ reflect: true }) required: boolean = false;\n @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n @Prop() clearLabel: string = 'Clear';\n @Prop() placeholder: string | undefined;\n @Prop() type: InputType = 'text';\n /** Native browser autofill hint. */\n @Prop({ attribute: 'autocomplete' }) autoComplete: string | undefined;\n /** Preferred virtual keyboard without changing the value semantics. */\n @Prop({ attribute: 'inputmode' }) inputMode: string = '';\n /** Preferred virtual-keyboard action label. */\n @Prop({ attribute: 'enterkeyhint' }) enterKeyHint: string = '';\n /** Control density. */\n @Prop() size: InputSize = 'md';\n /** Width fit — fill the parent (default) or hug the available content. */\n @Prop() width: InputWidth = 'fill';\n /** Show the standard inset border. */\n @Prop() hasBorder: boolean = true;\n /** Optional leading icon name. */\n @Prop() icon: string | undefined;\n @Prop() isInactive: boolean = false;\n @Prop() autoFocus: boolean = false;\n @Prop() error: boolean = false;\n @Prop() errorMessage: string | undefined;\n /** Associates the internal input with an external <label>. */\n @Prop() inputId: string | undefined;\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n\n @Event() dsChange!: EventEmitter<string>;\n @Event() dsClear!: EventEmitter<void>;\n\n private initialValue = '';\n @State() private formDisabled = false;\n @State() private hasSuffix = false;\n @State() private focused = false;\n @State() private touched = false;\n\n componentWillLoad() {\n this.initialValue = this.value;\n this.hasSuffix = Boolean(this.el.querySelector('[slot=\"suffix\"]'));\n this.syncFormValue();\n }\n\n componentDidRender() {\n const hasSuffix = Boolean(this.el.querySelector('[slot=\"suffix\"]'));\n if (hasSuffix !== this.hasSuffix) this.hasSuffix = hasSuffix;\n }\n\n @Watch('value')\n @Watch('disabled')\n @Watch('isInactive')\n @Watch('required')\n syncFormValue() {\n const inactive = this.isInactive || this.disabled || this.formDisabled;\n setFormControlValue(this.internals, this.value, { inactive });\n const missing = this.required && !inactive && this.value.length === 0;\n setRequiredValidity(this.internals, missing, this.requiredMessage);\n }\n\n formDisabledCallback(disabled: boolean) {\n this.formDisabled = disabled;\n this.syncFormValue();\n }\n\n formResetCallback() {\n this.value = this.initialValue;\n }\n\n formStateRestoreCallback(state: string | File | FormData | null) {\n this.value = restoreStringFormState(state);\n }\n\n @Method()\n async setFocus() {\n this.el.querySelector('input')?.focus();\n }\n\n private handleInput = (e: Event) => {\n this.value = (e.target as HTMLInputElement).value;\n this.dsChange.emit(this.value);\n };\n\n private handleFocus = () => {\n this.focused = true;\n };\n\n private handleBlur = () => {\n this.focused = false;\n this.touched = true;\n };\n\n private handleClear = () => {\n this.value = '';\n this.dsChange.emit('');\n this.dsClear.emit();\n this.el.querySelector('input')?.focus();\n };\n\n render() {\n const inputId = this.inputId ?? this.generatedId;\n const inactive = this.isInactive || this.disabled || this.formDisabled;\n const filled = this.value.length > 0;\n const dirty = this.value !== this.initialValue;\n const showClear = this.type === 'search' && filled && !inactive && !this.readOnly;\n const showError = this.error && Boolean(this.errorMessage);\n const textVariant = CONTROL_TEXT_VARIANT[this.size];\n const iconSize = ICON_SIZE[this.size];\n\n const describedBy = [\n this.ariaDescribedby,\n showError ? this.errorId : undefined,\n ].filter(Boolean).join(' ') || undefined;\n\n return (\n <Host\n class={{\n 'input-host': true,\n 'ds-field-stack': true,\n 'ds-control-inactive': inactive,\n [`ds-control--${this.size}`]: true,\n ...controlWidthClass(this.width),\n }}\n data-disabled={inactive ? '' : undefined}\n data-readonly={this.readOnly ? '' : undefined}\n data-required={this.required ? '' : undefined}\n data-invalid={this.error ? '' : undefined}\n data-filled={filled ? '' : undefined}\n data-focused={this.focused ? '' : undefined}\n data-dirty={dirty ? '' : undefined}\n data-touched={this.touched ? '' : undefined}\n >\n <div\n class={{\n 'input-control': true,\n 'ds-control-frame': true,\n 'input-control--bordered': this.hasBorder || this.error,\n 'input-control--error': this.error,\n 'ds-interaction-fill': true,\n [`ds-control--${this.size}`]: true,\n }}\n >\n {this.icon && (\n <span class=\"input-control__prefix ds-control-icon-box ds-interaction-fill__content\" aria-hidden=\"true\">\n <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n </span>\n )}\n <input\n type={this.type}\n id={inputId}\n value={this.value}\n placeholder={this.placeholder}\n disabled={inactive}\n readOnly={this.readOnly}\n required={this.required}\n autoFocus={this.autoFocus}\n autoComplete={this.autoComplete}\n inputMode={this.inputMode || undefined}\n enterKeyHint={this.enterKeyHint || undefined}\n class={`native-input ds-control-label-box ds-text--${textVariant.replace('text-', '')} ds-text--regular ds-interaction-fill__content`}\n aria-label={this.ariaLabel}\n aria-labelledby={this.ariaLabelledby}\n aria-describedby={describedBy}\n aria-invalid={this.error ? 'true' : undefined}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n <span class={{ 'input-control__suffix': true, 'ds-control-icon-box': true, 'input-control__suffix--empty': !this.hasSuffix }}>\n <slot name=\"suffix\" />\n </span>\n {showClear && (\n <ds-button-unfilled\n class=\"input-control__clear\"\n variant=\"icon\"\n size={CLEAR_BUTTON_SIZE[this.size]}\n icon=\"CrossCircle\"\n hasBorder={false}\n rounded\n ariaLabel={this.clearLabel}\n onDsClick={this.handleClear}\n />\n )}\n </div>\n {showError && (\n <ds-text\n class=\"error-text\"\n as=\"div\"\n variant=\"text-body-small\"\n color=\"negative\"\n textId={this.errorId}\n role=\"alert\"\n >\n {this.errorMessage}\n </ds-text>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"+YAAA,MAAMA,EAAW,IAAM,i4hBCevB,MAAMC,EAA0D,CAC9DC,GAAI,KACJC,GAAI,KACJC,GAAI,KACJC,GAAI,MAGN,MAAMC,EAA2D,CAC/DJ,GAAI,KACJC,GAAI,KACJC,GAAI,KACJC,GAAI,MAGN,IAAIE,EAAY,E,MAQHC,EAAKC,EAAA,MAAAD,UAAAE,EANlB,WAAAC,CAAAC,G,kJAUUC,KAAAC,YAAc,cAAcP,IAC5BM,KAAAE,QAAU,GAAGF,KAAKC,oBAEDD,KAAAG,MAAgB,GAGhBH,KAAAI,SAAoB,MAEpBJ,KAAAK,SAAoB,MACpBL,KAAAM,SAAoB,MACrCN,KAAAO,gBAA0BC,EAC1BR,KAAAS,WAAqB,QAErBT,KAAAU,KAAkB,OAIQV,KAAAW,UAAoB,GAEjBX,KAAAY,aAAuB,GAEpDZ,KAAAa,KAAkB,KAElBb,KAAAc,MAAoB,OAEpBd,KAAAe,UAAqB,KAGrBf,KAAAgB,WAAsB,MACtBhB,KAAAiB,UAAqB,MACrBjB,KAAAkB,MAAiB,MAIUlB,KAAAmB,UAA2B,KAOtDnB,KAAAoB,aAAe,GACNpB,KAAAqB,aAAe,MACfrB,KAAAsB,UAAY,MACZtB,KAAAuB,QAAU,MACVvB,KAAAwB,QAAU,MA0CnBxB,KAAAyB,YAAeC,IACrB1B,KAAKG,MAASuB,EAAEC,OAA4BxB,MAC5CH,KAAK4B,SAASC,KAAK7B,KAAKG,MAAM,EAGxBH,KAAA8B,YAAc,KACpB9B,KAAKuB,QAAU,IAAI,EAGbvB,KAAA+B,WAAa,KACnB/B,KAAKuB,QAAU,MACfvB,KAAKwB,QAAU,IAAI,EAGbxB,KAAAgC,YAAc,KACpBhC,KAAKG,MAAQ,GACbH,KAAK4B,SAASC,KAAK,IACnB7B,KAAKiC,QAAQJ,OACb7B,KAAKkC,GAAGC,cAAc,UAAUC,OAAO,CAuG1C,CAjKC,iBAAAC,GACErC,KAAKoB,aAAepB,KAAKG,MACzBH,KAAKsB,UAAYgB,QAAQtC,KAAKkC,GAAGC,cAAc,oBAC/CnC,KAAKuC,e,CAGP,kBAAAC,GACE,MAAMlB,EAAYgB,QAAQtC,KAAKkC,GAAGC,cAAc,oBAChD,GAAIb,IAActB,KAAKsB,UAAWtB,KAAKsB,UAAYA,C,CAOrD,aAAAiB,GACE,MAAME,EAAWzC,KAAKgB,YAAchB,KAAKI,UAAYJ,KAAKqB,aAC1DqB,EAAoB1C,KAAK2C,UAAW3C,KAAKG,MAAO,CAAEsC,aAClD,MAAMG,EAAU5C,KAAKM,WAAamC,GAAYzC,KAAKG,MAAM0C,SAAW,EACpEC,EAAoB9C,KAAK2C,UAAWC,EAAS5C,KAAKO,gB,CAGpD,oBAAAwC,CAAqB3C,GACnBJ,KAAKqB,aAAejB,EACpBJ,KAAKuC,e,CAGP,iBAAAS,GACEhD,KAAKG,MAAQH,KAAKoB,Y,CAGpB,wBAAA6B,CAAyBC,GACvBlD,KAAKG,MAAQgD,EAAuBD,E,CAItC,cAAME,GACJpD,KAAKkC,GAAGC,cAAc,UAAUC,O,CAwBlC,MAAAiB,GACE,MAAMC,EAAUtD,KAAKsD,SAAWtD,KAAKC,YACrC,MAAMwC,EAAWzC,KAAKgB,YAAchB,KAAKI,UAAYJ,KAAKqB,aAC1D,MAAMkC,EAASvD,KAAKG,MAAM0C,OAAS,EACnC,MAAMW,EAAQxD,KAAKG,QAAUH,KAAKoB,aAClC,MAAMqC,EAAYzD,KAAKU,OAAS,UAAY6C,IAAWd,IAAazC,KAAKK,SACzE,MAAMqD,EAAY1D,KAAKkB,OAASoB,QAAQtC,KAAK2D,cAC7C,MAAMC,EAAcC,EAAqB7D,KAAKa,MAC9C,MAAMiD,EAAW1E,EAAUY,KAAKa,MAEhC,MAAMkD,EAAc,CAClB/D,KAAKgE,gBACLN,EAAY1D,KAAKE,QAAU+D,WAC3BC,OAAO5B,SAAS6B,KAAK,MAAQF,UAE/B,OACEG,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,aAAc,KACd,iBAAkB,KAClB,sBAAuB9B,EACvB,CAAC,eAAezC,KAAKa,QAAS,QAC3B2D,EAAkBxE,KAAKc,QAC3B,gBACc2B,EAAW,GAAKwB,UAAS,gBACzBjE,KAAKK,SAAW,GAAK4D,UAAS,gBAC9BjE,KAAKM,SAAW,GAAK2D,UAAS,eAC/BjE,KAAKkB,MAAQ,GAAK+C,UAAS,cAC5BV,EAAS,GAAKU,UAAS,eACtBjE,KAAKuB,QAAU,GAAK0C,UAAS,aAC/BT,EAAQ,GAAKS,UAAS,eACpBjE,KAAKwB,QAAU,GAAKyC,WAElCG,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACL,gBAAiB,KACjB,mBAAoB,KACpB,0BAA2BvE,KAAKe,WAAaf,KAAKkB,MAClD,uBAAwBlB,KAAKkB,MAC7B,sBAAuB,KACvB,CAAC,eAAelB,KAAKa,QAAS,OAG/Bb,KAAKyE,MACJL,EAAA,QAAAE,IAAA,2CAAMC,MAAM,yEAAwE,cAAa,QAC/FH,EAAA,WAAAE,IAAA,2CAASI,KAAM1E,KAAKyE,KAAM5D,KAAMiD,EAAUa,MAAM,aAGpDP,EAAA,SAAAE,IAAA,2CACE5D,KAAMV,KAAKU,KACXkE,GAAItB,EACJnD,MAAOH,KAAKG,MACZ0E,YAAa7E,KAAK6E,YAClBzE,SAAUqC,EACVpC,SAAUL,KAAKK,SACfC,SAAUN,KAAKM,SACfW,UAAWjB,KAAKiB,UAChB6D,aAAc9E,KAAK8E,aACnBnE,UAAWX,KAAKW,WAAasD,UAC7BrD,aAAcZ,KAAKY,cAAgBqD,UACnCM,MAAO,8CAA8CX,EAAYmB,QAAQ,QAAS,oDAAmD,aACzH/E,KAAKmB,UAAS,kBACTnB,KAAKgF,eAAc,mBAClBjB,EAAW,eACf/D,KAAKkB,MAAQ,OAAS+C,UACpCgB,QAASjF,KAAKyB,YACdyD,QAASlF,KAAK8B,YACdqD,OAAQnF,KAAK+B,aAEfqC,EAAA,QAAAE,IAAA,2CAAMC,MAAO,CAAE,wBAAyB,KAAM,sBAAuB,KAAM,gCAAiCvE,KAAKsB,YAC/G8C,EAAA,QAAAE,IAAA,2CAAMI,KAAK,YAEZjB,GACCW,EAAA,sBAAAE,IAAA,2CACEC,MAAM,uBACNa,QAAQ,OACRvE,KAAMpB,EAAkBO,KAAKa,MAC7B4D,KAAK,cACL1D,UAAW,MACXsE,QAAO,KACPlE,UAAWnB,KAAKS,WAChB6E,UAAWtF,KAAKgC,eAIrB0B,GACCU,EAAA,WAAAE,IAAA,2CACEC,MAAM,aACNgB,GAAG,MACHH,QAAQ,kBACRT,MAAM,WACNa,OAAQxF,KAAKE,QACbuF,KAAK,SAEJzF,KAAK2D,c","ignoreList":[]}
1
+ {"version":3,"names":["inputCss","ICON_SIZE","lg","md","sm","xs","CLEAR_BUTTON_SIZE","idCounter","Input","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","generatedId","errorId","value","disabled","readOnly","required","requiredMessage","DEFAULT_REQUIRED_MESSAGE","clearLabel","type","inputMode","enterKeyHint","size","width","hasBorder","isInactive","autoFocus","error","ariaLabel","initialValue","formDisabled","hasSuffix","focused","touched","handleInput","e","target","dsChange","emit","handleFocus","handleBlur","handleClear","dsClear","el","querySelector","focus","componentWillLoad","Boolean","syncFormValue","componentDidRender","inactive","setFormControlValue","internals","missing","length","setRequiredValidity","formDisabledCallback","formResetCallback","formStateRestoreCallback","state","restoreStringFormState","setFocus","render","inputId","filled","dirty","showClear","showError","errorMessage","textVariant","CONTROL_TEXT_VARIANT","iconSize","describedBy","ariaDescribedby","undefined","filter","join","h","Host","key","class","controlWidthClass","icon","name","color","id","placeholder","autoComplete","replace","ariaLabelledby","onInput","onFocus","onBlur","variant","rounded","onDsClick","as","textId","role"],"sources":["src/wc/components/Input/Input.css?tag=ds-input&encapsulation=scoped","src/wc/components/Input/Input.tsx"],"sourcesContent":["@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-parts.css';\n@import '../../utils/control-width.css';\n@import '../../utils/field-stack.css';\n@import '../../utils/typography.css';\n@import '../../utils/forced-colors.css';\n\n:host(.input-host) {\n display: inline-flex;\n --ds-input-fg: var(--color-foreground-primary);\n --ds-input-placeholder: var(--color-foreground-secondary);\n --ds-input-placeholder-active: var(--color-foreground-quaternary);\n --ds-input-adornment-fg: var(--color-foreground-secondary);\n --ds-input-border: var(--color-border-secondary);\n}\n\n:host(.ds-control-width--fill),\n:host(.ds-control-width--fill) .input-control {\n width: 100%;\n}\n\n.input-control {\n overflow: hidden;\n background: transparent;\n border: none;\n border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n color: var(--ds-input-fg);\n}\n\n.input-control--bordered {\n --ds-interaction-border-width: var(--dimension-stroke-width-012);\n --ds-interaction-border-color: var(--ds-input-border);\n}\n\n.input-control--error {\n --ds-interaction-border-width: var(--dimension-stroke-width-018);\n --ds-interaction-border-color: var(--color-border-bold-negative);\n}\n\n.input-control--bordered:focus-within:not(.input-control--error) {\n --ds-interaction-border-width: var(--dimension-stroke-width-018);\n --ds-interaction-border-color: var(--color-border-bold-brand);\n}\n\n:host(.ds-control-inactive) .input-control::after {\n background: transparent;\n}\n\n.native-input {\n position: relative;\n z-index: 2;\n flex: 1 1 auto;\n min-width: 0;\n height: 100%;\n background: transparent;\n border: none;\n border-radius: inherit;\n outline: none;\n color: var(--ds-input-fg);\n font-family: inherit;\n -webkit-appearance: none;\n appearance: none;\n}\n\n.native-input:disabled {\n cursor: not-allowed;\n}\n\n.native-input:read-only:not(:disabled) {\n cursor: default;\n}\n\n.native-input::placeholder {\n color: var(--ds-input-placeholder);\n}\n\n.native-input:focus::placeholder {\n color: var(--ds-input-placeholder-active);\n}\n\n.native-input[type='search']::-webkit-search-cancel-button,\n.native-input[type='search']::-webkit-search-decoration {\n display: none;\n}\n\n.input-control__prefix,\n.input-control__suffix {\n position: relative;\n z-index: 2;\n color: var(--ds-input-adornment-fg);\n}\n\n.input-control__suffix--empty {\n display: none;\n}\n\n.input-control__clear {\n position: relative;\n z-index: 2;\n flex-shrink: 0;\n align-self: center;\n}\n\n.input-control.ds-control--lg:has(.input-control__clear),\n.input-control.ds-control--md:has(.input-control__clear),\n.input-control.ds-control--sm:has(.input-control__clear) {\n padding-right: var(--dimension-space-050);\n}\n\n.input-control.ds-control--xs:has(.input-control__clear) {\n padding-right: 0;\n}\n\n.error-text {\n width: 100%;\n}\n\n@media (forced-colors: active) {\n .input-control--bordered:focus-within:not(.input-control--error)::after {\n outline-color: var(--ds-forced-color-selected);\n }\n\n .input-control--error::after {\n outline-style: dashed;\n }\n}\n","import { AttachInternals, Component, Prop, State, Event, EventEmitter, Element, Method, Watch, h, Host } from '@stencil/core';\nimport {\n controlWidthClass,\n CONTROL_TEXT_VARIANT,\n DEFAULT_REQUIRED_MESSAGE,\n restoreStringFormState,\n setFormControlValue,\n setRequiredValidity,\n type ControlWidth,\n} from '../../utils';\n\nexport type InputType = 'text' | 'email' | 'tel' | 'url' | 'search' | 'password';\nexport type InputSize = 'lg' | 'md' | 'sm' | 'xs';\nexport type InputWidth = ControlWidth;\n\nconst ICON_SIZE: Record<InputSize, 'lg' | 'md' | 'sm' | 'xs'> = {\n lg: 'lg',\n md: 'md',\n sm: 'sm',\n xs: 'xs',\n};\n\nconst CLEAR_BUTTON_SIZE: Record<InputSize, 'md' | 'sm' | 'xs'> = {\n lg: 'md',\n md: 'sm',\n sm: 'xs',\n xs: 'xs',\n};\n\nlet idCounter = 0;\n\n@Component({\n tag: 'ds-input',\n styleUrl: 'Input.css',\n scoped: true,\n formAssociated: true,\n})\nexport class Input {\n @Element() el!: HTMLElement;\n @AttachInternals() internals!: ElementInternals;\n\n private generatedId = `ds-input-${++idCounter}`;\n private errorId = `${this.generatedId}-error`;\n\n @Prop({ mutable: true }) value: string = '';\n @Prop({ reflect: true }) name: string | undefined;\n @Prop({ reflect: true }) form: string | undefined;\n @Prop({ reflect: true }) disabled: boolean = false;\n /** Keeps the value focusable and submittable while preventing edits. */\n @Prop({ reflect: true }) readOnly: boolean = false;\n @Prop({ reflect: true }) required: boolean = false;\n @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n @Prop() clearLabel: string = 'Clear';\n @Prop() placeholder: string | undefined;\n @Prop() type: InputType = 'text';\n /** Native browser autofill hint. */\n @Prop({ attribute: 'autocomplete' }) autoComplete: string | undefined;\n /** Preferred virtual keyboard without changing the value semantics. */\n @Prop({ attribute: 'inputmode' }) inputMode: string = '';\n /** Preferred virtual-keyboard action label. */\n @Prop({ attribute: 'enterkeyhint' }) enterKeyHint: string = '';\n /** Control density. */\n @Prop() size: InputSize = 'md';\n /** Width fit — fill the parent (default) or hug the available content. */\n @Prop() width: InputWidth = 'fill';\n /** Show the standard inset border, including focused and invalid strokes. */\n @Prop() hasBorder: boolean = true;\n /** Optional leading icon name. */\n @Prop() icon: string | undefined;\n @Prop() isInactive: boolean = false;\n @Prop() autoFocus: boolean = false;\n @Prop() error: boolean = false;\n @Prop() errorMessage: string | undefined;\n /** Associates the internal input with an external <label>. */\n @Prop() inputId: string | undefined;\n @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n\n @Event() dsChange!: EventEmitter<string>;\n @Event() dsClear!: EventEmitter<void>;\n\n private initialValue = '';\n @State() private formDisabled = false;\n @State() private hasSuffix = false;\n @State() private focused = false;\n @State() private touched = false;\n\n componentWillLoad() {\n this.initialValue = this.value;\n this.hasSuffix = Boolean(this.el.querySelector('[slot=\"suffix\"]'));\n this.syncFormValue();\n }\n\n componentDidRender() {\n const hasSuffix = Boolean(this.el.querySelector('[slot=\"suffix\"]'));\n if (hasSuffix !== this.hasSuffix) this.hasSuffix = hasSuffix;\n }\n\n @Watch('value')\n @Watch('disabled')\n @Watch('isInactive')\n @Watch('required')\n syncFormValue() {\n const inactive = this.isInactive || this.disabled || this.formDisabled;\n setFormControlValue(this.internals, this.value, { inactive });\n const missing = this.required && !inactive && this.value.length === 0;\n setRequiredValidity(this.internals, missing, this.requiredMessage);\n }\n\n formDisabledCallback(disabled: boolean) {\n this.formDisabled = disabled;\n this.syncFormValue();\n }\n\n formResetCallback() {\n this.value = this.initialValue;\n }\n\n formStateRestoreCallback(state: string | File | FormData | null) {\n this.value = restoreStringFormState(state);\n }\n\n @Method()\n async setFocus() {\n this.el.querySelector('input')?.focus();\n }\n\n private handleInput = (e: Event) => {\n this.value = (e.target as HTMLInputElement).value;\n this.dsChange.emit(this.value);\n };\n\n private handleFocus = () => {\n this.focused = true;\n };\n\n private handleBlur = () => {\n this.focused = false;\n this.touched = true;\n };\n\n private handleClear = () => {\n this.value = '';\n this.dsChange.emit('');\n this.dsClear.emit();\n this.el.querySelector('input')?.focus();\n };\n\n render() {\n const inputId = this.inputId ?? this.generatedId;\n const inactive = this.isInactive || this.disabled || this.formDisabled;\n const filled = this.value.length > 0;\n const dirty = this.value !== this.initialValue;\n const showClear = this.type === 'search' && filled && !inactive && !this.readOnly;\n const showError = this.error && Boolean(this.errorMessage);\n const textVariant = CONTROL_TEXT_VARIANT[this.size];\n const iconSize = ICON_SIZE[this.size];\n\n const describedBy = [\n this.ariaDescribedby,\n showError ? this.errorId : undefined,\n ].filter(Boolean).join(' ') || undefined;\n\n return (\n <Host\n class={{\n 'input-host': true,\n 'ds-field-stack': true,\n 'ds-control-inactive': inactive,\n [`ds-control--${this.size}`]: true,\n ...controlWidthClass(this.width),\n }}\n data-disabled={inactive ? '' : undefined}\n data-readonly={this.readOnly ? '' : undefined}\n data-required={this.required ? '' : undefined}\n data-invalid={this.error ? '' : undefined}\n data-filled={filled ? '' : undefined}\n data-focused={this.focused ? '' : undefined}\n data-dirty={dirty ? '' : undefined}\n data-touched={this.touched ? '' : undefined}\n >\n <div\n class={{\n 'input-control': true,\n 'ds-control-frame': true,\n 'input-control--bordered': this.hasBorder,\n 'input-control--error': this.hasBorder && this.error,\n 'ds-interaction-fill': true,\n [`ds-control--${this.size}`]: true,\n }}\n >\n {this.icon && (\n <span class=\"input-control__prefix ds-control-icon-box ds-interaction-fill__content\" aria-hidden=\"true\">\n <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n </span>\n )}\n <input\n type={this.type}\n id={inputId}\n value={this.value}\n placeholder={this.placeholder}\n disabled={inactive}\n readOnly={this.readOnly}\n required={this.required}\n autoFocus={this.autoFocus}\n autoComplete={this.autoComplete}\n inputMode={this.inputMode || undefined}\n enterKeyHint={this.enterKeyHint || undefined}\n class={`native-input ds-control-label-box ds-text--${textVariant.replace('text-', '')} ds-text--regular ds-interaction-fill__content`}\n aria-label={this.ariaLabel}\n aria-labelledby={this.ariaLabelledby}\n aria-describedby={describedBy}\n aria-invalid={this.error ? 'true' : undefined}\n onInput={this.handleInput}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n />\n <span class={{ 'input-control__suffix': true, 'ds-control-icon-box': true, 'input-control__suffix--empty': !this.hasSuffix }}>\n <slot name=\"suffix\" />\n </span>\n {showClear && (\n <ds-button-unfilled\n class=\"input-control__clear\"\n variant=\"icon\"\n size={CLEAR_BUTTON_SIZE[this.size]}\n icon=\"CrossCircle\"\n hasBorder={false}\n rounded\n ariaLabel={this.clearLabel}\n onDsClick={this.handleClear}\n />\n )}\n </div>\n {showError && (\n <ds-text\n class=\"error-text\"\n as=\"div\"\n variant=\"text-body-small\"\n color=\"negative\"\n textId={this.errorId}\n role=\"alert\"\n >\n {this.errorMessage}\n </ds-text>\n )}\n </Host>\n );\n }\n}\n"],"mappings":"+YAAA,MAAMA,EAAW,IAAM,q5hBCevB,MAAMC,EAA0D,CAC9DC,GAAI,KACJC,GAAI,KACJC,GAAI,KACJC,GAAI,MAGN,MAAMC,EAA2D,CAC/DJ,GAAI,KACJC,GAAI,KACJC,GAAI,KACJC,GAAI,MAGN,IAAIE,EAAY,E,MAQHC,EAAKC,EAAA,MAAAD,UAAAE,EANlB,WAAAC,CAAAC,G,kJAUUC,KAAAC,YAAc,cAAcP,IAC5BM,KAAAE,QAAU,GAAGF,KAAKC,oBAEDD,KAAAG,MAAgB,GAGhBH,KAAAI,SAAoB,MAEpBJ,KAAAK,SAAoB,MACpBL,KAAAM,SAAoB,MACrCN,KAAAO,gBAA0BC,EAC1BR,KAAAS,WAAqB,QAErBT,KAAAU,KAAkB,OAIQV,KAAAW,UAAoB,GAEjBX,KAAAY,aAAuB,GAEpDZ,KAAAa,KAAkB,KAElBb,KAAAc,MAAoB,OAEpBd,KAAAe,UAAqB,KAGrBf,KAAAgB,WAAsB,MACtBhB,KAAAiB,UAAqB,MACrBjB,KAAAkB,MAAiB,MAIUlB,KAAAmB,UAA2B,KAOtDnB,KAAAoB,aAAe,GACNpB,KAAAqB,aAAe,MACfrB,KAAAsB,UAAY,MACZtB,KAAAuB,QAAU,MACVvB,KAAAwB,QAAU,MA0CnBxB,KAAAyB,YAAeC,IACrB1B,KAAKG,MAASuB,EAAEC,OAA4BxB,MAC5CH,KAAK4B,SAASC,KAAK7B,KAAKG,MAAM,EAGxBH,KAAA8B,YAAc,KACpB9B,KAAKuB,QAAU,IAAI,EAGbvB,KAAA+B,WAAa,KACnB/B,KAAKuB,QAAU,MACfvB,KAAKwB,QAAU,IAAI,EAGbxB,KAAAgC,YAAc,KACpBhC,KAAKG,MAAQ,GACbH,KAAK4B,SAASC,KAAK,IACnB7B,KAAKiC,QAAQJ,OACb7B,KAAKkC,GAAGC,cAAc,UAAUC,OAAO,CAuG1C,CAjKC,iBAAAC,GACErC,KAAKoB,aAAepB,KAAKG,MACzBH,KAAKsB,UAAYgB,QAAQtC,KAAKkC,GAAGC,cAAc,oBAC/CnC,KAAKuC,e,CAGP,kBAAAC,GACE,MAAMlB,EAAYgB,QAAQtC,KAAKkC,GAAGC,cAAc,oBAChD,GAAIb,IAActB,KAAKsB,UAAWtB,KAAKsB,UAAYA,C,CAOrD,aAAAiB,GACE,MAAME,EAAWzC,KAAKgB,YAAchB,KAAKI,UAAYJ,KAAKqB,aAC1DqB,EAAoB1C,KAAK2C,UAAW3C,KAAKG,MAAO,CAAEsC,aAClD,MAAMG,EAAU5C,KAAKM,WAAamC,GAAYzC,KAAKG,MAAM0C,SAAW,EACpEC,EAAoB9C,KAAK2C,UAAWC,EAAS5C,KAAKO,gB,CAGpD,oBAAAwC,CAAqB3C,GACnBJ,KAAKqB,aAAejB,EACpBJ,KAAKuC,e,CAGP,iBAAAS,GACEhD,KAAKG,MAAQH,KAAKoB,Y,CAGpB,wBAAA6B,CAAyBC,GACvBlD,KAAKG,MAAQgD,EAAuBD,E,CAItC,cAAME,GACJpD,KAAKkC,GAAGC,cAAc,UAAUC,O,CAwBlC,MAAAiB,GACE,MAAMC,EAAUtD,KAAKsD,SAAWtD,KAAKC,YACrC,MAAMwC,EAAWzC,KAAKgB,YAAchB,KAAKI,UAAYJ,KAAKqB,aAC1D,MAAMkC,EAASvD,KAAKG,MAAM0C,OAAS,EACnC,MAAMW,EAAQxD,KAAKG,QAAUH,KAAKoB,aAClC,MAAMqC,EAAYzD,KAAKU,OAAS,UAAY6C,IAAWd,IAAazC,KAAKK,SACzE,MAAMqD,EAAY1D,KAAKkB,OAASoB,QAAQtC,KAAK2D,cAC7C,MAAMC,EAAcC,EAAqB7D,KAAKa,MAC9C,MAAMiD,EAAW1E,EAAUY,KAAKa,MAEhC,MAAMkD,EAAc,CAClB/D,KAAKgE,gBACLN,EAAY1D,KAAKE,QAAU+D,WAC3BC,OAAO5B,SAAS6B,KAAK,MAAQF,UAE/B,OACEG,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,aAAc,KACd,iBAAkB,KAClB,sBAAuB9B,EACvB,CAAC,eAAezC,KAAKa,QAAS,QAC3B2D,EAAkBxE,KAAKc,QAC3B,gBACc2B,EAAW,GAAKwB,UAAS,gBACzBjE,KAAKK,SAAW,GAAK4D,UAAS,gBAC9BjE,KAAKM,SAAW,GAAK2D,UAAS,eAC/BjE,KAAKkB,MAAQ,GAAK+C,UAAS,cAC5BV,EAAS,GAAKU,UAAS,eACtBjE,KAAKuB,QAAU,GAAK0C,UAAS,aAC/BT,EAAQ,GAAKS,UAAS,eACpBjE,KAAKwB,QAAU,GAAKyC,WAElCG,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACL,gBAAiB,KACjB,mBAAoB,KACpB,0BAA2BvE,KAAKe,UAChC,uBAAwBf,KAAKe,WAAaf,KAAKkB,MAC/C,sBAAuB,KACvB,CAAC,eAAelB,KAAKa,QAAS,OAG/Bb,KAAKyE,MACJL,EAAA,QAAAE,IAAA,2CAAMC,MAAM,yEAAwE,cAAa,QAC/FH,EAAA,WAAAE,IAAA,2CAASI,KAAM1E,KAAKyE,KAAM5D,KAAMiD,EAAUa,MAAM,aAGpDP,EAAA,SAAAE,IAAA,2CACE5D,KAAMV,KAAKU,KACXkE,GAAItB,EACJnD,MAAOH,KAAKG,MACZ0E,YAAa7E,KAAK6E,YAClBzE,SAAUqC,EACVpC,SAAUL,KAAKK,SACfC,SAAUN,KAAKM,SACfW,UAAWjB,KAAKiB,UAChB6D,aAAc9E,KAAK8E,aACnBnE,UAAWX,KAAKW,WAAasD,UAC7BrD,aAAcZ,KAAKY,cAAgBqD,UACnCM,MAAO,8CAA8CX,EAAYmB,QAAQ,QAAS,oDAAmD,aACzH/E,KAAKmB,UAAS,kBACTnB,KAAKgF,eAAc,mBAClBjB,EAAW,eACf/D,KAAKkB,MAAQ,OAAS+C,UACpCgB,QAASjF,KAAKyB,YACdyD,QAASlF,KAAK8B,YACdqD,OAAQnF,KAAK+B,aAEfqC,EAAA,QAAAE,IAAA,2CAAMC,MAAO,CAAE,wBAAyB,KAAM,sBAAuB,KAAM,gCAAiCvE,KAAKsB,YAC/G8C,EAAA,QAAAE,IAAA,2CAAMI,KAAK,YAEZjB,GACCW,EAAA,sBAAAE,IAAA,2CACEC,MAAM,uBACNa,QAAQ,OACRvE,KAAMpB,EAAkBO,KAAKa,MAC7B4D,KAAK,cACL1D,UAAW,MACXsE,QAAO,KACPlE,UAAWnB,KAAKS,WAChB6E,UAAWtF,KAAKgC,eAIrB0B,GACCU,EAAA,WAAAE,IAAA,2CACEC,MAAM,aACNgB,GAAG,MACHH,QAAQ,kBACRT,MAAM,WACNa,OAAQxF,KAAKE,QACbuF,KAAK,SAEJzF,KAAK2D,c","ignoreList":[]}
package/dist/components/ds-select.js CHANGED
@@ -1,2 +1,2 @@
1
- import{p as e,H as s,c as t,h as i,a as o,t as r}from"./index.js";import{a as c,C as n,b as d}from"./p-ymtdhOU5.js";import{A as a}from"./p-BBxcMVqk.js";import{c as l,r as h}from"./p-DhKvqh5G.js";import{r as g}from"./p-BJMRBHKW.js";import{r as u}from"./p-B6Vuayt6.js";import{T as f}from"./p-C4uYvyq6.js";import{d as p}from"./p-DoNdiEly.js";import{d as m}from"./p-Bgh0uG51.js";import{d as v}from"./p-BApNi_xA.js";import{d as b}from"./p-4scN0Mgn.js";import{d as y}from"./p-BAfG3M8z.js";import{d as x}from"./p-Ca-I2UnB.js";import{d as w}from"./p-w2kKeG_h.js";import{d as k}from"./p-UtfErnpX.js";import{D as _,s as z}from"./p-DOUk4KoT.js";import{a as C,s as T,r as F,c as V}from"./p-D2xWcVv6.js";import{a as A,C as j}from"./p-CuwopElg.js";import{c as I}from"./p-DAW6G8Sl.js";function $(e,s){return s.length>0?s:[{options:e}]}function O(e){return e.flatMap((e=>e.options))}function L(e){return e.length>0&&e.every((e=>Boolean(e.icon)))}function B(e){return e.some((e=>Boolean(e.subtext?.trim())))}function D(e,s){const t=s.trim().toLocaleLowerCase();if(!t)return e;return e.map((e=>{const s=e.header?.toLocaleLowerCase().includes(t);return{...e,options:s?e.options:e.options.filter((e=>`${e.label} ${e.subtext??""}`.toLocaleLowerCase().includes(t)))}})).filter((e=>e.options.length>0))}function E(e){return e.map(((e,s)=>({option:e,index:s}))).filter((({option:e})=>!e.isInactive)).map((({index:e})=>e))}function P(e,s,t){const i=E(e);if(!i.length)return-1;const o=i.indexOf(s);const r=o>=0?o:t===1?-1:0;return i[(r+t+i.length)%i.length]}function q(e,s,t){const i=s.toLocaleLowerCase();if(!i)return-1;for(let s=1;s<=e.length;s+=1){const o=(Math.max(t,-1)+s)%e.length;const r=e[o];if(!r.isInactive&&r.label.toLocaleLowerCase().startsWith(i))return o}return-1}function S(e){return{"ds-interaction-fill--on-faint":e==="faint","ds-interaction-fill--on-medium":e==="medium","ds-interaction-fill--on-bold":e==="bold","ds-interaction-fill--on-strong":e==="strong","ds-interaction-fill--on-translucent":e==="translucent","ds-interaction-fill--on-inverted":e==="inverted","ds-interaction-fill--on-media":e==="media","ds-interaction-fill--on-always-dark":e==="always-dark"}}class R{constructor(e){this.state=e;this.triggerEl=null;this.popupEl=null;this.searchEl=null;this.typeahead="";this.typeaheadTimer=null;this.outsideHandler=null;this.setTriggerElement=e=>{this.triggerEl=e};this.setPopupElement=e=>{this.popupEl=e};this.setSearchElement=e=>{this.searchEl=e};this.handleTriggerKeyDown=e=>{if(!this.state.open){if(["ArrowDown","ArrowUp","Enter"," "].includes(e.key)){e.preventDefault();this.openPopup(true,e.key==="ArrowUp"?"last":"first")}else if(this.isTypeaheadKey(e)){e.preventDefault();this.openPopup(true);if(this.state.searchable)this.state.searchTerm=e.key;else this.handleTypeahead(e.key)}return}this.handleListKeyDown(e)};this.handleListKeyDown=e=>{switch(e.key){case"ArrowDown":e.preventDefault();this.state.focusRingVisible=true;this.state.activeIndex=P(this.state.options,this.state.activeIndex,1);break;case"ArrowUp":e.preventDefault();this.state.focusRingVisible=true;this.state.activeIndex=P(this.state.options,this.state.activeIndex,-1);break;case"Home":e.preventDefault();this.state.focusRingVisible=true;this.state.activeIndex=E(this.state.options)[0]??-1;break;case"End":{e.preventDefault();this.state.focusRingVisible=true;const s=E(this.state.options);this.state.activeIndex=s[s.length-1]??-1;break}case"Enter":case" ":{if(e.key===" "&&this.state.searchable&&e.target===this.searchEl)break;e.preventDefault();const s=this.state.options[this.state.activeIndex];if(s)this.state.selectOption(s);break}case"Escape":e.preventDefault();this.closePopup(true);break;case"Tab":this.closePopup();break;default:if(!this.state.searchable&&this.isTypeaheadKey(e)){this.handleTypeahead(e.key)}}};this.position=new a({getAnchor:()=>this.triggerEl,getPopup:()=>this.popupEl,measure:(e,s)=>{if(!this.state.open||!s.isConnected||!this.state.host.contains(s))return null;const t=g(f.space050,f.space050);s.style.minWidth=`${l(e.offsetWidth,t)}px`;return{anchorRect:e.getBoundingClientRect(),popupWidth:s.offsetWidth,popupHeight:s.offsetHeight,side:"bottom",align:"start",sideOffsetPx:t,alignOffsetPx:h({align:"start",alignOffsetPx:0,sectionInsetPx:t}),viewportPadPx:t,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight}},apply:({x:e,y:s})=>{this.state.position={x:e,y:s};this.state.positionReady=true},topLayer:true})}get activeOptionId(){return!this.state.isLoading&&this.state.activeIndex>=0?`${this.state.generatedId}-option-${this.state.activeIndex}`:undefined}connect(){if(this.state.open)this.openChanged(true)}disconnect(){this.cancelPositionRetry();this.unbindPopupListeners();if(this.typeaheadTimer)clearTimeout(this.typeaheadTimer)}setFocus(){this.triggerEl?.focus()}optionsChanged(){if(!this.state.open)return;const e=E(this.state.options);if(!e.includes(this.state.activeIndex))this.state.activeIndex=e[0]??-1;requestAnimationFrame((()=>this.updatePosition()))}loadingChanged(){if(this.state.open)requestAnimationFrame((()=>this.updatePosition()))}openChanged(e){if(e){this.bindPopupListeners();this.schedulePositionUpdate((()=>{this.scrollActiveOptionIntoView();if(this.state.searchable)this.searchEl?.focus()}));return}this.cancelPositionRetry();this.unbindPopupListeners();this.state.searchTerm="";this.state.positionReady=false}searchChanged(){this.state.activeIndex=E(this.state.options)[0]??-1;requestAnimationFrame((()=>{this.updatePosition();this.scrollActiveOptionIntoView()}))}activeIndexChanged(){requestAnimationFrame((()=>this.scrollActiveOptionIntoView()))}openPopup(e,s){if(this.state.isDisabled||!this.state.options.length&&!this.state.isLoading)return;const t=E(this.state.options);this.state.activeIndex=s==="last"?t[t.length-1]??-1:this.state.preferredIndex>=0?this.state.preferredIndex:t[0]??-1;this.state.focusRingVisible=e;this.state.open=true}closePopup(e=false){if(!this.state.open)return;this.state.open=false;if(e)requestAnimationFrame((()=>this.triggerEl?.focus()))}focusSearchOrTrigger(){requestAnimationFrame((()=>this.state.searchable?this.searchEl?.focus():this.triggerEl?.focus()))}isTypeaheadKey(e){return e.key.length===1&&!e.metaKey&&!e.ctrlKey&&!e.altKey}handleTypeahead(e){if(this.typeaheadTimer)clearTimeout(this.typeaheadTimer);this.state.focusRingVisible=true;const s=e.toLocaleLowerCase();const t=this.typeahead.length>0&&[...this.typeahead].every((e=>e===s));this.typeahead=t?s:`${this.typeahead}${s}`;const i=q(this.state.options,this.typeahead,this.state.activeIndex);if(i>=0)this.state.activeIndex=i;const o=u(f.animationDurationMedium1,f.animationDurationMedium1);this.typeaheadTimer=setTimeout((()=>{this.typeahead="";this.typeaheadTimer=null}),o)}scrollActiveOptionIntoView(){if(!this.state.open||!this.activeOptionId)return;this.state.host.querySelector(`#${this.activeOptionId}`)?.scrollIntoView({block:"nearest",inline:"nearest"})}bindPopupListeners(){this.unbindPopupListeners();this.outsideHandler=e=>{if(this.state.host.contains(e.target))return;this.closePopup()};document.addEventListener("mousedown",this.outsideHandler,true);this.position.observe()}unbindPopupListeners(){if(this.outsideHandler){document.removeEventListener("mousedown",this.outsideHandler,true);this.outsideHandler=null}this.position.unobserve()}cancelPositionRetry(){this.position.cancel()}schedulePositionUpdate(e){if(!this.state.open)return;this.state.positionReady=false;this.position.schedule(e)}updatePosition(){return this.position.update()}}const H=()=>`@media (forced-colors: active){.sc-ds-select:root,.sc-ds-select-h,.ds-forced-colors-scope.sc-ds-select{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-select-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-select-h,.ds-focus-ring.sc-ds-select,.ds-focus-ring-inset.sc-ds-select-h,.ds-focus-ring-inset.sc-ds-select{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-select-h:focus-visible,.ds-focus-ring.sc-ds-select:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-select-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-select{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-select-h:focus-visible,.ds-focus-ring-inset.sc-ds-select:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-select-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-select:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-select-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-select:root,.sc-ds-select-h,.ds-forced-colors-scope.sc-ds-select{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}@media (forced-colors: active){.sc-ds-select:root,.sc-ds-select-h,.ds-forced-colors-scope.sc-ds-select{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-select-h,.ds-interaction-fill.sc-ds-select{position:relative;z-index:0;cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-select-h::before,.ds-interaction-fill.sc-ds-select::before,.ds-interaction-fill.sc-ds-select-h::after,.ds-interaction-fill.sc-ds-select::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-select-h::before,.ds-interaction-fill.sc-ds-select::before{z-index:1}.ds-interaction-fill.sc-ds-select-h::after,.ds-interaction-fill.sc-ds-select::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-select-h,.ds-interaction-fill--bordered.sc-ds-select{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-select-h::before,.ds-interaction-fill--selected.sc-ds-select::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-select-h,.ds-interaction-fill--selected.sc-ds-select{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-select-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-select:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-select-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-select:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-select-h>.ds-interaction-fill__content.sc-ds-select,.ds-interaction-fill.sc-ds-select>.ds-interaction-fill__content.sc-ds-select,.ds-interaction-fill__content.sc-ds-select{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-select-h,.ds-interaction-fill--on-faint.sc-ds-select{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-select-h,.ds-interaction-fill--on-medium.sc-ds-select{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-select-h,.ds-interaction-fill--on-bold.sc-ds-select{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-select-h,.ds-interaction-fill--on-strong.sc-ds-select{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-select-h,.ds-interaction-fill--on-translucent.sc-ds-select{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-select-h,.ds-interaction-fill--on-inverted.sc-ds-select{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-select-h,.ds-interaction-fill--on-media.sc-ds-select{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-select-h,.ds-interaction-fill--on-always-dark.sc-ds-select{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-select-h,.ds-interaction-fill--on-navigation.sc-ds-select{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-select-h::after,.ds-interaction-fill.sc-ds-select::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-select-h::before,.ds-interaction-fill--selected.sc-ds-select::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-select-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-select:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-select:root,.sc-ds-select-h,.ds-forced-colors-scope.sc-ds-select{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-select-h,.ds-control-inactive.sc-ds-select{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-select-h,.ds-control-inactive.sc-ds-select{color:var(--ds-forced-color-disabled);opacity:1}}.ds-control--lg.sc-ds-select,.ds-control--lg.sc-ds-select-h,.ds-control--md.sc-ds-select-h,.ds-control--md.sc-ds-select,.ds-control--sm.sc-ds-select-h,.ds-control--sm.sc-ds-select,.ds-control--xs.sc-ds-select-h,.ds-control--xs.sc-ds-select{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-select-h,.ds-control--lg.sc-ds-select{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-select-h,.ds-control--md.sc-ds-select{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-select-h,.ds-control--sm.sc-ds-select{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-select-h,.ds-control--xs.sc-ds-select{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-space--sm.sc-ds-select-h,.ds-chrome-space--sm.sc-ds-select{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-select-h,.ds-chrome-space--md.sc-ds-select{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-select-h,.ds-chrome-space--lg.sc-ds-select{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-select-h,.ds-chrome-row.sc-ds-select,.ds-chrome-column.sc-ds-select-h,.ds-chrome-column.sc-ds-select,.ds-chrome-grid.sc-ds-select-h,.ds-chrome-grid.sc-ds-select{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-select-h,.ds-chrome-row.sc-ds-select{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-select-h,.ds-chrome-column.sc-ds-select{flex-direction:column}.ds-chrome-grid.sc-ds-select-h,.ds-chrome-grid.sc-ds-select{display:grid;align-items:center}.ds-control-frame.sc-ds-select{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-icon-box.sc-ds-select{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md))}.ds-control-label-box.sc-ds-select{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-empty-region.sc-ds-select{display:flex;flex:1 1 auto;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;min-height:0}.ds-empty-region--padded.sc-ds-select{padding:var(--dimension-space-200)}.ds-choice-popup.sc-ds-select{box-sizing:border-box;display:flex;flex-direction:column;min-width:var(--dimension-menu-width-xs);max-width:min( var(--dimension-panel-width-lg), calc(100vw - var(--dimension-space-200)) );max-height:calc(100vh - var(--dimension-space-200));overflow:hidden;inset:auto;margin:0;padding:0;border:0;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-shadow-elevated-floating);animation:dsChoiceFadeIn var(--effect-motion-short-2) forwards;backface-visibility:hidden;will-change:transform;text-align:start}.ds-choice-popup.sc-ds-select::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--effect-highlight-elevated-floating)}.ds-choice-popup--closing.sc-ds-select{animation:dsChoiceFadeOut var(--effect-motion-short-2) forwards}@keyframes dsChoiceFadeIn{from{opacity:0;transform:inherit scale(0.97)}to{opacity:1}}@keyframes dsChoiceFadeOut{from{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.ds-choice-popup.sc-ds-select{animation:none;opacity:1}.ds-choice-popup--closing.sc-ds-select{opacity:0}}.ds-choice-list.sc-ds-select{display:flex;flex-direction:column;min-height:0;overflow-y:auto;overscroll-behavior:contain}.ds-choice-section--divided.sc-ds-select{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}ds-text.ds-choice-section__header.sc-ds-select{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 calc( var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) );text-align:start;-webkit-user-select:none;user-select:none}.ds-choice-item.sc-ds-select{width:100%;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background:transparent;cursor:default;-webkit-user-select:none;user-select:none;text-align:left;color:inherit}.ds-choice-item.sc-ds-select:has(.ds-choice-item__subtext){height:auto;min-height:var(--ds-control-height, var(--dimension-size-400));padding-block:var(--ds-control-padding-inline, var(--dimension-space-075));align-items:flex-start}.ds-choice-item__content.sc-ds-select{display:flex;flex:1;flex-direction:column;gap:var(--dimension-space-025);min-width:0}ds-text.ds-choice-item__label.sc-ds-select{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ds-text.ds-choice-item__subtext.sc-ds-select{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}.ds-choice-item__icon.sc-ds-select,.ds-choice-item__suffix.sc-ds-select{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));pointer-events:none}.ds-choice-empty.sc-ds-select,.ds-choice-loading.sc-ds-select{min-height:var(--dimension-size-600);padding:var(--dimension-space-100)}.ds-choice-footer.sc-ds-select{position:relative;box-sizing:border-box;padding-block:var(--dimension-space-050)}.ds-choice-footer.sc-ds-select::before{content:'';position:absolute;inset:0 0 auto;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.ds-choice-footer__content.sc-ds-select{display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400))}.ds-choice-footer__summary.sc-ds-select,.ds-choice-footer__clear.sc-ds-select ds-text.sc-ds-select{padding-inline:calc( var(--dimension-space-050) + var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) )}.ds-choice-footer__clear.sc-ds-select{appearance:none;display:inline-flex;align-items:center;padding:0;border:0;border-radius:var(--dimension-radius-025);background:transparent;color:var(--color-foreground-bold-brand);cursor:default}.ds-choice-footer__clear.sc-ds-select:hover{text-decoration:underline;text-decoration-color:var(--color-foreground-tertiary)}@media (forced-colors: active){.ds-choice-popup.sc-ds-select{outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}.ds-choice-popup.sc-ds-select::after{box-shadow:none}.ds-choice-section--divided.sc-ds-select{border-bottom-color:var(--ds-forced-color-content)}.ds-choice-footer.sc-ds-select::before{background-color:var(--ds-forced-color-content)}}.ds-control-frame.sc-ds-select{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-icon-box.sc-ds-select{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md))}.ds-control-label-box.sc-ds-select{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-control-width--hug.sc-ds-select-h,.ds-control-width--hug.sc-ds-select{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-select-h,.ds-control-width--fill.sc-ds-select{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.ds-field-stack.sc-ds-select-h,.ds-field-stack.sc-ds-select{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.select-search.sc-ds-select{position:relative;box-sizing:border-box;padding:var(--dimension-space-050);background:transparent}.select-search.sc-ds-select::after{content:'';position:absolute;inset:auto 0 0;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.select-search.sc-ds-select:focus-within::after{height:var(--dimension-stroke-width-018);background-color:var(--color-border-bold-brand)}.select-search__control.sc-ds-select{display:flex;align-items:center;box-sizing:border-box;gap:var(--ds-control-gap, var(--dimension-space-050));height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));border:0;border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.select-search__control.sc-ds-select:has(.select-search__clear){padding-right:0}.select-search__control.sc-ds-select>ds-icon.sc-ds-select{flex-shrink:0;color:var(--color-foreground-secondary)}.select-search.sc-ds-select .select-search__control.sc-ds-select .select-search__clear.sc-ds-select{align-self:center;flex-shrink:0;margin-right:var(--dimension-space-050)}.select-search__control.sc-ds-select input.sc-ds-select{flex:1;min-width:0;height:100%;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));border:0;outline:none;background:transparent;color:var(--color-foreground-primary);font-family:inherit}.select-search__control.sc-ds-select input.sc-ds-select::placeholder{color:var(--color-foreground-secondary)}.select-search__control.sc-ds-select input.sc-ds-select:focus::placeholder{color:var(--color-foreground-quaternary)}.select-search__control.sc-ds-select input[type='search'].sc-ds-select::-webkit-search-cancel-button,.select-search__control.sc-ds-select input[type='search'].sc-ds-select::-webkit-search-decoration{display:none}.ds-text--display-medium.sc-ds-select-h,.ds-text--display-medium.sc-ds-select{font-size:var(--typography-fontsize-3xl);line-height:var(--typography-lineheight-3xl)}.ds-text--display-small.sc-ds-select-h,.ds-text--display-small.sc-ds-select{font-size:var(--typography-fontsize-2xl);line-height:var(--typography-lineheight-2xl)}.ds-text--title-large.sc-ds-select-h,.ds-text--title-large.sc-ds-select{font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl)}.ds-text--title-medium.sc-ds-select-h,.ds-text--title-medium.sc-ds-select{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--title-small.sc-ds-select-h,.ds-text--title-small.sc-ds-select{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-large.sc-ds-select-h,.ds-text--body-large.sc-ds-select{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--body-medium.sc-ds-select-h,.ds-text--body-medium.sc-ds-select{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-small.sc-ds-select-h,.ds-text--body-small.sc-ds-select{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm)}.ds-text--caption.sc-ds-select-h,.ds-text--caption.sc-ds-select{font-size:var(--typography-fontsize-xs);line-height:var(--typography-lineheight-xs);text-transform:uppercase}.ds-text--display-medium.ds-text--emphasis.sc-ds-select-h,.ds-text--display-small.ds-text--emphasis.sc-ds-select-h,.ds-text--display-medium.ds-text--emphasis.sc-ds-select,.ds-text--display-small.ds-text--emphasis.sc-ds-select{font-weight:var(--typography-weight-bold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--display-medium.ds-text--regular.sc-ds-select-h,.ds-text--display-small.ds-text--regular.sc-ds-select-h,.ds-text--display-medium.ds-text--regular.sc-ds-select,.ds-text--display-small.ds-text--regular.sc-ds-select{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-large.ds-text--emphasis.sc-ds-select-h,.ds-text--title-large.ds-text--emphasis.sc-ds-select{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--title-large.ds-text--regular.sc-ds-select-h,.ds-text--title-large.ds-text--regular.sc-ds-select{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--emphasis.sc-ds-select-h,.ds-text--title-small.ds-text--emphasis.sc-ds-select-h,.ds-text--title-medium.ds-text--emphasis.sc-ds-select,.ds-text--title-small.ds-text--emphasis.sc-ds-select{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--regular.sc-ds-select-h,.ds-text--title-small.ds-text--regular.sc-ds-select-h,.ds-text--title-medium.ds-text--regular.sc-ds-select,.ds-text--title-small.ds-text--regular.sc-ds-select{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-large.ds-text--emphasis.sc-ds-select-h,.ds-text--body-medium.ds-text--emphasis.sc-ds-select-h,.ds-text--body-large.ds-text--emphasis.sc-ds-select,.ds-text--body-medium.ds-text--emphasis.sc-ds-select{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--body-large.ds-text--regular.sc-ds-select-h,.ds-text--body-medium.ds-text--regular.sc-ds-select-h,.ds-text--body-large.ds-text--regular.sc-ds-select,.ds-text--body-medium.ds-text--regular.sc-ds-select{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--emphasis.sc-ds-select-h,.ds-text--body-small.ds-text--emphasis.sc-ds-select{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--regular.sc-ds-select-h,.ds-text--body-small.ds-text--regular.sc-ds-select{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-none)}.ds-text--caption.ds-text--emphasis.sc-ds-select-h,.ds-text--caption.ds-text--emphasis.sc-ds-select{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-positive)}.ds-text--caption.ds-text--regular.sc-ds-select-h,.ds-text--caption.ds-text--regular.sc-ds-select{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive)}.select-host.sc-ds-select-h{display:inline-flex;position:relative;outline:none;--ds-select-fg:var(--color-foreground-secondary);--ds-select-fg-active:var(--color-foreground-primary);--ds-select-prefix-fg:var(--ds-select-fg);--ds-select-chevron-fg:var(--ds-select-fg);--ds-select-border:var(--color-border-secondary)}.ds-control-width--fill.sc-ds-select-h,.ds-control-width--fill.sc-ds-select-h .trigger.sc-ds-select{width:100%}.trigger.sc-ds-select{justify-content:flex-start;background:transparent;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));color:var(--ds-select-fg);cursor:default;font-family:inherit;-webkit-user-select:none;user-select:none;overflow:hidden;transition:color var(--effect-motion-short-2)}.trigger--bordered.sc-ds-select{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-select-border)}.trigger--has-value.sc-ds-select .trigger__label.sc-ds-select{color:var(--ds-select-fg-active)}.wrapper--error.sc-ds-select{--ds-interaction-border-width:var(--dimension-stroke-width-018);--ds-interaction-border-color:var(--color-border-bold-negative)}.trigger__prefix.sc-ds-select,.trigger__chevron.sc-ds-select{position:relative;z-index:2}.trigger__prefix.sc-ds-select{color:var(--ds-select-prefix-fg)}.trigger__chevron.sc-ds-select{color:var(--ds-select-chevron-fg)}.trigger__label.sc-ds-select{position:relative;z-index:2;flex:1 1 auto;text-align:left;color:inherit;transition:color var(--effect-motion-short-2)}.select-popup.sc-ds-select{color:var(--color-foreground-secondary)}.select-option[aria-selected='true'].sc-ds-select .ds-choice-item__icon.sc-ds-select{color:var(--color-foreground-primary)}.error-text.sc-ds-select{width:100%}.select-host--background-medium.sc-ds-select-h{--ds-select-fg:var(--color-foreground-on-medium-background-secondary);--ds-select-fg-active:var(--color-foreground-on-medium-background-primary);--ds-select-border:var(--color-border-on-medium-background-secondary)}.select-host--background-bold.sc-ds-select-h{--ds-select-fg:var(--color-foreground-on-bold-background-secondary);--ds-select-fg-active:var(--color-foreground-on-bold-background-primary);--ds-select-border:var(--color-border-on-bold-background-secondary)}.select-host--background-strong.sc-ds-select-h{--ds-select-fg:var(--color-foreground-on-strong-background-secondary);--ds-select-fg-active:var(--color-foreground-on-strong-background-primary);--ds-select-border:var(--color-border-on-strong-background-secondary)}.select-host--background-translucent.sc-ds-select-h{--ds-select-fg:var(--color-translucent-foreground-secondary);--ds-select-fg-active:var(--color-translucent-foreground-primary);--ds-select-border:var(--color-translucent-border-secondary)}.select-host--background-inverted.sc-ds-select-h{--ds-select-fg:var(--color-inverted-foreground-secondary);--ds-select-fg-active:var(--color-inverted-foreground-primary);--ds-select-border:var(--color-inverted-border-secondary)}.select-host--background-media.sc-ds-select-h{--ds-select-fg:var(--color-media-foreground-secondary);--ds-select-fg-active:var(--color-media-foreground-primary);--ds-select-border:var(--color-media-border-secondary)}.select-host--background-always-dark.sc-ds-select-h{--ds-select-fg:var(--color-always-dark-foreground-secondary);--ds-select-fg-active:var(--color-always-dark-foreground-primary);--ds-select-border:var(--color-always-dark-border-secondary)}`;const M={lg:"lg",md:"md",sm:"sm",xs:"xs"};let G=0;const U=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.dsClear=t(this,"dsClear");this.dsOpenChange=t(this,"dsOpenChange");this.internals=this.attachInternals();this.options=[];this.sections=[];this.multiple=false;this.value="";this.open=false;this.disabled=false;this.required=false;this.requiredMessage=_;this.placeholder="Select";this.size="md";this.width="hug";this.isInactive=false;this.isLoading=false;this.activeFill=true;this.hasBorder=true;this.allowClear=true;this.clearLabel="Clear";this.selectedLabel="selected";this.searchable=false;this.searchPlaceholder="Search";this.noResultsText="No results found";this.loadingLabel="Loading";this.error=false;this.ariaLabel=null;this.activeIndex=-1;this.searchTerm="";this.formDisabled=false;this.position={x:0,y:0};this.positionReady=false;this.focusRingVisible=false;this.generatedId=`ds-select-${++G}`;this.listboxId=`${this.generatedId}-listbox`;this.errorId=`${this.generatedId}-error`;this.initialValue="";this.controller=this.createController();this.clearSelection=e=>{e.preventDefault();e.stopPropagation();this.value=this.multiple?[]:"";this.dsChange.emit(this.multiple?[]:"");this.dsClear.emit();if(!this.multiple){const e=E(this.visibleOptions);this.activeIndex=e[0]??-1}this.controller.focusSearchOrTrigger()};this.handleListKeyDown=this.controller.handleListKeyDown;this.handleTriggerKeyDown=this.controller.handleTriggerKeyDown}createController(){const e=this;return new R({get host(){return e.el},generatedId:e.generatedId,get options(){return e.visibleOptions},get searchable(){return e.searchable},get isLoading(){return e.isLoading},get isDisabled(){return e.isDisabled},get preferredIndex(){if(e.multiple)return-1;return e.visibleOptions.findIndex((s=>s.value===e.scalarValue&&!s.isInactive))},get open(){return e.open},set open(s){e.open=s},get activeIndex(){return e.activeIndex},set activeIndex(s){e.activeIndex=s},get searchTerm(){return e.searchTerm},set searchTerm(s){e.searchTerm=s},get focusRingVisible(){return e.focusRingVisible},set focusRingVisible(s){e.focusRingVisible=s},get position(){return e.position},set position(s){e.position=s},get positionReady(){return e.positionReady},set positionReady(s){e.positionReady=s},selectOption:s=>e.selectOption(s)})}componentWillLoad(){this.value=this.normalizeValueForMode(this.value);this.initialValue=Array.isArray(this.value)?[...this.value]:this.value;this.syncFormValue()}componentDidLoad(){this.controller.connect()}disconnectedCallback(){this.controller.disconnect()}syncFormValue(){if(this.multiple&&!Array.isArray(this.value)||!this.multiple&&Array.isArray(this.value)){this.value=this.normalizeValueForMode(this.value)}const e=this.isDisabled;if(this.multiple){const s=this.resolvedValues;C(this.internals,this.name,s,{inactive:e})}else{const s=this.hasSelection?this.scalarValue:"";T(this.internals,s,{inactive:e})}const s=this.required&&!e&&!this.hasSelection;z(this.internals,s,this.requiredMessage);this.controller.optionsChanged()}onLoadingChange(){this.controller.loadingChanged()}onOpenChange(e){this.dsOpenChange.emit(e);this.controller.openChanged(e)}onSearchTermChange(){this.controller.searchChanged()}onActiveIndexChange(){this.controller.activeIndexChanged()}formDisabledCallback(e){this.formDisabled=e;this.syncFormValue()}formResetCallback(){this.value=this.normalizeValueForMode(this.initialValue);this.closePopup()}formStateRestoreCallback(e){if(!this.multiple){this.value=F(e);return}this.value=V(e)}async setFocus(){this.controller.setFocus()}get isDisabled(){return this.disabled||this.isInactive||this.formDisabled}normalizeValueForMode(e){if(this.multiple){return Array.isArray(e)?[...e]:e?[e]:[]}return Array.isArray(e)?e[0]??"":e}get allSections(){return $(this.options,this.sections)}get allOptions(){return O(this.allSections)}get visibleSections(){return this.searchable?D(this.allSections,this.searchTerm):this.allSections}get visibleOptions(){return O(this.visibleSections)}get scalarValue(){return typeof this.value==="string"?this.value:""}get resolvedValues(){if(!this.multiple||!Array.isArray(this.value))return[];const e=new Set(this.allOptions.map((e=>e.value)));return[...new Set(this.value.filter((s=>e.has(s))))]}get selectedOption(){if(this.multiple)return undefined;return this.allOptions.find((e=>e.value===this.scalarValue))}get hasSelection(){return this.multiple?this.resolvedValues.length>0:Boolean(this.selectedOption)}get activeOptionId(){return this.controller.activeOptionId}closePopup(e=false){this.controller.closePopup(e)}openPopup(e,s){this.controller.openPopup(e,s)}selectOption(e){if(e.isInactive||this.isLoading)return;if(this.multiple){const s=this.resolvedValues;const t=s.includes(e.value)?s.filter((s=>s!==e.value)):[...s,e.value];this.value=t;this.dsChange.emit([...t]);return}this.value=e.value;this.dsChange.emit(e.value);this.controller.closePopup(true)}renderOption(e,s,t,o){const r=this.multiple?this.resolvedValues.includes(e.value):e.value===this.scalarValue;const n=s===this.activeIndex;return i(c,{size:this.size,id:`${this.generatedId}-option-${s}`,option:e,selected:r,active:n,focusRingVisible:this.focusRingVisible,usesSubtext:o,leading:this.multiple?i("span",{class:"ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content","aria-hidden":"true"},i("ds-checkbox",{class:"select-option__checkbox",label:"",size:this.size,checked:r,presentation:true})):t&&e.icon?i("span",{class:"ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content","aria-hidden":"true"},i("ds-icon",{name:e.icon,size:this.size,color:"inherit"})):undefined,onHover:()=>{this.focusRingVisible=false;this.activeIndex=s},onSelect:()=>this.selectOption(e)})}render(){const e=this.isDisabled;const s=!this.hasSelection;const t=this.resolvedValues.length;const r=this.multiple?`${this.placeholder}${t>0?` · ${t}`:""}`:s?this.placeholder:this.selectedOption?.label;const c=j[this.size];const a=M[this.size];const l=!this.multiple&&L(this.allOptions);const h=B(this.allOptions);const g=this.error&&Boolean(this.errorMessage);const u=[this.ariaDescribedby,g?this.errorId:undefined].filter(Boolean).join(" ")||undefined;const f={position:"fixed",left:"0",top:"0",transform:`translate(${Math.round(this.position.x)}px, ${Math.round(this.position.y)}px)`,zIndex:"var(--dimension-z-index-floating)",visibility:this.positionReady?"visible":"hidden"};let p=0;return i(o,{key:"4495bc07015f19d43b633fdc4251859d836296ee",class:{"select-host":true,"select-host--multiple":this.multiple,"ds-field-stack":true,"ds-control-inactive":e,[`ds-control--${this.size}`]:true,...I(this.width),[`select-host--background-${this.background}`]:!!this.background}},i("button",{key:"840a89614bdf55d886f2cce7e51277a033c0ec47",ref:e=>{this.controller.setTriggerElement(e??null)},id:this.inputId??this.generatedId,type:"button",class:{trigger:true,"ds-control-frame":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--selected":!e&&this.activeFill&&this.hasSelection,"trigger--bordered":this.hasBorder||this.error,"trigger--placeholder":s&&!this.multiple,"trigger--has-value":this.hasSelection,"wrapper--error":this.error,[`ds-control--${this.size}`]:true,...S(this.background)},disabled:e,role:"combobox","aria-haspopup":"listbox","aria-expanded":String(this.open),"aria-controls":this.open?this.listboxId:undefined,"aria-activedescendant":this.open&&!this.searchable?this.activeOptionId:undefined,"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-describedby":u,"aria-invalid":this.error?"true":undefined,"aria-required":this.required||undefined,"aria-busy":this.isLoading?"true":undefined,onClick:()=>this.open?this.closePopup():this.openPopup(false),onKeyDown:this.handleTriggerKeyDown},(this.icon||this.isLoading)&&i("span",{key:"85a7325d0d786f503b1a7ecba96ac59527663e94",class:"trigger__prefix ds-control-icon-box ds-interaction-fill__content","aria-hidden":"true"},this.isLoading?i("ds-loader",{size:a,color:"inherit"}):i("ds-icon",{name:this.icon,size:a,color:"inherit"})),i("ds-text",{key:"370e4ab8859a6d2bd9129bc2457a4a7b1a15c0b4",class:"trigger__label ds-control-label-box ds-interaction-fill__content",as:"span",variant:c,color:"inherit",lineTruncation:1},r),i("span",{key:"8459bfddf49ea496d9a2e018852b6d912bdd4c74",class:"trigger__chevron ds-control-icon-box ds-interaction-fill__content","aria-hidden":"true"},i("ds-icon",{key:"d6d6a8222198fb0186e10256a7e0849c9a1a333c",name:"ChevronDown",size:a,color:"inherit"}))),this.open&&i("div",{key:"d661ecdd798c23cda64e53a692eb7ca06cebca9c",popover:"manual",ref:e=>{this.controller.setPopupElement(e??null)},class:"select-popup ds-choice-popup",style:f},this.searchable&&i(n,{key:"875a88e81c2782ada1e4d82b0be3cb23c07c74cf",size:this.size,value:this.searchTerm,placeholder:this.searchPlaceholder,controls:this.listboxId,activeDescendant:this.activeOptionId,inputRef:this.controller.setSearchElement,clearLabel:this.clearLabel,onValueChange:e=>{this.searchTerm=e},onKeyDown:e=>this.handleListKeyDown(e)}),i("div",{key:"c974ab0667d5c312531a83f93a14ed170e2703c6",id:this.listboxId,class:"ds-choice-list",role:"listbox","aria-multiselectable":this.multiple?"true":undefined,"aria-label":this.ariaLabel??this.placeholder,"aria-busy":this.isLoading?"true":undefined},this.isLoading?i("div",{class:"ds-choice-loading ds-empty-region",role:"option","aria-selected":"false","aria-disabled":"true","aria-label":this.loadingLabel,"aria-live":"polite"},i("ds-loader",{size:this.size,color:"inherit"})):this.visibleOptions.length===0?i("div",{class:"ds-choice-empty ds-empty-region",role:"option","aria-selected":"false","aria-disabled":"true","aria-label":this.noResultsText,"aria-live":"polite"},i("ds-empty-state",{body:this.noResultsText})):this.visibleSections.map((e=>i("div",{class:{"ds-choice-section":true,"ds-chrome-column":true,"ds-chrome-space--sm":true,"ds-choice-section--divided":!!e.divider},role:e.header?"group":undefined,"aria-label":e.header},e.header&&i("ds-text",{class:`ds-choice-section__header ds-control--${this.size}`,as:"span",variant:A[this.size],emphasis:true,color:"primary","aria-hidden":"true"},e.header),e.options.map((e=>this.renderOption(e,p++,l,h))))))),this.allowClear&&this.hasSelection&&!this.isLoading&&i(d,{key:"fb2031bd26155aac7cce7ce7fa005fd66934d11d",size:this.size,summary:this.multiple?`${t} ${this.selectedLabel}`:undefined,clearLabel:this.clearLabel,onClear:this.clearSelection})),g&&i("ds-text",{key:"8c1db8c7bd1affe3b5e1152e60e5952867b4c1e7",class:"error-text",as:"div",variant:"text-body-small",color:"negative",textId:this.errorId,role:"alert"},this.errorMessage))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],multiple:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}],name:[{syncFormValue:0}],options:[{syncFormValue:0}],sections:[{syncFormValue:0}],isLoading:[{onLoadingChange:0}],open:[{onOpenChange:0}],searchTerm:[{onSearchTermChange:0}],activeIndex:[{onActiveIndexChange:0}]}}static get style(){return H()}},[66,"ds-select",{options:[16],sections:[16],multiple:[516],value:[1025],open:[1540],name:[513],disabled:[516],required:[516],requiredMessage:[1,"required-message"],placeholder:[1],size:[1],width:[1],isInactive:[4,"is-inactive"],isLoading:[4,"is-loading"],activeFill:[4,"active-fill"],hasBorder:[4,"has-border"],icon:[1],allowClear:[4,"allow-clear"],clearLabel:[1,"clear-label"],selectedLabel:[1,"selected-label"],searchable:[4],searchPlaceholder:[1,"search-placeholder"],noResultsText:[1,"no-results-text"],loadingLabel:[1,"loading-label"],background:[1],error:[4],errorMessage:[1,"error-message"],inputId:[1,"input-id"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],activeIndex:[32],searchTerm:[32],formDisabled:[32],position:[32],positionReady:[32],focusRingVisible:[32],setFocus:[64]},undefined,{value:[{syncFormValue:0}],multiple:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}],name:[{syncFormValue:0}],options:[{syncFormValue:0}],sections:[{syncFormValue:0}],isLoading:[{onLoadingChange:0}],open:[{onOpenChange:0}],searchTerm:[{onSearchTermChange:0}],activeIndex:[{onActiveIndexChange:0}]}]);function K(){if(typeof customElements==="undefined"){return}const e=["ds-select","ds-badge","ds-button-unfilled","ds-checkbox","ds-empty-state","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-select":if(!customElements.get(r(e))){customElements.define(r(e),U)}break;case"ds-badge":if(!customElements.get(r(e))){p()}break;case"ds-button-unfilled":if(!customElements.get(r(e))){m()}break;case"ds-checkbox":if(!customElements.get(r(e))){v()}break;case"ds-empty-state":if(!customElements.get(r(e))){b()}break;case"ds-icon":if(!customElements.get(r(e))){y()}break;case"ds-loader":if(!customElements.get(r(e))){x()}break;case"ds-text":if(!customElements.get(r(e))){w()}break;case"ds-tooltip":if(!customElements.get(r(e))){k()}break}}))}K();const W=U;const N=K;export{W as DsSelect,N as defineCustomElement};
1
+ import{p as e,H as s,c as t,h as i,a as o,t as r}from"./index.js";import{a as c,C as n,b as d}from"./p-ymtdhOU5.js";import{A as a}from"./p-BBxcMVqk.js";import{c as l,r as h}from"./p-DhKvqh5G.js";import{r as f}from"./p-BJMRBHKW.js";import{r as g}from"./p-B6Vuayt6.js";import{T as u}from"./p-C4uYvyq6.js";import{d as p}from"./p-DoNdiEly.js";import{d as m}from"./p-Bgh0uG51.js";import{d as v}from"./p-BApNi_xA.js";import{d as b}from"./p-4scN0Mgn.js";import{d as y}from"./p-BAfG3M8z.js";import{d as x}from"./p-Ca-I2UnB.js";import{d as w}from"./p-w2kKeG_h.js";import{d as k}from"./p-UtfErnpX.js";import{D as _,s as z}from"./p-DOUk4KoT.js";import{a as C,s as T,r as F,c as V}from"./p-D2xWcVv6.js";import{a as A,C as j}from"./p-CuwopElg.js";import{c as I}from"./p-DAW6G8Sl.js";function $(e,s){return s.length>0?s:[{options:e}]}function O(e){return e.flatMap((e=>e.options))}function L(e){return e.length>0&&e.every((e=>Boolean(e.icon)))}function B(e){return e.some((e=>Boolean(e.subtext?.trim())))}function D(e,s){const t=s.trim().toLocaleLowerCase();if(!t)return e;return e.map((e=>{const s=e.header?.toLocaleLowerCase().includes(t);return{...e,options:s?e.options:e.options.filter((e=>`${e.label} ${e.subtext??""}`.toLocaleLowerCase().includes(t)))}})).filter((e=>e.options.length>0))}function E(e){return e.map(((e,s)=>({option:e,index:s}))).filter((({option:e})=>!e.isInactive)).map((({index:e})=>e))}function P(e,s,t){const i=E(e);if(!i.length)return-1;const o=i.indexOf(s);const r=o>=0?o:t===1?-1:0;return i[(r+t+i.length)%i.length]}function q(e,s,t){const i=s.toLocaleLowerCase();if(!i)return-1;for(let s=1;s<=e.length;s+=1){const o=(Math.max(t,-1)+s)%e.length;const r=e[o];if(!r.isInactive&&r.label.toLocaleLowerCase().startsWith(i))return o}return-1}function S(e){return{"ds-interaction-fill--on-faint":e==="faint","ds-interaction-fill--on-medium":e==="medium","ds-interaction-fill--on-bold":e==="bold","ds-interaction-fill--on-strong":e==="strong","ds-interaction-fill--on-translucent":e==="translucent","ds-interaction-fill--on-inverted":e==="inverted","ds-interaction-fill--on-media":e==="media","ds-interaction-fill--on-always-dark":e==="always-dark"}}class R{constructor(e){this.state=e;this.triggerEl=null;this.popupEl=null;this.searchEl=null;this.typeahead="";this.typeaheadTimer=null;this.outsideHandler=null;this.setTriggerElement=e=>{this.triggerEl=e};this.setPopupElement=e=>{this.popupEl=e};this.setSearchElement=e=>{this.searchEl=e};this.handleTriggerKeyDown=e=>{if(!this.state.open){if(["ArrowDown","ArrowUp","Enter"," "].includes(e.key)){e.preventDefault();this.openPopup(true,e.key==="ArrowUp"?"last":"first")}else if(this.isTypeaheadKey(e)){e.preventDefault();this.openPopup(true);if(this.state.searchable)this.state.searchTerm=e.key;else this.handleTypeahead(e.key)}return}this.handleListKeyDown(e)};this.handleListKeyDown=e=>{switch(e.key){case"ArrowDown":e.preventDefault();this.state.focusRingVisible=true;this.state.activeIndex=P(this.state.options,this.state.activeIndex,1);break;case"ArrowUp":e.preventDefault();this.state.focusRingVisible=true;this.state.activeIndex=P(this.state.options,this.state.activeIndex,-1);break;case"Home":e.preventDefault();this.state.focusRingVisible=true;this.state.activeIndex=E(this.state.options)[0]??-1;break;case"End":{e.preventDefault();this.state.focusRingVisible=true;const s=E(this.state.options);this.state.activeIndex=s[s.length-1]??-1;break}case"Enter":case" ":{if(e.key===" "&&this.state.searchable&&e.target===this.searchEl)break;e.preventDefault();const s=this.state.options[this.state.activeIndex];if(s)this.state.selectOption(s);break}case"Escape":e.preventDefault();this.closePopup(true);break;case"Tab":this.closePopup();break;default:if(!this.state.searchable&&this.isTypeaheadKey(e)){this.handleTypeahead(e.key)}}};this.position=new a({getAnchor:()=>this.triggerEl,getPopup:()=>this.popupEl,measure:(e,s)=>{if(!this.state.open||!s.isConnected||!this.state.host.contains(s))return null;const t=f(u.space050,u.space050);s.style.minWidth=`${l(e.offsetWidth,t)}px`;return{anchorRect:e.getBoundingClientRect(),popupWidth:s.offsetWidth,popupHeight:s.offsetHeight,side:"bottom",align:"start",sideOffsetPx:t,alignOffsetPx:h({align:"start",alignOffsetPx:0,sectionInsetPx:t}),viewportPadPx:t,viewportWidth:window.innerWidth,viewportHeight:window.innerHeight}},apply:({x:e,y:s})=>{this.state.position={x:e,y:s};this.state.positionReady=true},topLayer:true})}get activeOptionId(){return!this.state.isLoading&&this.state.activeIndex>=0?`${this.state.generatedId}-option-${this.state.activeIndex}`:undefined}connect(){if(this.state.open)this.openChanged(true)}disconnect(){this.cancelPositionRetry();this.unbindPopupListeners();if(this.typeaheadTimer)clearTimeout(this.typeaheadTimer)}setFocus(){this.triggerEl?.focus()}optionsChanged(){if(!this.state.open)return;const e=E(this.state.options);if(!e.includes(this.state.activeIndex))this.state.activeIndex=e[0]??-1;requestAnimationFrame((()=>this.updatePosition()))}loadingChanged(){if(this.state.open)requestAnimationFrame((()=>this.updatePosition()))}openChanged(e){if(e){this.bindPopupListeners();this.schedulePositionUpdate((()=>{this.scrollActiveOptionIntoView();if(this.state.searchable)this.searchEl?.focus()}));return}this.cancelPositionRetry();this.unbindPopupListeners();this.state.searchTerm="";this.state.positionReady=false}searchChanged(){this.state.activeIndex=E(this.state.options)[0]??-1;requestAnimationFrame((()=>{this.updatePosition();this.scrollActiveOptionIntoView()}))}activeIndexChanged(){requestAnimationFrame((()=>this.scrollActiveOptionIntoView()))}openPopup(e,s){if(this.state.isDisabled||!this.state.options.length&&!this.state.isLoading)return;const t=E(this.state.options);this.state.activeIndex=s==="last"?t[t.length-1]??-1:this.state.preferredIndex>=0?this.state.preferredIndex:t[0]??-1;this.state.focusRingVisible=e;this.state.open=true}closePopup(e=false){if(!this.state.open)return;this.state.open=false;if(e)requestAnimationFrame((()=>this.triggerEl?.focus()))}focusSearchOrTrigger(){requestAnimationFrame((()=>this.state.searchable?this.searchEl?.focus():this.triggerEl?.focus()))}isTypeaheadKey(e){return e.key.length===1&&!e.metaKey&&!e.ctrlKey&&!e.altKey}handleTypeahead(e){if(this.typeaheadTimer)clearTimeout(this.typeaheadTimer);this.state.focusRingVisible=true;const s=e.toLocaleLowerCase();const t=this.typeahead.length>0&&[...this.typeahead].every((e=>e===s));this.typeahead=t?s:`${this.typeahead}${s}`;const i=q(this.state.options,this.typeahead,this.state.activeIndex);if(i>=0)this.state.activeIndex=i;const o=g(u.animationDurationMedium1,u.animationDurationMedium1);this.typeaheadTimer=setTimeout((()=>{this.typeahead="";this.typeaheadTimer=null}),o)}scrollActiveOptionIntoView(){if(!this.state.open||!this.activeOptionId)return;this.state.host.querySelector(`#${this.activeOptionId}`)?.scrollIntoView({block:"nearest",inline:"nearest"})}bindPopupListeners(){this.unbindPopupListeners();this.outsideHandler=e=>{if(this.state.host.contains(e.target))return;this.closePopup()};document.addEventListener("mousedown",this.outsideHandler,true);this.position.observe()}unbindPopupListeners(){if(this.outsideHandler){document.removeEventListener("mousedown",this.outsideHandler,true);this.outsideHandler=null}this.position.unobserve()}cancelPositionRetry(){this.position.cancel()}schedulePositionUpdate(e){if(!this.state.open)return;this.state.positionReady=false;this.position.schedule(e)}updatePosition(){return this.position.update()}}const H=()=>`@media (forced-colors: active){.sc-ds-select:root,.sc-ds-select-h,.ds-forced-colors-scope.sc-ds-select{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.sc-ds-select-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-select-h,.ds-focus-ring.sc-ds-select,.ds-focus-ring-inset.sc-ds-select-h,.ds-focus-ring-inset.sc-ds-select{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.ds-focus-ring.sc-ds-select-h:focus-visible,.ds-focus-ring.sc-ds-select:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-select-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-select{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-select-h:focus-visible,.ds-focus-ring-inset.sc-ds-select:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-select-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-select:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-select::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}@media (forced-colors: active){.sc-ds-select-h{--ds-focus-ring-color:var(--ds-forced-color-selected)}}@media (forced-colors: active){.sc-ds-select:root,.sc-ds-select-h,.ds-forced-colors-scope.sc-ds-select{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}@media (forced-colors: active){.sc-ds-select:root,.sc-ds-select-h,.ds-forced-colors-scope.sc-ds-select{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-select-h,.ds-interaction-fill.sc-ds-select{position:relative;z-index:0;cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-select-h::before,.ds-interaction-fill.sc-ds-select::before,.ds-interaction-fill.sc-ds-select-h::after,.ds-interaction-fill.sc-ds-select::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-select-h::before,.ds-interaction-fill.sc-ds-select::before{z-index:1}.ds-interaction-fill.sc-ds-select-h::after,.ds-interaction-fill.sc-ds-select::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-select-h,.ds-interaction-fill--bordered.sc-ds-select{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-select-h::before,.ds-interaction-fill--selected.sc-ds-select::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-select-h,.ds-interaction-fill--selected.sc-ds-select{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-select-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-select:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-select-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-select:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-select-h>.ds-interaction-fill__content.sc-ds-select,.ds-interaction-fill.sc-ds-select>.ds-interaction-fill__content.sc-ds-select,.ds-interaction-fill__content.sc-ds-select{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-select-h,.ds-interaction-fill--on-faint.sc-ds-select{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-select-h,.ds-interaction-fill--on-medium.sc-ds-select{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-select-h,.ds-interaction-fill--on-bold.sc-ds-select{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-select-h,.ds-interaction-fill--on-strong.sc-ds-select{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-select-h,.ds-interaction-fill--on-translucent.sc-ds-select{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-select-h,.ds-interaction-fill--on-inverted.sc-ds-select{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-select-h,.ds-interaction-fill--on-media.sc-ds-select{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-select-h,.ds-interaction-fill--on-always-dark.sc-ds-select{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-select-h,.ds-interaction-fill--on-navigation.sc-ds-select{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-select-h::after,.ds-interaction-fill.sc-ds-select::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-select-h::before,.ds-interaction-fill--selected.sc-ds-select::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-select-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-select:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-select:root,.sc-ds-select-h,.ds-forced-colors-scope.sc-ds-select{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-select-h,.ds-control-inactive.sc-ds-select{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-select-h,.ds-control-inactive.sc-ds-select{color:var(--ds-forced-color-disabled);opacity:1}}.ds-control--lg.sc-ds-select,.ds-control--lg.sc-ds-select-h,.ds-control--md.sc-ds-select-h,.ds-control--md.sc-ds-select,.ds-control--sm.sc-ds-select-h,.ds-control--sm.sc-ds-select,.ds-control--xs.sc-ds-select-h,.ds-control--xs.sc-ds-select{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-select-h,.ds-control--lg.sc-ds-select{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-select-h,.ds-control--md.sc-ds-select{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-select-h,.ds-control--sm.sc-ds-select{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-select-h,.ds-control--xs.sc-ds-select{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-chrome-space--sm.sc-ds-select-h,.ds-chrome-space--sm.sc-ds-select{--ds-chrome-padding:var(--dimension-space-050);--ds-chrome-gap:var(--dimension-space-050)}.ds-chrome-space--md.sc-ds-select-h,.ds-chrome-space--md.sc-ds-select{--ds-chrome-padding:var(--dimension-space-100);--ds-chrome-gap:var(--dimension-space-100)}.ds-chrome-space--lg.sc-ds-select-h,.ds-chrome-space--lg.sc-ds-select{--ds-chrome-padding:var(--dimension-space-200);--ds-chrome-gap:var(--dimension-space-200)}.ds-chrome-row.sc-ds-select-h,.ds-chrome-row.sc-ds-select,.ds-chrome-column.sc-ds-select-h,.ds-chrome-column.sc-ds-select,.ds-chrome-grid.sc-ds-select-h,.ds-chrome-grid.sc-ds-select{display:flex;box-sizing:border-box;gap:var(--ds-chrome-gap, var(--dimension-space-100));padding:var(--ds-chrome-padding, var(--dimension-space-100))}.ds-chrome-row.sc-ds-select-h,.ds-chrome-row.sc-ds-select{flex-direction:row;align-items:center}.ds-chrome-column.sc-ds-select-h,.ds-chrome-column.sc-ds-select{flex-direction:column}.ds-chrome-grid.sc-ds-select-h,.ds-chrome-grid.sc-ds-select{display:grid;align-items:center}.ds-control-frame.sc-ds-select{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-icon-box.sc-ds-select{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md))}.ds-control-label-box.sc-ds-select{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-empty-region.sc-ds-select{display:flex;flex:1 1 auto;align-items:center;justify-content:center;box-sizing:border-box;min-width:0;min-height:0}.ds-empty-region--padded.sc-ds-select{padding:var(--dimension-space-200)}.ds-choice-popup.sc-ds-select{box-sizing:border-box;display:flex;flex-direction:column;min-width:var(--dimension-menu-width-xs);max-width:min( var(--dimension-panel-width-lg), calc(100vw - var(--dimension-space-200)) );max-height:calc(100vh - var(--dimension-space-200));overflow:hidden;inset:auto;margin:0;padding:0;border:0;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-shadow-elevated-floating);animation:dsChoiceFadeIn var(--effect-motion-short-2) forwards;backface-visibility:hidden;will-change:transform;text-align:start}.ds-choice-popup.sc-ds-select::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--effect-highlight-elevated-floating)}.ds-choice-popup--closing.sc-ds-select{animation:dsChoiceFadeOut var(--effect-motion-short-2) forwards}@keyframes dsChoiceFadeIn{from{opacity:0;transform:inherit scale(0.97)}to{opacity:1}}@keyframes dsChoiceFadeOut{from{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.ds-choice-popup.sc-ds-select{animation:none;opacity:1}.ds-choice-popup--closing.sc-ds-select{opacity:0}}.ds-choice-list.sc-ds-select{display:flex;flex-direction:column;min-height:0;overflow-y:auto;overscroll-behavior:contain}.ds-choice-section--divided.sc-ds-select{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}ds-text.ds-choice-section__header.sc-ds-select{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 calc( var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) );text-align:start;-webkit-user-select:none;user-select:none}.ds-choice-item.sc-ds-select{width:100%;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background:transparent;cursor:default;-webkit-user-select:none;user-select:none;text-align:left;color:inherit}.ds-choice-item.sc-ds-select:has(.ds-choice-item__subtext){height:auto;min-height:var(--ds-control-height, var(--dimension-size-400));padding-block:var(--ds-control-padding-inline, var(--dimension-space-075));align-items:flex-start}.ds-choice-item__content.sc-ds-select{display:flex;flex:1;flex-direction:column;gap:var(--dimension-space-025);min-width:0}ds-text.ds-choice-item__label.sc-ds-select{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ds-text.ds-choice-item__subtext.sc-ds-select{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}.ds-choice-item__icon.sc-ds-select,.ds-choice-item__suffix.sc-ds-select{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));pointer-events:none}.ds-choice-empty.sc-ds-select,.ds-choice-loading.sc-ds-select{min-height:var(--dimension-size-600);padding:var(--dimension-space-100)}.ds-choice-footer.sc-ds-select{position:relative;box-sizing:border-box;padding-block:var(--dimension-space-050)}.ds-choice-footer.sc-ds-select::before{content:'';position:absolute;inset:0 0 auto;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.ds-choice-footer__content.sc-ds-select{display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400))}.ds-choice-footer__summary.sc-ds-select,.ds-choice-footer__clear.sc-ds-select ds-text.sc-ds-select{padding-inline:calc( var(--dimension-space-050) + var(--ds-control-padding-inline, var(--dimension-space-075)) + var(--ds-control-label-inset, var(--dimension-space-025)) )}.ds-choice-footer__clear.sc-ds-select{appearance:none;display:inline-flex;align-items:center;padding:0;border:0;border-radius:var(--dimension-radius-025);background:transparent;color:var(--color-foreground-bold-brand);cursor:default}.ds-choice-footer__clear.sc-ds-select:hover{text-decoration:underline;text-decoration-color:var(--color-foreground-tertiary)}@media (forced-colors: active){.ds-choice-popup.sc-ds-select{outline:var(--dimension-stroke-width-012) solid var(--ds-forced-color-content);outline-offset:calc(-1 * var(--dimension-stroke-width-012))}.ds-choice-popup.sc-ds-select::after{box-shadow:none}.ds-choice-section--divided.sc-ds-select{border-bottom-color:var(--ds-forced-color-content)}.ds-choice-footer.sc-ds-select::before{background-color:var(--ds-forced-color-content)}}.ds-control-frame.sc-ds-select{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-icon-box.sc-ds-select{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md))}.ds-control-label-box.sc-ds-select{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-control-width--hug.sc-ds-select-h,.ds-control-width--hug.sc-ds-select{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-select-h,.ds-control-width--fill.sc-ds-select{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.ds-field-stack.sc-ds-select-h,.ds-field-stack.sc-ds-select{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.select-search.sc-ds-select{position:relative;box-sizing:border-box;padding:var(--dimension-space-050);background:transparent}.select-search.sc-ds-select::after{content:'';position:absolute;inset:auto 0 0;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.select-search.sc-ds-select:focus-within::after{height:var(--dimension-stroke-width-018);background-color:var(--color-border-bold-brand)}.select-search__control.sc-ds-select{display:flex;align-items:center;box-sizing:border-box;gap:var(--ds-control-gap, var(--dimension-space-050));height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));border:0;border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.select-search__control.sc-ds-select:has(.select-search__clear){padding-right:0}.select-search__control.sc-ds-select>ds-icon.sc-ds-select{flex-shrink:0;color:var(--color-foreground-secondary)}.select-search.sc-ds-select .select-search__control.sc-ds-select .select-search__clear.sc-ds-select{align-self:center;flex-shrink:0;margin-right:var(--dimension-space-050)}.select-search__control.sc-ds-select input.sc-ds-select{flex:1;min-width:0;height:100%;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));border:0;outline:none;background:transparent;color:var(--color-foreground-primary);font-family:inherit}.select-search__control.sc-ds-select input.sc-ds-select::placeholder{color:var(--color-foreground-secondary)}.select-search__control.sc-ds-select input.sc-ds-select:focus::placeholder{color:var(--color-foreground-quaternary)}.select-search__control.sc-ds-select input[type='search'].sc-ds-select::-webkit-search-cancel-button,.select-search__control.sc-ds-select input[type='search'].sc-ds-select::-webkit-search-decoration{display:none}.ds-text--display-medium.sc-ds-select-h,.ds-text--display-medium.sc-ds-select{font-size:var(--typography-fontsize-3xl);line-height:var(--typography-lineheight-3xl)}.ds-text--display-small.sc-ds-select-h,.ds-text--display-small.sc-ds-select{font-size:var(--typography-fontsize-2xl);line-height:var(--typography-lineheight-2xl)}.ds-text--title-large.sc-ds-select-h,.ds-text--title-large.sc-ds-select{font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl)}.ds-text--title-medium.sc-ds-select-h,.ds-text--title-medium.sc-ds-select{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--title-small.sc-ds-select-h,.ds-text--title-small.sc-ds-select{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-large.sc-ds-select-h,.ds-text--body-large.sc-ds-select{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--body-medium.sc-ds-select-h,.ds-text--body-medium.sc-ds-select{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-small.sc-ds-select-h,.ds-text--body-small.sc-ds-select{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm)}.ds-text--caption.sc-ds-select-h,.ds-text--caption.sc-ds-select{font-size:var(--typography-fontsize-xs);line-height:var(--typography-lineheight-xs);text-transform:uppercase}.ds-text--display-medium.ds-text--emphasis.sc-ds-select-h,.ds-text--display-small.ds-text--emphasis.sc-ds-select-h,.ds-text--display-medium.ds-text--emphasis.sc-ds-select,.ds-text--display-small.ds-text--emphasis.sc-ds-select{font-weight:var(--typography-weight-bold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--display-medium.ds-text--regular.sc-ds-select-h,.ds-text--display-small.ds-text--regular.sc-ds-select-h,.ds-text--display-medium.ds-text--regular.sc-ds-select,.ds-text--display-small.ds-text--regular.sc-ds-select{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-large.ds-text--emphasis.sc-ds-select-h,.ds-text--title-large.ds-text--emphasis.sc-ds-select{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--title-large.ds-text--regular.sc-ds-select-h,.ds-text--title-large.ds-text--regular.sc-ds-select{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--emphasis.sc-ds-select-h,.ds-text--title-small.ds-text--emphasis.sc-ds-select-h,.ds-text--title-medium.ds-text--emphasis.sc-ds-select,.ds-text--title-small.ds-text--emphasis.sc-ds-select{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--regular.sc-ds-select-h,.ds-text--title-small.ds-text--regular.sc-ds-select-h,.ds-text--title-medium.ds-text--regular.sc-ds-select,.ds-text--title-small.ds-text--regular.sc-ds-select{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-large.ds-text--emphasis.sc-ds-select-h,.ds-text--body-medium.ds-text--emphasis.sc-ds-select-h,.ds-text--body-large.ds-text--emphasis.sc-ds-select,.ds-text--body-medium.ds-text--emphasis.sc-ds-select{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--body-large.ds-text--regular.sc-ds-select-h,.ds-text--body-medium.ds-text--regular.sc-ds-select-h,.ds-text--body-large.ds-text--regular.sc-ds-select,.ds-text--body-medium.ds-text--regular.sc-ds-select{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--emphasis.sc-ds-select-h,.ds-text--body-small.ds-text--emphasis.sc-ds-select{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--regular.sc-ds-select-h,.ds-text--body-small.ds-text--regular.sc-ds-select{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-none)}.ds-text--caption.ds-text--emphasis.sc-ds-select-h,.ds-text--caption.ds-text--emphasis.sc-ds-select{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-positive)}.ds-text--caption.ds-text--regular.sc-ds-select-h,.ds-text--caption.ds-text--regular.sc-ds-select{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive)}.select-host.sc-ds-select-h{display:inline-flex;position:relative;outline:none;--ds-select-fg:var(--color-foreground-secondary);--ds-select-fg-active:var(--color-foreground-primary);--ds-select-prefix-fg:var(--ds-select-fg);--ds-select-chevron-fg:var(--ds-select-fg);--ds-select-border:var(--color-border-secondary)}.ds-control-width--fill.sc-ds-select-h,.ds-control-width--fill.sc-ds-select-h .trigger.sc-ds-select{width:100%}.trigger.sc-ds-select{justify-content:flex-start;background:transparent;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));color:var(--ds-select-fg);cursor:default;font-family:inherit;-webkit-user-select:none;user-select:none;overflow:hidden;transition:color var(--effect-motion-short-2)}.trigger--bordered.sc-ds-select{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-select-border)}.trigger--has-value.sc-ds-select .trigger__label.sc-ds-select{color:var(--ds-select-fg-active)}.wrapper--error.sc-ds-select{--ds-interaction-border-width:var(--dimension-stroke-width-018);--ds-interaction-border-color:var(--color-border-bold-negative)}.trigger__prefix.sc-ds-select,.trigger__chevron.sc-ds-select{position:relative;z-index:2}.trigger__prefix.sc-ds-select{color:var(--ds-select-prefix-fg)}.trigger__chevron.sc-ds-select{color:var(--ds-select-chevron-fg)}.trigger__label.sc-ds-select{position:relative;z-index:2;flex:1 1 auto;text-align:left;color:inherit;transition:color var(--effect-motion-short-2)}.select-popup.sc-ds-select{color:var(--color-foreground-secondary)}.select-option[aria-selected='true'].sc-ds-select .ds-choice-item__icon.sc-ds-select{color:var(--color-foreground-primary)}.error-text.sc-ds-select{width:100%}.select-host--background-medium.sc-ds-select-h{--ds-select-fg:var(--color-foreground-on-medium-background-secondary);--ds-select-fg-active:var(--color-foreground-on-medium-background-primary);--ds-select-border:var(--color-border-on-medium-background-secondary)}.select-host--background-bold.sc-ds-select-h{--ds-select-fg:var(--color-foreground-on-bold-background-secondary);--ds-select-fg-active:var(--color-foreground-on-bold-background-primary);--ds-select-border:var(--color-border-on-bold-background-secondary)}.select-host--background-strong.sc-ds-select-h{--ds-select-fg:var(--color-foreground-on-strong-background-secondary);--ds-select-fg-active:var(--color-foreground-on-strong-background-primary);--ds-select-border:var(--color-border-on-strong-background-secondary)}.select-host--background-translucent.sc-ds-select-h{--ds-select-fg:var(--color-translucent-foreground-secondary);--ds-select-fg-active:var(--color-translucent-foreground-primary);--ds-select-border:var(--color-translucent-border-secondary)}.select-host--background-inverted.sc-ds-select-h{--ds-select-fg:var(--color-inverted-foreground-secondary);--ds-select-fg-active:var(--color-inverted-foreground-primary);--ds-select-border:var(--color-inverted-border-secondary)}.select-host--background-media.sc-ds-select-h{--ds-select-fg:var(--color-media-foreground-secondary);--ds-select-fg-active:var(--color-media-foreground-primary);--ds-select-border:var(--color-media-border-secondary)}.select-host--background-always-dark.sc-ds-select-h{--ds-select-fg:var(--color-always-dark-foreground-secondary);--ds-select-fg-active:var(--color-always-dark-foreground-primary);--ds-select-border:var(--color-always-dark-border-secondary)}`;const M={lg:"lg",md:"md",sm:"sm",xs:"xs"};let G=0;const U=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsChange=t(this,"dsChange");this.dsClear=t(this,"dsClear");this.dsOpenChange=t(this,"dsOpenChange");this.internals=this.attachInternals();this.options=[];this.sections=[];this.multiple=false;this.value="";this.open=false;this.disabled=false;this.required=false;this.requiredMessage=_;this.placeholder="Select";this.size="md";this.width="hug";this.isInactive=false;this.isLoading=false;this.activeFill=true;this.hasBorder=true;this.allowClear=true;this.clearLabel="Clear";this.selectedLabel="selected";this.searchable=false;this.searchPlaceholder="Search";this.noResultsText="No results found";this.loadingLabel="Loading";this.error=false;this.ariaLabel=null;this.activeIndex=-1;this.searchTerm="";this.formDisabled=false;this.position={x:0,y:0};this.positionReady=false;this.focusRingVisible=false;this.generatedId=`ds-select-${++G}`;this.listboxId=`${this.generatedId}-listbox`;this.errorId=`${this.generatedId}-error`;this.initialValue="";this.controller=this.createController();this.clearSelection=e=>{e.preventDefault();e.stopPropagation();this.value=this.multiple?[]:"";this.dsChange.emit(this.multiple?[]:"");this.dsClear.emit();if(!this.multiple){const e=E(this.visibleOptions);this.activeIndex=e[0]??-1}this.controller.focusSearchOrTrigger()};this.handleListKeyDown=this.controller.handleListKeyDown;this.handleTriggerKeyDown=this.controller.handleTriggerKeyDown}createController(){const e=this;return new R({get host(){return e.el},generatedId:e.generatedId,get options(){return e.visibleOptions},get searchable(){return e.searchable},get isLoading(){return e.isLoading},get isDisabled(){return e.isDisabled},get preferredIndex(){if(e.multiple)return-1;return e.visibleOptions.findIndex((s=>s.value===e.scalarValue&&!s.isInactive))},get open(){return e.open},set open(s){e.open=s},get activeIndex(){return e.activeIndex},set activeIndex(s){e.activeIndex=s},get searchTerm(){return e.searchTerm},set searchTerm(s){e.searchTerm=s},get focusRingVisible(){return e.focusRingVisible},set focusRingVisible(s){e.focusRingVisible=s},get position(){return e.position},set position(s){e.position=s},get positionReady(){return e.positionReady},set positionReady(s){e.positionReady=s},selectOption:s=>e.selectOption(s)})}componentWillLoad(){this.value=this.normalizeValueForMode(this.value);this.initialValue=Array.isArray(this.value)?[...this.value]:this.value;this.syncFormValue()}componentDidLoad(){this.controller.connect()}disconnectedCallback(){this.controller.disconnect()}syncFormValue(){if(this.multiple&&!Array.isArray(this.value)||!this.multiple&&Array.isArray(this.value)){this.value=this.normalizeValueForMode(this.value)}const e=this.isDisabled;if(this.multiple){const s=this.resolvedValues;C(this.internals,this.name,s,{inactive:e})}else{const s=this.hasSelection?this.scalarValue:"";T(this.internals,s,{inactive:e})}const s=this.required&&!e&&!this.hasSelection;z(this.internals,s,this.requiredMessage);this.controller.optionsChanged()}onLoadingChange(){this.controller.loadingChanged()}onOpenChange(e){this.dsOpenChange.emit(e);this.controller.openChanged(e)}onSearchTermChange(){this.controller.searchChanged()}onActiveIndexChange(){this.controller.activeIndexChanged()}formDisabledCallback(e){this.formDisabled=e;this.syncFormValue()}formResetCallback(){this.value=this.normalizeValueForMode(this.initialValue);this.closePopup()}formStateRestoreCallback(e){if(!this.multiple){this.value=F(e);return}this.value=V(e)}async setFocus(){this.controller.setFocus()}get isDisabled(){return this.disabled||this.isInactive||this.formDisabled}normalizeValueForMode(e){if(this.multiple){return Array.isArray(e)?[...e]:e?[e]:[]}return Array.isArray(e)?e[0]??"":e}get allSections(){return $(this.options,this.sections)}get allOptions(){return O(this.allSections)}get visibleSections(){return this.searchable?D(this.allSections,this.searchTerm):this.allSections}get visibleOptions(){return O(this.visibleSections)}get scalarValue(){return typeof this.value==="string"?this.value:""}get resolvedValues(){if(!this.multiple||!Array.isArray(this.value))return[];const e=new Set(this.allOptions.map((e=>e.value)));return[...new Set(this.value.filter((s=>e.has(s))))]}get selectedOption(){if(this.multiple)return undefined;return this.allOptions.find((e=>e.value===this.scalarValue))}get hasSelection(){return this.multiple?this.resolvedValues.length>0:Boolean(this.selectedOption)}get activeOptionId(){return this.controller.activeOptionId}closePopup(e=false){this.controller.closePopup(e)}openPopup(e,s){this.controller.openPopup(e,s)}selectOption(e){if(e.isInactive||this.isLoading)return;if(this.multiple){const s=this.resolvedValues;const t=s.includes(e.value)?s.filter((s=>s!==e.value)):[...s,e.value];this.value=t;this.dsChange.emit([...t]);return}this.value=e.value;this.dsChange.emit(e.value);this.controller.closePopup(true)}renderOption(e,s,t,o){const r=this.multiple?this.resolvedValues.includes(e.value):e.value===this.scalarValue;const n=s===this.activeIndex;return i(c,{size:this.size,id:`${this.generatedId}-option-${s}`,option:e,selected:r,active:n,focusRingVisible:this.focusRingVisible,usesSubtext:o,leading:this.multiple?i("span",{class:"ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content","aria-hidden":"true"},i("ds-checkbox",{class:"select-option__checkbox",label:"",size:this.size,checked:r,presentation:true})):t&&e.icon?i("span",{class:"ds-choice-item__icon ds-control-icon-box ds-interaction-fill__content","aria-hidden":"true"},i("ds-icon",{name:e.icon,size:this.size,color:"inherit"})):undefined,onHover:()=>{this.focusRingVisible=false;this.activeIndex=s},onSelect:()=>this.selectOption(e)})}render(){const e=this.isDisabled;const s=!this.hasSelection;const t=this.resolvedValues.length;const r=this.multiple?`${this.placeholder}${t>0?` · ${t}`:""}`:s?this.placeholder:this.selectedOption?.label;const c=j[this.size];const a=M[this.size];const l=!this.multiple&&L(this.allOptions);const h=B(this.allOptions);const f=this.error&&Boolean(this.errorMessage);const g=[this.ariaDescribedby,f?this.errorId:undefined].filter(Boolean).join(" ")||undefined;const u={position:"fixed",left:"0",top:"0",transform:`translate(${Math.round(this.position.x)}px, ${Math.round(this.position.y)}px)`,zIndex:"var(--dimension-z-index-floating)",visibility:this.positionReady?"visible":"hidden"};let p=0;return i(o,{key:"b6cf175b3645982f64141fa173f97dcda812ac3f",class:{"select-host":true,"select-host--multiple":this.multiple,"ds-field-stack":true,"ds-control-inactive":e,[`ds-control--${this.size}`]:true,...I(this.width),[`select-host--background-${this.background}`]:!!this.background}},i("button",{key:"e529eadb1d256be98e083330e8f55f1714881bb7",ref:e=>{this.controller.setTriggerElement(e??null)},id:this.inputId??this.generatedId,type:"button",class:{trigger:true,"ds-control-frame":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--selected":!e&&this.activeFill&&this.hasSelection,"trigger--bordered":this.hasBorder,"trigger--placeholder":s&&!this.multiple,"trigger--has-value":this.hasSelection,"wrapper--error":this.hasBorder&&this.error,[`ds-control--${this.size}`]:true,...S(this.background)},disabled:e,role:"combobox","aria-haspopup":"listbox","aria-expanded":String(this.open),"aria-controls":this.open?this.listboxId:undefined,"aria-activedescendant":this.open&&!this.searchable?this.activeOptionId:undefined,"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-describedby":g,"aria-invalid":this.error?"true":undefined,"aria-required":this.required||undefined,"aria-busy":this.isLoading?"true":undefined,onClick:()=>this.open?this.closePopup():this.openPopup(false),onKeyDown:this.handleTriggerKeyDown},(this.icon||this.isLoading)&&i("span",{key:"b87a47cfe3104634199334c50c16fbc4df1c9103",class:"trigger__prefix ds-control-icon-box ds-interaction-fill__content","aria-hidden":"true"},this.isLoading?i("ds-loader",{size:a,color:"inherit"}):i("ds-icon",{name:this.icon,size:a,color:"inherit"})),i("ds-text",{key:"d556d6136fac475888e1e1815f8e831c560aaab8",class:"trigger__label ds-control-label-box ds-interaction-fill__content",as:"span",variant:c,color:"inherit",lineTruncation:1},r),i("span",{key:"9af6f9f703bb38e839435166e6a929d16d1fcb19",class:"trigger__chevron ds-control-icon-box ds-interaction-fill__content","aria-hidden":"true"},i("ds-icon",{key:"06fae05b81269966692359763c8177ae36d5a996",name:"ChevronDown",size:a,color:"inherit"}))),this.open&&i("div",{key:"3220b3d0a811a1374408cec8a4c08c23aacdfc64",popover:"manual",ref:e=>{this.controller.setPopupElement(e??null)},class:"select-popup ds-choice-popup",style:u},this.searchable&&i(n,{key:"de123a3dc3ef39fd9dc7e8337d75073ef66c8d31",size:this.size,value:this.searchTerm,placeholder:this.searchPlaceholder,controls:this.listboxId,activeDescendant:this.activeOptionId,inputRef:this.controller.setSearchElement,clearLabel:this.clearLabel,onValueChange:e=>{this.searchTerm=e},onKeyDown:e=>this.handleListKeyDown(e)}),i("div",{key:"b6d536d0095cb7107fd027cf248593dbf6b7cfb3",id:this.listboxId,class:"ds-choice-list",role:"listbox","aria-multiselectable":this.multiple?"true":undefined,"aria-label":this.ariaLabel??this.placeholder,"aria-busy":this.isLoading?"true":undefined},this.isLoading?i("div",{class:"ds-choice-loading ds-empty-region",role:"option","aria-selected":"false","aria-disabled":"true","aria-label":this.loadingLabel,"aria-live":"polite"},i("ds-loader",{size:this.size,color:"inherit"})):this.visibleOptions.length===0?i("div",{class:"ds-choice-empty ds-empty-region",role:"option","aria-selected":"false","aria-disabled":"true","aria-label":this.noResultsText,"aria-live":"polite"},i("ds-empty-state",{body:this.noResultsText})):this.visibleSections.map((e=>i("div",{class:{"ds-choice-section":true,"ds-chrome-column":true,"ds-chrome-space--sm":true,"ds-choice-section--divided":!!e.divider},role:e.header?"group":undefined,"aria-label":e.header},e.header&&i("ds-text",{class:`ds-choice-section__header ds-control--${this.size}`,as:"span",variant:A[this.size],emphasis:true,color:"primary","aria-hidden":"true"},e.header),e.options.map((e=>this.renderOption(e,p++,l,h))))))),this.allowClear&&this.hasSelection&&!this.isLoading&&i(d,{key:"c4d3401c2ca3c7b1cd89391023d94f7e09dc3cb6",size:this.size,summary:this.multiple?`${t} ${this.selectedLabel}`:undefined,clearLabel:this.clearLabel,onClear:this.clearSelection})),f&&i("ds-text",{key:"0f3b4601cef5cb8f1e9054db9296ec32b9a9ec8b",class:"error-text",as:"div",variant:"text-body-small",color:"negative",textId:this.errorId,role:"alert"},this.errorMessage))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],multiple:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}],name:[{syncFormValue:0}],options:[{syncFormValue:0}],sections:[{syncFormValue:0}],isLoading:[{onLoadingChange:0}],open:[{onOpenChange:0}],searchTerm:[{onSearchTermChange:0}],activeIndex:[{onActiveIndexChange:0}]}}static get style(){return H()}},[66,"ds-select",{options:[16],sections:[16],multiple:[516],value:[1025],open:[1540],name:[513],disabled:[516],required:[516],requiredMessage:[1,"required-message"],placeholder:[1],size:[1],width:[1],isInactive:[4,"is-inactive"],isLoading:[4,"is-loading"],activeFill:[4,"active-fill"],hasBorder:[4,"has-border"],icon:[1],allowClear:[4,"allow-clear"],clearLabel:[1,"clear-label"],selectedLabel:[1,"selected-label"],searchable:[4],searchPlaceholder:[1,"search-placeholder"],noResultsText:[1,"no-results-text"],loadingLabel:[1,"loading-label"],background:[1],error:[4],errorMessage:[1,"error-message"],inputId:[1,"input-id"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],activeIndex:[32],searchTerm:[32],formDisabled:[32],position:[32],positionReady:[32],focusRingVisible:[32],setFocus:[64]},undefined,{value:[{syncFormValue:0}],multiple:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}],name:[{syncFormValue:0}],options:[{syncFormValue:0}],sections:[{syncFormValue:0}],isLoading:[{onLoadingChange:0}],open:[{onOpenChange:0}],searchTerm:[{onSearchTermChange:0}],activeIndex:[{onActiveIndexChange:0}]}]);function K(){if(typeof customElements==="undefined"){return}const e=["ds-select","ds-badge","ds-button-unfilled","ds-checkbox","ds-empty-state","ds-icon","ds-loader","ds-text","ds-tooltip"];e.forEach((e=>{switch(e){case"ds-select":if(!customElements.get(r(e))){customElements.define(r(e),U)}break;case"ds-badge":if(!customElements.get(r(e))){p()}break;case"ds-button-unfilled":if(!customElements.get(r(e))){m()}break;case"ds-checkbox":if(!customElements.get(r(e))){v()}break;case"ds-empty-state":if(!customElements.get(r(e))){b()}break;case"ds-icon":if(!customElements.get(r(e))){y()}break;case"ds-loader":if(!customElements.get(r(e))){x()}break;case"ds-text":if(!customElements.get(r(e))){w()}break;case"ds-tooltip":if(!customElements.get(r(e))){k()}break}}))}K();const W=U;const N=K;export{W as DsSelect,N as defineCustomElement};
2
2
  //# sourceMappingURL=ds-select.js.map