Automaaval/dist/zacatraz/_internal/share/jupyter/lab/static/4503.5f41fcfefb7e83b6190e.js

"use strict";(self["webpackChunk_jupyterlab_application_top"]=self["webpackChunk_jupyterlab_application_top"]||[]).push([[4503],{14503:(e,t,o)=>{o.r(t);o.d(t,{Accordion:()=>be.Accordion,AccordionItem:()=>be.AccordionItem,Anchor:()=>Mi,AnchoredRegion:()=>be.AnchoredRegion,Avatar:()=>Yi,Badge:()=>be.Badge,Breadcrumb:()=>be.Breadcrumb,BreadcrumbItem:()=>be.BreadcrumbItem,Button:()=>ln,Card:()=>pn,Checkbox:()=>mn,Combobox:()=>wn,DataGrid:()=>be.DataGrid,DataGridCell:()=>be.DataGridCell,DataGridRow:()=>be.DataGridRow,DelegatesARIAToolbar:()=>ds,DesignSystemProvider:()=>En,Dialog:()=>be.Dialog,DirectionalStyleSheetBehavior:()=>qi,Disclosure:()=>Yn,Divider:()=>be.Divider,FoundationToolbar:()=>cs,Listbox:()=>el,Menu:()=>rl,MenuItem:()=>be.MenuItem,NumberField:()=>sl,Option:()=>be.ListboxOption,PaletteRGB:()=>nt,Picker:()=>be.Picker,PickerMenu:()=>js,Progress:()=>be.BaseProgress,ProgressRing:()=>be.BaseProgress,Radio:()=>vl,RadioGroup:()=>yl,Search:()=>Sl,Select:()=>Dl,Skeleton:()=>be.Skeleton,Slider:()=>Hl,SliderLabel:()=>Gl,StandardLuminance:()=>he,SwatchRGB:()=>se,Switch:()=>ql,Tab:()=>be.Tab,TabPanel:()=>be.TabPanel,Tabs:()=>be.Tabs,TextArea:()=>es,TextField:()=>rs,Toolbar:()=>us,Tooltip:()=>be.Tooltip,TreeItem:()=>be.TreeItem,TreeView:()=>be.TreeView,accentColor:()=>Uo,accentFillActive:()=>hr,accentFillActiveDelta:()=>mo,accentFillFocus:()=>pr,accentFillFocusDelta:()=>vo,accentFillHover:()=>ur,accentFillHoverDelta:()=>fo,accentFillRecipe:()=>cr,accentFillRest:()=>dr,accentFillRestDelta:()=>bo,accentForegroundActive:()=>Dr,accentForegroundActiveDelta:()=>yo,accentForegroundFocus:()=>jr,accentForegroundFocusDelta:()=>wo,accentForegroundHover:()=>Tr,accentForegroundHoverDelta:()=>xo,accentForegroundRecipe:()=>Sr,accentForegroundRest:()=>Vr,accentForegroundRestDelta:()=>$o,accentPalette:()=>Xo,accordionItemStyles:()=>Ka,accordionStyles:()=>Za,addJupyterLabThemeChangeListener:()=>Ea,allComponents:()=>Ns,anchorStyles:()=>Ai,anchoredRegionStyles:()=>Ei,applyJupyterTheme:()=>Ua,avatarStyles:()=>Zi,badgeStyles:()=>Qi,baseHeightMultiplier:()=>At,baseHorizontalSpacingMultiplier:()=>Mt,baseLayerLuminance:()=>Gt,bodyFont:()=>It,breadcrumbItemStyles:()=>rn,breadcrumbStyles:()=>tn,buttonStyles:()=>nn,cardStyles:()=>hn,checkboxStyles:()=>bn,checkboxTemplate:()=>fn,comboboxStyles:()=>yn,controlCornerRadius:()=>Et,dataGridCellStyles:()=>Sn,dataGridRowStyles:()=>Cn,dataGridStyles:()=>Fn,density:()=>_t,designSystemProviderStyles:()=>qn,designSystemProviderTemplate:()=>_n,designUnit:()=>qt,dialogStyles:()=>Un,direction:()=>Wt,disabledOpacity:()=>Ut,disclosureStyles:()=>Zn,dividerStyles:()=>Kn,errorColor:()=>ba,errorFillActive:()=>xa,errorFillFocus:()=>ya,errorFillHover:()=>$a,errorFillRecipe:()=>ma,errorFillRest:()=>va,errorForegroundActive:()=>Ra,errorForegroundFocus:()=>Pa,errorForegroundHover:()=>Ha,errorForegroundRecipe:()=>Oa,errorForegroundRest:()=>Na,errorPalette:()=>fa,fillColor:()=>lr,focusStrokeInner:()=>oa,focusStrokeInnerRecipe:()=>ta,focusStrokeOuter:()=>ea,focusStrokeOuterRecipe:()=>Qr,focusStrokeWidth:()=>Zt,foregroundOnAccentActive:()=>vr,foregroundOnAccentActiveLarge:()=>kr,foregroundOnAccentFocus:()=>$r,foregroundOnAccentFocusLarge:()=>Fr,foregroundOnAccentHover:()=>mr,foregroundOnAccentHoverLarge:()=>wr,foregroundOnAccentLargeRecipe:()=>xr,foregroundOnAccentRecipe:()=>br,foregroundOnAccentRest:()=>fr,foregroundOnAccentRestLarge:()=>yr,foregroundOnErrorActive:()=>Sa,foregroundOnErrorActiveLarge:()=>za,foregroundOnErrorFocus:()=>Va,foregroundOnErrorFocusLarge:()=>Ba,foregroundOnErrorHover:()=>Ca,foregroundOnErrorHoverLarge:()=>ja,foregroundOnErrorLargeRecipe:()=>Ta,foregroundOnErrorRecipe:()=>ka,foregroundOnErrorRest:()=>Fa,foregroundOnErrorRestLarge:()=>Da,heightNumberAsToken:()=>ga,horizontalSliderLabelStyles:()=>Il,imgTemplate:()=>Ji,isDark:()=>ge,jpAccordion:()=>ei,jpAccordionItem:()=>Qa,jpAnchor:()=>Gi,jpAnchoredRegion:()=>_i,jpAvatar:()=>Ki,jpBadge:()=>en,jpBreadcrumb:()=>on,jpBreadcrumbItem:()=>an,jpButton:()=>sn,jpCard:()=>gn,jpCheckbox:()=>vn,jpCombobox:()=>kn,jpDataGrid:()=>Dn,jpDataGridCell:()=>Vn,jpDataGridRow:()=>T
  ${(0,be.display)("flex")} :host {
    box-sizing: border-box;
    flex-direction: column;
    font-family: ${It};
    font-size: ${Kt};
    line-height: ${Qt};
    color: ${na};
    border-top: calc(${Xt} * 1px) solid ${pa};
  }
`;var Ya;(function(e){e["Canvas"]="Canvas";e["CanvasText"]="CanvasText";e["LinkText"]="LinkText";e["VisitedText"]="VisitedText";e["ActiveText"]="ActiveText";e["ButtonFace"]="ButtonFace";e["ButtonText"]="ButtonText";e["Field"]="Field";e["FieldText"]="FieldText";e["Highlight"]="Highlight";e["HighlightText"]="HighlightText";e["GrayText"]="GrayText"})(Ya||(Ya={}));const Ja=Xa.cssPartial`(${At} + ${_t}) * ${qt}`;const Ka=(e,t)=>Xa.css`
    ${(0,be.display)("flex")} :host {
      box-sizing: border-box;
      font-family: ${It};
      flex-direction: column;
      font-size: ${Kt};
      line-height: ${Qt};
      border-bottom: calc(${Xt} * 1px) solid
        ${pa};
    }

    .region {
      display: none;
      padding: calc((6 + (${qt} * 2 * ${_t})) * 1px);
    }

    div.heading {
      display: grid;
      position: relative;
      grid-template-columns: calc(${Ja} * 1px) auto 1fr auto;
      color: ${na};
    }

    .button {
      appearance: none;
      border: none;
      background: none;
      grid-column: 3;
      outline: none;
      padding: 0 calc((6 + (${qt} * 2 * ${_t})) * 1px);
      text-align: left;
      height: calc(${Ja} * 1px);
      color: currentcolor;
      cursor: pointer;
      font-family: inherit;
    }

    .button:hover {
      color: currentcolor;
    }

    .button:active {
      color: currentcolor;
    }

    .button::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      cursor: pointer;
    }

    /* prettier-ignore */
    .button:${be.focusVisible}::before {
      outline: none;
      border: calc(${Zt} * 1px) solid ${pr};
      border-radius: calc(${Et} * 1px);
    }

    :host([expanded]) .region {
      display: block;
    }

    .icon {
      display: flex;
      align-items: center;
      justify-content: center;
      grid-column: 1;
      grid-row: 1;
      pointer-events: none;
      position: relative;
    }

    slot[name='expanded-icon'],
    slot[name='collapsed-icon'] {
      fill: currentcolor;
    }

    slot[name='collapsed-icon'] {
      display: flex;
    }

    :host([expanded]) slot[name='collapsed-icon'] {
      display: none;
    }

    slot[name='expanded-icon'] {
      display: none;
    }

    :host([expanded]) slot[name='expanded-icon'] {
      display: flex;
    }

    .start {
      display: flex;
      align-items: center;
      padding-inline-start: calc(${qt} * 1px);
      justify-content: center;
      grid-column: 2;
      position: relative;
    }

    .end {
      display: flex;
      align-items: center;
      justify-content: center;
      grid-column: 4;
      position: relative;
    }
  `.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
      /* prettier-ignore */
      .button:${be.focusVisible}::before {
          border-color: ${Ya.Highlight};
        }
      :host slot[name='collapsed-icon'],
      :host([expanded]) slot[name='expanded-icon'] {
        fill: ${Ya.ButtonText};
      }
    `));const Qa=be.AccordionItem.compose({baseName:"accordion-item",template:be.accordionItemTemplate,styles:Ka,collapsedIcon:`\n        <svg\n            width="20"\n            height="20"\n            viewBox="0 0 16 16"\n            xmlns="http://www.w3.org/2000/svg"\n        >\n            <path\n                fill-rule="evenodd"\n                clip-rule="evenodd"\n                d="M5.00001 12.3263C5.00124 12.5147 5.05566 12.699 5.15699 12.8578C5.25831 13.0167 5.40243 13.1437 5.57273 13.2242C5.74304 13.3047 5.9326 13.3354 6.11959 13.3128C6.30659 13.2902 6.4834 13.2152 6.62967 13.0965L10.8988 8.83532C11.0739 8.69473 11.2153 8.51658 11.3124 8.31402C11.4096 8.11146 11.46 7.88966 11.46 7.66499C11.46 7.44033 11.4096 7.21853 11.3124 7.01597C11.2153 6.81341 11.0739 6.63526 10.8988 6.49467L6.62967 2.22347C6.48274 2.10422 6.30501 2.02912 6.11712 2.00691C5.92923 1.9847 5.73889 2.01628 5.56823 2.09799C5.39757 2.17969 5.25358 2.30817 5.153 2.46849C5.05241 2.62882 4.99936 2.8144 5.00001 3.00369V12.3263Z"\n            />\n        </svg>\n    `,expandedIcon:`\n        <svg\n            width="20"\n            height="20"\n            viewBox="0 0 16 16"\n            xmlns="http://www.w3.org/2000/svg"\n        >\n            <path\n                fill-rule="evenodd"\n                clip-rule="evenodd"\n                transform="rotate(90,8,8)"\n          d="M5.00001 12.3263C5.00124 12.5147 5.05566 12.699 5.15699 12.8578C5.25831 13.0167 5.40243 13.1437 5.57273 13.2242C5.74304 13.3047 5.9326 13.3354 6.11959 13.3128C6.30659 13.2902 6.4834 13.2152 6.62967 13.0965L10.8988 8.83532C11.0739 8.69473 11.2153 8.51658 11.3124 8.31402C11.4096 8.11146 11.46 7.88966 11.46 7.66499C11.46 7.44033 11.4096 7.21853 11.3124 7.01597C11.2153 6.81341 11.0739 6.63526 10.8988 6.49467L6.62967 2.22347C6.48274 2.10422 6.30501 2.02912 6.11712 2.00691C5.92923 1.9847 5.73889 2.01628 5.56823 2.09799C5.39757 2.17969 5.25358 2.30817 5.153 2.46849C5.05241 2.62882 4.99936 2.8144 5.00001 3.00369V12.3263Z"\n            />\n        </svg>\n    `});const ei=be.Accordion.compose({baseName:"accordion",template:be.accordionTemplate,styles:Za});var ti=function(e,t){ti=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var o in t)if(Object.prototype.hasOwnProperty.call(t,o))e[o]=t[o]};return ti(e,t)};function oi(e,t){if(typeof t!=="function"&&t!==null)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");ti(e,t);function o(){this.constructor=e}e.prototype=t===null?Object.create(t):(o.prototype=t.prototype,new o)}var ri=function(){ri=Object.assign||function e(t){for(var o,r=1,a=arguments.length;r<a;r++){o=arguments[r];for(var i in o)if(Object.prototype.hasOwnProperty.call(o,i))t[i]=o[i]}return t};return ri.apply(this,arguments)};function ai(e,t){var o={};for(var r in e)if(Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0)o[r]=e[r];if(e!=null&&typeof Object.getOwnPropertySymbols==="function")for(var a=0,r=Object.getOwnPropertySymbols(e);a<r.length;a++){if(t.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(e,r[a]))o[r[a]]=e[r[a]]}return o}function ii(e,t,o,r){var a=arguments.length,i=a<3?t:r===null?r=Object.getOwnPropertyDescriptor(t,o):r,n;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")i=Reflect.decorate(e,t,o,r);else for(var l=e.length-1;l>=0;l--)if(n=e[l])i=(a<3?n(i):a>3?n(t,o,i):n(t,o))||i;return a>3&&i&&Object.defineProperty(t,o,i),i}function ni(e,t){return function(o,r){t(o,r,e)}}function li(e,t,o,r,a,i){function n(e){if(e!==void 0&&typeof e!=="function")throw new TypeError("Function expected");return e}var l=r.kind,s=l==="getter"?"get":l==="setter"?"set":"value";var c=!t&&e?r["static"]?e:e.prototype:null;var d=t||(c?Object.getOwnPropertyDescriptor(c,r.name):{});var u,h=false;for(var p=o.length-1;p>=0;p--){var g={};for(var b in r)g[b]=b==="access"?{}:r[b];for(var b in r.access)g.access[b]=r.access[b];g.addInitializer=function(e){if(h)throw new TypeError("Cannot add initializers after decoration has completed");i.push(n(e||null))};var f=(0,o[p]
  ${(0,be.display)("inline-flex")} :host {
    font-family: ${It};
    outline: none;
    font-size: ${Yt};
    line-height: ${Jt};
    height: calc(${Ja} * 1px);
    min-width: calc(${Ja} * 1px);
    background-color: ${Br};
    color: ${na};
    border-radius: calc(${Et} * 1px);
    fill: currentcolor;
    cursor: pointer;
    margin: calc((${Zt} + 2) * 1px);
  }

  .control {
    background: transparent;
    height: inherit;
    flex-grow: 1;
    box-sizing: border-box;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 calc((10 + (${qt} * 2 * ${_t})) * 1px);
    white-space: nowrap;
    outline: none;
    text-decoration: none;
    border: calc(${Xt} * 1px) solid transparent;
    color: inherit;
    border-radius: inherit;
    fill: inherit;
    cursor: inherit;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
  }

  :host(:hover) {
    background-color: ${Lr};
  }

  :host(:active) {
    background-color: ${Or};
  }

  :host([aria-pressed='true']) {
    box-shadow: inset 0px 0px 2px 2px ${Zr};
  }

  :host([minimal]) {
    --density: -4;
  }

  :host([minimal]) .control {
    padding: 1px;
  }

  /* prettier-ignore */
  .control:${be.focusVisible} {
      outline: calc(${Zt} * 1px) solid ${Yr};
      outline-offset: 2px;
      -moz-outline-radius: 0px;
    }

  .control::-moz-focus-inner {
    border: 0;
  }

  .start,
  .end {
    display: flex;
  }

  .control.icon-only {
    padding: 0;
    line-height: 0;
  }

  ::slotted(svg) {
    ${""} width: 16px;
    height: 16px;
    pointer-events: none;
  }

  .start {
    margin-inline-end: 11px;
  }

  .end {
    margin-inline-start: 11px;
  }
`.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
    :host .control {
      background-color: ${Ya.ButtonFace};
      border-color: ${Ya.ButtonText};
      color: ${Ya.ButtonText};
      fill: currentColor;
    }

    :host(:hover) .control {
      forced-color-adjust: none;
      background-color: ${Ya.Highlight};
      color: ${Ya.HighlightText};
    }

    /* prettier-ignore */
    .control:${be.focusVisible} {
          forced-color-adjust: none;
          background-color: ${Ya.Highlight};
          outline-color: ${Ya.ButtonText};
          color: ${Ya.HighlightText};
        }

    .control:hover,
    :host([appearance='outline']) .control:hover {
      border-color: ${Ya.ButtonText};
    }

    :host([href]) .control {
      border-color: ${Ya.LinkText};
      color: ${Ya.LinkText};
    }

    :host([href]) .control:hover,
        :host([href]) .control:${be.focusVisible} {
      forced-color-adjust: none;
      background: ${Ya.ButtonFace};
      outline-color: ${Ya.LinkText};
      color: ${Ya.LinkText};
      fill: currentColor;
    }
  `));const Li=Xa.css`
  :host([appearance='accent']) {
    background: ${dr};
    color: ${fr};
  }

  :host([appearance='accent']:hover) {
    background: ${ur};
    color: ${mr};
  }

  :host([appearance='accent'][aria-pressed='true']) {
    box-shadow: inset 0px 0px 2px 2px ${Dr};
  }

  :host([appearance='accent']:active) .control:active {
    background: ${hr};
    color: ${vr};
  }

  :host([appearance="accent"]) .control:${be.focusVisible} {
    outline-color: ${pr};
  }
`.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
    :host([appearance='accent']) .control {
      forced-color-adjust: none;
      background: ${Ya.Highlight};
      color: ${Ya.HighlightText};
    }

    :host([appearance='accent']) .control:hover,
    :host([appearance='accent']:active) .control:active {
      background: ${Ya.HighlightText};
      border-color: ${Ya.Highlight};
      color: ${Ya.Highlight};
    }

    :host([appearance="accent"]) .control:${be.focusVisible} {
      outline-color: ${Ya.Highlight};
    }

    :host([appearance='accent'][href]) .control {
      background: ${Ya.LinkText};
      color: ${Ya.HighlightText};
    }

    :host([appearance='accent'][href]) .control:hover {
      background: ${Ya.ButtonFace};
      border-color: ${Ya.LinkText};
      box-shadow: none;
      color: ${Ya.LinkText};
      fill: currentColor;
    }

    :host([appearance="accent"][href]) .control:${be.focusVisible} {
      outline-color: ${Ya.HighlightText};
    }
  `));const Oi=Xa.css`
  :host([appearance='error']) {
    background: ${va};
    color: ${fr};
  }

  :host([appearance='error']:hover) {
    background: ${$a};
    color: ${mr};
  }

  :host([appearance='error'][aria-pressed='true']) {
    box-shadow: inset 0px 0px 2px 2px ${Ra};
  }

  :host([appearance='error']:active) .control:active {
    background: ${xa};
    color: ${vr};
  }

  :host([appearance="error"]) .control:${be.focusVisible} {
    outline-color: ${ya};
  }
`.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
    :host([appearance='error']) .control {
      forced-color-adjust: none;
      background: ${Ya.Highlight};
      color: ${Ya.HighlightText};
    }

    :host([appearance='error']) .control:hover,
    :host([appearance='error']:active) .control:active {
      background: ${Ya.HighlightText};
      border-color: ${Ya.Highlight};
      color: ${Ya.Highlight};
    }

    :host([appearance="error"]) .control:${be.focusVisible} {
      outline-color: ${Ya.Highlight};
    }

    :host([appearance='error'][href]) .control {
      background: ${Ya.LinkText};
      color: ${Ya.HighlightText};
    }

    :host([appearance='error'][href]) .control:hover {
      background: ${Ya.ButtonFace};
      border-color: ${Ya.LinkText};
      box-shadow: none;
      color: ${Ya.LinkText};
      fill: currentColor;
    }

    :host([appearance="error"][href]) .control:${be.focusVisible} {
      outline-color: ${Ya.HighlightText};
    }
  `));const Ni=Xa.css`
  :host([appearance='hypertext']) {
    font-size: inherit;
    line-height: inherit;
    height: auto;
    min-width: 0;
    background: transparent;
  }

  :host([appearance='hypertext']) .control {
    display: inline;
    padding: 0;
    border: none;
    box-shadow: none;
    border-radius: 0;
    line-height: 1;
  }

  :host a.control:not(:link) {
    background-color: transparent;
    cursor: default;
  }
  :host([appearance='hypertext']) .control:link,
  :host([appearance='hypertext']) .control:visited {
    background: transparent;
    color: ${Vr};
    border-bottom: calc(${Xt} * 1px) solid ${Vr};
  }

  :host([appearance='hypertext']:hover),
  :host([appearance='hypertext']) .control:hover {
    background: transparent;
    border-bottom-color: ${Tr};
  }

  :host([appearance='hypertext']:active),
  :host([appearance='hypertext']) .control:active {
    background: transparent;
    border-bottom-color: ${Dr};
  }

  :host([appearance="hypertext"]) .control:${be.focusVisible} {
    outline-color: transparent;
    border-bottom: calc(${Zt} * 1px) solid ${ea};
    margin-bottom: calc(calc(${Xt} - ${Zt}) * 1px);
  }
`.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
    :host([appearance='hypertext']:hover) {
      background-color: ${Ya.ButtonFace};
      color: ${Ya.ButtonText};
    }
    :host([appearance="hypertext"][href]) .control:hover,
        :host([appearance="hypertext"][href]) .control:active,
        :host([appearance="hypertext"][href]) .control:${be.focusVisible} {
      color: ${Ya.LinkText};
      border-bottom-color: ${Ya.LinkText};
      box-shadow: none;
    }
  `));const Hi=Xa.css`
  :host([appearance='lightweight']) {
    background: transparent;
    color: ${Vr};
  }

  :host([appearance='lightweight']) .control {
    padding: 0;
    height: initial;
    border: none;
    box-shadow: none;
    border-radius: 0;
  }

  :host([appearance='lightweight']:hover) {
    background: transparent;
    color: ${Tr};
  }

  :host([appearance='lightweight']:active) {
    background: transparent;
    color: ${Dr};
  }

  :host([appearance='lightweight']) .content {
    position: relative;
  }

  :host([appearance='lightweight']) .content::before {
    content: '';
    display: block;
    height: calc(${Xt} * 1px);
    position: absolute;
    top: calc(1em + 4px);
    width: 100%;
  }

  :host([appearance='lightweight']:hover) .content::before {
    background: ${Tr};
  }

  :host([appearance='lightweight']:active) .content::before {
    background: ${Dr};
  }

  :host([appearance="lightweight"]) .control:${be.focusVisible} {
    outline-color: transparent;
  }

  :host([appearance="lightweight"]) .control:${be.focusVisible} .content::before {
    background: ${na};
    height: calc(${Zt} * 1px);
  }
