@warp-ds/elements 2.10.0 → 2.11.0-next.1

package/dist/packages/button/button.react.stories.d.ts

@@ -3,11 +3,11 @@ import React from "react";
 import { Button } from "./react";
 declare const _default: {
     title: string;
-    render(args: Omit<Omit<Omit<React.HTMLAttributes<import("./button").WarpButton>, "value" | "form" | "small" | "name" | "type" | "disabled" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "target" | "rel" | "variant" | "command" | "quiet" | "href" | "fullWidth" | "iconOnly" | "loading" | "buttonClass" | "commandfor" | "_handleButtonClick"> & {} & Partial<Omit<import("./button").WarpButton, keyof HTMLElement>> & React.RefAttributes<import("./button").WarpButton>, "ref">, "full-width" | "icon-only"> & {
+    render(args: Omit<Omit<Omit<React.HTMLAttributes<import("./button").WarpButton>, "name" | "type" | "disabled" | "value" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "form" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "small" | "rel" | "variant" | "quiet" | "href" | "target" | "fullWidth" | "iconOnly" | "loading" | "buttonClass" | "commandfor" | "command" | "_handleButtonClick"> & {} & Partial<Omit<import("./button").WarpButton, keyof HTMLElement>> & React.RefAttributes<import("./button").WarpButton>, "ref">, "full-width" | "icon-only"> & {
         fullWidth?: boolean;
         iconOnly?: boolean;
     } & React.RefAttributes<import("./button").WarpButton>): React.JSX.Element;
-    component: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<import("./button").WarpButton>, "value" | "form" | "small" | "name" | "type" | "disabled" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "target" | "rel" | "variant" | "command" | "quiet" | "href" | "fullWidth" | "iconOnly" | "loading" | "buttonClass" | "commandfor" | "_handleButtonClick"> & {} & Partial<Omit<import("./button").WarpButton, keyof HTMLElement>> & React.RefAttributes<import("./button").WarpButton>, "ref">, "full-width" | "icon-only"> & {
+    component: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<import("./button").WarpButton>, "name" | "type" | "disabled" | "value" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "form" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "small" | "rel" | "variant" | "quiet" | "href" | "target" | "fullWidth" | "iconOnly" | "loading" | "buttonClass" | "commandfor" | "command" | "_handleButtonClick"> & {} & Partial<Omit<import("./button").WarpButton, keyof HTMLElement>> & React.RefAttributes<import("./button").WarpButton>, "ref">, "full-width" | "icon-only"> & {
         fullWidth?: boolean;
         iconOnly?: boolean;
     } & React.RefAttributes<import("./button").WarpButton>>;

package/dist/packages/button/react.d.ts

@@ -1,6 +1,13 @@
 import React from "react";
-import { WarpButton } from "./button.js";
-export declare const Button: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpButton>, "value" | "form" | "small" | "name" | "type" | "disabled" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "target" | "rel" | "variant" | "command" | "quiet" | "href" | "fullWidth" | "iconOnly" | "loading" | "buttonClass" | "commandfor" | "_handleButtonClick"> & {} & Partial<Omit<WarpButton, keyof HTMLElement>> & React.RefAttributes<WarpButton>, "ref">, "full-width" | "icon-only"> & {
+import type { WarpButton } from "./button.js";
+/**
+ * Performs an action or renders a link with button styling.
+ *
+ * Use button variants to match action priority, risk, and context.
+ *
+ * [Warp component reference](https://warp-ds.github.io/docs/components/button/frameworks/elements)
+ */
+export declare const Button: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<WarpButton>, "name" | "type" | "disabled" | "value" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "updated" | "firstUpdated" | "resetFormControl" | "render" | "validationTarget" | "form" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "small" | "rel" | "variant" | "quiet" | "href" | "target" | "fullWidth" | "iconOnly" | "loading" | "buttonClass" | "commandfor" | "command" | "_handleButtonClick"> & {} & Partial<Omit<WarpButton, keyof HTMLElement>> & React.RefAttributes<WarpButton>, "ref">, "full-width" | "icon-only"> & {
     fullWidth?: boolean;
     iconOnly?: boolean;
 } & React.RefAttributes<WarpButton>>;

package/dist/packages/button/react.js

@@ -9,6 +9,13 @@ const BaseButton = createComponent({
     elementClass: Component,
     react: React,
 });
+/**
+ * Performs an action or renders a link with button styling.
+ *
+ * Use button variants to match action priority, risk, and context.
+ *
+ * [Warp component reference](https://warp-ds.github.io/docs/components/button/frameworks/elements)
+ */
 export const Button = React.forwardRef(({ fullWidth, iconOnly, ...props }, ref) => React.createElement(BaseButton, {
     ...props,
     ...(fullWidth ? { "full-width": true } : {}),

package/dist/packages/card/card.d.ts

@@ -1,8 +1,8 @@
 import { LitElement } from "lit";
 /**
- * Card is a layout component used for separating content areas on a page.
+ * Card is a layout component used for grouping interactive content areas on a page.
  *
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/navigation-card--docs)
+ * [Warp component reference](https://warp-ds.github.io/docs/components/card/frameworks/elements)
  */
 declare class WarpCard extends LitElement {
     static styles: import("lit").CSSResult[];
@@ -24,16 +24,14 @@ declare class WarpCard extends LitElement {
      * When set, the card becomes keyboard focusable and Enter or Space triggers a click on the card. Use this only when the whole card has one action or represents one selectable choice.
      */
     clickable: boolean;
-    /** @internal */
-    buttonText: string;
+    private buttonText;
     constructor();
-    /** @internal */
-    get _containerClasses(): string;
-    /** @internal */
-    get _outlineClasses(): string;
-    /** @internal */
-    get _interactiveElement(): "" | import("lit").TemplateResult<1>;
     keypressed(e: KeyboardEvent): void;
     render(): import("lit").TemplateResult<1>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        "w-card": WarpCard;
+    }
+}
 export { WarpCard };

package/dist/packages/card/card.js

@@ -1,4 +1,4 @@
-var te=Object.defineProperty;var ae=Object.getOwnPropertyDescriptor;var f=(t,e,r,o)=>{for(var a=o>1?void 0:o?ae(e,r):e,s=t.length-1,i;s>=0;s--)(i=t[s])&&(a=(o?i(e,r,a):i(a))||a);return o&&a&&te(e,r,a),a};var x=function(){for(var t=[],e=arguments.length;e--;)t[e]=arguments[e];return t.reduce(function(r,o){return r.concat(typeof o=="string"?o:Array.isArray(o)?x.apply(void 0,o):typeof o=="object"&&o?Object.keys(o).map(function(a){return o[a]?a:""}):"")},[]).join(" ")};var b=t=>typeof t=="string",ie=t=>typeof t=="function",A=new Map,$="en";function Y(t){return[...Array.isArray(t)?t:[t],$]}function N(t,e,r){let o=Y(t);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 k(()=>y("date",o,r),()=>new Intl.DateTimeFormat(o,a)).format(b(e)?new Date(e):e)}function ne(t,e,r){let o;if(r||(r="default"),typeof r=="string")switch(o={second:"numeric",minute:"numeric",hour:"numeric"},r){case"full":case"long":o.timeZoneName="short";break;case"short":delete o.second}else o=r;return N(t,e,o)}function M(t,e,r){let o=Y(t);return k(()=>y("number",o,r),()=>new Intl.NumberFormat(o,r)).format(e)}function P(t,e,r,{offset:o=0,...a}){let s=Y(t),i=e?k(()=>y("plural-ordinal",s),()=>new Intl.PluralRules(s,{type:"ordinal"})):k(()=>y("plural-cardinal",s),()=>new Intl.PluralRules(s,{type:"cardinal"}));return a[r]??a[i.select(r-o)]??a.other}function k(t,e){let r=t(),o=A.get(r);return o||(o=e(),A.set(r,o)),o}function y(t,e,r){let o=e.join("-");return`${t}-${o}-${JSON.stringify(r)}`}var X=/\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/,I=t=>t.replace(/\\u([a-fA-F0-9]{4})|\\x([a-fA-F0-9]{2})/g,(e,r,o)=>{if(r){let a=parseInt(r,16);return String.fromCharCode(a)}else{let a=parseInt(o,16);return String.fromCharCode(a)}}),T="%__lingui_octothorpe__%",se=(t,e,r={})=>{let o=e||t,a=i=>typeof i=="object"?i:r[i],s=(i,n)=>{let c=Object.keys(r).length?a("number"):void 0,p=M(o,i,c);return n.replace(new RegExp(T,"g"),p)};return{plural:(i,n)=>{let{offset:c=0}=n,p=P(o,!1,i,n);return s(i-c,p)},selectordinal:(i,n)=>{let{offset:c=0}=n,p=P(o,!0,i,n);return s(i-c,p)},select:ce,number:(i,n)=>M(o,i,a(n)||{style:n}),date:(i,n)=>N(o,i,a(n)||n),time:(i,n)=>ne(o,i,a(n)||n)}},ce=(t,e)=>e[t]??e.other;function le(t,e,r){return(o={},a)=>{let s=se(e,r,a),i=(c,p=!1)=>Array.isArray(c)?c.reduce((h,m)=>{if(m==="#"&&p)return h+T;if(b(m))return h+m;let[F,g,O]=m,E={};g==="plural"||g==="selectordinal"||g==="select"?Object.entries(O).forEach(([L,oe])=>{E[L]=i(oe,g==="plural"||g==="selectordinal")}):E=O;let w;if(g){let L=s[g];w=L(o[F],E)}else w=o[F];return w==null?h:h+w},""):c,n=i(t);return b(n)&&X.test(n)?I(n):b(n)?n:n?String(n):""}}var de=Object.defineProperty,be=(t,e,r)=>e in t?de(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,pe=(t,e,r)=>(be(t,typeof e!="symbol"?e+"":e,r),r),S=class{constructor(){pe(this,"_events",{})}on(e,r){var o;return(o=this._events)[e]??(o[e]=[]),this._events[e].push(r),()=>this.removeListener(e,r)}removeListener(e,r){let o=this._getListeners(e);if(!o)return;let a=o.indexOf(r);~a&&o.splice(a,1)}emit(e,...r){let o=this._getListeners(e);o&&o.map(a=>a.apply(this,r))}_getListeners(e){let r=this._events[e];return Array.isArray(r)?r:!1}},ge=Object.defineProperty,ue=(t,e,r)=>e in t?ge(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,u=(t,e,r)=>(ue(t,typeof e!="symbol"?e+"":e,r),r),j=class extends S{constructor(e){super(),u(this,"_locale",""),u(this,"_locales"),u(this,"_localeData",{}),u(this,"_messages",{}),u(this,"_missing"),u(this,"_messageCompiler"),u(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(e.locale??$,e.locales)}get locale(){return this._locale}get locales(){return this._locales}get messages(){return this._messages[this._locale]??{}}get localeData(){return this._localeData[this._locale]??{}}_loadLocaleData(e,r){let o=this._localeData[e];o?Object.assign(o,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(o=>this._loadLocaleData(o,e[o])),this.emit("change")}_load(e,r){let o=this._messages[e];o?Object.assign(o,r):this._messages[e]=r}load(e,r){typeof e=="string"&&typeof r=="object"?this._load(e,r):Object.entries(e).forEach(([o,a])=>this._load(o,a)),this.emit("change")}loadAndActivate({locale:e,locales:r,messages:o}){this._locale=e,this._locales=r||void 0,this._messages[this._locale]=o,this.emit("change")}activate(e,r){this._locale=e,this._locales=r,this.emit("change")}_(e,r,o){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=o?.message;e||(e=""),b(e)||(r=e.values||r,a=e.message,e=e.id);let s=this.messages[e],i=s===void 0,n=this._missing;if(n&&i)return ie(n)?n(this._locale,e):n;i&&this.emit("missing",{id:e,locale:this._locale});let c=s||a||e;return b(c)&&(this._messageCompiler?c=this._messageCompiler(c):console.warn(`Uncompiled message detected! Message:
+var re=Object.defineProperty;var oe=Object.getOwnPropertyDescriptor;var w=(t,e,r,o)=>{for(var a=o>1?void 0:o?oe(e,r):e,s=t.length-1,i;s>=0;s--)(i=t[s])&&(a=(o?i(e,r,a):i(a))||a);return o&&a&&re(e,r,a),a};var d=t=>typeof t=="string",te=t=>typeof t=="function",C=new Map,P="en";function M(t){return[...Array.isArray(t)?t:[t],P]}function Y(t,e,r){let o=M(t);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 f(()=>x("date",o,r),()=>new Intl.DateTimeFormat(o,a)).format(d(e)?new Date(e):e)}function ae(t,e,r){let o;if(r||(r="default"),typeof r=="string")switch(o={second:"numeric",minute:"numeric",hour:"numeric"},r){case"full":case"long":o.timeZoneName="short";break;case"short":delete o.second}else o=r;return Y(t,e,o)}function z(t,e,r){let o=M(t);return f(()=>x("number",o,r),()=>new Intl.NumberFormat(o,r)).format(e)}function O(t,e,r,{offset:o=0,...a}){let s=M(t),i=e?f(()=>x("plural-ordinal",s),()=>new Intl.PluralRules(s,{type:"ordinal"})):f(()=>x("plural-cardinal",s),()=>new Intl.PluralRules(s,{type:"cardinal"}));return a[r]??a[i.select(r-o)]??a.other}function f(t,e){let r=t(),o=C.get(r);return o||(o=e(),C.set(r,o)),o}function x(t,e,r){let o=e.join("-");return`${t}-${o}-${JSON.stringify(r)}`}var A=/\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/,T=t=>t.replace(/\\u([a-fA-F0-9]{4})|\\x([a-fA-F0-9]{2})/g,(e,r,o)=>{if(r){let a=parseInt(r,16);return String.fromCharCode(a)}else{let a=parseInt(o,16);return String.fromCharCode(a)}}),X="%__lingui_octothorpe__%",ie=(t,e,r={})=>{let o=e||t,a=i=>typeof i=="object"?i:r[i],s=(i,n)=>{let c=Object.keys(r).length?a("number"):void 0,b=z(o,i,c);return n.replace(new RegExp(X,"g"),b)};return{plural:(i,n)=>{let{offset:c=0}=n,b=O(o,!1,i,n);return s(i-c,b)},selectordinal:(i,n)=>{let{offset:c=0}=n,b=O(o,!0,i,n);return s(i-c,b)},select:ne,number:(i,n)=>z(o,i,a(n)||{style:n}),date:(i,n)=>Y(o,i,a(n)||n),time:(i,n)=>ae(o,i,a(n)||n)}},ne=(t,e)=>e[t]??e.other;function se(t,e,r){return(o={},a)=>{let s=ie(e,r,a),i=(c,b=!1)=>Array.isArray(c)?c.reduce((h,v)=>{if(v==="#"&&b)return h+X;if(d(v))return h+v;let[D,p,F]=v,y={};p==="plural"||p==="selectordinal"||p==="select"?Object.entries(F).forEach(([_,ee])=>{y[_]=i(ee,p==="plural"||p==="selectordinal")}):y=F;let m;if(p){let _=s[p];m=_(o[D],y)}else m=o[D];return m==null?h:h+m},""):c,n=i(t);return d(n)&&A.test(n)?T(n):d(n)?n:n?String(n):""}}var ce=Object.defineProperty,le=(t,e,r)=>e in t?ce(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,de=(t,e,r)=>(le(t,typeof e!="symbol"?e+"":e,r),r),E=class{constructor(){de(this,"_events",{})}on(e,r){var o;return(o=this._events)[e]??(o[e]=[]),this._events[e].push(r),()=>this.removeListener(e,r)}removeListener(e,r){let o=this._getListeners(e);if(!o)return;let a=o.indexOf(r);~a&&o.splice(a,1)}emit(e,...r){let o=this._getListeners(e);o&&o.map(a=>a.apply(this,r))}_getListeners(e){let r=this._events[e];return Array.isArray(r)?r:!1}},be=Object.defineProperty,pe=(t,e,r)=>e in t?be(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,g=(t,e,r)=>(pe(t,typeof e!="symbol"?e+"":e,r),r),L=class extends E{constructor(e){super(),g(this,"_locale",""),g(this,"_locales"),g(this,"_localeData",{}),g(this,"_messages",{}),g(this,"_missing"),g(this,"_messageCompiler"),g(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(e.locale??P,e.locales)}get locale(){return this._locale}get locales(){return this._locales}get messages(){return this._messages[this._locale]??{}}get localeData(){return this._localeData[this._locale]??{}}_loadLocaleData(e,r){let o=this._localeData[e];o?Object.assign(o,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(o=>this._loadLocaleData(o,e[o])),this.emit("change")}_load(e,r){let o=this._messages[e];o?Object.assign(o,r):this._messages[e]=r}load(e,r){typeof e=="string"&&typeof r=="object"?this._load(e,r):Object.entries(e).forEach(([o,a])=>this._load(o,a)),this.emit("change")}loadAndActivate({locale:e,locales:r,messages:o}){this._locale=e,this._locales=r||void 0,this._messages[this._locale]=o,this.emit("change")}activate(e,r){this._locale=e,this._locales=r,this.emit("change")}_(e,r,o){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=o?.message;e||(e=""),d(e)||(r=e.values||r,a=e.message,e=e.id);let s=this.messages[e],i=s===void 0,n=this._missing;if(n&&i)return te(n)?n(this._locale,e):n;i&&this.emit("missing",{id:e,locale:this._locale});let c=s||a||e;return d(c)&&(this._messageCompiler?c=this._messageCompiler(c):console.warn(`Uncompiled message detected! Message:
 
 > ${c}
 
@@ -6,7 +6,7 @@ That means you use raw catalog or your catalog doesn't have a translation for th
 ICU features such as interpolation and plurals will not work properly for that message. 
 
 Please compile your catalog first. 
-`)),b(c)&&X.test(c)?I(c):b(c)?c:le(c,this._locale,this._locales)(r,o?.formats)}date(e,r){return N(this._locales||this._locale,e,r)}number(e,r){return M(this._locales||this._locale,e,r)}};function ve(t={}){return new j(t)}var l=ve();import{css as ze,html as z,LitElement as Ee}from"lit";import{property as D}from"lit/decorators.js";import{ifDefined as Le}from"lit/directives/if-defined.js";var he=["en","nb","fi","da","sv"],C="en",_=t=>he.find(e=>t===e||t.toLowerCase().includes(e))||C;function U(){if(typeof window>"u"){let t=process.env.NMP_LANGUAGE||Intl.DateTimeFormat().resolvedOptions().locale;return _(t)}try{let t=R(document);if(t)return _(t);let e=xe();if(e)return _(e);let r=R(H());return r?_(r):C}catch(t){return console.warn("could not detect locale, falling back to source locale",t),C}}var V=(t,e,r,o,a)=>{l.load("en",t),l.load("nb",e),l.load("fi",r),l.load("da",o),l.load("sv",a);let s=U();l.activate(s),J(),we()},me="warp-i18n-change";function J(){typeof window>"u"||window.dispatchEvent(new Event(me))}var Z=!1;function we(){if(Z||typeof window>"u"||!document?.documentElement)return;Z=!0;let t=()=>{let a=U();l.locale!==a&&(l.activate(a),J())},e=new MutationObserver(a=>{for(let s of a)if(s.type==="attributes"&&s.attributeName==="lang"){t();break}});e.observe(document.documentElement,{attributes:!0,attributeFilter:["lang"]});let r=H();r&&r.documentElement&&r!==document&&e.observe(r.documentElement,{attributes:!0,attributeFilter:["lang"]});let o=fe();o&&e.observe(o,{attributes:!0,attributeFilter:["lang"]})}function H(){try{return window.parent?.document??null}catch{return null}}function R(t){try{return t?.documentElement?.lang??""}catch{return""}}function fe(){try{return window.frameElement??null}catch{return null}}function xe(){try{return window.frameElement?.getAttribute?.("lang")??""}catch{return""}}import{css as ke}from"lit";import{unsafeCSS as ye}from"lit";var K=ke`
+`)),d(c)&&A.test(c)?T(c):d(c)?c:se(c,this._locale,this._locales)(r,o?.formats)}date(e,r){return Y(this._locales||this._locale,e,r)}number(e,r){return z(this._locales||this._locale,e,r)}};function ge(t={}){return new L(t)}var l=ge();import{css as ye,html as N,LitElement as _e,nothing as ze}from"lit";import{property as j}from"lit/decorators.js";import{ifDefined as Ee}from"lit/directives/if-defined.js";var ue=["en","nb","fi","da","sv"],S="en",k=t=>ue.find(e=>t===e||t.toLowerCase().includes(e))||S;function $(){if(typeof window>"u"){let t=process.env.NMP_LANGUAGE||Intl.DateTimeFormat().resolvedOptions().locale;return k(t)}try{let t=Z(document);if(t)return k(t);let e=we();if(e)return k(e);let r=Z(H());return r?k(r):S}catch(t){return console.warn("could not detect locale, falling back to source locale",t),S}}var R=(t,e,r,o,a)=>{l.load("en",t),l.load("nb",e),l.load("fi",r),l.load("da",o),l.load("sv",a);let s=$();l.activate(s),V(),ve()},he="warp-i18n-change";function V(){typeof window>"u"||window.dispatchEvent(new Event(he))}var I=!1;function ve(){if(I||typeof window>"u"||!document?.documentElement)return;I=!0;let t=()=>{let a=$();l.locale!==a&&(l.activate(a),V())},e=new MutationObserver(a=>{for(let s of a)if(s.type==="attributes"&&s.attributeName==="lang"){t();break}});e.observe(document.documentElement,{attributes:!0,attributeFilter:["lang"]});let r=H();r&&r.documentElement&&r!==document&&e.observe(r.documentElement,{attributes:!0,attributeFilter:["lang"]});let o=me();o&&e.observe(o,{attributes:!0,attributeFilter:["lang"]})}function H(){try{return window.parent?.document??null}catch{return null}}function Z(t){try{return t?.documentElement?.lang??""}catch{return""}}function me(){try{return window.frameElement??null}catch{return null}}function we(){try{return window.frameElement?.getAttribute?.("lang")??""}catch{return""}}import{css as fe}from"lit";import{unsafeCSS as xe}from"lit";var J=fe`
 	*,
 	:before,
 	:after {
@@ -279,7 +279,7 @@ Please compile your catalog first.
 	svg {
 		pointer-events: none;
 	}
-`,Oe=ye(`*, :before, :after {
+`,Fe=xe(`*, :before, :after {
             --w-rotate: 0;
             --w-rotate-x: 0;
             --w-rotate-y: 0;
@@ -2445,27 +2445,158 @@ Please compile your catalog first.
                     display: none
                 }
             }
-        `);var B=JSON.parse('{"card.button.text":["V\xE6lg"]}');var G=JSON.parse('{"card.button.text":["Select"]}');var q=JSON.parse('{"card.button.text":["Valitse"]}');var Q=JSON.parse('{"card.button.text":["Velg"]}');var W=JSON.parse('{"card.button.text":["V\xE4lj"]}');import{unsafeCSS as _e}from"lit";var ee=_e("*,: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}.border-2{border-width:2px}.border-transparent{border-color:#0000}.rounded-4{border-radius:4px}.rounded-8{border-radius:8px}.block{display:block}.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}.overflow-hidden{overflow:hidden}.outline{outline-style:solid}.inset-0{top:0;bottom:0;left:0;right:0}.absolute{position:absolute}.relative{position:relative}.static{position:static}.\\!s-bg-selected{background-color:var(--w-s-color-background-selected)!important}.s-bg{background-color:var(--w-s-color-background)}.s-bg-selected{background-color:var(--w-s-color-background-selected)}.\\!hover\\:s-bg-selected-hover:hover{background-color:var(--w-s-color-background-selected-hover)!important}.hover\\:s-bg-hover:hover{background-color:var(--w-s-color-background-hover)}.hover\\:s-bg-selected-hover:hover{background-color:var(--w-s-color-background-selected-hover)}.\\!active\\:s-bg-selected-active:active{background-color:var(--w-s-color-background-selected-active)!important}.active\\:s-bg-active:active{background-color:var(--w-s-color-background-active)}.active\\:s-bg-selected-active:active{background-color:var(--w-s-color-background-selected-active)}.s-border{border-color:var(--w-s-color-border)}.s-border-selected{border-color:var(--w-s-color-border-selected)}.group:hover .group-hover\\:s-border-selected-hover{border-color:var(--w-s-color-border-selected-hover)}.hover\\:s-border-hover:hover{border-color:var(--w-s-color-border-hover)}.hover\\:s-border-selected-hover:hover{border-color:var(--w-s-color-border-selected-hover)}.active\\:s-border-active:active{border-color:var(--w-s-color-border-active)}.active\\:s-border-selected-active:active{border-color:var(--w-s-color-border-selected-active)}.group:active .group-active\\:s-border-active{border-color:var(--w-s-color-border-active)}.group:active .group-active\\:s-border-selected-active{border-color:var(--w-s-color-border-selected-active)}.s-surface-elevated-200{background-color:var(--w-s-color-surface-elevated-200);box-shadow:var(--w-s-shadow-surface-elevated-200)}.hover\\:s-surface-elevated-200-hover:hover{background-color:var(--w-s-color-surface-elevated-200-hover);box-shadow:var(--w-s-shadow-surface-elevated-200-hover)}.active\\:s-surface-elevated-200-active:active{background-color:var(--w-s-color-surface-elevated-200-active);box-shadow:var(--w-s-shadow-surface-elevated-200-active)}.cursor-pointer{cursor:pointer}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.transition-all{transition-property:all;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1)}");var d={base:"cursor-pointer overflow-hidden relative transition-all",shadow:"group rounded-8 s-surface-elevated-200 hover:s-surface-elevated-200-hover active:s-surface-elevated-200-active",selected:"!s-bg-selected !hover:s-bg-selected-hover !active:s-bg-selected-active",outline:"absolute border-2 rounded-8 inset-0 transition-all",outlineUnselected:"border-transparent group-active:s-border-active",outlineSelected:"s-border-selected group-hover:s-border-selected-hover group-active:s-border-selected-active",flat:"border-2 rounded-4",flatUnselected:"s-bg hover:s-bg-hover active:s-bg-active s-border hover:s-border-hover active:s-border-active",flatSelected:"s-bg-selected hover:s-bg-selected-hover active:s-bg-selected-active s-border-selected hover:s-border-selected-hover active:s-border-selected-active",a11y:"sr-only"},re={ENTER:"Enter",SPACE:" "},v=class extends Ee{constructor(){super();this.selected=!1;this.flat=!1;this.clickable=!1;V(G,Q,q,B,W),this.buttonText=l._({id:"card.button.text",message:"Select",comment:"Screenreader message to indicate that the card is clickable"})}get _containerClasses(){return x([d.base,this.flat?d.flat:d.shadow,this.selected&&!this.flat&&d.selected,this.selected&&this.flat?d.flatSelected:d.flatUnselected])}get _outlineClasses(){return x([d.outline,this.selected?d.outlineSelected:d.outlineUnselected])}get _interactiveElement(){let r=()=>z`<button
-				class="${d.a11y}"
-				aria-pressed="${this.selected}"
-				tabindex="-1"
-			>
-				${this.buttonText}
-			</button>`,o=()=>z`<span
-				role="checkbox"
-				aria-checked="true"
-				aria-disabled="true"
-			></span>`;return this.clickable?r():this.selected?o():""}keypressed(r){!this.clickable||r.altKey||r.ctrlKey||(r.key===re.ENTER||r.key===re.SPACE)&&(r.preventDefault(),this.click())}render(){return z`
+        `);var K=JSON.parse('{"card.button.text":["V\xE6lg"]}');var G=JSON.parse('{"card.button.text":["Select"]}');var U=JSON.parse('{"card.button.text":["Valitse"]}');var q=JSON.parse('{"card.button.text":["Velg"]}');var B=JSON.parse('{"card.button.text":["V\xE4lj"]}');import{css as ke}from"lit";var Q=ke`
+	:host {
+		--_background-color: var(
+			--w-c-card-bg,
+			var(--w-s-color-surface-elevated-200)
+		);
+		--_background-color-active: var(
+			--w-c-card-bg-active,
+			var(--w-s-color-background-active)
+		);
+		--_background-color-hover: var(
+			--w-c-card-bg-hover,
+			var(--w-s-color-background-hover)
+		);
+		--_border-color: var(--w-c-card-border-color, transparent);
+		--_border-color-active: var(
+			--w-c-card-border-color-active,
+			var(--w-s-color-border-active)
+		);
+		--_border-color-hover: var(
+			--w-c-card-border-color-hover,
+			var(--w-s-color-border-hover)
+		);
+		--_border-radius: var(--w-c-card-border-radius, 8px);
+		--_border-width: var(--w-c-card-border-width, 2px);
+		--_box-shadow: var(
+			--w-c-card-box-shadow,
+			var(--w-s-shadow-surface-elevated-200)
+		);
+		--_box-shadow-active: var(
+			--w-c-card-box-shadow-active,
+			var(--w-s-shadow-surface-elevated-200-active)
+		);
+		--_box-shadow-hover: var(
+			--w-c-card-box-shadow-hover,
+			var(--w-s-shadow-surface-elevated-200-hover)
+		);
+	}
+
+	:host([flat]) {
+		--_border-color: var(--w-c-card-border-color, var(--w-s-color-border));
+		--_border-width: var(--w-c-card-border-width, 2px);
+		--_border-radius: var(--w-c-card-border-radius, 4px);
+		--_box-shadow: none;
+		--_box-shadow-active: none;
+		--_box-shadow-hover: none;
+	}
+
+	:host([selected]) {
+		--_background-color: var(
+			--w-c-card-bg,
+			var(--w-s-color-background-selected)
+		);
+		--_background-color-active: var(
+			--w-c-card-bg-active,
+			var(--w-s-color-background-selected-active)
+		);
+		--_background-color-hover: var(
+			--w-c-card-bg-hover,
+			var(--w-s-color-background-selected-hover)
+		);
+		--_border-color: var(
+			--w-c-card-border-color,
+			var(--w-s-color-border-selected)
+		);
+		--_border-color-active: var(
+			--w-c-card-border-color-active,
+			var(--w-s-color-border-selected-active)
+		);
+		--_border-color-hover: var(
+			--w-c-card-border-color-hover,
+			var(--w-s-color-border-selected-hover)
+		);
+		--_border-width: var(--w-c-card-border-width, 2px);
+	}
+
+	[part="base"] {
+		background-color: var(--_background-color);
+		border-radius: var(--_border-radius);
+		box-shadow: var(--_box-shadow);
+		cursor: pointer;
+		display: block;
+		overflow: hidden;
+		position: relative;
+		transition-property: all;
+		transition-duration: 0.15s;
+		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	[part="base"]:hover {
+		background-color: var(--_background-color-hover);
+		box-shadow: var(--_box-shadow-hover);
+	}
+
+	[part="base"]:active {
+		background-color: var(--_background-color-active);
+		box-shadow: var(--_box-shadow-active);
+	}
+
+	[part="border"] {
+		border-radius: var(--_border-radius);
+		border-color: var(--_border-color);
+		border-width: var(--_border-width);
+		position: absolute;
+		inset: 0px;
+		transition-property: all;
+		transition-duration: 0.15s;
+		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+	}
+
+	:host([flat]) [part="base"]:hover [part="border"],
+	:host([selected]) [part="base"]:hover [part="border"] {
+		border-color: var(--_border-color-hover);
+	}
+
+	[part="base"]:active [part="border"] {
+		border-color: var(--_border-color-active);
+	}
+
+	.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border-width: 0;
+	}
+`;var W={ENTER:"Enter",SPACE:" "},u=class extends _e{constructor(){super();this.selected=!1;this.flat=!1;this.clickable=!1;R(G,q,U,K,B),this.buttonText=l._({id:"card.button.text",message:"Select",comment:"Screenreader message to indicate that the card is clickable"})}keypressed(r){!this.clickable||r.altKey||r.ctrlKey||(r.key===W.ENTER||r.key===W.SPACE)&&(r.preventDefault(),this.click())}render(){return N`
 			<div
-				tabindex=${Le(this.clickable?"0":void 0)}
-				class="${this._containerClasses}"
+				part="base"
+				tabindex=${Ee(this.clickable?"0":void 0)}
 				@keydown=${this.keypressed}
 			>
-				${this._interactiveElement}
-				${this.flat?"":z`<div class="${this._outlineClasses}"></div>`}
+				<div part="border"></div>
+				${this.clickable?N`<button
+							class="sr-only"
+							aria-pressed="${this.selected}"
+							tabindex="-1"
+						>
+							${this.buttonText}
+						</button>`:this.selected?N`<span
+								class="sr-only"
+								role="checkbox"
+								aria-checked="true"
+								aria-disabled="true"
+							></span>`:ze}
 				<slot></slot>
 			</div>
-		`}};v.styles=[K,ee,ze`
+		`}};u.styles=[J,Q,ye`
 			a::after {
 				content: "";
 				position: absolute;
@@ -2477,5 +2608,5 @@ Please compile your catalog first.
 			:host {
 				display: block;
 			}
-		`],f([D({type:Boolean,reflect:!0})],v.prototype,"selected",2),f([D({type:Boolean})],v.prototype,"flat",2),f([D({type:Boolean})],v.prototype,"clickable",2);customElements.get("w-card")||customElements.define("w-card",v);export{v as WarpCard};
+		`],w([j({type:Boolean,reflect:!0})],u.prototype,"selected",2),w([j({type:Boolean})],u.prototype,"flat",2),w([j({type:Boolean})],u.prototype,"clickable",2);customElements.get("w-card")||customElements.define("w-card",u);export{u as WarpCard};
 //# sourceMappingURL=card.js.map