()=>this.selectSwatch(e)}
                      @keydown=${e=>!this.disabled&&"Enter"===e.key&&this.setColor(t.hexa)}
                    >
                      <div
                        class="color-picker__swatch-color"
                        style=${Bs({backgroundColor:t.hexa})}
                      ></div>
                    </div>
                  `:""}))}
              </div>
            `:""}
      </div>
    `;return this.inline?r:vo`
      <sl-dropdown
        class="color-dropdown"
        aria-disabled=${this.disabled?"true":"false"}
        .containing-element=${this}
        ?disabled=${this.disabled}
        ?hoist=${this.hoist}
        @sl-after-hide=${this.handleAfterHide}
      >
        <button
          part="trigger"
          slot="trigger"
          class=${bi({"color-dropdown__trigger":!0,"color-dropdown__trigger--disabled":this.disabled,"color-dropdown__trigger--small":"small"===this.size,"color-dropdown__trigger--medium":"medium"===this.size,"color-dropdown__trigger--large":"large"===this.size,"color-dropdown__trigger--empty":this.isEmpty,"color-dropdown__trigger--focused":this.hasFocus,"color-picker__transparent-bg":!0})}
          style=${Bs({color:this.getHexString(this.hue,this.saturation,this.brightness,this.alpha)})}
          type="button"
        >
          <sl-visually-hidden>
            <slot name="label">${this.label}</slot>
          </sl-visually-hidden>
        </button>
        ${r}
      </sl-dropdown>
    `}};cl.styles=[Do,Fa],cl.dependencies={"sl-button-group":Ds,"sl-button":Ba,"sl-dropdown":Ha,"sl-icon":Nn,"sl-input":Ma,"sl-visually-hidden":qn},Vo([tr('[part~="base"]')],cl.prototype,"base",2),Vo([tr('[part~="input"]')],cl.prototype,"input",2),Vo([tr(".color-dropdown")],cl.prototype,"dropdown",2),Vo([tr('[part~="preview"]')],cl.prototype,"previewButton",2),Vo([tr('[part~="trigger"]')],cl.prototype,"trigger",2),Vo([Qo()],cl.prototype,"hasFocus",2),Vo([Qo()],cl.prototype,"isDraggingGridHandle",2),Vo([Qo()],cl.prototype,"isEmpty",2),Vo([Qo()],cl.prototype,"inputValue",2),Vo([Qo()],cl.prototype,"hue",2),Vo([Qo()],cl.prototype,"saturation",2),Vo([Qo()],cl.prototype,"brightness",2),Vo([Qo()],cl.prototype,"alpha",2),Vo([Xo()],cl.prototype,"value",2),Vo([Qi()],cl.prototype,"defaultValue",2),Vo([Xo()],cl.prototype,"label",2),Vo([Xo()],cl.prototype,"format",2),Vo([Xo({type:Boolean,reflect:!0})],cl.prototype,"inline",2),Vo([Xo({reflect:!0})],cl.prototype,"size",2),Vo([Xo({attribute:"no-format-toggle",type:Boolean})],cl.prototype,"noFormatToggle",2),Vo([Xo()],cl.prototype,"name",2),Vo([Xo({type:Boolean,reflect:!0})],cl.prototype,"disabled",2),Vo([Xo({type:Boolean})],cl.prototype,"hoist",2),Vo([Xo({type:Boolean})],cl.prototype,"opacity",2),Vo([Xo({type:Boolean})],cl.prototype,"uppercase",2),Vo([Xo()],cl.prototype,"swatches",2),Vo([Xo({reflect:!0})],cl.prototype,"form",2),Vo([Xo({type:Boolean,reflect:!0})],cl.prototype,"required",2),Vo([Jo({passive:!1})],cl.prototype,"handleTouchMove",1),Vo([Vi("format",{waitUntilFirstUpdate:!0})],cl.prototype,"handleFormatChange",1),Vo([Vi("opacity",{waitUntilFirstUpdate:!0})],cl.prototype,"handleOpacityChange",1),Vo([Vi("value")],cl.prototype,"handleValueChange",1);cl.define("sl-color-picker");Ki({tagName:"sl-color-picker",elementClass:cl,react:p,events:{onSlBlur:"sl-blur",onSlChange:"sl-change",onSlFocus:"sl-focus",onSlInput:"sl-input",onSlInvalid:"sl-invalid"},displayName:"SlColorPicker"});var dl=At`
  :host {
    --error-color: var(--sl-color-danger-600);
    --success-color: var(--sl-color-success-600);

    display: inline-block;
  }

  .copy-button__button {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    background: none;
    border: none;
    border-radius: var(--sl-border-radius-medium);
    font-size: inherit;
    color: inherit;
    padding: var(--sl-spacing-x-small);
    cursor: pointer;
    transition: var(--sl-transition-x-fast) color;
  }

  .copy-button--success .copy-button__button {
    color: var(--success-color);
  }

  .copy-button--error .copy-button__button {
    color: var(--error-color);
  }

  .copy-button__button:focus-visible {
    outline: var(--sl-focus-ring);
    outline-offset: var(--sl-focus-ring-offset);
  }

  .copy-button__button[disabled] {
    opacity: 0.5;
    cursor: not-allowed !important;
  }

  slot {
    display: inline-flex;
  }