`.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
    :host([appearance="lightweight"]) .control:hover,
        :host([appearance="lightweight"]) .control:${be.focusVisible} {
      forced-color-adjust: none;
      background: ${Ya.ButtonFace};
      color: ${Ya.Highlight};
    }
    :host([appearance="lightweight"]) .control:hover .content::before,
        :host([appearance="lightweight"]) .control:${be.focusVisible} .content::before {
      background: ${Ya.Highlight};
    }

    :host([appearance="lightweight"][href]) .control:hover,
        :host([appearance="lightweight"][href]) .control:${be.focusVisible} {
      background: ${Ya.ButtonFace};
      box-shadow: none;
      color: ${Ya.LinkText};
    }

    :host([appearance="lightweight"][href]) .control:hover .content::before,
        :host([appearance="lightweight"][href]) .control:${be.focusVisible} .content::before {
      background: ${Ya.LinkText};
    }
  `));const Ri=Xa.css`
  :host([appearance='outline']) {
    background: transparent;
    border-color: ${dr};
  }

  :host([appearance='outline']:hover) {
    border-color: ${ur};
  }

  :host([appearance='outline']:active) {
    border-color: ${hr};
  }

  :host([appearance='outline']) .control {
    border-color: inherit;
  }

  :host([appearance="outline"]) .control:${be.focusVisible} {
    outline-color: ${pr};
  }
`.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
    :host([appearance='outline']) .control {
      border-color: ${Ya.ButtonText};
    }
    :host([appearance="outline"]) .control:${be.focusVisible} {
      forced-color-adjust: none;
      background-color: ${Ya.Highlight};
      outline-color: ${Ya.ButtonText};
      color: ${Ya.HighlightText};
      fill: currentColor;
    }
    :host([appearance='outline'][href]) .control {
      background: ${Ya.ButtonFace};
      border-color: ${Ya.LinkText};
      color: ${Ya.LinkText};
      fill: currentColor;
    }
    :host([appearance="outline"][href]) .control:hover,
        :host([appearance="outline"][href]) .control:${be.focusVisible} {
      forced-color-adjust: none;
      outline-color: ${Ya.LinkText};
    }
  `));const Pi=Xa.css`
  :host([appearance='stealth']) {
    background: transparent;
  }

  :host([appearance='stealth']:hover) {
    background: ${Er};
  }

  :host([appearance='stealth']:active) {
    background: ${_r};
  }

  :host([appearance='stealth']) .control:${be.focusVisible} {
    outline-color: ${pr};
  }
`.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
    :host([appearance='stealth']),
    :host([appearance='stealth']) .control {
      forced-color-adjust: none;
      background: ${Ya.ButtonFace};
      border-color: transparent;
      color: ${Ya.ButtonText};
      fill: currentColor;
    }

    :host([appearance='stealth']:hover) .control {
      background: ${Ya.Highlight};
      border-color: ${Ya.Highlight};
      color: ${Ya.HighlightText};
      fill: currentColor;
    }

    :host([appearance="stealth"]:${be.focusVisible}) .control {
      outline-color: ${Ya.Highlight};
      color: ${Ya.HighlightText};
      fill: currentColor;
    }

    :host([appearance='stealth'][href]) .control {
      color: ${Ya.LinkText};
    }

    :host([appearance="stealth"][href]:hover) .control,
        :host([appearance="stealth"][href]:${be.focusVisible}) .control {
      background: ${Ya.LinkText};
      border-color: ${Ya.LinkText};
      color: ${Ya.HighlightText};
      fill: currentColor;
    }

    :host([appearance="stealth"][href]:${be.focusVisible}) .control {
      forced-color-adjust: none;
      box-shadow: 0 0 0 1px ${Ya.LinkText};
    }
  `));function Ii(e,t){return new be.PropertyStyleSheetBehavior("appearance",e,t)}const Ai=(e,t)=>Xa.css`
    ${Bi}
  `.withBehaviors(Ii("accent",Li),Ii("hypertext",Ni),Ii("lightweight",Hi),Ii("outline",Ri),Ii("stealth",Pi));class Mi extends be.Anchor{appearanceChanged(e,t){if(this.$fastController.isConnected){this.classList.remove(e);this.classList.add(t)}}connectedCallback(){super.connectedCallback();if(!this.appearance){this.appearance="neutral"}}defaultSlottedContentChanged(e,t){const o=this.defaultSlottedContent.filter((e=>e.nodeType===Node.ELEMENT_NODE));if(o.length===1&&o[0]instanceof SVGElement){this.control.classList.add("icon-only")}else{this.control.classList.remove("icon-only")}}}ii([Xa.attr],Mi.prototype,"appearance",void 0);const Gi=Mi.compose({baseName:"anchor",baseClass:be.Anchor,template:be.anchorTemplate,styles:Ai,shadowOptions:{delegatesFocus:true}});const Ei=(e,t)=>Xa.css`
  :host {
    contain: layout;
    display: block;
  }
`;const _i=be.AnchoredRegion.compose({baseName:"anchored-region",template:be.anchoredRegionTemplate,styles:Ei});class qi{constructor(e,t){this.cache=new WeakMap;this.ltr=e;this.rtl=t}bind(e){this.attach(e)}unbind(e){const t=this.cache.get(e);if(t){Wt.unsubscribe(t)}}attach(e){const t=this.cache.get(e)||new Wi(this.ltr,this.rtl,e);const o=Wt.getValueFor(e);Wt.subscribe(t);t.attach(o);this.cache.set(e,t)}}class Wi{constructor(e,t,o){this.ltr=e;this.rtl=t;this.source=o;this.attached=null}handleChange({target:e,token:t}){this.attach(t.getValueFor(e))}attach(e){if(this.attached!==this[e]){if(this.attached!==null){this.source.$fastController.removeStyles(this.attached)}this.attached=this[e];if(this.attached!==null){this.source.$fastController.addStyles(this.attached)}}}}const Ui=(e,t)=>Xa.css`
  ::slotted(${e.tagFor(be.Badge)}) {
    left: 0;
  }
`;const Xi=(e,t)=>Xa.css`
  ::slotted(${e.tagFor(be.Badge)}) {
    right: 0;
  }
`;const Zi=(e,t)=>Xa.css`
    ${(0,be.display)("flex")} :host {
      position: relative;
      height: var(--avatar-size, var(--avatar-size-default));
      width: var(--avatar-size, var(--avatar-size-default));
      --avatar-size-default: calc(
        (
            (${At} + ${_t}) * ${qt} +
              ((${qt} * 8) - 40)
          ) * 1px
      );
      --avatar-text-size: ${Yt};
      --avatar-text-ratio: ${qt};
    }

    .link {
      text-decoration: none;
      color: ${na};
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      min-width: 100%;
    }

    .square {
      border-radius: calc(${Et} * 1px);
      min-width: 100%;
      overflow: hidden;
    }

    .circle {
      border-radius: 100%;
      min-width: 100%;
      overflow: hidden;
    }

    .backplate {
      position: relative;
      display: flex;
      background-color: ${dr};
    }

    .media,
    ::slotted(img) {
      max-width: 100%;
      position: absolute;
      display: block;
    }

    .content {
      font-size: calc(
        (
            var(--avatar-text-size) +
              var(--avatar-size, var(--avatar-size-default))
          ) / var(--avatar-text-ratio)
      );
      line-height: var(--avatar-size, var(--avatar-size-default));
      display: block;
      min-height: var(--avatar-size, var(--avatar-size-default));
    }

    ::slotted(${e.tagFor(be.Badge)}) {
      position: absolute;
      display: block;
    }
  `.withBehaviors(new qi(Xi(e,t),Ui(e,t)));class Yi extends be.Avatar{}ii([(0,Xa.attr)({attribute:"src"})],Yi.prototype,"imgSrc",void 0);ii([Xa.attr],Yi.prototype,"alt",void 0);const Ji=Xa.html`
  ${(0,Xa.when)((e=>e.imgSrc),Xa.html`
      <img
        src="${e=>e.imgSrc}"
        alt="${e=>e.alt}"
        slot="media"
        class="media"
        part="media"
      />
    `)}
`;const Ki=Yi.compose({baseName:"avatar",baseClass:be.Avatar,template:be.avatarTemplate,styles:Zi,media:Ji,shadowOptions:{delegatesFocus:true}});const Qi=(e,t)=>Xa.css`
  ${(0,be.display)("inline-block")} :host {
    box-sizing: border-box;
    font-family: ${It};
    font-size: ${Kt};
    line-height: ${Qt};
  }

  .control {
    border-radius: calc(${Et} * 1px);
    padding: calc(((${qt} * 0.5) - ${Xt}) * 1px)
      calc((${qt} - ${Xt}) * 1px);
    color: ${na};
    font-weight: 600;
    border: calc(${Xt} * 1px) solid transparent;
    background-color: ${Br};
  }

  .control[style] {
    font-weight: 400;
  }

  :host([circular]) .control {
    border-radius: 100px;
    padding: 0 calc(${qt} * 1px);
    height: calc((${Ja} - (${qt} * 3)) * 1px);
    min-width: calc((${Ja} - (${qt} * 3)) * 1px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
`;const en=be.Badge.compose({baseName:"badge",template:be.badgeTemplate,styles:Qi});const tn=(e,t)=>Xa.css`
  ${(0,be.display)("inline-block")} :host {
    box-sizing: border-box;
    font-family: ${It};
    font-size: ${Yt};
    line-height: ${Jt};
  }

  .list {
    display: flex;
    flex-wrap: wrap;
  }
`;const on=be.Breadcrumb.compose({baseName:"breadcrumb",template:be.breadcrumbTemplate,styles:tn});const rn=(e,t)=>Xa.css`
    ${(0,be.display)("inline-flex")} :host {
        background: transparent;
        box-sizing: border-box;
        font-family: ${It};
        font-size: ${Yt};
        fill: currentColor;
        line-height: ${Jt};
        min-width: calc(${Ja} * 1px);
        outline: none;
        color: ${na}
    }

    .listitem {
        display: flex;
        align-items: center;
        width: max-content;
    }

    .separator {
        margin: 0 6px;
        display: flex;
    }

    .control {
        align-items: center;
        box-sizing: border-box;
        color: ${Vr};
        cursor: pointer;
        display: flex;
        fill: inherit;
        outline: none;
        text-decoration: none;
        white-space: nowrap;
    }

    .control:hover {
        color: ${Tr};
    }

    .control:active {
        color: ${Dr};
    }

    .control .content {
        position: relative;
    }

    .control .content::before {
        content: "";
        display: block;
        height: calc(${Xt} * 1px);
        left: 0;
        position: absolute;
        right: 0;
        top: calc(1em + 4px);
        width: 100%;
    }

    .control:hover .content::before {
        background: ${Tr};
    }

    .control:active .content::before {
        background: ${Dr};
    }

    .control:${be.focusVisible} .content::before {
        background: ${jr};
        height: calc(${Zt} * 1px);
    }

    .control:not([href]) {
        color: ${na};
        cursor: default;
    }

    .control:not([href]) .content::before {
        background: none;
    }

    .start,
    .end {
        display: flex;
    }

    ::slotted(svg) {
        /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */
        width: 16px;
        height: 16px;
    }

    .start {
        margin-inline-end: 6px;
    }

    .end {
        margin-inline-start: 6px;
    }
`.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
      .control:hover .content::before,
                .control:${be.focusVisible} .content::before {
        background: ${Ya.LinkText};
      }
      .start,
      .end {
        fill: ${Ya.ButtonText};
      }
    `));const an=be.BreadcrumbItem.compose({baseName:"breadcrumb-item",template:be.breadcrumbItemTemplate,styles:rn,separator:"/",shadowOptions:{delegatesFocus:true}});const nn=(e,t)=>Xa.css`
    :host([disabled]),
    :host([disabled]:hover),
    :host([disabled]:active) {
      opacity: ${Ut};
      background-color: ${Br};
      cursor: ${be.disabledCursor};
    }

    ${Bi}
  `.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
      :host([disabled]),
      :host([disabled]) .control,
      :host([disabled]:hover),
      :host([disabled]:active) {
        forced-color-adjust: none;
        background-color: ${Ya.ButtonFace};
        outline-color: ${Ya.GrayText};
        color: ${Ya.GrayText};
        cursor: ${be.disabledCursor};
        opacity: 1;
      }
    `),Ii("accent",Xa.css`
        :host([appearance='accent'][disabled]),
        :host([appearance='accent'][disabled]:hover),
        :host([appearance='accent'][disabled]:active) {
          background: ${dr};
        }

        ${Li}
      `.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
          :host([appearance='accent'][disabled]) .control,
          :host([appearance='accent'][disabled]) .control:hover {
            background: ${Ya.ButtonFace};
            border-color: ${Ya.GrayText};
            color: ${Ya.GrayText};
          }
        `))),Ii("error",Xa.css`
        :host([appearance='error'][disabled]),
        :host([appearance='error'][disabled]:hover),
        :host([appearance='error'][disabled]:active) {
          background: ${va};
        }

        ${Oi}
      `.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
          :host([appearance='error'][disabled]) .control,
          :host([appearance='error'][disabled]) .control:hover {
            background: ${Ya.ButtonFace};
            border-color: ${Ya.GrayText};
            color: ${Ya.GrayText};
          }
        `))),Ii("lightweight",Xa.css`
        :host([appearance='lightweight'][disabled]:hover),
        :host([appearance='lightweight'][disabled]:active) {
          background-color: transparent;
          color: ${Vr};
        }

        :host([appearance='lightweight'][disabled]) .content::before,
        :host([appearance='lightweight'][disabled]:hover) .content::before,
        :host([appearance='lightweight'][disabled]:active) .content::before {
          background: transparent;
        }

        ${Hi}
      `.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
          :host([appearance='lightweight'].disabled) .control {
            forced-color-adjust: none;
            color: ${Ya.GrayText};
          }

          :host([appearance='lightweight'].disabled)
            .control:hover
            .content::before {
            background: none;
          }
        `))),Ii("outline",Xa.css`
        :host([appearance='outline'][disabled]),
        :host([appearance='outline'][disabled]:hover),
        :host([appearance='outline'][disabled]:active) {
          background: transparent;
          border-color: ${dr};
        }

        ${Ri}
      `.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
          :host([appearance='outline'][disabled]) .control {
            border-color: ${Ya.GrayText};
          }
        `))),Ii("stealth",Xa.css`
        ${Pi}
      `.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
          :host([appearance='stealth'][disabled]) {
            background: ${Ya.ButtonFace};
          }

          :host([appearance='stealth'][disabled]) .control {
            background: ${Ya.ButtonFace};
            border-color: transparent;
            color: ${Ya.GrayText};
          }
        `))));class ln extends be.Button{constructor(){super(...arguments);this.appearance="neutral"}defaultSlottedContentChanged(e,t){const o=this.defaultSlottedContent.filter((e=>e.nodeType===Node.ELEMENT_NODE));if(o.length===1&&(o[0]instanceof SVGElement||o[0].classList.contains("fa")||o[0].classList.contains("fas"))){this.control.classList.add("icon-only")}else{this.control.classList.remove("icon-only")}}}ii([Xa.attr],ln.prototype,"appearance",void 0);ii([(0,Xa.attr)({attribute:"minimal",mode:"boolean"})],ln.prototype,"minimal",void 0);const sn=ln.compose({baseName:"button",baseClass:be.Button,template:be.buttonTemplate,styles:nn,shadowOptions:{delegatesFocus:true}});const cn="0 0 calc((var(--elevation) * 0.225px) + 2px) rgba(0, 0, 0, calc(.11 * (2 - var(--background-luminance, 1))))";const dn="0 calc(var(--elevation) * 0.4px) calc((var(--elevation) * 0.9px)) rgba(0, 0, 0, calc(.13 * (2 - var(--background-luminance, 1))))";const un=`box-shadow: ${cn}, ${dn};`;const hn=(e,t)=>Xa.css`
    ${(0,be.display)("block")} :host {
      --elevation: 4;
      display: block;
      contain: content;
      height: var(--card-height, 100%);
      width: var(--card-width, 100%);
      box-sizing: border-box;
      background: ${lr};
      border-radius: calc(${Et} * 1px);
      ${un}
    }
  `.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
      :host {
        forced-color-adjust: none;
        background: ${Ya.Canvas};
        box-shadow: 0 0 0 1px ${Ya.CanvasText};
      }
    `));class pn extends be.Card{connectedCallback(){super.connectedCallback();const e=(0,be.composedParent)(this);if(e){lr.setValueFor(this,(t=>Jr.getValueFor(t).evaluate(t,lr.getValueFor(e))))}}}const gn=pn.compose({baseName:"card",baseClass:be.Card,template:be.cardTemplate,styles:hn});const bn=(e,t)=>Xa.css`
    ${(0,be.display)("inline-flex")} :host {
      align-items: center;
      outline: none;
      margin: calc(${qt} * 1px) 0;
      /* Chromium likes to select label text or the default slot when the checkbox is
            clicked. Maybe there is a better solution here? */
      user-select: none;
    }

    .control {
      position: relative;
      width: calc((${Ja} / 2 + ${qt}) * 1px);
      height: calc((${Ja} / 2 + ${qt}) * 1px);
      box-sizing: border-box;
      border-radius: calc(${Et} * 1px);
      border: calc(${Xt} * 1px) solid ${sa};
      background: ${Rr};
      outline: none;
      cursor: pointer;
    }

    :host([aria-invalid='true']) .control {
      border-color: ${va};
    }

    .label {
      font-family: ${It};
      color: ${na};
      /* Need to discuss with Brian how HorizontalSpacingNumber can work.
            https://github.com/microsoft/fast/issues/2766 */
      padding-inline-start: calc(${qt} * 2px + 2px);
      margin-inline-end: calc(${qt} * 2px + 2px);
      cursor: pointer;
      font-size: ${Yt};
      line-height: ${Jt};
    }

    .label__hidden {
      display: none;
      visibility: hidden;
    }

    .checked-indicator {
      width: 100%;
      height: 100%;
      display: block;
      fill: ${fr};
      opacity: 0;
      pointer-events: none;
    }

    .indeterminate-indicator {
      border-radius: calc(${Et} * 1px);
      background: ${fr};
      position: absolute;
      top: 50%;
      left: 50%;
      width: 50%;
      height: 50%;
      transform: translate(-50%, -50%);
      opacity: 0;
    }

    :host(:not([disabled])) .control:hover {
      background: ${Pr};
      border-color: ${ca};
    }

    :host(:not([disabled])) .control:active {
      background: ${Ir};
      border-color: ${da};
    }

    :host([aria-invalid='true']:not([disabled])) .control:hover {
      border-color: ${$a};
    }

    :host([aria-invalid='true']:not([disabled])) .control:active {
      border-color: ${xa};
    }

    :host(:${be.focusVisible}) .control {
      outline: calc(${Zt} * 1px) solid ${pr};
      outline-offset: 2px;
    }

    :host([aria-invalid='true']:${be.focusVisible}) .control {
      outline-color: ${ya};
    }

    :host([aria-checked='true']) .control {
      background: ${dr};
      border: calc(${Xt} * 1px) solid ${dr};
    }

    :host([aria-checked='true']:not([disabled])) .control:hover {
      background: ${ur};
      border: calc(${Xt} * 1px) solid ${ur};
    }

    :host([aria-invalid='true'][aria-checked='true']) .control {
      background-color: ${va};
      border-color: ${va};
    }

    :host([aria-invalid='true'][aria-checked='true']:not([disabled]))
      .control:hover {
      background-color: ${$a};
      border-color: ${$a};
    }

    :host([aria-checked='true']:not([disabled]))
      .control:hover
      .checked-indicator {
      fill: ${mr};
    }

    :host([aria-checked='true']:not([disabled]))
      .control:hover
      .indeterminate-indicator {
      background: ${mr};
    }

    :host([aria-checked='true']:not([disabled])) .control:active {
      background: ${hr};
      border: calc(${Xt} * 1px) solid ${hr};
    }

    :host([aria-invalid='true'][aria-checked='true']:not([disabled]))
      .control:active {
      background-color: ${xa};
      border-color: ${xa};
    }

    :host([aria-checked='true']:not([disabled]))
      .control:active
      .checked-indicator {
      fill: ${vr};
    }

    :host([aria-checked='true']:not([disabled]))
      .control:active
      .indeterminate-indicator {
      background: ${vr};
    }

    :host([aria-checked="true"]:${be.focusVisible}:not([disabled])) .control {
      outline: calc(${Zt} * 1px) solid ${pr};
      outline-offset: 2px;
    }

    :host([aria-invalid='true'][aria-checked="true"]:${be.focusVisible}:not([disabled])) .control {
      outline-color: ${ya};
    }

    :host([disabled]) .label,
    :host([readonly]) .label,
    :host([readonly]) .control,
    :host([disabled]) .control {
      cursor: ${be.disabledCursor};
    }

    :host([aria-checked='true']:not(.indeterminate)) .checked-indicator,
    :host(.indeterminate) .indeterminate-indicator {
      opacity: 1;
    }

    :host([disabled]) {
      opacity: ${Ut};
    }
  `.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
      .control {
        forced-color-adjust: none;
        border-color: ${Ya.FieldText};
        background: ${Ya.Field};
      }
      :host([aria-invalid='true']) .control {
        border-style: dashed;
      }
      .checked-indicator {
        fill: ${Ya.FieldText};
      }
      .indeterminate-indicator {
        background: ${Ya.FieldText};
      }
      :host(:not([disabled])) .control:hover,
      .control:active {
        border-color: ${Ya.Highlight};
        background: ${Ya.Field};
      }
      :host(:${be.focusVisible}) .control {
        outline: calc(${Zt} * 1px) solid ${Ya.FieldText};
        outline-offset: 2px;
      }
      :host([aria-checked="true"]:${be.focusVisible}:not([disabled])) .control {
        outline: calc(${Zt} * 1px) solid ${Ya.FieldText};
        outline-offset: 2px;
      }
      :host([aria-checked='true']) .control {
        background: ${Ya.Highlight};
        border-color: ${Ya.Highlight};
      }
      :host([aria-checked='true']:not([disabled])) .control:hover,
      .control:active {
        border-color: ${Ya.Highlight};
        background: ${Ya.HighlightText};
      }
      :host([aria-checked='true']) .checked-indicator {
        fill: ${Ya.HighlightText};
      }
      :host([aria-checked='true']:not([disabled]))
        .control:hover
        .checked-indicator {
        fill: ${Ya.Highlight};
      }
      :host([aria-checked='true']) .indeterminate-indicator {
        background: ${Ya.HighlightText};
      }
      :host([aria-checked='true']) .control:hover .indeterminate-indicator {
        background: ${Ya.Highlight};
      }
      :host([disabled]) {
        opacity: 1;
      }
      :host([disabled]) .control {
        forced-color-adjust: none;
        border-color: ${Ya.GrayText};
        background: ${Ya.Field};
      }
      :host([disabled]) .indeterminate-indicator,
      :host([aria-checked='true'][disabled])
        .control:hover
        .indeterminate-indicator {
        forced-color-adjust: none;
        background: ${Ya.GrayText};
      }
      :host([disabled]) .checked-indicator,
      :host([aria-checked='true'][disabled]) .control:hover .checked-indicator {
        forced-color-adjust: none;
        fill: ${Ya.GrayText};
      }
    `));const fn=(e,t)=>Xa.html`
  <template
    role="checkbox"
    aria-checked="${e=>e.checked}"
    aria-required="${e=>e.required}"
    aria-disabled="${e=>e.disabled}"
    aria-readonly="${e=>e.readOnly}"
    tabindex="${e=>e.disabled?null:0}"
    @keypress="${(e,t)=>e.keypressHandler(t.event)}"
    @click="${(e,t)=>e.clickHandler(t.event)}"
  >
    <div part="control" class="control">
      <slot name="checked-indicator">
        ${t.checkedIndicator||""}
      </slot>
      <slot name="indeterminate-indicator">
        ${t.indeterminateIndicator||""}
      </slot>
    </div>
    <label
      part="label"
      class="${e=>e.defaultSlottedNodes&&e.defaultSlottedNodes.length?"label":"label label__hidden"}"
    >
      <slot ${(0,Xa.slotted)("defaultSlottedNodes")}></slot>
    </label>
  </template>
