@warp-ds/elements 2.3.0-next.3 → 2.3.0-next.30

package/dist/packages/textarea/textarea.d.ts

@@ -0,0 +1,49 @@
+import { LitElement, PropertyValues } from 'lit';
+declare const WarpTextarea_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
+/**
+ * A single line text input element.
+ *
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-textfield--docs)
+ */
+declare class WarpTextarea extends WarpTextarea_base {
+    #private;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    disabled: boolean;
+    invalid: boolean;
+    label: string;
+    helpText: string;
+    maxRows: number;
+    minRows: number;
+    name: string;
+    placeholder: string;
+    /** @deprecated Use the native readonly attribute instead. Here for API consistency with `w-textfield`. */
+    readOnly: boolean;
+    readonly: boolean;
+    required: boolean;
+    value: string;
+    optional: boolean;
+    minHeight: number;
+    maxHeight: number;
+    updated(changedProperties: PropertyValues<this>): void;
+    resetFormControl(): void;
+    static styles: import("lit").CSSResult[];
+    /** @internal */
+    get _textareaStyles(): string;
+    /** @internal */
+    get _helptextstyles(): string;
+    /** @internal */
+    get _helpId(): string;
+    /** @internal */
+    get _id(): string;
+    /** @internal */
+    get _error(): string;
+    connectedCallback(): Promise<void>;
+    handler(e: InputEvent): void;
+    render(): import("lit").TemplateResult<1>;
+}
+export { WarpTextarea };

package/dist/packages/{rip-and-tear-radio/radio.stories.js → textarea/textarea.js}

