@superruudje/picobello 0.1.0-beta.2 → 0.1.0-beta.3

package/README.md

@@ -18,6 +18,7 @@ npm install @rudihaamke/picobello@beta
 ## Usage
 
 ### Import styles (required)
+
 Import the global styles once in your app entry:
 
 ```ts
@@ -26,6 +27,7 @@ import "@rudihaamke/picobello/dist/style.css";
 ```
 
 ### Use components
+
 ```vue
 <script setup lang="ts">
 import { Button, Heading, Flex } from "@rudihaamke/picobello";

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),r=["aria-hidden"],d=e.defineComponent({__name:"Icon",props:{name:{},size:{default:"1em"},title:{}},setup(t){return(l,o)=>(e.openBlock(),e.createElementBlock("i",{class:e.normalizeClass(["bi",`bi-${t.name}`]),style:e.normalizeStyle({fontSize:typeof t.size=="number"?`${t.size}px`:t.size}),"aria-hidden":t.title?void 0:"true",role:"img"},null,14,r))}}),u={class:"alert__icon"},m={class:"alert__content"},f=e.defineComponent({__name:"Alert",props:{type:{default:"info"}},setup(t){const l=t,o=e.computed(()=>l.type==="warning"?"exclamation-circle-fill":l.type==="success"?"check-circle-fill":l.type==="info"?"info-circle-fill":l.type==="danger"?"x-circle-fill":"");return(n,a)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([`alert--${l.type}`,"alert"])},[e.createElementVNode("div",u,[e.renderSlot(n.$slots,"alert-icon",{},()=>[e.createVNode(d,{name:o.value},null,8,["name"])])]),e.createElementVNode("div",m,[e.renderSlot(n.$slots,"alert-content")])],2))}}),b={key:0,class:"btn__text"},h=e.defineComponent({__name:"Button",props:{label:{},variant:{default:"primary"},size:{default:"default"},disabled:{type:Boolean,default:!1},active:{type:Boolean,default:!1},as:{default:"button"},href:{},type:{default:"button"}},setup(t){const l=t,o=e.computed(()=>["btn",`btn--${l.variant}`,l.size==="small"&&"btn--small",l.disabled&&"btn--disabled",l.active&&"active"]),n=a=>{l.disabled&&(a.preventDefault(),a.stopImmediatePropagation())};return(a,s)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.as),{"aria-disabled":t.as!=="button"?t.disabled:void 0,class:e.normalizeClass(o.value),disabled:t.as==="button"?t.disabled:void 0,href:t.as==="a"&&!t.disabled?t.href:void 0,type:t.as==="button"?t.type:void 0,onClick:n},{default:e.withCtx(()=>[e.renderSlot(a.$slots,"icon-left"),t.label?(e.openBlock(),e.createElementBlock("span",b,e.toDisplayString(t.label),1)):e.renderSlot(a.$slots,"default",{key:1}),e.renderSlot(a.$slots,"icon-right")]),_:3},8,["aria-disabled","class","disabled","href","type"]))}}),v={class:"card"},p={key:0,class:"card__header"},y={key:0,class:"card__title"},k=["aria-expanded"],B={key:1,class:"card__footer"},C={class:"card__footer-content"},$=e.defineComponent({__name:"Card",props:{title:{},collapsible:{type:Boolean,default:!1},defaultCollapsed:{type:Boolean,default:!1}},setup(t){const l=t,o=e.useSlots(),n=e.computed(()=>!!l.title||!!o["header-icon"]),a=e.computed(()=>!!o["footer-content"]),s=e.ref(l.defaultCollapsed);function i(){s.value=!s.value}return(c,S)=>(e.openBlock(),e.createElementBlock("div",v,[n.value?(e.openBlock(),e.createElementBlock("div",p,[e.renderSlot(c.$slots,"header-icon"),t.title?(e.openBlock(),e.createElementBlock("h3",y,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),e.renderSlot(c.$slots,"header-buttons"),t.collapsible?(e.openBlock(),e.createElementBlock("button",{key:1,class:"card__collapse-toggle btn btn--small btn--secondary",type:"button",onClick:i,"aria-expanded":!s.value},[e.renderSlot(c.$slots,"collapse-indicator",{},()=>[e.createElementVNode("i",{class:e.normalizeClass(["bi bi-chevron-up",{"is-collapsed":s.value}])},null,2)])],8,k)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass(["card__body",{"with-header":n.value}])},[e.renderSlot(c.$slots,"card-body")],2),[[e.vShow,!s.value]]),a.value&&!s.value?(e.openBlock(),e.createElementBlock("div",B,[e.createElementVNode("div",C,[e.renderSlot(c.$slots,"footer-content")])])):e.createCommentVNode("",!0)]))}});exports.Alert=f;exports.Button=h;exports.Card=$;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),u=["aria-hidden"],d=e.defineComponent({__name:"Icon",props:{name:{},size:{default:"1em"},title:{}},setup(t){return(a,l)=>(e.openBlock(),e.createElementBlock("i",{class:e.normalizeClass(["bi",`bi-${t.name}`]),style:e.normalizeStyle({fontSize:typeof t.size=="number"?`${t.size}px`:t.size}),"aria-hidden":t.title?void 0:"true",role:"img"},null,14,u))}}),f={class:"alert__icon"},m={class:"alert__content"},v=e.defineComponent({__name:"Alert",props:{type:{default:"info"}},setup(t){const a=t,l=e.computed(()=>a.type==="warning"?"exclamation-circle-fill":a.type==="success"?"check-circle-fill":a.type==="info"?"info-circle-fill":a.type==="danger"?"x-circle-fill":"");return(o,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([`alert--${a.type}`,"alert"])},[e.createElementVNode("div",f,[e.renderSlot(o.$slots,"alert-icon",{},()=>[e.createVNode(d,{name:l.value},null,8,["name"])])]),e.createElementVNode("div",m,[e.renderSlot(o.$slots,"alert-content")])],2))}}),p={key:0,class:"btn__text"},y=e.defineComponent({__name:"Button",props:{label:{},variant:{default:"primary"},size:{default:"default"},disabled:{type:Boolean,default:!1},active:{type:Boolean,default:!1},as:{default:"button"},href:{},type:{default:"button"}},setup(t){const a=t,l=e.computed(()=>["btn",`btn--${a.variant}`,a.size==="small"&&"btn--small",a.disabled&&"btn--disabled",a.active&&"active"]),o=n=>{a.disabled&&(n.preventDefault(),n.stopImmediatePropagation())};return(n,i)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.as),{"aria-disabled":t.as!=="button"?t.disabled:void 0,class:e.normalizeClass(l.value),disabled:t.as==="button"?t.disabled:void 0,href:t.as==="a"&&!t.disabled?t.href:void 0,type:t.as==="button"?t.type:void 0,onClick:o},{default:e.withCtx(()=>[e.renderSlot(n.$slots,"icon-left"),t.label?(e.openBlock(),e.createElementBlock("span",p,e.toDisplayString(t.label),1)):e.renderSlot(n.$slots,"default",{key:1}),e.renderSlot(n.$slots,"icon-right")]),_:3},8,["aria-disabled","class","disabled","href","type"]))}}),b={class:"card"},h={key:0,class:"card__header"},g={key:0,class:"card__title"},C=["aria-expanded"],k={key:1,class:"card__footer"},$={class:"card__footer-content"},B=e.defineComponent({__name:"Card",props:{title:{},collapsible:{type:Boolean,default:!1},defaultCollapsed:{type:Boolean,default:!1}},setup(t){const a=t,l=e.useSlots(),o=e.computed(()=>!!a.title||!!l["header-icon"]),n=e.computed(()=>!!l["footer-content"]),i=e.ref(a.defaultCollapsed);function r(){i.value=!i.value}return(s,c)=>(e.openBlock(),e.createElementBlock("div",b,[o.value?(e.openBlock(),e.createElementBlock("div",h,[e.renderSlot(s.$slots,"header-icon"),t.title?(e.openBlock(),e.createElementBlock("h3",g,e.toDisplayString(t.title),1)):e.createCommentVNode("",!0),e.renderSlot(s.$slots,"header-buttons"),t.collapsible?(e.openBlock(),e.createElementBlock("button",{key:1,"aria-expanded":!i.value,class:"card__collapse-toggle btn btn--small btn--secondary",type:"button",onClick:r},[e.renderSlot(s.$slots,"collapse-indicator",{},()=>[e.createElementVNode("i",{class:e.normalizeClass([{"is-collapsed":i.value},"bi bi-chevron-up"])},null,2)])],8,C)):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.withDirectives(e.createElementVNode("div",{class:e.normalizeClass([{"with-header":o.value},"card__body"])},[e.renderSlot(s.$slots,"card-body")],2),[[e.vShow,!i.value]]),n.value&&!i.value?(e.openBlock(),e.createElementBlock("div",k,[e.createElementVNode("div",$,[e.renderSlot(s.$slots,"footer-content")])])):e.createCommentVNode("",!0)]))}}),E=e.defineComponent({__name:"Flex",props:{direction:{default:"row"},gap:{default:"md"},align:{},justify:{},wrap:{type:Boolean,default:!1},inline:{type:Boolean,default:!1}},setup(t){const a=t,l=e.computed(()=>typeof a.gap=="number"?{gap:`${a.gap}px`}:{});return(o,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["flex",`flex--${t.direction}`,typeof t.gap=="string"&&`flex--gap-${t.gap}`,t.align&&`flex--align-${t.align}`,t.justify&&`flex--justify-${t.justify}`,t.wrap&&"flex--wrap",t.inline&&"flex--inline"]),style:e.normalizeStyle(l.value)},[e.renderSlot(o.$slots,"default")],6))}}),S=e.defineComponent({__name:"Heading",props:{level:{default:2},visual:{}},setup(t){const a=t,l=e.computed(()=>`h${a.level}`),o=e.computed(()=>a.visual??a.level);return(n,i)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(l.value),{class:e.normalizeClass(["heading",`heading--h${o.value}`])},{default:e.withCtx(()=>[e.renderSlot(n.$slots,"default")]),_:3},8,["class"]))}}),x=["aria-invalid","disabled","placeholder","readonly","type","value"],z=e.defineComponent({__name:"Input",props:{modelValue:{},type:{default:"text"},width:{default:"m"},size:{default:"default"},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},invalid:{type:Boolean,default:!1},placeholder:{}},emits:["update:modelValue","blur","focus","change"],setup(t,{emit:a}){const l=a,o=e.useAttrs(),n=e.computed(()=>{const{class:r,style:s,...c}=o;return c});function i(r){l("update:modelValue",r.target.value)}return(r,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass([`input-wrapper--${t.width}`,"input-wrapper"])},[e.createElementVNode("input",e.mergeProps({"aria-invalid":t.invalid?"true":void 0,class:[[t.size==="large"&&"input--large",t.disabled&&"input--disabled",t.invalid&&"input--invalid"],"input"],disabled:t.disabled,placeholder:t.placeholder,readonly:t.readonly,type:t.type,value:t.modelValue},n.value,{onBlur:s[0]||(s[0]=c=>r.$emit("blur",c)),onChange:s[1]||(s[1]=c=>r.$emit("change",c)),onFocus:s[2]||(s[2]=c=>r.$emit("focus",c)),onInput:i}),null,16,x)],2))}}),w="data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2080%2080'%3e%3cstyle%20type='text/css'%3e%20g.spinner-outer%20{%20animation:%20rotate%202s%20linear%20infinite;%20transform-origin:%2050%25%2050%25;%20}%20@keyframes%20rotate%20{%20to%20{%20transform:%20rotateZ(360deg)}%20}%20circle%20{%20display:%20block;%20fill:%20transparent;%20stroke-width:%204px;%20stroke:%20%23E6EEF7;%20}%20circle.spinner-inner%20{%20animation:%20spin%201.5s%20ease-in-out%20infinite%20both;%20stroke:%20%233291F0;%20stroke-linecap:%20round;%20stroke-dasharray:%20215;%20transform-origin:%2050%25%2050%25;%20}%20@keyframes%20spin%20{%200%25,%2025%25%20{%20stroke-dashoffset:%20210;%20transform:%20rotate(0);%20}%2050%25,%2075%25%20{%20stroke-dashoffset:%2055;%20transform:%20rotate(45deg);%20}%20100%25%20{%20stroke-dashoffset:%20210;%20transform:%20rotate(360deg);%20}%20}%20.logo-container%20{%20animation:%20float%202s%20ease-in-out%20infinite%20alternate;%20transform-origin:%20center;%20}%20@keyframes%20float%20{%20to%20{%20transform:%20translate(40,40)%20translateY(-3px);%20}%20}%20%3c/style%3e%3cg%20class='logo-container'%20transform='translate(40,%2040)'%3e%3cg%20transform='scale(1.2)%20translate(-17,%20-11)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M17.6799%203.10235C21.8055%20-0.186896%2027.9891%200.367995%2031.494%204.33645C34.9979%208.3039%2034.499%2014.1882%2030.3745%2017.4763L25.0703%2021.7052C24.5091%2022.1524%2023.6703%2022.0832%2023.1989%2021.5495L22.3243%2020.5592C21.8532%2020.0257%2021.9278%2019.2277%2022.4906%2018.7793L27.7907%2014.5536C30.2302%2012.6088%2030.5261%209.12242%2028.4457%206.76675C26.3649%204.41041%2022.7007%204.08226%2020.2609%206.0274L11.0169%2013.3971C10.4532%2013.8464%209.61603%2013.7772%209.14388%2013.2428L8.26927%2012.2523C7.79836%2011.719%207.87229%2010.9214%208.43469%2010.4731L17.6799%203.10235ZM8.75677%200.294978C9.31792%20-0.152436%2010.1567%20-0.0832017%2010.6282%200.450462L11.5028%201.44097C11.974%201.9743%2011.8992%202.77244%2011.3366%203.22086L6.0363%207.44637C3.59685%209.39135%203.30094%2012.8777%205.38136%2015.2333C7.46231%2017.5895%2011.1265%2017.9178%2013.5663%2015.9727L22.8103%208.60298C23.374%208.15355%2024.211%208.22278%2024.6831%208.75729L25.5578%209.74763C26.0287%2010.281%2025.9547%2011.0786%2025.3925%2011.5268L16.1471%2018.8977C12.0215%2022.1868%205.8379%2021.6321%202.33307%2017.6635C-1.17088%2013.696%20-0.671964%207.81192%203.45253%204.52369L8.75677%200.294978Z'%20fill='%230073E6'/%3e%3c/g%3e%3c/g%3e%3ccircle%20class='circle'%20cx='40'%20cy='40'%20r='34'/%3e%3cg%20class='spinner-outer'%3e%3ccircle%20class='spinner-inner'%20cx='40'%20cy='40'%20r='34'/%3e%3c/g%3e%3c/svg%3e",V=["aria-label"],N=["src"],L=e.defineComponent({__name:"Loader",props:{size:{default:"medium"},label:{default:"Loading"}},setup(t){return(a,l)=>(e.openBlock(),e.createElementBlock("div",{class:"loader",role:"status","aria-live":"polite","aria-label":t.label},[e.createElementVNode("div",{class:e.normalizeClass(["loader__container",`loader__container--${t.size}`])},[e.renderSlot(a.$slots,"icon",{},()=>[e.createElementVNode("img",{class:"loader__image",src:e.unref(w),alt:""},null,8,N)])],2)],8,V))}}),D={class:"nav-card__media"},_={class:"nav-card__content"},F={class:"nav-card__title"},I={key:0,class:"nav-card__subtext"},j=e.defineComponent({__name:"NavigationCard",props:{title:{},subtext:{},href:{},as:{default:"div"},disabled:{type:Boolean,default:!1}},setup(t){return(a,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.as),{class:"nav-card",href:t.as==="a"&&!t.disabled?t.href:void 0,"aria-disabled":t.disabled?"true":void 0,tabindex:t.disabled?-1:0},{default:e.withCtx(()=>[e.createElementVNode("div",D,[e.renderSlot(a.$slots,"image")]),e.createElementVNode("div",_,[e.createElementVNode("div",F,e.toDisplayString(t.title),1),t.subtext?(e.openBlock(),e.createElementBlock("p",I,e.toDisplayString(t.subtext),1)):e.createCommentVNode("",!0),e.renderSlot(a.$slots,"default")])]),_:3},8,["href","aria-disabled","tabindex"]))}});exports.Alert=v;exports.Button=y;exports.Card=B;exports.Flex=E;exports.Heading=S;exports.Icon=d;exports.Input=z;exports.Loader=L;exports.NavigationCard=j;

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { defineComponent as h, createElementBlock as n, openBlock as s, normalizeStyle as y, normalizeClass as u, computed as b, createElementVNode as r, renderSlot as a, createVNode as $, createBlock as p, resolveDynamicComponent as _, withCtx as k, toDisplayString as m, useSlots as C, ref as g, createCommentVNode as f, withDirectives as z, vShow as B } from "vue";
-const S = ["aria-hidden"], w = /* @__PURE__ */ h({
+import { defineComponent as f, createElementBlock as r, openBlock as l, normalizeStyle as C, normalizeClass as u, computed as b, createElementVNode as d, renderSlot as s, createVNode as k, createBlock as g, resolveDynamicComponent as $, withCtx as p, toDisplayString as y, useSlots as x, ref as w, createCommentVNode as h, withDirectives as B, vShow as L, useAttrs as z, mergeProps as _, unref as V } from "vue";
+const E = ["aria-hidden"], F = /* @__PURE__ */ f({
   __name: "Icon",
   props: {
     name: {},
@@ -7,37 +7,37 @@ const S = ["aria-hidden"], w = /* @__PURE__ */ h({
     title: {}
   },
   setup(e) {
-    return (t, o) => (s(), n("i", {
+    return (t, a) => (l(), r("i", {
       class: u(["bi", `bi-${e.name}`]),
-      style: y({ fontSize: typeof e.size == "number" ? `${e.size}px` : e.size }),
+      style: C({ fontSize: typeof e.size == "number" ? `${e.size}px` : e.size }),
       "aria-hidden": e.title ? void 0 : "true",
       role: "img"
-    }, null, 14, S));
+    }, null, 14, E));
   }
-}), D = { class: "alert__icon" }, N = { class: "alert__content" }, q = /* @__PURE__ */ h({
+}), I = { class: "alert__icon" }, S = { class: "alert__content" }, R = /* @__PURE__ */ f({
   __name: "Alert",
   props: {
     type: { default: "info" }
   },
   setup(e) {
-    const t = e, o = b(() => t.type === "warning" ? "exclamation-circle-fill" : t.type === "success" ? "check-circle-fill" : t.type === "info" ? "info-circle-fill" : t.type === "danger" ? "x-circle-fill" : "");
-    return (i, l) => (s(), n("div", {
+    const t = e, a = b(() => t.type === "warning" ? "exclamation-circle-fill" : t.type === "success" ? "check-circle-fill" : t.type === "info" ? "info-circle-fill" : t.type === "danger" ? "x-circle-fill" : "");
+    return (i, n) => (l(), r("div", {
       class: u([`alert--${t.type}`, "alert"])
     }, [
-      r("div", D, [
-        a(i.$slots, "alert-icon", {}, () => [
-          $(w, { name: o.value }, null, 8, ["name"])
+      d("div", I, [
+        s(i.$slots, "alert-icon", {}, () => [
+          k(F, { name: a.value }, null, 8, ["name"])
         ])
       ]),
-      r("div", N, [
-        a(i.$slots, "alert-content")
+      d("div", S, [
+        s(i.$slots, "alert-content")
       ])
     ], 2));
   }
-}), V = {
+}), N = {
   key: 0,
   class: "btn__text"
-}, G = /* @__PURE__ */ h({
+}, T = /* @__PURE__ */ f({
   __name: "Button",
   props: {
     label: {},
@@ -50,41 +50,41 @@ const S = ["aria-hidden"], w = /* @__PURE__ */ h({
     type: { default: "button" }
   },
   setup(e) {
-    const t = e, o = b(() => [
+    const t = e, a = b(() => [
       "btn",
       `btn--${t.variant}`,
       t.size === "small" && "btn--small",
       t.disabled && "btn--disabled",
       t.active && "active"
-    ]), i = (l) => {
-      t.disabled && (l.preventDefault(), l.stopImmediatePropagation());
+    ]), i = (n) => {
+      t.disabled && (n.preventDefault(), n.stopImmediatePropagation());
     };
-    return (l, c) => (s(), p(_(e.as), {
+    return (n, c) => (l(), g($(e.as), {
       "aria-disabled": e.as !== "button" ? e.disabled : void 0,
-      class: u(o.value),
+      class: u(a.value),
       disabled: e.as === "button" ? e.disabled : void 0,
       href: e.as === "a" && !e.disabled ? e.href : void 0,
       type: e.as === "button" ? e.type : void 0,
       onClick: i
     }, {
-      default: k(() => [
-        a(l.$slots, "icon-left"),
-        e.label ? (s(), n("span", V, m(e.label), 1)) : a(l.$slots, "default", { key: 1 }),
-        a(l.$slots, "icon-right")
+      default: p(() => [
+        s(n.$slots, "icon-left"),
+        e.label ? (l(), r("span", N, y(e.label), 1)) : s(n.$slots, "default", { key: 1 }),
+        s(n.$slots, "icon-right")
       ]),
       _: 3
     }, 8, ["aria-disabled", "class", "disabled", "href", "type"]));
   }
-}), x = { class: "card" }, A = {
+}), j = { class: "card" }, A = {
   key: 0,
   class: "card__header"
-}, E = {
+}, D = {
   key: 0,
   class: "card__title"
-}, I = ["aria-expanded"], F = {
+}, H = ["aria-expanded"], Z = {
   key: 1,
   class: "card__footer"
-}, H = { class: "card__footer-content" }, J = /* @__PURE__ */ h({
+}, M = { class: "card__footer-content" }, W = /* @__PURE__ */ f({
   __name: "Card",
   props: {
     title: {},
@@ -92,46 +92,198 @@ const S = ["aria-hidden"], w = /* @__PURE__ */ h({
     defaultCollapsed: { type: Boolean, default: !1 }
   },
   setup(e) {
-    const t = e, o = C(), i = b(() => !!t.title || !!o["header-icon"]), l = b(() => !!o["footer-content"]), c = g(t.defaultCollapsed);
-    function v() {
+    const t = e, a = x(), i = b(() => !!t.title || !!a["header-icon"]), n = b(() => !!a["footer-content"]), c = w(t.defaultCollapsed);
+    function m() {
       c.value = !c.value;
     }
-    return (d, P) => (s(), n("div", x, [
-      i.value ? (s(), n("div", A, [
-        a(d.$slots, "header-icon"),
-        e.title ? (s(), n("h3", E, m(e.title), 1)) : f("", !0),
-        a(d.$slots, "header-buttons"),
-        e.collapsible ? (s(), n("button", {
+    return (o, v) => (l(), r("div", j, [
+      i.value ? (l(), r("div", A, [
+        s(o.$slots, "header-icon"),
+        e.title ? (l(), r("h3", D, y(e.title), 1)) : h("", !0),
+        s(o.$slots, "header-buttons"),
+        e.collapsible ? (l(), r("button", {
           key: 1,
+          "aria-expanded": !c.value,
           class: "card__collapse-toggle btn btn--small btn--secondary",
           type: "button",
-          onClick: v,
-          "aria-expanded": !c.value
+          onClick: m
         }, [
-          a(d.$slots, "collapse-indicator", {}, () => [
-            r("i", {
-              class: u(["bi bi-chevron-up", { "is-collapsed": c.value }])
+          s(o.$slots, "collapse-indicator", {}, () => [
+            d("i", {
+              class: u([{ "is-collapsed": c.value }, "bi bi-chevron-up"])
             }, null, 2)
           ])
-        ], 8, I)) : f("", !0)
-      ])) : f("", !0),
-      z(r("div", {
-        class: u(["card__body", { "with-header": i.value }])
+        ], 8, H)) : h("", !0)
+      ])) : h("", !0),
+      B(d("div", {
+        class: u([{ "with-header": i.value }, "card__body"])
       }, [
-        a(d.$slots, "card-body")
+        s(o.$slots, "card-body")
       ], 2), [
-        [B, !c.value]
+        [L, !c.value]
       ]),
-      l.value && !c.value ? (s(), n("div", F, [
-        r("div", H, [
-          a(d.$slots, "footer-content")
+      n.value && !c.value ? (l(), r("div", Z, [
+        d("div", M, [
+          s(o.$slots, "footer-content")
         ])
-      ])) : f("", !0)
+      ])) : h("", !0)
     ]));
   }
+}), X = /* @__PURE__ */ f({
+  __name: "Flex",
+  props: {
+    direction: { default: "row" },
+    gap: { default: "md" },
+    align: {},
+    justify: {},
+    wrap: { type: Boolean, default: !1 },
+    inline: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    const t = e, a = b(() => typeof t.gap == "number" ? { gap: `${t.gap}px` } : {});
+    return (i, n) => (l(), r("div", {
+      class: u([
+        "flex",
+        `flex--${e.direction}`,
+        typeof e.gap == "string" && `flex--gap-${e.gap}`,
+        e.align && `flex--align-${e.align}`,
+        e.justify && `flex--justify-${e.justify}`,
+        e.wrap && "flex--wrap",
+        e.inline && "flex--inline"
+      ]),
+      style: C(a.value)
+    }, [
+      s(i.$slots, "default")
+    ], 6));
+  }
+}), ee = /* @__PURE__ */ f({
+  __name: "Heading",
+  props: {
+    level: { default: 2 },
+    visual: {}
+  },
+  setup(e) {
+    const t = e, a = b(() => `h${t.level}`), i = b(() => t.visual ?? t.level);
+    return (n, c) => (l(), g($(a.value), {
+      class: u(["heading", `heading--h${i.value}`])
+    }, {
+      default: p(() => [
+        s(n.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["class"]));
+  }
+}), P = ["aria-invalid", "disabled", "placeholder", "readonly", "type", "value"], te = /* @__PURE__ */ f({
+  __name: "Input",
+  props: {
+    modelValue: {},
+    type: { default: "text" },
+    width: { default: "m" },
+    size: { default: "default" },
+    disabled: { type: Boolean, default: !1 },
+    readonly: { type: Boolean, default: !1 },
+    invalid: { type: Boolean, default: !1 },
+    placeholder: {}
+  },
+  emits: ["update:modelValue", "blur", "focus", "change"],
+  setup(e, { emit: t }) {
+    const a = t, i = z(), n = b(() => {
+      const { class: m, style: o, ...v } = i;
+      return v;
+    });
+    function c(m) {
+      a("update:modelValue", m.target.value);
+    }
+    return (m, o) => (l(), r("div", {
+      class: u([`input-wrapper--${e.width}`, "input-wrapper"])
+    }, [
+      d("input", _({
+        "aria-invalid": e.invalid ? "true" : void 0,
+        class: [[
+          e.size === "large" && "input--large",
+          e.disabled && "input--disabled",
+          e.invalid && "input--invalid"
+        ], "input"],
+        disabled: e.disabled,
+        placeholder: e.placeholder,
+        readonly: e.readonly,
+        type: e.type,
+        value: e.modelValue
+      }, n.value, {
+        onBlur: o[0] || (o[0] = (v) => m.$emit("blur", v)),
+        onChange: o[1] || (o[1] = (v) => m.$emit("change", v)),
+        onFocus: o[2] || (o[2] = (v) => m.$emit("focus", v)),
+        onInput: c
+      }), null, 16, P)
+    ], 2));
+  }
+}), U = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2080%2080'%3e%3cstyle%20type='text/css'%3e%20g.spinner-outer%20{%20animation:%20rotate%202s%20linear%20infinite;%20transform-origin:%2050%25%2050%25;%20}%20@keyframes%20rotate%20{%20to%20{%20transform:%20rotateZ(360deg)}%20}%20circle%20{%20display:%20block;%20fill:%20transparent;%20stroke-width:%204px;%20stroke:%20%23E6EEF7;%20}%20circle.spinner-inner%20{%20animation:%20spin%201.5s%20ease-in-out%20infinite%20both;%20stroke:%20%233291F0;%20stroke-linecap:%20round;%20stroke-dasharray:%20215;%20transform-origin:%2050%25%2050%25;%20}%20@keyframes%20spin%20{%200%25,%2025%25%20{%20stroke-dashoffset:%20210;%20transform:%20rotate(0);%20}%2050%25,%2075%25%20{%20stroke-dashoffset:%2055;%20transform:%20rotate(45deg);%20}%20100%25%20{%20stroke-dashoffset:%20210;%20transform:%20rotate(360deg);%20}%20}%20.logo-container%20{%20animation:%20float%202s%20ease-in-out%20infinite%20alternate;%20transform-origin:%20center;%20}%20@keyframes%20float%20{%20to%20{%20transform:%20translate(40,40)%20translateY(-3px);%20}%20}%20%3c/style%3e%3cg%20class='logo-container'%20transform='translate(40,%2040)'%3e%3cg%20transform='scale(1.2)%20translate(-17,%20-11)'%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M17.6799%203.10235C21.8055%20-0.186896%2027.9891%200.367995%2031.494%204.33645C34.9979%208.3039%2034.499%2014.1882%2030.3745%2017.4763L25.0703%2021.7052C24.5091%2022.1524%2023.6703%2022.0832%2023.1989%2021.5495L22.3243%2020.5592C21.8532%2020.0257%2021.9278%2019.2277%2022.4906%2018.7793L27.7907%2014.5536C30.2302%2012.6088%2030.5261%209.12242%2028.4457%206.76675C26.3649%204.41041%2022.7007%204.08226%2020.2609%206.0274L11.0169%2013.3971C10.4532%2013.8464%209.61603%2013.7772%209.14388%2013.2428L8.26927%2012.2523C7.79836%2011.719%207.87229%2010.9214%208.43469%2010.4731L17.6799%203.10235ZM8.75677%200.294978C9.31792%20-0.152436%2010.1567%20-0.0832017%2010.6282%200.450462L11.5028%201.44097C11.974%201.9743%2011.8992%202.77244%2011.3366%203.22086L6.0363%207.44637C3.59685%209.39135%203.30094%2012.8777%205.38136%2015.2333C7.46231%2017.5895%2011.1265%2017.9178%2013.5663%2015.9727L22.8103%208.60298C23.374%208.15355%2024.211%208.22278%2024.6831%208.75729L25.5578%209.74763C26.0287%2010.281%2025.9547%2011.0786%2025.3925%2011.5268L16.1471%2018.8977C12.0215%2022.1868%205.8379%2021.6321%202.33307%2017.6635C-1.17088%2013.696%20-0.671964%207.81192%203.45253%204.52369L8.75677%200.294978Z'%20fill='%230073E6'/%3e%3c/g%3e%3c/g%3e%3ccircle%20class='circle'%20cx='40'%20cy='40'%20r='34'/%3e%3cg%20class='spinner-outer'%3e%3ccircle%20class='spinner-inner'%20cx='40'%20cy='40'%20r='34'/%3e%3c/g%3e%3c/svg%3e", Y = ["aria-label"], q = ["src"], ae = /* @__PURE__ */ f({
+  __name: "Loader",
+  props: {
+    size: { default: "medium" },
+    label: { default: "Loading" }
+  },
+  setup(e) {
+    return (t, a) => (l(), r("div", {
+      class: "loader",
+      role: "status",
+      "aria-live": "polite",
+      "aria-label": e.label
+    }, [
+      d("div", {
+        class: u(["loader__container", `loader__container--${e.size}`])
+      }, [
+        s(t.$slots, "icon", {}, () => [
+          d("img", {
+            class: "loader__image",
+            src: V(U),
+            alt: ""
+          }, null, 8, q)
+        ])
+      ], 2)
+    ], 8, Y));
+  }
+}), G = { class: "nav-card__media" }, J = { class: "nav-card__content" }, K = { class: "nav-card__title" }, O = {
+  key: 0,
+  class: "nav-card__subtext"
+}, le = /* @__PURE__ */ f({
+  __name: "NavigationCard",
+  props: {
+    title: {},
+    subtext: {},
+    href: {},
+    as: { default: "div" },
+    disabled: { type: Boolean, default: !1 }
+  },
+  setup(e) {
+    return (t, a) => (l(), g($(e.as), {
+      class: "nav-card",
+      href: e.as === "a" && !e.disabled ? e.href : void 0,
+      "aria-disabled": e.disabled ? "true" : void 0,
+      tabindex: e.disabled ? -1 : 0
+    }, {
+      default: p(() => [
+        d("div", G, [
+          s(t.$slots, "image")
+        ]),
+        d("div", J, [
+          d("div", K, y(e.title), 1),
+          e.subtext ? (l(), r("p", O, y(e.subtext), 1)) : h("", !0),
+          s(t.$slots, "default")
+        ])
+      ]),
+      _: 3
+    }, 8, ["href", "aria-disabled", "tabindex"]));
+  }
 });
 export {
-  q as Alert,
-  G as Button,
-  J as Card
+  R as Alert,
+  T as Button,
+  W as Card,
+  X as Flex,
+  ee as Heading,
+  F as Icon,
+  te as Input,
+  ae as Loader,
+  le as NavigationCard
 };