`;class mn extends be.Checkbox{indeterminateChanged(e,t){if(this.indeterminate){this.classList.add("indeterminate")}else{this.classList.remove("indeterminate")}}}const vn=mn.compose({baseName:"checkbox",baseClass:be.Checkbox,template:fn,styles:bn,checkedIndicator:`\n        <svg\n            part="checked-indicator"\n            class="checked-indicator"\n            viewBox="0 0 20 20"\n            xmlns="http://www.w3.org/2000/svg"\n        >\n            <path\n                fill-rule="evenodd"\n                clip-rule="evenodd"\n                d="M8.143 12.6697L15.235 4.5L16.8 5.90363L8.23812 15.7667L3.80005 11.2556L5.27591 9.7555L8.143 12.6697Z"\n            />\n        </svg>\n    `,indeterminateIndicator:`\n        <div part="indeterminate-indicator" class="indeterminate-indicator"></div>\n    `});const $n=(e,t)=>{const o=e.tagFor(be.ListboxOption);const r=e.name===e.tagFor(be.ListboxElement)?"":".listbox";return Xa.css`
        ${!r?(0,be.display)("inline-flex"):""}

        :host ${r} {
            background: ${lr};
            border: calc(${Xt} * 1px) solid ${sa};
            border-radius: calc(${Et} * 1px);
            box-sizing: border-box;
            flex-direction: column;
            padding: calc(${qt} * 1px) 0;
        }

        ${!r?Xa.css`
:host(:${be.focusVisible}:not([disabled])) {
                outline: none;
            }

            :host(:focus-within:not([disabled])) {
                border-color: ${ea};
                box-shadow: 0 0 0
                    calc((${Zt} - ${Xt}) * 1px)
                    ${ea} inset;
            }

            :host([disabled]) ::slotted(*) {
                cursor: ${be.disabledCursor};
                opacity: ${Ut};
                pointer-events: none;
            }
        `:""}

        ${r||":host([size])"} {
            max-height: calc(
                (var(--size) * ${Ja} + (${qt} * ${Xt} * 2)) * 1px
            );
            overflow-y: auto;
        }

        :host([size="0"]) ${r} {
            max-height: none;
        }
    `.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
                :host(:not([multiple]):${be.focusVisible}) ::slotted(${o}[aria-selected="true"]),
                :host([multiple]:${be.focusVisible}) ::slotted(${o}[aria-checked="true"]) {
                    border-color: ${Ya.ButtonText};
                    box-shadow: 0 0 0 calc(${Zt} * 1px) inset ${Ya.HighlightText};
                }

                :host(:not([multiple]):${be.focusVisible}) ::slotted(${o}[aria-selected="true"]) {
                    background: ${Ya.Highlight};
                    color: ${Ya.HighlightText};
                    fill: currentcolor;
                }

                ::slotted(${o}[aria-selected="true"]:not([aria-checked="true"])) {
                    background: ${Ya.Highlight};
                    border-color: ${Ya.HighlightText};
                    color: ${Ya.HighlightText};
                }
            `))};const xn=(e,t)=>{const o=e.name===e.tagFor(be.Select);return Xa.css`
  ${(0,be.display)("inline-flex")}
  
  :host {
    --elevation: 14;
    background: ${Rr};
    border-radius: calc(${Et} * 1px);
    border: calc(${Xt} * 1px) solid ${Ur};
    box-sizing: border-box;
    color: ${na};
    font-family: ${It};
    height: calc(${Ja} * 1px);
    position: relative;
    user-select: none;
    min-width: 250px;
    outline: none;
    vertical-align: top;
  }

  :host([aria-invalid='true']) {
    border-color: ${va};
  }
  
  :host(:not([autowidth])) {
    min-width: 250px;
  }
  
  ${o?Xa.css`
  :host(:not([aria-haspopup])) {
    --elevation: 0;
    border: 0;
    height: auto;
    min-width: 0;
  }
  `:""}
  
  ${$n(e,t)}
  
  :host .listbox {
    ${un}
    border: none;
    display: flex;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 1;
  }
  
  .control + .listbox {
    --stroke-size: calc(${qt} * ${Xt} * 2);
    max-height: calc(
      (var(--listbox-max-height) * ${Ja} + var(--stroke-size)) * 1px
      );
  }
  
  ${o?Xa.css`
  :host(:not([aria-haspopup])) .listbox {
    left: auto;
    position: static;
    z-index: auto;
  }
  `:""}
  
  :host(:not([autowidth])) .listbox {
    width: 100%;
  }
  
  :host([autowidth]) ::slotted([role='option']),
  :host([autowidth]) ::slotted(option) {
    padding: 0 calc(1em + ${qt} * 1.25px + 1px);
  }
  
  .listbox[hidden] {
    display: none;
  }
  
  .control {
    align-items: center;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    font-size: ${Yt};
    font-family: inherit;
    line-height: ${Jt};
    min-height: 100%;
    padding: 0 calc(${qt} * 2.25px);
    width: 100%;
  }
  
  :host([minimal]) {
    --density: -4;
  }
  
  :host(:not([disabled]):hover) {
    background: ${Pr};
    border-color: ${Xr};
  }
  
  :host([aria-invalid='true']:not([disabled]):hover) {
    border-color: ${$a};
  }
  
  :host(:${be.focusVisible}) {
    border-color: ${pr};
    box-shadow: 0 0 0 calc((${Zt} - ${Xt}) * 1px)
    ${pr};
  }
  
  :host([aria-invalid='true']:${be.focusVisible}) {
    border-color: ${ya};
    box-shadow: 0 0 0 calc((${Zt} - ${Xt}) * 1px)
    ${ya};
  }
  
  :host(:not([size]):not([multiple]):not([open]):${be.focusVisible}),
  :host([multiple]:${be.focusVisible}),
  :host([size]:${be.focusVisible}) {
    box-shadow: 0 0 0 calc((${Zt} - ${Xt}) * 1px)
    ${pr};
  }
  
  :host([aria-invalid='true']:not([size]):not([multiple]):not([open]):${be.focusVisible}),
  :host([aria-invalid='true'][multiple]:${be.focusVisible}),
  :host([aria-invalid='true'][size]:${be.focusVisible}) {
    box-shadow: 0 0 0 calc((${Zt} - ${Xt}) * 1px)
    ${ya};
  }
  
  :host(:not([multiple]):not([size]):${be.focusVisible}) ::slotted(${e.tagFor(be.ListboxOption)}[aria-selected="true"]:not([disabled])) {
    box-shadow: 0 0 0 calc(${Zt} * 1px) inset ${pr};
    border-color: ${pr};
    background: ${pr};
    color: ${$r};
  }
    
  :host([disabled]) {
    cursor: ${be.disabledCursor};
    opacity: ${Ut};
  }
  
  :host([disabled]) .control {
    cursor: ${be.disabledCursor};
    user-select: none;
  }
  
  :host([disabled]:hover) {
    background: ${Gr};
    color: ${na};
    fill: currentcolor;
  }
  
  :host(:not([disabled])) .control:active {
    background: ${Ir};
    border-color: ${hr};
    border-radius: calc(${Et} * 1px);
  }
  
  :host([open][position="above"]) .listbox {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0;
    bottom: calc(${Ja} * 1px);
  }
  
  :host([open][position="below"]) .listbox {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-top: 0;
    top: calc(${Ja} * 1px);
  }
  
  .selected-value {
    flex: 1 1 auto;
    font-family: inherit;
    overflow: hidden;
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  .indicator {
    flex: 0 0 auto;
    margin-inline-start: 1em;
  }
  
  slot[name="listbox"] {
    display: none;
    width: 100%;
  }
  
  :host([open]) slot[name="listbox"] {
    display: flex;
    position: absolute;
    ${un}
  }
  
  .end {
    margin-inline-start: auto;
  }
  
  .start,
  .end,
  .indicator,
  .select-indicator,
  ::slotted(svg) {
    /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */
    fill: currentcolor;
    height: 1em;
    min-height: calc(${qt} * 4px);
    min-width: calc(${qt} * 4px);
    width: 1em;
  }
  
  ::slotted([role="option"]),
  ::slotted(option) {
    flex: 0 0 auto;
  }
  `.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
      :host(:not([disabled]):hover),
      :host(:not([disabled]):active) {
        border-color: ${Ya.Highlight};
      }

      :host([aria-invalid='true']) {
        border-style: dashed;
      }
      
      :host(:not([disabled]):${be.focusVisible}) {
        background-color: ${Ya.ButtonFace};
        box-shadow: 0 0 0 calc(${Zt} * 1px) ${Ya.Highlight};
        color: ${Ya.ButtonText};
        fill: currentcolor;
        forced-color-adjust: none;
      }
      
      :host(:not([disabled]):${be.focusVisible}) .listbox {
        background: ${Ya.ButtonFace};
      }
      
      :host([disabled]) {
        border-color: ${Ya.GrayText};
        background-color: ${Ya.ButtonFace};
        color: ${Ya.GrayText};
        fill: currentcolor;
        opacity: 1;
        forced-color-adjust: none;
      }
      
      :host([disabled]:hover) {
        background: ${Ya.ButtonFace};
      }
      
      :host([disabled]) .control {
        color: ${Ya.GrayText};
        border-color: ${Ya.GrayText};
      }
      
      :host([disabled]) .control .select-indicator {
        fill: ${Ya.GrayText};
      }
      
      :host(:${be.focusVisible}) ::slotted([aria-selected="true"][role="option"]),
      :host(:${be.focusVisible}) ::slotted(option[aria-selected="true"]),
      :host(:${be.focusVisible}) ::slotted([aria-selected="true"][role="option"]:not([disabled])) {
        background: ${Ya.Highlight};
        border-color: ${Ya.ButtonText};
        box-shadow: 0 0 0 calc((${Zt} - ${Xt}) * 1px)
        ${Ya.HighlightText};
        color: ${Ya.HighlightText};
        fill: currentcolor;
      }
      
      .start,
      .end,
      .indicator,
      .select-indicator,
      ::slotted(svg) {
        color: ${Ya.ButtonText};
        fill: currentcolor;
      }
      `))};const yn=(e,t)=>Xa.css`
  ${xn(e,t)}

  :host(:empty) .listbox {
    display: none;
  }

  :host([disabled]) *,
  :host([disabled]) {
    cursor: ${be.disabledCursor};
    user-select: none;
  }

  :host(:focus-within:not([disabled])) {
    border-color: ${pr};
    box-shadow: 0 0 0 calc((${Zt} - ${Xt}) * 1px)
      ${pr};
  }

  :host([aria-invalid='true']:focus-within:not([disabled])) {
    border-color: ${ya};
    box-shadow: 0 0 0 calc((${Zt} - ${Xt}) * 1px)
      ${ya};
  }

  .selected-value {
    -webkit-appearance: none;
    background: transparent;
    border: none;
    color: inherit;
    font-size: ${Yt};
    line-height: ${Jt};
    height: calc(100% - (${Xt} * 1px));
    margin: auto 0;
    width: 100%;
  }

  .selected-value:hover,
    .selected-value:${be.focusVisible},
    .selected-value:disabled,
    .selected-value:active {
    outline: none;
  }
`;class wn extends be.Combobox{connectedCallback(){super.connectedCallback();this.setAutoWidth()}slottedOptionsChanged(e,t){super.slottedOptionsChanged(e,t);this.setAutoWidth()}autoWidthChanged(e,t){if(t){this.setAutoWidth()}else{this.style.removeProperty("width")}}setAutoWidth(){if(!this.autoWidth||!this.isConnected){return}let e=this.listbox.getBoundingClientRect().width;if(e===0&&this.listbox.hidden){Object.assign(this.listbox.style,{visibility:"hidden"});this.listbox.removeAttribute("hidden");e=this.listbox.getBoundingClientRect().width;this.listbox.setAttribute("hidden","");this.listbox.style.removeProperty("visibility")}if(e>0){Object.assign(this.style,{width:`${e}px`})}}maxHeightChanged(e,t){this.updateComputedStylesheet()}updateComputedStylesheet(){if(this.computedStylesheet){this.$fastController.removeStyles(this.computedStylesheet)}const e=Math.floor(this.maxHeight/ga.getValueFor(this)).toString();this.computedStylesheet=Xa.css`
      :host {
        --listbox-max-height: ${e};
      }
    `;this.$fastController.addStyles(this.computedStylesheet)}}ii([(0,Xa.attr)({attribute:"autowidth",mode:"boolean"})],wn.prototype,"autoWidth",void 0);ii([(0,Xa.attr)({attribute:"minimal",mode:"boolean"})],wn.prototype,"minimal",void 0);const kn=wn.compose({baseName:"combobox",baseClass:be.Combobox,template:be.comboboxTemplate,styles:yn,shadowOptions:{delegatesFocus:true},indicator:`\n        <svg\n            class="select-indicator"\n            part="select-indicator"\n            viewBox="0 0 12 7"\n            xmlns="http://www.w3.org/2000/svg"\n        >\n            <path\n                d="M11.85.65c.2.2.2.5 0 .7L6.4 6.84a.55.55 0 01-.78 0L.14 1.35a.5.5 0 11.71-.7L6 5.8 11.15.65c.2-.2.5-.2.7 0z"\n            />\n        </svg>\n    `});const Fn=(e,t)=>Xa.css`
  :host {
    display: flex;
    position: relative;
    flex-direction: column;
  }
`;const Cn=(e,t)=>Xa.css`
  :host {
    display: grid;
    padding: 1px 0;
    box-sizing: border-box;
    width: 100%;
    border-bottom: calc(${Xt} * 1px) solid ${pa};
  }

  :host(.header) {
  }

  :host(.sticky-header) {
    background: ${Br};
    position: sticky;
    top: 0;
  }
`;const Sn=(e,t)=>Xa.css`
    :host {
      padding: calc(${qt} * 1px) calc(${qt} * 3px);
      color: ${na};
      box-sizing: border-box;
      font-family: ${It};
      font-size: ${Yt};
      line-height: ${Jt};
      font-weight: 400;
      border: transparent calc(${Zt} * 1px) solid;
      overflow: hidden;
      white-space: nowrap;
      border-radius: calc(${Et} * 1px);
    }

    :host(.column-header) {
      font-weight: 600;
    }

    :host(:${be.focusVisible}) {
      outline: calc(${Zt} * 1px) solid ${pr};
      color: ${na};
    }
  `.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
      :host {
        forced-color-adjust: none;
        border-color: transparent;
        background: ${Ya.Field};
        color: ${Ya.FieldText};
      }

      :host(:${be.focusVisible}) {
        border-color: ${Ya.FieldText};
        box-shadow: 0 0 0 2px inset ${Ya.Field};
        color: ${Ya.FieldText};
      }
    `));const Vn=be.DataGridCell.compose({baseName:"data-grid-cell",template:be.dataGridCellTemplate,styles:Sn});const Tn=be.DataGridRow.compose({baseName:"data-grid-row",template:be.dataGridRowTemplate,styles:Cn});const Dn=be.DataGrid.compose({baseName:"data-grid",template:be.dataGridTemplate,styles:Fn});var jn=o(87774);class zn extends be.FoundationElement{}class Bn extends((0,be.FormAssociated)(zn)){constructor(){super(...arguments);this.proxy=document.createElement("input")}}const Ln={toView(e){if(e===null||e===undefined){return null}const t=new Date(e);return t.toString()==="Invalid Date"?null:`${t.getFullYear().toString().padStart(4,"0")}-${(t.getMonth()+1).toString().padStart(2,"0")}-${t.getDate().toString().padStart(2,"0")}`},fromView(e){if(e===null||e===undefined){return null}const t=new Date(e);return t.toString()==="Invalid Date"?null:t}};const On="Invalid Date";class Nn extends Bn{constructor(){super(...arguments);this.step=1;this.isUserInput=false}readOnlyChanged(){if(this.proxy instanceof HTMLInputElement){this.proxy.readOnly=this.readOnly;this.validate()}}autofocusChanged(){if(this.proxy instanceof HTMLInputElement){this.proxy.autofocus=this.autofocus;this.validate()}}listChanged(){if(this.proxy instanceof HTMLInputElement){this.proxy.setAttribute("list",this.list);this.validate()}}maxChanged(e,t){var o;this.max=t<((o=this.min)!==null&&o!==void 0?o:t)?this.min:t;this.value=this.getValidValue(this.value)}minChanged(e,t){var o;this.min=t>((o=this.max)!==null&&o!==void 0?o:t)?this.max:t;this.value=this.getValidValue(this.value)}get valueAsNumber(){return new Date(super.value).valueOf()}set valueAsNumber(e){this.value=new Date(e).toString()}get valueAsDate(){return new Date(super.value)}set valueAsDate(e){this.value=e.toString()}valueChanged(e,t){this.value=this.getValidValue(t);if(t!==this.value){return}if(this.control&&!this.isUserInput){this.control.value=this.value}super.valueChanged(e,this.value);if(e!==undefined&&!this.isUserInput){this.$emit("change")}this.isUserInput=false}getValidValue(e){var t,o;let r=new Date(e);if(r.toString()===On){r=""}else{r=r>((t=this.max)!==null&&t!==void 0?t:r)?this.max:r;r=r<((o=this.min)!==null&&o!==void 0?o:r)?this.min:r;r=`${r.getFullYear().toString().padStart(4,"0")}-${(r.getMonth()+1).toString().padStart(2,"0")}-${r.getDate().toString().padStart(2,"0")}`}return r}stepUp(){const e=864e5*this.step;const t=new Date(this.value);this.value=new Date(t.toString()!==On?t.valueOf()+e:0).toString()}stepDown(){const e=864e5*this.step;const t=new Date(this.value);this.value=new Date(t.toString()!==On?Math.max(t.valueOf()-e,0):0).toString()}connectedCallback(){super.connectedCallback();this.validate();this.control.value=this.value;if(this.autofocus){Xa.DOM.queueUpdate((()=>{this.focus()}))}if(!this.appearance){this.appearance="outline"}}handleTextInput(){this.isUserInput=true;this.value=this.control.value}handleChange(){this.$emit("change")}handleKeyDown(e){const t=e.key;switch(t){case jn.SB:this.stepUp();return false;case jn.iF:this.stepDown();return false}return true}handleBlur(){this.control.value=this.value}}ii([Xa.attr],Nn.prototype,"appearance",void 0);ii([(0,Xa.attr)({attribute:"readonly",mode:"boolean"})],Nn.prototype,"readOnly",void 0);ii([(0,Xa.attr)({mode:"boolean"})],Nn.prototype,"autofocus",void 0);ii([Xa.attr],Nn.prototype,"list",void 0);ii([(0,Xa.attr)({converter:Xa.nullableNumberConverter})],Nn.prototype,"step",void 0);ii([(0,Xa.attr)({converter:Ln})],Nn.prototype,"max",void 0);ii([(0,Xa.attr)({converter:Ln})],Nn.prototype,"min",void 0);ii([Xa.observable],Nn.prototype,"defaultSlottedNodes",void 0);(0,be.applyMixins)(Nn,be.StartEnd,be.DelegatesARIATextbox);const Hn=Xa.css`
  ${(0,be.display)("inline-block")} :host {
    font-family: ${It};
    outline: none;
    user-select: none;
  }

  .root {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: row;
    color: ${na};
    background: ${Rr};
    border-radius: calc(${Et} * 1px);
    border: calc(${Xt} * 1px) solid ${Ur};
    height: calc(${Ja} * 1px);
  }

  :host([aria-invalid='true']) .root {
    border-color: ${va};
  }

  .control {
    -webkit-appearance: none;
    font: inherit;
    background: transparent;
    border: 0;
    color: inherit;
    height: calc(100% - 4px);
    width: 100%;
    margin-top: auto;
    margin-bottom: auto;
    border: none;
    padding: 0 calc(${qt} * 2px + 1px);
    font-size: ${Yt};
    line-height: ${Jt};
  }

  .control:hover,
  .control:${be.focusVisible},
  .control:disabled,
  .control:active {
    outline: none;
  }

  .label {
    display: block;
    color: ${na};
    cursor: pointer;
    font-size: ${Yt};
    line-height: ${Jt};
    margin-bottom: 4px;
  }

  .label__hidden {
    display: none;
    visibility: hidden;
  }

  .start,
  .end {
    margin: auto;
    fill: currentcolor;
  }

  ::slotted(svg) {
    /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */
    width: 16px;
    height: 16px;
  }

  .start {
    margin-inline-start: 11px;
  }

  .end {
    margin-inline-end: 11px;
  }

  :host(:hover:not([disabled])) .root {
    background: ${Pr};
    border-color: ${Xr};
  }

  :host([aria-invalid='true']:hover:not([disabled])) .root {
    border-color: ${$a};
  }

  :host(:active:not([disabled])) .root {
    background: ${Pr};
    border-color: ${Zr};
  }

  :host([aria-invalid='true']:active:not([disabled])) .root {
    border-color: ${xa};
  }

  :host(:focus-within:not([disabled])) .root {
    border-color: ${pr};
    box-shadow: 0 0 0 calc((${Zt} - ${Xt}) * 1px)
      ${pr};
  }

  :host([aria-invalid='true']:focus-within:not([disabled])) .root {
    border-color: ${ya};
    box-shadow: 0 0 0 calc((${Zt} - ${Xt}) * 1px)
      ${ya};
  }

  :host([appearance='filled']) .root {
    background: ${Br};
  }

  :host([appearance='filled']:hover:not([disabled])) .root {
    background: ${Lr};
  }

  :host([disabled]) .label,
  :host([readonly]) .label,
  :host([readonly]) .control,
  :host([disabled]) .control {
    cursor: ${be.disabledCursor};
  }

  :host([disabled]) {
    opacity: ${Ut};
  }

  :host([disabled]) .control {
    border-color: ${sa};
  }
`.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
    .root,
    :host([appearance='filled']) .root {
      forced-color-adjust: none;
      background: ${Ya.Field};
      border-color: ${Ya.FieldText};
    }
    :host([aria-invalid='true']) .root {
      border-style: dashed;
    }
    :host(:hover:not([disabled])) .root,
    :host([appearance='filled']:hover:not([disabled])) .root,
    :host([appearance='filled']:hover) .root {
      background: ${Ya.Field};
      border-color: ${Ya.Highlight};
    }
    .start,
    .end {
      fill: currentcolor;
    }
    :host([disabled]) {
      opacity: 1;
    }
    :host([disabled]) .root,
    :host([appearance='filled']:hover[disabled]) .root {
      border-color: ${Ya.GrayText};
      background: ${Ya.Field};
    }
    :host(:focus-within:enabled) .root {
      border-color: ${Ya.Highlight};
      box-shadow: 0 0 0 calc((${Zt} - ${Xt}) * 1px)
        ${Ya.Highlight};
    }
    input::placeholder {
      color: ${Ya.GrayText};
    }
  `));const Rn=(e,t)=>Xa.css`
  ${Hn}
