@warp-ds/elements 1.2.1-next.1 → 1.2.1-next.3

package/dist/packages/textfield/index.js

@@ -1,22 +1,348 @@
-var y=Object.defineProperty;var w=(d,l,n)=>l in d?y(d,l,{enumerable:!0,configurable:!0,writable:!0,value:n}):d[l]=n;var x=(d,l,n)=>(w(d,typeof l!="symbol"?l+"":l,n),n);import{css as L,html as v}from"lit";import k from"@warp-ds/elements-core";var h={box:"group block relative break-words last-child:mb-0 p-16 rounded-8",bleed:"-mx-16 sm:mx-0 rounded-l-0 rounded-r-0 sm: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"};var S="focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block",_={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 "+h.box,expandableBleed:h.bleed,chevron:"inline-block align-middle i-text-$color-expandable-icon",chevronNonBox:"relative left-8",chevronBox:"absolute right-16",chevronTransform:"transform transition-transform transform-gpu ease-in-out",chevronExpand:"-rotate-180",chevronCollapse:"rotate-180",expansion:"overflow-hidden",expansionNotExpanded:"h-0 invisible",button:S+" hover:underline focus:underline",buttonBox:"w-full text-left relative inline-flex items-center "+h.box,paddingTop:"pt-0",title:"flex justify-between items-center",titleType:"h4"},c="font-bold focusable justify-center transition-colors ease-in-out",i={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"},t={primary:`border-0 rounded-8 ${c}`,secondary:`border-2 rounded-8 ${c}`,utility:`border rounded-4 ${c}`,negative:`border-0 rounded-8 ${c}`,pill:`p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${c}`,link:`bg-transparent focusable ease-in-out inline active:underline hover:underline ${i.link}`},r={xsmall:"py-6 px-16",small:"py-8 px-16",medium:"py-10 px-14",large:"py-12 px-16",utility:"py-[11px] px-[15px]",smallUtility:"py-[7px] px-[15px]",pill:"min-h-[44px] min-w-[44px]",pillSmall:"min-h-32 min-w-32",link:"p-0"},o={medium:"text-m leading-[24]",xsmall:"text-xs"},e={inProgress:`border-transparent animate-inprogress pointer-events-none ${i.loading}`,quiet:`border-0 rounded-8 ${c}`,utilityQuiet:`border-0 rounded-4 ${c}`,negativeQuiet:`border-0 rounded-8 ${c}`,isDisabled:`font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${i.disabled}`},q={secondary:`${r.medium} ${o.medium} ${t.secondary} ${i.secondary}`,secondaryHref:`${r.medium} ${o.medium} ${t.secondary} ${i.secondary}`,secondaryDisabled:`${r.medium} ${o.medium} ${t.secondary} ${e.isDisabled}`,secondarySmall:`${o.xsmall} ${r.xsmall} ${t.secondary} ${i.secondary}`,secondarySmallDisabled:`${o.xsmall} ${r.xsmall} ${t.secondary} ${e.isDisabled}`,secondaryQuiet:`${r.medium} ${o.medium} ${e.quiet} ${i.quiet}`,secondaryQuietDisabled:`${r.medium} ${o.medium} ${e.quiet} ${e.isDisabled}`,secondarySmallQuiet:`${o.xsmall} ${r.xsmall} ${e.quiet} ${i.quiet}`,secondarySmallQuietDisabled:`${o.xsmall} ${r.xsmall} ${e.quiet} ${e.isDisabled}`,secondaryLoading:`${r.medium} ${o.medium} ${t.secondary} ${e.inProgress}`,secondarySmallLoading:`${o.xsmall} ${r.xsmall}  ${t.secondary} ${e.inProgress}`,secondarySmallQuietLoading:`${o.xsmall} ${r.xsmall} ${e.quiet} ${e.inProgress}`,secondaryQuietLoading:`${r.medium} ${o.medium} ${e.quiet} ${e.inProgress}`,primary:`${r.large} ${o.medium} ${t.primary} ${i.primary}`,primaryDisabled:`${r.large} ${o.medium} ${e.isDisabled} ${t.primary}`,primarySmall:`${r.small} ${o.xsmall} ${t.primary} ${i.primary}`,primarySmallDisabled:`${r.small} ${o.xsmall} ${e.isDisabled} ${t.primary} `,primaryQuiet:`${r.large} ${o.medium} ${e.quiet} ${i.quiet}`,primaryQuietDisabled:`${r.large} ${o.medium} ${e.quiet} ${e.isDisabled}`,primarySmallQuiet:`${r.small} ${o.xsmall} ${e.quiet} ${i.quiet}`,primarySmallQuietDisabled:`${r.small} ${o.xsmall} ${e.quiet} ${e.isDisabled}`,primaryLoading:`${r.large} ${o.medium} ${e.inProgress} ${t.primary}`,primarySmallLoading:`${r.small} ${o.xsmall}  ${e.inProgress} ${t.primary}`,primarySmallQuietLoading:`${r.small} ${o.xsmall} ${e.quiet} ${e.inProgress} ${t.primary}`,primaryQuietLoading:`${r.large} ${o.medium} ${e.quiet} ${e.inProgress}`,utility:`${r.utility} ${o.medium} ${t.utility} ${i.utility}`,utilityDisabled:`${r.utility} ${o.medium} ${t.utility} ${e.isDisabled}`,utilityQuiet:`${r.large} ${o.medium} ${e.utilityQuiet} ${i.utilityQuiet}`,utilityQuietDisabled:`${r.large} ${o.medium} ${e.utilityQuiet} ${e.isDisabled}`,utilitySmall:`${r.smallUtility} ${o.xsmall} ${t.utility} ${i.utility}`,utilitySmallDisabled:`${r.smallUtility} ${o.xsmall} ${t.utility} ${e.isDisabled}`,utilitySmallQuiet:`${r.smallUtility} ${o.xsmall} ${e.utilityQuiet} ${i.utilityQuiet}`,utilitySmallQuietDisabled:`${r.smallUtility} ${o.xsmall} ${e.utilityQuiet} ${e.isDisabled}`,utilityLoading:`${r.large} ${o.medium} ${t.utility} ${e.inProgress}`,utilitySmallLoading:`${r.smallUtility} ${o.xsmall} ${t.utility} ${e.inProgress}`,utilityQuietLoading:`${r.large} ${o.medium} ${e.inProgress} ${e.utilityQuiet}`,utilitySmallQuietLoading:`${r.smallUtility} ${o.xsmall} ${e.inProgress} ${e.utilityQuiet}`,negative:`${r.large} ${o.medium} ${t.negative} ${i.destructive}`,negativeDisabled:`${r.large} ${o.medium} ${t.negative} ${e.isDisabled}`,negativeQuiet:`${r.large} ${o.medium} ${e.negativeQuiet} ${i.negativeQuiet}`,negativeQuietDisabled:`${r.large} ${o.medium} ${e.negativeQuiet}${e.isDisabled}`,negativeSmall:`${r.small} ${o.xsmall} ${t.negative} ${i.destructive}`,negativeSmallDisabled:`${r.small} ${o.xsmall} ${t.negative} ${e.isDisabled}`,negativeSmallQuiet:`${r.small} ${o.xsmall} ${e.negativeQuiet} ${i.negativeQuiet}`,negativeSmallQuietDisabled:`${r.small} ${o.xsmall} ${e.negativeQuiet} ${e.isDisabled}`,negativeLoading:`${r.large} ${o.medium} ${t.negative} ${e.inProgress}`,negativeSmallLoading:`${r.small} ${o.xsmall} ${e.inProgress} ${t.negative}`,negativeQuietLoading:`${r.large} ${o.medium} ${e.negativeQuiet} ${t.negative} ${e.inProgress}`,negativeSmallQuietLoading:`${r.small} ${o.xsmall} ${e.negativeQuiet} ${e.inProgress}`,pill:`${r.pill} ${o.medium} ${t.pill} ${i.pill}`,pillSmall:`${r.pillSmall} ${o.xsmall} ${t.pill} ${i.pill}`,pillLoading:`${r.pill} ${o.medium} ${t.pill} ${e.inProgress}`,pillSmallLoading:`${r.pillSmall} ${o.xsmall} ${t.pill} ${e.inProgress}`,link:`${r.link} ${o.medium} ${t.link}`,linkSmall:`${r.link} ${o.xsmall} ${t.link}`,linkAsButton:"inline-block hover:no-underline text-center",a11y:"sr-only",fullWidth:"w-full max-w-full",contentWidth:"max-w-max"};var B={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-20 [--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",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",transitionTitleCenter:"justify-self-center",transitionTitleColSpan:"col-span-2",title:"-mt-4 sm:-mt-8 h-40 sm:h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-center px-16 sm:px-32 border-b sm:border-b-0 shrink-0",titleText:"mb-0 h4 sm:h3",titleButton:`${o.medium} ${t.pill} ${i.pill} sm:min-h-[44px] sm:min-w-[44px] min-h-[32px] min-w-[32px]`,titleButtonLeft:"-ml-8 sm:-ml-12 justify-self-start",titleButtonRight:"-mr-8 sm:-mr-12 justify-self-end",titleButtonIcon:"h-16 w-16 sm:h-24 sm:w-24",titleButtonIconRotated:"transform rotate-90"};var b={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",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",wrapper:"relative",suffix:"pr-40",prefix:"pl-40"};var g={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"},m={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"},f="absolute top-0 bottom-0 flex justify-center items-center focusable focus:[--w-outline-offset:-2px] bg-transparent ",T={wrapper:f+"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"},C={wrapper:f+"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"};var I={toggle:"absolute inset-0 h-full w-full appearance-none cursor-pointer focusable focusable-inset",label:`px-12 ${g.label} py-8! cursor-pointer focusable focusable-inset`,buttonOrLink:"bg-transparent focusable",buttonOrLinkStretch:"inset-0 absolute"};var P={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",arrowBase:"absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform",arrowDirectionLeft:"-left-[8px]",arrowDirectionRight:"-right-[8px]",arrowDirectionBottom:"-bottom-[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",content:"last-child:mb-0",notCallout:"absolute z-50",closeBtn:`${o.medium} ${t.pill} ${i.pill} justify-self-end -mr-8 ml-8`};import{ifDefined as a}from"lit/directives/if-defined.js";import{classMap as D}from"lit/directives/class-map.js";function p(d){let l={};for(let[n,s]of Object.entries(d))for(let $ of n.split(" "))l[$]=s;return D(l)}var u=class extends k{constructor(){super(),this.type="text"}get _inputStyles(){return p({[b.default]:!0,[b.invalid]:this.invalid,[b.disabled]:this.disabled,[b.readOnly]:this.readOnly,[b.suffix]:this._hasSuffix,[b.prefix]:this._hasPrefix})}get _helpTextStyles(){return p({[m.helpText]:!0,[m.helpTextInvalid]:this.invalid})}get _labelStyles(){return p({[g.label]:!0,[g.labelInvalid]:this.invalid})}get _label(){if(this.label)return v`<label for="${this._id}" class=${this._labelStyles}>${this.label}</label>`}get _helpId(){if(this.helpText)return`${this._id}__hint`}get _id(){return"textfield"}get _error(){if(this.invalid&&this._helpId)return this._helpId}handler(l){let{name:n,value:s}=l.target,$=new CustomEvent(l.type,{detail:{name:n,value:s,target:l.target}});this.dispatchEvent($)}prefixSlotChange(l){this.renderRoot.querySelector("slot[name=prefix]").assignedElements().length&&(this._hasPrefix=!0)}suffixSlotChange(l){this.renderRoot.querySelector("slot[name=suffix]").assignedElements().length&&(this._hasSuffix=!0)}render(){return v`
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+
+// packages/textfield/index.js
+import { css, html } from "lit";
+import WarpElement from "@warp-ds/elements-core";
+
+// node_modules/.pnpm/@warp-ds+css@1.4.2/node_modules/@warp-ds/css/component-classes/index.js
+var box = {
+  box: "group block relative break-words last-child:mb-0 p-16 rounded-8",
+  // 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"
+};
+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,
+  expandableBleed: box.bleed,
+  chevron: "inline-block align-middle i-text-$color-expandable-icon",
+  chevronNonBox: "ml-8",
+  chevronBox: "",
+  chevronTransform: "transform transition-transform transform-gpu ease-in-out",
+  chevronExpand: "-rotate-180",
+  chevronCollapse: "rotate-180",
+  elementsTransformChevronDownPart: "part-[w-icon-chevron-down-16-part]:transform part-[w-icon-chevron-down-16-part]:transition-transform part-[w-icon-chevron-down-16-part]:transform-gpu part-[w-icon-chevron-down-16-part]:ease-in-out",
+  elementsChevronDownExpandPart: "part-[w-icon-chevron-down-16-part]:-rotate-180",
+  elementsTransformChevronUpPart: "part-[w-icon-chevron-up-16-part]:transform part-[w-icon-chevron-up-16-part]:transition-transform part-[w-icon-chevron-up-16-part]:transform-gpu part-[w-icon-chevron-up-16-part]:ease-in-out",
+  elementsChevronUpCollapsePart: "part-[w-icon-chevron-up-16-part]:rotate-180",
+  expansion: "overflow-hidden",
+  expansionNotExpanded: "h-0 invisible",
+  button: buttonReset + " hover:underline focus-visible:underline",
+  buttonBox: "w-full text-left relative inline-flex items-center justify-between " + box.box,
+  paddingTop: "pt-0",
+  title: "flex w-full justify-between items-center",
+  titleType: "h4"
+};
+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"
+};
+var buttonTypes = {
+  primary: `border-0 rounded-8 ${buttonDefaultStyling}`,
+  secondary: `border-2 rounded-8 ${buttonDefaultStyling}`,
+  utility: `border rounded-4 ${buttonDefaultStyling}`,
+  negative: `border-0 rounded-8 ${buttonDefaultStyling}`,
+  pill: `p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${buttonDefaultStyling}`,
+  link: `bg-transparent focusable ease-in-out inline active:underline hover:underline ${buttonColors.link}`
+};
+var buttonSizes = {
+  xsmall: "py-6 px-16",
+  small: "py-8 px-16",
+  medium: "py-10 px-14",
+  large: "py-12 px-16",
+  utility: "py-[11px] px-[15px]",
+  smallUtility: "py-[7px] px-[15px]",
+  pill: "min-h-[44px] min-w-[44px]",
+  pillSmall: "min-h-32 min-w-32",
+  link: "p-0"
+};
+var buttonTextSizes = {
+  medium: "text-m leading-[24]",
+  xsmall: "text-xs"
+};
+var buttonVariants = {
+  inProgress: `border-transparent animate-inprogress pointer-events-none ${buttonColors.loading}`,
+  // .button--in-progress, a.button--in-progress:visited
+  quiet: `border-0 rounded-8 ${buttonDefaultStyling}`,
+  utilityQuiet: `border-0 rounded-4 ${buttonDefaultStyling}`,
+  negativeQuiet: `border-0 rounded-8 ${buttonDefaultStyling}`,
+  isDisabled: `font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${buttonColors.disabled}`
+  // .button:disabled, .button--is-disabled
+};
+var button = {
+  // Buttontypes
+  secondary: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`,
+  // .button--secondary, .button--default, .button
+  secondaryHref: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`,
+  secondaryDisabled: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,
+  secondarySmall: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonColors.secondary}`,
+  secondarySmallDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,
+  secondaryQuiet: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,
+  secondaryQuietDisabled: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,
+  secondarySmallQuiet: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,
+  secondarySmallQuietDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,
+  secondaryLoading: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.inProgress}`,
+  secondarySmallLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall}  ${buttonTypes.secondary} ${buttonVariants.inProgress}`,
+  secondarySmallQuietLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,
+  secondaryQuietLoading: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,
+  primary: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.primary} ${buttonColors.primary}`,
+  // .button--primary, .button--cta
+  primaryDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.isDisabled} ${buttonTypes.primary}`,
+  primarySmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.primary} ${buttonColors.primary}`,
+  primarySmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.isDisabled} ${buttonTypes.primary} `,
+  primaryQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,
+  primaryQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,
+  primarySmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,
+  primarySmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,
+  primaryLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonTypes.primary}`,
+  primarySmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall}  ${buttonVariants.inProgress} ${buttonTypes.primary}`,
+  primarySmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress} ${buttonTypes.primary}`,
+  primaryQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,
+  utility: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonColors.utility}`,
+  // .button--utility
+  utilityDisabled: `${buttonSizes.utility} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.isDisabled}`,
+  utilityQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`,
+  // .button--utility-flat
+  utilityQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`,
+  utilitySmall: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonColors.utility}`,
+  utilitySmallDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.isDisabled}`,
+  utilitySmallQuiet: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonColors.utilityQuiet}`,
+  utilitySmallQuietDisabled: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.utilityQuiet} ${buttonVariants.isDisabled}`,
+  utilityLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.utility} ${buttonVariants.inProgress}`,
+  utilitySmallLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonTypes.utility} ${buttonVariants.inProgress}`,
+  utilityQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`,
+  utilitySmallQuietLoading: `${buttonSizes.smallUtility} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonVariants.utilityQuiet}`,
+  negative: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonColors.destructive}`,
+  // .button--destructive
+  negativeDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.isDisabled}`,
+  negativeQuiet: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`,
+  // .button--destructive-flat
+  negativeQuietDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet}${buttonVariants.isDisabled}`,
+  negativeSmall: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonColors.destructive}`,
+  negativeSmallDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonTypes.negative} ${buttonVariants.isDisabled}`,
+  negativeSmallQuiet: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonColors.negativeQuiet}`,
+  negativeSmallQuietDisabled: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.isDisabled}`,
+  negativeLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.negative} ${buttonVariants.inProgress}`,
+  negativeSmallLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.inProgress} ${buttonTypes.negative}`,
+  negativeQuietLoading: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.negativeQuiet} ${buttonTypes.negative} ${buttonVariants.inProgress}`,
+  negativeSmallQuietLoading: `${buttonSizes.small} ${buttonTextSizes.xsmall} ${buttonVariants.negativeQuiet} ${buttonVariants.inProgress}`,
+  pill: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill}`,
+  // .button--pill
+  pillSmall: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonColors.pill}`,
+  pillLoading: `${buttonSizes.pill} ${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonVariants.inProgress}`,
+  pillSmallLoading: `${buttonSizes.pillSmall} ${buttonTextSizes.xsmall} ${buttonTypes.pill} ${buttonVariants.inProgress}`,
+  link: `${buttonSizes.link} ${buttonTextSizes.medium} ${buttonTypes.link}`,
+  linkSmall: `${buttonSizes.link} ${buttonTextSizes.xsmall} ${buttonTypes.link}`,
+  linkAsButton: "inline-block hover:no-underline text-center",
+  a11y: "sr-only",
+  fullWidth: "w-full max-w-full",
+  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",
+  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",
+  transitionTitleCenter: "justify-self-center",
+  transitionTitleColSpan: "col-span-2",
+  title: "-mt-4 sm:-mt-8 h-40 sm:h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-center px-16 sm:px-32 border-b sm:border-b-0 shrink-0",
+  titleText: "mb-0 h4 sm:h3",
+  titleButton: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} sm:min-h-[44px] sm:min-w-[44px] min-h-[32px] min-w-[32px]`,
+  titleButtonLeft: "-ml-8 sm:-ml-12 justify-self-start",
+  titleButtonRight: "-mr-8 sm:-mr-12 justify-self-end",
+  titleButtonIcon: "h-16 w-16 sm:h-24 sm:w-24",
+  titleButtonIconRotated: "transform rotate-90"
+};
+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",
+  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",
+  wrapper: "relative",
+  suffix: "pr-40",
+  prefix: "pl-40"
+};
+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"
+};
+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 ";
+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"
+};
+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"
+};
+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`,
+  buttonOrLink: "bg-transparent focusable",
+  buttonOrLinkStretch: "inset-0 absolute"
+};
+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",
+  arrowBase: "absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform",
+  arrowDirectionLeft: "-left-[8px]",
+  arrowDirectionRight: "-right-[8px]",
+  arrowDirectionBottom: "-bottom-[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",
+  content: "last-child:mb-0",
+  notCallout: "absolute z-50",
+  closeBtn: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} justify-self-end -mr-8 ml-8`
+};
+
+// packages/textfield/index.js
+import { ifDefined } from "lit/directives/if-defined.js";
+
+// packages/utils/index.js
+import { classMap } from "lit/directives/class-map.js";
+function fclasses(definition) {
+  const defn = {};
+  for (const [key, value] of Object.entries(definition)) {
+    for (const className of key.split(" ")) {
+      defn[className] = value;
+    }
+  }
+  return classMap(defn);
+}
+
+// packages/textfield/index.js
+var WarpTextField = class extends WarpElement {
+  constructor() {
+    super();
+    this.type = "text";
+  }
+  get _inputStyles() {
+    return fclasses({
+      [input.default]: true,
+      [input.invalid]: this.invalid,
+      [input.disabled]: this.disabled,
+      [input.readOnly]: this.readOnly,
+      [input.suffix]: this._hasSuffix,
+      // we style input with prefix here because we cannot use
+      // arbitrary values with commas in UnoCSS like pl-[var(--w-prefix-width, 40px)]
+      "warp-input-with-prefix": this._hasPrefix
+    });
+  }
+  get _helpTextStyles() {
+    return fclasses({
+      [helpText.helpText]: true,
+      [helpText.helpTextInvalid]: this.invalid
+    });
+  }
+  get _labelStyles() {
+    return fclasses({
+      [label.label]: true,
+      [label.labelInvalid]: this.invalid
+    });
+  }
+  get _label() {
+    if (this.label) {
+      return html`<label for="${this._id}" class=${this._labelStyles}>${this.label}</label>`;
+    }
+  }
+  get _helpId() {
+    if (this.helpText)
+      return `${this._id}__hint`;
+  }
+  get _id() {
+    return "textfield";
+  }
+  get _error() {
+    if (this.invalid && this._helpId)
+      return this._helpId;
+  }
+  handler(e) {
+    const { name, value } = e.target;
+    const event = new CustomEvent(e.type, {
+      detail: {
+        name,
+        value,
+        target: e.target
+      }
+    });
+    this.dispatchEvent(event);
+  }
+  prefixSlotChange(e) {
+    const el = this.renderRoot.querySelector("slot[name=prefix]");
+    const affixes = el.assignedElements();
+    if (affixes.length)
+      this._hasPrefix = true;
+  }
+  suffixSlotChange(e) {
+    const el = this.renderRoot.querySelector("slot[name=suffix]");
+    const affixes = el.assignedElements();
+    if (affixes.length)
+      this._hasSuffix = true;
+  }
+  render() {
+    return html`
       ${this._label}
-      <div class="${b.wrapper}">
+      <div class="${input.wrapper}">
         <slot @slotchange="${this.prefixSlotChange}" name="prefix"></slot>
         <input
           class="${this._inputStyles}"
           type="${this.type}"
-          min="${a(this.min)}"
-          max="${a(this.max)}"
-          size="${a(this.size)}"
-          minlength="${a(this.minLength)}"
-          maxlength="${a(this.maxLength)}"
-          name="${a(this.name)}"
-          pattern="${a(this.pattern)}"
-          placeholder="${a(this.placeholder)}"
-          value="${a(this.value)}"
-          aria-describedby="${a(this._helpId)}"
-          aria-errormessage="${a(this._error)}"
-          aria-invalid="${a(this.invalid)}"
+          min="${ifDefined(this.min)}"
+          max="${ifDefined(this.max)}"
+          size="${ifDefined(this.size)}"
+          minlength="${ifDefined(this.minLength)}"
+          maxlength="${ifDefined(this.maxLength)}"
+          name="${ifDefined(this.name)}"
+          pattern="${ifDefined(this.pattern)}"
+          placeholder="${ifDefined(this.placeholder)}"
+          value="${ifDefined(this.value)}"
+          aria-describedby="${ifDefined(this._helpId)}"
+          aria-errormessage="${ifDefined(this._error)}"
+          aria-invalid="${ifDefined(this.invalid)}"
           id="${this._id}"
           ?disabled="${this.disabled}"
           ?readonly="${this.readOnly}"
@@ -27,13 +353,53 @@ var y=Object.defineProperty;var w=(d,l,n)=>l in d?y(d,l,{enumerable:!0,configura
         />
         <slot @slotchange="${this.suffixSlotChange}" name="suffix"></slot>
       </div>
-      ${this.helpText&&v`<div class="${this._helpTextStyles}" id="${this._helpId}">${this.helpText}</div>`}
-    `}};x(u,"properties",{disabled:{type:Boolean},invalid:{type:Boolean},id:{type:String},label:{type:String},helpText:{type:String,attribute:"help-text"},size:{type:String},max:{type:Number},min:{type:Number},minLength:{type:Number,attribute:"min-length"},maxLength:{type:Number,attribute:"max-length"},name:{type:String},pattern:{type:String},placeholder:{type:String},readOnly:{type:Boolean,attribute:"read-only"},required:{type:Boolean},type:{type:String},value:{type:String},_hasPrefix:{state:!0},_hasSuffix:{state:!0}}),x(u,"styles",[k.styles,L`
+      ${this.helpText && html`<div class="${this._helpTextStyles}" id="${this._helpId}">${this.helpText}</div>`}
+    `;
+  }
+};
+__publicField(WarpTextField, "properties", {
+  disabled: { type: Boolean },
+  invalid: { type: Boolean },
+  id: { type: String },
+  label: { type: String },
+  helpText: { type: String, attribute: "help-text" },
+  size: { type: String },
+  max: { type: Number },
+  min: { type: Number },
+  minLength: { type: Number, attribute: "min-length" },
+  maxLength: { type: Number, attribute: "max-length" },
+  name: { type: String },
+  pattern: { type: String },
+  placeholder: { type: String },
+  readOnly: { type: Boolean, attribute: "read-only" },
+  required: { type: Boolean },
+  type: { type: String },
+  value: { type: String },
+  _hasPrefix: { state: true },
+  _hasSuffix: { state: true }
+});
+// Slotted elements remain in lightDOM which allows for control of their style outside of shadowDOM.
+// ::slotted([Simple Selector]) confirms to Specificity rules, but (being simple) does not add weight to lightDOM skin selectors,
+// so never gets higher Specificity. Thus in order to overwrite style linked within shadowDOM, we need to use !important.
+// https://stackoverflow.com/a/61631668
+__publicField(WarpTextField, "styles", [
+  WarpElement.styles,
+  css`
       :host {
         display: block;
       }
       ::slotted(:last-child) {
         margin-bottom: 0px !important;
       }
-    `]);customElements.get("w-textfield")||customElements.define("w-textfield",u);export{u as WarpTextField};
+      .warp-input-with-prefix {
+        padding-left:var(--w-prefix-width, 40px);
+      }
+    `
+]);
+if (!customElements.get("w-textfield")) {
+  customElements.define("w-textfield", WarpTextField);
+}
+export {
+  WarpTextField
+};
 //# sourceMappingURL=index.js.map