`,hl=class extends rr{constructor(){super(...arguments),this.localize=new Ui(this),this.isCopying=!1,this.status="rest",this.value="",this.from="",this.disabled=!1,this.copyLabel="",this.successLabel="",this.errorLabel="",this.feedbackDuration=1e3,this.tooltipPlacement="top",this.hoist=!1}async handleCopy(){if(this.disabled||this.isCopying)return;this.isCopying=!0;let e=this.value;if(this.from){const t=this.getRootNode(),o=this.from.includes("."),r=this.from.includes("[")&&this.from.includes("]");let n=this.from,c="";o?[n,c]=this.from.trim().split("."):r&&([n,c]=this.from.trim().replace(/\]$/,"").split("["));const d="getElementById"in t?t.getElementById(n):null;d?e=r?d.getAttribute(c)||"":o?d[c]||"":d.textContent||"":(this.showStatus("error"),this.emit("sl-error"))}if(e)try{await navigator.clipboard.writeText(e),this.showStatus("success"),this.emit("sl-copy",{detail:{value:e}})}catch(e){this.showStatus("error"),this.emit("sl-error")}else this.showStatus("error"),this.emit("sl-error")}async showStatus(e){const t=this.copyLabel||this.localize.term("copy"),o=this.successLabel||this.localize.term("copied"),r=this.errorLabel||this.localize.term("error"),n="success"===e?this.successIcon:this.errorIcon,c=Ti(this,"copy.in",{dir:"ltr"}),d=Ti(this,"copy.out",{dir:"ltr"});this.tooltip.content="success"===e?o:r,await this.copyIcon.animate(d.keyframes,d.options).finished,this.copyIcon.hidden=!0,this.status=e,n.hidden=!1,await n.animate(c.keyframes,c.options).finished,setTimeout((async()=>{await n.animate(d.keyframes,d.options).finished,n.hidden=!0,this.status="rest",this.copyIcon.hidden=!1,await this.copyIcon.animate(c.keyframes,c.options).finished,this.tooltip.content=t,this.isCopying=!1}),this.feedbackDuration)}render(){const e=this.copyLabel||this.localize.term("copy");return vo`
      <sl-tooltip
        class=${bi({"copy-button":!0,"copy-button--success":"success"===this.status,"copy-button--error":"error"===this.status})}
        content=${e}
        placement=${this.tooltipPlacement}
        ?disabled=${this.disabled}
        ?hoist=${this.hoist}
        exportparts="
          base:tooltip__base,
          base__popup:tooltip__base__popup,
          base__arrow:tooltip__base__arrow,
          body:tooltip__body
        "
      >
        <button
          class="copy-button__button"
          part="button"
          type="button"
          ?disabled=${this.disabled}
          @click=${this.handleCopy}
        >
          <slot part="copy-icon" name="copy-icon">
            <sl-icon library="system" name="copy"></sl-icon>
          </slot>
          <slot part="success-icon" name="success-icon" hidden>
            <sl-icon library="system" name="check"></sl-icon>
          </slot>
          <slot part="error-icon" name="error-icon" hidden>
            <sl-icon library="system" name="x-lg"></sl-icon>
          </slot>
        </button>
      </sl-tooltip>
    `}};hl.styles=[Do,dl],hl.dependencies={"sl-icon":Nn,"sl-tooltip":ji},Vo([tr('slot[name="copy-icon"]')],hl.prototype,"copyIcon",2),Vo([tr('slot[name="success-icon"]')],hl.prototype,"successIcon",2),Vo([tr('slot[name="error-icon"]')],hl.prototype,"errorIcon",2),Vo([tr("sl-tooltip")],hl.prototype,"tooltip",2),Vo([Qo()],hl.prototype,"isCopying",2),Vo([Qo()],hl.prototype,"status",2),Vo([Xo()],hl.prototype,"value",2),Vo([Xo()],hl.prototype,"from",2),Vo([Xo({type:Boolean,reflect:!0})],hl.prototype,"disabled",2),Vo([Xo({attribute:"copy-label"})],hl.prototype,"copyLabel",2),Vo([Xo({attribute:"success-label"})],hl.prototype,"successLabel",2),Vo([Xo({attribute:"error-label"})],hl.prototype,"errorLabel",2),Vo([Xo({attribute:"feedback-duration",type:Number})],hl.prototype,"feedbackDuration",2),Vo([Xo({attribute:"tooltip-placement"})],hl.prototype,"tooltipPlacement",2),Vo([Xo({type:Boolean})],hl.prototype,"hoist",2),Ri("copy.in",{keyframes:[{scale:".25",opacity:".25"},{scale:"1",opacity:"1"}],options:{duration:100}}),Ri("copy.out",{keyframes:[{scale:"1",opacity:"1"},{scale:".25",opacity:"0"}],options:{duration:100}});hl.define("sl-copy-button");Ki({tagName:"sl-copy-button",elementClass:hl,react:p,events:{onSlCopy:"sl-copy",onSlError:"sl-error"},displayName:"SlCopyButton"});var ul=At`
  :host {
    display: block;
  }

  .details {
    border: solid 1px var(--sl-color-neutral-200);
    border-radius: var(--sl-border-radius-medium);
    background-color: var(--sl-color-neutral-0);
    overflow-anchor: none;
  }

  .details--disabled {
    opacity: 0.5;
  }

  .details__header {
    display: flex;
    align-items: center;
    border-radius: inherit;
    padding: var(--sl-spacing-medium);
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
  }

  .details__header::-webkit-details-marker {
    display: none;
  }

  .details__header:focus {
    outline: none;
  }

  .details__header:focus-visible {
    outline: var(--sl-focus-ring);
    outline-offset: calc(1px + var(--sl-focus-ring-offset));
  }

  .details--disabled .details__header {
    cursor: not-allowed;
  }

  .details--disabled .details__header:focus-visible {
    outline: none;
    box-shadow: none;
  }

  .details__summary {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
  }

  .details__summary-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    transition: var(--sl-transition-medium) rotate ease;
  }

  .details--open .details__summary-icon {
    rotate: 90deg;
  }

  .details--open.details--rtl .details__summary-icon {
    rotate: -90deg;
  }

  .details--open slot[name='expand-icon'],
  .details:not(.details--open) slot[name='collapse-icon'] {
    display: none;
  }

  .details__body {
    overflow: hidden;
  }

  .details__content {
    display: block;
    padding: var(--sl-spacing-medium);
  }