`;const Pn=(e,t)=>Xa.html`
  <template class="${e=>e.readOnly?"readonly":""}">
    <label
      part="label"
      for="control"
      class="${e=>e.defaultSlottedNodes&&e.defaultSlottedNodes.length?"label":"label label__hidden"}"
    >
      <slot
        ${(0,Xa.slotted)({property:"defaultSlottedNodes",filter:be.whitespaceFilter})}
      ></slot>
    </label>
    <div class="root" part="root">
      ${(0,be.startSlotTemplate)(e,t)}
      <input
        class="control"
        part="control"
        id="control"
        @input="${e=>e.handleTextInput()}"
        @change="${e=>e.handleChange()}"
        ?autofocus="${e=>e.autofocus}"
        ?disabled="${e=>e.disabled}"
        list="${e=>e.list}"
        ?readonly="${e=>e.readOnly}"
        ?required="${e=>e.required}"
        :value="${e=>e.value}"
        type="date"
        aria-atomic="${e=>e.ariaAtomic}"
        aria-busy="${e=>e.ariaBusy}"
        aria-controls="${e=>e.ariaControls}"
        aria-current="${e=>e.ariaCurrent}"
        aria-describedby="${e=>e.ariaDescribedby}"
        aria-details="${e=>e.ariaDetails}"
        aria-disabled="${e=>e.ariaDisabled}"
        aria-errormessage="${e=>e.ariaErrormessage}"
        aria-flowto="${e=>e.ariaFlowto}"
        aria-haspopup="${e=>e.ariaHaspopup}"
        aria-hidden="${e=>e.ariaHidden}"
        aria-invalid="${e=>e.ariaInvalid}"
        aria-keyshortcuts="${e=>e.ariaKeyshortcuts}"
        aria-label="${e=>e.ariaLabel}"
        aria-labelledby="${e=>e.ariaLabelledby}"
        aria-live="${e=>e.ariaLive}"
        aria-owns="${e=>e.ariaOwns}"
        aria-relevant="${e=>e.ariaRelevant}"
        aria-roledescription="${e=>e.ariaRoledescription}"
        ${(0,Xa.ref)("control")}
      />
      ${(0,be.endSlotTemplate)(e,t)}
    </div>
  </template>
`;const In=Nn.compose({baseName:"date-field",styles:Rn,template:Pn,shadowOptions:{delegatesFocus:true}});const An={toView(e){if(e===null||e===undefined){return null}return e===null||e===void 0?void 0:e.toColorString()},fromView(e){if(e===null||e===undefined){return null}const t=S(e);return t?se.create(t.r,t.g,t.b):null}};const Mn=Xa.css`
  :host {
    background-color: ${lr};
    color: ${na};
  }
