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

package/dist/custom-elements.json

@@ -2401,7 +2401,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "Card is a layout component used for separating content areas on a page.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/card/frameworks/elements)",
+          "description": "Card is a layout component used for grouping interactive content areas on a page.\n\n[Warp component reference](https://warp-ds.github.io/docs/components/card/frameworks/elements)",
           "name": "WarpCard",
           "members": [
             {
@@ -2435,6 +2435,14 @@
               "description": "Whether the whole card is interactive.\n\nWhen 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.",
               "attribute": "clickable"
             },
+            {
+              "kind": "field",
+              "name": "buttonText",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private"
+            },
             {
               "kind": "method",
               "name": "keypressed",
@@ -2449,10 +2457,6 @@
               "type": {
                 "text": "keypressed(e: KeyboardEvent) => void"
               }
-            },
-            {
-              "kind": "field",
-              "name": "buttonText"
             }
           ],
           "attributes": [
@@ -4666,6 +4670,9 @@
             {
               "name": "--w-c-modal-translate-distance"
             },
+            {
+              "name": "--w-c-modal-padding-bottom"
+            },
             {
               "name": "--w-c-modal-width"
             }

package/dist/docs/card/api.md

@@ -6,7 +6,6 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| buttonText (JS only) | `unknown` | `-` | - |
 | clickable | `boolean` | `false` | Whether the whole card is interactive. |
 | flat | `boolean` | `false` | Whether the card uses the flat visual treatment. |
 | keypressed (JS only) | `keypressed(e: KeyboardEvent) => void` | `-` | - |
@@ -14,13 +13,6 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 ### Property Details
 
-#### buttonText (JS only)
-
-
-
-- Type: `unknown`
-- Default: `-`
-
 #### clickable
 
 Whether the whole card is interactive.

package/dist/docs/card/card.md

@@ -2,15 +2,17 @@
 
 ## Description
 
-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.
 
 [Warp component reference](https://warp-ds.github.io/docs/components/card/frameworks/elements)
 
 ## Usage
 
-Card is a layout component for visually grouping related content as one item.
+Card is a layout component used for grouping interactive content areas on a page.
 
-Use `w-card` for listings, summaries, recommendations, or selectable choices where the grouped content should feel like a single object. The component does not add padding, headings, spacing between children, or semantic structure. Those must be provided by the content inside the card.
+Use `w-card` for listings, summaries, recommendations, or selectable choices where the grouped content should feel like a single object.
+
+The component does not add padding, headings, spacing between children, or semantic structure. Those must be provided by the content inside the card.
 
 ### Basic Card
 
@@ -239,6 +241,57 @@ Use a button for an action on the current page:
 
 ## Styling API
 
+Card supports styling through **component tokens** (CSS custom properties with a `--w-c-` prefix) and **parts**.
+
+### Parts
+
+Use `::part(part-name)` from outside the component.
+
+- `base` - the root element of the card
+- `border` - the inset border of the card
+
+```css
+w-card::part(base) {
+	padding: 48px;
+	background: rebeccapurple;
+	color: cyan;
+}
+w-card::part(border) {
+	border-color: magenta;
+	border-width: 8px;
+}
+```
+
+### Component tokens
+
+Set these on `<w-card>` to override visuals.
+
+```css
+w-card {
+    --w-c-card-border-radius: 0px;
+}
+```
+
+##### Layout and typography
+
+- `--w-c-card-border-radius`
+- `--w-c-card-border-width`
+- `--w-c-card-border-color`
+- `--w-c-card-border-color-active`
+- `--w-c-card-border-color-hover`
+
+##### Background
+
+- `--w-c-card-bg`
+- `--w-c-card-bg-active`
+- `--w-c-card-bg-hover`
+
+##### Shadow
+
+- `--w-c-card-box-shadow`
+- `--w-c-card-box-shadow-active`
+- `--w-c-card-box-shadow-hover`
+
 ## `<w-card>` API
 
 Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).
@@ -247,7 +300,6 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 | Name | Type | Default | Summary |
 |-|-|-|-|
-| buttonText (JS only) | `unknown` | `-` | - |
 | clickable | `boolean` | `false` | Whether the whole card is interactive. |
 | flat | `boolean` | `false` | Whether the card uses the flat visual treatment. |
 | keypressed (JS only) | `keypressed(e: KeyboardEvent) => void` | `-` | - |
@@ -255,13 +307,6 @@ Unless otherwise noted all properties are HTML attributes (as opposed to JavaScr
 
 ### Property Details
 
-#### buttonText (JS only)
-
-
-
-- Type: `unknown`
-- Default: `-`
-
 #### clickable
 
 Whether the whole card is interactive.

package/dist/docs/card/styling.md

@@ -1 +1,52 @@
 ## Styling API
+
+Card supports styling through **component tokens** (CSS custom properties with a `--w-c-` prefix) and **parts**.
+
+### Parts
+
+Use `::part(part-name)` from outside the component.
+
+- `base` - the root element of the card
+- `border` - the inset border of the card
+
+```css
+w-card::part(base) {
+	padding: 48px;
+	background: rebeccapurple;
+	color: cyan;
+}
+w-card::part(border) {
+	border-color: magenta;
+	border-width: 8px;
+}
+```
+
+### Component tokens
+
+Set these on `<w-card>` to override visuals.
+
+```css
+w-card {
+    --w-c-card-border-radius: 0px;
+}
+```
+
+##### Layout and typography
+
+- `--w-c-card-border-radius`
+- `--w-c-card-border-width`
+- `--w-c-card-border-color`
+- `--w-c-card-border-color-active`
+- `--w-c-card-border-color-hover`
+
+##### Background
+
+- `--w-c-card-bg`
+- `--w-c-card-bg-active`
+- `--w-c-card-bg-hover`
+
+##### Shadow
+
+- `--w-c-card-box-shadow`
+- `--w-c-card-box-shadow-active`
+- `--w-c-card-box-shadow-hover`

package/dist/docs/card/usage.md

@@ -1,8 +1,10 @@
 ## Usage
 
-Card is a layout component for visually grouping related content as one item.
+Card is a layout component used for grouping interactive content areas on a page.
 
-Use `w-card` for listings, summaries, recommendations, or selectable choices where the grouped content should feel like a single object. The component does not add padding, headings, spacing between children, or semantic structure. Those must be provided by the content inside the card.
+Use `w-card` for listings, summaries, recommendations, or selectable choices where the grouped content should feel like a single object.
+
+The component does not add padding, headings, spacing between children, or semantic structure. Those must be provided by the content inside the card.
 
 ### Basic Card
 

package/dist/docs/index.md

@@ -17,7 +17,7 @@ Generated by `pnpm build:docs`. This file indexes the Markdown documentation shi
 | Breadcrumb Item | `<w-breadcrumb-item>` | `breadcrumb-item` | Represents one item in a `w-breadcrumbs` trail. Renders the slotted label as a link when `href` is set, or as text when it is not, and adds a separator after non-current items. Warp component reference | [breadcrumb-item.md](./breadcrumb-item/breadcrumb-item.md) |
 | Breadcrumbs | `<w-breadcrumbs>` | `breadcrumbs` | Shows the navigation structure for the current page. Renders direct child links and non-link elements as a breadcrumb trail, inserts separators between items, and exposes the trail as navigation. Warp component reference | [breadcrumbs.md](./breadcrumbs/breadcrumbs.md) |
 | Button | `<w-button>` | `button` | Performs an action or renders a link with button styling. Use button variants to match action priority, risk, and context. Warp component reference | [button.md](./button/button.md) |
-| Card | `<w-card>` | `card` | Card is a layout component used for separating content areas on a page. Warp component reference | [card.md](./card/card.md) |
+| Card | `<w-card>` | `card` | Card is a layout component used for grouping interactive content areas on a page. Warp component reference | [card.md](./card/card.md) |
 | Checkbox | `<w-checkbox>` | `checkbox` | Checkboxes allow users to select one or more options from a number of choices. Wrap individual checkboxes in a checkbox group. Warp component reference | [checkbox.md](./checkbox/checkbox.md) |
 | Checkbox Group | `<w-checkbox-group>` | `checkbox-group` | Checkboxes allow users to select one or more options from a number of choices. Wrap individual checkboxes in a checkbox group. Warp component reference | [checkbox-group.md](./checkbox-group/checkbox-group.md) |
 | Combobox | `<w-combobox>` | `combobox` | A combobox element for text input with selectable options. Warp component reference | [combobox.md](./combobox/combobox.md) |

package/dist/docs/modal/modal.md

@@ -226,6 +226,7 @@ w-modal {
 - `--w-c-modal-height`
 - `--w-c-modal-max-height`
 - `--w-c-modal-min-height`
+- `--w-c-modal-padding-bottom`
 - `--w-c-modal-translate-distance`
 - `--w-c-modal-width`
 

package/dist/docs/modal/styling.md

@@ -41,6 +41,7 @@ w-modal {
 - `--w-c-modal-height`
 - `--w-c-modal-max-height`
 - `--w-c-modal-min-height`
+- `--w-c-modal-padding-bottom`
 - `--w-c-modal-translate-distance`
 - `--w-c-modal-width`
 

package/dist/index.d.ts

@@ -903,8 +903,6 @@ Flat cards use a bordered surface instead of the default elevated surface. Use t
 
 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?: WarpCard["clickable"];
-  /**  */
-  buttonText?: WarpCard["buttonText"];
 };
 
 export type WarpCardSolidJsProps = {
@@ -920,8 +918,6 @@ Flat cards use a bordered surface instead of the default elevated surface. Use t
 
 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. */
   "prop:clickable"?: WarpCard["clickable"];
-  /**  */
-  "prop:buttonText"?: WarpCard["buttonText"];
 
   /** Set the innerHTML of the element */
   innerHTML?: string;
@@ -2649,7 +2645,7 @@ export type CustomElements = {
   >;
 
   /**
-   * 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.
    *
    * [Warp component reference](https://warp-ds.github.io/docs/components/card/frameworks/elements)
    *
@@ -2666,7 +2662,6 @@ export type CustomElements = {
    * - `clickable`: Whether the whole card is interactive.
    *
    * 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.
-   * - `buttonText`: undefined (property only)
    *
    * ## Methods
    *
@@ -2975,6 +2970,7 @@ export type CustomElements = {
    * - `--w-c-modal-max-height`: undefined (default: `undefined`)
    * - `--w-c-modal-min-height`: undefined (default: `undefined`)
    * - `--w-c-modal-translate-distance`: undefined (default: `undefined`)
+   * - `--w-c-modal-padding-bottom`: undefined (default: `undefined`)
    * - `--w-c-modal-width`: undefined (default: `undefined`)
    *
    * ## CSS Parts
@@ -4039,7 +4035,7 @@ export type CustomElementsSolidJs = {
   >;
 
   /**
-   * 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.
    *
    * [Warp component reference](https://warp-ds.github.io/docs/components/card/frameworks/elements)
    *
@@ -4056,7 +4052,6 @@ export type CustomElementsSolidJs = {
    * - `clickable`: Whether the whole card is interactive.
    *
    * 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.
-   * - `buttonText`: undefined (property only)
    *
    * ## Methods
    *
@@ -4382,6 +4377,7 @@ export type CustomElementsSolidJs = {
    * - `--w-c-modal-max-height`: undefined (default: `undefined`)
    * - `--w-c-modal-min-height`: undefined (default: `undefined`)
    * - `--w-c-modal-translate-distance`: undefined (default: `undefined`)
+   * - `--w-c-modal-padding-bottom`: undefined (default: `undefined`)
    * - `--w-c-modal-width`: undefined (default: `undefined`)
    *
    * ## CSS Parts
@@ -5051,6 +5047,8 @@ export type CustomCssProperties = {
   /**  */
   "--w-c-modal-translate-distance"?: string;
   /**  */
+  "--w-c-modal-padding-bottom"?: string;
+  /**  */
   "--w-c-modal-width"?: string;
   /**  adjusts the flex gap between actions in the footer. */
   "--w-c-modal-footer-gap"?: string;

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

@@ -1,6 +1,6 @@
 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.
  *
  * [Warp component reference](https://warp-ds.github.io/docs/components/card/frameworks/elements)
  */
@@ -24,15 +24,8 @@ 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>;
 }

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 N(t){return[...Array.isArray(t)?t:[t],$]}function Y(t,e,r){let o=N(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 Y(t,e,o)}function M(t,e,r){let o=N(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=N(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 T=/\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/,X=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)}}),I="%__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(I,"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)=>Y(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+I;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)&&T.test(n)?X(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)&&T.test(c)?X(c):b(c)?c:le(c,this._locale,this._locales)(r,o?.formats)}date(e,r){return Y(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(J());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),H(),we()},me="warp-i18n-change";function H(){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),H())},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=J();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 J(){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