`,pl=class extends rr{constructor(){super(...arguments),this.localize=new Ui(this),this.open=!1,this.disabled=!1}firstUpdated(){this.body.style.height=this.open?"auto":"0",this.open&&(this.details.open=!0),this.detailsObserver=new MutationObserver((e=>{for(const t of e)"attributes"===t.type&&"open"===t.attributeName&&(this.details.open?this.show():this.hide())})),this.detailsObserver.observe(this.details,{attributes:!0})}disconnectedCallback(){var e;super.disconnectedCallback(),null==(e=this.detailsObserver)||e.disconnect()}handleSummaryClick(e){e.preventDefault(),this.disabled||(this.open?this.hide():this.show(),this.header.focus())}handleSummaryKeyDown(e){"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),this.open?this.hide():this.show()),"ArrowUp"!==e.key&&"ArrowLeft"!==e.key||(e.preventDefault(),this.hide()),"ArrowDown"!==e.key&&"ArrowRight"!==e.key||(e.preventDefault(),this.show())}async handleOpenChange(){if(this.open){this.details.open=!0;if(this.emit("sl-show",{cancelable:!0}).defaultPrevented)return this.open=!1,void(this.details.open=!1);await zi(this.body);const{keyframes:e,options:t}=Ti(this,"details.show",{dir:this.localize.dir()});await Oi(this.body,Di(e,this.body.scrollHeight),t),this.body.style.height="auto",this.emit("sl-after-show")}else{if(this.emit("sl-hide",{cancelable:!0}).defaultPrevented)return this.details.open=!0,void(this.open=!0);await zi(this.body);const{keyframes:e,options:t}=Ti(this,"details.hide",{dir:this.localize.dir()});await Oi(this.body,Di(e,this.body.scrollHeight),t),this.body.style.height="auto",this.details.open=!1,this.emit("sl-after-hide")}}async show(){if(!this.open&&!this.disabled)return this.open=!0,Ei(this,"sl-after-show")}async hide(){if(this.open&&!this.disabled)return this.open=!1,Ei(this,"sl-after-hide")}render(){const e=this.matches(":dir(rtl)");return vo`
      <details
        part="base"
        class=${bi({details:!0,"details--open":this.open,"details--disabled":this.disabled,"details--rtl":e})}
      >
        <summary
          part="header"
          id="header"
          class="details__header"
          role="button"
          aria-expanded=${this.open?"true":"false"}
          aria-con