`.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
    :host {
      background-color: ${Ya.ButtonFace};
      box-shadow: 0 0 0 1px ${Ya.CanvasText};
      color: ${Ya.ButtonText};
    }
  `));function Gn(e){return(t,o)=>{t[o+"Changed"]=function(t,o){if(o!==undefined&&o!==null){e.setValueFor(this,o)}else{e.deleteValueFor(this)}}}}class En extends be.FoundationElement{constructor(){super();this.noPaint=false;const e={handleChange:this.noPaintChanged.bind(this)};Xa.Observable.getNotifier(this).subscribe(e,"fillColor");Xa.Observable.getNotifier(this).subscribe(e,"baseLayerLuminance")}noPaintChanged(){if(!this.noPaint&&(this.fillColor!==void 0||this.baseLayerLuminance)){this.$fastController.addStyles(Mn)}else{this.$fastController.removeStyles(Mn)}}}ii([(0,Xa.attr)({attribute:"no-paint",mode:"boolean"})],En.prototype,"noPaint",void 0);ii([(0,Xa.attr)({attribute:"fill-color",converter:An}),Gn(lr)],En.prototype,"fillColor",void 0);ii([(0,Xa.attr)({attribute:"accent-color",converter:An,mode:"fromView"}),Gn(Uo)],En.prototype,"accentColor",void 0);ii([(0,Xa.attr)({attribute:"neutral-color",converter:An,mode:"fromView"}),Gn(qo)],En.prototype,"neutralColor",void 0);ii([(0,Xa.attr)({attribute:"error-color",converter:An,mode:"fromView"}),Gn(ba)],En.prototype,"errorColor",void 0);ii([(0,Xa.attr)({converter:Xa.nullableNumberConverter}),Gn(_t)],En.prototype,"density",void 0);ii([(0,Xa.attr)({attribute:"design-unit",converter:Xa.nullableNumberConverter}),Gn(qt)],En.prototype,"designUnit",void 0);ii([(0,Xa.attr)({attribute:"direction"}),Gn(Wt)],En.prototype,"direction",void 0);ii([(0,Xa.attr)({attribute:"base-height-multiplier",converter:Xa.nullableNumberConverter}),Gn(At)],En.prototype,"baseHeightMultiplier",void 0);ii([(0,Xa.attr)({attribute:"base-horizontal-spacing-multiplier",converter:Xa.nullableNumberConverter}),Gn(Mt)],En.prototype,"baseHorizontalSpacingMultiplier",void 0);ii([(0,Xa.attr)({attribute:"control-corner-radius",converter:Xa.nullableNumberConverter}),Gn(Et)],En.prototype,"controlCornerRadius",void 0);ii([(0,Xa.attr)({attribute:"stroke-width",converter:Xa.nullableNumberConverter}),Gn(Xt)],En.prototype,"strokeWidth",void 0);ii([(0,Xa.attr)({attribute:"focus-stroke-width",converter:Xa.nullableNumberConverter}),Gn(Zt)],En.prototype,"focusStrokeWidth",void 0);ii([(0,Xa.attr)({attribute:"disabled-opacity",converter:Xa.nullableNumberConverter}),Gn(Ut)],En.prototype,"disabledOpacity",void 0);ii([(0,Xa.attr)({attribute:"type-ramp-minus-2-font-size"}),Gn(eo)],En.prototype,"typeRampMinus2FontSize",void 0);ii([(0,Xa.attr)({attribute:"type-ramp-minus-2-line-height"}),Gn(to)],En.prototype,"typeRampMinus2LineHeight",void 0);ii([(0,Xa.attr)({attribute:"type-ramp-minus-1-font-size"}),Gn(Kt)],En.prototype,"typeRampMinus1FontSize",void 0);ii([(0,Xa.attr)({attribute:"type-ramp-minus-1-line-height"}),Gn(Qt)],En.prototype,"typeRampMinus1LineHeight",void 0);ii([(0,Xa.attr)({attribute:"type-ramp-base-font-size"}),Gn(Yt)],En.prototype,"typeRampBaseFontSize",void 0);ii([(0,Xa.attr)({attribute:"type-ramp-base-line-height"}),Gn(Jt)],En.prototype,"typeRampBaseLineHeight",void 0);ii([(0,Xa.attr)({attribute:"type-ramp-plus-1-font-size"}),Gn(oo)],En.prototype,"typeRampPlus1FontSize",void 0);ii([(0,Xa.attr)({attribute:"type-ramp-plus-1-line-height"}),Gn(ro)],En.prototype,"typeRampPlus1LineHeight",void 0);ii([(0,Xa.attr)({attribute:"type-ramp-plus-2-font-size"}),Gn(ao)],En.prototype,"typeRampPlus2FontSize",void 0);ii([(0,Xa.attr)({attribute:"type-ramp-plus-2-line-height"}),Gn(io)],En.prototype,"typeRampPlus2LineHeight",void 0);ii([(0,Xa.attr)({attribute:"type-ramp-plus-3-font-size"}),Gn(no)],En.prototype,"typeRampPlus3FontSize",void 0);ii([(0,Xa.attr)({attribute:"type-ramp-plus-3-line-height"}),Gn(lo)],En.prototype,"typeRampPlus3LineHeight",void 0);ii([(0,Xa.attr)({attribute:"type-ramp-plus-4-font-size"}),Gn(so)],En.prototype,"typeRampPlus4FontSize",void 0);ii([(0,Xa.attr)({attribute:"type-ramp-plus-4-line-height"}),Gn(co)],En.prototype,"typeRampPlus4LineHeight",void 0);ii([(0,Xa.attr)({attribute:"type-ramp-plus-5-font-size"}),Gn(uo)],En.prototype,"typeRampPlus5FontSize",void 0);ii([(0,Xa.attr)({attribute:"type-ramp-plus-5-line-height"}),Gn(ho)],En.prototype,"typeRampPlus5LineHeight",void 0);ii([(0,Xa.attr)({attribute:"type-ramp-plus-6-f
  ${(0,be.display)("block")}
`;const Wn=En.compose({baseName:"design-system-provider",template:_n,styles:qn});const Un=(e,t)=>Xa.css`
  :host([hidden]) {
    display: none;
  }

  :host {
    --elevation: 14;
    --dialog-height: 480px;
    --dialog-width: 640px;
    display: block;
  }

  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    touch-action: none;
  }

  .positioning-region {
    display: flex;
    justify-content: center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: auto;
  }

  .control {
    ${un}
    margin-top: auto;
    margin-bottom: auto;
    width: var(--dialog-width);
    height: var(--dialog-height);
    background-color: ${lr};
    z-index: 1;
    border-radius: calc(${Et} * 1px);
    border: calc(${Xt} * 1px) solid transparent;
  }
`;const Xn=be.Dialog.compose({baseName:"dialog",template:be.dialogTemplate,styles:Un});const Zn=(e,t)=>Xa.css`
  .disclosure {
    transition: height 0.35s;
  }

  .disclosure .invoker::-webkit-details-marker {
    display: none;
  }

  .disclosure .invoker {
    list-style-type: none;
  }

  :host([appearance='accent']) .invoker {
    background: ${dr};
    color: ${fr};
    font-family: ${It};
    font-size: ${Yt};
    border-radius: calc(${Et} * 1px);
    outline: none;
    cursor: pointer;
    margin: 16px 0;
    padding: 12px;
    max-width: max-content;
  }

  :host([appearance='accent']) .invoker:active {
    background: ${hr};
    color: ${vr};
  }

  :host([appearance='accent']) .invoker:hover {
    background: ${ur};
    color: ${mr};
  }

  :host([appearance='lightweight']) .invoker {
    background: transparent;
    color: ${Vr};
    border-bottom: calc(${Xt} * 1px) solid ${Vr};
    cursor: pointer;
    width: max-content;
    margin: 16px 0;
  }

  :host([appearance='lightweight']) .invoker:active {
    border-bottom-color: ${Dr};
  }

  :host([appearance='lightweight']) .invoker:hover {
    border-bottom-color: ${Tr};
  }

  .disclosure[open] .invoker ~ * {
    animation: fadeIn 0.5s ease-in-out;
  }

  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
`;class Yn extends be.Disclosure{constructor(){super(...arguments);this.height=0;this.totalHeight=0}connectedCallback(){super.connectedCallback();if(!this.appearance){this.appearance="accent"}}appearanceChanged(e,t){if(e!==t){this.classList.add(t);this.classList.remove(e)}}onToggle(){super.onToggle();this.details.style.setProperty("height",`${this.disclosureHeight}px`)}setup(){super.setup();const e=()=>this.details.getBoundingClientRect().height;this.show();this.totalHeight=e();this.hide();this.height=e();if(this.expanded){this.show()}}get disclosureHeight(){return this.expanded?this.totalHeight:this.height}}ii([Xa.attr],Yn.prototype,"appearance",void 0);const Jn=Yn.compose({baseName:"disclosure",baseClass:be.Disclosure,template:be.disclosureTemplate,styles:Zn});const Kn=(e,t)=>Xa.css`
  ${(0,be.display)("block")} :host {
    box-sizing: content-box;
    height: 0;
    margin: calc(${qt} * 1px) 0;
    border-top: calc(${Xt} * 1px) solid ${pa};
    border-left: none;
  }

  :host([orientation='vertical']) {
    height: 100%;
    margin: 0 calc(${qt} * 1px);
    border-top: none;
    border-left: calc(${Xt} * 1px) solid ${pa};
  }
`;const Qn=be.Divider.compose({baseName:"divider",template:be.dividerTemplate,styles:Kn});class el extends be.ListboxElement{sizeChanged(e,t){super.sizeChanged(e,t);this.updateComputedStylesheet()}updateComputedStylesheet(){if(this.computedStylesheet){this.$fastController.removeStyles(this.computedStylesheet)}const e=`${this.size}`;this.computedStylesheet=Xa.css`
      :host {
        --size: ${e};
      }
    `;this.$fastController.addStyles(this.computedStylesheet)}}const tl=el.compose({baseName:"listbox",baseClass:be.ListboxElement,template:be.listboxTemplate,styles:$n});const ol=(e,t)=>Xa.css`
    ${(0,be.display)("block")} :host {
      --elevation: 11;
      background: ${lr};
      border: calc(${Xt} * 1px) solid transparent;
      ${un}
      margin: 0;
      border-radius: calc(${Et} * 1px);
      padding: calc(${qt} * 1px) 0;
      max-width: 368px;
      min-width: 64px;
    }

    :host([slot='submenu']) {
      width: max-content;
      margin: 0 calc(${qt} * 1px);
    }

    ::slotted(hr) {
      box-sizing: content-box;
      height: 0;
      margin: 0;
      border: none;
      border-top: calc(${Xt} * 1px) solid ${pa};
    }
  `.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
      :host {
        background: ${Ya.Canvas};
        border-color: ${Ya.CanvasText};
      }
    `));class rl extends be.Menu{connectedCallback(){super.connectedCallback();lr.setValueFor(this,Ko)}}const al=rl.compose({baseName:"menu",template:be.menuTemplate,styles:ol});const il=(e,t)=>Xa.css`
    ${(0,be.display)("grid")} :host {
      contain: layout;
      overflow: visible;
      font-family: ${It};
      outline: none;
      box-sizing: border-box;
      height: calc(${Ja} * 1px);
      grid-template-columns: minmax(42px, auto) 1fr minmax(42px, auto);
      grid-template-rows: auto;
      justify-items: center;
      align-items: center;
      padding: 0;
      margin: 0 calc(${qt} * 1px);
      white-space: nowrap;
      background: ${Gr};
      color: ${na};
      fill: currentcolor;
      cursor: pointer;
      font-size: ${Yt};
      line-height: ${Jt};
      border-radius: calc(${Et} * 1px);
      border: calc(${Zt} * 1px) solid transparent;
    }

    :host(:hover) {
      position: relative;
      z-index: 1;
    }

    :host(.indent-0) {
      grid-template-columns: auto 1fr minmax(42px, auto);
    }
    :host(.indent-0) .content {
      grid-column: 1;
      grid-row: 1;
      margin-inline-start: 10px;
    }
    :host(.indent-0) .expand-collapse-glyph-container {
      grid-column: 5;
      grid-row: 1;
    }
    :host(.indent-2) {
      grid-template-columns:
        minmax(42px, auto) minmax(42px, auto) 1fr minmax(42px, auto)
        minmax(42px, auto);
    }
    :host(.indent-2) .content {
      grid-column: 3;
      grid-row: 1;
      margin-inline-start: 10px;
    }
    :host(.indent-2) .expand-collapse-glyph-container {
      grid-column: 5;
      grid-row: 1;
    }
    :host(.indent-2) .start {
      grid-column: 2;
    }
    :host(.indent-2) .end {
      grid-column: 4;
    }

    :host(:${be.focusVisible}) {
      border-color: ${pr};
      background: ${qr};
      color: ${na};
    }

    :host(:hover) {
      background: ${Er};
      color: ${na};
    }

    :host(:active) {
      background: ${_r};
    }

    :host([aria-checked='true']),
    :host(.expanded) {
      background: ${Br};
      color: ${na};
    }

    :host([disabled]) {
      cursor: ${be.disabledCursor};
      opacity: ${Ut};
    }

    :host([disabled]:hover) {
      color: ${na};
      fill: currentcolor;
      background: ${Gr};
    }

    :host([disabled]:hover) .start,
    :host([disabled]:hover) .end,
    :host([disabled]:hover)::slotted(svg) {
      fill: ${na};
    }

    .expand-collapse-glyph {
      /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */
      width: 16px;
      height: 16px;
      fill: currentcolor;
    }

    .content {
      grid-column-start: 2;
      justify-self: start;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .start,
    .end {
      display: flex;
      justify-content: center;
    }

    ::slotted(svg) {
      /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */
      width: 16px;
      height: 16px;
    }

    :host(:hover) .start,
    :host(:hover) .end,
    :host(:hover)::slotted(svg),
    :host(:active) .start,
    :host(:active) .end,
    :host(:active)::slotted(svg) {
      fill: ${na};
    }

    :host(.indent-0[aria-haspopup='menu']) {
      display: grid;
      grid-template-columns: minmax(42px, auto) auto 1fr minmax(42px, auto) minmax(
          42px,
          auto
        );
      align-items: center;
      min-height: 32px;
    }

    :host(.indent-1[aria-haspopup='menu']),
    :host(.indent-1[role='menuitemcheckbox']),
    :host(.indent-1[role='menuitemradio']) {
      display: grid;
      grid-template-columns: minmax(42px, auto) auto 1fr minmax(42px, auto) minmax(
          42px,
          auto
        );
      align-items: center;
      min-height: 32px;
    }

    :host(.indent-2:not([aria-haspopup='menu'])) .end {
      grid-column: 5;
    }

    :host .input-container,
    :host .expand-collapse-glyph-container {
      display: none;
    }

    :host([aria-haspopup='menu']) .expand-collapse-glyph-container,
    :host([role='menuitemcheckbox']) .input-container,
    :host([role='menuitemradio']) .input-container {
      display: grid;
      margin-inline-end: 10px;
    }

    :host([aria-haspopup='menu']) .content,
    :host([role='menuitemcheckbox']) .content,
    :host([role='menuitemradio']) .content {
      grid-column-start: 3;
    }

    :host([aria-haspopup='menu'].indent-0) .content {
      grid-column-start: 1;
    }

    :host([aria-haspopup='menu']) .end,
    :host([role='menuitemcheckbox']) .end,
    :host([role='menuitemradio']) .end {
      grid-column-start: 4;
    }

    :host .expand-collapse,
    :host .checkbox,
    :host .radio {
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      width: 20px;
      height: 20px;
      box-sizing: border-box;
      outline: none;
      margin-inline-start: 10px;
    }

    :host .checkbox,
    :host .radio {
      border: calc(${Xt} * 1px) solid ${na};
    }

    :host([aria-checked='true']) .checkbox,
    :host([aria-checked='true']) .radio {
      background: ${dr};
      border-color: ${dr};
    }

    :host .checkbox {
      border-radius: calc(${Et} * 1px);
    }

    :host .radio {
      border-radius: 999px;
    }

    :host .checkbox-indicator,
    :host .radio-indicator,
    :host .expand-collapse-indicator,
    ::slotted([slot='checkbox-indicator']),
    ::slotted([slot='radio-indicator']),
    ::slotted([slot='expand-collapse-indicator']) {
      display: none;
    }

    ::slotted([slot='end']:not(svg)) {
      margin-inline-end: 10px;
      color: ${aa};
    }

    :host([aria-checked='true']) .checkbox-indicator,
    :host([aria-checked='true']) ::slotted([slot='checkbox-indicator']) {
      width: 100%;
      height: 100%;
      display: block;
      fill: ${fr};
      pointer-events: none;
    }

    :host([aria-checked='true']) .radio-indicator {
      position: absolute;
      top: 4px;
      left: 4px;
      right: 4px;
      bottom: 4px;
      border-radius: 999px;
      display: block;
      background: ${fr};
      pointer-events: none;
    }

    :host([aria-checked='true']) ::slotted([slot='radio-indicator']) {
      display: block;
      pointer-events: none;
    }
  `.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
      :host {
        border-color: transparent;
        color: ${Ya.ButtonText};
        forced-color-adjust: none;
      }

      :host(:hover) {
        background: ${Ya.Highlight};
        color: ${Ya.HighlightText};
      }

      :host(:hover) .start,
      :host(:hover) .end,
      :host(:hover)::slotted(svg),
      :host(:active) .start,
      :host(:active) .end,
      :host(:active)::slotted(svg) {
        fill: ${Ya.HighlightText};
      }

      :host(.expanded) {
        background: ${Ya.Highlight};
        border-color: ${Ya.Highlight};
        color: ${Ya.HighlightText};
      }

      :host(:${be.focusVisible}) {
        background: ${Ya.Highlight};
        border-color: ${Ya.ButtonText};
        box-shadow: 0 0 0 calc(${Zt} * 1px) inset
          ${Ya.HighlightText};
        color: ${Ya.HighlightText};
        fill: currentcolor;
      }

      :host([disabled]),
      :host([disabled]:hover),
      :host([disabled]:hover) .start,
      :host([disabled]:hover) .end,
      :host([disabled]:hover)::slotted(svg) {
        background: ${Ya.Canvas};
        color: ${Ya.GrayText};
        fill: currentcolor;
        opacity: 1;
      }

      :host .expanded-toggle,
      :host .checkbox,
      :host .radio {
        border-color: ${Ya.ButtonText};
        background: ${Ya.HighlightText};
      }

      :host([checked='true']) .checkbox,
      :host([checked='true']) .radio {
        background: ${Ya.HighlightText};
        border-color: ${Ya.HighlightText};
      }

      :host(:hover) .expanded-toggle,
            :host(:hover) .checkbox,
            :host(:hover) .radio,
            :host(:${be.focusVisible}) .expanded-toggle,
            :host(:${be.focusVisible}) .checkbox,
            :host(:${be.focusVisible}) .radio,
            :host([checked="true"]:hover) .checkbox,
            :host([checked="true"]:hover) .radio,
            :host([checked="true"]:${be.focusVisible}) .checkbox,
            :host([checked="true"]:${be.focusVisible}) .radio {
        border-color: ${Ya.HighlightText};
      }

      :host([aria-checked='true']) {
        background: ${Ya.Highlight};
        color: ${Ya.HighlightText};
      }

      :host([aria-checked='true']) .checkbox-indicator,
      :host([aria-checked='true']) ::slotted([slot='checkbox-indicator']),
      :host([aria-checked='true']) ::slotted([slot='radio-indicator']) {
        fill: ${Ya.Highlight};
      }

      :host([aria-checked='true']) .radio-indicator {
        background: ${Ya.Highlight};
      }

      ::slotted([slot='end']:not(svg)) {
        color: ${Ya.ButtonText};
      }

      :host(:hover) ::slotted([slot="end"]:not(svg)),
            :host(:${be.focusVisible}) ::slotted([slot="end"]:not(svg)) {
        color: ${Ya.HighlightText};
      }
    `),new qi(Xa.css`
        .expand-collapse-glyph {
          transform: rotate(0deg);
        }
      `,Xa.css`
        .expand-collapse-glyph {
          transform: rotate(180deg);
        }
      `));const nl=be.MenuItem.compose({baseName:"menu-item",template:be.menuItemTemplate,styles:il,checkboxIndicator:`\n        <svg\n            part="checkbox-indicator"\n            class="checkbox-indicator"\n            viewBox="0 0 20 20"\n            xmlns="http://www.w3.org/2000/svg"\n        >\n            <path\n                fill-rule="evenodd"\n                clip-rule="evenodd"\n                d="M8.143 12.6697L15.235 4.5L16.8 5.90363L8.23812 15.7667L3.80005 11.2556L5.27591 9.7555L8.143 12.6697Z"\n            />\n        </svg>\n    `,expandCollapseGlyph:`\n        <svg\n            viewBox="0 0 16 16"\n            xmlns="http://www.w3.org/2000/svg"\n            class="expand-collapse-glyph"\n            part="expand-collapse-glyph"\n        >\n            <path\n                d="M5.00001 12.3263C5.00124 12.5147 5.05566 12.699 5.15699 12.8578C5.25831 13.0167 5.40243 13.1437 5.57273 13.2242C5.74304 13.3047 5.9326 13.3354 6.11959 13.3128C6.30659 13.2902 6.4834 13.2152 6.62967 13.0965L10.8988 8.83532C11.0739 8.69473 11.2153 8.51658 11.3124 8.31402C11.4096 8.11146 11.46 7.88966 11.46 7.66499C11.46 7.44033 11.4096 7.21853 11.3124 7.01597C11.2153 6.81341 11.0739 6.63526 10.8988 6.49467L6.62967 2.22347C6.48274 2.10422 6.30501 2.02912 6.11712 2.00691C5.92923 1.9847 5.73889 2.01628 5.56823 2.09799C5.39757 2.17969 5.25358 2.30817 5.153 2.46849C5.05241 2.62882 4.99936 2.8144 5.00001 3.00369V12.3263Z"\n            />\n        </svg>\n    `,radioIndicator:`\n        <span part="radio-indicator" class="radio-indicator"></span>\n    `});const ll=(e,t)=>Xa.css`
  ${Hn}

  .controls {
    opacity: 0;
  }

  .step-up-glyph,
  .step-down-glyph {
    display: block;
    padding: 4px 10px;
    cursor: pointer;
  }

  .step-up-glyph:before,
  .step-down-glyph:before {
    content: '';
    display: block;
    border: solid transparent 6px;
  }

  .step-up-glyph:before {
    border-bottom-color: ${na};
  }

  .step-down-glyph:before {
    border-top-color: ${na};
  }

  :host(:hover:not([disabled])) .controls,
  :host(:focus-within:not([disabled])) .controls {
    opacity: 1;
  }
`;class sl extends be.NumberField{constructor(){super(...arguments);this.appearance="outline"}}ii([Xa.attr],sl.prototype,"appearance",void 0);const cl=sl.compose({baseName:"number-field",baseClass:be.NumberField,styles:ll,template:be.numberFieldTemplate,shadowOptions:{delegatesFocus:true},stepDownGlyph:`\n        <span class="step-down-glyph" part="step-down-glyph"></span>\n    `,stepUpGlyph:`\n        <span class="step-up-glyph" part="step-up-glyph"></span>\n    `});const dl=(e,t)=>Xa.css`
    ${(0,be.display)("inline-flex")} :host {
      align-items: center;
      font-family: ${It};
      border-radius: calc(${Et} * 1px);
      border: calc(${Zt} * 1px) solid transparent;
      box-sizing: border-box;
      background: ${Gr};
      color: ${na};
      cursor: pointer;
      flex: 0 0 auto;
      fill: currentcolor;
      font-size: ${Yt};
      height: calc(${Ja} * 1px);
      line-height: ${Jt};
      margin: 0 calc((${qt} - ${Zt}) * 1px);
      outline: none;
      overflow: hidden;
      padding: 0 1ch;
      user-select: none;
      white-space: nowrap;
    }

    :host(:not([disabled]):not([aria-selected='true']):hover) {
      background: ${Er};
    }

    :host(:not([disabled]):not([aria-selected='true']):active) {
      background: ${_r};
    }

    :host([aria-selected='true']) {
      background: ${dr};
      color: ${fr};
    }

    :host(:not([disabled])[aria-selected='true']:hover) {
      background: ${ur};
      color: ${mr};
    }

    :host(:not([disabled])[aria-selected='true']:active) {
      background: ${hr};
      color: ${vr};
    }

    :host([disabled]) {
      cursor: ${be.disabledCursor};
      opacity: ${Ut};
    }

    .content {
      grid-column-start: 2;
      justify-self: start;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .start,
    .end,
    ::slotted(svg) {
      display: flex;
    }

    ::slotted(svg) {
      /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */
      height: calc(${qt} * 4px);
      width: calc(${qt} * 4px);
    }

    ::slotted([slot='end']) {
      margin-inline-start: 1ch;
    }

    ::slotted([slot='start']) {
      margin-inline-end: 1ch;
    }

    :host([aria-checked='true'][aria-selected='false']) {
      border-color: ${ea};
    }

    :host([aria-checked='true'][aria-selected='true']) {
      border-color: ${ea};
      box-shadow: 0 0 0 calc(${Zt} * 2 * 1px) inset
        ${oa};
    }
  `.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
      :host {
        border-color: transparent;
        forced-color-adjust: none;
        color: ${Ya.ButtonText};
        fill: currentcolor;
      }

      :host(:not([aria-selected='true']):hover),
      :host([aria-selected='true']) {
        background: ${Ya.Highlight};
        color: ${Ya.HighlightText};
      }

      :host([disabled]),
      :host([disabled][aria-selected='false']:hover) {
        background: ${Ya.Canvas};
        color: ${Ya.GrayText};
        fill: currentcolor;
        opacity: 1;
      }

      :host([aria-checked='true'][aria-selected='false']) {
        background: ${Ya.ButtonFace};
        color: ${Ya.ButtonText};
        border-color: ${Ya.ButtonText};
      }

      :host([aria-checked='true'][aria-selected='true']),
      :host([aria-checked='true'][aria-selected='true']:hover) {
        background: ${Ya.Highlight};
        color: ${Ya.HighlightText};
        border-color: ${Ya.ButtonText};
      }
    `));const ul=be.ListboxOption.compose({baseName:"option",template:be.listboxOptionTemplate,styles:dl});const hl=(e,t)=>Xa.css`
    ${(0,be.display)("flex")} :host {
      align-items: center;
      outline: none;
      height: calc(${qt} * 1px);
      margin: calc(${qt} * 1px) 0;
    }

    .progress {
      background-color: ${Br};
      border-radius: calc(${qt} * 1px);
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      position: relative;
    }

    .determinate {
      background-color: ${Vr};
      border-radius: calc(${qt} * 1px);
      height: 100%;
      transition: all 0.2s ease-in-out;
      display: flex;
    }

    .indeterminate {
      height: 100%;
      border-radius: calc(${qt} * 1px);
      display: flex;
      width: 100%;
      position: relative;
      overflow: hidden;
    }

    .indeterminate-indicator-1 {
      position: absolute;
      opacity: 0;
      height: 100%;
      background-color: ${Vr};
      border-radius: calc(${qt} * 1px);
      animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
      width: 40%;
      animation: indeterminate-1 2s infinite;
    }

    .indeterminate-indicator-2 {
      position: absolute;
      opacity: 0;
      height: 100%;
      background-color: ${Vr};
      border-radius: calc(${qt} * 1px);
      animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
      width: 60%;
      animation: indeterminate-2 2s infinite;
    }

    :host([paused]) .indeterminate-indicator-1,
    :host([paused]) .indeterminate-indicator-2 {
      animation-play-state: paused;
      background-color: ${Br};
    }

    :host([paused]) .determinate {
      background-color: ${aa};
    }

    @keyframes indeterminate-1 {
      0% {
        opacity: 1;
        transform: translateX(-100%);
      }
      70% {
        opacity: 1;
        transform: translateX(300%);
      }
      70.01% {
        opacity: 0;
      }
      100% {
        opacity: 0;
        transform: translateX(300%);
      }
    }

    @keyframes indeterminate-2 {
      0% {
        opacity: 0;
        transform: translateX(-150%);
      }
      29.99% {
        opacity: 0;
      }
      30% {
        opacity: 1;
        transform: translateX(-150%);
      }
      100% {
        transform: translateX(166.66%);
        opacity: 1;
      }
    }
  `.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
      .progress {
        forced-color-adjust: none;
        background-color: ${Ya.Field};
        box-shadow: 0 0 0 1px inset ${Ya.FieldText};
      }
      .determinate,
      .indeterminate-indicator-1,
      .indeterminate-indicator-2 {
        forced-color-adjust: none;
        background-color: ${Ya.FieldText};
      }
      :host([paused]) .determinate,
      :host([paused]) .indeterminate-indicator-1,
      :host([paused]) .indeterminate-indicator-2 {
        background-color: ${Ya.GrayText};
      }
    `));const pl=be.BaseProgress.compose({baseName:"progress",template:be.progressTemplate,styles:hl,indeterminateIndicator1:`\n        <span class="indeterminate-indicator-1" part="indeterminate-indicator-1"></span>\n    `,indeterminateIndicator2:`\n        <span class="indeterminate-indicator-2" part="indeterminate-indicator-2"></span>\n    `});const gl=(e,t)=>Xa.css`
    ${(0,be.display)("flex")} :host {
      align-items: center;
      outline: none;
      height: calc(${Ja} * 1px);
      width: calc(${Ja} * 1px);
      margin: calc(${Ja} * 1px) 0;
    }

    .progress {
      height: 100%;
      width: 100%;
    }

    .background {
      stroke: ${Br};
      fill: none;
      stroke-width: 2px;
    }

    .determinate {
      stroke: ${Vr};
      fill: none;
      stroke-width: 2px;
      stroke-linecap: round;
      transform-origin: 50% 50%;
      transform: rotate(-90deg);
      transition: all 0.2s ease-in-out;
    }

    .indeterminate-indicator-1 {
      stroke: ${Vr};
      fill: none;
      stroke-width: 2px;
      stroke-linecap: round;
      transform-origin: 50% 50%;
      transform: rotate(-90deg);
      transition: all 0.2s ease-in-out;
      animation: spin-infinite 2s linear infinite;
    }

    :host([paused]) .indeterminate-indicator-1 {
      animation-play-state: paused;
      stroke: ${Br};
    }

    :host([paused]) .determinate {
      stroke: ${aa};
    }

    @keyframes spin-infinite {
      0% {
        stroke-dasharray: 0.01px 43.97px;
        transform: rotate(0deg);
      }
      50% {
        stroke-dasharray: 21.99px 21.99px;
        transform: rotate(450deg);
      }
      100% {
        stroke-dasharray: 0.01px 43.97px;
        transform: rotate(1080deg);
      }
    }
  `.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
      .indeterminate-indicator-1,
      .determinate {
        stroke: ${Ya.FieldText};
      }
      .background {
        stroke: ${Ya.Field};
      }
      :host([paused]) .indeterminate-indicator-1 {
        stroke: ${Ya.Field};
      }
      :host([paused]) .determinate {
        stroke: ${Ya.GrayText};
      }
    `));const bl=be.BaseProgress.compose({baseName:"progress-ring",template:be.progressRingTemplate,styles:gl,indeterminateIndicator:`\n        <svg class="progress" part="progress" viewBox="0 0 16 16">\n            <circle\n                class="background"\n                part="background"\n                cx="8px"\n                cy="8px"\n                r="7px"\n            ></circle>\n            <circle\n                class="indeterminate-indicator-1"\n                part="indeterminate-indicator-1"\n                cx="8px"\n                cy="8px"\n                r="7px"\n            ></circle>\n        </svg>\n    `});const fl=(e,t)=>Xa.css`
    ${(0,be.display)("inline-flex")} :host {
      --input-size: calc((${Ja} / 2) + ${qt});
      align-items: center;
      outline: none;
      margin: calc(${qt} * 1px) 0;
      /* Chromium likes to select label text or the default slot when
                the radio is clicked. Maybe there is a better solution here? */
      user-select: none;
      position: relative;
      flex-direction: row;
      transition: all 0.2s ease-in-out;
    }

    .control {
      position: relative;
      width: calc((${Ja} / 2 + ${qt}) * 1px);
      height: calc((${Ja} / 2 + ${qt}) * 1px);
      box-sizing: border-box;
      border-radius: 999px;
      border: calc(${Xt} * 1px) solid ${sa};
      background: ${Rr};
      outline: none;
      cursor: pointer;
    }

    :host([aria-invalid='true']) .control {
      border-color: ${va};
    }

    .label {
      font-family: ${It};
      color: ${na};
      padding-inline-start: calc(${qt} * 2px + 2px);
      margin-inline-end: calc(${qt} * 2px + 2px);
      cursor: pointer;
      font-size: ${Yt};
      line-height: ${Jt};
    }

    .label__hidden {
      display: none;
      visibility: hidden;
    }

    .control,
    .checked-indicator {
      flex-shrink: 0;
    }

    .checked-indicator {
      position: absolute;
      top: 5px;
      left: 5px;
      right: 5px;
      bottom: 5px;
      border-radius: 999px;
      display: inline-block;
      background: ${fr};
      fill: ${fr};
      opacity: 0;
      pointer-events: none;
    }

    :host(:not([disabled])) .control:hover {
      background: ${Pr};
      border-color: ${ca};
    }

    :host([aria-invalid='true']:not([disabled])) .control:hover {
      border-color: ${$a};
    }

    :host(:not([disabled])) .control:active {
      background: ${Ir};
      border-color: ${da};
    }

    :host([aria-invalid='true']:not([disabled])) .control:active {
      border-color: ${xa};
    }

    :host(:${be.focusVisible}) .control {
      outline: solid calc(${Zt} * 1px) ${pr};
    }

    :host([aria-invalid='true']:${be.focusVisible}) .control {
      outline-color: ${ya};
    }

    :host([aria-checked='true']) .control {
      background: ${dr};
      border: calc(${Xt} * 1px) solid ${dr};
    }

    :host([aria-invalid='true'][aria-checked='true']) .control {
      background-color: ${va};
      border-color: ${va};
    }

    :host([aria-checked='true']:not([disabled])) .control:hover {
      background: ${ur};
      border: calc(${Xt} * 1px) solid ${ur};
    }

    :host([aria-invalid='true'][aria-checked='true']:not([disabled]))
      .control:hover {
      background-color: ${$a};
      border-color: ${$a};
    }

    :host([aria-checked='true']:not([disabled]))
      .control:hover
      .checked-indicator {
      background: ${mr};
      fill: ${mr};
    }

    :host([aria-checked='true']:not([disabled])) .control:active {
      background: ${hr};
      border: calc(${Xt} * 1px) solid ${hr};
    }

    :host([aria-invalid='true'][aria-checked='true']:not([disabled]))
      .control:active {
      background-color: ${xa};
      border-color: ${xa};
    }

    :host([aria-checked='true']:not([disabled]))
      .control:active
      .checked-indicator {
      background: ${vr};
      fill: ${vr};
    }

    :host([aria-checked="true"]:${be.focusVisible}:not([disabled])) .control {
      outline-offset: 2px;
      outline: solid calc(${Zt} * 1px) ${pr};
    }

    :host([aria-invalid='true'][aria-checked="true"]:${be.focusVisible}:not([disabled])) .control {
      outline-color: ${ya};
    }

    :host([disabled]) .label,
    :host([readonly]) .label,
    :host([readonly]) .control,
    :host([disabled]) .control {
      cursor: ${be.disabledCursor};
    }

    :host([aria-checked='true']) .checked-indicator {
      opacity: 1;
    }

    :host([disabled]) {
      opacity: ${Ut};
    }
  `.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
      .control,
      :host([aria-checked='true']:not([disabled])) .control {
        forced-color-adjust: none;
        border-color: ${Ya.FieldText};
        background: ${Ya.Field};
      }
      :host([aria-invalid='true']) {
        border-style: dashed;
      }
      :host(:not([disabled])) .control:hover {
        border-color: ${Ya.Highlight};
        background: ${Ya.Field};
      }
      :host([aria-checked='true']:not([disabled])) .control:hover,
      :host([aria-checked='true']:not([disabled])) .control:active {
        border-color: ${Ya.Highlight};
        background: ${Ya.Highlight};
      }
      :host([aria-checked='true']) .checked-indicator {
        background: ${Ya.Highlight};
        fill: ${Ya.Highlight};
      }
      :host([aria-checked='true']:not([disabled]))
        .control:hover
        .checked-indicator,
      :host([aria-checked='true']:not([disabled]))
        .control:active
        .checked-indicator {
        background: ${Ya.HighlightText};
        fill: ${Ya.HighlightText};
      }
      :host(:${be.focusVisible}) .control {
        border-color: ${Ya.Highlight};
        outline-offset: 2px;
        outline: solid calc(${Zt} * 1px) ${Ya.FieldText};
      }
      :host([aria-checked="true"]:${be.focusVisible}:not([disabled])) .control {
        border-color: ${Ya.Highlight};
        outline: solid calc(${Zt} * 1px) ${Ya.FieldText};
      }
      :host([disabled]) {
        forced-color-adjust: none;
        opacity: 1;
      }
      :host([disabled]) .label {
        color: ${Ya.GrayText};
      }
      :host([disabled]) .control,
      :host([aria-checked='true'][disabled]) .control:hover,
      .control:active {
        background: ${Ya.Field};
        border-color: ${Ya.GrayText};
      }
      :host([disabled]) .checked-indicator,
      :host([aria-checked='true'][disabled]) .control:hover .checked-indicator {
        fill: ${Ya.GrayText};
        background: ${Ya.GrayText};
      }
    `));const ml=(e,t)=>Xa.html`
  <template
    role="radio"
    aria-checked="${e=>e.checked}"
    aria-required="${e=>e.required}"
    aria-disabled="${e=>e.disabled}"
    aria-readonly="${e=>e.readOnly}"
    @keypress="${(e,t)=>e.keypressHandler(t.event)}"
    @click="${(e,t)=>e.clickHandler(t.event)}"
  >
    <div part="control" class="control">
      <slot name="checked-indicator">
        ${t.checkedIndicator||""}
      </slot>
    </div>
    <label
      part="label"
      class="${e=>e.defaultSlottedNodes&&e.defaultSlottedNodes.length?"label":"label label__hidden"}"
    >
      <slot ${(0,Xa.slotted)("defaultSlottedNodes")}></slot>
    </label>
  </template>
