@saasquatch/mint-components 1.6.11 → 1.6.12

package/dist/cjs/{global-de2bf4f7.js → global-dc823c81.js}

@@ -14863,7 +14863,7 @@ function internalProperty(options) {
   return property({attribute: false, hasChanged: options === null || options === void 0 ? void 0 : options.hasChanged});
 }
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/textarea/textarea.scss
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/textarea/textarea.scss
 var textarea_default = ":host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n.form-control .form-control__label {\n  display: none;\n}\n.form-control .form-control__help-text {\n  display: none;\n}\n\n.form-control--has-label .form-control__label {\n  display: inline-block;\n  color: var(--sl-input-label-color);\n  margin-bottom: var(--sl-spacing-xxx-small);\n}\n.form-control--has-label.form-control--small .form-control__label {\n  font-size: var(--sl-input-label-font-size-small);\n}\n.form-control--has-label.form-control--medium .form-control__label {\n  font-size: var(--sl-input-label-font-size-medium);\n}\n.form-control--has-label.form-control--large .form-control_label {\n  font-size: var(--sl-input-label-font-size-large);\n}\n\n.form-control--has-help-text .form-control__help-text {\n  display: block;\n  color: var(--sl-input-help-text-color);\n}\n.form-control--has-help-text .form-control__help-text ::slotted(*) {\n  margin-top: var(--sl-spacing-xxx-small);\n}\n.form-control--has-help-text.form-control--small .form-control__help-text {\n  font-size: var(--sl-input-help-text-font-size-small);\n}\n.form-control--has-help-text.form-control--medium .form-control__help-text {\n  font-size: var(--sl-input-help-text-font-size-medium);\n}\n.form-control--has-help-text.form-control--large .form-control__help-text {\n  font-size: var(--sl-input-help-text-font-size-large);\n}\n\n:host {\n  display: block;\n}\n\n.textarea {\n  display: flex;\n  align-items: center;\n  position: relative;\n  width: 100%;\n  font-family: var(--sl-input-font-family);\n  font-weight: var(--sl-input-font-weight);\n  line-height: var(--sl-line-height-normal);\n  letter-spacing: var(--sl-input-letter-spacing);\n  background-color: var(--sl-input-background-color);\n  border: solid var(--sl-input-border-width) var(--sl-input-border-color);\n  vertical-align: middle;\n  transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow;\n  cursor: text;\n}\n.textarea:hover:not(.textarea--disabled) {\n  background-color: var(--sl-input-background-color-hover);\n  border-color: var(--sl-input-border-color-hover);\n}\n.textarea:hover:not(.textarea--disabled) .textarea__control {\n  color: var(--sl-input-color-hover);\n}\n.textarea.textarea--focused:not(.textarea--disabled) {\n  background-color: var(--sl-input-background-color-focus);\n  border-color: var(--sl-input-border-color-focus);\n  box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);\n  color: var(--sl-input-color-focus);\n}\n.textarea.textarea--focused:not(.textarea--disabled) .textarea__control {\n  color: var(--sl-input-color-focus);\n}\n.textarea.textarea--disabled {\n  background-color: var(--sl-input-background-color-disabled);\n  border-color: var(--sl-input-border-color-disabled);\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.textarea.textarea--disabled .textarea__control {\n  color: var(--sl-input-color-disabled);\n}\n.textarea.textarea--disabled .textarea__control::placeholder {\n  color: var(--sl-input-placeholder-color-disabled);\n}\n\n.textarea__control {\n  flex: 1 1 auto;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  line-height: 1.4;\n  color: var(--sl-input-color);\n  border: none;\n  background: none;\n  box-shadow: none;\n  cursor: inherit;\n  -webkit-appearance: none;\n}\n.textarea__control::-webkit-search-decoration, .textarea__control::-webkit-search-cancel-button, .textarea__control::-webkit-search-results-button, .textarea__control::-webkit-search-results-decoration {\n  -webkit-appearance: none;\n}\n.textarea__control::placeholder {\n  color: var(--sl-input-placeholder-color);\n  user-select: none;\n}\n.textarea__control:focus {\n  outline: none;\n}\n\n.textarea--small {\n  border-radius: var(--sl-input-border-radius-small);\n  font-size: var(--sl-input-font-size-small);\n}\n.textarea--small .textarea__control {\n  padding: 0.5em var(--sl-input-spacing-small);\n}\n\n.textarea--medium {\n  border-radius: var(--sl-input-border-radius-medium);\n  font-size: var(--sl-input-font-size-medium);\n}\n.textarea--medium .textarea__control {\n  padding: 0.5em var(--sl-input-spacing-medium);\n}\n\n.textarea--large {\n  border-radius: var(--sl-input-border-radius-large);\n  font-size: var(--sl-input-font-size-large);\n}\n.textarea--large .textarea__control {\n  padding: 0.5em var(--sl-input-spacing-large);\n}\n\n.textarea--resize-none .textarea__control {\n  resize: none;\n}\n\n.textarea--resize-vertical .textarea__control {\n  resize: vertical;\n}\n\n.textarea--resize-auto .textarea__control {\n  height: auto;\n  resize: none;\n}";
 
 // src/components/textarea/textarea.ts
@@ -16452,19 +16452,19 @@ var createPopper = /* @__PURE__ */ popperGenerator({
   defaultModifiers
 });
 