@@ -1,121 +1,13 @@
-var X=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var V=i=>{throw TypeError(i)};var n=(i,o,e,r)=>{for(var t=r>1?void 0:r?P(o,e):o,a=i.length-1,s;a>=0;a--)(s=i[a])&&(t=(r?s(o,e,t):s(t))||t);return r&&t&&X(o,e,t),t};var C=(i,o,e)=>o.has(i)||V("Cannot "+e);var S=(i,o,e)=>(C(i,o,"read from private field"),e?e.call(i):o.get(i)),A=(i,o,e)=>o.has(i)?V("Cannot add the same private member more than once"):o instanceof WeakSet?o.add(i):o.set(i,e),R=(i,o,e,r)=>(C(i,o,"write to private field"),r?r.call(i,e):o.set(i,e),e);import{html as ee}from"lit";import{html as J}from"lit";import{property as w,state as D}from"lit/decorators.js";import{isServer as E}from"lit";import{property as m}from"lit/decorators.js";import{LitElement as Z,unsafeCSS as $}from"lit";import{property as T}from"lit/decorators.js";import{css as B}from"lit";var L=B`
-  :host {
-    box-sizing: border-box !important;
-  }
-
-  :host *,
-  :host *::before,
-  :host *::after {
-    box-sizing: inherit !important;
-  }
-`;var f,g=class extends Z{constructor(){super();A(this,f,!1);this.initialReflectedProperties=new Map;this.customStates={set:(e,r)=>{var t;(t=this.internals)!=null&&t.states&&(r?this.internals.states.add(e):this.internals.states.delete(e))},has:e=>{var r;return(r=this.internals)!=null&&r.states?this.internals.states.has(e):!1}};try{this.internals=this.attachInternals()}catch(r){console.error("Element internals are not supported in your browser. Consider using a polyfill")}this.customStates.set("wa-defined",!0);let e=this.constructor;for(let[r,t]of e.elementProperties)t.default==="inherit"&&t.initial!==void 0&&typeof r=="string"&&this.customStates.set(`initial-${r}-${t.initial}`,!0)}static get styles(){let e=Array.isArray(this.css)?this.css:this.css?[this.css]:[];return[L,...e].map(r=>typeof r=="string"?$(r):r)}attributeChangedCallback(e,r,t){S(this,f)||(this.constructor.elementProperties.forEach((a,s)=>{a.reflect&&this[s]!=null&&this.initialReflectedProperties.set(s,this[s])}),R(this,f,!0)),super.attributeChangedCallback(e,r,t)}willUpdate(e){super.willUpdate(e),this.initialReflectedProperties.forEach((r,t)=>{e.has(t)&&this[t]==null&&(this[t]=r)})}relayNativeEvent(e,r){e.stopImmediatePropagation(),this.dispatchEvent(new e.constructor(e.type,{...e,...r}))}};f=new WeakMap,n([T()],g.prototype,"dir",2),n([T()],g.prototype,"lang",2);var I=()=>({observedAttributes:["custom-error"],checkValidity(i){let o={message:"",isValid:!0,invalidKeys:[]};return i.customError&&(o.message=i.customError,o.isValid=!1,o.invalidKeys=["customError"]),o}});var x=class extends Event{constructor(){super("w-invalid",{bubbles:!0,cancelable:!1,composed:!0})}};var c=class extends g{constructor(){super();this.name=null;this.disabled=!1;this.required=!1;this.assumeInteractionOn=["input"];this.validators=[];this.valueHasChanged=!1;this.hasInteracted=!1;this.customError=null;this.emittedEvents=[];this.emitInvalid=e=>{e.target===this&&(this.hasInteracted=!0,this.dispatchEvent(new x))};this.handleInteraction=e=>{var t;let r=this.emittedEvents;r.includes(e.type)||r.push(e.type),r.length===((t=this.assumeInteractionOn)==null?void 0:t.length)&&(this.hasInteracted=!0)};E||this.addEventListener("invalid",this.emitInvalid)}static get validators(){return[I()]}static get observedAttributes(){let e=new Set(super.observedAttributes||[]);for(let r of this.validators)if(r.observedAttributes)for(let t of r.observedAttributes)e.add(t);return[...e]}connectedCallback(){super.connectedCallback(),this.updateValidity(),this.assumeInteractionOn.forEach(e=>{this.addEventListener(e,this.handleInteraction)})}firstUpdated(...e){super.firstUpdated(...e),this.updateValidity()}willUpdate(e){if(!E&&e.has("customError")&&(this.customError||(this.customError=null),this.setCustomValidity(this.customError||"")),e.has("value")||e.has("disabled")){let r=this.value;if(Array.isArray(r)){if(this.name){let t=new FormData;for(let a of r)t.append(this.name,a);this.setValue(t,t)}}else this.setValue(r,r)}e.has("disabled")&&(this.customStates.set("disabled",this.disabled),(this.hasAttribute("disabled")||!E&&!this.matches(":disabled"))&&this.toggleAttribute("disabled",this.disabled)),this.updateValidity(),super.willUpdate(e)}get labels(){return this.internals.labels}getForm(){return this.internals.form}get validity(){return this.internals.validity}get willValidate(){return this.internals.willValidate}get validationMessage(){return this.internals.validationMessage}checkValidity(){return this.updateValidity(),this.internals.checkValidity()}reportValidity(){return this.updateValidity(),this.hasInteracted=!0,this.internals.reportValidity()}get validationTarget(){return this.input||void 0}setValidity(...e){let r=e[0],t=e[1],a=e[2];a||(a=this.validationTarget),this.internals.setValidity(r,t,a||void 0),this.requestUpdate("validity"),this.setCustomStates()}setCustomStates(){let e=!!this.required,r=this.internals.validity.valid,t=this.hasInteracted;this.customStates.set("required",e),this.customStates.set("optional",!e),this.customStates.set("invalid",!r),this.customStates.set("valid",r),this.customStates.set("user-invalid",!r&&t),this.customStates.set("user-valid",r&&t)}setCustomValidity(e){if(!e){this.customError=null,this.setValidity({});return}this.customError=e,this.setValidity({customError:!0},e,this.validationTarget)}formResetCallback(){this.resetValidity(),this.hasInteracted=!1,this.valueHasChanged=!1,this.emittedEvents=[],this.updateValidity()}formDisabledCallback(e){this.disabled=e,this.updateValidity()}formStateRestoreCallback(e,r){this.value=e,r==="restore"&&this.resetValidity(),this.updateValidity()}setValue(...e){let[r,t]=e;this.internals.setFormValue(r,t)}get allValidators(){let e=this.constructor.validators||[],r=this.validators||[];return[...e,...r]}resetValidity(){this.setCustomValidity(""),this.setValidity({})}updateValidity(){if(this.disabled||this.hasAttribute("disabled")||!this.willValidate){this.resetValidity();return}let e=this.allValidators;if(!(e!=null&&e.length))return;let r={customError:!!this.customError},t=this.validationTarget||this.input||void 0,a="";for(let s of e){let{isValid:l,message:v,invalidKeys:h}=s.checkValidity(this);l||(a||(a=v),(h==null?void 0:h.length)>=0&&h.forEach(k=>r[k]=!0))}a||(a=this.validationMessage),this.setValidity(r,a,t)}};c.formAssociated=!0,n([m({reflect:!0})],c.prototype,"name",2),n([m({type:Boolean})],c.prototype,"disabled",2),n([m({state:!0,attribute:!1})],c.prototype,"valueHasChanged",2),n([m({state:!0,attribute:!1})],c.prototype,"hasInteracted",2),n([m({attribute:"custom-error",reflect:!0})],c.prototype,"customError",2),n([m({attribute:!1,state:!0,type:Object})],c.prototype,"validity",1);import{css as K}from"lit";var M=K`
-  [part~='label'] {
-    display: block;
-    font-size: var(--w-font-size-m);
-    line-height: var(--w-line-height-m);
-    user-select: none;
-    cursor: pointer;
-  }
-  .wrapper {
-    display: grid;
-    grid-template-columns: 2rem max-content;
-    gap: 8px;
-    padding: 0.2rem 0;
-  }
-  .hide-toggle {
-    position: absolute;
-    padding: 0;
-    margin: 0;
-    opacity: 0;
-    pointer-events: none;
-    inset: 0;
-  }
-  .control {
-    display: block;
-    border-width: 1px;
-    transition-property: all;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-    cursor: pointer;
-    appearance: none;
-    user-select: none;
-    flex-shrink: 0;
-    height: 2rem;
-    width: 2rem;
-    background-color: var(--w-s-color-background);
-    border-color: var(--w-s-color-border);
-    color: var(--w-s-color-icon-inverted);
-    font-weight: 700;
-    text-align: center;
-    line-height: var(--w-line-height-xs);
-    font-size: var(--w-font-size-m);
-  }
-  .checkbox {
-    position: relative;
-  }
-  :host([type='checkbox']) .control {
-    border-radius: 2px;
-  }
-  .checkbox:has(:checked, :indeterminate),
-  :host([type='checkbox'][checked]) .control,
-  :host([type='checkbox'][indeterminate]) .control {
-    background-color: var(--w-s-color-background-primary);
-    border-color: var(--w-s-color-border-primary);
-  }
-  .checkbox:has(:checked),
-  :host([type='checkbox'][checked]) .control {
-    background-image: var(--w-icon-toggle-checked);
-    background-position: center;
-  }
-  :host([type='radio']) .control,
-  :host([role='radio']) .control {
-    border-radius: 50%;
-  }
-  :host([type='radio'][checked]) .control,
-  /* :state is newly available, so we set an attribute in radio for compat */
-  :host([role='radio'][checked-ui]) .control,
-  :host([role='radio']:state(checked)) .control {
-    border-color: var(--w-s-color-border-selected);
-    border-width: 0.6rem;
-  }
-  .checkbox:has(:invalid),
-  :host([invalid]) .control {
-    border-color: var(--w-s-color-border-negative) !important;
-  }
-  /* handles invalid checkbox state inside w-checkbox */
-  .checkbox:has(:checked, :indeterminate):has(:invalid),
-  /* allows invalid to be set on the w-checkbox element */
-  :host([invalid]) .checkbox:has(:checked, :indeterminate),
-  :host([type='checkbox'][invalid][checked]) .control,
-  :host([type='checkbox'][invalid][indeterminate]) .control {
-    background-color: var(--w-s-color-background-negative);
-  }
+var $e=Object.create;var W=Object.defineProperty;var be=Object.getOwnPropertyDescriptor;var Le=Object.getOwnPropertyNames;var Te=Object.getPrototypeOf,je=Object.prototype.hasOwnProperty;var ue=o=>{throw TypeError(o)};var pe=(o,e)=>()=>(e||o((e={exports:{}}).exports,e),e.exports);var Ye=(o,e,r,t)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of Le(e))!je.call(o,a)&&a!==r&&W(o,a,{get:()=>e[a],enumerable:!(t=be(e,a))||t.enumerable});return o};var De=(o,e,r)=>(r=o!=null?$e(Te(o)):{},Ye(e||!o||!o.__esModule?W(r,"default",{value:o,enumerable:!0}):r,o));var v=(o,e,r,t)=>{for(var a=t>1?void 0:t?be(e,r):e,l=o.length-1,n;l>=0;l--)(n=o[l])&&(a=(t?n(e,r,a):n(a))||a);return t&&a&&W(e,r,a),a};var ee=(o,e,r)=>e.has(o)||ue("Cannot "+r);var ge=(o,e,r)=>(ee(o,e,"read from private field"),r?r.call(o):e.get(o)),re=(o,e,r)=>e.has(o)?ue("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(o):e.set(o,r),me=(o,e,r,t)=>(ee(o,e,"write to private field"),t?t.call(o,r):e.set(o,r),r),oe=(o,e,r)=>(ee(o,e,"access private method"),r);var ve=pe(V=>{"use strict";Object.defineProperty(V,"__esModule",{value:!0});V.errorMessages=V.ErrorType=void 0;var $;(function(o){o.MalformedUnicode="MALFORMED_UNICODE",o.MalformedHexadecimal="MALFORMED_HEXADECIMAL",o.CodePointLimit="CODE_POINT_LIMIT",o.OctalDeprecation="OCTAL_DEPRECATION",o.EndOfString="END_OF_STRING"})($=V.ErrorType||(V.ErrorType={}));V.errorMessages=new Map([[$.MalformedUnicode,"malformed Unicode character escape sequence"],[$.MalformedHexadecimal,"malformed hexadecimal character escape sequence"],[$.CodePointLimit,"Unicode codepoint must not be greater than 0x10FFFF in escape sequence"],[$.OctalDeprecation,'"0"-prefixed octal literals and octal escape sequences are deprecated; for octal literals use the "0o" prefix instead'],[$.EndOfString,"malformed escape sequence at end of string"]])});var xe=pe(M=>{"use strict";Object.defineProperty(M,"__esModule",{value:!0});M.unraw=M.errorMessages=M.ErrorType=void 0;var f=ve();Object.defineProperty(M,"ErrorType",{enumerable:!0,get:function(){return f.ErrorType}});Object.defineProperty(M,"errorMessages",{enumerable:!0,get:function(){return f.errorMessages}});function Re(o){return!o.match(/[^a-f0-9]/i)?parseInt(o,16):NaN}function Z(o,e,r){let t=Re(o);if(Number.isNaN(t)||r!==void 0&&r!==o.length)throw new SyntaxError(f.errorMessages.get(e));return t}function He(o){let e=Z(o,f.ErrorType.MalformedHexadecimal,2);return String.fromCharCode(e)}function fe(o,e){let r=Z(o,f.ErrorType.MalformedUnicode,4);if(e!==void 0){let t=Z(e,f.ErrorType.MalformedUnicode,4);return String.fromCharCode(r,t)}return String.fromCharCode(r)}function Ue(o){return o.charAt(0)==="{"&&o.charAt(o.length-1)==="}"}function Xe(o){if(!Ue(o))throw new SyntaxError(f.errorMessages.get(f.ErrorType.MalformedUnicode));let e=o.slice(1,-1),r=Z(e,f.ErrorType.MalformedUnicode);try{return String.fromCodePoint(r)}catch(t){throw t instanceof RangeError?new SyntaxError(f.errorMessages.get(f.ErrorType.CodePointLimit)):t}}function Ze(o,e=!1){if(e)throw new SyntaxError(f.errorMessages.get(f.ErrorType.OctalDeprecation));let r=parseInt(o,8);return String.fromCharCode(r)}var qe=new Map([["b","\b"],["f","\f"],["n",`
+`],["r","\r"],["t","	"],["v","\v"],["0","\0"]]);function Be(o){return qe.get(o)||o}var Ge=/\\(?:(\\)|x([\s\S]{0,2})|u(\{[^}]*\}?)|u([\s\S]{4})\\u([^{][\s\S]{0,3})|u([\s\S]{0,4})|([0-3]?[0-7]{1,2})|([\s\S])|$)/g;function we(o,e=!1){return o.replace(Ge,function(r,t,a,l,n,i,d,b,w){if(t!==void 0)return"\\";if(a!==void 0)return He(a);if(l!==void 0)return Xe(l);if(n!==void 0)return fe(n,i);if(d!==void 0)return fe(d);if(b==="0")return"\0";if(b!==void 0)return Ze(b,!e);if(w!==void 0)return Be(w);throw new SyntaxError(f.errorMessages.get(f.ErrorType.EndOfString))})}M.unraw=we;M.default=we});var X=function(){for(var o=[],e=arguments.length;e--;)o[e]=arguments[e];return o.reduce(function(r,t){return r.concat(typeof t=="string"?t:Array.isArray(t)?X.apply(void 0,t):typeof t=="object"&&t?Object.keys(t).map(function(a){return t[a]?a:""}):"")},[]).join(" ")};var _e=De(xe(),1);var O=o=>typeof o=="string",Je=o=>typeof o=="function",ke=new Map,Ce="en";function ne(o){return[...Array.isArray(o)?o:[o],Ce]}function se(o,e,r){let t=ne(o);r||(r="default");let a;if(typeof r=="string")switch(a={day:"numeric",month:"short",year:"numeric"},r){case"full":a.weekday="long";case"long":a.month="long";break;case"short":a.month="numeric";break}else a=r;return q(()=>B("date",t,r),()=>new Intl.DateTimeFormat(t,a)).format(O(e)?new Date(e):e)}function Ke(o,e,r){let t;if(r||(r="default"),typeof r=="string")switch(t={second:"numeric",minute:"numeric",hour:"numeric"},r){case"full":case"long":t.timeZoneName="short";break;case"short":delete t.second}else t=r;return se(o,e,t)}function te(o,e,r){let t=ne(o);return q(()=>B("number",t,r),()=>new Intl.NumberFormat(t,r)).format(e)}function ye(o,e,r,{offset:t=0,...a}){var i,d;let l=ne(o),n=e?q(()=>B("plural-ordinal",l),()=>new Intl.PluralRules(l,{type:"ordinal"})):q(()=>B("plural-cardinal",l),()=>new Intl.PluralRules(l,{type:"cardinal"}));return(d=(i=a[r])!=null?i:a[n.select(r-t)])!=null?d:a.other}function q(o,e){let r=o(),t=ke.get(r);return t||(t=e(),ke.set(r,t)),t}function B(o,e,r){let t=e.join("-");return`${o}-${t}-${JSON.stringify(r)}`}var ze=/\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/,Me="%__lingui_octothorpe__%",Qe=(o,e,r={})=>{let t=e||o,a=n=>typeof n=="object"?n:r[n],l=(n,i)=>{let d=Object.keys(r).length?a("number"):void 0,b=te(t,n,d);return i.replace(new RegExp(Me,"g"),b)};return{plural:(n,i)=>{let{offset:d=0}=i,b=ye(t,!1,n,i);return l(n-d,b)},selectordinal:(n,i)=>{let{offset:d=0}=i,b=ye(t,!0,n,i);return l(n-d,b)},select:We,number:(n,i)=>te(t,n,a(i)||{style:i}),date:(n,i)=>se(t,n,a(i)||i),time:(n,i)=>Ke(t,n,a(i)||i)}},We=(o,e)=>{var r;return(r=e[o])!=null?r:e.other};function er(o,e,r){return(t={},a)=>{let l=Qe(e,r,a),n=(d,b=!1)=>Array.isArray(d)?d.reduce((w,C)=>{if(C==="#"&&b)return w+Me;if(O(C))return w+C;let[A,y,F]=C,E={};y==="plural"||y==="selectordinal"||y==="select"?Object.entries(F).forEach(([P,L])=>{E[P]=n(L,y==="plural"||y==="selectordinal")}):E=F;let x;if(y){let P=l[y];x=P(t[A],E)}else x=t[A];return x==null?w:w+x},""):d,i=n(o);return O(i)&&ze.test(i)?(0,_e.unraw)(i):O(i)?i:i?String(i):""}}var rr=Object.defineProperty,or=(o,e,r)=>e in o?rr(o,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):o[e]=r,tr=(o,e,r)=>(or(o,typeof e!="symbol"?e+"":e,r),r),ae=class{constructor(){tr(this,"_events",{})}on(e,r){var a;var t;return(a=(t=this._events)[e])!=null||(t[e]=[]),this._events[e].push(r),()=>this.removeListener(e,r)}removeListener(e,r){let t=this._getListeners(e);if(!t)return;let a=t.indexOf(r);~a&&t.splice(a,1)}emit(e,...r){let t=this._getListeners(e);t&&t.map(a=>a.apply(this,r))}_getListeners(e){let r=this._events[e];return Array.isArray(r)?r:!1}},ar=Object.defineProperty,ir=(o,e,r)=>e in o?ar(o,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):o[e]=r,N=(o,e,r)=>(ir(o,typeof e!="symbol"?e+"":e,r),r),ie=class extends ae{constructor(e){var r;super(),N(this,"_locale",""),N(this,"_locales"),N(this,"_localeData",{}),N(this,"_messages",{}),N(this,"_missing"),N(this,"_messageCompiler"),N(this,"t",this._.bind(this)),e.missing!=null&&(this._missing=e.missing),e.messages!=null&&this.load(e.messages),e.localeData!=null&&this.loadLocaleData(e.localeData),(typeof e.locale=="string"||e.locales)&&this.activate((r=e.locale)!=null?r:Ce,e.locales)}get locale(){return this._locale}get locales(){return this._locales}get messages(){var e;return(e=this._messages[this._locale])!=null?e:{}}get localeData(){var e;return(e=this._localeData[this._locale])!=null?e:{}}_loadLocaleData(e,r){let t=this._localeData[e];t?Object.assign(t,r):this._localeData[e]=r}setMessagesCompiler(e){return this._messageCompiler=e,this}loadLocaleData(e,r){typeof e=="string"?this._loadLocaleData(e,r):Object.keys(e).forEach(t=>this._loadLocaleData(t,e[t])),this.emit("change")}_load(e,r){let t=this._messages[e];t?Object.assign(t,r):this._messages[e]=r}load(e,r){typeof e=="string"&&typeof r=="object"?this._load(e,r):Object.entries(e).forEach(([t,a])=>this._load(t,a)),this.emit("change")}loadAndActivate({locale:e,locales:r,messages:t}){this._locale=e,this._locales=r||void 0,this._messages[this._locale]=t,this.emit("change")}activate(e,r){this._locale=e,this._locales=r,this.emit("change")}_(e,r,t){if(!this.locale)throw new Error("Lingui: Attempted to call a translation function without setting a locale.\nMake sure to call `i18n.activate(locale)` before using Lingui functions.\nThis issue may also occur due to a race condition in your initialization logic.");let a=t==null?void 0:t.message;e||(e=""),O(e)||(r=e.values||r,a=e.message,e=e.id);let l=this.messages[e],n=l===void 0,i=this._missing;if(i&&n)return Je(i)?i(this._locale,e):i;n&&this.emit("missing",{id:e,locale:this._locale});let d=l||a||e;return O(d)&&(this._messageCompiler?d=this._messageCompiler(d):console.warn(`Uncompiled message detected! Message:
 