`;class vl extends be.Radio{}const $l=vl.compose({baseName:"radio",baseClass:be.Radio,template:ml,styles:fl,checkedIndicator:`\n        <div part="checked-indicator" class="checked-indicator"></div>\n    `});const xl=(e,t)=>Xa.css`
  ${(0,be.display)("flex")} :host {
    align-items: flex-start;
    margin: calc(${qt} * 1px) 0;
    flex-direction: column;
  }
  .positioning-region {
    display: flex;
    flex-wrap: wrap;
  }
  :host([orientation='vertical']) .positioning-region {
    flex-direction: column;
  }
  :host([orientation='horizontal']) .positioning-region {
    flex-direction: row;
  }
`;class yl extends be.RadioGroup{constructor(){super();const e=Xa.Observable.getNotifier(this);const t={handleChange(e,t){if(t==="slottedRadioButtons"){e.ariaInvalidChanged()}}};e.subscribe(t,"slottedRadioButtons")}ariaInvalidChanged(){if(this.slottedRadioButtons){this.slottedRadioButtons.forEach((e=>{var t;e.setAttribute("aria-invalid",(t=this.getAttribute("aria-invalid"))!==null&&t!==void 0?t:"false")}))}}}const wl=yl.compose({baseName:"radio-group",baseClass:be.RadioGroup,template:be.radioGroupTemplate,styles:xl});const kl=be.DesignToken.create("clear-button-hover").withDefault((e=>{const t=Mr.getValueFor(e);const o=zr.getValueFor(e);return t.evaluate(e,o.evaluate(e).hover).hover}));const Fl=be.DesignToken.create("clear-button-active").withDefault((e=>{const t=Mr.getValueFor(e);const o=zr.getValueFor(e);return t.evaluate(e,o.evaluate(e).hover).active}));const Cl=(e,t)=>Xa.css`
  ${Hn}

  .control::-webkit-search-cancel-button {
    -webkit-appearance: none;
  }

  .control:hover,
    .control:${be.focusVisible},
    .control:disabled,
    .control:active {
    outline: none;
  }

  .clear-button {
    height: calc(100% - 2px);
    opacity: 0;
    margin: 1px;
    background: transparent;
    color: ${na};
    fill: currentcolor;
    border: none;
    border-radius: calc(${Et} * 1px);
    min-width: calc(${Ja} * 1px);
    font-size: ${Yt};
    line-height: ${Jt};
    outline: none;
    font-family: ${It};
    padding: 0 calc((10 + (${qt} * 2 * ${_t})) * 1px);
  }

  .clear-button:hover {
    background: ${Er};
  }

  .clear-button:active {
    background: ${_r};
  }

  :host([appearance='filled']) .clear-button:hover {
    background: ${kl};
  }

  :host([appearance='filled']) .clear-button:active {
    background: ${Fl};
  }

  .input-wrapper {
    display: flex;
    position: relative;
    width: 100%;
  }

  .start,
  .end {
    display: flex;
    margin: 1px;
    fill: currentcolor;
  }

  ::slotted([slot='end']) {
    height: 100%;
  }

  .end {
    margin-inline-end: 1px;
    height: calc(100% - 2px);
  }

  ::slotted(svg) {
    /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */
    width: 16px;
    height: 16px;
    margin-inline-end: 11px;
    margin-inline-start: 11px;
    margin-top: auto;
    margin-bottom: auto;
  }

  .clear-button__hidden {
    opacity: 0;
  }

  :host(:hover:not([disabled], [readOnly])) .clear-button,
  :host(:active:not([disabled], [readOnly])) .clear-button,
  :host(:focus-within:not([disabled], [readOnly])) .clear-button {
    opacity: 1;
  }

  :host(:hover:not([disabled], [readOnly])) .clear-button__hidden,
  :host(:active:not([disabled], [readOnly])) .clear-button__hidden,
  :host(:focus-within:not([disabled], [readOnly])) .clear-button__hidden {
    opacity: 0;
  }