-// src/internal/sl_popover.ts
-var SlPopover = class {
-  constructor(anchor, sl_popover, options) {
+// src/internal/popover.ts
+var Popover = class {
+  constructor(anchor, popover, options) {
     this.handleTransitionEnd = this.handleTransitionEnd.bind(this);
     this.anchor = anchor;
-    this.sl_popover = sl_popover;
+    this.popover = popover;
     this.options = Object.assign({
       skidding: 0,
       distance: 0,
       placement: "bottom-start",
       strategy: "absolute",
-      transitionElement: this.sl_popover,
-      visibleClass: "sl_popover-visible",
+      transitionElement: this.popover,
+      visibleClass: "popover-visible",
       onAfterShow: () => {
       },
       onAfterHide: () => {
@@ -16473,35 +16473,35 @@ var SlPopover = class {
       }
     }, options);
     this.isVisible = false;
-    this.sl_popover.hidden = true;
-    this.sl_popover.classList.remove(this.options.visibleClass);
-    this.sl_popover.addEventListener("transitionend", this.handleTransitionEnd);
+    this.popover.hidden = true;
+    this.popover.classList.remove(this.options.visibleClass);
+    this.popover.addEventListener("transitionend", this.handleTransitionEnd);
   }
   handleTransitionEnd(event) {
     const target = event.target;
     if (target === this.options.transitionElement) {
       this.options.onTransitionEnd.call(this, event);
-      if (!this.isVisible && !this.sl_popover.hidden) {
-        this.sl_popover.hidden = true;
-        this.sl_popover.classList.remove(this.options.visibleClass);
+      if (!this.isVisible && !this.popover.hidden) {
+        this.popover.hidden = true;
+        this.popover.classList.remove(this.options.visibleClass);
         this.options.onAfterHide.call(this);
       }
     }
   }
   destroy() {
-    this.sl_popover.removeEventListener("transitionend", this.handleTransitionEnd);
+    this.popover.removeEventListener("transitionend", this.handleTransitionEnd);
     if (this.popper) {
       this.popper.destroy();
     }
   }
   show() {
     this.isVisible = true;
-    this.sl_popover.hidden = false;
-    requestAnimationFrame(() => this.sl_popover.classList.add(this.options.visibleClass));
+    this.popover.hidden = false;
+    requestAnimationFrame(() => this.popover.classList.add(this.options.visibleClass));
     if (this.popper) {
       this.popper.destroy();
     }
-    this.popper = createPopper(this.anchor, this.sl_popover, {
+    this.popper = createPopper(this.anchor, this.popover, {
       placement: this.options.placement,
       strategy: this.options.strategy,
       modifiers: [
@@ -16519,19 +16519,19 @@ var SlPopover = class {
         }
       ]
     });
-    this.sl_popover.addEventListener("transitionend", () => this.options.onAfterShow.call(this), {once: true});
+    this.popover.addEventListener("transitionend", () => this.options.onAfterShow.call(this), {once: true});
     requestAnimationFrame(() => this.popper.update());
   }
   hide() {
     this.isVisible = false;
-    this.sl_popover.classList.remove(this.options.visibleClass);
+    this.popover.classList.remove(this.options.visibleClass);
   }
   reposition() {
     this.popper.update();
   }
   setOptions(options) {
     this.options = Object.assign(this.options, options);
-    this.isVisible ? this.sl_popover.classList.add(this.options.visibleClass) : this.sl_popover.classList.remove(this.options.visibleClass);
+    this.isVisible ? this.popover.classList.add(this.options.visibleClass) : this.popover.classList.remove(this.options.visibleClass);
     if (this.popper) {
       this.popper.setOptions({
         placement: this.options.placement,
@@ -16541,10 +16541,10 @@ var SlPopover = class {
     }
   }
 };
-var sl_popover_default = SlPopover;
+var popover_default = Popover;
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/tooltip/tooltip.scss
-var tooltip_default = ':host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n/**\n * @prop --hide-delay: The amount of time to wait before hiding the tooltip.\n * @prop --hide-duration: The amount of time the hide transition takes to complete.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --show-delay: The amount of time to wait before showing the tooltip.\n * @prop --show-duration: The amount of time the show transition takes to complete.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n */\n:host {\n  --max-width: 20rem;\n  --hide-delay: 0s;\n  --hide-duration: 0.125s;\n  --hide-timing-function: ease;\n  --show-delay: 0.125s;\n  --show-duration: 0.125s;\n  --show-timing-function: ease;\n  display: contents;\n}\n\n.tooltip-positioner {\n  position: absolute;\n  z-index: var(--sl-z-index-tooltip);\n  pointer-events: none;\n}\n\n.tooltip {\n  max-width: var(--max-width);\n  border-radius: var(--sl-tooltip-border-radius);\n  background-color: var(--sl-tooltip-background-color);\n  font-family: var(--sl-tooltip-font-family);\n  font-size: var(--sl-tooltip-font-size);\n  font-weight: var(--sl-tooltip-font-weight);\n  line-height: var(--sl-tooltip-line-height);\n  color: var(--sl-tooltip-color);\n  opacity: 0;\n  padding: var(--sl-tooltip-padding);\n  transform: scale(0.8);\n  transform-origin: bottom;\n  transition-property: opacity, transform;\n  transition-delay: var(--hide-delay);\n  transition-duration: var(--hide-duration);\n  transition-timing-function: var(--hide-timing-function);\n}\n.tooltip:after {\n  content: "";\n  position: absolute;\n  width: 0;\n  height: 0;\n}\n\n.tooltip-positioner[data-popper-placement^=top] .tooltip {\n  transform-origin: bottom;\n}\n.tooltip-positioner[data-popper-placement^=bottom] .tooltip {\n  transform-origin: top;\n}\n.tooltip-positioner[data-popper-placement^=left] .tooltip {\n  transform-origin: right;\n}\n.tooltip-positioner[data-popper-placement^=right] .tooltip {\n  transform-origin: left;\n}\n.tooltip-positioner.sl_popover-visible .tooltip {\n  opacity: 1;\n  transform: none;\n  transition-delay: var(--show-delay);\n  transition-duration: var(--show-duration);\n  transition-timing-function: var(--show-timing-function);\n}\n\n.tooltip-positioner[data-popper-placement^=bottom] .tooltip:after {\n  bottom: 100%;\n  left: calc(50% - var(--sl-tooltip-arrow-size));\n  border-bottom: var(--sl-tooltip-arrow-size) solid var(--sl-tooltip-background-color);\n  border-left: var(--sl-tooltip-arrow-size) solid transparent;\n  border-right: var(--sl-tooltip-arrow-size) solid transparent;\n}\n\n.tooltip-positioner[data-popper-placement=bottom-start] .tooltip:after {\n  left: var(--sl-tooltip-arrow-start-end-offset);\n}\n\n.tooltip-positioner[data-popper-placement=bottom-end] .tooltip:after {\n  right: var(--sl-tooltip-arrow-start-end-offset);\n  left: auto;\n}\n\n.tooltip-positioner[data-popper-placement^=top] .tooltip:after {\n  top: 100%;\n  left: calc(50% - var(--sl-tooltip-arrow-size));\n  border-top: var(--sl-tooltip-arrow-size) solid var(--sl-tooltip-background-color);\n  border-left: var(--sl-tooltip-arrow-size) solid transparent;\n  border-right: var(--sl-tooltip-arrow-size) solid transparent;\n}\n\n.tooltip-positioner[data-popper-placement=top-start] .tooltip:after {\n  left: var(--sl-tooltip-arrow-start-end-offset);\n}\n\n.tooltip-positioner[data-popper-placement=top-end] .tooltip:after {\n  right: var(--sl-tooltip-arrow-start-end-offset);\n  left: auto;\n}\n\n.tooltip-positioner[data-popper-placement^=left] .tooltip:after {\n  top: calc(50% - var(--sl-tooltip-arrow-size));\n  left: 100%;\n  border-left: var(--sl-tooltip-arrow-size) solid var(--sl-tooltip-background-color);\n  border-top: var(--sl-tooltip-arrow-size) solid transparent;\n  border-bottom: var(--sl-tooltip-arrow-size) solid transparent;\n}\n\n.tooltip-positioner[data-popper-placement=left-start] .tooltip:after {\n  top: var(--sl-tooltip-arrow-start-end-offset);\n}\n\n.tooltip-positioner[data-popper-placement=left-end] .tooltip:after {\n  top: auto;\n  bottom: var(--sl-tooltip-arrow-start-end-offset);\n}\n\n.tooltip-positioner[data-popper-placement^=right] .tooltip:after {\n  top: calc(50% - var(--sl-tooltip-arrow-size));\n  right: 100%;\n  border-right: var(--sl-tooltip-arrow-size) solid var(--sl-tooltip-background-color);\n  border-top: var(--sl-tooltip-arrow-size) solid transparent;\n  border-bottom: var(--sl-tooltip-arrow-size) solid transparent;\n}\n\n.tooltip-positioner[data-popper-placement=right-start] .tooltip:after {\n  top: var(--sl-tooltip-arrow-start-end-offset);\n}\n\n.tooltip-positioner[data-popper-placement=right-end] .tooltip:after {\n  top: auto;\n  bottom: var(--sl-tooltip-arrow-start-end-offset);\n}';
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/tooltip/tooltip.scss
+var tooltip_default = ':host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n/**\n * @prop --hide-delay: The amount of time to wait before hiding the tooltip.\n * @prop --hide-duration: The amount of time the hide transition takes to complete.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --max-width: The maximum width of the tooltip.\n * @prop --show-delay: The amount of time to wait before showing the tooltip.\n * @prop --show-duration: The amount of time the show transition takes to complete.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n */\n:host {\n  --max-width: 20rem;\n  --hide-delay: 0s;\n  --hide-duration: 0.125s;\n  --hide-timing-function: ease;\n  --show-delay: 0.125s;\n  --show-duration: 0.125s;\n  --show-timing-function: ease;\n  display: contents;\n}\n\n.tooltip-positioner {\n  position: absolute;\n  z-index: var(--sl-z-index-tooltip);\n  pointer-events: none;\n}\n\n.tooltip {\n  max-width: var(--max-width);\n  border-radius: var(--sl-tooltip-border-radius);\n  background-color: var(--sl-tooltip-background-color);\n  font-family: var(--sl-tooltip-font-family);\n  font-size: var(--sl-tooltip-font-size);\n  font-weight: var(--sl-tooltip-font-weight);\n  line-height: var(--sl-tooltip-line-height);\n  color: var(--sl-tooltip-color);\n  opacity: 0;\n  padding: var(--sl-tooltip-padding);\n  transform: scale(0.8);\n  transform-origin: bottom;\n  transition-property: opacity, transform;\n  transition-delay: var(--hide-delay);\n  transition-duration: var(--hide-duration);\n  transition-timing-function: var(--hide-timing-function);\n}\n.tooltip:after {\n  content: "";\n  position: absolute;\n  width: 0;\n  height: 0;\n}\n\n.tooltip-positioner[data-popper-placement^=top] .tooltip {\n  transform-origin: bottom;\n}\n.tooltip-positioner[data-popper-placement^=bottom] .tooltip {\n  transform-origin: top;\n}\n.tooltip-positioner[data-popper-placement^=left] .tooltip {\n  transform-origin: right;\n}\n.tooltip-positioner[data-popper-placement^=right] .tooltip {\n  transform-origin: left;\n}\n.tooltip-positioner.popover-visible .tooltip {\n  opacity: 1;\n  transform: none;\n  transition-delay: var(--show-delay);\n  transition-duration: var(--show-duration);\n  transition-timing-function: var(--show-timing-function);\n}\n\n.tooltip-positioner[data-popper-placement^=bottom] .tooltip:after {\n  bottom: 100%;\n  left: calc(50% - var(--sl-tooltip-arrow-size));\n  border-bottom: var(--sl-tooltip-arrow-size) solid var(--sl-tooltip-background-color);\n  border-left: var(--sl-tooltip-arrow-size) solid transparent;\n  border-right: var(--sl-tooltip-arrow-size) solid transparent;\n}\n\n.tooltip-positioner[data-popper-placement=bottom-start] .tooltip:after {\n  left: var(--sl-tooltip-arrow-start-end-offset);\n}\n\n.tooltip-positioner[data-popper-placement=bottom-end] .tooltip:after {\n  right: var(--sl-tooltip-arrow-start-end-offset);\n  left: auto;\n}\n\n.tooltip-positioner[data-popper-placement^=top] .tooltip:after {\n  top: 100%;\n  left: calc(50% - var(--sl-tooltip-arrow-size));\n  border-top: var(--sl-tooltip-arrow-size) solid var(--sl-tooltip-background-color);\n  border-left: var(--sl-tooltip-arrow-size) solid transparent;\n  border-right: var(--sl-tooltip-arrow-size) solid transparent;\n}\n\n.tooltip-positioner[data-popper-placement=top-start] .tooltip:after {\n  left: var(--sl-tooltip-arrow-start-end-offset);\n}\n\n.tooltip-positioner[data-popper-placement=top-end] .tooltip:after {\n  right: var(--sl-tooltip-arrow-start-end-offset);\n  left: auto;\n}\n\n.tooltip-positioner[data-popper-placement^=left] .tooltip:after {\n  top: calc(50% - var(--sl-tooltip-arrow-size));\n  left: 100%;\n  border-left: var(--sl-tooltip-arrow-size) solid var(--sl-tooltip-background-color);\n  border-top: var(--sl-tooltip-arrow-size) solid transparent;\n  border-bottom: var(--sl-tooltip-arrow-size) solid transparent;\n}\n\n.tooltip-positioner[data-popper-placement=left-start] .tooltip:after {\n  top: var(--sl-tooltip-arrow-start-end-offset);\n}\n\n.tooltip-positioner[data-popper-placement=left-end] .tooltip:after {\n  top: auto;\n  bottom: var(--sl-tooltip-arrow-start-end-offset);\n}\n\n.tooltip-positioner[data-popper-placement^=right] .tooltip:after {\n  top: calc(50% - var(--sl-tooltip-arrow-size));\n  right: 100%;\n  border-right: var(--sl-tooltip-arrow-size) solid var(--sl-tooltip-background-color);\n  border-top: var(--sl-tooltip-arrow-size) solid transparent;\n  border-bottom: var(--sl-tooltip-arrow-size) solid transparent;\n}\n\n.tooltip-positioner[data-popper-placement=right-start] .tooltip:after {\n  top: var(--sl-tooltip-arrow-start-end-offset);\n}\n\n.tooltip-positioner[data-popper-placement=right-end] .tooltip:after {\n  top: auto;\n  bottom: var(--sl-tooltip-arrow-start-end-offset);\n}';
 
 // src/components/tooltip/tooltip.ts
 var id$3 = 0;
@@ -16563,7 +16563,7 @@ var SlTooltip = class extends LitElement {
   }
   firstUpdated() {
     this.target = this.getTarget();
-    this.sl_popover = new sl_popover_default(this.target, this.positioner);
+    this.popover = new popover_default(this.target, this.positioner);
     this.syncOptions();
     this.addEventListener("blur", this.handleBlur.bind(this), true);
     this.addEventListener("click", this.handleClick.bind(this), true);
@@ -16578,7 +16578,7 @@ var SlTooltip = class extends LitElement {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.sl_popover.destroy();
+    this.popover.destroy();
     this.removeEventListener("blur", this.handleBlur, true);
     this.removeEventListener("click", this.handleClick, true);
     this.removeEventListener("focus", this.handleFocus, true);
@@ -16594,7 +16594,7 @@ var SlTooltip = class extends LitElement {
     }
     this.isVisible = true;
     this.open = true;
-    this.sl_popover.show();
+    this.popover.show();
   }
   hide() {
     if (!this.isVisible) {
@@ -16607,7 +16607,7 @@ var SlTooltip = class extends LitElement {
     }
     this.isVisible = false;
     this.open = false;
-    this.sl_popover.hide();
+    this.popover.hide();
   }
   getTarget() {
     const target = [...this.children].find((el) => el.tagName.toLowerCase() !== "style" && el.getAttribute("slot") !== "content");
@@ -16668,8 +16668,8 @@ var SlTooltip = class extends LitElement {
     return triggers.includes(triggerType);
   }
   syncOptions() {
-    if (this.sl_popover) {
-      this.sl_popover.setOptions({
+    if (this.popover) {
+      this.popover.setOptions({
         placement: this.placement,
         distance: this.distance,
         skidding: this.skidding,
@@ -16768,7 +16768,7 @@ function getTextContent(slot) {
   return text;
 }
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/select/select.scss
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/select/select.scss
 var select_default = ":host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n.form-control .form-control__label {\n  display: none;\n}\n.form-control .form-control__help-text {\n  display: none;\n}\n\n.form-control--has-label .form-control__label {\n  display: inline-block;\n  color: var(--sl-input-label-color);\n  margin-bottom: var(--sl-spacing-xxx-small);\n}\n.form-control--has-label.form-control--small .form-control__label {\n  font-size: var(--sl-input-label-font-size-small);\n}\n.form-control--has-label.form-control--medium .form-control__label {\n  font-size: var(--sl-input-label-font-size-medium);\n}\n.form-control--has-label.form-control--large .form-control_label {\n  font-size: var(--sl-input-label-font-size-large);\n}\n\n.form-control--has-help-text .form-control__help-text {\n  display: block;\n  color: var(--sl-input-help-text-color);\n}\n.form-control--has-help-text .form-control__help-text ::slotted(*) {\n  margin-top: var(--sl-spacing-xxx-small);\n}\n.form-control--has-help-text.form-control--small .form-control__help-text {\n  font-size: var(--sl-input-help-text-font-size-small);\n}\n.form-control--has-help-text.form-control--medium .form-control__help-text {\n  font-size: var(--sl-input-help-text-font-size-medium);\n}\n.form-control--has-help-text.form-control--large .form-control__help-text {\n  font-size: var(--sl-input-help-text-font-size-large);\n}\n\n/**\n * @prop --focus-ring: The focus ring style to use when the control receives focus, a `box-shadow` property.\n */\n:host {\n  --focus-ring: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);\n  display: block;\n}\n\n.select {\n  display: block;\n}\n\n.select__box {\n  display: inline-flex;\n  align-items: center;\n  justify-content: start;\n  position: relative;\n  width: 100%;\n  font-family: var(--sl-input-font-family);\n  font-weight: var(--sl-input-font-weight);\n  letter-spacing: var(--sl-input-letter-spacing);\n  background-color: var(--sl-input-background-color);\n  border: solid var(--sl-input-border-width) var(--sl-input-border-color);\n  vertical-align: middle;\n  overflow: hidden;\n  transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow;\n  cursor: pointer;\n}\n\n.select:not(.select--disabled) .select__box:hover {\n  background-color: var(--sl-input-background-color-hover);\n  border-color: var(--sl-input-border-color-hover);\n  color: var(--sl-input-color-hover);\n}\n\n.select:not(.select--disabled) .select__box:focus {\n  background-color: var(--sl-input-background-color-focus);\n  border-color: var(--sl-input-border-color-focus);\n  box-shadow: var(--focus-ring);\n  outline: none;\n  color: var(--sl-input-color-focus);\n}\n\n.select--disabled .select__box {\n  background-color: var(--sl-input-background-color-disabled);\n  border-color: var(--sl-input-border-color-disabled);\n  color: var(--sl-input-color-disabled);\n  opacity: 0.5;\n  cursor: not-allowed;\n  outline: none;\n}\n.select--disabled .select__tags,\n.select--disabled .select__clear {\n  pointer-events: none;\n}\n\n.select__label {\n  flex: 1 1 auto;\n  display: flex;\n  align-items: center;\n  user-select: none;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n  overflow-x: auto;\n  overflow-y: hidden;\n  white-space: nowrap;\n}\n.select__label::-webkit-scrollbar {\n  width: 0;\n  height: 0;\n}\n\n.select__clear {\n  flex: 0 0 auto;\n}\n\n.select__icon {\n  flex: 0 0 auto;\n  display: inline-flex;\n  transition: var(--sl-transition-medium) transform ease;\n}\n\n.select--open .select__icon {\n  transform: rotate(-180deg);\n}\n\n.select--placeholder-visible .select__label {\n  color: var(--sl-input-placeholder-color);\n}\n\n.select--disabled.select--placeholder-visible .select__label {\n  color: var(--sl-input-placeholder-color-disabled);\n}\n\n.select__tags {\n  display: inline-flex;\n  align-items: center;\n  flex-wrap: wrap;\n  justify-content: left;\n  margin-left: var(--sl-spacing-xx-small);\n}\n\n.select__hidden-select {\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  height: 1px;\n  overflow: hidden;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n\n.select--small .select__box {\n  border-radius: var(--sl-input-border-radius-small);\n  font-size: var(--sl-input-font-size-small);\n  min-height: var(--sl-input-height-small);\n}\n.select--small .select__label {\n  margin: 0 var(--sl-input-spacing-small);\n}\n.select--small .select__clear {\n  margin-right: var(--sl-input-spacing-small);\n}\n.select--small .select__icon {\n  margin-right: var(--sl-input-spacing-small);\n}\n.select--small .select__tags {\n  padding-bottom: 2px;\n}\n.select--small .select__tags sl-tag {\n  padding-top: 2px;\n}\n.select--small .select__tags sl-tag:not(:last-of-type) {\n  margin-right: var(--sl-spacing-xx-small);\n}\n.select--small.select--has-tags .select__label {\n  margin-left: 0;\n}\n\n.select--medium .select__box {\n  border-radius: var(--sl-input-border-radius-medium);\n  font-size: var(--sl-input-font-size-medium);\n  min-height: var(--sl-input-height-medium);\n}\n.select--medium .select__label {\n  margin: 0 var(--sl-input-spacing-medium);\n}\n.select--medium .select__clear {\n  margin-right: var(--sl-input-spacing-medium);\n}\n.select--medium .select__icon {\n  margin-right: var(--sl-input-spacing-medium);\n}\n.select--medium .select__tags {\n  padding-bottom: 3px;\n}\n.select--medium .select__tags sl-tag {\n  padding-top: 3px;\n}\n.select--medium .select__tags sl-tag:not(:last-of-type) {\n  margin-right: var(--sl-spacing-xx-small);\n}\n.select--medium.select--has-tags .select__label {\n  margin-left: 0;\n}\n\n.select--large .select__box {\n  border-radius: var(--sl-input-border-radius-large);\n  font-size: var(--sl-input-font-size-large);\n  min-height: var(--sl-input-height-large);\n}\n.select--large .select__label {\n  margin: 0 var(--sl-input-spacing-large);\n}\n.select--large .select__clear {\n  margin-right: var(--sl-input-spacing-large);\n}\n.select--large .select__icon {\n  margin-right: var(--sl-input-spacing-large);\n}\n.select--large .select__tags {\n  padding-bottom: 4px;\n}\n.select--large .select__tags sl-tag {\n  padding-top: 4px;\n}\n.select--large .select__tags sl-tag:not(:last-of-type) {\n  margin-right: var(--sl-spacing-xx-small);\n}\n.select--large.select--has-tags .select__label {\n  margin-left: 0;\n}\n\n.select--pill.select--small .select__box {\n  border-radius: var(--sl-input-height-small);\n}\n.select--pill.select--medium .select__box {\n  border-radius: var(--sl-input-height-medium);\n}\n.select--pill.select--large .select__box {\n  border-radius: var(--sl-input-height-large);\n}";
 
 // src/components/select/select.ts
@@ -17182,7 +17182,7 @@ SlSelect = __decorate([
 ], SlSelect);
 var select_default2 = SlSelect;
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/skeleton/skeleton.scss
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/skeleton/skeleton.scss
 var skeleton_default = ":host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n/**\n * @prop --border-radius: The skeleton's border radius.\n * @prop --color: The color of the skeleton.\n * @prop --sheen-color: The sheen color when the skeleton is in its loading state.\n */\n:host {\n  --border-radius: var(--sl-border-radius-pill);\n  --color: var(--sl-color-gray-200);\n  --sheen-color: var(--sl-color-gray-100);\n  display: block;\n  position: relative;\n}\n\n.skeleton {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  min-height: 1rem;\n}\n\n.skeleton__indicator {\n  flex: 1 1 auto;\n  background: var(--color);\n  border-radius: var(--border-radius);\n}\n\n.skeleton--sheen .skeleton__indicator {\n  background: linear-gradient(270deg, var(--sheen-color), var(--color), var(--color), var(--sheen-color));\n  background-size: 400% 100%;\n  background-size: 400% 100%;\n  animation: sheen 8s ease-in-out infinite;\n}\n\n.skeleton--pulse .skeleton__indicator {\n  animation: pulse 2s ease-in-out 0.5s infinite;\n}\n\n@keyframes sheen {\n  0% {\n    background-position: 200% 0;\n  }\n  to {\n    background-position: -200% 0;\n  }\n}\n@keyframes pulse {\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.4;\n  }\n  100% {\n    opacity: 1;\n  }\n}";
 
 // src/components/skeleton/skeleton.ts
@@ -17217,7 +17217,7 @@ SlSkeleton = __decorate([
 ], SlSkeleton);
 var skeleton_default2 = SlSkeleton;
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/spinner/spinner.scss
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/spinner/spinner.scss
 var spinner_default = ":host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n/**\n * @prop --track-color: The color of the spinner's track.\n * @prop --indicator-color: The color of the spinner's indicator.\n * @prop --stroke-width: The width of the indicator.\n */\n:host {\n  --track-color: #0d131e20;\n  --indicator-color: var(--sl-color-primary-500);\n  --stroke-width: 2px;\n  display: inline-flex;\n}\n\n.spinner {\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n  border-radius: 50%;\n  border: solid var(--stroke-width) var(--track-color);\n  border-top-color: var(--indicator-color);\n  border-right-color: var(--indicator-color);\n  animation: 1s linear infinite spin;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}";
 
 // src/components/spinner/spinner.ts
@@ -17232,7 +17232,7 @@ SlSpinner = __decorate([
 ], SlSpinner);
 var spinner_default2 = SlSpinner;
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/switch/switch.scss
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/switch/switch.scss
 var switch_default = ":host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n/**\n * @prop --width: The width of the switch.\n * @prop --height: The height of the switch.\n * @prop --thumb-size: The size of the thumb.\n */\n:host {\n  --height: var(--sl-toggle-size);\n  --thumb-size: calc(var(--sl-toggle-size) + 4px);\n  --width: calc(var(--height) * 2);\n  display: inline-block;\n}\n\n.switch {\n  display: inline-flex;\n  align-items: center;\n  font-family: var(--sl-input-font-family);\n  font-size: var(--sl-input-font-size-medium);\n  font-weight: var(--sl-input-font-weight);\n  color: var(--sl-input-color);\n  vertical-align: middle;\n  cursor: pointer;\n}\n\n.switch__control {\n  flex: 0 0 auto;\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--width);\n  height: var(--height);\n  background-color: var(--sl-color-gray-300);\n  border: solid var(--sl-input-border-width) var(--sl-color-gray-300);\n  border-radius: var(--height);\n  transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color;\n}\n.switch__control .switch__thumb {\n  width: var(--thumb-size);\n  height: var(--thumb-size);\n  background-color: var(--sl-color-white);\n  border-radius: 50%;\n  border: solid var(--sl-input-border-width) var(--sl-input-border-color);\n  transform: translateX(calc(var(--width) / -2 + var(--thumb-size) / 2 - (var(--thumb-size) - var(--height)) / 2));\n  transition: var(--sl-transition-fast) transform ease, var(--sl-transition-fast) background-color, var(--sl-transition-fast) border-color, var(--sl-transition-fast) box-shadow;\n}\n.switch__control input[type=checkbox] {\n  position: absolute;\n  opacity: 0;\n  padding: 0;\n  margin: 0;\n  pointer-events: none;\n}\n\n.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover {\n  background-color: var(--sl-color-gray-200);\n  border-color: var(--sl-color-gray-200);\n}\n.switch:not(.switch--checked):not(.switch--disabled) .switch__control:hover .switch__thumb {\n  background-color: var(--sl-color-white);\n  border-color: var(--sl-input-border-color);\n}\n\n.switch.switch--focused:not(.switch--checked):not(.switch--disabled) .switch__control {\n  background-color: var(--sl-color-gray-200);\n  border-color: var(--sl-color-gray-200);\n}\n.switch.switch--focused:not(.switch--checked):not(.switch--disabled) .switch__control .switch__thumb {\n  background-color: var(--sl-color-white);\n  border-color: var(--sl-color-primary-500);\n  box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);\n}\n\n.switch--checked .switch__control {\n  background-color: var(--sl-color-primary-500);\n  border-color: var(--sl-color-primary-500);\n}\n.switch--checked .switch__control .switch__thumb {\n  background-color: var(--sl-color-white);\n  border-color: var(--sl-color-primary-500);\n  transform: translateX(calc(var(--width) / 2 - var(--thumb-size) / 2 + (var(--thumb-size) - var(--height)) / 2));\n}\n\n.switch.switch--checked:not(.switch--disabled) .switch__control:hover {\n  background-color: var(--sl-color-primary-400);\n  border-color: var(--sl-color-primary-400);\n}\n.switch.switch--checked:not(.switch--disabled) .switch__control:hover .switch__thumb {\n  background-color: var(--sl-color-white);\n  border-color: var(--sl-color-primary-500);\n}\n\n.switch.switch--checked:not(.switch--disabled).switch--focused .switch__control {\n  background-color: var(--sl-color-primary-400);\n  border-color: var(--sl-color-primary-400);\n}\n.switch.switch--checked:not(.switch--disabled).switch--focused .switch__control .switch__thumb {\n  background-color: var(--sl-color-white);\n  border-color: var(--sl-color-primary-500);\n  box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);\n}\n\n.switch--disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.switch__label {\n  line-height: var(--height);\n  margin-left: 0.5em;\n  user-select: none;\n}";
 
 // src/components/switch/switch.ts
@@ -17375,7 +17375,7 @@ SlSwitch = __decorate([
 ], SlSwitch);
 var switch_default2 = SlSwitch;
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/tab/tab.scss
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/tab/tab.scss
 var tab_default = ":host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n/**\n * @prop --focus-ring: The focus ring's box shadow.\n */\n:host {\n  --focus-ring: inset 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);\n  display: inline-block;\n}\n\n.tab {\n  display: inline-flex;\n  align-items: center;\n  font-family: var(--sl-font-sans);\n  font-size: var(--sl-font-size-small);\n  font-weight: var(--sl-font-weight-semibold);\n  border-radius: 4px;\n  color: var(--sl-color-gray-600);\n  padding: var(--sl-spacing-medium) var(--sl-spacing-large);\n  white-space: nowrap;\n  user-select: none;\n  cursor: pointer;\n  transition: var(--transition-speed) box-shadow, var(--transition-speed) color;\n}\n.tab:hover:not(.tab--disabled) {\n  color: var(--sl-color-primary-500);\n}\n.tab:focus {\n  outline: none;\n}\n.tab:focus:not(.tab--disabled) {\n  color: var(--sl-color-primary-500);\n  box-shadow: var(--focus-ring);\n}\n.tab.tab--active:not(.tab--disabled) {\n  color: var(--sl-color-primary-500);\n}\n.tab.tab--closable {\n  padding-right: var(--sl-spacing-small);\n}\n.tab.tab--disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.tab__close-button {\n  font-size: var(--sl-font-size-large);\n  margin-left: var(--sl-spacing-xx-small);\n}\n.tab__close-button::part(base) {\n  padding: var(--sl-spacing-xxx-small);\n}";
 
 // src/components/tab/tab.ts
@@ -17515,7 +17515,7 @@ function scrollIntoView(element, container, direction = "vertical", behavior = "
   }
 }
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/tab-group/tab-group.scss
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/tab-group/tab-group.scss
 var tab_group_default = ":host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n/**\n * @prop --tabs-border-color: The color of the border that separates tabs.\n */\n:host {\n  --tabs-border-color: var(--sl-color-gray-200);\n  display: block;\n}\n\n.tab-group {\n  display: flex;\n  border: solid 1px transparent;\n  border-radius: 0;\n}\n.tab-group .tab-group__tabs {\n  display: flex;\n  position: relative;\n}\n.tab-group .tab-group__indicator {\n  position: absolute;\n  left: 0;\n  transition: var(--sl-transition-fast) transform ease, var(--sl-transition-fast) width ease;\n}\n.tab-group:not(.focus-visible) ::slotted(sl-tab) {\n  --focus-ring: none;\n}\n\n.tab-group--has-scroll-controls .tab-group__nav-container {\n  position: relative;\n  padding: 0 var(--sl-spacing-x-large);\n}\n\n.tab-group__scroll-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: var(--sl-spacing-x-large);\n}\n\n.tab-group__scroll-button--left {\n  left: 0;\n}\n\n.tab-group__scroll-button--right {\n  right: 0;\n}\n\n.tab-group--top {\n  flex-direction: column;\n}\n.tab-group--top .tab-group__nav-container {\n  order: 1;\n}\n.tab-group--top .tab-group__nav {\n  display: flex;\n  overflow-x: auto;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n.tab-group--top .tab-group__nav::-webkit-scrollbar {\n  width: 0;\n  height: 0;\n}\n.tab-group--top .tab-group__tabs {\n  flex: 1 1 auto;\n  position: relative;\n  flex-direction: row;\n  border-bottom: solid 2px var(--tabs-border-color);\n}\n.tab-group--top .tab-group__indicator {\n  bottom: -2px;\n  border-bottom: solid 2px var(--sl-color-primary-500);\n}\n.tab-group--top .tab-group__body {\n  order: 2;\n}\n\n.tab-group--bottom {\n  flex-direction: column;\n}\n.tab-group--bottom .tab-group__nav-container {\n  order: 2;\n}\n.tab-group--bottom .tab-group__nav {\n  display: flex;\n  overflow-x: auto;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n}\n.tab-group--bottom .tab-group__nav::-webkit-scrollbar {\n  width: 0;\n  height: 0;\n}\n.tab-group--bottom .tab-group__tabs {\n  flex: 1 1 auto;\n  position: relative;\n  flex-direction: row;\n  border-top: solid 2px var(--tabs-border-color);\n}\n.tab-group--bottom .tab-group__indicator {\n  top: calc(-1 * 2px);\n  border-top: solid 2px var(--sl-color-primary-500);\n}\n.tab-group--bottom .tab-group__body {\n  order: 1;\n}\n\n.tab-group--left {\n  flex-direction: row;\n}\n.tab-group--left .tab-group__nav-container {\n  order: 1;\n}\n.tab-group--left .tab-group__tabs {\n  flex: 0 0 auto;\n  flex-direction: column;\n  border-right: solid 2px var(--tabs-border-color);\n}\n.tab-group--left .tab-group__indicator {\n  right: calc(-1 * 2px);\n  border-right: solid 2px var(--sl-color-primary-500);\n}\n.tab-group--left .tab-group__body {\n  flex: 1 1 auto;\n  order: 2;\n}\n\n.tab-group--right {\n  flex-direction: row;\n}\n.tab-group--right .tab-group__nav-container {\n  order: 2;\n}\n.tab-group--right .tab-group__tabs {\n  flex: 0 0 auto;\n  flex-direction: column;\n  border-left: solid 2px var(--tabs-border-color);\n}\n.tab-group--right .tab-group__indicator {\n  left: calc(-1 * 2px);\n  border-left: solid 2px var(--sl-color-primary-500);\n}\n.tab-group--right .tab-group__body {\n  flex: 1 1 auto;\n  order: 1;\n}";
 
 // src/components/tab-group/tab-group.ts
@@ -17807,7 +17807,7 @@ SlTabGroup = __decorate([
 ], SlTabGroup);
 var tab_group_default2 = SlTabGroup;
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/tab-panel/tab-panel.scss
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/tab-panel/tab-panel.scss
 var tab_panel_default = ":host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n:host {\n  display: block;\n}\n\n.tab-panel {\n  border: solid 1px transparent;\n  padding: 20px 20px;\n}";
 
 // src/components/tab-panel/tab-panel.ts
@@ -17849,7 +17849,7 @@ SlTabPanel = __decorate([
 ], SlTabPanel);
 var tab_panel_default2 = SlTabPanel;
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/tag/tag.scss
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/tag/tag.scss
 var tag_default = ":host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n:host {\n  display: inline-block;\n}\n\n.tag {\n  display: flex;\n  align-items: center;\n  border: solid 1px;\n  line-height: 1;\n  white-space: nowrap;\n  user-select: none;\n  cursor: default;\n}\n\n.tag__clear::part(base) {\n  color: inherit;\n  padding: 0;\n}\n\n.tag--primary {\n  background-color: var(--sl-color-primary-100);\n  border-color: var(--sl-color-primary-200);\n  color: var(--sl-color-primary-700);\n}\n\n.tag--success {\n  background-color: var(--sl-color-success-100);\n  border-color: var(--sl-color-success-200);\n  color: var(--sl-color-success-700);\n}\n\n.tag--info {\n  background-color: var(--sl-color-info-100);\n  border-color: var(--sl-color-info-200);\n  color: var(--sl-color-info-700);\n}\n\n.tag--warning {\n  background-color: var(--sl-color-warning-100);\n  border-color: var(--sl-color-warning-200);\n  color: var(--sl-color-warning-700);\n}\n\n.tag--danger {\n  background-color: var(--sl-color-danger-100);\n  border-color: var(--sl-color-danger-200);\n  color: var(--sl-color-danger-700);\n}\n\n.tag--small {\n  font-size: var(--sl-button-font-size-small);\n  height: calc(var(--sl-input-height-small) * 0.8);\n  line-height: calc(var(--sl-input-height-small) - var(--sl-input-border-width) * 2);\n  border-radius: var(--sl-input-border-radius-small);\n  padding: 0 var(--sl-spacing-x-small);\n}\n.tag--small .tag__clear {\n  margin-left: var(--sl-spacing-xx-small);\n  margin-right: calc(-1 * var(--sl-spacing-xxx-small));\n}\n\n.tag--medium {\n  font-size: var(--sl-button-font-size-medium);\n  height: calc(var(--sl-input-height-medium) * 0.8);\n  line-height: calc(var(--sl-input-height-medium) - var(--sl-input-border-width) * 2);\n  border-radius: var(--sl-input-border-radius-medium);\n  padding: 0 var(--sl-spacing-small);\n}\n.tag--medium .tag__clear {\n  margin-left: var(--sl-spacing-xx-small);\n  margin-right: calc(-1 * var(--sl-spacing-xx-small));\n}\n\n.tag--large {\n  font-size: var(--sl-button-font-size-large);\n  height: calc(var(--sl-input-height-large) * 0.8);\n  line-height: calc(var(--sl-input-height-large) - var(--sl-input-border-width) * 2);\n  border-radius: var(--sl-input-border-radius-large);\n  padding: 0 var(--sl-spacing-medium);\n}\n.tag--large .tag__clear {\n  margin-left: var(--sl-spacing-xx-small);\n  margin-right: calc(-1 * var(--sl-spacing-x-small));\n}\n\n.tag--pill {\n  border-radius: var(--sl-border-radius-pill);\n}";
 
 // src/components/tag/tag.ts
@@ -17966,7 +17966,7 @@ var styleMap = directive((styleInfo) => (part) => {
   }
 });
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/progress-bar/progress-bar.scss
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/progress-bar/progress-bar.scss
 var progress_bar_default = ":host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n/**\n * @prop --height: The progress bar's height.\n * @prop --track-color: The track color.\n * @prop --indicator-color: The indicator color.\n * @prop --label-color: The label color.\n */\n:host {\n  --height: 16px;\n  --track-color: var(--sl-color-gray-200);\n  --indicator-color: var(--sl-color-primary-500);\n  --label-color: var(--sl-color-white);\n  display: block;\n}\n\n.progress-bar {\n  position: relative;\n  background-color: var(--track-color);\n  height: var(--height);\n  border-radius: var(--sl-border-radius-pill);\n  overflow: hidden;\n}\n\n.progress-bar__indicator {\n  height: 100%;\n  font-family: var(--sl-font-sans);\n  font-size: 12px;\n  font-weight: var(--sl-font-weight-normal);\n  background-color: var(--indicator-color);\n  color: var(--label-color);\n  text-align: center;\n  line-height: var(--height);\n  white-space: nowrap;\n  overflow: hidden;\n  transition: 400ms width, 400ms background-color;\n  user-select: none;\n}\n\n.progress-bar--indeterminate .progress-bar__indicator {\n  position: absolute;\n  animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);\n}\n\n@keyframes indeterminate {\n  0% {\n    left: -50%;\n    width: 50%;\n  }\n  75%, 100% {\n    left: 100%;\n    width: 50%;\n  }\n}";
 
 // src/components/progress-bar/progress-bar.ts
@@ -18012,7 +18012,7 @@ SlProgressBar = __decorate([
 ], SlProgressBar);
 var progress_bar_default2 = SlProgressBar;
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/progress-ring/progress-ring.scss
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/progress-ring/progress-ring.scss
 var progress_ring_default = ":host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n/**\n * @prop --track-color: The track color.\n * @prop --indicator-color: The indicator color.\n */\n:host {\n  --track-color: var(--sl-color-gray-200);\n  --indicator-color: var(--sl-color-primary-500);\n  display: inline-flex;\n}\n\n.progress-ring {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n}\n\n.progress-ring__image {\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n}\n\n.progress-ring__track {\n  stroke: var(--track-color);\n}\n\n.progress-ring__indicator {\n  stroke: var(--indicator-color);\n  transition: 0.35s stroke-dashoffset, 0.35s stroke;\n}\n\n.progress-ring__label {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  user-select: none;\n}";
 
 // src/components/progress-ring/progress-ring.ts
@@ -18088,7 +18088,7 @@ SlProgressRing = __decorate([
 ], SlProgressRing);
 var progress_ring_default2 = SlProgressRing;
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/radio/radio.scss
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/radio/radio.scss
 var radio_default = ":host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n:host {\n  display: inline-block;\n}\n\n.radio {\n  display: inline-flex;\n  align-items: center;\n  font-family: var(--sl-input-font-family);\n  font-size: var(--sl-input-font-size-medium);\n  font-weight: var(--sl-input-font-weight);\n  color: var(--sl-input-color);\n  vertical-align: middle;\n  cursor: pointer;\n}\n\n.radio__icon {\n  display: inline-flex;\n  width: var(--sl-toggle-size);\n  height: var(--sl-toggle-size);\n}\n.radio__icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n.radio__control {\n  flex: 0 0 auto;\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--sl-toggle-size);\n  height: var(--sl-toggle-size);\n  border: solid var(--sl-input-border-width) var(--sl-input-border-color);\n  border-radius: 50%;\n  background-color: var(--sl-input-background-color);\n  color: transparent;\n  transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color, var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow;\n}\n.radio__control input[type=radio] {\n  position: absolute;\n  opacity: 0;\n  padding: 0;\n  margin: 0;\n  pointer-events: none;\n}\n\n.radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {\n  border-color: var(--sl-input-border-color-hover);\n  background-color: var(--sl-input-background-color-hover);\n}\n\n.radio.radio--focused:not(.radio--checked):not(.radio--disabled) .radio__control {\n  border-color: var(--sl-input-border-color-focus);\n  background-color: var(--sl-input-background-color-focus);\n  box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);\n}\n\n.radio--checked .radio__control {\n  color: var(--sl-color-white);\n  border-color: var(--sl-color-primary-500);\n  background-color: var(--sl-color-primary-500);\n}\n\n.radio.radio--checked:not(.radio--disabled) .radio__control:hover {\n  border-color: var(--sl-color-primary-400);\n  background-color: var(--sl-color-primary-400);\n}\n\n.radio.radio--checked:not(.radio--disabled).radio--focused .radio__control {\n  border-color: var(--sl-color-primary-400);\n  background-color: var(--sl-color-primary-400);\n  box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);\n}\n\n.radio--disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.radio__label {\n  line-height: var(--sl-toggle-size);\n  margin-left: 0.5em;\n  user-select: none;\n}";
 
 // src/components/radio/radio.ts
@@ -18249,7 +18249,7 @@ SlRadio = __decorate([
 ], SlRadio);
 var radio_default2 = SlRadio;
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/range/range.scss
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/range/range.scss
 var range_default = ':host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n.form-control .form-control__label {\n  display: none;\n}\n.form-control .form-control__help-text {\n  display: none;\n}\n\n.form-control--has-label .form-control__label {\n  display: inline-block;\n  color: var(--sl-input-label-color);\n  margin-bottom: var(--sl-spacing-xxx-small);\n}\n.form-control--has-label.form-control--small .form-control__label {\n  font-size: var(--sl-input-label-font-size-small);\n}\n.form-control--has-label.form-control--medium .form-control__label {\n  font-size: var(--sl-input-label-font-size-medium);\n}\n.form-control--has-label.form-control--large .form-control_label {\n  font-size: var(--sl-input-label-font-size-large);\n}\n\n.form-control--has-help-text .form-control__help-text {\n  display: block;\n  color: var(--sl-input-help-text-color);\n}\n.form-control--has-help-text .form-control__help-text ::slotted(*) {\n  margin-top: var(--sl-spacing-xxx-small);\n}\n.form-control--has-help-text.form-control--small .form-control__help-text {\n  font-size: var(--sl-input-help-text-font-size-small);\n}\n.form-control--has-help-text.form-control--medium .form-control__help-text {\n  font-size: var(--sl-input-help-text-font-size-medium);\n}\n.form-control--has-help-text.form-control--large .form-control__help-text {\n  font-size: var(--sl-input-help-text-font-size-large);\n}\n\n:host {\n  --thumb-size: 20px;\n  --tooltip-offset-y: 10px;\n  --track-color: var(--sl-color-gray-200);\n  --track-height: 6px;\n  display: block;\n}\n\n.range {\n  position: relative;\n}\n.range .range__control {\n  -webkit-appearance: none;\n  width: 100%;\n  height: var(--sl-input-height-medium);\n  background: transparent;\n  line-height: var(--sl-input-height-medium);\n  vertical-align: middle;\n}\n.range .range__control::-webkit-slider-runnable-track {\n  width: 100%;\n  height: var(--track-height);\n  background-color: var(--track-color);\n  border-radius: 3px;\n  border: none;\n}\n.range .range__control::-webkit-slider-thumb {\n  border: none;\n  width: var(--thumb-size);\n  height: var(--thumb-size);\n  border-radius: 50%;\n  background-color: var(--sl-color-primary-500);\n  border: solid var(--sl-input-border-width) var(--sl-color-primary-500);\n  -webkit-appearance: none;\n  margin-top: calc(var(--thumb-size) / -2 + var(--track-height) / 2);\n  transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color, var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow, var(--sl-transition-fast) transform;\n  cursor: pointer;\n}\n.range .range__control:not(:disabled)::-webkit-slider-thumb:hover {\n  background-color: var(--sl-color-primary-400);\n  border-color: var(--sl-color-primary-400);\n}\n.range .range__control:not(:disabled):focus::-webkit-slider-thumb {\n  background-color: var(--sl-color-primary-400);\n  border-color: var(--sl-color-primary-400);\n  box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);\n}\n.range .range__control:not(:disabled)::-webkit-slider-thumb:active {\n  background-color: var(--sl-color-primary-500);\n  border-color: var(--sl-color-primary-500);\n  cursor: grabbing;\n}\n.range .range__control::-moz-focus-outer {\n  border: 0;\n}\n.range .range__control::-moz-range-track {\n  width: 100%;\n  height: var(--track-height);\n  background-color: var(--track-color);\n  border-radius: 3px;\n  border: none;\n}\n.range .range__control::-moz-range-thumb {\n  border: none;\n  height: var(--thumb-size);\n  width: var(--thumb-size);\n  border-radius: 50%;\n  background-color: var(--sl-color-primary-500);\n  border-color: var(--sl-color-primary-500);\n  transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color, var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow, var(--sl-transition-fast) transform;\n  cursor: pointer;\n}\n.range .range__control:not(:disabled)::-moz-range-thumb:hover {\n  background-color: var(--sl-color-primary-400);\n  border-color: var(--sl-color-primary-400);\n}\n.range .range__control:not(:disabled):focus::-moz-range-thumb {\n  background-color: var(--sl-color-primary-400);\n  border-color: var(--sl-color-primary-400);\n  box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);\n}\n.range .range__control:not(:disabled)::-moz-range-thumb:active {\n  background-color: var(--sl-color-primary-600);\n  border-color: var(--sl-color-primary-600);\n  cursor: grabbing;\n}\n.range .range__control:focus {\n  outline: none;\n}\n.range .range__control:disabled {\n  opacity: 0.5;\n}\n.range .range__control:disabled::-webkit-slider-thumb {\n  cursor: not-allowed;\n}\n.range .range__control:disabled::-moz-range-thumb {\n  cursor: not-allowed;\n}\n\n.range__tooltip {\n  position: absolute;\n  z-index: var(--sl-z-index-tooltip);\n  left: 1px;\n  border-radius: var(--sl-tooltip-border-radius);\n  background-color: var(--sl-tooltip-background-color);\n  font-family: var(--sl-tooltip-font-family);\n  font-size: var(--sl-tooltip-font-size);\n  font-weight: var(--sl-tooltip-font-weight);\n  line-height: var(--sl-tooltip-line-height);\n  color: var(--sl-tooltip-color);\n  opacity: 0;\n  padding: var(--sl-tooltip-padding);\n  transition: var(--sl-transition-fast) opacity;\n  pointer-events: none;\n}\n.range__tooltip:after {\n  content: "";\n  position: absolute;\n  width: 0;\n  height: 0;\n  left: 50%;\n  margin-left: calc(-1 * var(--sl-tooltip-arrow-size));\n}\n\n.range--tooltip-visible .range__tooltip {\n  opacity: 1;\n}\n\n.range--tooltip-top .range__tooltip {\n  top: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));\n}\n.range--tooltip-top .range__tooltip:after {\n  border-top: var(--sl-tooltip-arrow-size) solid var(--sl-tooltip-background-color);\n  border-left: var(--sl-tooltip-arrow-size) solid transparent;\n  border-right: var(--sl-tooltip-arrow-size) solid transparent;\n  top: 100%;\n}\n\n.range--tooltip-bottom .range__tooltip {\n  bottom: calc(-1 * var(--thumb-size) - var(--tooltip-offset-y));\n}\n.range--tooltip-bottom .range__tooltip:after {\n  border-bottom: var(--sl-tooltip-arrow-size) solid var(--sl-tooltip-background-color);\n  border-left: var(--sl-tooltip-arrow-size) solid transparent;\n  border-right: var(--sl-tooltip-arrow-size) solid transparent;\n  bottom: 100%;\n}';
 
 // src/components/range/range.ts
@@ -18491,7 +18491,7 @@ var unsafeHTML = directive((value) => (part) => {
   previousValues$1.set(part, {value, fragment});
 });
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/rating/rating.scss
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/rating/rating.scss
 var rating_default = ":host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n/**\n * @prop --symbol-color: The inactive color for symbols.\n * @prop --symbol-color-active: The active color for symbols.\n * @prop --symbol-size: The size of symbols.\n * @prop --symbol-spacing: The spacing to use around symbols.\n */\n:host {\n  --symbol-color: var(--sl-color-gray-300);\n  --symbol-color-active: #ffbe00;\n  --symbol-size: 1.2rem;\n  --symbol-spacing: var(--sl-spacing-xxx-small);\n  display: inline-flex;\n}\n\n.rating {\n  position: relative;\n  display: inline-flex;\n  border-radius: var(--sl-border-radius-medium);\n  vertical-align: middle;\n}\n.rating:focus {\n  outline: none;\n}\n.rating.focus-visible:focus {\n  box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);\n}\n\n.rating__symbols {\n  display: inline-flex;\n  position: relative;\n  font-size: var(--symbol-size);\n  line-height: 0;\n  color: var(--symbol-color);\n  white-space: nowrap;\n  cursor: pointer;\n}\n.rating__symbols > * {\n  padding: var(--symbol-spacing);\n}\n\n.rating__symbols--indicator {\n  position: absolute;\n  top: 0;\n  left: 0;\n  color: var(--symbol-color-active);\n  pointer-events: none;\n}\n\n.rating__symbol {\n  transition: var(--sl-transition-fast) transform;\n}\n\n.rating__symbol--hover {\n  transform: scale(1.2);\n}\n\n.rating--disabled .rating__symbols,\n.rating--readonly .rating__symbols {\n  cursor: default;\n}\n.rating--disabled .rating__symbol--hover,\n.rating--readonly .rating__symbol--hover {\n  transform: none;\n}\n\n.rating--disabled {\n  opacity: 0.5;\n}\n.rating--disabled .rating__symbols {\n  cursor: not-allowed;\n}";
 
 // src/components/rating/rating.ts
@@ -18811,7 +18811,7 @@ SlRelativeTime = __decorate([
 ], SlRelativeTime);
 var relative_time_default = SlRelativeTime;
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/resize-observer/resize-observer.scss
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/resize-observer/resize-observer.scss
 var resize_observer_default = ":host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n:host {\n  display: contents;\n}";
 
 // src/components/resize-observer/resize-observer.ts
@@ -18851,7 +18851,7 @@ SlResizeObserver = __decorate([
 ], SlResizeObserver);
 var resize_observer_default2 = SlResizeObserver;
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/responsive-embed/responsive-embed.scss
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/responsive-embed/responsive-embed.scss
 var responsive_embed_default = ":host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n:host {\n  display: block;\n}\n\n.responsive-embed {\n  position: relative;\n}\n.responsive-embed ::slotted(embed),\n.responsive-embed ::slotted(iframe),\n.responsive-embed ::slotted(object) {\n  position: absolute !important;\n  top: 0 !important;\n  left: 0 !important;\n  width: 100% !important;\n  height: 100% !important;\n}";
 
 // src/components/responsive-embed/responsive-embed.ts
@@ -18889,7 +18889,7 @@ SlResponsiveEmbed = __decorate([
 ], SlResponsiveEmbed);
 var responsive_embed_default2 = SlResponsiveEmbed;
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/image-comparer/image-comparer.scss
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/image-comparer/image-comparer.scss
 var image_comparer_default = ":host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n/**\n * @prop --divider-width: The width of the dividing line.\n * @prop --handle-size: The size of the compare handle.\n */\n:host {\n  --divider-width: 2px;\n  --handle-size: 2.5rem;\n  display: inline-block;\n  position: relative;\n}\n\n.image-comparer {\n  max-width: 100%;\n  max-height: 100%;\n  overflow: hidden;\n}\n\n.image-comparer__before,\n.image-comparer__after {\n  pointer-events: none;\n}\n.image-comparer__before ::slotted(img),\n.image-comparer__before ::slotted(svg),\n.image-comparer__after ::slotted(img),\n.image-comparer__after ::slotted(svg) {\n  display: block;\n  max-width: 100% !important;\n  height: auto;\n}\n\n.image-comparer__after {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n}\n\n.image-comparer__divider {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 0;\n  width: var(--divider-width);\n  height: 100%;\n  background-color: var(--sl-color-white);\n  transform: translateX(calc(var(--divider-width) / -2));\n  cursor: ew-resize;\n}\n\n.image-comparer__handle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: calc(50% - (var(--handle-size) / 2));\n  width: var(--handle-size);\n  height: var(--handle-size);\n  background-color: var(--sl-color-white);\n  border-radius: var(--sl-border-radius-circle);\n  font-size: calc(var(--handle-size) * 0.5);\n  color: var(--sl-color-gray-500);\n  cursor: inherit;\n  z-index: 10;\n}\n.image-comparer__handle:focus {\n  outline: none;\n  box-shadow: 0 0 0 1px var(--sl-color-primary-500), 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);\n}";
 
 // src/components/image-comparer/image-comparer.ts
@@ -19029,7 +19029,7 @@ var requestInclude = async (src, mode = "cors") => {
   }
 };
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/include/include.scss
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/include/include.scss
 var include_default = ":host {\n  display: block;\n}";
 
 // src/components/include/include.ts
@@ -19100,7 +19100,7 @@ SlInclude = __decorate([
 ], SlInclude);
 var include_default2 = SlInclude;
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/input/input.scss
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/input/input.scss
 var input_default = ":host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n.form-control .form-control__label {\n  display: none;\n}\n.form-control .form-control__help-text {\n  display: none;\n}\n\n.form-control--has-label .form-control__label {\n  display: inline-block;\n  color: var(--sl-input-label-color);\n  margin-bottom: var(--sl-spacing-xxx-small);\n}\n.form-control--has-label.form-control--small .form-control__label {\n  font-size: var(--sl-input-label-font-size-small);\n}\n.form-control--has-label.form-control--medium .form-control__label {\n  font-size: var(--sl-input-label-font-size-medium);\n}\n.form-control--has-label.form-control--large .form-control_label {\n  font-size: var(--sl-input-label-font-size-large);\n}\n\n.form-control--has-help-text .form-control__help-text {\n  display: block;\n  color: var(--sl-input-help-text-color);\n}\n.form-control--has-help-text .form-control__help-text ::slotted(*) {\n  margin-top: var(--sl-spacing-xxx-small);\n}\n.form-control--has-help-text.form-control--small .form-control__help-text {\n  font-size: var(--sl-input-help-text-font-size-small);\n}\n.form-control--has-help-text.form-control--medium .form-control__help-text {\n  font-size: var(--sl-input-help-text-font-size-medium);\n}\n.form-control--has-help-text.form-control--large .form-control__help-text {\n  font-size: var(--sl-input-help-text-font-size-large);\n}\n\n/**\n * @prop --focus-ring: The focus ring style to use when the control receives focus, a `box-shadow` property.\n */\n:host {\n  --focus-ring: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);\n  display: block;\n}\n\n.input {\n  flex: 1 1 auto;\n  display: inline-flex;\n  align-items: stretch;\n  justify-content: start;\n  position: relative;\n  width: 100%;\n  font-family: var(--sl-input-font-family);\n  font-weight: var(--sl-input-font-weight);\n  letter-spacing: var(--sl-input-letter-spacing);\n  background-color: var(--sl-input-background-color);\n  border: solid var(--sl-input-border-width) var(--sl-input-border-color);\n  vertical-align: middle;\n  overflow: hidden;\n  transition: var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow;\n  cursor: text;\n}\n.input:hover:not(.input--disabled) {\n  background-color: var(--sl-input-background-color-hover);\n  border-color: var(--sl-input-border-color-hover);\n}\n.input:hover:not(.input--disabled) .input__control {\n  color: var(--sl-input-color-hover);\n}\n.input.input--focused:not(.input--disabled) {\n  background-color: var(--sl-input-background-color-focus);\n  border-color: var(--sl-input-border-color-focus);\n  box-shadow: var(--focus-ring);\n}\n.input.input--focused:not(.input--disabled) .input__control {\n  color: var(--sl-input-color-focus);\n}\n.input.input--disabled {\n  background-color: var(--sl-input-background-color-disabled);\n  border-color: var(--sl-input-border-color-disabled);\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.input.input--disabled .input__control {\n  color: var(--sl-input-color-disabled);\n}\n.input.input--disabled .input__control::placeholder {\n  color: var(--sl-input-placeholder-color-disabled);\n}\n\n.input__control {\n  flex: 1 1 auto;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: inherit;\n  min-width: 0;\n  height: 100%;\n  color: var(--sl-input-color);\n  border: none;\n  background: none;\n  box-shadow: none;\n  padding: 0;\n  margin: 0;\n  cursor: inherit;\n  -webkit-appearance: none;\n}\n.input__control::-webkit-search-decoration, .input__control::-webkit-search-cancel-button, .input__control::-webkit-search-results-button, .input__control::-webkit-search-results-decoration {\n  -webkit-appearance: none;\n}\n.input__control:-webkit-autofill, .input__control:-webkit-autofill:hover, .input__control:-webkit-autofill:focus, .input__control:-webkit-autofill:active {\n  box-shadow: 0 0 0 var(--sl-input-height-large) var(--sl-input-background-color-hover) inset !important;\n  -webkit-text-fill-color: var(--sl-color-primary-500);\n}\n.input__control::placeholder {\n  color: var(--sl-input-placeholder-color);\n  user-select: none;\n}\n.input__control:focus {\n  outline: none;\n}\n\n.input__prefix,\n.input__suffix {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  cursor: default;\n}\n.input__prefix ::slotted(sl-icon),\n.input__suffix ::slotted(sl-icon) {\n  color: var(--sl-input-icon-color);\n}\n\n.input--small {\n  border-radius: var(--sl-input-border-radius-small);\n  font-size: var(--sl-input-font-size-small);\n  height: var(--sl-input-height-small);\n}\n.input--small .input__control {\n  height: calc(var(--sl-input-height-small) - var(--sl-input-border-width) * 2);\n  margin: 0 var(--sl-input-spacing-small);\n}\n.input--small .input__clear,\n.input--small .input__password-toggle {\n  margin-right: var(--sl-input-spacing-small);\n}\n.input--small .input__prefix ::slotted(*) {\n  margin-left: var(--sl-input-spacing-small);\n}\n.input--small .input__suffix ::slotted(*) {\n  margin-right: var(--sl-input-spacing-small);\n}\n\n.input--medium {\n  border-radius: var(--sl-input-border-radius-medium);\n  font-size: var(--sl-input-font-size-medium);\n  height: var(--sl-input-height-medium);\n}\n.input--medium .input__control {\n  height: calc(var(--sl-input-height-medium) - var(--sl-input-border-width) * 2);\n  margin: 0 var(--sl-input-spacing-medium);\n}\n.input--medium .input__clear,\n.input--medium .input__password-toggle {\n  margin-right: var(--sl-input-spacing-medium);\n}\n.input--medium .input__prefix ::slotted(*) {\n  margin-left: var(--sl-input-spacing-medium);\n}\n.input--medium .input__suffix ::slotted(*) {\n  margin-right: var(--sl-input-spacing-medium);\n}\n\n.input--large {\n  border-radius: var(--sl-input-border-radius-large);\n  font-size: var(--sl-input-font-size-large);\n  height: var(--sl-input-height-large);\n}\n.input--large .input__control {\n  height: calc(var(--sl-input-height-large) - var(--sl-input-border-width) * 2);\n  margin: 0 var(--sl-input-spacing-large);\n}\n.input--large .input__clear,\n.input--large .input__password-toggle {\n  margin-right: var(--sl-input-spacing-large);\n}\n.input--large .input__prefix ::slotted(*) {\n  margin-left: var(--sl-input-spacing-large);\n}\n.input--large .input__suffix ::slotted(*) {\n  margin-right: var(--sl-input-spacing-large);\n}\n\n.input--pill.input--small {\n  border-radius: var(--sl-input-height-small);\n}\n.input--pill.input--medium {\n  border-radius: var(--sl-input-height-medium);\n}\n.input--pill.input--large {\n  border-radius: var(--sl-input-height-large);\n}\n\n.input__clear,\n.input__password-toggle {\n  display: inline-flex;\n  align-items: center;\n  font-size: inherit;\n  color: var(--sl-input-icon-color);\n  border: none;\n  background: none;\n  padding: 0;\n  transition: var(--sl-transition-fast) color;\n  cursor: pointer;\n}\n.input__clear:hover,\n.input__password-toggle:hover {\n  color: var(--sl-input-icon-color-hover);\n}\n.input__clear:focus,\n.input__password-toggle:focus {\n  outline: none;\n}\n\n.input--empty .input__clear {\n  visibility: hidden;\n}";
 
 // src/components/input/input.ts
@@ -19427,7 +19427,7 @@ SlInput = __decorate([
 ], SlInput);
 var input_default2 = SlInput;
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/menu/menu.scss
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/menu/menu.scss
 var menu_default = ":host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n:host {\n  display: block;\n}\n\n.menu {\n  padding: var(--sl-spacing-x-small) 0;\n}\n.menu:focus {\n  outline: none;\n}";
 
 // src/components/menu/menu.ts
@@ -19523,7 +19523,7 @@ SlMenu = __decorate([
 ], SlMenu);
 var menu_default2 = SlMenu;
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/menu-divider/menu-divider.scss
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/menu-divider/menu-divider.scss
 var menu_divider_default = ":host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n:host {\n  display: block;\n}\n\n.menu-divider {\n  border-top: solid 1px var(--sl-panel-border-color);\n  margin: var(--sl-spacing-x-small) 0;\n}";
 
 // src/components/menu-divider/menu-divider.ts
@@ -19538,7 +19538,7 @@ SlMenuDivider = __decorate([
 ], SlMenuDivider);
 var menu_divider_default2 = SlMenuDivider;
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/menu-item/menu-item.scss
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/menu-item/menu-item.scss
 var menu_item_default = ":host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n:host {\n  display: block;\n}\n\n.menu-item {\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  font-family: var(--sl-font-sans);\n  font-size: var(--sl-font-size-medium);\n  font-weight: var(--sl-font-weight-normal);\n  line-height: var(--sl-line-height-normal);\n  letter-spacing: var(--sl-letter-spacing-normal);\n  text-align: left;\n  color: var(--sl-color-gray-700);\n  padding: var(--sl-spacing-xx-small) var(--sl-spacing-x-large);\n  transition: var(--sl-transition-fast) fill;\n  user-select: none;\n  white-space: nowrap;\n  cursor: pointer;\n}\n.menu-item.menu-item--focused:not(.menu-item--disabled) {\n  outline: none;\n  background-color: var(--sl-color-primary-500);\n  color: var(--sl-color-white);\n}\n.menu-item.menu-item--disabled {\n  outline: none;\n  color: var(--sl-color-gray-400);\n  cursor: not-allowed;\n}\n.menu-item .menu-item__label {\n  flex: 1 1 auto;\n}\n.menu-item .menu-item__prefix {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n}\n.menu-item .menu-item__prefix ::slotted(:last-child) {\n  margin-right: 0.5em;\n}\n.menu-item .menu-item__suffix {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n}\n.menu-item .menu-item__suffix ::slotted(:first-child) {\n  margin-left: 0.5em;\n}\n\n.menu-item .menu-item__check {\n  display: flex;\n  position: absolute;\n  left: 0.5em;\n  top: calc(50% - 0.5em);\n  visibility: hidden;\n  align-items: center;\n  font-size: inherit;\n}\n\n.menu-item--checked .menu-item__check {\n  visibility: visible;\n}";
 
 // src/components/menu-item/menu-item.ts
@@ -19627,7 +19627,7 @@ SlMenuItem = __decorate([
 ], SlMenuItem);
 var menu_item_default2 = SlMenuItem;
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/menu-label/menu-label.scss
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/menu-label/menu-label.scss
 var menu_label_default = ":host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n:host {\n  display: block;\n}\n\n.menu-label {\n  font-family: var(--sl-font-sans);\n  font-size: var(--sl-font-size-small);\n  font-weight: var(--sl-font-weight-normal);\n  line-height: var(--sl-line-height-normal);\n  letter-spacing: var(--sl-letter-spacing-normal);\n  color: var(--sl-color-gray-400);\n  padding: var(--sl-spacing-xx-small) var(--sl-spacing-xx-large);\n  user-select: none;\n}";
 
 // src/components/menu-label/menu-label.ts
@@ -19646,7 +19646,7 @@ SlMenuLabel = __decorate([
 ], SlMenuLabel);
 var menu_label_default2 = SlMenuLabel;
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/form/form.scss
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/form/form.scss
 var form_default = ":host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n:host {\n  display: block;\n}";
 
 // src/components/form/form.ts
@@ -20181,7 +20181,7 @@ var unsafeSVG = directive((value) => (part) => {
   previousValues$2.set(part, {value, fragment});
 });
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/icon/icon.scss
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/icon/icon.scss
 var icon_default = ":host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n:host {\n  display: inline-block;\n  width: 1em;\n  height: 1em;\n  contain: strict;\n  box-sizing: content-box !important;\n}\n\n.icon,\nsvg {\n  display: block;\n  height: 100%;\n  width: 100%;\n}";
 
 // src/components/icon/icon.ts
@@ -20289,7 +20289,7 @@ SlIcon = __decorate([
 ], SlIcon);
 var icon_default2 = SlIcon;
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/icon-button/icon-button.scss
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/icon-button/icon-button.scss
 var icon_button_default = ":host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n:host {\n  display: inline-block;\n}\n\n.icon-button {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  background: none;\n  border: none;\n  border-radius: var(--sl-border-radius-medium);\n  font-size: inherit;\n  color: var(--sl-color-gray-500);\n  padding: var(--sl-spacing-x-small);\n  cursor: pointer;\n  transition: var(--sl-transition-medium) color;\n  -webkit-appearance: none;\n}\n.icon-button:hover:not(.icon-button--disabled), .icon-button:focus:not(.icon-button--disabled) {\n  color: var(--sl-color-primary-500);\n}\n.icon-button:active:not(.icon-button--disabled) {\n  color: var(--sl-color-primary-600);\n}\n.icon-button:focus {\n  outline: none;\n}\n\n.icon-button--disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.focus-visible.icon-button:focus {\n  box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);\n}";
 
 // src/components/icon-button/icon-button.ts
@@ -20351,7 +20351,7 @@ SlIconButton = __decorate([
 ], SlIconButton);
 var icon_button_default2 = SlIconButton;
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/button-group/button-group.scss
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/button-group/button-group.scss
 var button_group_default = ":host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n:host {\n  display: inline-block;\n}\n\n.button-group {\n  display: flex;\n  flex-wrap: nowrap;\n  position: relative;\n}\n\n::slotted(.sl-focus) {\n  z-index: 1;\n}";
 
 // src/components/button-group/button-group.ts
@@ -20387,7 +20387,7 @@ SlButtonGroup = __decorate([
 ], SlButtonGroup);
 var button_group_default2 = SlButtonGroup;
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/card/card.scss
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/card/card.scss
 var card_default = ":host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n/**\n * @prop --border-color: The card's border color, including borders that occur inside the card.\n * @prop --border-radius: The border radius for card edges.\n * @prop --border-width: The width of card borders.\n * @prop --padding: The padding to use for card sections.\n */\n:host {\n  --border-color: var(--sl-color-gray-200);\n  --border-radius: var(--sl-border-radius-medium);\n  --border-width: 1px;\n  --padding: var(--sl-spacing-large);\n  display: inline-block;\n}\n\n.card {\n  display: flex;\n  flex-direction: column;\n  background-color: var(--sl-color-white);\n  box-shadow: var(--sl-shadow-x-small);\n  border: solid var(--border-width) var(--border-color);\n  border-radius: var(--border-radius);\n}\n\n.card__image {\n  border-top-left-radius: var(--border-radius);\n  border-top-right-radius: var(--border-radius);\n  margin: calc(-1 * var(--border-width));\n  overflow: hidden;\n}\n.card__image ::slotted(img) {\n  display: block;\n  width: 100%;\n}\n\n.card:not(.card--has-image) .card__image {\n  display: none;\n}\n\n.card__header {\n  border-bottom: solid var(--border-width) var(--border-color);\n  padding: calc(var(--padding) / 2) var(--padding);\n}\n\n.card:not(.card--has-header) .card__header {\n  display: none;\n}\n\n.card__body {\n  padding: var(--padding);\n}\n\n.card--has-footer .card__footer {\n  border-top: solid var(--border-width) var(--border-color);\n  padding: var(--padding);\n}\n\n.card:not(.card--has-footer) .card__footer {\n  display: none;\n}";
 
 // src/components/card/card.ts
@@ -20452,7 +20452,7 @@ SlCard = __decorate([
 ], SlCard);
 var card_default2 = SlCard;
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/checkbox/checkbox.scss
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/checkbox/checkbox.scss
 var checkbox_default = ":host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n:host {\n  display: inline-block;\n}\n\n.checkbox {\n  display: inline-flex;\n  align-items: center;\n  font-family: var(--sl-input-font-family);\n  font-size: var(--sl-input-font-size-medium);\n  font-weight: var(--sl-input-font-weight);\n  color: var(--sl-input-color);\n  vertical-align: middle;\n  cursor: pointer;\n}\n\n.checkbox__control {\n  flex: 0 0 auto;\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--sl-toggle-size);\n  height: var(--sl-toggle-size);\n  border: solid var(--sl-input-border-width) var(--sl-input-border-color);\n  border-radius: 2px;\n  background-color: var(--sl-input-background-color);\n  color: var(--sl-color-white);\n  transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color, var(--sl-transition-fast) color, var(--sl-transition-fast) box-shadow;\n}\n.checkbox__control input[type=checkbox] {\n  position: absolute;\n  opacity: 0;\n  padding: 0;\n  margin: 0;\n  pointer-events: none;\n}\n.checkbox__control .checkbox__icon {\n  display: inline-flex;\n  width: var(--sl-toggle-size);\n  height: var(--sl-toggle-size);\n}\n.checkbox__control .checkbox__icon svg {\n  width: 100%;\n  height: 100%;\n}\n\n.checkbox:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control:hover {\n  border-color: var(--sl-input-border-color-hover);\n  background-color: var(--sl-input-background-color-hover);\n}\n\n.checkbox.checkbox--focused:not(.checkbox--checked):not(.checkbox--disabled) .checkbox__control {\n  border-color: var(--sl-input-border-color-focus);\n  background-color: var(--sl-input-background-color-focus);\n  box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);\n}\n\n.checkbox--checked .checkbox__control,\n.checkbox--indeterminate .checkbox__control {\n  border-color: var(--sl-color-primary-500);\n  background-color: var(--sl-color-primary-500);\n}\n\n.checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n.checkbox.checkbox--indeterminate:not(.checkbox--disabled) .checkbox__control:hover {\n  border-color: var(--sl-color-primary-400);\n  background-color: var(--sl-color-primary-400);\n}\n\n.checkbox.checkbox--checked:not(.checkbox--disabled).checkbox--focused .checkbox__control,\n.checkbox.checkbox--indeterminate:not(.checkbox--disabled).checkbox--focused .checkbox__control {\n  border-color: var(--sl-color-primary-400);\n  background-color: var(--sl-color-primary-400);\n  box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);\n}\n\n.checkbox--disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.checkbox__label {\n  line-height: var(--sl-toggle-size);\n  margin-left: 0.5em;\n  user-select: none;\n}";
 
 // src/components/checkbox/checkbox.ts
@@ -22207,7 +22207,7 @@ var require_color = __commonJS((exports, module) => {
   module.exports = Color;
 });
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/color-picker/color-picker.scss
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/color-picker/color-picker.scss
 var color_picker_default = `:host {
   position: relative;
   box-sizing: border-box;
@@ -23203,7 +23203,7 @@ SlColorPicker = __decorate([
 ], SlColorPicker);
 var color_picker_default2 = SlColorPicker;
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/details/details.scss
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/details/details.scss
 var details_default = ":host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n/**\n * @prop --hide-duration: The length of the hide transition.\n * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.\n * @prop --show-duration: The length of the show transition.\n * @prop --show-timing-function: The timing function (easing) to use for the show transition.\n */\n:host {\n  --hide-duration: var(--sl-transition-medium);\n  --hide-timing-function: ease;\n  --show-duration: var(--sl-transition-medium);\n  --show-timing-function: ease;\n  display: block;\n}\n\n.details {\n  border: solid 1px var(--sl-color-gray-200);\n  border-radius: var(--sl-border-radius-medium);\n  overflow-anchor: none;\n}\n\n.details--disabled {\n  opacity: 0.5;\n}\n\n.details__header {\n  display: flex;\n  align-items: center;\n  border-radius: inherit;\n  padding: var(--sl-spacing-medium);\n  user-select: none;\n  cursor: pointer;\n}\n.details__header:focus {\n  outline: none;\n}\n\n.focus-visible .details__header:focus {\n  box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);\n}\n\n.details--disabled .details__header {\n  cursor: not-allowed;\n}\n.details--disabled .details__header:focus {\n  outline: none;\n  box-shadow: none;\n}\n\n.details__summary {\n  flex: 1 1 auto;\n  display: flex;\n  align-items: center;\n}\n\n.details__summary-icon {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  transition: var(--sl-transition-medium) transform ease;\n}\n\n.details--open .details__summary-icon {\n  transform: rotate(90deg);\n}\n\n.details__body {\n  height: 0;\n  overflow: hidden;\n  transition-property: height;\n  transition-duration: var(--hide-duration);\n  transition-timing-function: var(--hide-timing-function);\n}\n\n.details--open .details__body {\n  transition-duration: var(--show-duration);\n  transition-timing-function: var(--show-timing-function);\n}\n\n.details__content {\n  padding: var(--sl-spacing-medium);\n}";
 
 // src/components/details/details.ts
@@ -23438,7 +23438,7 @@ function isPreventScrollSupported() {
   return supported;
 }
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/dialog/dialog.scss
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/dialog/dialog.scss
 var dialog_default = ":host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n/**\n * @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.\n */\n:host {\n  --width: 31rem;\n  display: contents;\n}\n\n.dialog {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: var(--sl-z-index-dialog);\n}\n.dialog:not(.dialog--visible) {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  overflow: hidden;\n  pointer-events: none;\n  visibility: hidden;\n}\n\n.dialog__panel {\n  display: flex;\n  flex-direction: column;\n  z-index: 2;\n  width: var(--width);\n  max-width: calc(100% - var(--sl-spacing-xx-large));\n  max-height: calc(100% - var(--sl-spacing-xx-large));\n  background-color: var(--sl-panel-background-color);\n  border-radius: var(--sl-border-radius-medium);\n  box-shadow: var(--sl-shadow-x-large);\n  opacity: 0;\n  transform: scale(0.8);\n  transition: var(--sl-transition-medium) opacity, var(--sl-transition-medium) transform;\n}\n.dialog__panel:focus {\n  outline: none;\n}\n\n@media screen and (max-width: 420px) {\n  .dialog__panel {\n    max-height: 80vh;\n  }\n}\n.dialog--open .dialog__panel {\n  display: flex;\n  opacity: 1;\n  transform: none;\n}\n\n.dialog__header {\n  flex: 0 0 auto;\n  display: flex;\n}\n\n.dialog__title {\n  flex: 1 1 auto;\n  font-size: var(--sl-font-size-large);\n  line-height: var(--sl-line-height-dense);\n  padding: var(--sl-spacing-large);\n}\n\n.dialog__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--sl-font-size-x-large);\n  padding: 0 var(--sl-spacing-large);\n}\n\n.dialog__body {\n  flex: 1 1 auto;\n  padding: var(--sl-spacing-large);\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.dialog__footer {\n  flex: 0 0 auto;\n  text-align: right;\n  padding: var(--sl-spacing-large);\n}\n.dialog__footer ::slotted(sl-button:not(:first-of-type)) {\n  margin-left: var(--sl-spacing-x-small);\n}\n\n.dialog:not(.dialog--has-footer) .dialog__footer {\n  display: none;\n}\n\n.dialog__overlay {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--sl-overlay-background-color);\n  opacity: 0;\n  transition: var(--sl-transition-medium) opacity;\n}\n\n.dialog--open .dialog__overlay {\n  opacity: 1;\n}";
 
 // src/components/dialog/dialog.ts
@@ -23644,7 +23644,7 @@ SlDialog = __decorate([
 ], SlDialog);
 var dialog_default2 = SlDialog;
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/drawer/drawer.scss
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/drawer/drawer.scss
 var drawer_default = ":host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n/**\n * @prop --size: The preferred size of the drawer. This will be applied to the drawer's width or height depending on its\n *   `placement`. Note that the drawer will shrink to accommodate smaller screens.\n */\n:host {\n  --size: 25rem;\n  display: contents;\n}\n\n.drawer {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  overflow: hidden;\n}\n.drawer:not(.drawer--visible) {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  overflow: hidden;\n  pointer-events: none;\n  visibility: hidden;\n}\n\n.drawer--contained {\n  position: absolute;\n  z-index: initial;\n}\n\n.drawer--fixed {\n  position: fixed;\n  z-index: var(--sl-z-index-drawer);\n}\n\n.drawer__panel {\n  position: absolute;\n  display: flex;\n  flex-direction: column;\n  z-index: 2;\n  max-width: 100%;\n  max-height: 100%;\n  background-color: var(--sl-panel-background-color);\n  box-shadow: var(--sl-shadow-x-large);\n  transition: var(--sl-transition-medium) transform;\n  overflow: auto;\n  pointer-events: all;\n}\n.drawer__panel:focus {\n  outline: none;\n}\n\n.drawer--top .drawer__panel {\n  top: 0;\n  right: auto;\n  bottom: auto;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, -100%);\n}\n\n.drawer--right .drawer__panel {\n  top: 0;\n  right: 0;\n  bottom: auto;\n  left: auto;\n  width: var(--size);\n  height: 100%;\n  transform: translate(100%, 0);\n}\n\n.drawer--bottom .drawer__panel {\n  top: auto;\n  right: auto;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: var(--size);\n  transform: translate(0, 100%);\n}\n\n.drawer--left .drawer__panel {\n  top: 0;\n  right: auto;\n  bottom: auto;\n  left: 0;\n  width: var(--size);\n  height: 100%;\n  transform: translate(-100%, 0);\n}\n\n.drawer--open .drawer__panel {\n  transform: translate(0, 0);\n}\n\n.drawer__header {\n  display: flex;\n}\n\n.drawer__title {\n  flex: 1 1 auto;\n  font-size: var(--sl-font-size-large);\n  line-height: var(--sl-line-height-dense);\n  padding: var(--sl-spacing-large);\n}\n\n.drawer__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--sl-font-size-x-large);\n  padding: 0 var(--sl-spacing-large);\n}\n\n.drawer__body {\n  flex: 1 1 auto;\n  padding: var(--sl-spacing-large);\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.drawer__footer {\n  text-align: right;\n  padding: var(--sl-spacing-large);\n}\n.drawer__footer ::slotted(sl-button:not(:last-of-type)) {\n  margin-right: var(--sl-spacing-x-small);\n}\n\n.drawer:not(.drawer--has-footer) .drawer__footer {\n  display: none;\n}\n\n.drawer__overlay {\n  display: block;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  background-color: var(--sl-overlay-background-color);\n  opacity: 0;\n  transition: var(--sl-transition-medium) opacity;\n  pointer-events: all;\n}\n\n.drawer--contained .drawer__overlay {\n  position: absolute;\n}\n\n.drawer--open .drawer__overlay {\n  opacity: 1;\n}";
 
 // src/components/drawer/drawer.ts
@@ -23861,8 +23861,8 @@ SlDrawer = __decorate([
 ], SlDrawer);
 var drawer_default2 = SlDrawer;
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/dropdown/dropdown.scss
-var dropdown_default = ":host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n:host {\n  display: inline-block;\n}\n\n.dropdown {\n  position: relative;\n}\n\n.dropdown__trigger {\n  display: block;\n}\n\n.dropdown__positioner {\n  position: absolute;\n  z-index: var(--sl-z-index-dropdown);\n}\n\n.dropdown__panel {\n  max-height: 75vh;\n  font-family: var(--sl-font-sans);\n  font-size: var(--sl-font-size-medium);\n  font-weight: var(--sl-font-weight-normal);\n  color: var(--color);\n  background-color: var(--sl-panel-background-color);\n  border: solid 1px var(--sl-panel-border-color);\n  border-radius: var(--sl-border-radius-medium);\n  box-shadow: var(--sl-shadow-large);\n  opacity: 0;\n  overflow: auto;\n  overscroll-behavior: none;\n  pointer-events: none;\n  transform: scale(0.9);\n  transition: var(--sl-transition-fast) opacity, var(--sl-transition-fast) transform;\n}\n\n.dropdown__positioner[data-popper-placement^=top] .dropdown__panel {\n  transform-origin: bottom;\n}\n.dropdown__positioner[data-popper-placement^=bottom] .dropdown__panel {\n  transform-origin: top;\n}\n.dropdown__positioner[data-popper-placement^=left] .dropdown__panel {\n  transform-origin: right;\n}\n.dropdown__positioner[data-popper-placement^=right] .dropdown__panel {\n  transform-origin: left;\n}\n.dropdown__positioner.sl_popover-visible .dropdown__panel {\n  opacity: 1;\n  transform: none;\n  pointer-events: all;\n}";
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/dropdown/dropdown.scss
+var dropdown_default = ":host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n:host {\n  display: inline-block;\n}\n\n.dropdown {\n  position: relative;\n}\n\n.dropdown__trigger {\n  display: block;\n}\n\n.dropdown__positioner {\n  position: absolute;\n  z-index: var(--sl-z-index-dropdown);\n}\n\n.dropdown__panel {\n  max-height: 75vh;\n  font-family: var(--sl-font-sans);\n  font-size: var(--sl-font-size-medium);\n  font-weight: var(--sl-font-weight-normal);\n  color: var(--color);\n  background-color: var(--sl-panel-background-color);\n  border: solid 1px var(--sl-panel-border-color);\n  border-radius: var(--sl-border-radius-medium);\n  box-shadow: var(--sl-shadow-large);\n  opacity: 0;\n  overflow: auto;\n  overscroll-behavior: none;\n  pointer-events: none;\n  transform: scale(0.9);\n  transition: var(--sl-transition-fast) opacity, var(--sl-transition-fast) transform;\n}\n\n.dropdown__positioner[data-popper-placement^=top] .dropdown__panel {\n  transform-origin: bottom;\n}\n.dropdown__positioner[data-popper-placement^=bottom] .dropdown__panel {\n  transform-origin: top;\n}\n.dropdown__positioner[data-popper-placement^=left] .dropdown__panel {\n  transform-origin: right;\n}\n.dropdown__positioner[data-popper-placement^=right] .dropdown__panel {\n  transform-origin: left;\n}\n.dropdown__positioner.popover-visible .dropdown__panel {\n  opacity: 1;\n  transform: none;\n  pointer-events: all;\n}";
 
 // src/internal/tabbable.ts
 function isTabbable(el) {
@@ -23910,7 +23910,7 @@ var SlDropdown = class extends LitElement {
     }
   }
   firstUpdated() {
-    this.sl_popover = new sl_popover_default(this.trigger, this.positioner, {
+    this.popover = new popover_default(this.trigger, this.positioner, {
       strategy: this.hoist ? "fixed" : "absolute",
       placement: this.placement,
       distance: this.distance,
@@ -23931,7 +23931,7 @@ var SlDropdown = class extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.hide();
-    this.sl_popover.destroy();
+    this.popover.destroy();
   }
   focusOnTrigger() {
     const slot = this.trigger.querySelector("slot");
@@ -23990,9 +23990,9 @@ var SlDropdown = class extends LitElement {
       this.focusOnTrigger();
     }
   }
-  handleSlPopoverOptionsChange() {
-    if (this.sl_popover) {
-      this.sl_popover.setOptions({
+  handlePopoverOptionsChange() {
+    if (this.popover) {
+      this.popover.setOptions({
         strategy: this.hoist ? "fixed" : "absolute",
         placement: this.placement,
         distance: this.distance,
@@ -24072,7 +24072,7 @@ var SlDropdown = class extends LitElement {
     document.addEventListener("mousedown", this.handleDocumentMouseDown);
     this.isVisible = true;
     this.open = true;
-    this.sl_popover.show();
+    this.popover.show();
   }
   hide() {
     if (!this.isVisible) {
@@ -24089,13 +24089,13 @@ var SlDropdown = class extends LitElement {
     document.removeEventListener("mousedown", this.handleDocumentMouseDown);
     this.isVisible = false;
     this.open = false;
-    this.sl_popover.hide();
+    this.popover.hide();
   }
   reposition() {
     if (!this.open) {
       return;
     }
-    this.sl_popover.reposition();
+    this.popover.reposition();
   }
   handleOpenChange() {
     this.open ? this.show() : this.hide();
@@ -24186,7 +24186,7 @@ __decorate([
   watch("hoist"),
   watch("placement"),
   watch("skidding")
-], SlDropdown.prototype, "handleSlPopoverOptionsChange", 1);
+], SlDropdown.prototype, "handlePopoverOptionsChange", 1);
 __decorate([
   watch("open")
 ], SlDropdown.prototype, "handleOpenChange", 1);
@@ -24195,7 +24195,7 @@ SlDropdown = __decorate([
 ], SlDropdown);
 var dropdown_default2 = SlDropdown;
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/alert/alert.scss
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/alert/alert.scss
 var alert_default = ":host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n/**\n * @prop --box-shadow: The alert's box shadow.\n */\n:host {\n  display: contents;\n  margin: 0;\n}\n\n.alert {\n  position: relative;\n  display: flex;\n  align-items: stretch;\n  background-color: var(--sl-color-white);\n  border: solid 1px var(--sl-color-gray-200);\n  border-top-width: 3px;\n  border-radius: var(--sl-border-radius-medium);\n  box-shadow: var(--box-shadow);\n  font-family: var(--sl-font-sans);\n  font-size: var(--sl-font-size-small);\n  font-weight: var(--sl-font-weight-normal);\n  line-height: 1.6;\n  color: var(--sl-color-gray-700);\n  opacity: 0;\n  transform: scale(0.9);\n  transition: var(--sl-transition-medium) opacity ease, var(--sl-transition-medium) transform ease;\n  margin: inherit;\n}\n.alert:not(.alert--visible) {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  clip: rect(0 0 0 0);\n  clip-path: inset(50%);\n  overflow: hidden;\n  pointer-events: none;\n  visibility: hidden;\n}\n\n.alert--open {\n  opacity: 1;\n  transform: none;\n}\n\n.alert__icon {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--sl-font-size-large);\n}\n.alert__icon ::slotted(*) {\n  margin-left: var(--sl-spacing-large);\n}\n\n.alert--primary {\n  border-top-color: var(--sl-color-primary-500);\n}\n.alert--primary .alert__icon {\n  color: var(--sl-color-primary-500);\n}\n\n.alert--success {\n  border-top-color: var(--sl-color-success-500);\n}\n.alert--success .alert__icon {\n  color: var(--sl-color-success-500);\n}\n\n.alert--info {\n  border-top-color: var(--sl-color-info-500);\n}\n.alert--info .alert__icon {\n  color: var(--sl-color-info-500);\n}\n\n.alert--warning {\n  border-top-color: var(--sl-color-warning-500);\n}\n.alert--warning .alert__icon {\n  color: var(--sl-color-warning-500);\n}\n\n.alert--danger {\n  border-top-color: var(--sl-color-danger-500);\n}\n.alert--danger .alert__icon {\n  color: var(--sl-color-danger-500);\n}\n\n.alert__message {\n  flex: 1 1 auto;\n  padding: var(--sl-spacing-large);\n  overflow: hidden;\n}\n\n.alert__close {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n  font-size: var(--sl-font-size-large);\n  padding-right: var(--sl-spacing-medium);\n}";
 
 // src/components/alert/alert.ts
@@ -25348,7 +25348,7 @@ function queryAsync(selector) {
   };
 }
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/animation/animation.scss
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/animation/animation.scss
 var animation_default = ":host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n:host {\n  display: contents;\n}";
 
 // src/components/animation/animation.ts
@@ -25538,7 +25538,7 @@ SlAnimation = __decorate([
 ], SlAnimation);
 var animation_default2 = SlAnimation;
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/avatar/avatar.scss
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/avatar/avatar.scss
 var avatar_default = ":host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n/**\n * @prop --size: The size of the avatar.\n */\n:host {\n  display: inline-block;\n  --size: 3rem;\n}\n\n.avatar {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  width: var(--size);\n  height: var(--size);\n  background-color: var(--sl-color-gray-300);\n  font-family: var(--sl-font-sans);\n  font-size: calc(var(--size) * 0.5);\n  font-weight: var(--sl-font-weight-normal);\n  color: var(--sl-color-white);\n  overflow: hidden;\n  user-select: none;\n  vertical-align: middle;\n}\n\n.avatar--circle {\n  border-radius: var(--sl-border-radius-circle);\n}\n\n.avatar--rounded {\n  border-radius: var(--sl-border-radius-medium);\n}\n\n.avatar--square {\n  border-radius: 0;\n}\n\n.avatar__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n\n.avatar__initials {\n  line-height: 1;\n  text-transform: uppercase;\n}\n\n.avatar__image {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}";
 
 // src/components/avatar/avatar.ts
@@ -25596,7 +25596,7 @@ SlAvatar = __decorate([
 ], SlAvatar);
 var avatar_default2 = SlAvatar;
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/badge/badge.scss
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/badge/badge.scss
 var badge_default = ":host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n:host {\n  display: inline-flex;\n}\n\n.badge {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--sl-font-size-x-small);\n  font-weight: var(--sl-font-weight-semibold);\n  letter-spacing: var(--sl-letter-spacing-normal);\n  line-height: 1;\n  border-radius: var(--sl-border-radius-small);\n  white-space: nowrap;\n  padding: 3px 6px;\n  user-select: none;\n  cursor: inherit;\n}\n\n.badge--primary {\n  background-color: var(--sl-color-primary-500);\n  color: var(--sl-color-white);\n}\n\n.badge--success {\n  background-color: var(--sl-color-success-500);\n  color: var(--sl-color-white);\n}\n\n.badge--info {\n  background-color: var(--sl-color-info-500);\n  color: var(--sl-color-white);\n}\n\n.badge--warning {\n  background-color: var(--sl-color-warning-500);\n  color: var(--sl-color-white);\n}\n\n.badge--danger {\n  background-color: var(--sl-color-danger-500);\n  color: var(--sl-color-white);\n}\n\n.badge--pill {\n  border-radius: var(--sl-border-radius-pill);\n}\n\n.badge--pulse {\n  animation: pulse 1.5s infinite;\n}\n\n.badge--pulse.badge--primary {\n  --pulse-color: var(--sl-color-primary-500);\n}\n\n.badge--pulse.badge--success {\n  --pulse-color: var(--sl-color-success-500);\n}\n\n.badge--pulse.badge--info {\n  --pulse-color: var(--sl-color-info-500);\n}\n\n.badge--pulse.badge--warning {\n  --pulse-color: var(--sl-color-warning-500);\n}\n\n.badge--pulse.badge--danger {\n  --pulse-color: var(--sl-color-danger-500);\n}\n\n@keyframes pulse {\n  0% {\n    box-shadow: 0 0 0 0 var(--pulse-color);\n  }\n  70% {\n    box-shadow: 0 0 0 0.5rem transparent;\n  }\n  100% {\n    box-shadow: 0 0 0 0 transparent;\n  }\n}";
 
 // src/components/badge/badge.ts
@@ -25643,7 +25643,7 @@ SlBadge = __decorate([
 ], SlBadge);
 var badge_default2 = SlBadge;
 
-// _ausvbix0s:/Users/Noah/code/shoelace/src/components/button/button.scss
+// _rnhw2r0rf:/Users/claviska/Projects/shoelace/src/components/button/button.scss
 var button_default = ":host {\n  position: relative;\n  box-sizing: border-box;\n}\n:host *, :host *:before, :host *:after {\n  box-sizing: inherit;\n}\n\n:host {\n  display: inline-block;\n  width: auto;\n  cursor: pointer;\n}\n\n.button {\n  display: inline-flex;\n  align-items: stretch;\n  justify-content: center;\n  width: 100%;\n  border-style: solid;\n  border-width: var(--sl-input-border-width);\n  font-family: var(--sl-input-font-family);\n  font-weight: var(--sl-font-weight-semibold);\n  text-decoration: none;\n  user-select: none;\n  white-space: nowrap;\n  vertical-align: middle;\n  padding: 0;\n  transition: var(--sl-transition-fast) background-color, var(--sl-transition-fast) color, var(--sl-transition-fast) border, var(--sl-transition-fast) box-shadow;\n  cursor: inherit;\n}\n.button::-moz-focus-inner {\n  border: 0;\n}\n.button:focus {\n  outline: none;\n}\n.button.button--disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.button.button--disabled * {\n  pointer-events: none;\n}\n.button ::slotted(sl-icon) {\n  pointer-events: none;\n}\n\n.button__prefix,\n.button__suffix {\n  flex: 0 0 auto;\n  display: flex;\n  align-items: center;\n}\n\n.button__label ::slotted(sl-icon) {\n  vertical-align: -2px;\n}\n\n.button.button--default {\n  background-color: var(--sl-color-white);\n  border-color: var(--sl-color-gray-300);\n  color: var(--sl-color-gray-600);\n}\n.button.button--default:hover:not(.button--disabled) {\n  background-color: var(--sl-color-primary-50);\n  border-color: var(--sl-color-primary-300);\n  color: var(--sl-color-primary-600);\n}\n.button.button--default:focus:not(.button--disabled) {\n  background-color: var(--sl-color-primary-50);\n  border-color: var(--sl-color-primary-300);\n  color: var(--sl-color-primary-600);\n  box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);\n}\n.button.button--default:active:not(.button--disabled) {\n  background-color: var(--sl-color-primary-100);\n  border-color: var(--sl-color-primary-400);\n  color: var(--sl-color-primary-700);\n}\n.button.button--primary {\n  background-color: var(--sl-color-primary-500);\n  border-color: var(--sl-color-primary-500);\n  color: var(--sl-color-primary-text);\n}\n.button.button--primary:hover:not(.button--disabled) {\n  background-color: var(--sl-color-primary-400);\n  border-color: var(--sl-color-primary-400);\n  color: var(--sl-color-primary-text);\n}\n.button.button--primary:focus:not(.button--disabled) {\n  background-color: var(--sl-color-primary-400);\n  border-color: var(--sl-color-primary-400);\n  color: var(--sl-color-primary-text);\n  box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);\n}\n.button.button--primary:active:not(.button--disabled) {\n  background-color: var(--sl-color-primary-500);\n  border-color: var(--sl-color-primary-500);\n  color: var(--sl-color-primary-text);\n}\n.button.button--success {\n  background-color: var(--sl-color-success-500);\n  border-color: var(--sl-color-success-500);\n  color: var(--sl-color-success-text);\n}\n.button.button--success:hover:not(.button--disabled) {\n  background-color: var(--sl-color-success-400);\n  border-color: var(--sl-color-success-400);\n  color: var(--sl-color-success-text);\n}\n.button.button--success:focus:not(.button--disabled) {\n  background-color: var(--sl-color-success-400);\n  border-color: var(--sl-color-success-400);\n  color: var(--sl-color-success-text);\n  box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-success);\n}\n.button.button--success:active:not(.button--disabled) {\n  background-color: var(--sl-color-success-500);\n  border-color: var(--sl-color-success-500);\n  color: var(--sl-color-success-text);\n}\n.button.button--info {\n  background-color: var(--sl-color-info-500);\n  border-color: var(--sl-color-info-500);\n  color: var(--sl-color-info-text);\n}\n.button.button--info:hover:not(.button--disabled) {\n  background-color: var(--sl-color-info-400);\n  border-color: var(--sl-color-info-400);\n  color: var(--sl-color-info-text);\n}\n.button.button--info:focus:not(.button--disabled) {\n  background-color: var(--sl-color-info-400);\n  border-color: var(--sl-color-info-400);\n  color: var(--sl-color-info-text);\n  box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-info);\n}\n.button.button--info:active:not(.button--disabled) {\n  background-color: var(--sl-color-info-500);\n  border-color: var(--sl-color-info-500);\n  color: var(--sl-color-info-text);\n}\n.button.button--warning {\n  background-color: var(--sl-color-warning-500);\n  border-color: var(--sl-color-warning-500);\n  color: var(--sl-color-warning-text);\n}\n.button.button--warning:hover:not(.button--disabled) {\n  background-color: var(--sl-color-warning-400);\n  border-color: var(--sl-color-warning-400);\n  color: var(--sl-color-warning-text);\n}\n.button.button--warning:focus:not(.button--disabled) {\n  background-color: var(--sl-color-warning-400);\n  border-color: var(--sl-color-warning-400);\n  color: var(--sl-color-warning-text);\n  box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-warning);\n}\n.button.button--warning:active:not(.button--disabled) {\n  background-color: var(--sl-color-warning-500);\n  border-color: var(--sl-color-warning-500);\n  color: var(--sl-color-warning-text);\n}\n.button.button--danger {\n  background-color: var(--sl-color-danger-500);\n  border-color: var(--sl-color-danger-500);\n  color: var(--sl-color-danger-text);\n}\n.button.button--danger:hover:not(.button--disabled) {\n  background-color: var(--sl-color-danger-400);\n  border-color: var(--sl-color-danger-400);\n  color: var(--sl-color-danger-text);\n}\n.button.button--danger:focus:not(.button--disabled) {\n  background-color: var(--sl-color-danger-400);\n  border-color: var(--sl-color-danger-400);\n  color: var(--sl-color-danger-text);\n  box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-danger);\n}\n.button.button--danger:active:not(.button--disabled) {\n  background-color: var(--sl-color-danger-500);\n  border-color: var(--sl-color-danger-500);\n  color: var(--sl-color-danger-text);\n}\n\n.button--text {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--sl-color-primary-500);\n}\n.button--text:hover:not(.button--disabled) {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--sl-color-primary-400);\n}\n.button--text:focus:not(.button--disabled) {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--sl-color-primary-400);\n  box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);\n}\n.button--text:active:not(.button--disabled) {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--sl-color-primary-600);\n}\n\n.button--small {\n  font-size: var(--sl-button-font-size-small);\n  height: var(--sl-input-height-small);\n  line-height: calc(var(--sl-input-height-small) - var(--sl-input-border-width) * 2);\n  border-radius: var(--sl-input-border-radius-small);\n}\n\n.button--medium {\n  font-size: var(--sl-button-font-size-medium);\n  height: var(--sl-input-height-medium);\n  line-height: calc(var(--sl-input-height-medium) - var(--sl-input-border-width) * 2);\n  border-radius: var(--sl-input-border-radius-medium);\n}\n\n.button--large {\n  font-size: var(--sl-button-font-size-large);\n  height: var(--sl-input-height-large);\n  line-height: calc(var(--sl-input-height-large) - var(--sl-input-border-width) * 2);\n  border-radius: var(--sl-input-border-radius-large);\n}\n\n.button--pill.button--small {\n  border-radius: var(--sl-input-height-small);\n}\n.button--pill.button--medium {\n  border-radius: var(--sl-input-height-medium);\n}\n.button--pill.button--large {\n  border-radius: var(--sl-input-height-large);\n}\n\n.button--circle {\n  padding-left: 0;\n  padding-right: 0;\n}\n.button--circle.button--small {\n  width: var(--sl-input-height-small);\n  border-radius: 50%;\n}\n.button--circle.button--medium {\n  width: var(--sl-input-height-medium);\n  border-radius: 50%;\n}\n.button--circle.button--large {\n  width: var(--sl-input-height-large);\n  border-radius: 50%;\n}\n.button--circle .button__prefix,\n.button--circle .button__suffix,\n.button--circle .button__caret {\n  display: none;\n}\n\n.button--caret .button__suffix {\n  display: none;\n}\n.button--caret .button__caret {\n  display: flex;\n  align-items: center;\n}\n.button--caret .button__caret svg {\n  width: 1em;\n  height: 1em;\n}\n\n.button--loading {\n  position: relative;\n  cursor: wait;\n}\n.button--loading .button__prefix,\n.button--loading .button__label,\n.button--loading .button__suffix,\n.button--loading .button__caret {\n  visibility: hidden;\n}\n.button--loading sl-spinner {\n  --indicator-color: currentColor;\n  position: absolute;\n  height: 1em;\n  width: 1em;\n  top: calc(50% - 0.5em);\n  left: calc(50% - 0.5em);\n}\n\n.button ::slotted(sl-badge) {\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translateY(-50%) translateX(50%);\n  pointer-events: none;\n}\n\n.button--has-label.button--small .button__label {\n  padding: 0 var(--sl-spacing-small);\n}\n.button--has-label.button--medium .button__label {\n  padding: 0 var(--sl-spacing-medium);\n}\n.button--has-label.button--large .button__label {\n  padding: 0 var(--sl-spacing-large);\n}\n\n.button--has-prefix.button--small {\n  padding-left: var(--sl-spacing-x-small);\n}\n.button--has-prefix.button--small .button__label {\n  padding-left: var(--sl-spacing-x-small);\n}\n.button--has-prefix.button--medium {\n  padding-left: var(--sl-spacing-small);\n}\n.button--has-prefix.button--medium .button__label {\n  padding-left: var(--sl-spacing-small);\n}\n.button--has-prefix.button--large {\n  padding-left: var(--sl-spacing-small);\n}\n.button--has-prefix.button--large .button__label {\n  padding-left: var(--sl-spacing-small);\n}\n\n.button--has-suffix.button--small,\n.button--caret.button--small {\n  padding-right: var(--sl-spacing-x-small);\n}\n.button--has-suffix.button--small .button__label,\n.button--caret.button--small .button__label {\n  padding-right: var(--sl-spacing-x-small);\n}\n.button--has-suffix.button--medium,\n.button--caret.button--medium {\n  padding-right: var(--sl-spacing-small);\n}\n.button--has-suffix.button--medium .button__label,\n.button--caret.button--medium .button__label {\n  padding-right: var(--sl-spacing-small);\n}\n.button--has-suffix.button--large,\n.button--caret.button--large {\n  padding-right: var(--sl-spacing-small);\n}\n.button--has-suffix.button--large .button__label,\n.button--caret.button--large .button__label {\n  padding-right: var(--sl-spacing-small);\n}";
 
 // src/components/button/button.ts
@@ -25976,665 +25976,665 @@ function createStyleElement() {
   --teal-6: #0b6270;
   --teal-7: #004551;
 } */
-const style = `
-/* vietnamese */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/nunitosans/v6/pe0qMImSLYBIv1o4X1M8cceyI9tScg.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/nunitosans/v6/pe0qMImSLYBIv1o4X1M8ccezI9tScg.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/nunitosans/v6/pe0qMImSLYBIv1o4X1M8cce9I9s.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/nunitosans/v6/pe03MImSLYBIv1o4X1M8cc9iB85iU1EQVg.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/nunitosans/v6/pe03MImSLYBIv1o4X1M8cc9iB85jU1EQVg.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/nunitosans/v6/pe03MImSLYBIv1o4X1M8cc9iB85tU1E.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/nunitosans/v6/pe03MImSLYBIv1o4X1M8cc8GBs5iU1EQVg.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/nunitosans/v6/pe03MImSLYBIv1o4X1M8cc8GBs5jU1EQVg.woff2) format('woff2');
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-/* latin */
-@font-face {
-  font-family: 'Nunito Sans';
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/nunitosans/v6/pe03MImSLYBIv1o4X1M8cc8GBs5tU1E.woff2) format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-html {
-  visibility:hidden;
-}
-:root {
-  --sl-color-gray-50: hsl(0 0% 97.5%);
-  --sl-color-gray-100: hsl(240 4.8% 95.9%);
-  --sl-color-gray-200: hsl(240 5.9% 90%);
-  --sl-color-gray-300: hsl(240 4.9% 83.9%);
-  --sl-color-gray-400: hsl(240 5% 64.9%);
-  --sl-color-gray-500: hsl(240 3.8% 46.1%);
-  --sl-color-gray-600: hsl(240 5.2% 33.9%);
-  --sl-color-gray-700: hsl(240 5.3% 26.1%);
-  --sl-color-gray-800: hsl(240 3.7% 15.9%);
-  --sl-color-gray-900: hsl(240 5.9% 10%);
-  --sl-color-gray-950: hsl(240 7.3% 8%);
-
-  --sl-color-red-50: hsl(0 85.7% 97.3%);
-  --sl-color-red-100: hsl(0 93.3% 94.1%);
-  --sl-color-red-200: hsl(0 96.3% 89.4%);
-  --sl-color-red-300: hsl(0 93.5% 81.8%);
-  --sl-color-red-400: hsl(0 90.6% 70.8%);
-  --sl-color-red-500: hsl(0 84.2% 60.2%);
-  --sl-color-red-600: hsl(0 72.2% 50.6%);
-  --sl-color-red-700: hsl(0 73.7% 41.8%);
-  --sl-color-red-800: hsl(0 70% 35.3%);
-  --sl-color-red-900: hsl(0 62.8% 30.6%);
-  --sl-color-red-950: hsl(0 60% 19.6%);
-
-  --sl-color-orange-50: hsl(33.3 100% 96.5%);
-  --sl-color-orange-100: hsl(34.3 100% 91.8%);
-  --sl-color-orange-200: hsl(32.1 97.7% 83.1%);
-  --sl-color-orange-300: hsl(30.7 97.2% 72.4%);
-  --sl-color-orange-400: hsl(27 96% 61%);
-  --sl-color-orange-500: hsl(24.6 95% 53.1%);
-  --sl-color-orange-600: hsl(20.5 90.2% 48.2%);
-  --sl-color-orange-700: hsl(17.5 88.3% 40.4%);
-  --sl-color-orange-800: hsl(15 79.1% 33.7%);
-  --sl-color-orange-900: hsl(15.3 74.6% 27.8%);
-  --sl-color-orange-950: hsl(15.2 69.1% 19%);
-
-  --sl-color-amber-50: hsl(48 100% 96.1%);
-  --sl-color-amber-100: hsl(48 96.5% 88.8%);
-  --sl-color-amber-200: hsl(48 96.6% 76.7%);
-  --sl-color-amber-300: hsl(45.9 96.7% 64.5%);
-  --sl-color-amber-400: hsl(43.3 96.4% 56.3%);
-  --sl-color-amber-500: hsl(37.7 92.1% 50.2%);
-  --sl-color-amber-600: hsl(32.1 94.6% 43.7%);
-  --sl-color-amber-700: hsl(26 90.5% 37.1%);
-  --sl-color-amber-800: hsl(22.7 82.5% 31.4%);
-  --sl-color-amber-900: hsl(21.7 77.8% 26.5%);
-  --sl-color-amber-950: hsl(22.9 74.1% 16.7%);
-
-  --sl-color-yellow-50: hsl(54.5 91.7% 95.3%);
-  --sl-color-yellow-100: hsl(54.9 96.7% 88%);
-  --sl-color-yellow-200: hsl(52.8 98.3% 76.9%);
-  --sl-color-yellow-300: hsl(50.4 97.8% 63.5%);
-  --sl-color-yellow-400: hsl(47.9 95.8% 53.1%);
-  --sl-color-yellow-500: hsl(45.4 93.4% 47.5%);
-  --sl-color-yellow-600: hsl(40.6 96.1% 40.4%);
-  --sl-color-yellow-700: hsl(35.5 91.7% 32.9%);
-  --sl-color-yellow-800: hsl(31.8 81% 28.8%);
-  --sl-color-yellow-900: hsl(28.4 72.5% 25.7%);
-  --sl-color-yellow-950: hsl(33.1 69% 13.9%);
-
-  --sl-color-lime-50: hsl(78.3 92% 95.1%);
-  --sl-color-lime-100: hsl(79.6 89.1% 89.2%);
-  --sl-color-lime-200: hsl(80.9 88.5% 79.6%);
-  --sl-color-lime-300: hsl(82 84.5% 67.1%);
-  --sl-color-lime-400: hsl(82.7 78% 55.5%);
-  --sl-color-lime-500: hsl(83.7 80.5% 44.3%);
-  --sl-color-lime-600: hsl(84.8 85.2% 34.5%);
-  --sl-color-lime-700: hsl(85.9 78.4% 27.3%);
-  --sl-color-lime-800: hsl(86.3 69% 22.7%);
-  --sl-color-lime-900: hsl(87.6 61.2% 20.2%);
-  --sl-color-lime-950: hsl(86.5 60.6% 13.9%);
-
-  --sl-color-green-50: hsl(138.5 76.5% 96.7%);
-  --sl-color-green-100: hsl(140.6 84.2% 92.5%);
-  --sl-color-green-200: hsl(141 78.9% 85.1%);
-  --sl-color-green-300: hsl(141.7 76.6% 73.1%);
-  --sl-color-green-400: hsl(141.9 69.2% 58%);
-  --sl-color-green-500: hsl(142.1 70.6% 45.3%);
-  --sl-color-green-600: hsl(142.1 76.2% 36.3%);
-  --sl-color-green-700: hsl(142.4 71.8% 29.2%);
-  --sl-color-green-800: hsl(142.8 64.2% 24.1%);
-  --sl-color-green-900: hsl(143.8 61.2% 20.2%);
-  --sl-color-green-950: hsl(144.3 60.7% 12%);
-
-  --sl-color-emerald-50: hsl(151.8 81% 95.9%);
-  --sl-color-emerald-100: hsl(149.3 80.4% 90%);
-  --sl-color-emerald-200: hsl(152.4 76% 80.4%);
-  --sl-color-emerald-300: hsl(156.2 71.6% 66.9%);
-  --sl-color-emerald-400: hsl(158.1 64.4% 51.6%);
-  --sl-color-emerald-500: hsl(160.1 84.1% 39.4%);
-  --sl-color-emerald-600: hsl(161.4 93.5% 30.4%);
-  --sl-color-emerald-700: hsl(162.9 93.5% 24.3%);
-  --sl-color-emerald-800: hsl(163.1 88.1% 19.8%);
-  --sl-color-emerald-900: hsl(164.2 85.7% 16.5%);
-  --sl-color-emerald-950: hsl(164.3 87.5% 9.4%);
-
-  --sl-color-teal-50: hsl(166.2 76.5% 96.7%);
-  --sl-color-teal-100: hsl(167.2 85.5% 89.2%);
-  --sl-color-teal-200: hsl(168.4 83.8% 78.2%);
-  --sl-color-teal-300: hsl(170.6 76.9% 64.3%);
-  --sl-color-teal-400: hsl(172.5 66% 50.4%);
-  --sl-color-teal-500: hsl(173.4 80.4% 40%);
-  --sl-color-teal-600: hsl(174.7 83.9% 31.6%);
-  --sl-color-teal-700: hsl(175.3 77.4% 26.1%);
-  --sl-color-teal-800: hsl(176.1 69.4% 21.8%);
-  --sl-color-teal-900: hsl(175.9 60.8% 19%);
-  --sl-color-teal-950: hsl(176.5 58.6% 11.4%);
-
-  --sl-color-cyan-50: hsl(183.2 100% 96.3%);
-  --sl-color-cyan-100: hsl(185.1 95.9% 90.4%);
-  --sl-color-cyan-200: hsl(186.2 93.5% 81.8%);
-  --sl-color-cyan-300: hsl(187 92.4% 69%);
-  --sl-color-cyan-400: hsl(187.9 85.7% 53.3%);
-  --sl-color-cyan-500: hsl(188.7 94.5% 42.7%);
-  --sl-color-cyan-600: hsl(191.6 91.4% 36.5%);
-  --sl-color-cyan-700: hsl(192.9 82.3% 31%);
-  --sl-color-cyan-800: hsl(194.4 69.6% 27.1%);
-  --sl-color-cyan-900: hsl(196.4 63.6% 23.7%);
-  --sl-color-cyan-950: hsl(196.8 61% 16.1%);
-
-  --sl-color-sky-50: hsl(204 100% 97.1%);
-  --sl-color-sky-100: hsl(204 93.8% 93.7%);
-  --sl-color-sky-200: hsl(200.6 94.4% 86.1%);
-  --sl-color-sky-300: hsl(199.4 95.5% 73.9%);
-  --sl-color-sky-400: hsl(198.4 93.2% 59.6%);
-  --sl-color-sky-500: hsl(198.6 88.7% 48.4%);
-  --sl-color-sky-600: hsl(200.4 98% 39.4%);
-  --sl-color-sky-700: hsl(201.3 96.3% 32.2%);
-  --sl-color-sky-800: hsl(201 90% 27.5%);
-  --sl-color-sky-900: hsl(202 80.3% 23.9%);
-  --sl-color-sky-950: hsl(202.3 73.8% 16.5%);
-
-  --sl-color-blue-50: hsl(213.8 100% 96.9%);
-  --sl-color-blue-100: hsl(214.3 94.6% 92.7%);
-  --sl-color-blue-200: hsl(213.3 96.9% 87.3%);
-  --sl-color-blue-300: hsl(211.7 96.4% 78.4%);
-  --sl-color-blue-400: hsl(213.1 93.9% 67.8%);
-  --sl-color-blue-500: hsl(217.2 91.2% 59.8%);
-  --sl-color-blue-600: hsl(221.2 83.2% 53.3%);
-  --sl-color-blue-700: hsl(224.3 76.3% 48%);
-  --sl-color-blue-800: hsl(225.9 70.7% 40.2%);
-  --sl-color-blue-900: hsl(224.4 64.3% 32.9%);
-  --sl-color-blue-950: hsl(226.2 55.3% 18.4%);
-
-  --sl-color-indigo-50: hsl(225.9 100% 96.7%);
-  --sl-color-indigo-100: hsl(226.5 100% 93.9%);
-  --sl-color-indigo-200: hsl(228 96.5% 88.8%);
-  --sl-color-indigo-300: hsl(229.7 93.5% 81.8%);
-  --sl-color-indigo-400: hsl(234.5 89.5% 73.9%);
-  --sl-color-indigo-500: hsl(238.7 83.5% 66.7%);
-  --sl-color-indigo-600: hsl(243.4 75.4% 58.6%);
-  --sl-color-indigo-700: hsl(244.5 57.9% 50.6%);
-  --sl-color-indigo-800: hsl(243.7 54.5% 41.4%);
-  --sl-color-indigo-900: hsl(242.2 47.4% 34.3%);
-  --sl-color-indigo-950: hsl(243.5 43.6% 22.9%);
-
-  --sl-color-violet-50: hsl(250 100% 97.6%);
-  --sl-color-violet-100: hsl(251.4 91.3% 95.5%);
-  --sl-color-violet-200: hsl(250.5 95.2% 91.8%);
-  --sl-color-violet-300: hsl(252.5 94.7% 85.1%);
-  --sl-color-violet-400: hsl(255.1 91.7% 76.3%);
-  --sl-color-violet-500: hsl(258.3 89.5% 66.3%);
-  --sl-color-violet-600: hsl(262.1 83.3% 57.8%);
-  --sl-color-violet-700: hsl(263.4 70% 50.4%);
-  --sl-color-violet-800: hsl(263.4 69.3% 42.2%);
-  --sl-color-violet-900: hsl(263.5 67.4% 34.9%);
-  --sl-color-violet-950: hsl(265.1 61.5% 21.4%);
-
-  --sl-color-purple-50: hsl(270 100% 98%);
-  --sl-color-purple-100: hsl(268.7 100% 95.5%);
-  --sl-color-purple-200: hsl(268.6 100% 91.8%);
-  --sl-color-purple-300: hsl(269.2 97.4% 85.1%);
-  --sl-color-purple-400: hsl(270 95.2% 75.3%);
-  --sl-color-purple-500: hsl(270.7 91% 65.1%);
-  --sl-color-purple-600: hsl(271.5 81.3% 55.9%);
-  --sl-color-purple-700: hsl(272.1 71.7% 47.1%);
-  --sl-color-purple-800: hsl(272.9 67.2% 39.4%);
-  --sl-color-purple-900: hsl(273.6 65.6% 32%);
-  --sl-color-purple-950: hsl(276 59.5% 16.5%);
-
-  --sl-color-fuchsia-50: hsl(289.1 100% 97.8%);
-  --sl-color-fuchsia-100: hsl(287 100% 95.5%);
-  --sl-color-fuchsia-200: hsl(288.3 95.8% 90.6%);
-  --sl-color-fuchsia-300: hsl(291.1 93.1% 82.9%);
-  --sl-color-fuchsia-400: hsl(292 91.4% 72.5%);
-  --sl-color-fuchsia-500: hsl(292.2 84.1% 60.6%);
-  --sl-color-fuchsia-600: hsl(293.4 69.5% 48.8%);
-  --sl-color-fuchsia-700: hsl(294.7 72.4% 39.8%);
-  --sl-color-fuchsia-800: hsl(295.4 70.2% 32.9%);
-  --sl-color-fuchsia-900: hsl(296.7 63.6% 28%);
-  --sl-color-fuchsia-950: hsl(297.1 56.8% 14.5%);
-
-  --sl-color-pink-50: hsl(327.3 73.3% 97.1%);
-  --sl-color-pink-100: hsl(325.7 77.8% 94.7%);
-  --sl-color-pink-200: hsl(325.9 84.6% 89.8%);
-  --sl-color-pink-300: hsl(327.4 87.1% 81.8%);
-  --sl-color-pink-400: hsl(328.6 85.5% 70.2%);
-  --sl-color-pink-500: hsl(330.4 81.2% 60.4%);
-  --sl-color-pink-600: hsl(333.3 71.4% 50.6%);
-  --sl-color-pink-700: hsl(335.1 77.6% 42%);
-  --sl-color-pink-800: hsl(335.8 74.4% 35.3%);
-  --sl-color-pink-900: hsl(335.9 69% 30.4%);
-  --sl-color-pink-950: hsl(336.2 65.4% 15.9%);
-
-  --sl-color-rose-50: hsl(355.7 100% 97.3%);
-  --sl-color-rose-100: hsl(355.6 100% 94.7%);
-  --sl-color-rose-200: hsl(352.7 96.1% 90%);
-  --sl-color-rose-300: hsl(352.6 95.7% 81.8%);
-  --sl-color-rose-400: hsl(351.3 94.5% 71.4%);
-  --sl-color-rose-500: hsl(349.7 89.2% 60.2%);
-  --sl-color-rose-600: hsl(346.8 77.2% 49.8%);
-  --sl-color-rose-700: hsl(345.3 82.7% 40.8%);
-  --sl-color-rose-800: hsl(343.4 79.7% 34.7%);
-  --sl-color-rose-900: hsl(341.5 75.5% 30.4%);
-  --sl-color-rose-950: hsl(341.3 70.1% 17.1%);
-
-  --sl-color-black: #141414;
-  --sl-color-white: #fff;
-
-  --sl-color-neutral-50: var(--sl-color-gray-50);
-  --sl-color-neutral-100: var(--sl-color-gray-100);
-  --sl-color-neutral-200: var(--sl-color-gray-200);
-  --sl-color-neutral-300: var(--sl-color-gray-300);
-  --sl-color-neutral-400: var(--sl-color-gray-400);
-  --sl-color-neutral-500: var(--sl-color-gray-500);
-  --sl-color-neutral-600: var(--sl-color-gray-600);
-  --sl-color-neutral-700: var(--sl-color-gray-700);
-  --sl-color-neutral-800: var(--sl-color-gray-800);
-  --sl-color-neutral-900: var(--sl-color-gray-900);
-  --sl-color-neutral-950: var(--sl-color-gray-950);
-
-  --sl-color-neutral-0: hsl(0, 0%, 100%);
-  --sl-color-neutral-1000: hsl(0, 0%, 0%);
-
-  --sl-color-primary-50: var(--sl-color-sky-50);
-  --sl-color-primary-100: var(--sl-color-sky-100);
-  --sl-color-primary-200: var(--sl-color-sky-200);
-  --sl-color-primary-300: var(--sl-color-sky-300);
-  --sl-color-primary-400: var(--sl-color-sky-400);
-  --sl-color-primary-500: var(--sl-color-sky-500);
-  --sl-color-primary-600: var(--sl-color-sky-600);
-  --sl-color-primary-700: var(--sl-color-sky-700);
-  --sl-color-primary-800: var(--sl-color-sky-800);
-  --sl-color-primary-900: var(--sl-color-sky-900);
-  --sl-color-primary-950: var(--sl-color-sky-950);
-  --sl-color-primary-text: var(--sl-color-white);
-
-  --sl-color-success-50: var(--sl-color-green-50);
-  --sl-color-success-100: var(--sl-color-green-100);
-  --sl-color-success-200: var(--sl-color-green-200);
-  --sl-color-success-300: var(--sl-color-green-300);
-  --sl-color-success-400: var(--sl-color-green-400);
-  --sl-color-success-500: var(--sl-color-green-500);
-  --sl-color-success-600: var(--sl-color-green-600);
-  --sl-color-success-700: var(--sl-color-green-700);
-  --sl-color-success-800: var(--sl-color-green-800);
-  --sl-color-success-900: var(--sl-color-green-900);
-  --sl-color-success-950: var(--sl-color-green-950);
-  --sl-color-success-text: var(--sl-color-white);
-
-  --sl-color-info-50: var(--sl-color-gray-50);
-  --sl-color-info-100: var(--sl-color-gray-100);
-  --sl-color-info-200: var(--sl-color-gray-200);
-  --sl-color-info-300: var(--sl-color-gray-300);
-  --sl-color-info-400: var(--sl-color-gray-400);
-  --sl-color-info-500: var(--sl-color-gray-500);
-  --sl-color-info-600: var(--sl-color-gray-600);
-  --sl-color-info-700: var(--sl-color-gray-700);
-  --sl-color-info-800: var(--sl-color-gray-800);
-  --sl-color-info-900: var(--sl-color-gray-900);
-  --sl-color-info-950: var(--sl-color-gray-950);
-
-  --sl-color-warning-50: var(--sl-color-amber-50);
-  --sl-color-warning-100: var(--sl-color-amber-100);
-  --sl-color-warning-200: var(--sl-color-amber-200);
-  --sl-color-warning-300: var(--sl-color-amber-300);
-  --sl-color-warning-400: var(--sl-color-amber-400);
-  --sl-color-warning-500: var(--sl-color-amber-500);
-  --sl-color-warning-600: var(--sl-color-amber-600);
-  --sl-color-warning-700: var(--sl-color-amber-700);
-  --sl-color-warning-800: var(--sl-color-amber-800);
-  --sl-color-warning-900: var(--sl-color-amber-900);
-  --sl-color-warning-950: var(--sl-color-amber-950);
-  --sl-color-warning-text: var(--sl-color-white);
-
-  --sl-color-danger-50: var(--sl-color-red-50);
-  --sl-color-danger-100: var(--sl-color-red-100);
-  --sl-color-danger-200: var(--sl-color-red-200);
-  --sl-color-danger-300: var(--sl-color-red-300);
-  --sl-color-danger-400: var(--sl-color-red-400);
-  --sl-color-danger-500: var(--sl-color-red-500);
-  --sl-color-danger-600: var(--sl-color-red-600);
-  --sl-color-danger-700: var(--sl-color-red-700);
-  --sl-color-danger-800: var(--sl-color-red-800);
-  --sl-color-danger-900: var(--sl-color-red-900);
-  --sl-color-danger-950: var(--sl-color-red-950);
-  --sl-color-danger-text: var(--sl-color-white);
-
-  --sl-border-radius-small: 0.125rem;
-  --sl-border-radius-medium: 0.25rem;
-  --sl-border-radius-large: 0.5rem;
-  --sl-border-radius-x-large: 1rem;
-  --sl-border-radius-circle: 50%;
-  --sl-border-radius-pill: 9999px;
-  --sl-shadow-x-small: 0 1px 0 #0d131e0d;
-  --sl-shadow-small: 0 1px 2px #0d131e1a;
-  --sl-shadow-medium: 0 2px 4px #0d131e1a;
-  --sl-shadow-large: 0 2px 8px #0d131e1a;
-  --sl-shadow-x-large: 0 4px 16px #0d131e1a;
-  /** LV: Could use the Anvil spacing rules, but probably not necessary **/
-  --sl-spacing-none: 0rem;
-  --sl-spacing-xxx-small: 0.125rem;
-  --sl-spacing-xx-small: 0.25rem;
-  --sl-spacing-x-small: 0.5rem;
-  --sl-spacing-small: 0.75rem;
-  --sl-spacing-medium: 1rem;
-  --sl-spacing-large: 1.25rem;
-  --sl-spacing-x-large: 1.75rem;
-  --sl-spacing-xx-large: 2.25rem;
-  --sl-spacing-xxx-large: 3rem;
-  --sl-spacing-xxxx-large: 4.5rem;
-  --sl-transition-x-slow: 1000ms;
-  --sl-transition-slow: 500ms;
-  --sl-transition-medium: 250ms;
-  --sl-transition-fast: 150ms;
-  --sl-transition-x-fast: 50ms;
-  --sl-font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
-  --sl-font-sans: "Nunito Sans", sans;
-  --sl-font-serif: Georgia, "Times New Roman", serif;
-  --sl-font-size-xx-small: 0.625rem;
-  --sl-font-size-x-small: 0.75rem;
-  --sl-font-size-small: 0.875rem;
-  --sl-font-size-medium: 1rem;
-  --sl-font-size-large: 1.25rem;
-  --sl-font-size-x-large: 1.5rem;
-  --sl-font-size-xx-large: 2.25rem;
-  --sl-font-size-xxx-large: 3rem;
-  --sl-font-size-xxxx-large: 4.5rem;
-  --sl-font-weight-light: 300;
-  --sl-font-weight-normal: 400;
-  --sl-font-weight-semibold: 600;
-  --sl-font-weight-bold: 700;
-  --sl-letter-spacing-dense: -0.015em;
-  --sl-letter-spacing-normal: normal;
-  --sl-letter-spacing-loose: 0.075em;
-  --sl-line-height-dense: 1.4;
-  --sl-line-height-normal: 1.8;
-  --sl-line-height-loose: 2.2;
-  --sl-focus-ring-color-primary: var(--sl-color-primary-100);
-  --sl-focus-ring-color-success: var(--sl-color-success-100);
-  --sl-focus-ring-color-info: var(--sl-color-info-100);
-  --sl-focus-ring-color-warning: var(--sl-color-warning-100);
-  --sl-focus-ring-color-danger: #var(--sl-color-danger-100);;
-  --sl-focus-ring-width: 3px;
-  --sl-button-font-size-small: var(--sl-font-size-x-small);
-  --sl-button-font-size-medium: var(--sl-font-size-small);
-  --sl-button-font-size-large: var(--sl-font-size-medium);
-  --sl-input-height-small: 1.875rem;
-  --sl-input-height-medium: 2.5rem;
-  --sl-input-height-large: 3.125rem;
-  --sl-input-background-color: var(--sl-color-white);
-  --sl-input-background-color-hover: var(--sl-color-white);
-  --sl-input-background-color-focus: var(--sl-color-white);
-  --sl-input-background-color-disabled: var(--sl-color-gray-100);
-  --sl-input-border-color: var(--sl-color-gray-300);
-  --sl-input-border-color-hover: var(--sl-color-gray-400);
-  --sl-input-border-color-focus: var(--sl-color-primary-500);
-  --sl-input-border-color-disabled: var(--sl-color-gray-300);
-  --sl-input-border-width: 1px;
-  --sl-input-border-radius-small: var(--sl-border-radius-medium);
-  --sl-input-border-radius-medium: var(--sl-border-radius-medium);
-  --sl-input-border-radius-large: var(--sl-border-radius-medium);
-  --sl-input-font-family: var(--sl-font-sans);
-  --sl-input-font-weight: var(--sl-font-weight-normal);
-  --sl-input-font-size-small: var(--sl-font-size-small);
-  --sl-input-font-size-medium: var(--sl-font-size-medium);
-  --sl-input-font-size-large: var(--sl-font-size-large);
-  --sl-input-letter-spacing: var(--sl-letter-spacing-normal);
-  --sl-input-color: var(--sl-color-gray-700);
-  --sl-input-color-hover: var(--sl-color-gray-700);
-  --sl-input-color-focus: var(--sl-color-gray-700);
-  --sl-input-color-disabled: var(--sl-color-gray-900);
-  --sl-input-icon-color: var(--sl-color-gray-400);
-  --sl-input-icon-color-hover: var(--sl-color-gray-600);
-  --sl-input-icon-color-focus: var(--sl-color-gray-600);
-  --sl-input-placeholder-color: var(--sl-color-gray-400);
-  --sl-input-placeholder-color-disabled: var(--sl-color-gray-600);
-  --sl-input-spacing-small: var(--sl-spacing-small);
-  --sl-input-spacing-medium: var(--sl-spacing-medium);
-  --sl-input-spacing-large: var(--sl-spacing-large);
-  --sl-input-label-font-size-small: var(--sl-font-size-small);
-  --sl-input-label-font-size-medium: var(--sl-font-size-medium);
-  --sl-input-label-font-size-large: var(--sl-font-size-large);
-  --sl-input-label-color: inherit;
-  --sl-input-help-text-font-size-small: var(--sl-font-size-x-small);
-  --sl-input-help-text-font-size-medium: var(--sl-font-size-small);
-  --sl-input-help-text-font-size-large: var(--sl-font-size-medium);
-  --sl-input-help-text-color: var(--sl-color-gray-400);
-  --sl-toggle-size: 1rem;
-  --sl-overlay-background-color: #37415180;
-  --sl-panel-background-color: var(--sl-color-white);
-  --sl-panel-border-color: var(--sl-color-gray-200);
-  --sl-tooltip-border-radius: var(--sl-border-radius-medium);
-  --sl-tooltip-background-color: var(--sl-color-gray-900);
-  --sl-tooltip-color: var(--sl-color-white);
-  --sl-tooltip-font-family: var(--sl-font-sans);
-  --sl-tooltip-font-weight: var(--sl-font-weight-normal);
-  --sl-tooltip-font-size: var(--sl-font-size-small);
-  --sl-tooltip-line-height: var(--sl-line-height-dense);
-  --sl-tooltip-padding: var(--sl-spacing-xxx-small) var(--sl-spacing-x-small);
-  --sl-tooltip-arrow-size: 5px;
-  --sl-tooltip-arrow-start-end-offset: 8px;
-  --sl-z-index-drawer: 700;
-  --sl-z-index-dialog: 800;
-  --sl-z-index-dropdown: 900;
-  --sl-z-index-toast: 950;
-  --sl-z-index-tooltip: 1000;
-}
-:root {
-  --sqm-header-background: var(--sl-color-white);
-  --sqm-footer-background: var(--sl-color-white);
-  --sqm-color-text-error: #e63717;
-  --sqm-content-max-width: 700px;
-  --sqm-content-background: var(--sl-color-white);
-  --sqm-portal-background: transparent;
-  --widget-background-color: var(--sl-color-white);
-  --sqm-portal-main-width: 900px;
-  --sqm-max-width: 100%;
-}
-
-body {
-  font-family: var(--sl-font-sans);
-  font-size: var(--sl-font-size-medium);
-  font-weight: var(--sl-font-weight-normal);
-  letter-spacing: var(--sl-letter-spacing-small);
-  color: var(--sl-color-gray-800);
-  line-height: var(--sl-line-height-normal);
-  margin: 0;
-  background-color: var(--sqm-portal-background);
-}
-
-// .terms-link,
-// .terms-link:visited {
-//   color: var(--sl-color-gray-500);
-//   text-decoration: none;
-// }
-// .terms-link:hover {
-//   color: var(--sl-color-gray-600);
-// }
-
-h1, h2, h3, h4{
-  line-height: var(--sl-line-height-dense);
-}
-
-
-h2, .Title {
-  font-size: var(--sl-font-size-large);
-  font-weight: var(--sl-font-weight-semibold);
-  margin: 0;
-}
-.H4 {
-  font-size: var(--sl-font-size-medium);
-  font-weight: var(--sl-font-weight-semibold);
-  margin: 0;
-}
-.P {
-  font-size: var(--sl-font-size-small);
-  color: var(--sl-color-gray-800);
-  margin-top: 0px;
-}
-
-.Title {
-  text-align: center;
-}
-
-.Subtitle {
-  text-align: center;
-  margin-bottom: 0px;
-  color: var(--sl-color-gray-500);
-}
-.SupportText{
-  margin-top: var(--sl-spacing-small);
-  text-align: center;
-}
-
-sl-button::part(base){
-  width: 100%;
-}
-
-sqm-share-button{
-  flex: 1;
-}
-
-sqm-hero img {
-  max-width: 100%;
-  display: block;
-}
-
-sl-details::part(base){
-  background-color: var(--sl-color-white);
-  border-color: var(--sl-color-gray-300)
-}
-sl-details::part(summary) {
-  font-size: var(--sl-font-size-medium);
-  font-weight: var(--sl-font-weight-semibold);
-  margin: 0px;
-}
-*::part(defaultbutton-base){
-  background-color: rgba(0,0,0,0);
-  color: var(--sl-color-gray-800);
-  border-color: var(--sl-color-gray-800);
-}
-*::part(defaultbutton-base):hover{
-  background-color: rgba(20,20,20,.08);
-}
-*::part(defaultbutton-base):active{
-  background-color: rgba(20,20,20,.16);
-}
-*::part(defaultbutton-base):focus{
-  box-shadow: none;
-}
-*::part(primarybutton-base){
-  background-color: var(--sl-color-primary-400);
-  color: var(--sl-color-white);
-  border-color: var(--sl-color-primary-400);
-}
-*::part(primarybutton-base):hover{
-  background-color: var(--sl-color-primary-300);
-  border-color: var(--sl-color-primary-300);
-}
-*::part(primarybutton-base):active{
-  background-color: var(--sl-color-primary-500);
-  border-color: var(--sl-color-primary-500);
-}
-
-*::part(primarybutton-base):focus{
-  box-shadow: none;
-}
-
-*::part(input-label), *::part(select-label), *::part(textarea-label){
-  font-size: var(--sl-input-font-size-small);
-  font-weight: var(--sl-font-weight-semibold);
-}
-
-sl-input::part(label){
-  font-size: var(--sl-input-label-font-size-small);
-  font-weight: var(--sl-font-weight-semibold);
-}
-
-*::part(menuitem-base):hover{
-  background-color: var(--sl-color-gray-200);
-  color: var(--sl-color-gray-700);
-}
-
-.poweredBy {
-  color: var(--sl-color-gray-400);
-  font-size: var(--sl-font-size-xx-small);
-}
-
-.poweredBy:hover {
-  color: var(--sl-color-gray-900);
-}
-
-.FooterEmail{
-  text-decoration: none;
-  font-size: var(--sl-font-size-medium);
-  color: var(--sl-color-gray-800);
-  margin: 0px;
-  cursor:pointer;
-}
-
-
-
+const style = `
+/* vietnamese */
+@font-face {
+  font-family: 'Nunito Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/nunitosans/v6/pe0qMImSLYBIv1o4X1M8cceyI9tScg.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Nunito Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/nunitosans/v6/pe0qMImSLYBIv1o4X1M8ccezI9tScg.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Nunito Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/nunitosans/v6/pe0qMImSLYBIv1o4X1M8cce9I9s.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Nunito Sans';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/nunitosans/v6/pe03MImSLYBIv1o4X1M8cc9iB85iU1EQVg.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Nunito Sans';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/nunitosans/v6/pe03MImSLYBIv1o4X1M8cc9iB85jU1EQVg.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Nunito Sans';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/nunitosans/v6/pe03MImSLYBIv1o4X1M8cc9iB85tU1E.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Nunito Sans';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/nunitosans/v6/pe03MImSLYBIv1o4X1M8cc8GBs5iU1EQVg.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Nunito Sans';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/nunitosans/v6/pe03MImSLYBIv1o4X1M8cc8GBs5jU1EQVg.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Nunito Sans';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/nunitosans/v6/pe03MImSLYBIv1o4X1M8cc8GBs5tU1E.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+html {
+  visibility:hidden;
+}
+:root {
+  --sl-color-gray-50: hsl(0 0% 97.5%);
+  --sl-color-gray-100: hsl(240 4.8% 95.9%);
+  --sl-color-gray-200: hsl(240 5.9% 90%);
+  --sl-color-gray-300: hsl(240 4.9% 83.9%);
+  --sl-color-gray-400: hsl(240 5% 64.9%);
+  --sl-color-gray-500: hsl(240 3.8% 46.1%);
+  --sl-color-gray-600: hsl(240 5.2% 33.9%);
+  --sl-color-gray-700: hsl(240 5.3% 26.1%);
+  --sl-color-gray-800: hsl(240 3.7% 15.9%);
+  --sl-color-gray-900: hsl(240 5.9% 10%);
+  --sl-color-gray-950: hsl(240 7.3% 8%);
+
+  --sl-color-red-50: hsl(0 85.7% 97.3%);
+  --sl-color-red-100: hsl(0 93.3% 94.1%);
+  --sl-color-red-200: hsl(0 96.3% 89.4%);
+  --sl-color-red-300: hsl(0 93.5% 81.8%);
+  --sl-color-red-400: hsl(0 90.6% 70.8%);
+  --sl-color-red-500: hsl(0 84.2% 60.2%);
+  --sl-color-red-600: hsl(0 72.2% 50.6%);
+  --sl-color-red-700: hsl(0 73.7% 41.8%);
+  --sl-color-red-800: hsl(0 70% 35.3%);
+  --sl-color-red-900: hsl(0 62.8% 30.6%);
+  --sl-color-red-950: hsl(0 60% 19.6%);
+
+  --sl-color-orange-50: hsl(33.3 100% 96.5%);
+  --sl-color-orange-100: hsl(34.3 100% 91.8%);
+  --sl-color-orange-200: hsl(32.1 97.7% 83.1%);
+  --sl-color-orange-300: hsl(30.7 97.2% 72.4%);
+  --sl-color-orange-400: hsl(27 96% 61%);
+  --sl-color-orange-500: hsl(24.6 95% 53.1%);
+  --sl-color-orange-600: hsl(20.5 90.2% 48.2%);
+  --sl-color-orange-700: hsl(17.5 88.3% 40.4%);
+  --sl-color-orange-800: hsl(15 79.1% 33.7%);
+  --sl-color-orange-900: hsl(15.3 74.6% 27.8%);
+  --sl-color-orange-950: hsl(15.2 69.1% 19%);
+
+  --sl-color-amber-50: hsl(48 100% 96.1%);
+  --sl-color-amber-100: hsl(48 96.5% 88.8%);
+  --sl-color-amber-200: hsl(48 96.6% 76.7%);
+  --sl-color-amber-300: hsl(45.9 96.7% 64.5%);
+  --sl-color-amber-400: hsl(43.3 96.4% 56.3%);
+  --sl-color-amber-500: hsl(37.7 92.1% 50.2%);
+  --sl-color-amber-600: hsl(32.1 94.6% 43.7%);
+  --sl-color-amber-700: hsl(26 90.5% 37.1%);
+  --sl-color-amber-800: hsl(22.7 82.5% 31.4%);
+  --sl-color-amber-900: hsl(21.7 77.8% 26.5%);
+  --sl-color-amber-950: hsl(22.9 74.1% 16.7%);
+
+  --sl-color-yellow-50: hsl(54.5 91.7% 95.3%);
+  --sl-color-yellow-100: hsl(54.9 96.7% 88%);
+  --sl-color-yellow-200: hsl(52.8 98.3% 76.9%);
+  --sl-color-yellow-300: hsl(50.4 97.8% 63.5%);
+  --sl-color-yellow-400: hsl(47.9 95.8% 53.1%);
+  --sl-color-yellow-500: hsl(45.4 93.4% 47.5%);
+  --sl-color-yellow-600: hsl(40.6 96.1% 40.4%);
+  --sl-color-yellow-700: hsl(35.5 91.7% 32.9%);
+  --sl-color-yellow-800: hsl(31.8 81% 28.8%);
+  --sl-color-yellow-900: hsl(28.4 72.5% 25.7%);
+  --sl-color-yellow-950: hsl(33.1 69% 13.9%);
+
+  --sl-color-lime-50: hsl(78.3 92% 95.1%);
+  --sl-color-lime-100: hsl(79.6 89.1% 89.2%);
+  --sl-color-lime-200: hsl(80.9 88.5% 79.6%);
+  --sl-color-lime-300: hsl(82 84.5% 67.1%);
+  --sl-color-lime-400: hsl(82.7 78% 55.5%);
+  --sl-color-lime-500: hsl(83.7 80.5% 44.3%);
+  --sl-color-lime-600: hsl(84.8 85.2% 34.5%);
+  --sl-color-lime-700: hsl(85.9 78.4% 27.3%);
+  --sl-color-lime-800: hsl(86.3 69% 22.7%);
+  --sl-color-lime-900: hsl(87.6 61.2% 20.2%);
+  --sl-color-lime-950: hsl(86.5 60.6% 13.9%);
+
+  --sl-color-green-50: hsl(138.5 76.5% 96.7%);
+  --sl-color-green-100: hsl(140.6 84.2% 92.5%);
+  --sl-color-green-200: hsl(141 78.9% 85.1%);
+  --sl-color-green-300: hsl(141.7 76.6% 73.1%);
+  --sl-color-green-400: hsl(141.9 69.2% 58%);
+  --sl-color-green-500: hsl(142.1 70.6% 45.3%);
+  --sl-color-green-600: hsl(142.1 76.2% 36.3%);
+  --sl-color-green-700: hsl(142.4 71.8% 29.2%);
+  --sl-color-green-800: hsl(142.8 64.2% 24.1%);
+  --sl-color-green-900: hsl(143.8 61.2% 20.2%);
+  --sl-color-green-950: hsl(144.3 60.7% 12%);
+
+  --sl-color-emerald-50: hsl(151.8 81% 95.9%);
+  --sl-color-emerald-100: hsl(149.3 80.4% 90%);
+  --sl-color-emerald-200: hsl(152.4 76% 80.4%);
+  --sl-color-emerald-300: hsl(156.2 71.6% 66.9%);
+  --sl-color-emerald-400: hsl(158.1 64.4% 51.6%);
+  --sl-color-emerald-500: hsl(160.1 84.1% 39.4%);
+  --sl-color-emerald-600: hsl(161.4 93.5% 30.4%);
+  --sl-color-emerald-700: hsl(162.9 93.5% 24.3%);
+  --sl-color-emerald-800: hsl(163.1 88.1% 19.8%);
+  --sl-color-emerald-900: hsl(164.2 85.7% 16.5%);
+  --sl-color-emerald-950: hsl(164.3 87.5% 9.4%);
+
+  --sl-color-teal-50: hsl(166.2 76.5% 96.7%);
+  --sl-color-teal-100: hsl(167.2 85.5% 89.2%);
+  --sl-color-teal-200: hsl(168.4 83.8% 78.2%);
+  --sl-color-teal-300: hsl(170.6 76.9% 64.3%);
+  --sl-color-teal-400: hsl(172.5 66% 50.4%);
+  --sl-color-teal-500: hsl(173.4 80.4% 40%);
+  --sl-color-teal-600: hsl(174.7 83.9% 31.6%);
+  --sl-color-teal-700: hsl(175.3 77.4% 26.1%);
+  --sl-color-teal-800: hsl(176.1 69.4% 21.8%);
+  --sl-color-teal-900: hsl(175.9 60.8% 19%);
+  --sl-color-teal-950: hsl(176.5 58.6% 11.4%);
+
+  --sl-color-cyan-50: hsl(183.2 100% 96.3%);
+  --sl-color-cyan-100: hsl(185.1 95.9% 90.4%);
+  --sl-color-cyan-200: hsl(186.2 93.5% 81.8%);
+  --sl-color-cyan-300: hsl(187 92.4% 69%);
+  --sl-color-cyan-400: hsl(187.9 85.7% 53.3%);
+  --sl-color-cyan-500: hsl(188.7 94.5% 42.7%);
+  --sl-color-cyan-600: hsl(191.6 91.4% 36.5%);
+  --sl-color-cyan-700: hsl(192.9 82.3% 31%);
+  --sl-color-cyan-800: hsl(194.4 69.6% 27.1%);
+  --sl-color-cyan-900: hsl(196.4 63.6% 23.7%);
+  --sl-color-cyan-950: hsl(196.8 61% 16.1%);
+
+  --sl-color-sky-50: hsl(204 100% 97.1%);
+  --sl-color-sky-100: hsl(204 93.8% 93.7%);
+  --sl-color-sky-200: hsl(200.6 94.4% 86.1%);
+  --sl-color-sky-300: hsl(199.4 95.5% 73.9%);
+  --sl-color-sky-400: hsl(198.4 93.2% 59.6%);
+  --sl-color-sky-500: hsl(198.6 88.7% 48.4%);
+  --sl-color-sky-600: hsl(200.4 98% 39.4%);
+  --sl-color-sky-700: hsl(201.3 96.3% 32.2%);
+  --sl-color-sky-800: hsl(201 90% 27.5%);
+  --sl-color-sky-900: hsl(202 80.3% 23.9%);
+  --sl-color-sky-950: hsl(202.3 73.8% 16.5%);
+
+  --sl-color-blue-50: hsl(213.8 100% 96.9%);
+  --sl-color-blue-100: hsl(214.3 94.6% 92.7%);
+  --sl-color-blue-200: hsl(213.3 96.9% 87.3%);
+  --sl-color-blue-300: hsl(211.7 96.4% 78.4%);
+  --sl-color-blue-400: hsl(213.1 93.9% 67.8%);
+  --sl-color-blue-500: hsl(217.2 91.2% 59.8%);
+  --sl-color-blue-600: hsl(221.2 83.2% 53.3%);
+  --sl-color-blue-700: hsl(224.3 76.3% 48%);
+  --sl-color-blue-800: hsl(225.9 70.7% 40.2%);
+  --sl-color-blue-900: hsl(224.4 64.3% 32.9%);
+  --sl-color-blue-950: hsl(226.2 55.3% 18.4%);
+
+  --sl-color-indigo-50: hsl(225.9 100% 96.7%);
+  --sl-color-indigo-100: hsl(226.5 100% 93.9%);
+  --sl-color-indigo-200: hsl(228 96.5% 88.8%);
+  --sl-color-indigo-300: hsl(229.7 93.5% 81.8%);
+  --sl-color-indigo-400: hsl(234.5 89.5% 73.9%);
+  --sl-color-indigo-500: hsl(238.7 83.5% 66.7%);
+  --sl-color-indigo-600: hsl(243.4 75.4% 58.6%);
+  --sl-color-indigo-700: hsl(244.5 57.9% 50.6%);
+  --sl-color-indigo-800: hsl(243.7 54.5% 41.4%);
+  --sl-color-indigo-900: hsl(242.2 47.4% 34.3%);
+  --sl-color-indigo-950: hsl(243.5 43.6% 22.9%);
+
+  --sl-color-violet-50: hsl(250 100% 97.6%);
+  --sl-color-violet-100: hsl(251.4 91.3% 95.5%);
+  --sl-color-violet-200: hsl(250.5 95.2% 91.8%);
+  --sl-color-violet-300: hsl(252.5 94.7% 85.1%);
+  --sl-color-violet-400: hsl(255.1 91.7% 76.3%);
+  --sl-color-violet-500: hsl(258.3 89.5% 66.3%);
+  --sl-color-violet-600: hsl(262.1 83.3% 57.8%);
+  --sl-color-violet-700: hsl(263.4 70% 50.4%);
+  --sl-color-violet-800: hsl(263.4 69.3% 42.2%);
+  --sl-color-violet-900: hsl(263.5 67.4% 34.9%);
+  --sl-color-violet-950: hsl(265.1 61.5% 21.4%);
+
+  --sl-color-purple-50: hsl(270 100% 98%);
+  --sl-color-purple-100: hsl(268.7 100% 95.5%);
+  --sl-color-purple-200: hsl(268.6 100% 91.8%);
+  --sl-color-purple-300: hsl(269.2 97.4% 85.1%);
+  --sl-color-purple-400: hsl(270 95.2% 75.3%);
+  --sl-color-purple-500: hsl(270.7 91% 65.1%);
+  --sl-color-purple-600: hsl(271.5 81.3% 55.9%);
+  --sl-color-purple-700: hsl(272.1 71.7% 47.1%);
+  --sl-color-purple-800: hsl(272.9 67.2% 39.4%);
+  --sl-color-purple-900: hsl(273.6 65.6% 32%);
+  --sl-color-purple-950: hsl(276 59.5% 16.5%);
+
+  --sl-color-fuchsia-50: hsl(289.1 100% 97.8%);
+  --sl-color-fuchsia-100: hsl(287 100% 95.5%);
+  --sl-color-fuchsia-200: hsl(288.3 95.8% 90.6%);
+  --sl-color-fuchsia-300: hsl(291.1 93.1% 82.9%);
+  --sl-color-fuchsia-400: hsl(292 91.4% 72.5%);
+  --sl-color-fuchsia-500: hsl(292.2 84.1% 60.6%);
+  --sl-color-fuchsia-600: hsl(293.4 69.5% 48.8%);
+  --sl-color-fuchsia-700: hsl(294.7 72.4% 39.8%);
+  --sl-color-fuchsia-800: hsl(295.4 70.2% 32.9%);
+  --sl-color-fuchsia-900: hsl(296.7 63.6% 28%);
+  --sl-color-fuchsia-950: hsl(297.1 56.8% 14.5%);
+
+  --sl-color-pink-50: hsl(327.3 73.3% 97.1%);
+  --sl-color-pink-100: hsl(325.7 77.8% 94.7%);
+  --sl-color-pink-200: hsl(325.9 84.6% 89.8%);
+  --sl-color-pink-300: hsl(327.4 87.1% 81.8%);
+  --sl-color-pink-400: hsl(328.6 85.5% 70.2%);
+  --sl-color-pink-500: hsl(330.4 81.2% 60.4%);
+  --sl-color-pink-600: hsl(333.3 71.4% 50.6%);
+  --sl-color-pink-700: hsl(335.1 77.6% 42%);
+  --sl-color-pink-800: hsl(335.8 74.4% 35.3%);
+  --sl-color-pink-900: hsl(335.9 69% 30.4%);
+  --sl-color-pink-950: hsl(336.2 65.4% 15.9%);
+
+  --sl-color-rose-50: hsl(355.7 100% 97.3%);
+  --sl-color-rose-100: hsl(355.6 100% 94.7%);
+  --sl-color-rose-200: hsl(352.7 96.1% 90%);
+  --sl-color-rose-300: hsl(352.6 95.7% 81.8%);
+  --sl-color-rose-400: hsl(351.3 94.5% 71.4%);
+  --sl-color-rose-500: hsl(349.7 89.2% 60.2%);
+  --sl-color-rose-600: hsl(346.8 77.2% 49.8%);
+  --sl-color-rose-700: hsl(345.3 82.7% 40.8%);
+  --sl-color-rose-800: hsl(343.4 79.7% 34.7%);
+  --sl-color-rose-900: hsl(341.5 75.5% 30.4%);
+  --sl-color-rose-950: hsl(341.3 70.1% 17.1%);
+
+  --sl-color-black: #141414;
+  --sl-color-white: #fff;
+
+  --sl-color-neutral-50: var(--sl-color-gray-50);
+  --sl-color-neutral-100: var(--sl-color-gray-100);
+  --sl-color-neutral-200: var(--sl-color-gray-200);
+  --sl-color-neutral-300: var(--sl-color-gray-300);
+  --sl-color-neutral-400: var(--sl-color-gray-400);
+  --sl-color-neutral-500: var(--sl-color-gray-500);
+  --sl-color-neutral-600: var(--sl-color-gray-600);
+  --sl-color-neutral-700: var(--sl-color-gray-700);
+  --sl-color-neutral-800: var(--sl-color-gray-800);
+  --sl-color-neutral-900: var(--sl-color-gray-900);
+  --sl-color-neutral-950: var(--sl-color-gray-950);
+
+  --sl-color-neutral-0: hsl(0, 0%, 100%);
+  --sl-color-neutral-1000: hsl(0, 0%, 0%);
+
+  --sl-color-primary-50: var(--sl-color-sky-50);
+  --sl-color-primary-100: var(--sl-color-sky-100);
+  --sl-color-primary-200: var(--sl-color-sky-200);
+  --sl-color-primary-300: var(--sl-color-sky-300);
+  --sl-color-primary-400: var(--sl-color-sky-400);
+  --sl-color-primary-500: var(--sl-color-sky-500);
+  --sl-color-primary-600: var(--sl-color-sky-600);
+  --sl-color-primary-700: var(--sl-color-sky-700);
+  --sl-color-primary-800: var(--sl-color-sky-800);
+  --sl-color-primary-900: var(--sl-color-sky-900);
+  --sl-color-primary-950: var(--sl-color-sky-950);
+  --sl-color-primary-text: var(--sl-color-white);
+
+  --sl-color-success-50: var(--sl-color-green-50);
+  --sl-color-success-100: var(--sl-color-green-100);
+  --sl-color-success-200: var(--sl-color-green-200);
+  --sl-color-success-300: var(--sl-color-green-300);
+  --sl-color-success-400: var(--sl-color-green-400);
+  --sl-color-success-500: var(--sl-color-green-500);
+  --sl-color-success-600: var(--sl-color-green-600);
+  --sl-color-success-700: var(--sl-color-green-700);
+  --sl-color-success-800: var(--sl-color-green-800);
+  --sl-color-success-900: var(--sl-color-green-900);
+  --sl-color-success-950: var(--sl-color-green-950);
+  --sl-color-success-text: var(--sl-color-white);
+
+  --sl-color-info-50: var(--sl-color-gray-50);
+  --sl-color-info-100: var(--sl-color-gray-100);
+  --sl-color-info-200: var(--sl-color-gray-200);
+  --sl-color-info-300: var(--sl-color-gray-300);
+  --sl-color-info-400: var(--sl-color-gray-400);
+  --sl-color-info-500: var(--sl-color-gray-500);
+  --sl-color-info-600: var(--sl-color-gray-600);
+  --sl-color-info-700: var(--sl-color-gray-700);
+  --sl-color-info-800: var(--sl-color-gray-800);
+  --sl-color-info-900: var(--sl-color-gray-900);
+  --sl-color-info-950: var(--sl-color-gray-950);
+
+  --sl-color-warning-50: var(--sl-color-amber-50);
+  --sl-color-warning-100: var(--sl-color-amber-100);
+  --sl-color-warning-200: var(--sl-color-amber-200);
+  --sl-color-warning-300: var(--sl-color-amber-300);
+  --sl-color-warning-400: var(--sl-color-amber-400);
+  --sl-color-warning-500: var(--sl-color-amber-500);
+  --sl-color-warning-600: var(--sl-color-amber-600);
+  --sl-color-warning-700: var(--sl-color-amber-700);
+  --sl-color-warning-800: var(--sl-color-amber-800);
+  --sl-color-warning-900: var(--sl-color-amber-900);
+  --sl-color-warning-950: var(--sl-color-amber-950);
+  --sl-color-warning-text: var(--sl-color-white);
+
+  --sl-color-danger-50: var(--sl-color-red-50);
+  --sl-color-danger-100: var(--sl-color-red-100);
+  --sl-color-danger-200: var(--sl-color-red-200);
+  --sl-color-danger-300: var(--sl-color-red-300);
+  --sl-color-danger-400: var(--sl-color-red-400);
+  --sl-color-danger-500: var(--sl-color-red-500);
+  --sl-color-danger-600: var(--sl-color-red-600);
+  --sl-color-danger-700: var(--sl-color-red-700);
+  --sl-color-danger-800: var(--sl-color-red-800);
+  --sl-color-danger-900: var(--sl-color-red-900);
+  --sl-color-danger-950: var(--sl-color-red-950);
+  --sl-color-danger-text: var(--sl-color-white);
+
+  --sl-border-radius-small: 0.125rem;
+  --sl-border-radius-medium: 0.25rem;
+  --sl-border-radius-large: 0.5rem;
+  --sl-border-radius-x-large: 1rem;
+  --sl-border-radius-circle: 50%;
+  --sl-border-radius-pill: 9999px;
+  --sl-shadow-x-small: 0 1px 0 #0d131e0d;
+  --sl-shadow-small: 0 1px 2px #0d131e1a;
+  --sl-shadow-medium: 0 2px 4px #0d131e1a;
+  --sl-shadow-large: 0 2px 8px #0d131e1a;
+  --sl-shadow-x-large: 0 4px 16px #0d131e1a;
+  /** LV: Could use the Anvil spacing rules, but probably not necessary **/
+  --sl-spacing-none: 0rem;
+  --sl-spacing-xxx-small: 0.125rem;
+  --sl-spacing-xx-small: 0.25rem;
+  --sl-spacing-x-small: 0.5rem;
+  --sl-spacing-small: 0.75rem;
+  --sl-spacing-medium: 1rem;
+  --sl-spacing-large: 1.25rem;
+  --sl-spacing-x-large: 1.75rem;
+  --sl-spacing-xx-large: 2.25rem;
+  --sl-spacing-xxx-large: 3rem;
+  --sl-spacing-xxxx-large: 4.5rem;
+  --sl-transition-x-slow: 1000ms;
+  --sl-transition-slow: 500ms;
+  --sl-transition-medium: 250ms;
+  --sl-transition-fast: 150ms;
+  --sl-transition-x-fast: 50ms;
+  --sl-font-mono: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+  --sl-font-sans: "Nunito Sans", sans;
+  --sl-font-serif: Georgia, "Times New Roman", serif;
+  --sl-font-size-xx-small: 0.625rem;
+  --sl-font-size-x-small: 0.75rem;
+  --sl-font-size-small: 0.875rem;
+  --sl-font-size-medium: 1rem;
+  --sl-font-size-large: 1.25rem;
+  --sl-font-size-x-large: 1.5rem;
+  --sl-font-size-xx-large: 2.25rem;
+  --sl-font-size-xxx-large: 3rem;
+  --sl-font-size-xxxx-large: 4.5rem;
+  --sl-font-weight-light: 300;
+  --sl-font-weight-normal: 400;
+  --sl-font-weight-semibold: 600;
+  --sl-font-weight-bold: 700;
+  --sl-letter-spacing-dense: -0.015em;
+  --sl-letter-spacing-normal: normal;
+  --sl-letter-spacing-loose: 0.075em;
+  --sl-line-height-dense: 1.4;
+  --sl-line-height-normal: 1.8;
+  --sl-line-height-loose: 2.2;
+  --sl-focus-ring-color-primary: var(--sl-color-primary-100);
+  --sl-focus-ring-color-success: var(--sl-color-success-100);
+  --sl-focus-ring-color-info: var(--sl-color-info-100);
+  --sl-focus-ring-color-warning: var(--sl-color-warning-100);
+  --sl-focus-ring-color-danger: #var(--sl-color-danger-100);;
+  --sl-focus-ring-width: 3px;
+  --sl-button-font-size-small: var(--sl-font-size-x-small);
+  --sl-button-font-size-medium: var(--sl-font-size-small);
+  --sl-button-font-size-large: var(--sl-font-size-medium);
+  --sl-input-height-small: 1.875rem;
+  --sl-input-height-medium: 2.5rem;
+  --sl-input-height-large: 3.125rem;
+  --sl-input-background-color: var(--sl-color-white);
+  --sl-input-background-color-hover: var(--sl-color-white);
+  --sl-input-background-color-focus: var(--sl-color-white);
+  --sl-input-background-color-disabled: var(--sl-color-gray-100);
+  --sl-input-border-color: var(--sl-color-gray-300);
+  --sl-input-border-color-hover: var(--sl-color-gray-400);
+  --sl-input-border-color-focus: var(--sl-color-primary-500);
+  --sl-input-border-color-disabled: var(--sl-color-gray-300);
+  --sl-input-border-width: 1px;
+  --sl-input-border-radius-small: var(--sl-border-radius-medium);
+  --sl-input-border-radius-medium: var(--sl-border-radius-medium);
+  --sl-input-border-radius-large: var(--sl-border-radius-medium);
+  --sl-input-font-family: var(--sl-font-sans);
+  --sl-input-font-weight: var(--sl-font-weight-normal);
+  --sl-input-font-size-small: var(--sl-font-size-small);
+  --sl-input-font-size-medium: var(--sl-font-size-medium);
+  --sl-input-font-size-large: var(--sl-font-size-large);
+  --sl-input-letter-spacing: var(--sl-letter-spacing-normal);
+  --sl-input-color: var(--sl-color-gray-700);
+  --sl-input-color-hover: var(--sl-color-gray-700);
+  --sl-input-color-focus: var(--sl-color-gray-700);
+  --sl-input-color-disabled: var(--sl-color-gray-900);
+  --sl-input-icon-color: var(--sl-color-gray-400);
+  --sl-input-icon-color-hover: var(--sl-color-gray-600);
+  --sl-input-icon-color-focus: var(--sl-color-gray-600);
+  --sl-input-placeholder-color: var(--sl-color-gray-400);
+  --sl-input-placeholder-color-disabled: var(--sl-color-gray-600);
+  --sl-input-spacing-small: var(--sl-spacing-small);
+  --sl-input-spacing-medium: var(--sl-spacing-medium);
+  --sl-input-spacing-large: var(--sl-spacing-large);
+  --sl-input-label-font-size-small: var(--sl-font-size-small);
+  --sl-input-label-font-size-medium: var(--sl-font-size-medium);
+  --sl-input-label-font-size-large: var(--sl-font-size-large);
+  --sl-input-label-color: inherit;
+  --sl-input-help-text-font-size-small: var(--sl-font-size-x-small);
+  --sl-input-help-text-font-size-medium: var(--sl-font-size-small);
+  --sl-input-help-text-font-size-large: var(--sl-font-size-medium);
+  --sl-input-help-text-color: var(--sl-color-gray-400);
+  --sl-toggle-size: 1rem;
+  --sl-overlay-background-color: #37415180;
+  --sl-panel-background-color: var(--sl-color-white);
+  --sl-panel-border-color: var(--sl-color-gray-200);
+  --sl-tooltip-border-radius: var(--sl-border-radius-medium);
+  --sl-tooltip-background-color: var(--sl-color-gray-900);
+  --sl-tooltip-color: var(--sl-color-white);
+  --sl-tooltip-font-family: var(--sl-font-sans);
+  --sl-tooltip-font-weight: var(--sl-font-weight-normal);
+  --sl-tooltip-font-size: var(--sl-font-size-small);
+  --sl-tooltip-line-height: var(--sl-line-height-dense);
+  --sl-tooltip-padding: var(--sl-spacing-xxx-small) var(--sl-spacing-x-small);
+  --sl-tooltip-arrow-size: 5px;
+  --sl-tooltip-arrow-start-end-offset: 8px;
+  --sl-z-index-drawer: 700;
+  --sl-z-index-dialog: 800;
+  --sl-z-index-dropdown: 900;
+  --sl-z-index-toast: 950;
+  --sl-z-index-tooltip: 1000;
+}
+:root {
+  --sqm-header-background: var(--sl-color-white);
+  --sqm-footer-background: var(--sl-color-white);
+  --sqm-color-text-error: #e63717;
+  --sqm-content-max-width: 700px;
+  --sqm-content-background: var(--sl-color-white);
+  --sqm-portal-background: transparent;
+  --widget-background-color: var(--sl-color-white);
+  --sqm-portal-main-width: 900px;
+  --sqm-max-width: 100%;
+}
+
+body {
+  font-family: var(--sl-font-sans);
+  font-size: var(--sl-font-size-medium);
+  font-weight: var(--sl-font-weight-normal);
+  letter-spacing: var(--sl-letter-spacing-small);
+  color: var(--sl-color-gray-800);
+  line-height: var(--sl-line-height-normal);
+  margin: 0;
+  background-color: var(--sqm-portal-background);
+}
+
+// .terms-link,
+// .terms-link:visited {
+//   color: var(--sl-color-gray-500);
+//   text-decoration: none;
+// }
+// .terms-link:hover {
+//   color: var(--sl-color-gray-600);
+// }
+
+h1, h2, h3, h4{
+  line-height: var(--sl-line-height-dense);
+}
+
+
+h2, .Title {
+  font-size: var(--sl-font-size-large);
+  font-weight: var(--sl-font-weight-semibold);
+  margin: 0;
+}
+.H4 {
+  font-size: var(--sl-font-size-medium);
+  font-weight: var(--sl-font-weight-semibold);
+  margin: 0;
+}
+.P {
+  font-size: var(--sl-font-size-small);
+  color: var(--sl-color-gray-800);
+  margin-top: 0px;
+}
+
+.Title {
+  text-align: center;
+}
+
+.Subtitle {
+  text-align: center;
+  margin-bottom: 0px;
+  color: var(--sl-color-gray-500);
+}
+.SupportText{
+  margin-top: var(--sl-spacing-small);
+  text-align: center;
+}
+
+sl-button::part(base){
+  width: 100%;
+}
+
+sqm-share-button{
+  flex: 1;
+}
+
+sqm-hero img {
+  max-width: 100%;
+  display: block;
+}
+
+sl-details::part(base){
+  background-color: var(--sl-color-white);
+  border-color: var(--sl-color-gray-300)
+}
+sl-details::part(summary) {
+  font-size: var(--sl-font-size-medium);
+  font-weight: var(--sl-font-weight-semibold);
+  margin: 0px;
+}
+*::part(defaultbutton-base){
+  background-color: rgba(0,0,0,0);
+  color: var(--sl-color-gray-800);
+  border-color: var(--sl-color-gray-800);
+}
+*::part(defaultbutton-base):hover{
+  background-color: rgba(20,20,20,.08);
+}
+*::part(defaultbutton-base):active{
+  background-color: rgba(20,20,20,.16);
+}
+*::part(defaultbutton-base):focus{
+  box-shadow: none;
+}
+*::part(primarybutton-base){
+  background-color: var(--sl-color-primary-400);
+  color: var(--sl-color-white);
+  border-color: var(--sl-color-primary-400);
+}
+*::part(primarybutton-base):hover{
+  background-color: var(--sl-color-primary-300);
+  border-color: var(--sl-color-primary-300);
+}
+*::part(primarybutton-base):active{
+  background-color: var(--sl-color-primary-500);
+  border-color: var(--sl-color-primary-500);
+}
+
+*::part(primarybutton-base):focus{
+  box-shadow: none;
+}
+
+*::part(input-label), *::part(select-label), *::part(textarea-label){
+  font-size: var(--sl-input-font-size-small);
+  font-weight: var(--sl-font-weight-semibold);
+}
+
+sl-input::part(label){
+  font-size: var(--sl-input-label-font-size-small);
+  font-weight: var(--sl-font-weight-semibold);
+}
+
+*::part(menuitem-base):hover{
+  background-color: var(--sl-color-gray-200);
+  color: var(--sl-color-gray-700);
+}
+
+.poweredBy {
+  color: var(--sl-color-gray-400);
+  font-size: var(--sl-font-size-xx-small);
+}
+
+.poweredBy:hover {
+  color: var(--sl-color-gray-900);
+}
+
+.FooterEmail{
+  text-decoration: none;
+  font-size: var(--sl-font-size-medium);
+  color: var(--sl-color-gray-800);
+  margin: 0px;
+  cursor:pointer;
+}
+
+
+
 `;
 
 index_module.x(stencilHooks_module.l);