@fiscozen/card 1.0.2 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @fiscozen/card
 
+## 2.0.0
+
+### Patch Changes
+
+- Updated dependencies [a26bc2c]
+- Updated dependencies [a26bc2c]
+- Updated dependencies [2d4fc5e]
+  - @fiscozen/style@0.3.0
+  - @fiscozen/icons@0.2.0
+  - @fiscozen/button@2.0.0
+  - @fiscozen/composables@1.0.2
+  - @fiscozen/container@0.4.2
+
+## 1.1.0
+
+### Minor Changes
+
+- 2cc511a: Add yellow and red color variants
+
+### Patch Changes
+
+- 1a2df8c: Move @fiscozen/icons from dependencies to peerDependencies. Consumers now need to install @fiscozen/icons explicitly. This decouples icon updates from component version bumps.
+- Updated dependencies [1a2df8c]
+  - @fiscozen/button@1.0.2
+
 ## 1.0.2
 
 ### Minor Changes

package/README.md

@@ -1 +1,100 @@
 # @fiscozen/card
+
+> For usage documentation, see [Storybook Documentation](https://storybook-url/Documentation/Panel/FzCard)
+
+## Development
+
+### Architecture
+
+The `FzCard` component is a layout container that groups related content and actions. It provides a consistent structure: optional header (title + slots), main content area, and optional footer (default action buttons or custom slot). It supports multiple background color variants, collapsible content with configurable default state, and optional info icon. All action buttons and the info icon use the same `environment` prop for visual context (backoffice vs frontoffice).
+
+**Key state:**
+- `isOpen`: Ref controlling expanded/collapsed state when `collapsible` is true; initial value from `defaultExpanded ?? false`
+- `normalizedColor`: Computed mapping deprecated color values (e.g. `aliceblue` → `blue`) for internal styling
+- `showContent`: Computed — true when not collapsible or when expanded
+- `isAlive`: Computed — true when `alwaysAlive` or `showContent`; drives whether article/footer are in DOM (v-if)
+- `existHeader`: Computed — true when title or header/header-content slots are provided
+- `atLeastOneButton`: Computed — true when any of primary/secondary/tertiary action is set
+
+**Color and styling flow:**
+- `normalizedColor` feeds `backgroundColor` and `borderColor` computed properties
+- Background/border use Tailwind classes: design tokens for default/blue/orange/purple/grey; semantic tokens for yellow (`--semantic-warning-50`) and red (`--semantic-error-50`)
+- Text color is always `text-core-black` for all variants
+
+### Code Organization
+
+- `src/FzCard.vue`: Single-file component; all logic and template in one place
+- `src/types.ts`: `FzCardProps`, `FzCardColor`, `FzCardEnvironment`, `FzCardEvents`, `FzCardSlots`, and internal action types
+- `src/index.ts`: Exports component and types
+
+No subcomponents or `utils`/`common` modules; color mapping and layout logic live in the main component.
+
+### Key Concepts
+
+#### Color Variants and Normalization
+
+The `color` prop accepts: `default`, `blue`, `orange`, `purple`, `grey`, `yellow`, `red`, and deprecated `aliceblue`. All styling uses `normalizedColor` so that:
+- `aliceblue` is mapped to `blue` (same visual result)
+- A `watch` with `immediate: true` logs a deprecation warning when `color === 'aliceblue'`
+
+Background and border classes are resolved in two computed properties (`backgroundColor`, `borderColor`) with a `switch (normalizedColor.value)` over the normalized value. Adding a new color requires adding a case in both computeds and extending `FzCardColor` in `types.ts`.
+
+#### Collapsible and Content Visibility
+
+- When `collapsible` is false: content and footer are always visible; `isAlive` and `showContent` are true
+- When `collapsible` is true: header click toggles `isOpen`; `showContent` follows `isOpen`; article uses `v-show="showContent"` so it can be hidden without destroy
+- `isAlive`: When true, article and footer are rendered (v-if). When false (collapsible and collapsed and not `alwaysAlive`), article is not in DOM. So: `alwaysAlive` keeps content in DOM when collapsed; otherwise collapsed state removes article (and footer when no actions/slot)
+
+Footer is shown only when `(slots.footer || atLeastOneButton) && isAlive` and `v-show="showContent"`, so it hides with content when collapsed unless overridden by slot usage.
+
+#### Action Buttons and Warnings
+
+Primary, secondary, and tertiary actions are rendered in the default footer slot via `FzContainer` + `FzButton` / `FzIconButton`. Order in template: tertiary (icon), secondary, primary. On mount, the component warns if:
+- `tertiaryAction` is set without both `primaryAction` and `secondaryAction`
+- `secondaryAction` is set without `primaryAction`
+
+These are guidance only; rendering still proceeds.
+
+#### Responsive Footer
+
+`useMediaQuery` from `@fiscozen/composables` and `breakpoints` from `@fiscozen/style` drive `smOrSmaller`. When true, footer has `w-full` on the container and `flex-grow` on secondary/primary buttons; footer layout uses `justify-end` when not `smOrSmaller`.
+
+### Internal Logic
+
+#### Color Class Mapping
+
+- `backgroundColor`: `default` → `bg-core-white`; `blue` → `bg-background-alice-blue`; `orange` → `bg-background-seashell`; `purple` → `bg-background-pale-purple`; `grey` → `bg-background-white-smoke`; `yellow` → `bg-semantic-warning-50`; `red` → `bg-semantic-error-50`
+- `borderColor`: same keys → `border-grey-100` (default), `border-background-alice-blue`, `border-background-seashell`, `border-background-pale-purple`, `border-background-white-smoke`, `border-semantic-warning-50`, `border-semantic-error-50`
+
+All other colors (e.g. future tokens) require adding a case in both computeds and ensuring the Tailwind/semantic token exists in the design system.
+
+#### Footer Visibility
+
+Footer is rendered (v-if) when there is something to show and content is “alive”:
+- Condition: `(slots.footer || atLeastOneButton) && isAlive`
+- Visibility: `v-show="showContent"` so it hides when collapsible and collapsed
+- When only actions exist, default footer slot renders `FzContainer` with tertiary (FzIconButton), secondary (FzButton), primary (FzButton). Custom footer replaces this entirely via `#footer`.
+
+#### defineExpose
+
+Only `toggleOpen` is exposed; used for programmatic expand/collapse when `collapsible` is true.
+
+### Design Decisions
+
+#### Why Normalize Color Instead of Removing aliceblue?
+
+Keeping `aliceblue` in the type and normalizing to `blue` preserves backward compatibility. Consumers can migrate at their own pace while receiving a single deprecation warning. Removing it would be a breaking change.
+
+#### Why v-if for Article/Footer and v-show for Visibility?
+
+`v-if="isAlive"` controls whether the content block exists at all (e.g. when collapsed and not `alwaysAlive`). `v-show="showContent"` only hides the block visually when collapsible and collapsed but still “alive”. This allows optional DOM removal for performance while supporting `alwaysAlive` for stateful content that must stay mounted.
+
+#### Why Action Warnings on Mount?
+
+Tertiary/secondary without primary are allowed by the type system but are considered poor UX. The onMounted warnings guide consumers toward recommended usage without breaking existing code.
+
+### Known Limitations
+
+- **No built-in loading/error state**: Card does not provide loading or error UI; consumers can use slots or contentClass
+- **Action order fixed**: Tertiary, secondary, primary order is not configurable via prop
+- **Single expand state**: No accordion/group behavior; each card manages its own `isOpen`

package/dist/card.js

@@ -1,4 +1,4 @@
-import { defineComponent as E, computed as n, createBlock as d, openBlock as r, resolveDynamicComponent as T, normalizeClass as s, withCtx as F, renderSlot as g, ref as B, onMounted as R, onUnmounted as Q, useSlots as Y, watch as q, createElementBlock as b, createCommentVNode as p, withDirectives as N, createElementVNode as w, toDisplayString as G, unref as i, withModifiers as P, vShow as $, createVNode as U } from "vue";
+import { defineComponent as E, computed as r, createBlock as d, openBlock as n, resolveDynamicComponent as T, normalizeClass as s, withCtx as F, renderSlot as g, ref as B, onMounted as R, onUnmounted as Q, useSlots as Y, watch as q, createElementBlock as b, createCommentVNode as p, withDirectives as N, createElementVNode as w, toDisplayString as G, unref as i, withModifiers as P, vShow as $, createVNode as U } from "vue";
 import { FzIconButton as k, FzButton as H } from "@fiscozen/button";
 const J = /* @__PURE__ */ E({
   __name: "FzContainer",
@@ -11,26 +11,26 @@ const J = /* @__PURE__ */ E({
     layout: {}
   },
   setup(e) {
-    const l = e, a = n(() => l.alignItems ?? (l.horizontal ? "center" : "stretch"));
-    if (!l.horizontal && "layout" in l) {
-      const o = l.layout;
+    const a = e, l = r(() => a.alignItems ?? (a.horizontal ? "center" : "stretch"));
+    if (!a.horizontal && "layout" in a) {
+      const o = a.layout;
       o && o !== "default" && console.error(
-        `[FzContainer] The "layout" prop only works when horizontal is true. Current horizontal: ${l.horizontal}, layout: "${o}".`
+        `[FzContainer] The "layout" prop only works when horizontal is true. Current horizontal: ${a.horizontal}, layout: "${o}".`
       );
     }
-    const t = n(() => {
-      const o = l.main ? "main-content" : "section-content", y = [
-        l.horizontal ? "fz-container--horizontal" : "fz-container--vertical",
-        `gap-${o}-${l.gap}`,
-        `align-items-${a.value}`
+    const t = r(() => {
+      const o = a.main ? "main-content" : "section-content", y = [
+        a.horizontal ? "fz-container--horizontal" : "fz-container--vertical",
+        `gap-${o}-${a.gap}`,
+        `align-items-${l.value}`
       ];
-      if (l.horizontal) {
-        const v = ("layout" in l ? l.layout : void 0) || "default";
+      if (a.horizontal) {
+        const v = ("layout" in a ? a.layout : void 0) || "default";
         y.push(`layout-${v}`);
       }
       return y;
     });
-    return (o, c) => (r(), d(T(l.tag), {
+    return (o, c) => (n(), d(T(a.tag), {
       class: s(["fz-container", t.value])
     }, {
       default: F(() => [
@@ -39,23 +39,23 @@ const J = /* @__PURE__ */ E({
       _: 3
     }, 8, ["class"]));
   }
-}), K = (e, l) => {
-  const a = e.__vccOpts || e;
-  for (const [t, o] of l)
-    a[t] = o;
-  return a;
+}), K = (e, a) => {
+  const l = e.__vccOpts || e;
+  for (const [t, o] of a)
+    l[t] = o;
+  return l;
 }, X = /* @__PURE__ */ K(J, [["__scopeId", "data-v-8c40daeb"]]);
 new DOMRect(0, 0, window.innerWidth, window.innerHeight);
 function Z(e) {
-  const l = window.matchMedia(e), a = B(l.matches);
+  const a = window.matchMedia(e), l = B(a.matches);
   function t(o) {
-    a.value = o.matches;
+    l.value = o.matches;
   }
   return R(() => {
-    l.addEventListener("change", t);
+    a.addEventListener("change", t);
   }), Q(() => {
-    l.removeEventListener("change", t);
-  }), n(() => a.value);
+    a.removeEventListener("change", t);
+  }), r(() => l.value);
 }
 const _ = {
   blue: {
@@ -902,36 +902,36 @@ const _ = {
   "core"
 ], oe = {
   safeColorNames: ee
-}, le = [
+}, ae = [
   "error",
   "warning",
   "success",
   "info"
-], ae = {
-  semanticColorNames: le
-}, te = oe.safeColorNames, ne = ae.semanticColorNames, x = {};
+], le = {
+  semanticColorNames: ae
+}, te = oe.safeColorNames, re = le.semanticColorNames, x = {};
 te.forEach((e) => {
-  const l = z.global[e];
-  l && Object.keys(l).forEach((a) => {
+  const a = z.global[e];
+  a && Object.keys(a).forEach((l) => {
     var o;
-    const t = (o = l[a]) == null ? void 0 : o.value;
-    t && (x[e] || (x[e] = {}), x[e][a] = t);
+    const t = (o = a[l]) == null ? void 0 : o.value;
+    t && (x[e] || (x[e] = {}), x[e][l] = t);
   });
 });
 const O = z.global.semantic;
-O && ne.forEach((e) => {
-  const l = O[e];
-  l && typeof l == "object" && Object.keys(l).forEach((a) => {
+O && re.forEach((e) => {
+  const a = O[e];
+  a && typeof a == "object" && Object.keys(a).forEach((l) => {
     var o;
-    const t = (o = l[a]) == null ? void 0 : o.value;
+    const t = (o = a[l]) == null ? void 0 : o.value;
     if (t) {
       const c = `semantic-${e}`;
-      x[c] || (x[c] = {}), x[c][a] = t;
+      x[c] || (x[c] = {}), x[c][l] = t;
     }
   });
 });
-const re = Object.entries(z.global.breakpoint).reduce(
-  (e, [l, a]) => (e[l] = a.value, e),
+const ne = Object.entries(z.global.breakpoint).reduce(
+  (e, [a, l]) => (e[a] = l.value, e),
   {}
 ), ce = ["title"], ie = { class: "flex flex-row gap-8 items-start" }, se = "border-1 border-solid rounded flex flex-col", pe = "border-solid pt-16 px-16 flex flex-row justify-between", ue = "border-solid pt-0 px-16 pb-16 flex gap-12 items-center", fe = /* @__PURE__ */ E({
   __name: "FzCard",
@@ -949,8 +949,8 @@ const re = Object.entries(z.global.breakpoint).reduce(
     environment: { default: "frontoffice" }
   },
   emits: ["fzprimary:click", "fzsecondary:click", "fztertiary:click", "fzcard:click-info"],
-  setup(e, { expose: l, emit: a }) {
-    const t = Z(`(max-width: ${re.sm})`), o = e, c = a, y = Y(), v = B(o.defaultExpanded ?? !1);
+  setup(e, { expose: a, emit: l }) {
+    const t = Z(`(max-width: ${ne.sm})`), o = e, c = l, y = Y(), v = B(o.defaultExpanded ?? !1);
     q(
       () => o.color === "aliceblue",
       (f) => {
@@ -960,11 +960,11 @@ const re = Object.entries(z.global.breakpoint).reduce(
       },
       { immediate: !0 }
     );
-    const C = n(() => o.color === "aliceblue" ? "blue" : o.color), m = n(() => v.value || !o.collapsible), S = n(() => o.alwaysAlive || m.value), I = n(
+    const C = r(() => o.color === "aliceblue" ? "blue" : o.color), m = r(() => v.value || !o.collapsible), S = r(() => o.alwaysAlive || m.value), I = r(
       () => o.title || y.header || y["header-content"]
-    ), W = n(() => [
+    ), W = r(() => [
       o.collapsible ? "cursor-pointer" : ""
-    ]), j = n(() => o.environment === "backoffice" ? "py-2" : "py-8"), M = n(() => {
+    ]), j = r(() => o.environment === "backoffice" ? "py-2" : "py-8"), M = r(() => {
       switch (C.value) {
         case "blue":
           return "bg-background-alice-blue";
@@ -974,10 +974,14 @@ const re = Object.entries(z.global.breakpoint).reduce(
           return "bg-background-pale-purple";
         case "grey":
           return "bg-background-white-smoke";
+        case "yellow":
+          return "bg-semantic-warning-50";
+        case "red":
+          return "bg-semantic-error-50";
         default:
           return "bg-core-white";
       }
-    }), D = n(() => "text-core-black"), L = n(() => {
+    }), D = r(() => "text-core-black"), L = r(() => {
       switch (C.value) {
         case "blue":
           return "border-background-alice-blue";
@@ -987,10 +991,14 @@ const re = Object.entries(z.global.breakpoint).reduce(
           return "border-background-pale-purple";
         case "grey":
           return "border-background-white-smoke";
+        case "yellow":
+          return "border-semantic-warning-50";
+        case "red":
+          return "border-semantic-error-50";
         default:
           return "border-grey-100";
       }
-    }), V = n(
+    }), V = r(
       () => o.primaryAction !== void 0 || o.secondaryAction !== void 0 || o.tertiaryAction !== void 0
     );
     function A() {
@@ -1002,15 +1010,21 @@ const re = Object.entries(z.global.breakpoint).reduce(
       ) : o.secondaryAction && !o.primaryAction && console.warn(
         "[Fiscozen Design System]: You should set primaryAction if you want to set secondaryAction"
       );
-    }), l({
+    }), a({
       /**
        * Method to toggle the card open/closed state
        */
       toggleOpen: A
-    }), (f, u) => (r(), b("section", {
-      class: s([se, M.value, D.value, L.value, { "pb-16": !m.value }])
+    }), (f, u) => (n(), b("section", {
+      class: s([
+        se,
+        M.value,
+        D.value,
+        L.value,
+        { "pb-16": !m.value }
+      ])
     }, [
-      I.value ? (r(), b("header", {
+      I.value ? (n(), b("header", {
         key: 0,
         class: s([W.value]),
         onClick: A
@@ -1021,7 +1035,7 @@ const re = Object.entries(z.global.breakpoint).reduce(
           w("div", {
             class: s(["flex flex-row gap-12 items-start", j.value])
           }, [
-            e.title ? (r(), b("h2", {
+            e.title ? (n(), b("h2", {
               key: 0,
               class: "text-core-black font-medium text-xl m-0 p-0 break-words overflow-wrap-anywhere min-w-0 flex-shrink",
               title: e.title
@@ -1029,14 +1043,14 @@ const re = Object.entries(z.global.breakpoint).reduce(
             g(f.$slots, "header")
           ], 2),
           w("div", ie, [
-            e.hasInfoIcon ? (r(), d(i(k), {
+            e.hasInfoIcon ? (n(), d(i(k), {
               key: 0,
               iconName: "circle-question",
               variant: "invisible",
               environment: e.environment,
               onClick: u[0] || (u[0] = P((h) => c("fzcard:click-info"), ["stop"]))
             }, null, 8, ["environment"])) : p("", !0),
-            e.collapsible ? (r(), d(i(k), {
+            e.collapsible ? (n(), d(i(k), {
               key: 1,
               iconName: v.value ? "chevron-up" : "chevron-down",
               variant: "invisible",
@@ -1046,7 +1060,7 @@ const re = Object.entries(z.global.breakpoint).reduce(
         ]),
         g(f.$slots, "header-content")
       ], 2)) : p("", !0),
-      S.value ? N((r(), b("article", {
+      S.value ? N((n(), b("article", {
         key: 1,
         class: s(["p-16", e.contentClass])
       }, [
@@ -1054,7 +1068,7 @@ const re = Object.entries(z.global.breakpoint).reduce(
       ], 2)), [
         [$, m.value]
       ]) : p("", !0),
-      (y.footer || V.value) && S.value ? N((r(), b("footer", {
+      (y.footer || V.value) && S.value ? N((n(), b("footer", {
         key: 2,
         class: s([ue, { "justify-end": !i(t) }])
       }, [
@@ -1065,7 +1079,7 @@ const re = Object.entries(z.global.breakpoint).reduce(
             class: s({ "w-full": i(t) })
           }, {
             default: F(() => [
-              e.tertiaryAction ? (r(), d(i(k), {
+              e.tertiaryAction ? (n(), d(i(k), {
                 key: 0,
                 onClick: u[1] || (u[1] = (h) => c("fztertiary:click")),
                 iconName: e.tertiaryAction.icon,
@@ -1073,7 +1087,7 @@ const re = Object.entries(z.global.breakpoint).reduce(
                 environment: e.environment,
                 disabled: e.tertiaryAction.disabled
               }, null, 8, ["iconName", "environment", "disabled"])) : p("", !0),
-              e.secondaryAction ? (r(), d(i(H), {
+              e.secondaryAction ? (n(), d(i(H), {
                 key: 1,
                 class: s({ "flex-grow": i(t) }),
                 onClick: u[2] || (u[2] = (h) => c("fzsecondary:click")),
@@ -1082,7 +1096,7 @@ const re = Object.entries(z.global.breakpoint).reduce(
                 environment: e.environment,
                 disabled: e.secondaryAction.disabled
               }, null, 8, ["class", "label", "environment", "disabled"])) : p("", !0),
-              e.primaryAction ? (r(), d(i(H), {
+              e.primaryAction ? (n(), d(i(H), {
                 key: 2,
                 class: s({ "flex-grow": i(t) }),
                 onClick: u[3] || (u[3] = (h) => c("fzprimary:click")),

package/dist/card.umd.cjs

@@ -1 +1 @@
-(function(c,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@fiscozen/button")):typeof define=="function"&&define.amd?define(["exports","vue","@fiscozen/button"],e):(c=typeof globalThis<"u"?globalThis:c||self,e(c.FzCard={},c.Vue,c.button))})(this,function(c,e,d){"use strict";const k=((o,l)=>{const a=o.__vccOpts||o;for(const[n,t]of l)a[n]=t;return a})(e.defineComponent({__name:"FzContainer",props:{main:{type:Boolean,default:!1},gap:{default:"base"},tag:{default:"div"},alignItems:{default:void 0},horizontal:{type:Boolean,default:!1},layout:{}},setup(o){const l=o,a=e.computed(()=>l.alignItems??(l.horizontal?"center":"stretch"));if(!l.horizontal&&"layout"in l){const t=l.layout;t&&t!=="default"&&console.error(`[FzContainer] The "layout" prop only works when horizontal is true. Current horizontal: ${l.horizontal}, layout: "${t}".`)}const n=e.computed(()=>{const t=l.main?"main-content":"section-content",p=[l.horizontal?"fz-container--horizontal":"fz-container--vertical",`gap-${t}-${l.gap}`,`align-items-${a.value}`];if(l.horizontal){const u=("layout"in l?l.layout:void 0)||"default";p.push(`layout-${u}`)}return p});return(t,r)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(l.tag),{class:e.normalizeClass(["fz-container",n.value])},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default",{},void 0,!0)]),_:3},8,["class"]))}}),[["__scopeId","data-v-8c40daeb"]]);new DOMRect(0,0,window.innerWidth,window.innerHeight);function w(o){const l=window.matchMedia(o),a=e.ref(l.matches);function n(t){a.value=t.matches}return e.onMounted(()=>{l.addEventListener("change",n)}),e.onUnmounted(()=>{l.removeEventListener("change",n)}),e.computed(()=>a.value)}const v={global:{blue:{50:{value:"#eff1ff",type:"color"},100:{value:"#dee2ff",type:"color"},200:{value:"#bdc5ff",type:"color"},300:{value:"#9ca8ff",type:"color"},400:{value:"#7b8bff",type:"color"},500:{value:"#5a6eff",type:"color"},600:{value:"#4858cc",type:"color"},700:{value:"#364299",type:"color"},800:{value:"#242c66",type:"color"},900:{value:"#1b214c",type:"color"}},purple:{50:{value:"#f8f4ff",type:"color"},100:{value:"#f0e9ff",type:"color"},200:{value:"#e1d3ff",type:"color"},300:{value:"#d2bdff",type:"color"},400:{value:"#c3a7ff",type:"color"},500:{value:"#b491ff",type:"color"},600:{value:"#9074cc",type:"color"},700:{value:"#6c5799",type:"color"},800:{value:"#483a66",type:"color"},900:{value:"#241d33",type:"color"}},orange:{50:{value:"#fff2ef",type:"color"},100:{value:"#ffe4de",type:"color"},200:{value:"#ffc9bd",type:"color"},300:{value:"#ffae9c",type:"color"},400:{value:"#ff937b",type:"color"},500:{value:"#ff785a",type:"color"},600:{value:"#cc6048",type:"color"},700:{value:"#994836",type:"color"},800:{value:"#663024",type:"color"},900:{value:"#331812",type:"color"}},pink:{50:{value:"#fff5f5",type:"color"},100:{value:"#ffe0e0",type:"color"},200:{value:"#ffcbcb",type:"color"},300:{value:"#ffc0c0",type:"color"},400:{value:"#ffabab",type:"color"},500:{value:"#ff9696",type:"color"},600:{value:"#cc7878",type:"color"},700:{value:"#995a5a",type:"color"},800:{value:"#663c3c",type:"color"},900:{value:"#331e1e",type:"color"}},yellow:{50:{value:"#fffbf4",type:"color"},100:{value:"#fff3de",type:"color"},200:{value:"#ffebc8",type:"color"},300:{value:"#ffe7bd",type:"color"},400:{value:"#ffdfa7",type:"color"},500:{value:"#ffd791",type:"color"},600:{value:"#ccac74",type:"color"},700:{value:"#998157",type:"color"},800:{value:"#806c49",type:"color"},900:{value:"#4c402b",type:"color"}},semantic:{error:{50:{value:"#fef3f3",type:"color"},100:{value:"#f8baba",type:"color"},200:{value:"#f04242",type:"color"},300:{value:"#aa2f2f",type:"color"}},warning:{50:{value:"#fff8f3",type:"color"},100:{value:"#ffdabd",type:"color"},200:{value:"#ffae4f",type:"color"},300:{value:"#b47b38",type:"color"}},success:{50:{value:"#f2f8f6",type:"color"},100:{value:"#b5d8ce",type:"color"},200:{value:"#0fa88c",type:"color"},300:{value:"#0b7763",type:"color"}},info:{50:{value:"#f3f7ff",type:"color"},100:{value:"#b4c8e1",type:"color"},200:{value:"#4e9fff",type:"color"},300:{value:"#3770b4",type:"color"}}},background:{"white-smoke":{value:"#f7f6f3",type:"color"},seashell:{value:"#f8ece7",type:"color"},"pale-purple":{value:"#f2e6ff",type:"color"},"alice-blue":{value:"#ecf2fc",type:"color"}},grey:{100:{value:"#e9edf0",type:"color"},200:{value:"#d1dde6",type:"color"},300:{value:"#9da9b2",type:"color"},400:{value:"#6e777e",type:"color"},500:{value:"#596167",type:"color"}},core:{white:{value:"#ffffff",type:"color"},black:{value:"#2c282f",type:"color"}},"font-sans":{"sharp-grotesk":{value:'"Sharp Grotesk", sans-serif',type:"fontFamilies"},inter:{value:'"Inter", sans-serif',type:"fontFamilies"}},font:{light:{value:"300",type:"fontWeights"},normal:{value:"400",type:"fontWeights"},medium:{value:"500",type:"fontWeights"}},spacing:{0:{value:"0px",type:"spacing"},1:{value:"1px",type:"spacing"},2:{value:"2px",type:"spacing"},4:{value:"4px",type:"spacing"},6:{value:"6px",type:"spacing"},8:{value:"8px",type:"spacing"},10:{value:"10px",type:"spacing"},12:{value:"12px",type:"spacing"},14:{value:"14px",type:"spacing"},16:{value:"16px",type:"spacing"},20:{value:"20px",type:"spacing"},24:{value:"24px",type:"spacing"},28:{value:"28px",type:"spacing"},32:{value:"32px",type:"spacing"},36:{value:"36px",type:"spacing"},40:{value:"40px",type:"spacing"},44:{value:"44px",type:"spacing"},48:{value:"48px",type:"spacing"},56:{value:"56px",type:"spacing"},64:{value:"64px",type:"spacing"},80:{value:"80px",type:"spacing"},96:{value:"96px",type:"spacing"},112:{value:"112px",type:"spacing"},128:{value:"128px",type:"spacing"},144:{value:"144px",type:"spacing"},160:{value:"160px",type:"spacing"},176:{value:"176px",type:"spacing"},192:{value:"192px",type:"spacing"},208:{value:"208px",type:"spacing"},224:{value:"224px",type:"spacing"},240:{value:"240px",type:"spacing"},256:{value:"256px",type:"spacing"},288:{value:"288px",type:"spacing"},320:{value:"320px",type:"spacing"},384:{value:"384px",type:"spacing"}},border:{0:{value:"0px",type:"borderWidth"},1:{value:"1px",type:"borderWidth"},2:{value:"2px",type:"borderWidth"},4:{value:"4px",type:"borderWidth"},8:{value:"8px",type:"borderWidth"}},rounded:{none:{value:"0px",type:"borderRadius"},sm:{value:"2px",type:"borderRadius"},base:{value:"4px",type:"borderRadius"},md:{value:"6px",type:"borderRadius"},lg:{value:"8px",type:"borderRadius"},xl:{value:"12px",type:"borderRadius"},"2xl":{value:"16px",type:"borderRadius"},"3xl":{value:"24px",type:"borderRadius"},full:{value:"9999px",type:"borderRadius"}},breakpoint:{xs:{value:"376px",type:"sizing"},sm:{value:"640px",type:"sizing"},md:{value:"768px",type:"sizing"},lg:{value:"1024px",type:"sizing"},xl:{value:"1280px",type:"sizing"},"2xl":{value:"1440px",type:"sizing"},"3xl":{value:"1536px",type:"sizing"}},shadow:{none:{value:{color:"#000000",type:"dropShadow",x:"0",y:"0",blur:"0",spread:"0"},type:"boxShadow"},sm:{value:{color:"#0000000d",type:"dropShadow",x:"0",y:"1",blur:"2",spread:"0"},type:"boxShadow"},base:{value:[{color:"#0000000f",type:"dropShadow",x:"0",y:"1",blur:"2",spread:"0"},{color:"#0000001a",type:"dropShadow",x:"0",y:"1",blur:"3",spread:"0"}],type:"boxShadow"},md:{value:[{color:"#0000000f",type:"dropShadow",x:"0",y:"2",blur:"4",spread:"-1"},{color:"#0000001a",type:"dropShadow",x:"0",y:"4",blur:"6",spread:"-1"}],type:"boxShadow"},lg:{value:[{color:"#0000000d",type:"dropShadow",x:"0",y:"4",blur:"6",spread:"-2"},{color:"#0000001a",type:"dropShadow",x:"0",y:"10",blur:"15",spread:"-3"}],type:"boxShadow"},xl:{value:[{color:"#0000000a",type:"dropShadow",x:"0",y:"10",blur:"10",spread:"-5"},{color:"#0000001a",type:"dropShadow",x:"0",y:"20",blur:"25",spread:"-5"}],type:"boxShadow"},"2xl":{value:{color:"#00000040",type:"dropShadow",x:"0",y:"25",blur:"50",spread:"-12"},type:"boxShadow"},inner:{value:{color:"#0000000f",type:"innerShadow",x:"0",y:"2",blur:"4",spread:"0"},type:"boxShadow"}},underline:{value:"underline",type:"textDecoration"},text:{xs:{value:"12px",type:"fontSizes"},sm:{value:"14px",type:"fontSizes"},base:{value:"16px",type:"fontSizes"},lg:{value:"18px",type:"fontSizes"},xl:{value:"20px",type:"fontSizes"},"2xl":{value:"24px",type:"fontSizes"},"3xl":{value:"30px",type:"fontSizes"},"4xl":{value:"36px",type:"fontSizes"},"5xl":{value:"48px",type:"fontSizes"},"6xl":{value:"60px",type:"fontSizes"},"7xl":{value:"72px",type:"fontSizes"},"8xl":{value:"96px",type:"fontSizes"},"9xl":{value:"128px",type:"fontSizes"}},leading:{xs:{value:"16px",type:"lineHeights"},sm:{value:"18px",type:"lineHeights"},base:{value:"20px",type:"lineHeights"},lg:{value:"24px",type:"lineHeights"},xl:{value:"28px",type:"lineHeights"},"2xl":{value:"32px",type:"lineHeights"},"3xl":{value:"36px",type:"lineHeights"},"4xl":{value:"40px",type:"lineHeights"},"5xl":{value:"48px",type:"lineHeights"},"6xl":{value:"60px",type:"lineHeights"},"7xl":{value:"72px",type:"lineHeights"},"8xl":{value:"96px",type:"lineHeights"},"9xl":{value:"128px",type:"lineHeights"}}}},C={safeColorNames:["blue","purple","orange","pink","yellow","grey","core"]},z={semanticColorNames:["error","warning","success","info"]},S=C.safeColorNames,B=z.semanticColorNames,s={};S.forEach(o=>{const l=v.global[o];l&&Object.keys(l).forEach(a=>{var t;const n=(t=l[a])==null?void 0:t.value;n&&(s[o]||(s[o]={}),s[o][a]=n)})});const x=v.global.semantic;x&&B.forEach(o=>{const l=x[o];l&&typeof l=="object"&&Object.keys(l).forEach(a=>{var t;const n=(t=l[a])==null?void 0:t.value;if(n){const r=`semantic-${o}`;s[r]||(s[r]={}),s[r][a]=n}})});const A=Object.entries(v.global.breakpoint).reduce((o,[l,a])=>(o[l]=a.value,o),{}),N=["title"],E={class:"flex flex-row gap-8 items-start"},$="border-1 border-solid rounded flex flex-col",F="border-solid pt-16 px-16 flex flex-row justify-between",V="border-solid pt-0 px-16 pb-16 flex gap-12 items-center",O=e.defineComponent({__name:"FzCard",props:{title:{},color:{},primaryAction:{},secondaryAction:{},tertiaryAction:{},contentClass:{},collapsible:{type:Boolean},defaultExpanded:{type:Boolean},alwaysAlive:{type:Boolean},hasInfoIcon:{type:Boolean},environment:{default:"frontoffice"}},emits:["fzprimary:click","fzsecondary:click","fztertiary:click","fzcard:click-info"],setup(o,{expose:l,emit:a}){const n=w(`(max-width: ${A.sm})`),t=o,r=a,p=e.useSlots(),u=e.ref(t.defaultExpanded??!1);e.watch(()=>t.color==="aliceblue",y=>{y&&console.warn("[FzCard] The color prop value 'aliceblue' is deprecated and will be removed in a future version. Please use 'blue' instead. The component will automatically map 'aliceblue' to 'blue' for now.")},{immediate:!0});const b=e.computed(()=>t.color==="aliceblue"?"blue":t.color),f=e.computed(()=>u.value||!t.collapsible),g=e.computed(()=>t.alwaysAlive||f.value),H=e.computed(()=>t.title||p.header||p["header-content"]),I=e.computed(()=>[t.collapsible?"cursor-pointer":""]),R=e.computed(()=>t.environment==="backoffice"?"py-2":"py-8"),j=e.computed(()=>{switch(b.value){case"blue":return"bg-background-alice-blue";case"orange":return"bg-background-seashell";case"purple":return"bg-background-pale-purple";case"grey":return"bg-background-white-smoke";default:return"bg-core-white"}}),M=e.computed(()=>"text-core-black"),W=e.computed(()=>{switch(b.value){case"blue":return"border-background-alice-blue";case"orange":return"border-background-seashell";case"purple":return"border-background-pale-purple";case"grey":return"border-background-white-smoke";default:return"border-grey-100"}}),D=e.computed(()=>t.primaryAction!==void 0||t.secondaryAction!==void 0||t.tertiaryAction!==void 0);function h(){t.collapsible&&(u.value=!u.value)}return e.onMounted(()=>{t.tertiaryAction&&!t.secondaryAction&&!t.primaryAction?console.warn("[Fiscozen Design System]: You should set primaryAction and secondaryAction if you want to set tertiaryAction"):t.secondaryAction&&!t.primaryAction&&console.warn("[Fiscozen Design System]: You should set primaryAction if you want to set secondaryAction")}),l({toggleOpen:h}),(y,i)=>(e.openBlock(),e.createElementBlock("section",{class:e.normalizeClass([$,j.value,M.value,W.value,{"pb-16":!f.value}])},[H.value?(e.openBlock(),e.createElementBlock("header",{key:0,class:e.normalizeClass([I.value]),onClick:h},[e.createElementVNode("div",{class:e.normalizeClass(F)},[e.createElementVNode("div",{class:e.normalizeClass(["flex flex-row gap-12 items-start",R.value])},[o.title?(e.openBlock(),e.createElementBlock("h2",{key:0,class:"text-core-black font-medium text-xl m-0 p-0 break-words overflow-wrap-anywhere min-w-0 flex-shrink",title:o.title},e.toDisplayString(o.title),9,N)):e.createCommentVNode("",!0),e.renderSlot(y.$slots,"header")],2),e.createElementVNode("div",E,[o.hasInfoIcon?(e.openBlock(),e.createBlock(e.unref(d.FzIconButton),{key:0,iconName:"circle-question",variant:"invisible",environment:o.environment,onClick:i[0]||(i[0]=e.withModifiers(m=>r("fzcard:click-info"),["stop"]))},null,8,["environment"])):e.createCommentVNode("",!0),o.collapsible?(e.openBlock(),e.createBlock(e.unref(d.FzIconButton),{key:1,iconName:u.value?"chevron-up":"chevron-down",variant:"invisible",environment:o.environment},null,8,["iconName","environment"])):e.createCommentVNode("",!0)])]),e.renderSlot(y.$slots,"header-content")],2)):e.createCommentVNode("",!0),g.value?e.withDirectives((e.openBlock(),e.createElementBlock("article",{key:1,class:e.normalizeClass(["p-16",o.contentClass])},[e.renderSlot(y.$slots,"default")],2)),[[e.vShow,f.value]]):e.createCommentVNode("",!0),(p.footer||D.value)&&g.value?e.withDirectives((e.openBlock(),e.createElementBlock("footer",{key:2,class:e.normalizeClass([V,{"justify-end":!e.unref(n)}])},[e.renderSlot(y.$slots,"footer",{},()=>[e.createVNode(e.unref(k),{horizontal:"",gap:"sm",class:e.normalizeClass({"w-full":e.unref(n)})},{default:e.withCtx(()=>[o.tertiaryAction?(e.openBlock(),e.createBlock(e.unref(d.FzIconButton),{key:0,onClick:i[1]||(i[1]=m=>r("fztertiary:click")),iconName:o.tertiaryAction.icon,variant:"invisible",environment:o.environment,disabled:o.tertiaryAction.disabled},null,8,["iconName","environment","disabled"])):e.createCommentVNode("",!0),o.secondaryAction?(e.openBlock(),e.createBlock(e.unref(d.FzButton),{key:1,class:e.normalizeClass({"flex-grow":e.unref(n)}),onClick:i[2]||(i[2]=m=>r("fzsecondary:click")),label:o.secondaryAction.label,variant:"secondary",environment:o.environment,disabled:o.secondaryAction.disabled},null,8,["class","label","environment","disabled"])):e.createCommentVNode("",!0),o.primaryAction?(e.openBlock(),e.createBlock(e.unref(d.FzButton),{key:2,class:e.normalizeClass({"flex-grow":e.unref(n)}),onClick:i[3]||(i[3]=m=>r("fzprimary:click")),label:o.primaryAction.label,variant:"primary",environment:o.environment,disabled:o.primaryAction.disabled},null,8,["class","label","environment","disabled"])):e.createCommentVNode("",!0)]),_:1},8,["class"])])],2)),[[e.vShow,f.value]]):e.createCommentVNode("",!0)],2))}});c.FzCard=O,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});
+(function(c,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@fiscozen/button")):typeof define=="function"&&define.amd?define(["exports","vue","@fiscozen/button"],e):(c=typeof globalThis<"u"?globalThis:c||self,e(c.FzCard={},c.Vue,c.button))})(this,function(c,e,d){"use strict";const w=((o,l)=>{const a=o.__vccOpts||o;for(const[n,t]of l)a[n]=t;return a})(e.defineComponent({__name:"FzContainer",props:{main:{type:Boolean,default:!1},gap:{default:"base"},tag:{default:"div"},alignItems:{default:void 0},horizontal:{type:Boolean,default:!1},layout:{}},setup(o){const l=o,a=e.computed(()=>l.alignItems??(l.horizontal?"center":"stretch"));if(!l.horizontal&&"layout"in l){const t=l.layout;t&&t!=="default"&&console.error(`[FzContainer] The "layout" prop only works when horizontal is true. Current horizontal: ${l.horizontal}, layout: "${t}".`)}const n=e.computed(()=>{const t=l.main?"main-content":"section-content",p=[l.horizontal?"fz-container--horizontal":"fz-container--vertical",`gap-${t}-${l.gap}`,`align-items-${a.value}`];if(l.horizontal){const u=("layout"in l?l.layout:void 0)||"default";p.push(`layout-${u}`)}return p});return(t,r)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(l.tag),{class:e.normalizeClass(["fz-container",n.value])},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default",{},void 0,!0)]),_:3},8,["class"]))}}),[["__scopeId","data-v-8c40daeb"]]);new DOMRect(0,0,window.innerWidth,window.innerHeight);function k(o){const l=window.matchMedia(o),a=e.ref(l.matches);function n(t){a.value=t.matches}return e.onMounted(()=>{l.addEventListener("change",n)}),e.onUnmounted(()=>{l.removeEventListener("change",n)}),e.computed(()=>a.value)}const m={global:{blue:{50:{value:"#eff1ff",type:"color"},100:{value:"#dee2ff",type:"color"},200:{value:"#bdc5ff",type:"color"},300:{value:"#9ca8ff",type:"color"},400:{value:"#7b8bff",type:"color"},500:{value:"#5a6eff",type:"color"},600:{value:"#4858cc",type:"color"},700:{value:"#364299",type:"color"},800:{value:"#242c66",type:"color"},900:{value:"#1b214c",type:"color"}},purple:{50:{value:"#f8f4ff",type:"color"},100:{value:"#f0e9ff",type:"color"},200:{value:"#e1d3ff",type:"color"},300:{value:"#d2bdff",type:"color"},400:{value:"#c3a7ff",type:"color"},500:{value:"#b491ff",type:"color"},600:{value:"#9074cc",type:"color"},700:{value:"#6c5799",type:"color"},800:{value:"#483a66",type:"color"},900:{value:"#241d33",type:"color"}},orange:{50:{value:"#fff2ef",type:"color"},100:{value:"#ffe4de",type:"color"},200:{value:"#ffc9bd",type:"color"},300:{value:"#ffae9c",type:"color"},400:{value:"#ff937b",type:"color"},500:{value:"#ff785a",type:"color"},600:{value:"#cc6048",type:"color"},700:{value:"#994836",type:"color"},800:{value:"#663024",type:"color"},900:{value:"#331812",type:"color"}},pink:{50:{value:"#fff5f5",type:"color"},100:{value:"#ffe0e0",type:"color"},200:{value:"#ffcbcb",type:"color"},300:{value:"#ffc0c0",type:"color"},400:{value:"#ffabab",type:"color"},500:{value:"#ff9696",type:"color"},600:{value:"#cc7878",type:"color"},700:{value:"#995a5a",type:"color"},800:{value:"#663c3c",type:"color"},900:{value:"#331e1e",type:"color"}},yellow:{50:{value:"#fffbf4",type:"color"},100:{value:"#fff3de",type:"color"},200:{value:"#ffebc8",type:"color"},300:{value:"#ffe7bd",type:"color"},400:{value:"#ffdfa7",type:"color"},500:{value:"#ffd791",type:"color"},600:{value:"#ccac74",type:"color"},700:{value:"#998157",type:"color"},800:{value:"#806c49",type:"color"},900:{value:"#4c402b",type:"color"}},semantic:{error:{50:{value:"#fef3f3",type:"color"},100:{value:"#f8baba",type:"color"},200:{value:"#f04242",type:"color"},300:{value:"#aa2f2f",type:"color"}},warning:{50:{value:"#fff8f3",type:"color"},100:{value:"#ffdabd",type:"color"},200:{value:"#ffae4f",type:"color"},300:{value:"#b47b38",type:"color"}},success:{50:{value:"#f2f8f6",type:"color"},100:{value:"#b5d8ce",type:"color"},200:{value:"#0fa88c",type:"color"},300:{value:"#0b7763",type:"color"}},info:{50:{value:"#f3f7ff",type:"color"},100:{value:"#b4c8e1",type:"color"},200:{value:"#4e9fff",type:"color"},300:{value:"#3770b4",type:"color"}}},background:{"white-smoke":{value:"#f7f6f3",type:"color"},seashell:{value:"#f8ece7",type:"color"},"pale-purple":{value:"#f2e6ff",type:"color"},"alice-blue":{value:"#ecf2fc",type:"color"}},grey:{100:{value:"#e9edf0",type:"color"},200:{value:"#d1dde6",type:"color"},300:{value:"#9da9b2",type:"color"},400:{value:"#6e777e",type:"color"},500:{value:"#596167",type:"color"}},core:{white:{value:"#ffffff",type:"color"},black:{value:"#2c282f",type:"color"}},"font-sans":{"sharp-grotesk":{value:'"Sharp Grotesk", sans-serif',type:"fontFamilies"},inter:{value:'"Inter", sans-serif',type:"fontFamilies"}},font:{light:{value:"300",type:"fontWeights"},normal:{value:"400",type:"fontWeights"},medium:{value:"500",type:"fontWeights"}},spacing:{0:{value:"0px",type:"spacing"},1:{value:"1px",type:"spacing"},2:{value:"2px",type:"spacing"},4:{value:"4px",type:"spacing"},6:{value:"6px",type:"spacing"},8:{value:"8px",type:"spacing"},10:{value:"10px",type:"spacing"},12:{value:"12px",type:"spacing"},14:{value:"14px",type:"spacing"},16:{value:"16px",type:"spacing"},20:{value:"20px",type:"spacing"},24:{value:"24px",type:"spacing"},28:{value:"28px",type:"spacing"},32:{value:"32px",type:"spacing"},36:{value:"36px",type:"spacing"},40:{value:"40px",type:"spacing"},44:{value:"44px",type:"spacing"},48:{value:"48px",type:"spacing"},56:{value:"56px",type:"spacing"},64:{value:"64px",type:"spacing"},80:{value:"80px",type:"spacing"},96:{value:"96px",type:"spacing"},112:{value:"112px",type:"spacing"},128:{value:"128px",type:"spacing"},144:{value:"144px",type:"spacing"},160:{value:"160px",type:"spacing"},176:{value:"176px",type:"spacing"},192:{value:"192px",type:"spacing"},208:{value:"208px",type:"spacing"},224:{value:"224px",type:"spacing"},240:{value:"240px",type:"spacing"},256:{value:"256px",type:"spacing"},288:{value:"288px",type:"spacing"},320:{value:"320px",type:"spacing"},384:{value:"384px",type:"spacing"}},border:{0:{value:"0px",type:"borderWidth"},1:{value:"1px",type:"borderWidth"},2:{value:"2px",type:"borderWidth"},4:{value:"4px",type:"borderWidth"},8:{value:"8px",type:"borderWidth"}},rounded:{none:{value:"0px",type:"borderRadius"},sm:{value:"2px",type:"borderRadius"},base:{value:"4px",type:"borderRadius"},md:{value:"6px",type:"borderRadius"},lg:{value:"8px",type:"borderRadius"},xl:{value:"12px",type:"borderRadius"},"2xl":{value:"16px",type:"borderRadius"},"3xl":{value:"24px",type:"borderRadius"},full:{value:"9999px",type:"borderRadius"}},breakpoint:{xs:{value:"376px",type:"sizing"},sm:{value:"640px",type:"sizing"},md:{value:"768px",type:"sizing"},lg:{value:"1024px",type:"sizing"},xl:{value:"1280px",type:"sizing"},"2xl":{value:"1440px",type:"sizing"},"3xl":{value:"1536px",type:"sizing"}},shadow:{none:{value:{color:"#000000",type:"dropShadow",x:"0",y:"0",blur:"0",spread:"0"},type:"boxShadow"},sm:{value:{color:"#0000000d",type:"dropShadow",x:"0",y:"1",blur:"2",spread:"0"},type:"boxShadow"},base:{value:[{color:"#0000000f",type:"dropShadow",x:"0",y:"1",blur:"2",spread:"0"},{color:"#0000001a",type:"dropShadow",x:"0",y:"1",blur:"3",spread:"0"}],type:"boxShadow"},md:{value:[{color:"#0000000f",type:"dropShadow",x:"0",y:"2",blur:"4",spread:"-1"},{color:"#0000001a",type:"dropShadow",x:"0",y:"4",blur:"6",spread:"-1"}],type:"boxShadow"},lg:{value:[{color:"#0000000d",type:"dropShadow",x:"0",y:"4",blur:"6",spread:"-2"},{color:"#0000001a",type:"dropShadow",x:"0",y:"10",blur:"15",spread:"-3"}],type:"boxShadow"},xl:{value:[{color:"#0000000a",type:"dropShadow",x:"0",y:"10",blur:"10",spread:"-5"},{color:"#0000001a",type:"dropShadow",x:"0",y:"20",blur:"25",spread:"-5"}],type:"boxShadow"},"2xl":{value:{color:"#00000040",type:"dropShadow",x:"0",y:"25",blur:"50",spread:"-12"},type:"boxShadow"},inner:{value:{color:"#0000000f",type:"innerShadow",x:"0",y:"2",blur:"4",spread:"0"},type:"boxShadow"}},underline:{value:"underline",type:"textDecoration"},text:{xs:{value:"12px",type:"fontSizes"},sm:{value:"14px",type:"fontSizes"},base:{value:"16px",type:"fontSizes"},lg:{value:"18px",type:"fontSizes"},xl:{value:"20px",type:"fontSizes"},"2xl":{value:"24px",type:"fontSizes"},"3xl":{value:"30px",type:"fontSizes"},"4xl":{value:"36px",type:"fontSizes"},"5xl":{value:"48px",type:"fontSizes"},"6xl":{value:"60px",type:"fontSizes"},"7xl":{value:"72px",type:"fontSizes"},"8xl":{value:"96px",type:"fontSizes"},"9xl":{value:"128px",type:"fontSizes"}},leading:{xs:{value:"16px",type:"lineHeights"},sm:{value:"18px",type:"lineHeights"},base:{value:"20px",type:"lineHeights"},lg:{value:"24px",type:"lineHeights"},xl:{value:"28px",type:"lineHeights"},"2xl":{value:"32px",type:"lineHeights"},"3xl":{value:"36px",type:"lineHeights"},"4xl":{value:"40px",type:"lineHeights"},"5xl":{value:"48px",type:"lineHeights"},"6xl":{value:"60px",type:"lineHeights"},"7xl":{value:"72px",type:"lineHeights"},"8xl":{value:"96px",type:"lineHeights"},"9xl":{value:"128px",type:"lineHeights"}}}},C={safeColorNames:["blue","purple","orange","pink","yellow","grey","core"]},z={semanticColorNames:["error","warning","success","info"]},S=C.safeColorNames,B=z.semanticColorNames,s={};S.forEach(o=>{const l=m.global[o];l&&Object.keys(l).forEach(a=>{var t;const n=(t=l[a])==null?void 0:t.value;n&&(s[o]||(s[o]={}),s[o][a]=n)})});const x=m.global.semantic;x&&B.forEach(o=>{const l=x[o];l&&typeof l=="object"&&Object.keys(l).forEach(a=>{var t;const n=(t=l[a])==null?void 0:t.value;if(n){const r=`semantic-${o}`;s[r]||(s[r]={}),s[r][a]=n}})});const A=Object.entries(m.global.breakpoint).reduce((o,[l,a])=>(o[l]=a.value,o),{}),N=["title"],E={class:"flex flex-row gap-8 items-start"},$="border-1 border-solid rounded flex flex-col",F="border-solid pt-16 px-16 flex flex-row justify-between",V="border-solid pt-0 px-16 pb-16 flex gap-12 items-center",O=e.defineComponent({__name:"FzCard",props:{title:{},color:{},primaryAction:{},secondaryAction:{},tertiaryAction:{},contentClass:{},collapsible:{type:Boolean},defaultExpanded:{type:Boolean},alwaysAlive:{type:Boolean},hasInfoIcon:{type:Boolean},environment:{default:"frontoffice"}},emits:["fzprimary:click","fzsecondary:click","fztertiary:click","fzcard:click-info"],setup(o,{expose:l,emit:a}){const n=k(`(max-width: ${A.sm})`),t=o,r=a,p=e.useSlots(),u=e.ref(t.defaultExpanded??!1);e.watch(()=>t.color==="aliceblue",y=>{y&&console.warn("[FzCard] The color prop value 'aliceblue' is deprecated and will be removed in a future version. Please use 'blue' instead. The component will automatically map 'aliceblue' to 'blue' for now.")},{immediate:!0});const b=e.computed(()=>t.color==="aliceblue"?"blue":t.color),f=e.computed(()=>u.value||!t.collapsible),g=e.computed(()=>t.alwaysAlive||f.value),H=e.computed(()=>t.title||p.header||p["header-content"]),I=e.computed(()=>[t.collapsible?"cursor-pointer":""]),R=e.computed(()=>t.environment==="backoffice"?"py-2":"py-8"),j=e.computed(()=>{switch(b.value){case"blue":return"bg-background-alice-blue";case"orange":return"bg-background-seashell";case"purple":return"bg-background-pale-purple";case"grey":return"bg-background-white-smoke";case"yellow":return"bg-semantic-warning-50";case"red":return"bg-semantic-error-50";default:return"bg-core-white"}}),M=e.computed(()=>"text-core-black"),W=e.computed(()=>{switch(b.value){case"blue":return"border-background-alice-blue";case"orange":return"border-background-seashell";case"purple":return"border-background-pale-purple";case"grey":return"border-background-white-smoke";case"yellow":return"border-semantic-warning-50";case"red":return"border-semantic-error-50";default:return"border-grey-100"}}),D=e.computed(()=>t.primaryAction!==void 0||t.secondaryAction!==void 0||t.tertiaryAction!==void 0);function h(){t.collapsible&&(u.value=!u.value)}return e.onMounted(()=>{t.tertiaryAction&&!t.secondaryAction&&!t.primaryAction?console.warn("[Fiscozen Design System]: You should set primaryAction and secondaryAction if you want to set tertiaryAction"):t.secondaryAction&&!t.primaryAction&&console.warn("[Fiscozen Design System]: You should set primaryAction if you want to set secondaryAction")}),l({toggleOpen:h}),(y,i)=>(e.openBlock(),e.createElementBlock("section",{class:e.normalizeClass([$,j.value,M.value,W.value,{"pb-16":!f.value}])},[H.value?(e.openBlock(),e.createElementBlock("header",{key:0,class:e.normalizeClass([I.value]),onClick:h},[e.createElementVNode("div",{class:e.normalizeClass(F)},[e.createElementVNode("div",{class:e.normalizeClass(["flex flex-row gap-12 items-start",R.value])},[o.title?(e.openBlock(),e.createElementBlock("h2",{key:0,class:"text-core-black font-medium text-xl m-0 p-0 break-words overflow-wrap-anywhere min-w-0 flex-shrink",title:o.title},e.toDisplayString(o.title),9,N)):e.createCommentVNode("",!0),e.renderSlot(y.$slots,"header")],2),e.createElementVNode("div",E,[o.hasInfoIcon?(e.openBlock(),e.createBlock(e.unref(d.FzIconButton),{key:0,iconName:"circle-question",variant:"invisible",environment:o.environment,onClick:i[0]||(i[0]=e.withModifiers(v=>r("fzcard:click-info"),["stop"]))},null,8,["environment"])):e.createCommentVNode("",!0),o.collapsible?(e.openBlock(),e.createBlock(e.unref(d.FzIconButton),{key:1,iconName:u.value?"chevron-up":"chevron-down",variant:"invisible",environment:o.environment},null,8,["iconName","environment"])):e.createCommentVNode("",!0)])]),e.renderSlot(y.$slots,"header-content")],2)):e.createCommentVNode("",!0),g.value?e.withDirectives((e.openBlock(),e.createElementBlock("article",{key:1,class:e.normalizeClass(["p-16",o.contentClass])},[e.renderSlot(y.$slots,"default")],2)),[[e.vShow,f.value]]):e.createCommentVNode("",!0),(p.footer||D.value)&&g.value?e.withDirectives((e.openBlock(),e.createElementBlock("footer",{key:2,class:e.normalizeClass([V,{"justify-end":!e.unref(n)}])},[e.renderSlot(y.$slots,"footer",{},()=>[e.createVNode(e.unref(w),{horizontal:"",gap:"sm",class:e.normalizeClass({"w-full":e.unref(n)})},{default:e.withCtx(()=>[o.tertiaryAction?(e.openBlock(),e.createBlock(e.unref(d.FzIconButton),{key:0,onClick:i[1]||(i[1]=v=>r("fztertiary:click")),iconName:o.tertiaryAction.icon,variant:"invisible",environment:o.environment,disabled:o.tertiaryAction.disabled},null,8,["iconName","environment","disabled"])):e.createCommentVNode("",!0),o.secondaryAction?(e.openBlock(),e.createBlock(e.unref(d.FzButton),{key:1,class:e.normalizeClass({"flex-grow":e.unref(n)}),onClick:i[2]||(i[2]=v=>r("fzsecondary:click")),label:o.secondaryAction.label,variant:"secondary",environment:o.environment,disabled:o.secondaryAction.disabled},null,8,["class","label","environment","disabled"])):e.createCommentVNode("",!0),o.primaryAction?(e.openBlock(),e.createBlock(e.unref(d.FzButton),{key:2,class:e.normalizeClass({"flex-grow":e.unref(n)}),onClick:i[3]||(i[3]=v=>r("fzprimary:click")),label:o.primaryAction.label,variant:"primary",environment:o.environment,disabled:o.primaryAction.disabled},null,8,["class","label","environment","disabled"])):e.createCommentVNode("",!0)]),_:1},8,["class"])])],2)),[[e.vShow,f.value]]):e.createCommentVNode("",!0)],2))}});c.FzCard=O,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});

package/dist/src/types.d.ts

@@ -63,10 +63,12 @@ type FzCardIconButton = {
  * - 'orange' renders a seashell background
  * - 'purple' renders a pale-purple background
  * - 'grey' renders a white-smoke background
+ * - 'yellow' uses --semantic-warning-50 (warning tint)
+ * - 'red' uses --semantic-error-50 (error tint)
  *
  * @deprecated 'aliceblue' is deprecated and will be removed in a future version. Use 'blue' instead.
  */
-export type FzCardColor = "default" | "blue" | "orange" | "purple" | "grey" | "aliceblue";
+export type FzCardColor = "default" | "blue" | "orange" | "purple" | "grey" | "yellow" | "red" | "aliceblue";
 /**
  * Card environment context for buttons
  *

package/package.json

@@ -1,21 +1,21 @@
 {
   "name": "@fiscozen/card",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "description": "Design System Card component",
   "main": "src/index.ts",
   "type": "module",
   "keywords": [],
   "author": "Cristian Barraco",
   "dependencies": {
-    "@fiscozen/container": "0.4.1",
-    "@fiscozen/button": "1.0.1",
-    "@fiscozen/composables": "1.0.1",
-    "@fiscozen/icons": "0.1.36",
-    "@fiscozen/style": "0.2.0"
+    "@fiscozen/button": "2.0.0",
+    "@fiscozen/style": "0.3.0",
+    "@fiscozen/container": "0.4.2",
+    "@fiscozen/composables": "1.0.2"
   },
   "peerDependencies": {
     "tailwindcss": "^3.4.1",
-    "vue": "^3.4.13"
+    "vue": "^3.4.13",
+    "@fiscozen/icons": "^0.2.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
@@ -33,9 +33,9 @@
     "vite-plugin-dts": "^3.8.3",
     "vitest": "^1.2.0",
     "vue-tsc": "^1.8.25",
-    "@fiscozen/tsconfig": "^0.1.0",
     "@fiscozen/eslint-config": "^0.1.0",
-    "@fiscozen/prettier-config": "^0.1.0"
+    "@fiscozen/prettier-config": "^0.1.0",
+    "@fiscozen/tsconfig": "^0.1.0"
   },
   "license": "MIT",
   "scripts": {

package/src/FzCard.vue

@@ -14,11 +14,11 @@
  * <FzCard title="Card Title" color="default">
  *   <p>Card content goes here</p>
  * </FzCard>
- * 
+ *
  * @example
- * <FzCard 
- *   title="Collapsible Card" 
- *   collapsible 
+ * <FzCard
+ *   title="Collapsible Card"
+ *   collapsible
  *   :primaryAction="{ label: 'Save' }"
  * >
  *   <p>This card can be collapsed</p>
@@ -34,7 +34,7 @@ import { breakpoints } from "@fiscozen/style";
 const smOrSmaller = useMediaQuery(`(max-width: ${breakpoints.sm})`);
 
 const props = withDefaults(defineProps<FzCardProps>(), {
-  environment: 'frontoffice'
+  environment: "frontoffice",
 });
 const emit = defineEmits<FzCardEvents>();
 const slots = defineSlots<FzCardSlots>();
@@ -42,7 +42,7 @@ const isOpen = ref(props.defaultExpanded ?? false);
 
 /**
  * Deprecation warning for 'aliceblue' color prop value.
- * 
+ *
  * Watches for 'aliceblue' color usage and logs warning once on mount or when color changes.
  * Using watch with immediate:true ensures the warning only fires once per component instance.
  */
@@ -52,19 +52,19 @@ watch(
     if (isAliceblue) {
       console.warn(
         "[FzCard] The color prop value 'aliceblue' is deprecated and will be removed in a future version. " +
-        "Please use 'blue' instead. The component will automatically map 'aliceblue' to 'blue' for now."
+          "Please use 'blue' instead. The component will automatically map 'aliceblue' to 'blue' for now.",
       );
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 
 /**
  * Normalizes deprecated color values to their replacements.
- * 
+ *
  * Maps deprecated colors to their replacements:
  * - 'aliceblue' → 'blue'
- * 
+ *
  * This ensures backward compatibility while encouraging migration to new values.
  * Deprecation warnings are handled separately via watch hooks.
  */
@@ -72,12 +72,11 @@ const normalizedColor = computed(() => {
   if (props.color === "aliceblue") {
     return "blue";
   }
-  
+
   return props.color;
 });
 
-const sectionStaticClass =
-  "border-1 border-solid rounded flex flex-col";
+const sectionStaticClass = "border-1 border-solid rounded flex flex-col";
 const headerStaticClass =
   "border-solid pt-16 px-16 flex flex-row justify-between";
 const footerStaticClass =
@@ -93,7 +92,7 @@ const headerContainerComputedClass = computed(() => [
 ]);
 
 const headerTitleClass = computed(() => {
-  return props.environment === 'backoffice' ? 'py-2' : 'py-8';
+  return props.environment === "backoffice" ? "py-2" : "py-8";
 });
 
 const backgroundColor = computed(() => {
@@ -106,6 +105,10 @@ const backgroundColor = computed(() => {
       return "bg-background-pale-purple";
     case "grey":
       return "bg-background-white-smoke";
+    case "yellow":
+      return "bg-semantic-warning-50";
+    case "red":
+      return "bg-semantic-error-50";
     default:
       return "bg-core-white";
   }
@@ -128,6 +131,10 @@ const borderColor = computed(() => {
       return "border-background-pale-purple";
     case "grey":
       return "border-background-white-smoke";
+    case "yellow":
+      return "border-semantic-warning-50";
+    case "red":
+      return "border-semantic-error-50";
     default:
       return "border-grey-100";
   }
@@ -164,7 +171,15 @@ defineExpose({
 </script>
 
 <template>
-  <section :class="[sectionStaticClass, backgroundColor, textColor, borderColor, {'pb-16': !showContent}]">
+  <section
+    :class="[
+      sectionStaticClass,
+      backgroundColor,
+      textColor,
+      borderColor,
+      { 'pb-16': !showContent },
+    ]"
+  >
     <header
       v-if="existHeader"
       :class="[headerContainerComputedClass]"
@@ -208,11 +223,11 @@ defineExpose({
     </article>
     <footer
       v-if="(slots.footer || atLeastOneButton) && isAlive"
-      :class="[footerStaticClass, {'justify-end': !smOrSmaller}]"
+      :class="[footerStaticClass, { 'justify-end': !smOrSmaller }]"
       v-show="showContent"
     >
       <slot name="footer">
-        <FzContainer horizontal gap="sm" :class="{'w-full': smOrSmaller}">
+        <FzContainer horizontal gap="sm" :class="{ 'w-full': smOrSmaller }">
           <FzIconButton
             v-if="tertiaryAction"
             @click="emit('fztertiary:click')"
@@ -223,7 +238,7 @@ defineExpose({
           />
           <FzButton
             v-if="secondaryAction"
-            :class="{'flex-grow': smOrSmaller}"
+            :class="{ 'flex-grow': smOrSmaller }"
             @click="emit('fzsecondary:click')"
             :label="secondaryAction.label"
             variant="secondary"
@@ -232,7 +247,7 @@ defineExpose({
           />
           <FzButton
             v-if="primaryAction"
-            :class="{'flex-grow': smOrSmaller}"
+            :class="{ 'flex-grow': smOrSmaller }"
             @click="emit('fzprimary:click')"
             :label="primaryAction.label"
             variant="primary"

package/src/__tests__/FzCard.spec.ts

@@ -1,5 +1,5 @@
 import { mount } from "@vue/test-utils";
-import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { describe, it, expect, vi, beforeEach } from "vitest";
 import FzCard from "../FzCard.vue";
 
 beforeEach(() => {
@@ -146,6 +146,8 @@ describe("FzCard", () => {
         ["orange", "bg-background-seashell"],
         ["purple", "bg-background-pale-purple"],
         ["grey", "bg-background-white-smoke"],
+        ["yellow", "bg-semantic-warning-50"],
+        ["red", "bg-semantic-error-50"],
       ])("should apply %s background color", async (color, expectedClass) => {
         const wrapper = mount(FzCard, {
           props: {
@@ -643,18 +645,25 @@ describe("FzCard", () => {
       expect(wrapper.find("section").classes()).toContain("bg-background-alice-blue");
     });
 
-    it("should apply color-specific border classes", async () => {
+    it.each([
+      ["blue", "border-background-alice-blue"],
+      ["orange", "border-background-seashell"],
+      ["purple", "border-background-pale-purple"],
+      ["grey", "border-background-white-smoke"],
+      ["yellow", "border-semantic-warning-50"],
+      ["red", "border-semantic-error-50"],
+    ])("should apply %s border color", async (color, expectedClass) => {
       const wrapper = mount(FzCard, {
         props: {
           title: "Test Card",
-          color: "blue",
+          color: color as any,
           primaryAction: {
             label: "Save",
           },
         },
       });
       await wrapper.vm.$nextTick();
-      expect(wrapper.find("section").classes()).toContain("border-background-alice-blue");
+      expect(wrapper.find("section").classes()).toContain(expectedClass);
     });
 
     it("should apply text color class", async () => {

package/src/__tests__/__snapshots__/FzCard.spec.ts.snap

@@ -35,8 +35,12 @@ exports[`FzCard > Snapshots > should match snapshot - collapsible 1`] = `
         <h2 class="text-core-black font-medium text-xl m-0 p-0 break-words overflow-wrap-anywhere min-w-0 flex-shrink" title="Test Card">Test Card</h2>
       </div>
       <div class="flex flex-row gap-8 items-start">
-        <!--v-if--><span data-v-8090b1b6="" class="fz-icon-button-wrapper relative fz-icon-button-wrapper--frontoffice"><button data-v-8090b1b6="" type="button" aria-disabled="false" class="relative rounded flex flex-shrink items-center justify-center font-normal !text-[16px] !leading-[20px] border-1 border-transparent gap-8 h-44 px-12 min-w-96 bg-transparent text-grey-500 !border-transparent hover:bg-grey-100 hover:!border-grey-100 focus:bg-transparent focus:!border-blue-600 disabled:bg-grey-50 disabled:text-grey-200 disabled:!border-grey-200" aria-label=""><div class="flex items-center justify-items-center"><div class="flex items-center justify-center w-[20px] h-[20px]"><svg class="svg-inline--fa fa-chevron-up h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="chevron-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="" fill="currentColor" d="M239 111c9.4-9.4 24.6-9.4 33.9 0L465 303c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-175-175L81 337c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9L239 111z"></path></svg></div></div><!--v-if--><!--v-if--></button><!--v-if--></span>
+        <!--v-if--><span data-v-8090b1b6="" class="fz-icon-button-wrapper relative fz-icon-button-wrapper--frontoffice"><button data-v-8090b1b6="" type="button" aria-disabled="false" class="relative rounded flex flex-shrink items-center justify-center font-normal !text-[16px] !leading-[20px] border-1 border-transparent gap-8 h-44 px-12 min-w-96 bg-transparent text-grey-500 !border-transparent hover:bg-grey-100 hover:!border-grey-100 focus:bg-transparent focus:!border-blue-600 disabled:bg-grey-50 disabled:text-grey-200 disabled:!border-grey-200" aria-label=""><div class="flex items-center justify-items-center"><span role="presentation" class="flex items-center justify-center w-[20px] h-[20px]"><svg class="svg-inline--fa fa-chevron-up h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="chevron-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="" fill="currentColor" d="M239 111c9.4-9.4 24.6-9.4 33.9 0L465 303c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-175-175L81 337c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9L239 111z"></path></svg></span>
       </div>
+      <!--v-if-->
+      <!--v-if--></button>
+      <!--v-if--></span>
+    </div>
     </div>
   </header>
   <article class="p-16"></article>
@@ -77,15 +81,18 @@ exports[`FzCard > Snapshots > should match snapshot - with all actions 1`] = `
   </header>
   <article class="p-16"></article>
   <footer class="border-solid pt-0 px-16 pb-16 flex gap-12 items-center justify-end">
-    <div data-v-da7f5873="" class="fz-container fz-container--horizontal gap-section-content-sm align-items-center layout-default"><span data-v-8090b1b6="" class="fz-icon-button-wrapper relative fz-icon-button-wrapper--frontoffice"><button data-v-8090b1b6="" type="button" aria-disabled="false" class="relative rounded flex flex-shrink items-center justify-center font-normal !text-[16px] !leading-[20px] border-1 border-transparent gap-8 h-44 px-12 min-w-96 bg-transparent text-grey-500 !border-transparent hover:bg-grey-100 hover:!border-grey-100 focus:bg-transparent focus:!border-blue-600 disabled:bg-grey-50 disabled:text-grey-200 disabled:!border-grey-200" aria-label=""><div class="flex items-center justify-items-center"><div class="flex items-center justify-center w-[20px] h-[20px]"><svg class="svg-inline--fa fa-bell h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="bell" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M224 0c-17.7 0-32 14.3-32 32l0 19.2C119 66 64 130.6 64 208l0 25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416l400 0c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4l0-25.4c0-77.4-55-142-128-156.8L256 32c0-17.7-14.3-32-32-32zm0 96c61.9 0 112 50.1 112 112l0 25.4c0 47.9 13.9 94.6 39.7 134.6L72.3 368C98.1 328 112 281.3 112 233.4l0-25.4c0-61.9 50.1-112 112-112zm64 352l-64 0-64 0c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z"></path></svg></div></div><!--v-if--><!--v-if--></button><!--v-if--></span><button type="button" aria-disabled="false" class="relative rounded flex flex-shrink items-center justify-center font-normal !text-[16px] !leading-[20px] border-1 border-transparent gap-8 h-44 px-12 min-w-96 bg-core-white text-grey-500 !border-grey-200 hover:bg-grey-100 hover:!border-grey-200 focus:bg-core-white focus:!border-blue-600 disabled:bg-grey-50 disabled:text-grey-200 disabled:!border-grey-200">
-        <!--v-if-->
-        <div class="truncate font-normal !text-[16px] !leading-[20px]">Cancel</div>
-        <!--v-if-->
-      </button><button type="button" aria-disabled="false" class="relative rounded flex flex-shrink items-center justify-center font-normal !text-[16px] !leading-[20px] border-1 border-transparent gap-8 h-44 px-12 min-w-96 bg-blue-500 text-core-white hover:bg-blue-600 focus:bg-blue-500 focus:!border-blue-600 disabled:bg-blue-200">
-        <!--v-if-->
-        <div class="truncate font-normal !text-[16px] !leading-[20px]">Save</div>
-        <!--v-if-->
-      </button></div>
+    <div data-v-da7f5873="" class="fz-container fz-container--horizontal gap-section-content-sm align-items-center layout-default"><span data-v-8090b1b6="" class="fz-icon-button-wrapper relative fz-icon-button-wrapper--frontoffice"><button data-v-8090b1b6="" type="button" aria-disabled="false" class="relative rounded flex flex-shrink items-center justify-center font-normal !text-[16px] !leading-[20px] border-1 border-transparent gap-8 h-44 px-12 min-w-96 bg-transparent text-grey-500 !border-transparent hover:bg-grey-100 hover:!border-grey-100 focus:bg-transparent focus:!border-blue-600 disabled:bg-grey-50 disabled:text-grey-200 disabled:!border-grey-200" aria-label=""><div class="flex items-center justify-items-center"><span role="presentation" class="flex items-center justify-center w-[20px] h-[20px]"><svg class="svg-inline--fa fa-bell h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="bell" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path class="" fill="currentColor" d="M224 0c-17.7 0-32 14.3-32 32l0 19.2C119 66 64 130.6 64 208l0 25.4c0 45.4-15.5 89.5-43.8 124.9L5.3 377c-5.8 7.2-6.9 17.1-2.9 25.4S14.8 416 24 416l400 0c9.2 0 17.6-5.3 21.6-13.6s2.9-18.2-2.9-25.4l-14.9-18.6C399.5 322.9 384 278.8 384 233.4l0-25.4c0-77.4-55-142-128-156.8L256 32c0-17.7-14.3-32-32-32zm0 96c61.9 0 112 50.1 112 112l0 25.4c0 47.9 13.9 94.6 39.7 134.6L72.3 368C98.1 328 112 281.3 112 233.4l0-25.4c0-61.9 50.1-112 112-112zm64 352l-64 0-64 0c0 17 6.7 33.3 18.7 45.3s28.3 18.7 45.3 18.7s33.3-6.7 45.3-18.7s18.7-28.3 18.7-45.3z"></path></svg></span></div>
+    <!--v-if-->
+    <!--v-if--></button>
+    <!--v-if--></span><button type="button" aria-disabled="false" class="relative rounded flex flex-shrink items-center justify-center font-normal !text-[16px] !leading-[20px] border-1 border-transparent gap-8 h-44 px-12 min-w-96 bg-core-white text-grey-500 !border-grey-200 hover:bg-grey-100 hover:!border-grey-200 focus:bg-core-white focus:!border-blue-600 disabled:bg-grey-50 disabled:text-grey-200 disabled:!border-grey-200">
+      <!--v-if-->
+      <div class="truncate font-normal !text-[16px] !leading-[20px]">Cancel</div>
+      <!--v-if-->
+    </button><button type="button" aria-disabled="false" class="relative rounded flex flex-shrink items-center justify-center font-normal !text-[16px] !leading-[20px] border-1 border-transparent gap-8 h-44 px-12 min-w-96 bg-blue-500 text-core-white hover:bg-blue-600 focus:bg-blue-500 focus:!border-blue-600 disabled:bg-blue-200">
+      <!--v-if-->
+      <div class="truncate font-normal !text-[16px] !leading-[20px]">Save</div>
+      <!--v-if-->
+    </button></div>
   </footer>
 </section>"
 `;
@@ -115,9 +122,12 @@ exports[`FzCard > Snapshots > should match snapshot - with info icon 1`] = `
       <div class="flex flex-row gap-12 items-start py-8">
         <h2 class="text-core-black font-medium text-xl m-0 p-0 break-words overflow-wrap-anywhere min-w-0 flex-shrink" title="Test Card">Test Card</h2>
       </div>
-      <div class="flex flex-row gap-8 items-start"><span data-v-8090b1b6="" class="fz-icon-button-wrapper relative fz-icon-button-wrapper--frontoffice"><button data-v-8090b1b6="" type="button" aria-disabled="false" class="relative rounded flex flex-shrink items-center justify-center font-normal !text-[16px] !leading-[20px] border-1 border-transparent gap-8 h-44 px-12 min-w-96 bg-transparent text-grey-500 !border-transparent hover:bg-grey-100 hover:!border-grey-100 focus:bg-transparent focus:!border-blue-600 disabled:bg-grey-50 disabled:text-grey-200 disabled:!border-grey-200" aria-label=""><div class="flex items-center justify-items-center"><div class="flex items-center justify-center w-[20px] h-[20px]"><svg class="svg-inline--fa fa-circle-question h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="circle-question" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="" fill="currentColor" d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm169.8-90.7c7.9-22.3 29.1-37.3 52.8-37.3l58.3 0c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24l0-13.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1l-58.3 0c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"></path></svg></div></div><!--v-if--><!--v-if--></button><!--v-if--></span>
-        <!--v-if-->
-      </div>
+      <div class="flex flex-row gap-8 items-start"><span data-v-8090b1b6="" class="fz-icon-button-wrapper relative fz-icon-button-wrapper--frontoffice"><button data-v-8090b1b6="" type="button" aria-disabled="false" class="relative rounded flex flex-shrink items-center justify-center font-normal !text-[16px] !leading-[20px] border-1 border-transparent gap-8 h-44 px-12 min-w-96 bg-transparent text-grey-500 !border-transparent hover:bg-grey-100 hover:!border-grey-100 focus:bg-transparent focus:!border-blue-600 disabled:bg-grey-50 disabled:text-grey-200 disabled:!border-grey-200" aria-label=""><div class="flex items-center justify-items-center"><span role="presentation" class="flex items-center justify-center w-[20px] h-[20px]"><svg class="svg-inline--fa fa-circle-question h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="circle-question" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="" fill="currentColor" d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm169.8-90.7c7.9-22.3 29.1-37.3 52.8-37.3l58.3 0c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24l0-13.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1l-58.3 0c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"></path></svg></span></div>
+      <!--v-if-->
+      <!--v-if--></button>
+      <!--v-if--></span>
+      <!--v-if-->
+    </div>
     </div>
   </header>
   <article class="p-16"></article>

package/src/types.ts

@@ -59,17 +59,19 @@ type FzCardIconButton = {
 
 /**
  * Card background color variants.
- * 
+ *
  * @remarks
  * - 'default' renders a white background
  * - 'blue' renders an alice-blue background
  * - 'orange' renders a seashell background
  * - 'purple' renders a pale-purple background
  * - 'grey' renders a white-smoke background
- * 
+ * - 'yellow' uses --semantic-warning-50 (warning tint)
+ * - 'red' uses --semantic-error-50 (error tint)
+ *
  * @deprecated 'aliceblue' is deprecated and will be removed in a future version. Use 'blue' instead.
  */
-export type FzCardColor = "default" | "blue" | "orange" | "purple" | "grey" | "aliceblue";
+export type FzCardColor = "default" | "blue" | "orange" | "purple" | "grey" | "yellow" | "red" | "aliceblue";
 
 /**
  * Card environment context for buttons

package/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"program":{"fileNames":["../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es5.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2015.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2016.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2017.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2018.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2019.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2020.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.dom.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.dom.iterable.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2015.core.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2015.collection.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2015.generator.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2015.iterable.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2015.promise.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2015.proxy.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2015.reflect.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2015.symbol.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2016.array.include.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2017.date.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2017.object.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2017.string.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2017.intl.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2017.typedarrays.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2018.asynciterable.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2018.intl.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2018.promise.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2018.regexp.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2019.array.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2019.object.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2019.string.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2019.symbol.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2019.intl.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2020.bigint.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2020.date.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2020.promise.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2020.sharedmemory.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2020.string.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2020.symbol.wellknown.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2020.intl.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2020.number.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.decorators.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.decorators.legacy.d.ts","../../node_modules/.pnpm/@vue+shared@3.5.26/node_modules/@vue/shared/dist/shared.d.ts","../../node_modules/.pnpm/@vue+reactivity@3.5.26/node_modules/@vue/reactivity/dist/reactivity.d.ts","../../node_modules/.pnpm/@vue+runtime-core@3.5.26/node_modules/@vue/runtime-core/dist/runtime-core.d.ts","../../node_modules/.pnpm/csstype@3.2.3/node_modules/csstype/index.d.ts","../../node_modules/.pnpm/@vue+runtime-dom@3.5.26/node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts","../../node_modules/.pnpm/vue@3.5.26_typescript@5.3.3/node_modules/vue/jsx-runtime/index.d.ts","../../node_modules/.pnpm/@babel+types@7.28.6/node_modules/@babel/types/lib/index.d.ts","../../node_modules/.pnpm/@babel+parser@7.28.6/node_modules/@babel/parser/typings/babel-parser.d.ts","../../node_modules/.pnpm/@vue+compiler-core@3.5.26/node_modules/@vue/compiler-core/dist/compiler-core.d.ts","../../node_modules/.pnpm/@vue+compiler-dom@3.5.26/node_modules/@vue/compiler-dom/dist/compiler-dom.d.ts","../../node_modules/.pnpm/vue@3.5.26_typescript@5.3.3/node_modules/vue/dist/vue.d.mts","./src/types.ts","../../node_modules/.pnpm/@fortawesome+fontawesome-common-types@6.7.2/node_modules/@fortawesome/fontawesome-common-types/index.d.ts","../../node_modules/.pnpm/@fortawesome+fontawesome-svg-core@6.7.2/node_modules/@fortawesome/fontawesome-svg-core/index.d.ts","../../node_modules/.pnpm/@awesome.me+kit-8137893ad3@1.0.396/node_modules/@awesome.me/kit-8137893ad3/icons/modules/icon-types.ts","../../node_modules/.pnpm/@awesome.me+kit-8137893ad3@1.0.396/node_modules/@awesome.me/kit-8137893ad3/icons/modules/index.d.ts","../../node_modules/.pnpm/@fortawesome+vue-fontawesome@3.1.3_@fortawesome+fontawesome-svg-core@6.7.2_vue@3.5.26_typescript@5.3.3_/node_modules/@fortawesome/vue-fontawesome/index.d.ts","../icons/src/types.ts","../icons/src/fzicon.vue.ts","../icons/src/index.ts","../button/src/types.ts","../button/src/utils.ts","../button/src/fzbutton.vue.ts","../button/src/fziconbutton.vue.ts","../container/src/types.ts","../container/src/fzcontainer.vue.ts","../container/src/index.ts","../button/src/fzbuttongroup.vue.ts","../button/src/index.ts","../composables/src/types.ts","../composables/src/utils/number/index.ts","../composables/src/utils/position/index.ts","../composables/src/utils/index.ts","../composables/src/composables/usefloating.ts","../composables/src/composables/usemediaquery.ts","../composables/src/composables/usebreakpoints.ts","../composables/src/composables/useclickoutside.ts","../composables/src/composables/usekeydown.ts","../composables/src/composables/usekeyup.ts","../composables/src/composables/usecurrency.ts","../composables/src/composables/index.ts","../style/src/custom-directives/validation.ts","../style/src/custom-directives/config.ts","../style/src/custom-directives/vbold.ts","../style/tokens.json","../style/safe-colors.json","../style/safe-semantic-colors.json","../style/src/custom-directives/vcolor.ts","../style/src/custom-directives/vsmall.ts","../style/src/custom-directives/index.ts","../style/src/constants.ts","../style/src/index.ts","../composables/src/fzfloating.vue.ts","../composables/src/index.ts","./src/fzcard.vue.ts","./__vls_types.d.ts","./dist/src/types.d.ts","./dist/src/fzcard.vue.d.ts","./dist/src/index.d.ts","./dist/index.d.ts","./src/index.ts"],"fileInfos":[{"version":"0","affectsGlobalScope":true},"0","0","0","0","0","0",{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},"0","0",{"version":"0","affectsGlobalScope":true},"0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0",{"version":"0","affectsGlobalScope":true},"0","0","0","0","0"],"root":[57,[100,106]],"options":{"composite":true,"esModuleInterop":true,"jsx":1,"jsxImportSource":"vue","module":99,"noImplicitThis":true,"skipLibCheck":true,"strict":true,"target":99,"useDefineForClassFields":true},"fileIdsList":[[51,58],[60],[52],[58],[56,59],[46,52,53],[54],[46],[46,47,48,50],[47,48,49,50],[50,55],[50],[51,56,65,66,67],[51,56,66,67,72],[51,56,66,67,68],[51,66,68,69,73],[51,65],[51,56,66,68],[51,56],[104],[56,102],[102,103],[51,56,57,72,74,97,99],[51,57,100],[51],[51,79,80,81,82,83,84,85],[51,80],[51,75,78],[51,56,75,78],[51,56,75,86,97],[51,75,78,86,98],[51,76,77],[51,75],[51,56,70],[51,70,71],[51,56,61,62,63],[51,56,59,61,63,64],[51,90],[51,87],[51,87,88,89,93,94],[51,56,87,88],[51,56,87,88,90,91,92],[51,56,95,96],[51,66],[51,56,66],[51,75,78,86],[51,70],[51,56,59,61,63]],"referencedMap":[[60,1],[61,2],[53,3],[59,4],[62,5],[54,6],[55,7],[47,8],[48,9],[50,10],[56,11],[51,12],[68,13],[73,14],[69,15],[74,16],[66,17],[67,18],[101,19],[105,20],[103,21],[104,22],[100,23],[106,24],[57,25],[86,26],[81,27],[82,19],[85,28],[79,29],[83,19],[84,19],[80,19],[98,30],[99,31],[75,19],[78,32],[76,25],[77,33],[71,34],[72,35],[70,25],[64,36],[65,37],[63,25],[96,38],[88,39],[95,40],[87,19],[89,41],[93,42],[94,41],[97,43]],"exportedModulesMap":[[60,1],[61,2],[53,3],[59,4],[62,5],[54,6],[55,7],[47,8],[48,9],[50,10],[56,11],[51,12],[68,13],[73,14],[69,15],[74,44],[66,17],[67,45],[101,19],[105,19],[103,19],[104,19],[102,19],[100,23],[106,19],[57,25],[86,26],[81,27],[82,19],[85,28],[79,29],[83,19],[84,19],[80,19],[98,30],[99,46],[75,19],[78,32],[76,25],[77,33],[71,34],[72,47],[70,25],[64,36],[65,48],[63,25],[96,38],[88,39],[95,40],[87,19],[89,41],[93,42],[94,41],[97,43]],"semanticDiagnosticsPerFile":[60,61,53,52,58,59,62,54,55,47,48,50,46,49,44,45,8,9,11,10,2,12,13,14,15,16,17,18,19,3,4,20,24,21,22,23,25,26,27,5,28,29,30,31,6,35,32,33,34,36,7,37,42,43,38,39,40,41,1,56,51,68,73,69,74,66,67,101,105,103,104,102,100,106,57,86,81,82,85,79,83,84,80,98,99,75,78,76,77,71,72,70,64,65,63,91,92,96,88,95,87,89,93,94,97,90],"affectedFilesPendingEmit":[100,106,57],"emitSignatures":[57,100]},"version":"5.3.3"}
+{"program":{"fileNames":["../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es5.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2015.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2016.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2017.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2018.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2019.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2020.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.dom.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.dom.iterable.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2015.core.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2015.collection.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2015.generator.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2015.iterable.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2015.promise.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2015.proxy.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2015.reflect.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2015.symbol.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2016.array.include.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2017.date.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2017.object.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2017.string.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2017.intl.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2017.typedarrays.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2018.asynciterable.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2018.intl.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2018.promise.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2018.regexp.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2019.array.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2019.object.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2019.string.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2019.symbol.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2019.intl.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2020.bigint.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2020.date.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2020.promise.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2020.sharedmemory.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2020.string.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2020.symbol.wellknown.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2020.intl.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.es2020.number.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.decorators.d.ts","../../node_modules/.pnpm/typescript@5.3.3/node_modules/typescript/lib/lib.decorators.legacy.d.ts","../../node_modules/.pnpm/@vue+shared@3.5.26/node_modules/@vue/shared/dist/shared.d.ts","../../node_modules/.pnpm/@vue+reactivity@3.5.26/node_modules/@vue/reactivity/dist/reactivity.d.ts","../../node_modules/.pnpm/@vue+runtime-core@3.5.26/node_modules/@vue/runtime-core/dist/runtime-core.d.ts","../../node_modules/.pnpm/csstype@3.2.3/node_modules/csstype/index.d.ts","../../node_modules/.pnpm/@vue+runtime-dom@3.5.26/node_modules/@vue/runtime-dom/dist/runtime-dom.d.ts","../../node_modules/.pnpm/vue@3.5.26_typescript@5.3.3/node_modules/vue/jsx-runtime/index.d.ts","../../node_modules/.pnpm/@babel+types@7.28.6/node_modules/@babel/types/lib/index.d.ts","../../node_modules/.pnpm/@babel+parser@7.28.6/node_modules/@babel/parser/typings/babel-parser.d.ts","../../node_modules/.pnpm/@vue+compiler-core@3.5.26/node_modules/@vue/compiler-core/dist/compiler-core.d.ts","../../node_modules/.pnpm/@vue+compiler-dom@3.5.26/node_modules/@vue/compiler-dom/dist/compiler-dom.d.ts","../../node_modules/.pnpm/vue@3.5.26_typescript@5.3.3/node_modules/vue/dist/vue.d.mts","./src/types.ts","../../node_modules/.pnpm/@fortawesome+fontawesome-common-types@6.7.2/node_modules/@fortawesome/fontawesome-common-types/index.d.ts","../../node_modules/.pnpm/@fortawesome+fontawesome-svg-core@6.7.2/node_modules/@fortawesome/fontawesome-svg-core/index.d.ts","../../node_modules/.pnpm/@awesome.me+kit-8137893ad3@1.0.401/node_modules/@awesome.me/kit-8137893ad3/icons/modules/icon-types.ts","../../node_modules/.pnpm/@awesome.me+kit-8137893ad3@1.0.401/node_modules/@awesome.me/kit-8137893ad3/icons/modules/index.d.ts","../../node_modules/.pnpm/@fortawesome+vue-fontawesome@3.1.3_@fortawesome+fontawesome-svg-core@6.7.2_vue@3.5.26_typescript@5.3.3_/node_modules/@fortawesome/vue-fontawesome/index.d.ts","../icons/src/types.ts","../icons/src/fzicon.vue.ts","../icons/src/fziconbackground.vue.ts","../icons/src/index.ts","../button/src/types.ts","../button/src/utils.ts","../button/src/fzbutton.vue.ts","../button/src/fziconbutton.vue.ts","../container/src/types.ts","../container/src/fzcontainer.vue.ts","../container/src/index.ts","../button/src/fzbuttongroup.vue.ts","../button/src/index.ts","../composables/src/types.ts","../composables/src/utils/number/index.ts","../composables/src/utils/position/index.ts","../composables/src/utils/index.ts","../composables/src/composables/usefloating.ts","../composables/src/composables/usemediaquery.ts","../composables/src/composables/usebreakpoints.ts","../composables/src/composables/useclickoutside.ts","../composables/src/composables/usekeydown.ts","../composables/src/composables/usekeyup.ts","../composables/src/composables/usecurrency.ts","../composables/src/composables/index.ts","../style/src/custom-directives/validation.ts","../style/src/custom-directives/config.ts","../style/src/custom-directives/vbold.ts","../style/tokens.json","../style/safe-colors.json","../style/safe-semantic-colors.json","../style/src/custom-directives/vcolor.ts","../style/src/custom-directives/vsmall.ts","../style/src/custom-directives/index.ts","../style/src/constants.ts","../style/src/index.ts","../composables/src/fzfloating.vue.ts","../composables/src/index.ts","./src/fzcard.vue.ts","./__vls_types.d.ts","./dist/src/types.d.ts","./dist/src/fzcard.vue.d.ts","./dist/src/index.d.ts","./dist/index.d.ts","./src/index.ts"],"fileInfos":[{"version":"0","affectsGlobalScope":true},"0","0","0","0","0","0",{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},{"version":"0","affectsGlobalScope":true},"0","0",{"version":"0","affectsGlobalScope":true},"0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0",{"version":"0","affectsGlobalScope":true},"0","0","0","0","0"],"root":[57,[101,107]],"options":{"composite":true,"esModuleInterop":true,"jsx":1,"jsxImportSource":"vue","module":99,"noImplicitThis":true,"skipLibCheck":true,"strict":true,"target":99,"useDefineForClassFields":true},"fileIdsList":[[51,58],[60],[52],[58],[56,59],[46,52,53],[54],[46],[46,47,48,50],[47,48,49,50],[50,55],[50],[51,56,66,67,68],[51,56,67,68,73],[51,56,67,68,69],[51,67,69,70,74],[51,66],[51,56,67,69],[51,56],[105],[56,103],[103,104],[51,56,57,73,75,98,100],[51,57,101],[51],[51,80,81,82,83,84,85,86],[51,81],[51,76,79],[51,56,76,79],[51,56,76,87,98],[51,76,79,87,99],[51,77,78],[51,76],[51,56,71],[51,71,72],[51,56,61,62,63],[51,56,63,64],[51,56,59,61,63,64,65],[51,91],[51,88],[51,88,89,90,94,95],[51,56,88,89],[51,56,88,89,91,92,93],[51,56,96,97],[],[67],[66],[80,81,82,83,84,85,86],[81],[76,79],[76,79,87],[77,78],[76],[71],[59,63],[91],[97]],"referencedMap":[[60,1],[61,2],[53,3],[59,4],[62,5],[54,6],[55,7],[47,8],[48,9],[50,10],[56,11],[51,12],[69,13],[74,14],[70,15],[75,16],[67,17],[68,18],[102,19],[106,20],[104,21],[105,22],[101,23],[107,24],[57,25],[87,26],[82,27],[83,19],[86,28],[80,29],[84,19],[85,19],[81,19],[99,30],[100,31],[76,19],[79,32],[77,25],[78,33],[72,34],[73,35],[71,25],[64,36],[65,37],[66,38],[63,25],[97,39],[89,40],[96,41],[88,19],[90,42],[94,43],[95,42],[98,44]],"exportedModulesMap":[[60,1],[61,2],[53,3],[58,45],[59,4],[62,5],[54,6],[55,7],[47,8],[48,9],[50,10],[44,45],[45,45],[8,45],[9,45],[11,45],[10,45],[2,45],[12,45],[13,45],[14,45],[15,45],[16,45],[17,45],[18,45],[19,45],[3,45],[4,45],[20,45],[24,45],[21,45],[22,45],[23,45],[25,45],[26,45],[27,45],[5,45],[28,45],[29,45],[30,45],[31,45],[6,45],[35,45],[32,45],[33,45],[34,45],[36,45],[7,45],[37,45],[42,45],[43,45],[38,45],[39,45],[40,45],[41,45],[1,45],[56,11],[51,12],[69,13],[74,14],[70,15],[75,46],[67,47],[68,46],[102,19],[106,19],[104,19],[105,19],[103,19],[101,23],[107,19],[57,45],[87,48],[82,49],[83,45],[86,50],[80,50],[84,45],[85,45],[81,45],[99,30],[100,51],[76,45],[79,52],[77,53],[78,53],[72,34],[73,54],[71,45],[64,36],[65,37],[66,55],[63,45],[92,45],[93,45],[97,56],[89,40],[96,41],[88,19],[90,42],[94,43],[95,42],[98,57],[91,45]],"semanticDiagnosticsPerFile":[60,61,53,52,58,59,62,54,55,47,48,50,46,49,44,45,8,9,11,10,2,12,13,14,15,16,17,18,19,3,4,20,24,21,22,23,25,26,27,5,28,29,30,31,6,35,32,33,34,36,7,37,42,43,38,39,40,41,1,56,51,69,74,70,75,67,68,102,106,104,105,103,101,107,57,87,82,83,86,80,84,85,81,99,100,76,79,77,78,72,73,71,64,65,66,63,92,93,97,89,96,88,90,94,95,98,91],"affectedFilesPendingEmit":[101,107,57],"emitSignatures":[57,101]},"version":"5.3.3"}