`;class Sl extends be.Search{constructor(){super(...arguments);this.appearance="outline"}}ii([Xa.attr],Sl.prototype,"appearance",void 0);const Vl=Sl.compose({baseName:"search",baseClass:be.Search,template:be.searchTemplate,styles:Cl,shadowOptions:{delegatesFocus:true}});const Tl=Cl;class Dl extends be.Select{constructor(){super(...arguments);this.listboxScrollWidth=""}autoWidthChanged(e,t){if(t){this.setAutoWidth()}else{this.style.removeProperty("width")}}setAutoWidth(){if(!this.autoWidth||!this.isConnected){return}let e=this.listbox.getBoundingClientRect().width;if(e===0&&this.listbox.hidden){Object.assign(this.listbox.style,{visibility:"hidden"});this.listbox.removeAttribute("hidden");e=this.listbox.getBoundingClientRect().width;this.listbox.setAttribute("hidden","");this.listbox.style.removeProperty("visibility")}if(e>0){Object.assign(this.style,{width:`${e}px`})}}connectedCallback(){super.connectedCallback();this.setAutoWidth();if(this.listbox){lr.setValueFor(this.listbox,Ko)}}slottedOptionsChanged(e,t){super.slottedOptionsChanged(e,t);this.setAutoWidth()}get listboxMaxHeight(){return Math.floor(this.maxHeight/ga.getValueFor(this)).toString()}listboxScrollWidthChanged(){this.updateComputedStylesheet()}get selectSize(){var e;return`${(e=this.size)!==null&&e!==void 0?e:this.multiple?4:0}`}multipleChanged(e,t){super.multipleChanged(e,t);this.updateComputedStylesheet()}maxHeightChanged(e,t){if(this.collapsible){this.updateComputedStylesheet()}}setPositioning(){super.setPositioning();this.updateComputedStylesheet()}sizeChanged(e,t){super.sizeChanged(e,t);this.updateComputedStylesheet();if(this.collapsible){requestAnimationFrame((()=>{this.listbox.style.setProperty("display","flex");this.listbox.style.setProperty("overflow","visible");this.listbox.style.setProperty("visibility","hidden");this.listbox.style.setProperty("width","auto");this.listbox.hidden=false;this.listboxScrollWidth=`${this.listbox.scrollWidth}`;this.listbox.hidden=true;this.listbox.style.removeProperty("display");this.listbox.style.removeProperty("overflow");this.listbox.style.removeProperty("visibility");this.listbox.style.removeProperty("width")}));return}this.listboxScrollWidth=""}updateComputedStylesheet(){if(this.computedStylesheet){this.$fastController.removeStyles(this.computedStylesheet)}this.computedStylesheet=Xa.css`
      :host {
        --listbox-max-height: ${this.listboxMaxHeight};
        --listbox-scroll-width: ${this.listboxScrollWidth};
        --size: ${this.selectSize};
      }
    `;this.$fastController.addStyles(this.computedStylesheet)}}ii([(0,Xa.attr)({attribute:"autowidth",mode:"boolean"})],Dl.prototype,"autoWidth",void 0);ii([(0,Xa.attr)({attribute:"minimal",mode:"boolean"})],Dl.prototype,"minimal",void 0);ii([Xa.observable],Dl.prototype,"listboxScrollWidth",void 0);const jl=Dl.compose({baseName:"select",baseClass:be.Select,template:be.selectTemplate,styles:xn,indicator:`\n        <svg\n            class="select-indicator"\n            part="select-indicator"\n            viewBox="0 0 12 7"\n            xmlns="http://www.w3.org/2000/svg"\n        >\n            <path\n                d="M11.85.65c.2.2.2.5 0 .7L6.4 6.84a.55.55 0 01-.78 0L.14 1.35a.5.5 0 11.71-.7L6 5.8 11.15.65c.2-.2.5-.2.7 0z"\n            />\n        </svg>\n    `});const zl=(e,t)=>Xa.css`
    ${(0,be.display)("block")} :host {
      --skeleton-fill-default: #e1dfdd;
      overflow: hidden;
      width: 100%;
      position: relative;
      background-color: var(--skeleton-fill, var(--skeleton-fill-default));
      --skeleton-animation-gradient-default: linear-gradient(
        270deg,
        var(--skeleton-fill, var(--skeleton-fill-default)) 0%,
        #f3f2f1 51.13%,
        var(--skeleton-fill, var(--skeleton-fill-default)) 100%
      );
      --skeleton-animation-timing-default: ease-in-out;
    }

    :host([shape='rect']) {
      border-radius: calc(${Et} * 1px);
    }

    :host([shape='circle']) {
      border-radius: 100%;
      overflow: hidden;
    }

    object {
      position: absolute;
      width: 100%;
      height: auto;
      z-index: 2;
    }

    object img {
      width: 100%;
      height: auto;
    }

    ${(0,be.display)("block")} span.shimmer {
      position: absolute;
      width: 100%;
      height: 100%;
      background-image: var(
        --skeleton-animation-gradient,
        var(--skeleton-animation-gradient-default)
      );
      background-size: 0px 0px / 90% 100%;
      background-repeat: no-repeat;
      background-color: var(--skeleton-animation-fill, ${Br});
      animation: shimmer 2s infinite;
      animation-timing-function: var(
        --skeleton-animation-timing,
        var(--skeleton-timing-default)
      );
      animation-direction: normal;
      z-index: 1;
    }

    ::slotted(svg) {
      z-index: 2;
    }

    ::slotted(.pattern) {
      width: 100%;
      height: 100%;
    }

    @keyframes shimmer {
      0% {
        transform: translateX(-100%);
      }
      100% {
        transform: translateX(100%);
      }
    }
  `.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
      :host {
        forced-color-adjust: none;
        background-color: ${Ya.ButtonFace};
        box-shadow: 0 0 0 1px ${Ya.ButtonText};
      }

      ${(0,be.display)("block")} span.shimmer {
        display: none;
      }
    `));const Bl=be.Skeleton.compose({baseName:"skeleton",template:be.skeletonTemplate,styles:zl});const Ll=Xa.css`
  .track-start {
    left: 0;
  }
`;const Ol=Xa.css`
  .track-start {
    right: 0;
  }
`;const Nl=(e,t)=>Xa.css`
    :host([hidden]) {
      display: none;
    }

    ${(0,be.display)("inline-grid")} :host {
      --thumb-size: calc(${Ja} * 0.5 - ${qt});
      --thumb-translate: calc(
        var(--thumb-size) * -0.5 + var(--track-width) / 2
      );
      --track-overhang: calc((${qt} / 2) * -1);
      --track-width: ${qt};
      --jp-slider-height: calc(var(--thumb-size) * 10);
      align-items: center;
      width: 100%;
      margin: calc(${qt} * 1px) 0;
      user-select: none;
      box-sizing: border-box;
      border-radius: calc(${Et} * 1px);
      outline: none;
      cursor: pointer;
    }
    :host([orientation='horizontal']) .positioning-region {
      position: relative;
      margin: 0 8px;
      display: grid;
      grid-template-rows: calc(var(--thumb-size) * 1px) 1fr;
    }
    :host([orientation='vertical']) .positioning-region {
      position: relative;
      margin: 0 8px;
      display: grid;
      height: 100%;
      grid-template-columns: calc(var(--thumb-size) * 1px) 1fr;
    }

    :host(:${be.focusVisible}) .thumb-cursor {
      box-shadow:
        0 0 0 2px ${lr},
        0 0 0 calc((2 + ${Zt}) * 1px) ${pr};
    }

    :host([aria-invalid='true']:${be.focusVisible}) .thumb-cursor {
      box-shadow:
        0 0 0 2px ${lr},
        0 0 0 calc((2 + ${Zt}) * 1px) ${ya};
    }

    .thumb-container {
      position: absolute;
      height: calc(var(--thumb-size) * 1px);
      width: calc(var(--thumb-size) * 1px);
      transition: all 0.2s ease;
      color: ${na};
      fill: currentcolor;
    }
    .thumb-cursor {
      border: none;
      width: calc(var(--thumb-size) * 1px);
      height: calc(var(--thumb-size) * 1px);
      background: ${na};
      border-radius: calc(${Et} * 1px);
    }
    .thumb-cursor:hover {
      background: ${na};
      border-color: ${ca};
    }
    .thumb-cursor:active {
      background: ${na};
    }
    .track-start {
      background: ${Vr};
      position: absolute;
      height: 100%;
      left: 0;
      border-radius: calc(${Et} * 1px);
    }
    :host([aria-invalid='true']) .track-start {
      background-color: ${va};
    }
    :host([orientation='horizontal']) .thumb-container {
      transform: translateX(calc(var(--thumb-size) * 0.5px))
        translateY(calc(var(--thumb-translate) * 1px));
    }
    :host([orientation='vertical']) .thumb-container {
      transform: translateX(calc(var(--thumb-translate) * 1px))
        translateY(calc(var(--thumb-size) * 0.5px));
    }
    :host([orientation='horizontal']) {
      min-width: calc(var(--thumb-size) * 1px);
    }
    :host([orientation='horizontal']) .track {
      right: calc(var(--track-overhang) * 1px);
      left: calc(var(--track-overhang) * 1px);
      align-self: start;
      height: calc(var(--track-width) * 1px);
    }
    :host([orientation='vertical']) .track {
      top: calc(var(--track-overhang) * 1px);
      bottom: calc(var(--track-overhang) * 1px);
      width: calc(var(--track-width) * 1px);
      height: 100%;
    }
    .track {
      background: ${sa};
      position: absolute;
      border-radius: calc(${Et} * 1px);
    }
    :host([orientation='vertical']) {
      height: calc(var(--fast-slider-height) * 1px);
      min-height: calc(var(--thumb-size) * 1px);
      min-width: calc(${qt} * 20px);
    }
    :host([orientation='vertical']) .track-start {
      height: auto;
      width: 100%;
      top: 0;
    }
    :host([disabled]),
    :host([readonly]) {
      cursor: ${be.disabledCursor};
    }
    :host([disabled]) {
      opacity: ${Ut};
    }
  `.withBehaviors(new qi(Ll,Ol),(0,be.forcedColorsStylesheetBehavior)(Xa.css`
      .thumb-cursor {
        forced-color-adjust: none;
        border-color: ${Ya.FieldText};
        background: ${Ya.FieldText};
      }
      .thumb-cursor:hover,
      .thumb-cursor:active {
        background: ${Ya.Highlight};
      }
      .track {
        forced-color-adjust: none;
        background: ${Ya.FieldText};
      }
      :host(:${be.focusVisible}) .thumb-cursor {
        border-color: ${Ya.Highlight};
      }
      :host([disabled]) {
        opacity: 1;
      }
      :host([disabled]) .track,
      :host([disabled]) .thumb-cursor {
        forced-color-adjust: none;
        background: ${Ya.GrayText};
      }

      :host(:${be.focusVisible}) .thumb-cursor {
        background: ${Ya.Highlight};
        border-color: ${Ya.Highlight};
        box-shadow:
          0 0 0 2px ${Ya.Field},
          0 0 0 4px ${Ya.FieldText};
      }
    `));class Hl extends be.Slider{}const Rl=Hl.compose({baseName:"slider",baseClass:be.Slider,template:be.sliderTemplate,styles:Nl,thumb:`\n        <div class="thumb-cursor"></div>\n    `});var Pl=o(62899);const Il=Xa.css`
  :host {
    align-self: start;
    grid-row: 2;
    margin-top: -2px;
    height: calc((${Ja} / 2 + ${qt}) * 1px);
    width: auto;
  }
  .container {
    grid-template-rows: auto auto;
    grid-template-columns: 0;
  }
  .label {
    margin: 2px 0;
  }
`;const Al=Xa.css`
  :host {
    justify-self: start;
    grid-column: 2;
    margin-left: 2px;
    height: auto;
    width: calc((${Ja} / 2 + ${qt}) * 1px);
  }
  .container {
    grid-template-columns: auto auto;
    grid-template-rows: 0;
    min-width: calc(var(--thumb-size) * 1px);
    height: calc(var(--thumb-size) * 1px);
  }
  .mark {
    transform: rotate(90deg);
    align-self: center;
  }
  .label {
    margin-left: calc((${qt} / 2) * 3px);
    align-self: center;
  }
`;const Ml=(e,t)=>Xa.css`
    ${(0,be.display)("block")} :host {
      font-family: ${It};
      color: ${na};
      fill: currentcolor;
    }
    .root {
      position: absolute;
      display: grid;
    }
    .container {
      display: grid;
      justify-self: center;
    }
    .label {
      justify-self: center;
      align-self: center;
      white-space: nowrap;
      max-width: 30px;
    }
    .mark {
      width: calc((${qt} / 4) * 1px);
      height: calc(${Ja} * 0.25 * 1px);
      background: ${sa};
      justify-self: center;
    }
    :host(.disabled) {
      opacity: ${Ut};
    }
  `.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
      .mark {
        forced-color-adjust: none;
        background: ${Ya.FieldText};
      }
      :host(.disabled) {
        forced-color-adjust: none;
        opacity: 1;
      }
      :host(.disabled) .label {
        color: ${Ya.GrayText};
      }
      :host(.disabled) .mark {
        background: ${Ya.GrayText};
      }
    `));class Gl extends be.SliderLabel{sliderOrientationChanged(){if(this.sliderOrientation===Pl.i.horizontal){this.$fastController.addStyles(Il);this.$fastController.removeStyles(Al)}else{this.$fastController.addStyles(Al);this.$fastController.removeStyles(Il)}}}const El=Gl.compose({baseName:"slider-label",baseClass:be.SliderLabel,template:be.sliderLabelTemplate,styles:Ml});const _l=(e,t)=>Xa.css`
    :host([hidden]) {
      display: none;
    }

    ${(0,be.display)("inline-flex")} :host {
      align-items: center;
      outline: none;
      font-family: ${It};
      margin: calc(${qt} * 1px) 0;
      ${""} user-select: none;
    }

    :host([disabled]) {
      opacity: ${Ut};
    }

    :host([disabled]) .label,
    :host([readonly]) .label,
    :host([readonly]) .switch,
    :host([disabled]) .switch {
      cursor: ${be.disabledCursor};
    }

    .switch {
      position: relative;
      outline: none;
      box-sizing: border-box;
      width: calc(${Ja} * 1px);
      height: calc((${Ja} / 2 + ${qt}) * 1px);
      background: ${Rr};
      border-radius: calc(${Et} * 1px);
      border: calc(${Xt} * 1px) solid ${sa};
    }

    :host([aria-invalid='true']) .switch {
      border-color: ${va};
    }

    .switch:hover {
      background: ${Pr};
      border-color: ${ca};
      cursor: pointer;
    }

    :host([disabled]) .switch:hover,
    :host([readonly]) .switch:hover {
      background: ${Pr};
      border-color: ${ca};
      cursor: ${be.disabledCursor};
    }

    :host([aria-invalid='true'][disabled]) .switch:hover,
    :host([aria-invalid='true'][readonly]) .switch:hover {
      border-color: ${$a};
    }

    :host(:not([disabled])) .switch:active {
      background: ${Ir};
      border-color: ${da};
    }

    :host([aria-invalid='true']:not([disabled])) .switch:active {
      border-color: ${xa};
    }

    :host(:${be.focusVisible}) .switch {
      outline-offset: 2px;
      outline: solid calc(${Zt} * 1px) ${pr};
    }

    :host([aria-invalid='true']:${be.focusVisible}) .switch {
      outline-color: ${ya};
    }

    .checked-indicator {
      position: absolute;
      top: 5px;
      bottom: 5px;
      background: ${na};
      border-radius: calc(${Et} * 1px);
      transition: all 0.2s ease-in-out;
    }

    .status-message {
      color: ${na};
      cursor: pointer;
      font-size: ${Yt};
      line-height: ${Jt};
    }

    :host([disabled]) .status-message,
    :host([readonly]) .status-message {
      cursor: ${be.disabledCursor};
    }

    .label {
      color: ${na};
      margin-inline-end: calc(${qt} * 2px + 2px);
      font-size: ${Yt};
      line-height: ${Jt};
      cursor: pointer;
    }

    .label__hidden {
      display: none;
      visibility: hidden;
    }

    ::slotted([slot='checked-message']),
    ::slotted([slot='unchecked-message']) {
      margin-inline-start: calc(${qt} * 2px + 2px);
    }

    :host([aria-checked='true']) .checked-indicator {
      background: ${fr};
    }

    :host([aria-checked='true']) .switch {
      background: ${dr};
      border-color: ${dr};
    }

    :host([aria-checked='true']:not([disabled])) .switch:hover {
      background: ${ur};
      border-color: ${ur};
    }

    :host([aria-invalid='true'][aria-checked='true']) .switch {
      background-color: ${va};
      border-color: ${va};
    }

    :host([aria-invalid='true'][aria-checked='true']:not([disabled]))
      .switch:hover {
      background-color: ${$a};
      border-color: ${$a};
    }

    :host([aria-checked='true']:not([disabled]))
      .switch:hover
      .checked-indicator {
      background: ${mr};
    }

    :host([aria-checked='true']:not([disabled])) .switch:active {
      background: ${hr};
      border-color: ${hr};
    }

    :host([aria-invalid='true'][aria-checked='true']:not([disabled]))
      .switch:active {
      background-color: ${xa};
      border-color: ${xa};
    }

    :host([aria-checked='true']:not([disabled]))
      .switch:active
      .checked-indicator {
      background: ${vr};
    }

    :host([aria-checked="true"]:${be.focusVisible}:not([disabled])) .switch {
      outline: solid calc(${Zt} * 1px) ${pr};
    }

    :host([aria-invalid='true'][aria-checked="true"]:${be.focusVisible}:not([disabled])) .switch {
      outline-color: ${ya};
    }

    .unchecked-message {
      display: block;
    }

    .checked-message {
      display: none;
    }

    :host([aria-checked='true']) .unchecked-message {
      display: none;
    }

    :host([aria-checked='true']) .checked-message {
      display: block;
    }
  `.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
      .checked-indicator,
      :host(:not([disabled])) .switch:active .checked-indicator {
        forced-color-adjust: none;
        background: ${Ya.FieldText};
      }
      .switch {
        forced-color-adjust: none;
        background: ${Ya.Field};
        border-color: ${Ya.FieldText};
      }
      :host([aria-invalid='true']) .switch {
        border-style: dashed;
      }
      :host(:not([disabled])) .switch:hover {
        background: ${Ya.HighlightText};
        border-color: ${Ya.Highlight};
      }
      :host([aria-checked='true']) .switch {
        background: ${Ya.Highlight};
        border-color: ${Ya.Highlight};
      }
      :host([aria-checked='true']:not([disabled])) .switch:hover,
      :host(:not([disabled])) .switch:active {
        background: ${Ya.HighlightText};
        border-color: ${Ya.Highlight};
      }
      :host([aria-checked='true']) .checked-indicator {
        background: ${Ya.HighlightText};
      }
      :host([aria-checked='true']:not([disabled]))
        .switch:hover
        .checked-indicator {
        background: ${Ya.Highlight};
      }
      :host([disabled]) {
        opacity: 1;
      }
      :host(:${be.focusVisible}) .switch {
        border-color: ${Ya.Highlight};
        outline-offset: 2px;
        outline: solid calc(${Zt} * 1px) ${Ya.FieldText};
      }
      :host([aria-checked="true"]:${be.focusVisible}:not([disabled])) .switch {
        outline: solid calc(${Zt} * 1px) ${Ya.FieldText};
      }
      :host([disabled]) .checked-indicator {
        background: ${Ya.GrayText};
      }
      :host([disabled]) .switch {
        background: ${Ya.Field};
        border-color: ${Ya.GrayText};
      }
    `),new qi(Xa.css`
        .checked-indicator {
          left: 5px;
          right: calc(((${Ja} / 2) + 1) * 1px);
        }

        :host([aria-checked='true']) .checked-indicator {
          left: calc(((${Ja} / 2) + 1) * 1px);
          right: 5px;
        }
      `,Xa.css`
        .checked-indicator {
          right: 5px;
          left: calc(((${Ja} / 2) + 1) * 1px);
        }

        :host([aria-checked='true']) .checked-indicator {
          right: calc(((${Ja} / 2) + 1) * 1px);
          left: 5px;
        }
      `));class ql extends be.Switch{}const Wl=ql.compose({baseName:"switch",baseClass:be.Switch,template:be.switchTemplate,styles:_l,switch:`\n        <span class="checked-indicator" part="checked-indicator"></span>\n    `});const Ul=(e,t)=>Xa.css`
  ${(0,be.display)("block")} :host {
    box-sizing: border-box;
    font-size: ${Yt};
    line-height: ${Jt};
    padding: 0 calc((6 + (${qt} * 2 * ${_t})) * 1px);
  }
`;const Xl=be.TabPanel.compose({baseName:"tab-panel",template:be.tabPanelTemplate,styles:Ul});const Zl=(e,t)=>Xa.css`
    ${(0,be.display)("inline-flex")} :host {
      box-sizing: border-box;
      font-family: ${It};
      font-size: ${Yt};
      line-height: ${Jt};
      height: calc(${Ja} * 1px);
      padding: calc(${qt} * 5px) calc(${qt} * 4px);
      color: ${aa};
      fill: currentcolor;
      border-radius: 0 0 calc(${Et} * 1px)
        calc(${Et} * 1px);
      border: calc(${Xt} * 1px) solid transparent;
      align-items: center;
      justify-content: center;
      grid-row: 2;
      cursor: pointer;
    }

    :host(:hover) {
      color: ${na};
      fill: currentcolor;
    }

    :host(:active) {
      color: ${na};
      fill: currentcolor;
    }

    :host([disabled]) {
      cursor: ${be.disabledCursor};
      opacity: ${Ut};
    }

    :host([disabled]:hover) {
      color: ${aa};
      background: ${Gr};
    }

    :host([aria-selected='true']) {
      background: ${Br};
      color: ${na};
      fill: currentcolor;
    }

    :host([aria-selected='true']:hover) {
      background: ${Lr};
      color: ${na};
      fill: currentcolor;
    }

    :host([aria-selected='true']:active) {
      background: ${Or};
      color: ${na};
      fill: currentcolor;
    }

    :host(:${be.focusVisible}) {
      outline: none;
      border-color: ${pr};
      box-shadow: 0 0 0 calc((${Zt} - ${Xt}) * 1px)
        ${pr};
    }

    :host(:focus) {
      outline: none;
    }

    :host(.vertical) {
      justify-content: end;
      grid-column: 2;
      border-bottom-left-radius: 0;
      border-top-right-radius: calc(${Et} * 1px);
    }

    :host(.vertical[aria-selected='true']) {
      z-index: 2;
    }

    :host(.vertical:hover) {
      color: ${na};
    }

    :host(.vertical:active) {
      color: ${na};
    }

    :host(.vertical:hover[aria-selected='true']) {
    }
  `.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
      :host {
        forced-color-adjust: none;
        border-color: transparent;
        color: ${Ya.ButtonText};
        fill: currentcolor;
      }
      :host(:hover),
      :host(.vertical:hover),
      :host([aria-selected='true']:hover) {
        background: ${Ya.Highlight};
        color: ${Ya.HighlightText};
        fill: currentcolor;
      }
      :host([aria-selected='true']) {
        background: ${Ya.HighlightText};
        color: ${Ya.Highlight};
        fill: currentcolor;
      }
      :host(:${be.focusVisible}) {
        border-color: ${Ya.ButtonText};
        box-shadow: none;
      }
      :host([disabled]),
      :host([disabled]:hover) {
        opacity: 1;
        color: ${Ya.GrayText};
        background: ${Ya.ButtonFace};
      }
    `));const Yl=be.Tab.compose({baseName:"tab",template:be.tabTemplate,styles:Zl});const Jl=(e,t)=>Xa.css`
    ${(0,be.display)("grid")} :host {
      box-sizing: border-box;
      font-family: ${It};
      font-size: ${Yt};
      line-height: ${Jt};
      color: ${na};
      grid-template-columns: auto 1fr auto;
      grid-template-rows: auto 1fr;
    }

    .tablist {
      display: grid;
      grid-template-rows: auto auto;
      grid-template-columns: auto;
      position: relative;
      width: max-content;
      align-self: end;
      padding: calc(${qt} * 4px) calc(${qt} * 4px) 0;
      box-sizing: border-box;
    }

    .start,
    .end {
      align-self: center;
    }

    .activeIndicator {
      grid-row: 1;
      grid-column: 1;
      width: 100%;
      height: 4px;
      justify-self: center;
      background: ${dr};
      margin-top: 0;
      border-radius: calc(${Et} * 1px)
        calc(${Et} * 1px) 0 0;
    }

    .activeIndicatorTransition {
      transition: transform 0.01s ease-in-out;
    }

    .tabpanel {
      grid-row: 2;
      grid-column-start: 1;
      grid-column-end: 4;
      position: relative;
    }

    :host([orientation='vertical']) {
      grid-template-rows: auto 1fr auto;
      grid-template-columns: auto 1fr;
    }

    :host([orientation='vertical']) .tablist {
      grid-row-start: 2;
      grid-row-end: 2;
      display: grid;
      grid-template-rows: auto;
      grid-template-columns: auto 1fr;
      position: relative;
      width: max-content;
      justify-self: end;
      align-self: flex-start;
      width: 100%;
      padding: 0 calc(${qt} * 4px)
        calc((${Ja} - ${qt}) * 1px) 0;
    }

    :host([orientation='vertical']) .tabpanel {
      grid-column: 2;
      grid-row-start: 1;
      grid-row-end: 4;
    }

    :host([orientation='vertical']) .end {
      grid-row: 3;
    }

    :host([orientation='vertical']) .activeIndicator {
      grid-column: 1;
      grid-row: 1;
      width: 4px;
      height: 100%;
      margin-inline-end: 0px;
      align-self: center;
      background: ${dr};
      border-radius: calc(${Et} * 1px) 0 0
        calc(${Et} * 1px);
    }

    :host([orientation='vertical']) .activeIndicatorTransition {
      transition: transform 0.01s ease-in-out;
    }
  `.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
      .activeIndicator,
      :host([orientation='vertical']) .activeIndicator {
        forced-color-adjust: none;
        background: ${Ya.Highlight};
      }
    `));const Kl=be.Tabs.compose({baseName:"tabs",template:be.tabsTemplate,styles:Jl});const Ql=(e,t)=>Xa.css`
    ${(0,be.display)("inline-block")} :host {
      font-family: ${It};
      outline: none;
      user-select: none;
    }

    .control {
      box-sizing: border-box;
      position: relative;
      color: ${na};
      background: ${Rr};
      border-radius: calc(${Et} * 1px);
      border: calc(${Xt} * 1px) solid ${Ur};
      height: calc(${Ja} * 2px);
      font: inherit;
      font-size: ${Yt};
      line-height: ${Jt};
      padding: calc(${qt} * 2px + 1px);
      width: 100%;
      resize: none;
    }

    :host([aria-invalid='true']) .control {
      border-color: ${va};
    }

    .control:hover:enabled {
      background: ${Pr};
      border-color: ${Xr};
    }

    :host([aria-invalid='true']) .control:hover:enabled {
      border-color: ${$a};
    }

    .control:active:enabled {
      background: ${Ir};
      border-color: ${Zr};
    }

    :host([aria-invalid='true']) .control:active:enabled {
      border-color: ${xa};
    }

    .control:hover,
    .control:${be.focusVisible},
    .control:disabled,
    .control:active {
      outline: none;
    }

    :host(:focus-within) .control {
      border-color: ${pr};
      box-shadow: 0 0 0 calc((${Zt} - ${Xt}) * 1px)
        ${pr};
    }

    :host([aria-invalid='true']:focus-within) .control {
      border-color: ${ya};
      box-shadow: 0 0 0 calc((${Zt} - ${Xt}) * 1px)
        ${ya};
    }

    :host([appearance='filled']) .control {
      background: ${Br};
    }

    :host([appearance='filled']:hover:not([disabled])) .control {
      background: ${Lr};
    }

    :host([resize='both']) .control {
      resize: both;
    }

    :host([resize='horizontal']) .control {
      resize: horizontal;
    }

    :host([resize='vertical']) .control {
      resize: vertical;
    }

    .label {
      display: block;
      color: ${na};
      cursor: pointer;
      font-size: ${Yt};
      line-height: ${Jt};
      margin-bottom: 4px;
    }

    .label__hidden {
      display: none;
      visibility: hidden;
    }

    :host([disabled]) .label,
    :host([readonly]) .label,
    :host([readonly]) .control,
    :host([disabled]) .control {
      cursor: ${be.disabledCursor};
    }
    :host([disabled]) {
      opacity: ${Ut};
    }
    :host([disabled]) .control {
      border-color: ${sa};
    }

    :host([cols]) {
      width: initial;
    }

    :host([rows]) .control {
      height: initial;
    }
  `.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
      :host([disabled]) {
        opacity: 1;
      }

      :host([aria-invalid='true']) .control {
        border-style: dashed;
      }
    `));class es extends be.TextArea{constructor(){super(...arguments);this.appearance="outline"}}ii([Xa.attr],es.prototype,"appearance",void 0);const ts=es.compose({baseName:"text-area",baseClass:be.TextArea,template:be.textAreaTemplate,styles:Ql,shadowOptions:{delegatesFocus:true}});const os=(e,t)=>Xa.css`
  ${Hn}

  .start,
    .end {
    display: flex;
  }
