@warp-ds/elements 1.3.1 → 1.3.2

package/README.md

@@ -3,7 +3,7 @@
 Welcome to [@warp-ds/elements](https://github.com/warp-ds/elements),
 a collection of Web Components built with Lit to be used to build interfaces based on the [Warp Design System](https://github.com/warp-ds/).
 This repository is maintained by the [Warp Core Team](https://github.com/orgs/warp-ds/teams/warp-core-team)
-and is home to the [@warp-ds/vue](https://www.npmjs.com/package/@warp-ds/elements) library.
+and is home to the [@warp-ds/elements](https://www.npmjs.com/package/@warp-ds/elements) library.
 
 ## How to contribute
 

package/dist/index.js

@@ -1045,16 +1045,18 @@ import { html as html3 } from "lit";
 import WarpElement from "@warp-ds/elements-core";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-// node_modules/.pnpm/@warp-ds+css@1.7.0/node_modules/@warp-ds/css/component-classes/index.js
+// node_modules/.pnpm/@warp-ds+css@1.9.1/node_modules/@warp-ds/css/component-classes/index.js
 var badge = {
   base: "py-4 px-8 border-0 rounded-4 text-xs inline-flex",
-  neutral: "i-bg-$color-badge-neutral-background i-text-$color-badge-neutral-text",
-  info: "i-bg-$color-badge-info-background i-text-$color-badge-info-text",
-  positive: "i-bg-$color-badge-positive-background i-text-$color-badge-positive-text",
-  warning: "i-bg-$color-badge-warning-background i-text-$color-badge-warning-text",
-  negative: "i-bg-$color-badge-negative-background i-text-$color-badge-negative-text",
-  disabled: "i-bg-$color-badge-disabled-background i-text-$color-badge-disabled-text",
-  price: "i-bg-$color-badge-price-background i-text-$color-badge-price-text",
+  neutral: "bg-[--w-color-badge-neutral-background] s-text",
+  info: "bg-[--w-color-badge-info-background] s-text",
+  positive: "bg-[--w-color-badge-positive-background] s-text",
+  warning: "bg-[--w-color-badge-warning-background] s-text",
+  negative: "bg-[--w-color-badge-negative-background] s-text",
+  disabled: "s-bg-disabled s-text",
+  price: "bg-[--w-black/70] s-text-inverted-static",
+  sponsored: "bg-[--w-color-badge-sponsored-background] s-text",
+  // Notification badge is deprecated: Do not use! TODO: Remove in v2
   notification: "i-bg-$color-badge-notification-background i-text-$color-badge-notification-text",
   positionBase: "absolute backdrop-blur",
   positionTL: "rounded-tl-0 rounded-tr-0 rounded-bl-0 top-0 left-0",
@@ -1067,18 +1069,18 @@ var box = {
   // Relative here enables w-clickable
   bleed: "-mx-16 sm:mx-0 rounded-l-0 rounded-r-0 sm:rounded-8",
   // We target L and R to override the default rounded-8
-  info: "i-bg-$color-box-info-background i-text-$color-box-info-text",
-  neutral: "i-bg-$color-box-neutral-background i-text-$color-box-neutral-text",
-  bordered: "border-2 i-border-$color-box-bordered-border i-bg-$color-box-bordered-background i-text-$color-box-bordered-text",
-  infoClickable: "hover:i-bg-$color-box-info-background-hover active:i-bg-$color-box-info-background-hover",
-  neutralClickable: "hover:i-bg-$color-box-neutral-background-hover active:i-bg-$color-box-neutral-background-hover",
-  borderedClickable: "hover:i-bg-$color-box-bordered-background-hover active:i-bg-$color-box-bordered-background-hover hover:i-border-$color-box-bordered-border-hover active:i-border-$color-box-bordered-border-hover"
+  info: "s-bg-info-subtle",
+  neutral: "bg-[--w-s-color-surface-sunken]",
+  bordered: "border-2 s-border s-bg",
+  infoClickable: "hover:s-bg-info-subtle-hover active:s-bg-info-subtle-hover",
+  neutralClickable: "hover:s-bg-subtle-hover active:s-bg-subtle-hover",
+  borderedClickable: "hover:s-bg-hover active:s-bg-hover hover:s-border-hover active:s-border-hover"
 };
 var pill = {
   pill: "flex items-center",
   button: "inline-flex items-center focusable text-xs transition-all",
-  suggestion: "i-bg-$color-pill-suggestion-background hover:i-bg-$color-pill-suggestion-background-hover active:i-bg-$color-pill-suggestion-background-active i-text-$color-pill-suggestion-text font-bold",
-  filter: "i-bg-$color-pill-filter-background hover:i-bg-$color-pill-filter-background-hover active:i-bg-$color-pill-filter-background-active i-text-$color-pill-filter-text",
+  suggestion: "bg-[--w-color-pill-suggestion-background] hover:bg-[--w-color-pill-suggestion-background-hover] active:bg-[--w-color-pill-suggestion-background-active] s-text font-bold",
+  filter: "s-bg-primary hover:s-bg-primary-hover active:s-bg-primary-active s-text-inverted",
   label: "pl-12 py-8 rounded-l-full",
   labelWithoutClose: "pr-12 rounded-r-full",
   labelWithClose: "pr-2",
@@ -1087,15 +1089,15 @@ var pill = {
 };
 var card = {
   card: "cursor-pointer overflow-hidden relative transition-all",
-  cardShadow: "rounded-8 i-shadow-$shadow-card hover:i-shadow-$shadow-card-hover hover:i-bg-$color-card-background-hover tap-highlight-transparent",
+  cardShadow: "rounded-8 shadow-s hover:shadow-m hover:s-bg-subtle-hover tap-highlight-transparent",
   cardFlat: "border-2 rounded-4",
-  cardFlatUnselected: "i-bg-$color-card-flat-background i-border-$color-card-flat-border hover:i-bg-$color-card-flat-background-hover hover:i-border-$color-card-flat-border-hover active:i-bg-$color-card-flat-background-active active:i-border-$color-card-flat-border-active",
-  cardFlatSelected: "i-border-$color-card-flat-border-selected i-bg-$color-card-flat-background-selected hover:i-bg-$color-card-flat-background-selected-hover hover:i-border-$color-card-flat-border-selected-hover active:i-border-$color-card-flat-border-active active:i-bg-$color-card-flat-background-active",
+  cardFlatUnselected: "s-bg s-border hover:s-bg-hover hover:s-border-hover active:s-bg-active active:s-border-active",
+  cardFlatSelected: "s-border-selected s-bg-selected hover:s-bg-selected-hover hover:s-border-selected-hover active:s-border-selected-active active:s-bg-selected-active",
   cardUnselected: "s-bg",
-  cardSelected: "i-border-$color-card-border-selected i-bg-$color-card-background-selected hover:i-border-$color-card-border-selected-hover hover:i-bg-$color-card-background-selected-hover active:i-border-$color-card-border-selected-active",
-  cardOutline: "active:i-border-$color-card-flat-border absolute rounded-8 inset-0 transition-all border-2",
-  cardOutlineUnselected: "i-border-$color-card-border",
-  cardOutlineSelected: "i-border-$color-card-border-selected hover:i-border-$color-card-border-selected-hover",
+  cardSelected: "s-border-selected s-bg-selected hover:s-border-selected-hover hover:s-bg-selected-hover active:s-border-selected-active active:s-bg-selected-active",
+  cardOutline: "active:s-border absolute rounded-8 inset-0 transition-all border-2",
+  cardOutlineUnselected: "border-transparent",
+  cardOutlineSelected: "s-border-selected hover:s-border-selected-hover",
   a11y: "sr-only"
 };
 var toaster = {
@@ -1106,24 +1108,25 @@ var toaster = {
 var toast = {
   wrapper: "relative overflow-hidden w-full",
   toast: "flex group p-8 mt-16 rounded-8 border-2 w-full pointer-events-auto transition-all",
-  positive: "i-bg-$color-toast-positive-background i-border-$color-toast-positive-subtle-border i-text-$color-toast-positive-text",
-  warning: "i-bg-$color-toast-warning-background i-border-$color-toast-warning-subtle-border i-text-$color-toast-warning-text",
-  negative: "i-bg-$color-toast-negative-background i-border-$color-toast-negative-subtle-border i-text-$color-toast-negative-text",
+  positive: "s-bg-positive-subtle s-border-positive-subtle s-text",
+  warning: "s-bg-warning-subtle s-border-warning-subtle s-text",
+  negative: "s-bg-negative-subtle s-border-negative-subtle s-text",
   icon: "shrink-0 rounded-full w-[16px] h-[16px] m-[8px]",
-  iconPositive: "i-text-$color-toast-positive-icon",
-  iconWarning: "i-text-$color-toast-warning-icon",
-  iconNegative: "i-text-$color-toast-negative-icon",
+  iconPositive: "s-icon-positive",
+  iconWarning: "s-icon-warning",
+  iconNegative: "s-icon-negative",
   iconLoading: "animate-bounce",
   content: "self-center mr-8 py-4 last-child:mb-0",
-  close: "bg-transparent ml-auto p-[8px] i-text-$color-toast-close-icon hover:i-text-$color-toast-close-icon-hover active:i-text-$color-toast-close-icon-active"
+  close: "bg-transparent ml-auto p-[8px] s-icon hover:s-icon-hover active:s-icon-active"
 };
 var buttonReset = "focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block";
 var expandable = {
   expandable: "will-change-height",
-  expandableTitle: "font-bold i-text-$color-expandable-title-text",
-  expandableBox: "i-bg-$color-expandable-background hover:i-bg-$color-expandable-background-hover py-0 px-0 " + box.box,
+  expandableTitle: "font-bold s-text",
+  expandableBox: "s-bg-subtle hover:s-bg-subtle-hover py-0 px-0 " + box.box,
+  expandableInfo: "s-bg-info-subtle! hover:s-bg-info-subtle-hover!",
   expandableBleed: box.bleed,
-  chevron: "inline-block align-middle i-text-$color-expandable-icon",
+  chevron: "inline-block align-middle s-icon",
   chevronNonBox: "ml-8",
   chevronBox: "",
   chevronTransform: "transform transition-transform transform-gpu ease-in-out",
@@ -1143,17 +1146,17 @@ var expandable = {
 };
 var buttonDefaultStyling = "font-bold focusable justify-center transition-colors ease-in-out";
 var buttonColors = {
-  primary: "i-text-$color-button-primary-text hover:i-text-$color-button-primary-text i-bg-$color-button-primary-background hover:i-bg-$color-button-primary-background-hover active:i-bg-$color-button-primary-background-active",
-  secondary: "i-text-$color-button-secondary-text hover:i-text-$color-button-secondary-text i-border-$color-button-secondary-border i-bg-$color-button-secondary-background hover:i-bg-$color-button-secondary-background-hover hover:i-border-$color-button-secondary-border-hover active:i-bg-$color-button-secondary-background-active",
-  utility: "i-text-$color-button-utility-text hover:i-text-$color-button-utility-text i-bg-$color-button-utility-background i-border-$color-button-utility-border hover:i-bg-$color-button-utility-background hover:i-border-$color-button-utility-border-hover active:i-border-$color-button-utility-border-active",
-  destructive: "i-bg-$color-button-negative-background i-text-$color-button-negative-text hover:i-text-$color-button-negative-text hover:i-bg-$color-button-negative-background-hover active:i-bg-$color-button-negative-background-active",
-  pill: "i-text-$color-button-pill-icon hover:i-text-$color-button-pill-icon-hover active:i-text-$color-button-pill-icon-active i-bg-$color-button-pill-background hover:i-bg-$color-button-pill-background-hover active:i-bg-$color-button-pill-background-active",
-  disabled: "i-text-$color-button-disabled-text i-bg-$color-button-disabled-background",
-  quiet: "i-bg-$color-button-quiet-background i-text-$color-button-quiet-text hover:i-bg-$color-button-quiet-background-hover active:i-bg-$color-button-quiet-background-active",
-  utilityQuiet: "i-text-$color-button-utility-quiet-text i-bg-$color-button-utility-quiet-background hover:i-bg-$color-button-utility-quiet-background-hover",
-  negativeQuiet: "i-bg-$color-button-negative-quiet-background i-text-$color-button-negative-quiet-text hover:i-bg-$color-button-negative-quiet-background-hover active:i-bg-$color-button-negative-quiet-background-active",
-  loading: "i-text-$color-button-loading-text i-bg-$color-button-loading-background",
-  link: "i-text-$color-button-link-text"
+  primary: "s-text-inverted bg-[--w-color-button-primary-background] hover:bg-[--w-color-button-primary-background-hover] active:bg-[--w-color-button-primary-background-active]",
+  secondary: "s-text-link s-border s-bg hover:s-bg-hover hover:s-border-hover active:s-bg-active",
+  utility: "s-text s-bg hover:s-bg-hover active:s-bg-active s-border hover:s-border-hover active:s-border-active",
+  destructive: "s-bg-negative s-text-inverted hover:s-bg-negative-hover active:s-bg-negative-active",
+  pill: "s-icon hover:s-icon-hover active:s-icon-active bg-transparent hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]",
+  disabled: "s-text-inverted s-bg-disabled",
+  quiet: "bg-transparent s-text-link hover:s-bg-hover active:s-bg-active",
+  utilityQuiet: "s-text bg-transparent hover:s-bg-hover active:s-bg-active",
+  negativeQuiet: "bg-transparent s-text-negative hover:s-bg-negative-subtle-hover active:s-bg-negative-subtle-active",
+  loading: "s-text s-bg-subtle",
+  link: "s-text-link"
 };
 var buttonTypes = {
   primary: `border-0 rounded-8 ${buttonDefaultStyling}`,
@@ -1257,10 +1260,10 @@ var button = {
   contentWidth: "max-w-max"
 };
 var modal = {
-  //TODO: this class can be removed when we have the solution for opacity and we can add rgba values to the background of the backdrop
-  transparentBg: `before:i-bg-$color-modal-backdrop-background before:content-[""] before:absolute before:top-0 before:bottom-0 before:left-0 before:right-0 before:opacity-25`,
-  backdrop: "fixed inset-0 flex sm:place-content-center sm:place-items-center items-end z-30 [--w-modal-max-height:80%] [--w-modal-width:640px]",
-  modal: "pb-safe-[32] i-shadow-$shadow-modal max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] relative transition-300 ease-in-out backface-hidden will-change-height rounded-8 mx-0 sm:mx-16 i-bg-$color-modal-background flex flex-col overflow-hidden outline-none space-y-16 pt-8 sm:pt-32 sm:pb-32 rounded-b-0 sm:rounded-b-8",
+  transparentBg: "",
+  //TODO: Remove in v2 - previously used for opacity before changing to a rgba background in backdrop
+  backdrop: "fixed inset-0 flex sm:place-content-center sm:place-items-center items-end z-30 [--w-modal-max-height:80%] [--w-modal-width:640px] bg-[--w-black/25]",
+  modal: "pb-safe-[32] shadow-m max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] relative transition-300 ease-in-out backface-hidden will-change-height rounded-8 mx-0 sm:mx-16 bg-[--w-s-color-surface-elevated-100] flex flex-col overflow-hidden outline-none space-y-16 pt-8 sm:pt-32 sm:pb-32 rounded-b-0 sm:rounded-b-8",
   content: "block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative",
   footer: "flex justify-end shrink-0 px-16 sm:px-32",
   transitionTitle: "transition-all duration-300",
@@ -1275,71 +1278,131 @@ var modal = {
   titleButtonIconRotated: "transform rotate-90"
 };
 var alert = {
-  alert: "flex p-16 border border-l-4 rounded-4",
+  alert: "flex p-16 border border-l-4 rounded-4 s-text",
   willChangeHeight: "will-change-height",
   textWrapper: "last-child:mb-0 text-s",
   title: "text-s",
   icon: "w-16 mr-8 min-w-16",
-  negative: "i-border-$color-alert-negative-subtle-border i-bg-$color-alert-negative-background i-text-$color-alert-negative-text i-border-l-$color-alert-negative-border",
-  negativeIcon: "i-text-$color-alert-negative-icon",
-  positive: "i-border-$color-alert-positive-subtle-border i-bg-$color-alert-positive-background i-text-$color-alert-positive-text i-border-l-$color-alert-positive-border",
-  positiveIcon: "i-text-$color-alert-positive-icon",
-  warning: "i-border-$color-alert-warning-subtle-border i-bg-$color-alert-warning-background i-text-$color-alert-warning-text i-border-l-$color-alert-warning-border",
-  warningIcon: "i-text-$color-alert-warning-icon",
-  info: "i-border-$color-alert-info-subtle-border i-bg-$color-alert-info-background i-text-$color-alert-info-text i-border-l-$color-alert-info-border",
-  infoIcon: "i-text-$color-alert-info-icon"
+  negative: "s-border-negative-subtle s-border-l-negative s-bg-negative-subtle",
+  negativeIcon: "s-icon-negative",
+  positive: "s-border-positive-subtle s-border-l-positive s-bg-positive-subtle",
+  positiveIcon: "s-icon-positive",
+  warning: "s-border-warning-subtle s-border-l-warning s-bg-warning-subtle",
+  warningIcon: "s-icon-warning",
+  info: "s-border-info-subtle s-border-l-info s-bg-info-subtle",
+  infoIcon: "s-icon-info"
 };
 var input = {
-  default: "block text-m mb-0 leading-m i-text-$color-input-text-filled i-bg-$color-input-background i-border-$color-input-border hover:i-border-$color-input-border-hover active:i-border-$color-input-border-active rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] caret-current",
+  default: "block text-m mb-0 leading-m s-text s-bg s-border hover:s-border-hover active:s-border-selected rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] caret-current",
   textArea: "min-h-[42] sm:min-h-[45]",
-  disabled: "i-bg-$color-input-background-disabled i-border-$color-input-border-disabled hover:i-border-$color-input-border-disabled! i-text-$color-input-text-disabled pointer-events-none",
-  invalid: "i-border-$color-input-border-negative i-text-$color-input-text-negative!",
-  readOnly: "pl-0 bg-transparent border-0 pointer-events-none i-text-$color-input-text-read-only",
-  placeholder: "placeholder:i-text-$color-input-text-placeholder",
+  disabled: "s-bg-disabled-subtle s-border-disabled hover:s-border-disabled! s-text-disabled pointer-events-none",
+  invalid: "s-border-negative s-text-negative! hover:s-border-negative-hover! outline-[--w-s-color-border-negative]!",
+  readOnly: "pl-0 bg-transparent! border-0! pointer-events-none",
+  placeholder: "placeholder:s-text-placeholder",
   wrapper: "relative",
   suffix: "pr-40",
   prefix: "pl-40"
 };
 var select = {
-  default: "block text-m mb-0 leading-m i-text-$color-select-text i-bg-$color-select-background i-border-$color-select-border hover:i-border-$color-select-border-hover active:i-border-$color-select-border-active rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] appearance-none pr-32 cursor-pointer caret-current",
-  disabled: "i-bg-$color-select-background-disabled i-border-$color-select-border-disabled hover:i-border-$color-select-border-disabled! active:i-border-$color-select-border-disabled! i-text-$color-select-text-disabled pointer-events-none",
-  invalid: "i-border-$color-select-border-negative",
+  default: "block text-m mb-0 leading-m s-text s-bg s-border hover:s-border-hover active:s-border-active rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] appearance-none pr-32 cursor-pointer caret-current",
+  disabled: "s-bg-disabled-subtle s-border-disabled hover:s-border-disabled! active:s-border-disabled! s-text-disabled pointer-events-none",
+  invalid: "s-border-negative hover:s-border-negative-hover! outline-[--w-s-color-border-negative]!",
   readOnly: "pl-0 bg-transparent border-0 pointer-events-none before:hidden",
   wrapper: "relative",
   selectWrapper: `relative before:block before:absolute before:right-0 before:bottom-0 before:w-32 before:h-full before:pointer-events-none `,
-  chevron: "absolute top-[30%] block right-0 bottom-0 w-32 h-full i-text-$color-select-icon pointer-events-none cursor-pointer",
+  chevron: "absolute top-[30%] block right-0 bottom-0 w-32 h-full s-icon pointer-events-none cursor-pointer",
   chevronDisabled: "opacity-25"
 };
 var label = {
-  label: "antialiased block relative text-s font-bold pb-4 cursor-pointer i-text-$color-label-text",
-  labelInvalid: "i-text-$color-label-text-negative",
-  optional: "pl-8 font-normal text-s i-text-$color-label-optional-text"
+  label: "antialiased block relative text-s font-bold pb-4 cursor-pointer s-text",
+  optional: "pl-8 font-normal text-s s-text-subtle",
+  labelInvalid: "s-text-negative"
+  // TODO: Remove in v2 - kept for backwards compatibility
 };
 var helpText = {
-  helpText: "text-xs mt-4 block i-text-$color-helptext-text",
-  helpTextValid: "i-text-$color-helptext-text-positive",
-  helpTextInvalid: "i-text-$color-helptext-text-negative"
-};
-var prefixSuffixWrapperBase = "absolute top-0 bottom-0 flex justify-center items-center focusable focus:[--w-outline-offset:-2px] bg-transparent ";
+  helpText: "text-xs mt-4 block",
+  helpTextColor: "s-text-subtle",
+  helpTextColorInvalid: "s-text-negative",
+  // TODO: Remove below properties in v2 - kept for backwards compatibility
+  helpTextValid: "s-text-positive",
+  helpTextInvalid: "s-text-negative"
+};
+var prefixSuffixWrapperBase = "absolute top-0 bottom-0 flex justify-center items-center focusable rounded-4 focus:[--w-outline-offset:-2px] bg-transparent ";
 var suffix = {
   wrapper: prefixSuffixWrapperBase + "right-0",
   wrapperWithLabel: "w-max pr-12",
   wrapperWithIcon: "w-40",
-  label: "antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text"
+  label: "antialiased block relative cursor-default pb-0 font-bold text-xs s-text"
 };
 var prefix = {
   wrapper: prefixSuffixWrapperBase + "left-0",
   wrapperWithLabel: "w-max pl-12",
   wrapperWithIcon: "w-40",
-  label: "antialiased block relative cursor-default pb-0 font-bold text-xs i-text-$color-label-text"
+  label: "antialiased block relative cursor-default pb-0 font-bold text-xs s-text"
 };
 var breadcrumbs = {
   wrapper: "flex space-x-8",
-  text: "i-text-$color-breadcrumbs-text",
-  link: "i-text-$color-breadcrumbs-link-text",
-  separator: "select-none i-text-$color-breadcrumbs-icon",
+  text: "s-text",
+  link: "s-text-link",
+  separator: "select-none s-icon",
   a11y: "sr-only"
 };
+var toggle = {
+  // wrapper classes
+  field: "relative text-m",
+  // true
+  wrapper: "relative py-1",
+  // true
+  wrapperRadioButtons: "inline-flex font-bold rounded-8 focus-within:focusable",
+  // isRadioButton && !isEqualWidth
+  wrapperRadioButtonsJustified: "flex font-bold rounded-8 focus-within:focusable",
+  // isRadioButton && isEqualWidth,
+  // group classes
+  radioButtonsGroup: "group",
+  // isRadioButton
+  radioButtonsGroupJustified: "grow-1 shrink-0 basis-auto",
+  // isRadioButton && isEqualWidth
+  // input classes
+  input: "peer",
+  a11y: "sr-only",
+  // label classes
+  label: "peer-focus:focusable cursor-pointer text-m s-text s-border py-2 pl-28 select-none relative block before:border before:absolute before:transition-all before:left-0 before:w-20 before:h-20 before:top-2",
+  // !isRadioButton
+  labelBefore: 'before:content-[""] before:block',
+  // !isRadioButton && !isIndeterminate
+  checkbox: "before:s-bg before:rounded-2 hover:before:s-border-primary hover:before:s-bg-hover peer-checked:before:bg-center peer-checked:before:bg-[url(var(--w-form-check-mark))] peer-checked:before:s-border-primary peer-checked:before:s-bg-primary peer-checked:peer-hover:before:s-border-primary-hover peer-checked:peer-hover:before:s-bg-primary-hover",
+  // isCheckbox && !isIndeterminate && !isInvalid && !isDisabled
+  checkboxInvalid: "before:s-bg before:s-border-negative before:rounded-2 hover:before:s-bg-negative-subtle-hover hover:before:s-border-negative-hover peer-checked:before:bg-center peer-checked:before:bg-[url(var(--w-form-check-mark))] peer-checked:before:s-bg-negative peer-checked:before:s-border-negative peer-checked:peer-hover:before:s-bg-negative-hover peer-checked:peer-hover:before:s-border-negative-hover",
+  // isCheckbox && !isIndeterminate && isInvalid && !isDisabled
+  checkboxDisabled: "before:s-bg-disabled-subtle before:s-border-disabled pointer-events-none before:rounded-2 peer-checked:before:bg-center peer-checked:before:bg-[url(var(--w-form-check-mark))] peer-checked:before:s-border-disabled peer-checked:before:s-bg-disabled",
+  // isCheckbox && !isIndeterminate && !isInvalid && isDisabled
+  indeterminate: 'before:content-["\u2013"] before:rounded-2 before:leading-xs before:text-center before:font-bold before:s-icon-inverted peer-indeterminate:before:s-border-primary peer-indeterminate:before:s-bg-primary peer-indeterminate:hover:before:s-border-primary-hover peer-indeterminate:hover:before:s-bg-primary-hover',
+  // isCheckbox && isIndeterminate && !isInvalid && !isDisabled
+  indeterminateInvalid: 'before:content-["\u2013"] before:rounded-2 before:leading-xs before:text-center before:font-bold before:s-icon-inverted peer-indeterminate:before:s-border-negative peer-indeterminate:before:s-bg-negative peer-indeterminate:hover:before:s-border-negative-hover peer-indeterminate:hover:before:s-bg-negative-hover',
+  // isCheckbox && isIndeterminate && isInvalid && !isDisabled
+  indeterminateDisabled: 'before:content-["\u2013"] before:rounded-2 before:leading-xs before:text-center before:font-bold pointer-events-none before:s-icon-inverted peer-indeterminate:before:s-border-disabled peer-indeterminate:before:s-bg-disabled',
+  // isCheckbox && isIndeterminate && !isInvalid && isDisabled
+  radio: "before:s-bg before:rounded-full peer-checked:before:border-[6] peer-checked:before:s-border-selected peer-checked:peer-hover:before:s-border-selected-hover peer-hover:before:s-border-primary peer-hover:before:s-bg-hover",
+  // isRadio && !isDisabled && !isInvalid
+  radioInvalid: "before:s-bg before:s-border-negative before:rounded-full peer-checked:before:border-[6] peer-hover:before:s-bg-negative-subtle peer-hover:before:s-border-negative-hover peer-checked:before:s-border-negative peer-checked:peer-hover:before:s-border-negative-hover",
+  // isRadio && isInvalid && !isDisabled
+  radioDisabled: "before:s-bg-disabled-subtle before:s-border-disabled pointer-events-none before:rounded-full peer-checked:before:border-[6]",
+  // isRadio && !isInvalid && isDisabled
+  radioButtonsLabel: "peer-hover:peer-not-checked:s-bg-hover peer-checked:s-text-inverted peer-checked:s-bg-primary peer-checked:s-border-primary block relative font-bold cursor-pointer s-text-link text-center s-bg border-2 s-border group-first-of-type:rounded-tl-8 group-first-of-type:rounded-bl-8 group-last-of-type:rounded-tr-8 group-last-of-type:rounded-br-8 group-not-last-of-type:border-r-0 peer-checked:z-10 group-not-first:-ml-2",
+  // isRadioButtons
+  radioButtonsRegular: "text-s py-8 pl-12 pr-14",
+  // isRadioButtons && !isSmall
+  radioButtonsSmall: "text-xs py-[5px] px-[8px]"
+  // isRadioButtons && isSmall
+};
+var deadToggle = {
+  wrapper: `${toggle.wrapper} h-20 w-20 pointer-events-none`,
+  input: `${toggle.input} hidden`,
+  inputVue: "hidden",
+  labelRadio: `${toggle.label} ${toggle.labelBefore} ${toggle.radio}`,
+  labelCheckbox: `${toggle.label} ${toggle.labelBefore} ${toggle.checkbox}`,
+  labelVue: "-mt-2"
+};
 var clickable = {
   toggle: "absolute inset-0 h-full w-full appearance-none cursor-pointer focusable focusable-inset",
   label: `px-12 ${label.label} py-8! cursor-pointer focusable focusable-inset`,
@@ -1348,19 +1411,27 @@ var clickable = {
 };
 var attention = {
   base: "border-2 relative flex items-start",
-  tooltip: "i-bg-$color-tooltip-background i-border-$color-tooltip-background i-shadow-$shadow-tooltip i-text-$color-tooltip-text rounded-4 py-6 px-8",
-  callout: "i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8",
-  highlight: "i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8 drop-shadow-m",
-  popover: "i-bg-$color-popover-background i-border-$color-popover-background i-text-$color-popover-paragraph-text rounded-8 p-16 drop-shadow-m",
+  tooltip: "s-bg-inverted border-[--w-s-color-background-inverted] shadow-m s-text-inverted-static rounded-4 py-6 px-8",
+  callout: "bg-[--w-color-callout-background] border-[--w-color-callout-border] s-text py-8 px-16 rounded-8",
+  highlight: "bg-[--w-color-callout-background] border-[--w-color-callout-border] s-text py-8 px-16 rounded-8 drop-shadow-m translate-z-0",
+  popover: "bg-[--w-s-color-surface-elevated-300] border-[--w-s-color-surface-elevated-300] s-text rounded-8 p-16 drop-shadow-m translate-z-0",
   arrowBase: "absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform",
+  arrowDirectionLeftStart: "-left-[8px]",
   arrowDirectionLeft: "-left-[8px]",
+  arrowDirectionLeftEnd: "-left-[8px]",
+  arrowDirectionRightStart: "-right-[8px]",
   arrowDirectionRight: "-right-[8px]",
+  arrowDirectionRightEnd: "-right-[8px]",
+  arrowDirectionBottomStart: "-bottom-[8px]",
   arrowDirectionBottom: "-bottom-[8px]",
+  arrowDirectionBottomEnd: "-bottom-[8px]",
+  arrowDirectionTopStart: "-top-[8px]",
   arrowDirectionTop: "-top-[8px]",
-  arrowTooltip: "i-bg-$color-tooltip-background i-border-$color-tooltip-background",
-  arrowCallout: "i-bg-$color-callout-background i-border-$color-callout-border",
-  arrowPopover: "i-bg-$color-popover-background i-border-$color-popover-background",
-  arrowHighlight: "i-bg-$color-callout-background i-border-$color-callout-border",
+  arrowDirectionTopEnd: "-top-[8px]",
+  arrowTooltip: "s-bg-inverted border-[--w-s-color-background-inverted]",
+  arrowCallout: "bg-[--w-color-callout-background] border-[--w-color-callout-border]",
+  arrowPopover: "bg-[--w-s-color-surface-elevated-300] border-[--w-s-color-surface-elevated-300]",
+  arrowHighlight: "bg-[--w-color-callout-background] border-[--w-color-callout-border]",
   content: "last-child:mb-0",
   notCallout: "absolute z-50",
   closeBtn: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} justify-self-end -mr-8 ml-8`
@@ -1370,10 +1441,10 @@ var attention = {
 import { LitElement } from "lit";
 import { unsafeStatic, html } from "lit/static-html.js";
 
-// node_modules/.pnpm/@lingui+core@4.7.0/node_modules/@lingui/core/dist/index.mjs
+// node_modules/.pnpm/@lingui+core@4.7.1/node_modules/@lingui/core/dist/index.mjs
 var import_unraw = __toESM(require_dist(), 1);
 
-// node_modules/.pnpm/@lingui+message-utils@4.7.0/node_modules/@lingui/message-utils/dist/compileMessage.mjs
+// node_modules/.pnpm/@lingui+message-utils@4.7.1/node_modules/@lingui/message-utils/dist/compileMessage.mjs
 var import_parser = __toESM(require_parser(), 1);
 function processTokens(tokens, mapText) {
   if (!tokens.filter((token) => token.type !== "content").length) {
@@ -1423,7 +1494,7 @@ Message: ${message}`);
   }
 }
 
-// node_modules/.pnpm/@lingui+core@4.7.0/node_modules/@lingui/core/dist/index.mjs
+// node_modules/.pnpm/@lingui+core@4.7.1/node_modules/@lingui/core/dist/index.mjs
 var isString = (s3) => typeof s3 === "string";
 var isFunction = (f3) => typeof f3 === "function";
 var cache = /* @__PURE__ */ new Map();
@@ -1475,6 +1546,7 @@ function cacheKey(type, locales, options) {
   return `${type}-${localeKey}-${JSON.stringify(options)}`;
 }
 var UNICODE_REGEX = /\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/g;
+var OCTOTHORPE_PH = "%__lingui_octothorpe__%";
 var getDefaultFormats = (locale, passedLocales, formats = {}) => {
   const locales = passedLocales || locale;
   const style = (format) => {
@@ -1483,7 +1555,7 @@ var getDefaultFormats = (locale, passedLocales, formats = {}) => {
   const replaceOctothorpe = (value, message) => {
     const numberFormat = Object.keys(formats).length ? style("number") : void 0;
     const valueStr = number(locales, value, numberFormat);
-    return message.replace("#", valueStr);
+    return message.replace(new RegExp(OCTOTHORPE_PH, "g"), valueStr);
   };
   return {
     plural: (value, cases) => {
@@ -1498,43 +1570,53 @@ var getDefaultFormats = (locale, passedLocales, formats = {}) => {
     },
     select: selectFormatter,
     number: (value, format) => number(locales, value, style(format)),
-    date: (value, format) => date(locales, value, style(format)),
-    undefined: undefinedFormatter
+    date: (value, format) => date(locales, value, style(format))
   };
 };
 var selectFormatter = (value, rules) => {
   var _a;
   return (_a = rules[value]) != null ? _a : rules.other;
 };
-var undefinedFormatter = (value) => value;
 function interpolate(translation, locale, locales) {
   return (values = {}, formats) => {
     const formatters = getDefaultFormats(locale, locales, formats);
-    const formatMessage = (message) => {
-      if (!Array.isArray(message))
-        return message;
-      return message.reduce((message2, token) => {
-        if (isString(token))
-          return message2 + token;
+    const formatMessage = (tokens) => {
+      if (!Array.isArray(tokens))
+        return tokens;
+      return tokens.reduce((message, token) => {
+        if (token === "#") {
+          return message + OCTOTHORPE_PH;
+        }
+        if (isString(token)) {
+          return message + token;
+        }
         const [name, type, format] = token;
         let interpolatedFormat = {};
-        if (format != null && typeof format === "object") {
-          Object.entries(format).forEach(([key, value2]) => {
-            interpolatedFormat[key] = formatMessage(value2);
-          });
+        if (type === "plural" || type === "selectordinal" || type === "select") {
+          Object.entries(format).forEach(
+            ([key, value2]) => {
+              interpolatedFormat[key] = formatMessage(value2);
+            }
+          );
         } else {
           interpolatedFormat = format;
         }
-        const formatter = formatters[type];
-        const value = formatter(values[name], interpolatedFormat);
-        if (value == null)
-          return message2;
-        return message2 + value;
+        let value;
+        if (type) {
+          const formatter = formatters[type];
+          value = formatter(values[name], interpolatedFormat);
+        } else {
+          value = values[name];
+        }
+        if (value == null) {
+          return message;
+        }
+        return message + value;
       }, "");
     };
     const result = formatMessage(translation);
     if (isString(result) && UNICODE_REGEX.test(result)) {
-      return (0, import_unraw.default)(result.trim());
+      return (0, import_unraw.unraw)(result.trim());
     }
     if (isString(result))
       return result.trim();
@@ -4121,12 +4203,11 @@ var messages31 = JSON.parse('{"select.label.optional":"(valgfritt)"}');
 var messages39 = JSON.parse('{"select.label.optional":"(vapaaehtoinen)"}');
 
 // packages/select/index.js
-var _classes, classes_get, _labelClasses, labelClasses_get, _helpTextClasses, helpTextClasses_get, _chevronClasses, chevronClasses_get, _id, id_get, _helpId, helpId_get;
+var _classes, classes_get, _helpTextClasses, helpTextClasses_get, _chevronClasses, chevronClasses_get, _id, id_get, _helpId, helpId_get;
 var WarpSelect = class extends kebabCaseAttributes(WarpElement12) {
   constructor() {
     super();
     __privateAdd(this, _classes);
-    __privateAdd(this, _labelClasses);
     __privateAdd(this, _helpTextClasses);
     __privateAdd(this, _chevronClasses);
     __privateAdd(this, _id);
@@ -4138,7 +4219,7 @@ var WarpSelect = class extends kebabCaseAttributes(WarpElement12) {
     return html20`<div class="${select.wrapper}">
       ${when(
       this.label,
-      () => html20`<label class="${__privateGet(this, _labelClasses, labelClasses_get)}" for="${__privateGet(this, _id, id_get)}">
+      () => html20`<label class="${label.label}" for="${__privateGet(this, _id, id_get)}">
             ${this.label}
             ${when(
         this.optional,
@@ -4183,18 +4264,12 @@ classes_get = function() {
     [select.invalid]: this.invalid
   });
 };
-_labelClasses = new WeakSet();
-labelClasses_get = function() {
-  return r({
-    [label.label]: true,
-    [label.labelInvalid]: this.invalid
-  });
-};
 _helpTextClasses = new WeakSet();
 helpTextClasses_get = function() {
   return r({
     [helpText.helpText]: true,
-    [helpText.helpTextInvalid]: this.invalid
+    [helpText.helpTextColor]: !this.invalid,
+    [helpText.helpTextColorInvalid]: this.invalid
   });
 };
 _chevronClasses = new WeakSet();
@@ -4256,18 +4331,13 @@ var WarpTextField = class extends WarpElement13 {
   get _helpTextStyles() {
     return fclasses({
       [helpText.helpText]: true,
-      [helpText.helpTextInvalid]: this.invalid
-    });
-  }
-  get _labelStyles() {
-    return fclasses({
-      [label.label]: true,
-      [label.labelInvalid]: this.invalid
+      [helpText.helpTextColor]: !this.invalid,
+      [helpText.helpTextColorInvalid]: this.invalid
     });
   }
   get _label() {
     if (this.label) {
-      return html21`<label for="${this._id}" class=${this._labelStyles}>${this.label}</label>`;
+      return html21`<label for="${this._id}" class=${label.label}>${this.label}</label>`;
     }
   }
   get _helpId() {