-  :host(:focus-visible) {
-    outline: none;
-  }
-  .checkbox:has(> input:focus-visible:not(:disabled)),
-  :host(:focus-visible) .control {
-    outline: 2px solid var(--w-s-color-border-focus);
-    outline-offset: var(--w-outline-offset, 1px);
-  }
+> ${d}
 
-  :host([type='radio'][disabled]) .control,
-  /* :state is newly available, so we set an attribute in radio for compat */
-  :host([role='radio'][disabled-ui]) .control,
-  :host([role='radio']:state(disabled)) .control,
-  :host([type='checkbox'][disabled]) .control,
-  .checkbox:has(> input:disabled) {
-    border-color: var(--w-s-color-border-disabled);
-    background-color: var(--w-s-color-background-disabled-subtle);
-  }
+That means you use raw catalog or your catalog doesn't have a translation for the message and fallback was used.
+ICU features such as interpolation and plurals will not work properly for that message. 
 
-  :host([type='checkbox'][disabled][checked]) .control,
-  :host([type='checkbox'][disabled][indeterminate]) .control,
-  .checkbox:has(:checked, :indeterminate):has(> input:disabled) {
-    background-color: var(--w-s-color-background-disabled);
-  }
-`;import{css as H}from"lit";var q=H`
+Please compile your catalog first. 
+`)),O(d)&&ze.test(d)?JSON.parse(`"${d}"`):O(d)?d:er(d,this._locale,this._locales)(r,t==null?void 0:t.formats)}date(e,r){return se(this._locales||this._locale,e,r)}number(e,r){return te(this._locales||this._locale,e,r)}};function nr(o={}){return new ie(o)}var Fe=nr();var h=function(o,e,r,t){if(r==="a"&&!t)throw new TypeError("Private accessor was defined without a getter");if(typeof e=="function"?o!==e||!t:!e.has(o))throw new TypeError("Cannot read private member from an object whose class did not declare it");return r==="m"?t:r==="a"?t.call(o):t?t.value:e.get(o)},g=function(o,e,r,t,a){if(t==="m")throw new TypeError("Private method is not writable");if(t==="a"&&!a)throw new TypeError("Private accessor was defined without a setter");if(typeof e=="function"?o!==e||!a:!e.has(o))throw new TypeError("Cannot write private member to an object whose class did not declare it");return t==="a"?a.call(o,r):a?a.value=r:e.set(o,r),r};function Ee(o){var e,r,t,a,l,n,i,d,b,w,C,A,y,F,E,x,P,L,J;class Ie extends o{constructor(...s){var c,p,m;super(...s),e.add(this),this.internals=this.attachInternals(),r.set(this,!1),t.set(this,!1),a.set(this,!1),l.set(this,void 0),n.set(this,void 0),i.set(this,!0),b.set(this,""),w.set(this,()=>{g(this,a,!0,"f"),g(this,r,!0,"f"),h(this,e,"m",x).call(this)}),C.set(this,()=>{g(this,r,!1,"f"),h(this,e,"m",P).call(this,this.shouldFormValueUpdate()?h(this,b,"f"):""),!this.validity.valid&&h(this,a,"f")&&g(this,t,!0,"f");let z=h(this,e,"m",x).call(this);this.validationMessageCallback&&this.validationMessageCallback(z?this.internals.validationMessage:"")}),A.set(this,()=>{var z;h(this,i,"f")&&this.validationTarget&&(this.internals.setValidity(this.validity,this.validationMessage,this.validationTarget),g(this,i,!1,"f")),g(this,a,!0,"f"),g(this,t,!0,"f"),h(this,e,"m",x).call(this),(z=this===null||this===void 0?void 0:this.validationMessageCallback)===null||z===void 0||z.call(this,this.showError?this.internals.validationMessage:"")}),y.set(this,void 0),F.set(this,!1),E.set(this,Promise.resolve()),(c=this.addEventListener)===null||c===void 0||c.call(this,"focus",h(this,w,"f")),(p=this.addEventListener)===null||p===void 0||p.call(this,"blur",h(this,C,"f")),(m=this.addEventListener)===null||m===void 0||m.call(this,"invalid",h(this,A,"f")),this.setValue(null)}static get formAssociated(){return!0}static get validators(){return this.formControlValidators||[]}static get observedAttributes(){let s=this.validators.map(m=>m.attribute).flat(),c=super.observedAttributes||[];return[...new Set([...c,...s])]}static getValidator(s){return this.validators.find(c=>c.attribute===s)||null}static getValidators(s){return this.validators.filter(c=>{var p;if(c.attribute===s||!((p=c.attribute)===null||p===void 0)&&p.includes(s))return!0})}get form(){return this.internals.form}get showError(){return h(this,e,"m",x).call(this)}checkValidity(){return this.internals.checkValidity()}get validity(){return this.internals.validity}get validationMessage(){return this.internals.validationMessage}attributeChangedCallback(s,c,p){var m;(m=super.attributeChangedCallback)===null||m===void 0||m.call(this,s,c,p);let j=this.constructor.getValidators(s);j!=null&&j.length&&this.validationTarget&&this.setValue(h(this,b,"f"))}setValue(s){var c;g(this,t,!1,"f"),(c=this.validationMessageCallback)===null||c===void 0||c.call(this,""),g(this,b,s,"f");let m=this.shouldFormValueUpdate()?s:null;this.internals.setFormValue(m),h(this,e,"m",P).call(this,m),this.valueChangedCallback&&this.valueChangedCallback(m),h(this,e,"m",x).call(this)}shouldFormValueUpdate(){return!0}get validationComplete(){return new Promise(s=>s(h(this,E,"f")))}formResetCallback(){var s,c;g(this,a,!1,"f"),g(this,t,!1,"f"),h(this,e,"m",x).call(this),(s=this.resetFormControl)===null||s===void 0||s.call(this),(c=this.validationMessageCallback)===null||c===void 0||c.call(this,h(this,e,"m",x).call(this)?this.validationMessage:"")}}return r=new WeakMap,t=new WeakMap,a=new WeakMap,l=new WeakMap,n=new WeakMap,i=new WeakMap,b=new WeakMap,w=new WeakMap,C=new WeakMap,A=new WeakMap,y=new WeakMap,F=new WeakMap,E=new WeakMap,e=new WeakSet,d=function(){let s=this.getRootNode(),c=`${this.localName}[name="${this.getAttribute("name")}"]`;return s.querySelectorAll(c)},x=function(){if(this.hasAttribute("disabled"))return!1;let s=h(this,t,"f")||h(this,a,"f")&&!this.validity.valid&&!h(this,r,"f");return s&&this.internals.states?this.internals.states.add("--show-error"):this.internals.states&&this.internals.states.delete("--show-error"),s},P=function(s){let c=this.constructor,p={},m=c.validators,z=[],j=m.some(_=>_.isValid instanceof Promise);h(this,F,"f")||(g(this,E,new Promise(_=>{g(this,y,_,"f")}),"f"),g(this,F,!0,"f")),h(this,l,"f")&&(h(this,l,"f").abort(),g(this,n,h(this,l,"f"),"f"));let Y=new AbortController;g(this,l,Y,"f");let D,he=!1;m.length&&(m.forEach(_=>{let K=_.key||"customError",I=_.isValid(this,s,Y.signal);I instanceof Promise?(z.push(I),I.then(Q=>{Q!=null&&(p[K]=!Q,D=h(this,e,"m",J).call(this,_,s),h(this,e,"m",L).call(this,p,D))})):(p[K]=!I,this.validity[K]!==!I&&(he=!0),!I&&!D&&(D=h(this,e,"m",J).call(this,_,s)))}),Promise.allSettled(z).then(()=>{var _;Y!=null&&Y.signal.aborted||(g(this,F,!1,"f"),(_=h(this,y,"f"))===null||_===void 0||_.call(this))}),(he||!j)&&h(this,e,"m",L).call(this,p,D))},L=function(s,c){if(this.validationTarget)this.internals.setValidity(s,c,this.validationTarget),g(this,i,!1,"f");else{if(this.internals.setValidity(s,c),this.internals.validity.valid)return;g(this,i,!0,"f")}},J=function(s,c){if(this.validityCallback){let p=this.validityCallback(s.key||"customError");if(p)return p}return s.message instanceof Function?s.message(this,c):s.message},Ie}import{html as G,LitElement as Ve,nothing as le}from"lit";import{property as k,state as Ne}from"lit/decorators.js";import{ifDefined as R}from"lit/directives/if-defined.js";import{css as Oe}from"lit";var Se=Oe`
   *,
   :before,
   :after {
@@ -388,7 +280,7 @@ var X=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var V=i=>{thro
   svg {
     pointer-events: none;
   }
-`,ye=H`*, :before, :after {
+`,mr=Oe`*, :before, :after {
             --w-rotate: 0;
             --w-rotate-x: 0;
             --w-rotate-y: 0;
@@ -2554,101 +2446,30 @@ var X=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var V=i=>{thro
                     display: none
                 }
             }
-        `;var b=class extends c{constructor(){super();this.checked=!1;this.forceDisabled=!1;this.form=null;this.appearance="default";this.size="medium";this.disabled=!1;this.handleClick=()=>{!this.disabled&&!this.forceDisabled&&(this.checked=!0)};this.addEventListener("click",this.handleClick)}connectedCallback(){super.connectedCallback(),this.setInitialAttributes()}setInitialAttributes(){this.setAttribute("role","radio"),this.tabIndex=0,this.setAttribute("aria-disabled",this.disabled||this.forceDisabled?"true":"false")}updated(e){if(super.updated(e),e.has("checked")&&(this.customStates.set("checked",this.checked),this[this.checked?"setAttribute":"removeAttribute"]("checked-ui",""),this.setAttribute("aria-checked",this.checked?"true":"false"),!this.disabled&&!this.forceDisabled&&(this.tabIndex=this.checked?0:-1)),e.has("disabled")||e.has("forceDisabled")){let r=this.disabled||this.forceDisabled;this.customStates.set("disabled",r),this[r?"setAttribute":"removeAttribute"]("disabled-ui",""),this.setAttribute("aria-disabled",r?"true":"false"),r?this.tabIndex=-1:this.tabIndex=this.checked?0:-1}}setValue(){}render(){return J`
-      <div class="wrapper">
-        <div part="control" class="control"></div>
-        <slot part="label" class="label"></slot>
-      </div>
-    `}};b.css=[q,M],n([D()],b.prototype,"checked",2),n([D()],b.prototype,"forceDisabled",2),n([w({reflect:!0})],b.prototype,"form",2),n([w({reflect:!0})],b.prototype,"value",2),n([w({reflect:!0})],b.prototype,"appearance",2),n([w({reflect:!0})],b.prototype,"size",2),n([w({type:Boolean})],b.prototype,"disabled",2);import{html as G}from"lit";import{property as u,query as W,state as F}from"lit/decorators.js";import{classMap as U}from"lit/directives/class-map.js";var Y="useandom-26T198340PX75pxJACKVERYMINDBUSHWOLF_GQZbfghjklqvwyzrict";var N=(i=21)=>{let o="",e=crypto.getRandomValues(new Uint8Array(i|=0));for(;i--;)o+=Y[e[i]&63];return o};function j(i=""){return`${i}${N()}`}import{css as Q}from"lit";var O=Q`
-  :host {
-    display: block;
-  }
-
-  .form-control {
-    position: relative;
-    border: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  .label {
-    font-size: var(--w-font-size-s);
-    line-height: var(--w-line-height-s);
-    font-weight: 700;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    font-smoothing: grayscale;
-    cursor: pointer;
-    padding-bottom: 0.4rem;
-    color: var(--w-s-color-text);
-    display: block;
-  }
-
-  .radio-group-required .label::after {
-    content: var(--wa-form-control-required-content);
-    margin-inline-start: var(--wa-form-control-required-content-offset);
-  }
-
-  .button-group {
-    display: flex;
-  }
-
-  [part~='form-control-input'] {
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-  }
-
-  /* Horizontal */
-  :host([orientation='horizontal']) [part~='form-control-input'] {
-    flex-direction: row;
-    gap: 1em;
-  }
-
-  /* Help text */
-  [part~='hint'] {
-    margin-block-start: 0.5em;
-  }
-
-  /* Radios have the "button" appearance */
-  :host fieldset.has-radio-buttons {
-    [part~='form-control-input'] {
-      gap: 0;
-    }
-  }
-`;var _=(i={})=>{let{validationElement:o,validationProperty:e}=i;o||(o=Object.assign(document.createElement("input"),{required:!0})),e||(e="value");let r={observedAttributes:["required"],message:o.validationMessage,checkValidity(t){var h;let a={message:"",isValid:!0,invalidKeys:[]};return((h=t.required)!=null?h:t.hasAttribute("required"))&&!t[e]&&(a.message=typeof r.message=="function"?r.message(t):r.message||"",a.isValid=!1,a.invalidKeys.push("valueMissing")),a}};return r};var y=class{constructor(o,...e){this.slotNames=[];this.handleSlotChange=o=>{let e=o.target;(this.slotNames.includes("[default]")&&!e.name||e.name&&this.slotNames.includes(e.name))&&this.host.requestUpdate()};(this.host=o).addController(this),this.slotNames=e}hasDefaultSlot(){return[...this.host.childNodes].some(o=>{var e;if(o.nodeType===Node.TEXT_NODE&&((e=o.textContent)==null?void 0:e.trim())!=="")return!0;if(o.nodeType===Node.ELEMENT_NODE){let r=o;if(r.tagName.toLowerCase()==="w-visually-hidden")return!1;if(!r.hasAttribute("slot"))return!0}return!1})}hasNamedSlot(o){return this.host.querySelector(`:scope > [slot="${o}"]`)!==null}test(o){return o==="[default]"?this.hasDefaultSlot():this.hasNamedSlot(o)}hostConnected(){var o;(o=this.host.shadowRoot)==null||o.addEventListener("slotchange",this.handleSlotChange)}hostDisconnected(){var o;(o=this.host.shadowRoot)==null||o.removeEventListener("slotchange",this.handleSlotChange)}};var d=class extends c{constructor(){super();this.hasSlotController=new y(this,"hint","label");this.hasRadioButtons=!1;this.label="";this.hint="";this.name=null;this.disabled=!1;this.orientation="vertical";this._value=null;this.defaultValue=this.getAttribute("value")||null;this.size="medium";this.required=!1;this.withLabel=!1;this.withHint=!1;this.handleRadioClick=e=>{let r=e.target.closest("w-radio");if(!r||r.disabled||r.forceDisabled||this.disabled)return;let t=this.value;this.value=r.value,r.checked=!0;let a=this.getAllRadios();for(let s of a)r!==s&&(s.checked=!1,s.setAttribute("tabindex","-1"));this.value!==t&&this.updateComplete.then(()=>{this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))})};this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("click",this.handleRadioClick)}static get validators(){let e=[_({validationElement:Object.assign(document.createElement("input"),{required:!0,type:"radio",name:j("__w-radio")})})];return[...super.validators,...e]}get value(){var e;return this.valueHasChanged?this._value:(e=this._value)!=null?e:this.defaultValue}set value(e){typeof e=="number"&&(e=String(e)),this.valueHasChanged=!0,this._value=e}get validationTarget(){let e=this.querySelector(":is(w-radio):not([disabled])");if(e)return e}updated(e){(e.has("disabled")||e.has("value"))&&this.syncRadioElements()}formResetCallback(...e){this.value=this.defaultValue,super.formResetCallback(...e),this.syncRadioElements()}getAllRadios(){return[...this.querySelectorAll("w-radio")]}handleLabelClick(){this.focus()}async syncRadioElements(){let e=this.getAllRadios(),r=!1;if(e.forEach((t,a)=>{t.appearance==="button"&&(r=!0),t.setAttribute("size",this.size),t.toggleAttribute("data-w-radio-horizontal",this.orientation!=="vertical"),t.toggleAttribute("data-w-radio-vertical",this.orientation==="vertical"),t.toggleAttribute("data-w-radio-first",a===0),t.toggleAttribute("data-w-radio-inner",a!==0&&a!==e.length-1),t.toggleAttribute("data-w-radio-last",a===e.length-1),t.forceDisabled=this.disabled}),this.hasRadioButtons=r,await Promise.all(e.map(async t=>{await t.updateComplete,!t.disabled&&t.value===this.value?t.checked=!0:t.checked=!1})),this.disabled)e.forEach(t=>{t.tabIndex=-1});else{let t=e.filter(s=>!s.disabled),a=t.find(s=>s.checked);t.length>0&&(a?t.forEach(s=>{s.tabIndex=s.checked?0:-1}):t.forEach((s,l)=>{s.tabIndex=l===0?0:-1})),e.filter(s=>s.disabled).forEach(s=>{s.tabIndex=-1})}}handleKeyDown(e){var h,k,z;if(!["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"," "].includes(e.key)||this.disabled)return;let r=this.getAllRadios().filter(p=>!p.disabled);if(r.length<=0)return;e.preventDefault();let t=this.value,a=(h=r.find(p=>p.checked))!=null?h:r[0],s=e.key===" "?0:["ArrowUp","ArrowLeft"].includes(e.key)?-1:1,l=r.indexOf(a)+s;l||(l=0),l<0&&(l=r.length-1),l>r.length-1&&(l=0);let v=r.some(p=>p.tagName.toLowerCase()==="w-radio-button");this.getAllRadios().forEach(p=>{p.checked=!1,v||p.setAttribute("tabindex","-1")}),this.value=r[l].value,r[l].checked=!0,v?(z=(k=r[l].shadowRoot)==null?void 0:k.querySelector("button"))==null||z.focus():(r[l].setAttribute("tabindex","0"),r[l].focus()),this.value!==t&&this.updateComplete.then(()=>{this.dispatchEvent(new InputEvent("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}),e.preventDefault()}focus(e){if(this.disabled)return;let r=this.getAllRadios(),t=r.find(l=>l.checked),a=r.find(l=>!l.disabled),s=t||a;s&&s.focus(e)}render(){let e=this.hasUpdated?this.hasSlotController.test("label"):this.withLabel,r=this.hasUpdated?this.hasSlotController.test("hint"):this.withHint,t=this.label?!0:!!e,a=this.hint?!0:!!r;return G`
-      <fieldset
-        part="form-control"
-        class=${U({"form-control":!0,"form-control-radio-group":!0,"form-control-has-label":t,"has-radio-buttons":this.hasRadioButtons})}
-        role="radiogroup"
-        aria-labelledby="label"
-        aria-describedby="hint"
-        aria-errormessage="error-message"
-        aria-orientation=${this.orientation}>
-        <label
-          part="form-control-label"
-          id="label"
-          class="label"
-          aria-hidden=${t?"false":"true"}
-          @click=${this.handleLabelClick}>
-          <slot name="label">${this.label}</slot>
-        </label>
-
-        <slot part="form-control-input" @slotchange=${this.syncRadioElements}></slot>
-
-        <slot
-          id="hint"
-          name="hint"
-          part="hint"
-          class=${U({"has-slotted":a})}
-          aria-hidden=${a?"false":"true"}
-          >${this.hint}</slot
-        >
-      </fieldset>
-    `}};d.css=[O],d.shadowRootOptions={...c.shadowRootOptions,delegatesFocus:!0},n([F()],d.prototype,"hasRadioButtons",2),n([W("slot:not([name])")],d.prototype,"defaultSlot",2),n([u()],d.prototype,"label",2),n([u({attribute:"hint"})],d.prototype,"hint",2),n([u({reflect:!0})],d.prototype,"name",2),n([u({type:Boolean,reflect:!0})],d.prototype,"disabled",2),n([u({reflect:!0})],d.prototype,"orientation",2),n([F()],d.prototype,"value",1),n([u({attribute:"value",reflect:!0})],d.prototype,"defaultValue",2),n([u({reflect:!0})],d.prototype,"size",2),n([u({type:Boolean,reflect:!0})],d.prototype,"required",2),n([u({type:Boolean,attribute:"with-label"})],d.prototype,"withLabel",2),n([u({type:Boolean,attribute:"with-hint"})],d.prototype,"withHint",2);customElements.get("w-radio")||(customElements.define("w-radio",b),customElements.define("w-radio-group",d));var rr={title:"Forms/Radio",render:()=>ee`
-      <w-radio-group label="Group" name="foobar" value="foo">
-        <w-radio value="foo">foo</w-radio>
-        <w-radio value="bar">bar</w-radio>
-      </w-radio-group>
-    `},tr={};export{tr as Default,rr as default};
-//# sourceMappingURL=radio.stories.js.map
+        `;import{css as sr}from"lit";var Pe=sr`*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.focus\\:\\[--w-outline-offset\\:-2px\\]:focus{--w-outline-offset:-2px}.bg-transparent{background-color:#0000}.border-1{border-width:1px}.rounded-4{border-radius:4px}.caret-current{caret-color:currentColor}.block{display:block}.flex{display:flex}.focusable:focus{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:focus-visible{outline:2px solid var(--w-s-color-border-focus);outline-offset:var(--w-outline-offset,1px)}.focusable:not(:focus-visible){outline:none}.outline-\\[--w-s-color-border-negative\\]\\!{outline-color:var(--w-s-color-border-negative)!important}.fixed{position:fixed}.relative{position:relative}.static{position:static}.s-bg{background-color:var(--w-s-color-background)}.s-bg-disabled-subtle{background-color:var(--w-s-color-background-disabled-subtle)}.s-text{color:var(--w-s-color-text)}.s-text-disabled{color:var(--w-s-color-text-disabled)}.s-text-negative{color:var(--w-s-color-text-negative)}.s-text-subtle{color:var(--w-s-color-text-subtle)}.placeholder\\:s-text-placeholder::placeholder{color:var(--w-s-color-text-placeholder)}.s-border-disabled{border-color:var(--w-s-color-border-disabled)}.s-border-negative{border-color:var(--w-s-color-border-negative)}.s-border-strong{border-color:var(--w-s-color-border-strong)}.hover\\:s-border-negative-hover:hover{border-color:var(--w-s-color-border-negative-hover)}.hover\\:s-border-strong-hover:hover{border-color:var(--w-s-color-border-strong-hover)}.active\\:s-border-selected:active{border-color:var(--w-s-color-border-selected)}.w-full{width:100%}.min-h-\\[42\\]{min-height:4.2rem}.mb-0{margin-bottom:0}.mt-4{margin-top:.4rem}.px-8{padding-left:.8rem;padding-right:.8rem}.py-12{padding-top:1.2rem;padding-bottom:1.2rem}.pb-4{padding-bottom:.4rem}.pl-0{padding-left:0}.pl-8{padding-left:.8rem}.pr-40{padding-right:4rem}.pl-\\[var\\(--w-prefix-width\\,_40px\\)\\]{padding-left:var(--w-prefix-width,40px)}.cursor-pointer{cursor:pointer}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:grayscale}.font-bold{font-weight:700}.font-normal{font-weight:400}.pointer-events-none{pointer-events:none}.resize{resize:both}.resize-none{resize:none}.text-m{font-size:var(--w-font-size-m);line-height:var(--w-line-height-m)}.text-s{font-size:var(--w-font-size-s);line-height:var(--w-line-height-s)}.text-xs{font-size:var(--w-font-size-xs);line-height:var(--w-line-height-xs)}.leading-m{line-height:var(--w-line-height-m)}@media (min-width:480px){.sm\\:min-h-\\[45\\]{min-height:4.5rem}}`;var S={base:"block text-m leading-m mb-0 px-8 py-12 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] caret-current",default:"border-1 s-text s-bg s-border-strong hover:s-border-strong-hover active:s-border-selected",disabled:"border-1 s-text-disabled s-bg-disabled-subtle s-border-disabled pointer-events-none",invalid:"border-1 s-text-negative s-bg s-border-negative hover:s-border-negative-hover outline-[--w-s-color-border-negative]!",readOnly:"pl-0 bg-transparent pointer-events-none",placeholder:"placeholder:s-text-placeholder",suffix:"pr-40",prefix:"pl-[var(--w-prefix-width,_40px)]",textArea:"min-h-[42] sm:min-h-[45]",fixed:"resize-none"},Ae={base:"antialiased block relative text-s font-bold pb-4 cursor-pointer s-text flex",optional:"pl-8 font-normal text-s s-text-subtle"},de={base:"text-xs mt-4 block",color:"s-text-subtle",colorInvalid:"s-text-negative"},H,U,ce,u=class extends Ee(Ve){constructor(){super(...arguments);re(this,U);this.minHeight=Number.NEGATIVE_INFINITY;this.maxHeight=Number.POSITIVE_INFINITY;re(this,H,null)}updated(r){r.has("value")&&this.setValue(this.value)}resetFormControl(){this.value=ge(this,H)}get _textareaStyles(){return X([S.base,S.textArea,!!this.placeholder&&S.placeholder,!this.invalid&&!this.disabled&&!(this.readonly||this.readOnly)&&S.default,this.invalid&&!this.disabled&&!(this.readonly||this.readOnly)&&S.invalid,!this.invalid&&this.disabled&&!(this.readonly||this.readOnly)&&S.disabled,!this.invalid&&!this.disabled&&(this.readonly||this.readOnly)&&S.readOnly,this.maxRows&&S.fixed])}get _helptextstyles(){return X([de.base,this.invalid?de.colorInvalid:de.color])}get _helpId(){if(this.helpText)return`${this._id}__hint`}get _id(){return"textfield"}get _error(){if(this.invalid&&this._helpId)return this._helpId}async connectedCallback(){super.connectedCallback(),me(this,H,this.value),this.setValue(this.value),await this.updateComplete,(this.value||this.minRows)&&oe(this,U,ce).call(this,this.shadowRoot.querySelector("textarea"))}handler(r){let t=r.currentTarget;this.value=t.value,oe(this,U,ce).call(this,t)}render(){return G`
+        ${this.label?G`
+                <label for="${this._id}" class=${Ae.base}>
+                  ${this.label}
+                  ${this.optional?G`
+                          <span class="${Ae.optional}">
+                            ${Fe.t({id:"textarea.label.optional",message:"(optional)",comment:"Shown behind label when marked as optional"})}
+                          </span>
+                    `:le}
+                </label>`:le}
+        <textarea
+          id="${this._id}"
+          class="${this._textareaStyles}"
+          name="${R(this.name)}"
+          placeholder="${R(this.placeholder)}"
+          .value="${this.value||""}"
+          aria-describedby="${R(this._helpId||(this.ariaDescription?"aria-description":void 0))}"
+          aria-errormessage="${R(this._error)}"
+          aria-invalid="${R(this.invalid)}"
+          ?disabled="${this.disabled}"
+          ?readonly="${this.readonly||this.readOnly}"
+          ?required="${this.required}"
+          @input="${this.handler}">
+        </textarea>
+        ${this.helpText?G`<div class="${this._helptextstyles}" id="${this._helpId}">${this.helpText}</div>`:le}
+    `}};H=new WeakMap,U=new WeakSet,ce=function(r){let t=getComputedStyle(r),a=Number.parseFloat(t.getPropertyValue("border-top-width")),l=Number.parseFloat(t.getPropertyValue("border-top-width")),n=Number.parseFloat(t.getPropertyValue("line-height")),i=Number.parseFloat(t.getPropertyValue("padding-top")),d=Number.parseFloat(t.getPropertyValue("padding-bottom")),b=i+d+l+a;this.minRows&&(this.minHeight=n*this.minRows+b),this.minRows&&(this.maxHeight=n*this.minRows+b);let w=r.scrollHeight+a+l,C=Math.min(this.maxHeight,Math.max(this.minHeight,w));r.style.setProperty("height",C+"px")},u.shadowRootOptions={...Ve.shadowRootOptions,delegatesFocus:!0},u.styles=[Se,Pe],v([k({type:Boolean,reflect:!0})],u.prototype,"disabled",2),v([k({type:Boolean,reflect:!0})],u.prototype,"invalid",2),v([k({type:String,reflect:!0})],u.prototype,"label",2),v([k({type:String,reflect:!0,attribute:"help-text"})],u.prototype,"helpText",2),v([k({type:Number,reflect:!0,attribute:"maximum-rows"})],u.prototype,"maxRows",2),v([k({type:Number,reflect:!0,attribute:"minimum-rows"})],u.prototype,"minRows",2),v([k()],u.prototype,"name",2),v([k()],u.prototype,"placeholder",2),v([k({type:Boolean,reflect:!0,attribute:"read-only"})],u.prototype,"readOnly",2),v([k({type:Boolean,reflect:!0})],u.prototype,"readonly",2),v([k({type:Boolean,reflect:!0})],u.prototype,"required",2),v([k({type:String,reflect:!0})],u.prototype,"value",2),v([k({type:Boolean,reflect:!0})],u.prototype,"optional",2),v([Ne()],u.prototype,"minHeight",2),v([Ne()],u.prototype,"maxHeight",2);customElements.get("w-textarea")||customElements.define("w-textarea",u);export{u as WarpTextarea};
+//# sourceMappingURL=textarea.js.map