`;class rs extends be.TextField{constructor(){super(...arguments);this.appearance="outline"}}ii([Xa.attr],rs.prototype,"appearance",void 0);const as=rs.compose({baseName:"text-field",baseClass:be.TextField,template:be.textFieldTemplate,styles:os,shadowOptions:{delegatesFocus:true}});var is=o(62540);var ns=o(88388);const ls=(e,t)=>Xa.css`
    ${(0,be.display)("inline-flex")} :host {
      --toolbar-item-gap: calc(
        (var(--design-unit) + calc(var(--density) + 2)) * 1px
      );
      background-color: ${lr};
      border-radius: calc(${Et} * 1px);
      fill: currentcolor;
      padding: var(--toolbar-item-gap);
    }

    :host(${be.focusVisible}) {
      outline: calc(${Xt} * 1px) solid ${pr};
    }

    .positioning-region {
      align-items: flex-start;
      display: inline-flex;
      flex-flow: row wrap;
      justify-content: flex-start;
      width: 100%;
      height: 100%;
    }

    :host([orientation='vertical']) .positioning-region {
      flex-direction: column;
    }

    ::slotted(:not([slot])) {
      flex: 0 0 auto;
      margin: 0 var(--toolbar-item-gap);
    }

    :host([orientation='vertical']) ::slotted(:not([slot])) {
      margin: var(--toolbar-item-gap) 0;
    }

    .start,
    .end {
      display: flex;
      margin: auto;
      margin-inline: 0;
    }

    ::slotted(svg) {
      /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */
      width: 16px;
      height: 16px;
    }
  `.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
      :host(:${be.focusVisible}) {
        box-shadow: 0 0 0 calc(${Zt} * 1px)
          ${Ya.Highlight};
        color: ${Ya.ButtonText};
        forced-color-adjust: none;
      }
    `));const ss=Object.freeze({[jn.uf.ArrowUp]:{[Pl.i.vertical]:-1},[jn.uf.ArrowDown]:{[Pl.i.vertical]:1},[jn.uf.ArrowLeft]:{[Pl.i.horizontal]:{[fe.N.ltr]:-1,[fe.N.rtl]:1}},[jn.uf.ArrowRight]:{[Pl.i.horizontal]:{[fe.N.ltr]:1,[fe.N.rtl]:-1}}});class cs extends be.FoundationElement{constructor(){super(...arguments);this._activeIndex=0;this.direction=fe.N.ltr;this.orientation=Pl.i.horizontal}get activeIndex(){Xa.Observable.track(this,"activeIndex");return this._activeIndex}set activeIndex(e){if(this.$fastController.isConnected){this._activeIndex=(0,is.b9)(0,this.focusableElements.length-1,e);Xa.Observable.notify(this,"activeIndex")}}slottedItemsChanged(){if(this.$fastController.isConnected){this.reduceFocusableElements()}}mouseDownHandler(e){var t;const o=(t=this.focusableElements)===null||t===void 0?void 0:t.findIndex((t=>t.contains(e.target)));if(o>-1&&this.activeIndex!==o){this.setFocusedElement(o)}return true}childItemsChanged(e,t){if(this.$fastController.isConnected){this.reduceFocusableElements()}}connectedCallback(){super.connectedCallback();this.direction=(0,be.getDirection)(this)}focusinHandler(e){const t=e.relatedTarget;if(!t||this.contains(t)){return}this.setFocusedElement()}getDirectionalIncrementer(e){var t,o,r,a,i;return(i=(r=(o=(t=ss[e])===null||t===void 0?void 0:t[this.orientation])===null||o===void 0?void 0:o[this.direction])!==null&&r!==void 0?r:(a=ss[e])===null||a===void 0?void 0:a[this.orientation])!==null&&i!==void 0?i:0}keydownHandler(e){const t=e.key;if(!(t in jn.uf)||e.defaultPrevented||e.shiftKey){return true}const o=this.getDirectionalIncrementer(t);if(!o){return!e.target.closest("[role=radiogroup]")}const r=this.activeIndex+o;if(this.focusableElements[r]){e.preventDefault()}this.setFocusedElement(r);return true}get allSlottedItems(){return[...this.start.assignedElements(),...this.slottedItems,...this.end.assignedElements()]}reduceFocusableElements(){var e;const t=(e=this.focusableElements)===null||e===void 0?void 0:e[this.activeIndex];this.focusableElements=this.allSlottedItems.reduce(us.reduceFocusableItems,[]);const o=this.focusableElements.indexOf(t);this.activeIndex=Math.max(0,o);this.setFocusableElements()}setFocusedElement(e=this.activeIndex){this.activeIndex=e;this.setFocusableElements();if(this.focusableElements[this.activeIndex]&&this.contains(document.activeElement)){this.focusableElements[this.activeIndex].focus()}}static reduceFocusableItems(e,t){var o,r,a,i;const n=t.getAttribute("role")==="radio";const l=(r=(o=t.$fastController)===null||o===void 0?void 0:o.definition.shadowOptions)===null||r===void 0?void 0:r.delegatesFocus;const s=Array.from((i=(a=t.shadowRoot)===null||a===void 0?void 0:a.querySelectorAll("*"))!==null&&i!==void 0?i:[]).some((e=>(0,ns.EB)(e)));if(!t.hasAttribute("disabled")&&!t.hasAttribute("hidden")&&((0,ns.EB)(t)||n||l||s)){e.push(t);return e}if(t.childElementCount){return e.concat(Array.from(t.children).reduce(us.reduceFocusableItems,[]))}return e}setFocusableElements(){if(this.$fastController.isConnected&&this.focusableElements.length>0){this.focusableElements.forEach(((e,t)=>{e.tabIndex=this.activeIndex===t?0:-1}))}}}ii([Xa.observable],cs.prototype,"direction",void 0);ii([Xa.attr],cs.prototype,"orientation",void 0);ii([Xa.observable],cs.prototype,"slottedItems",void 0);ii([Xa.observable],cs.prototype,"slottedLabel",void 0);ii([Xa.observable],cs.prototype,"childItems",void 0);class ds{}ii([(0,Xa.attr)({attribute:"aria-labelledby"})],ds.prototype,"ariaLabelledby",void 0);ii([(0,Xa.attr)({attribute:"aria-label"})],ds.prototype,"ariaLabel",void 0);(0,be.applyMixins)(ds,be.ARIAGlobalStatesAndProperties);(0,be.applyMixins)(cs,be.StartEnd,ds);class us extends cs{connectedCallback(){super.connectedCallback();const e=(0,be.composedParent)(this);if(e){lr.setValueFor(this,(t=>Jr.getValueFor(t).evaluate(t,lr.getValueFor(e))))}}}const hs=us.compose({baseName:"toolbar",baseClass:cs,template:be.toolbarTemplate,styles:ls,shadowOptions:{delegatesFocus:true}});const ps=(e,t)=>{const o=e.tagFor(be.AnchoredRegion);return Xa.css`
    :host {
      contain: size;
      overflow: visible;
      height: 0;
      width: 0;
    }

    .tooltip {
      box-sizing: border-box;
      border-radius: calc(${Et} * 1px);
      border: calc(${Xt} * 1px) solid ${ea};
      box-shadow: 0 0 0 1px ${ea} inset;
      background: ${Br};
      color: ${na};
      padding: 4px;
      height: fit-content;
      width: fit-content;
      font-family: ${It};
      font-size: ${Yt};
      line-height: ${Jt};
      white-space: nowrap;
      /* TODO: a mechanism to manage z-index across components
                    https://github.com/microsoft/fast/issues/3813 */
      z-index: 10000;
    }

    ${o} {
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: visible;
      flex-direction: row;
    }

    ${o}.right,
    ${o}.left {
      flex-direction: column;
    }

    ${o}.top .tooltip {
      margin-bottom: 4px;
    }

    ${o}.bottom .tooltip {
      margin-top: 4px;
    }

    ${o}.left .tooltip {
      margin-right: 4px;
    }

    ${o}.right .tooltip {
      margin-left: 4px;
    }

    ${o}.top.left .tooltip,
            ${o}.top.right .tooltip {
      margin-bottom: 0px;
    }

    ${o}.bottom.left .tooltip,
            ${o}.bottom.right .tooltip {
      margin-top: 0px;
    }

    ${o}.top.left .tooltip,
            ${o}.bottom.left .tooltip {
      margin-right: 0px;
    }

    ${o}.top.right .tooltip,
            ${o}.bottom.right .tooltip {
      margin-left: 0px;
    }
  `.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
      :host([disabled]) {
        opacity: 1;
      }
    `))};const gs=be.Tooltip.compose({baseName:"tooltip",template:be.tooltipTemplate,styles:ps});const bs=Xa.css`
  .expand-collapse-glyph {
    transform: rotate(0deg);
  }
  :host(.nested) .expand-collapse-button {
    left: var(
      --expand-collapse-button-nested-width,
      calc(${Ja} * -1px)
    );
  }
  :host([selected])::after {
    left: calc(${Zt} * 1px);
  }
  :host([expanded]) > .positioning-region .expand-collapse-glyph {
    transform: rotate(90deg);
  }
`;const fs=Xa.css`
  .expand-collapse-glyph {
    transform: rotate(180deg);
  }
  :host(.nested) .expand-collapse-button {
    right: var(
      --expand-collapse-button-nested-width,
      calc(${Ja} * -1px)
    );
  }
  :host([selected])::after {
    right: calc(${Zt} * 1px);
  }
  :host([expanded]) > .positioning-region .expand-collapse-glyph {
    transform: rotate(90deg);
  }
`;const ms=Xa.cssPartial`((${At} / 2) * ${qt}) + ((${qt} * ${_t}) / 2)`;const vs=be.DesignToken.create("tree-item-expand-collapse-hover").withDefault((e=>{const t=Mr.getValueFor(e);return t.evaluate(e,t.evaluate(e).hover).hover}));const $s=be.DesignToken.create("tree-item-expand-collapse-selected-hover").withDefault((e=>{const t=zr.getValueFor(e);const o=Mr.getValueFor(e);return o.evaluate(e,t.evaluate(e).rest).hover}));const xs=(e,t)=>Xa.css`
    /**
     * This animation exists because when tree item children are conditionally loaded
     * there is a visual bug where the DOM exists but styles have not yet been applied (essentially FOUC).
     * This subtle animation provides a ever so slight timing adjustment for loading that solves the issue.
     */
    @keyframes treeItemLoading {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

    ${(0,be.display)("block")} :host {
      contain: content;
      position: relative;
      outline: none;
      color: ${na};
      background: ${Gr};
      cursor: pointer;
      font-family: ${It};
      --expand-collapse-button-size: calc(${Ja} * 1px);
      --tree-item-nested-width: 0;
    }

    :host(:focus) > .positioning-region {
      outline: none;
    }

    :host(:focus) .content-region {
      outline: none;
    }

    :host(:${be.focusVisible}) .positioning-region {
      border-color: ${pr};
      box-shadow: 0 0 0 calc((${Zt} - ${Xt}) * 1px)
        ${pr} inset;
      color: ${na};
    }

    .positioning-region {
      display: flex;
      position: relative;
      box-sizing: border-box;
      background: ${Gr};
      border: transparent calc(${Xt} * 1px) solid;
      border-radius: calc(${Et} * 1px);
      height: calc((${Ja} + 1) * 1px);
    }

    .positioning-region::before {
      content: '';
      display: block;
      width: var(--tree-item-nested-width);
      flex-shrink: 0;
    }

    :host(:not([disabled])) .positioning-region:hover {
      background: ${Er};
    }

    :host(:not([disabled])) .positioning-region:active {
      background: ${_r};
    }

    .content-region {
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
      width: 100%;
      min-width: 0;
      height: calc(${Ja} * 1px);
      margin-inline-start: calc(${qt} * 2px + 8px);
      font-size: ${Yt};
      line-height: ${Jt};
      font-weight: 400;
    }

    .items {
      /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */
      font-size: calc(1em + (${qt} + 16) * 1px);
    }

    .expand-collapse-button {
      background: none;
      border: none;
      outline: none;
      /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */
      width: calc((${ms} + (${qt} * 2)) * 1px);
      height: calc((${ms} + (${qt} * 2)) * 1px);
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      margin-left: 6px;
      margin-right: 6px;
    }

    .expand-collapse-glyph {
      /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */
      width: 16px;
      height: 16px;
      transition: transform 0.1s linear;

      pointer-events: none;
      fill: currentcolor;
    }

    .start,
    .end {
      display: flex;
      fill: currentcolor;
    }

    ::slotted(svg) {
      /* TODO: adaptive typography https://github.com/microsoft/fast/issues/2432 */
      width: 16px;
      height: 16px;
    }

    .start {
      /* TODO: horizontalSpacing https://github.com/microsoft/fast/issues/2766 */
      margin-inline-end: calc(${qt} * 2px + 2px);
    }

    .end {
      /* TODO: horizontalSpacing https://github.com/microsoft/fast/issues/2766 */
      margin-inline-start: calc(${qt} * 2px + 2px);
    }

    :host([expanded]) > .items {
      animation: treeItemLoading ease-in 10ms;
      animation-iteration-count: 1;
      animation-fill-mode: forwards;
    }

    :host([disabled]) .content-region {
      opacity: ${Ut};
      cursor: ${be.disabledCursor};
    }

    :host(.nested) .content-region {
      position: relative;
      margin-inline-start: var(--expand-collapse-button-size);
    }

    :host(.nested) .expand-collapse-button {
      position: absolute;
    }

    :host(.nested:not([disabled])) .expand-collapse-button:hover {
      background: ${vs};
    }

    :host([selected]) .positioning-region {
      background: ${Br};
    }

    :host([selected]:not([disabled])) .positioning-region:hover {
      background: ${Lr};
    }

    :host([selected]:not([disabled])) .positioning-region:active {
      background: ${Or};
    }

    :host([selected]:not([disabled])) .expand-collapse-button:hover {
      background: ${$s};
    }

    :host([selected])::after {
      /* The background needs to be calculated based on the selected background state
         for this control. We currently have no way of changing that, so setting to
         accent-foreground-rest for the time being */
      background: ${Vr};
      border-radius: calc(${Et} * 1px);
      content: '';
      display: block;
      position: absolute;
      top: calc((${Ja} / 4) * 1px);
      width: 3px;
      height: calc((${Ja} / 2) * 1px);
    }

    ::slotted(${e.tagFor(be.TreeItem)}) {
      --tree-item-nested-width: 1em;
      --expand-collapse-button-nested-width: calc(${Ja} * -1px);
    }
  `.withBehaviors(new qi(bs,fs),(0,be.forcedColorsStylesheetBehavior)(Xa.css`
      :host {
        forced-color-adjust: none;
        border-color: transparent;
        background: ${Ya.Field};
        color: ${Ya.FieldText};
      }
      :host .content-region .expand-collapse-glyph {
        fill: ${Ya.FieldText};
      }
      :host .positioning-region:hover,
      :host([selected]) .positioning-region {
        background: ${Ya.Highlight};
      }
      :host .positioning-region:hover .content-region,
      :host([selected]) .positioning-region .content-region {
        color: ${Ya.HighlightText};
      }
      :host .positioning-region:hover .content-region .expand-collapse-glyph,
      :host .positioning-region:hover .content-region .start,
      :host .positioning-region:hover .content-region .end,
      :host([selected]) .content-region .expand-collapse-glyph,
      :host([selected]) .content-region .start,
      :host([selected]) .content-region .end {
        fill: ${Ya.HighlightText};
      }
      :host([selected])::after {
        background: ${Ya.Field};
      }
      :host(:${be.focusVisible}) .positioning-region {
        border-color: ${Ya.FieldText};
        box-shadow: 0 0 0 2px inset ${Ya.Field};
        color: ${Ya.FieldText};
      }
      :host([disabled]) .content-region,
      :host([disabled]) .positioning-region:hover .content-region {
        opacity: 1;
        color: ${Ya.GrayText};
      }
      :host([disabled]) .content-region .expand-collapse-glyph,
      :host([disabled]) .content-region .start,
      :host([disabled]) .content-region .end,
      :host([disabled])
        .positioning-region:hover
        .content-region
        .expand-collapse-glyph,
      :host([disabled]) .positioning-region:hover .content-region .start,
      :host([disabled]) .positioning-region:hover .content-region .end {
        fill: ${Ya.GrayText};
      }
      :host([disabled]) .positioning-region:hover {
        background: ${Ya.Field};
      }
      .expand-collapse-glyph,
      .start,
      .end {
        fill: ${Ya.FieldText};
      }
      :host(.nested) .expand-collapse-button:hover {
        background: ${Ya.Field};
      }
      :host(.nested) .expand-collapse-button:hover .expand-collapse-glyph {
        fill: ${Ya.FieldText};
      }
    `));const ys=be.TreeItem.compose({baseName:"tree-item",template:be.treeItemTemplate,styles:xs,expandCollapseGlyph:`\n        <svg\n            viewBox="0 0 16 16"\n            xmlns="http://www.w3.org/2000/svg"\n            class="expand-collapse-glyph"\n        >\n            <path\n                d="M5.00001 12.3263C5.00124 12.5147 5.05566 12.699 5.15699 12.8578C5.25831 13.0167 5.40243 13.1437 5.57273 13.2242C5.74304 13.3047 5.9326 13.3354 6.11959 13.3128C6.30659 13.2902 6.4834 13.2152 6.62967 13.0965L10.8988 8.83532C11.0739 8.69473 11.2153 8.51658 11.3124 8.31402C11.4096 8.11146 11.46 7.88966 11.46 7.66499C11.46 7.44033 11.4096 7.21853 11.3124 7.01597C11.2153 6.81341 11.0739 6.63526 10.8988 6.49467L6.62967 2.22347C6.48274 2.10422 6.30501 2.02912 6.11712 2.00691C5.92923 1.9847 5.73889 2.01628 5.56823 2.09799C5.39757 2.17969 5.25358 2.30817 5.153 2.46849C5.05241 2.62882 4.99936 2.8144 5.00001 3.00369V12.3263Z"\n            />\n        </svg>\n    `});const ws=(e,t)=>Xa.css`
  ${(0,be.display)("flex")} :host {
    flex-direction: column;
    align-items: stretch;
    min-width: fit-content;
    font-size: 0;
  }

  :host:focus-visible {
    outline: none;
  }
`;const ks=be.TreeView.compose({baseName:"tree-view",template:be.treeViewTemplate,styles:ws});const Fs=(e,t)=>Xa.css`
  .region {
    z-index: 1000;
    overflow: hidden;
    display: flex;
    font-family: ${It};
    font-size: ${Yt};
  }

  .loaded {
    opacity: 1;
    pointer-events: none;
  }

  .loading-display,
  .no-options-display {
    background: ${lr};
    width: 100%;
    min-height: calc(${Ja} * 1px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    padding: calc(${qt} * 1px);
  }

  .loading-progress {
    width: 42px;
    height: 42px;
  }

  .bottom {
    flex-direction: column;
  }

  .top {
    flex-direction: column-reverse;
  }
`;const Cs=(e,t)=>Xa.css`
    :host {
      background: ${lr};
      --elevation: 11;
      /* TODO: a mechanism to manage z-index across components
            https://github.com/microsoft/fast/issues/3813 */
      z-index: 1000;
      display: flex;
      width: 100%;
      max-height: 100%;
      min-height: 58px;
      box-sizing: border-box;
      flex-direction: column;
      overflow-y: auto;
      overflow-x: hidden;
      pointer-events: auto;
      border-radius: calc(${Et} * 1px);
      padding: calc(${qt} * 1px) 0;
      border: calc(${Xt} * 1px) solid transparent;
      ${un}
    }

    .suggestions-available-alert {
      height: 0;
      opacity: 0;
      overflow: hidden;
    }
  `.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
      :host {
        background: ${Ya.Canvas};
        border-color: ${Ya.CanvasText};
      }
    `));const Ss=(e,t)=>Xa.css`
    :host {
      display: flex;
      align-items: center;
      justify-items: center;
      font-family: ${It};
      border-radius: calc(${Et} * 1px);
      border: calc(${Zt} * 1px) solid transparent;
      box-sizing: border-box;
      background: ${Gr};
      color: ${na};
      cursor: pointer;
      fill: currentcolor;
      font-size: ${Yt};
      min-height: calc(${Ja} * 1px);
      line-height: ${Jt};
      margin: 0 calc(${qt} * 1px);
      outline: none;
      overflow: hidden;
      padding: 0 calc(${qt} * 2.25px);
      user-select: none;
      white-space: nowrap;
    }

    :host(:${be.focusVisible}[role="listitem"]) {
      border-color: ${ea};
      background: ${qr};
    }

    :host(:hover) {
      background: ${Er};
    }

    :host(:active) {
      background: ${_r};
    }

    :host([aria-selected='true']) {
      background: ${dr};
      color: ${fr};
    }

    :host([aria-selected='true']:hover) {
      background: ${ur};
      color: ${mr};
    }

    :host([aria-selected='true']:active) {
      background: ${hr};
      color: ${vr};
    }
  `.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
      :host {
        border-color: transparent;
        forced-color-adjust: none;
        color: ${Ya.ButtonText};
        fill: currentcolor;
      }

      :host(:not([aria-selected='true']):hover),
      :host([aria-selected='true']) {
        background: ${Ya.Highlight};
        color: ${Ya.HighlightText};
      }

      :host([disabled]),
      :host([disabled]:not([aria-selected='true']):hover) {
        background: ${Ya.Canvas};
        color: ${Ya.GrayText};
        fill: currentcolor;
        opacity: 1;
      }
    `));const Vs=(e,t)=>Xa.css`
        :host {
            display: flex;
            flex-direction: row;
            column-gap: calc(${qt} * 1px);
            row-gap: calc(${qt} * 1px);
            flex-wrap: wrap;
        }

        ::slotted([role="combobox"]) {
            min-width: 260px;
            width: auto;
            box-sizing: border-box;
            color: ${na};
            background: ${Rr};
            border-radius: calc(${Et} * 1px);
            border: calc(${Xt} * 1px) solid ${dr};
            height: calc(${Ja} * 1px);
            font-family: ${It};
            outline: none;
            user-select: none;
            font-size: ${Yt};
            line-height: ${Jt};
            padding: 0 calc(${qt} * 2px + 1px);
        }

        ::slotted([role="combobox"]:active) { {
            background: ${Pr};
            border-color: ${hr};
        }

        ::slotted([role="combobox"]:focus-within) {
            border-color: ${ea};
            box-shadow: 0 0 0 1px ${ea} inset;
        }
    `.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
      ::slotted([role='combobox']:active) {
        background: ${Ya.Field};
        border-color: ${Ya.Highlight};
      }
      ::slotted([role='combobox']:focus-within) {
        border-color: ${Ya.Highlight};
        box-shadow: 0 0 0 1px ${Ya.Highlight} inset;
      }
      ::slotted(input:placeholder) {
        color: ${Ya.GrayText};
      }
    `));const Ts=(e,t)=>Xa.css`
    :host {
      display: flex;
      align-items: center;
      justify-items: center;
      font-family: ${It};
      border-radius: calc(${Et} * 1px);
      border: calc(${Zt} * 1px) solid transparent;
      box-sizing: border-box;
      background: ${Gr};
      color: ${na};
      cursor: pointer;
      fill: currentcolor;
      font-size: ${Yt};
      height: calc(${Ja} * 1px);
      line-height: ${Jt};
      outline: none;
      overflow: hidden;
      padding: 0 calc(${qt} * 2.25px);
      user-select: none;
      white-space: nowrap;
    }

    :host(:hover) {
      background: ${Er};
    }

    :host(:active) {
      background: ${_r};
    }

    :host(:${be.focusVisible}) {
      background: ${qr};
      border-color: ${ea};
    }

    :host([aria-selected='true']) {
      background: ${dr};
      color: ${vr};
    }
  `.withBehaviors((0,be.forcedColorsStylesheetBehavior)(Xa.css`
      :host {
        border-color: transparent;
        forced-color-adjust: none;
        color: ${Ya.ButtonText};
        fill: currentcolor;
      }

      :host(:not([aria-selected='true']):hover),
      :host([aria-selected='true']) {
        background: ${Ya.Highlight};
        color: ${Ya.HighlightText};
      }

      :host([disabled]),
      :host([disabled]:not([aria-selected='true']):hover) {
        background: ${Ya.Canvas};
        color: ${Ya.GrayText};
        fill: currentcolor;
        opacity: 1;
      }
    `));const Ds=be.Picker.compose({baseName:"draft-picker",template:be.pickerTemplate,styles:Fs,shadowOptions:{}});class js extends be.PickerMenu{connectedCallback(){lr.setValueFor(this,Ko);super.connectedCallback()}}const zs=js.compose({baseName:"draft-picker-menu",baseClass:be.PickerMenu,template:be.pickerMenuTemplate,styles:Cs});const Bs=be.PickerMenuOption.compose({baseName:"draft-picker-menu-option",template:be.pickerMenuOptionTemplate,styles:Ss});const Ls=be.PickerList.compose({baseName:"draft-picker-list",template:be.pickerListTemplate,styles:Vs});const Os=be.PickerListItem.compose({baseName:"draft-picker-list-item",template:be.pickerListItemTemplate,styles:Ts});const Ns={jpAccordion:ei,jpAccordionItem:Qa,jpAnchor:Gi,jpAnchoredRegion:_i,jpAvatar:Ki,jpBadge:en,jpBreadcrumb:on,jpBreadcrumbItem:an,jpButton:sn,jpCard:gn,jpCheckbox:vn,jpCombobox:kn,jpDataGrid:Dn,jpDataGridCell:Vn,jpDataGridRow:Tn,jpDateField:In,jpDesignSystemProvider:Wn,jpDialog:Xn,jpDisclosure:Jn,jpDivider:Qn,jpListbox:tl,jpMenu:al,jpMenuItem:nl,jpNumberField:cl,jpOption:ul,jpPicker:Ds,jpPickerList:Ls,jpPickerListItem:Os,jpPickerMenu:zs,jpPickerMenuOption:Bs,jpProgress:pl,jpProgressRing:bl,jpRadio:$l,jpRadioGroup:wl,jpSearch:Vl,jpSelect:jl,jpSkeleton:Bl,jpSlider:Rl,jpSliderLabel:El,jpSwitch:Wl,jpTab:Yl,jpTabPanel:Xl,jpTabs:Kl,jpTextArea:ts,jpTextField:as,jpToolbar:hs,jpTooltip:gs,jpTreeItem:ys,jpTreeView:ks,register(e,...t){if(!e){return}for(const o in this){if(o==="register"){continue}this[o]().register(e,...t)}}};function Hs(e){return be.DesignSystem.getOrCreate(e).withPrefix("jp")}}}]);