@phila/phila-ui-core 2.2.1-beta.0 → 2.3.0-beta.2

package/dist/index.css

@@ -0,0 +1 @@
+[data-v-caba8dd2]{color:red;font-size:12px}[data-v-00c91174]{font-weight:700}[data-v-751bf20e] input{border:solid 4px var(--color-primary)}[data-v-751bf20e] input.invalid{border:solid 4px var(--color-danger)}.phila-icon__svg[data-v-55074cbf] svg{display:block;width:100%;height:100%}.phila-icon__svg[data-v-55074cbf] svg path,.phila-icon__svg[data-v-55074cbf] svg circle,.phila-icon__svg[data-v-55074cbf] svg rect,.phila-icon__svg[data-v-55074cbf] svg polygon,.phila-icon__svg[data-v-55074cbf] svg ellipse,.phila-icon__svg[data-v-55074cbf] svg line,.phila-icon__svg[data-v-55074cbf] svg polyline{fill:currentColor}.phila-icon__svg[data-v-55074cbf] svg [stroke]{stroke:currentColor}

package/dist/index.d.ts

@@ -170,8 +170,10 @@ export declare const ActionContent: __VLS_WithTemplateSlots_3<typeof __VLS_compo
 export declare interface ActionContentProps extends BaseIconProps {
     iconRight?: boolean;
     iconOnly?: boolean;
+    inline?: boolean;
     text?: string;
     size?: ComponentSize;
+    shadow?: boolean;
 }
 
 export declare interface BaseIconProps {
@@ -247,6 +249,8 @@ declare type IconBaseProps = BaseProps & BaseIconProps & {
     inline?: boolean;
     /** Icon style variant */
     variant?: IconVariant;
+    /** Whether to apply a drop shadow to the icon */
+    shadow?: boolean;
 };
 
 /** Icon props with discriminated union to enforce accessibility */

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("./classNames-GLLmlfI4.cjs"),n=require("./utils.js"),e=require("./BaseLink.vue_vue_type_script_setup_true_lang-om8rL4lD.cjs"),t=require("./useRouter-C4oT8vFk.cjs"),s=require("./collapse-ApWEJVnD.cjs");exports.cn=u.cn;exports.debounce=n.debounce;exports.generateRandomId=n.generateRandomId;exports.ActionContent=e._sfc_main;exports.BaseLink=e._sfc_main$1;exports.ErrorList=e.ErrorList;exports.Icon=e.Icon;exports.InputLabel=e.InputLabel;exports.InputWrap=e.InputWrap;exports.isRouterLink=t.isRouterLink;exports.useInput=t.useInput;exports.useRouter=t.useRouter;exports.useValidation=t.useValidation;exports.useCollapse=s.useCollapse;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),F=require("@fortawesome/vue-fontawesome");function M(...n){return n.filter(Boolean).join(" ")}function W(n,t){let o;return(...l)=>{o!==void 0&&window.clearTimeout(o),o=window.setTimeout(()=>{n(...l)},t)}}function H(n="phila-ui-"){const t=new Uint8Array(16);crypto.getRandomValues(t);const o=Array.from(t,l=>l.toString(36)).join("").substring(0,12);return`${n}-${o}`}const q=e.ref("");function E(){return{inputValue:q,setInputValue:t=>{q.value=t}}}const r=e.reactive({validateOnBlur:!1,validateOnInput:!1,validateOnChange:!1,validateOnMount:!1,required:!1,isValid:!0,errors:[]}),{inputValue:S}=E();function w(n,t){return{init:()=>{n&&(r.validateOnBlur=n.validateOnBlur??!1,r.validateOnInput=n.validateOnInput??!1,r.validateOnChange=n.validateOnChange??!1,r.validateOnMount=n.validateOnMount??!1,r.validate=n.validate,r.required=n.required??!1,r.errors=n.errors||[])},validation:()=>{const a=Object.assign([],n?.errors||[]);if(r.required&&!S.value&&(r.isValid=!1,a.push("This field is required")),r.validate){const s=r.validate(S.value);typeof s=="string"?(r.isValid=!1,a.push(s)):Array.isArray(s)?(r.isValid=!1,a.push(...s)):r.isValid=!0}r.errors=a,a.length>0?(r.isValid=!1,t?.("error",a)):r.isValid=!0},isValid:e.computed(()=>r.isValid),errors:e.computed(()=>r.errors)}}const U={key:0,class:"input-errors"},K=e.defineComponent({__name:"ErrorList",props:{errors:{},validateOnBlur:{type:Boolean},validateOnInput:{type:Boolean},validateOnChange:{type:Boolean},validateOnMount:{type:Boolean},validate:{type:Function},required:{type:Boolean}},setup(n){const{errors:t,isValid:o}=w(),l=n,a=e.computed(()=>Object.assign([],t.value,l.errors||[]));return(s,m)=>!e.unref(o)&&a.value?.length?(e.openBlock(),e.createElementBlock("div",U,[e.createElementVNode("ul",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.value,(c,d)=>(e.openBlock(),e.createElementBlock("li",{key:d},e.toDisplayString(c),1))),128))])])):e.createCommentVNode("",!0)}}),_=(n,t)=>{const o=n.__vccOpts||n;for(const[l,a]of t)o[l]=a;return o},N=_(K,[["__scopeId","data-v-caba8dd2"]]),G=["for"],J={key:0,class:"required"},Q=e.defineComponent({__name:"InputLabel",props:{id:{},required:{type:Boolean}},setup(n){return(t,o)=>(e.openBlock(),e.createElementBlock("label",{class:"input-label",for:n.id},[e.renderSlot(t.$slots,"default",{},void 0,!0),n.required?(e.openBlock(),e.createElementBlock("span",J,"*")):e.createCommentVNode("",!0)],8,G))}}),A=_(Q,[["__scopeId","data-v-00c91174"]]),X=e.defineComponent({inheritAttrs:!1,__name:"InputWrap",props:{id:{},name:{},placeholder:{},label:{},icon:{},required:{type:Boolean},errors:{},validateOnBlur:{type:Boolean},validateOnInput:{type:Boolean},validateOnChange:{type:Boolean},validateOnMount:{type:Boolean},validate:{type:Function},className:{}},emits:["update:modelValue","input","change","focus","blur","keydown","keyup","keypress","error"],setup(n,{emit:t}){const{setInputValue:o}=E(),l=e.ref(""),a=n,s=t,{init:m,isValid:c,validation:d}=w({validateOnMount:a.validateOnMount??!0,validateOnInput:a.validateOnInput??!0,validateOnBlur:a.validateOnBlur??!0,validateOnChange:a.validateOnChange??!0,required:a.required??!1,errors:a.errors||[],validate:a.validate},s),p=e.computed(()=>({invalid:!c.value})),C=B=>(l.value=B.target.value,s("update:modelValue",l.value),s("input",l.value),o(l.value),a.validateOnInput&&d(),l.value),b=()=>{a.validateOnBlur&&d(),s("blur")},O=()=>{s("focus")};return e.onBeforeMount(()=>{m()}),e.onMounted(()=>{a.validateOnMount&&d()}),(B,T)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["input-wrap",{hasError:!e.unref(c)}])},[a.label?(e.openBlock(),e.createBlock(A,{key:0,id:a.id,required:a.required},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(a.label),1)]),_:1},8,["id","required"])):e.createCommentVNode("",!0),e.renderSlot(B.$slots,"default",e.normalizeProps(e.guardReactiveProps({inputValue:l.value,onBlur:b,onFocus:O,onInput:C,isValid:e.unref(c),inputClasses:p.value})),void 0,!0),e.createVNode(N)],2))}}),Y=_(X,[["__scopeId","data-v-751bf20e"]]),Z=["innerHTML"],ee=["src","alt"],te=e.defineComponent({__name:"Icon",props:{className:{},iconDefinition:{},iconClass:{},src:{},svgRaw:{},variant:{},size:{default:"small"},inline:{type:Boolean},shadow:{type:Boolean},decorative:{type:Boolean},ariaLabel:{}},setup(n){const t=n,o=e.computed(()=>M("phila-icon",t.size&&`phila-icon--${t.size}`,t.inline&&"phila-icon--inline",t.variant&&t.variant!=="default"&&`phila-icon--${t.variant}`,t.shadow&&"phila-icon--shadow",t.className)),l=e.computed(()=>t.decorative?{"aria-hidden":!0}:{"aria-label":t.ariaLabel,role:"img"});return(a,s)=>(e.openBlock(),e.createElementBlock("span",e.mergeProps({class:o.value},l.value),[t.iconDefinition?(e.openBlock(),e.createBlock(e.unref(F.FontAwesomeIcon),{key:0,icon:t.iconDefinition},null,8,["icon"])):t.iconClass?(e.openBlock(),e.createElementBlock("i",{key:1,class:e.normalizeClass(`fa fa-${t.iconClass}`)},null,2)):t.svgRaw?(e.openBlock(),e.createElementBlock("span",{key:2,class:"phila-icon__svg",innerHTML:t.svgRaw},null,8,Z)):t.src?(e.openBlock(),e.createElementBlock("img",{key:3,src:t.src,alt:t.decorative?"":t.ariaLabel||"Icon"},null,8,ee)):e.createCommentVNode("",!0)],16))}}),V=_(te,[["__scopeId","data-v-55074cbf"]]),ne={key:1},ae=e.defineComponent({__name:"ActionContent",props:{iconRight:{type:Boolean,default:!1},iconOnly:{type:Boolean,default:!1},inline:{type:Boolean},text:{default:void 0},size:{default:void 0},shadow:{type:Boolean},iconDefinition:{},iconClass:{},src:{},svgRaw:{},variant:{}},setup(n){const t=n,o=e.computed(()=>t.iconDefinition||t.iconClass||t.src||t.svgRaw),l=e.computed(()=>({iconDefinition:t.iconDefinition,iconClass:t.iconClass,src:t.src,svgRaw:t.svgRaw,size:t.iconOnly?t.size:void 0,decorative:!0,class:"icon",inline:t.inline??!t.iconOnly,shadow:t.shadow}));return(a,s)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[o.value&&!t.iconRight?(e.openBlock(),e.createBlock(V,e.normalizeProps(e.mergeProps({key:0},l.value)),null,16)):e.createCommentVNode("",!0),t.iconOnly?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",ne,[e.renderSlot(a.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])])),o.value&&t.iconRight?(e.openBlock(),e.createBlock(V,e.normalizeProps(e.mergeProps({key:2},l.value)),null,16)):e.createCommentVNode("",!0)],64))}}),L=n=>"to"in n&&n.to!==void 0;function D(){const n=e.inject("router",null),t=e.computed(()=>n!==null);return{router:n,hasRouter:t}}const oe=e.defineComponent({__name:"BaseLink",props:{to:{},href:{},target:{},rel:{},disabled:{type:Boolean},ariaLabel:{},className:{}},setup(n){const t=n,{hasRouter:o}=D(),l=e.computed(()=>L(t)&&o.value?e.resolveComponent("RouterLink"):"a"),a=e.computed(()=>L(t)?{to:t.disabled?void 0:t.to,...t.disabled&&{"aria-disabled":"true"},...t.ariaLabel&&{"aria-label":t.ariaLabel}}:{href:t.disabled?void 0:t.href,...t.target&&{target:t.target},...t.rel&&{rel:t.rel},...t.disabled&&{"aria-disabled":"true"},...t.ariaLabel&&{"aria-label":t.ariaLabel}});return(s,m)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(l.value),e.mergeProps({class:n.className},a.value),{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},16,["class"]))}}),v=e.ref({}),f=e.ref(),h=400,I=e.ref(null);function le(n){const t=n?.group??"global",o=(i,u)=>{v.value[t][i]=u},l=(i,u)=>{v.value[t]={[i]:u}},a=i=>v.value[t][i]??!1,s=i=>{o(i,!a(i))},m=i=>{l(i,!a(i))},c=()=>{v.value[t]={}},d=i=>{i.key==="Escape"&&(o(n.id,!1),g())},p=i=>{if(!n)return;const u=i.target,[y]=Object.keys(v.value[t]).filter(j=>v.value[t][j]===!0),k=document.getElementById(y),P=document.querySelector(`[aria-controls="${y}"]`),x=u.getAttribute("aria-controls")===y||P?.contains(i.target);k&&!k.contains(u)&&!x&&(o(n.id,!1),g())},C=()=>{n&&(f.value=setTimeout(()=>{o(n.id,!1),g()},h))},b=()=>{n&&n.mouseOverToggle===!0&&(I.value=n.id,f.value=setTimeout(()=>{$()},h))},O=()=>{n&&n.mouseOverToggle===!0&&(I.value=null,clearTimeout(f.value),f.value=setTimeout(()=>{I.value!==n.id&&(o(n.id,!1),g())},h))},B=i=>{if(!n)return;const{relatedTarget:u}=i;if(!u||u.getAttribute("aria-controls")===n.id)return;const k=document.getElementById(n.id);k&&k.contains(u)||(clearTimeout(f.value),f.value=setTimeout(()=>{n.openSingle?l(n.id,!1):o(n.id,!1),g()},h))},T=()=>{n&&(n.outsideClickClose&&(document.addEventListener("click",p),document.addEventListener("touchend",p)),n.escapeKeyClose&&document.addEventListener("keydown",d))},g=()=>{document.removeEventListener("click",p),document.removeEventListener("touchend",p),document.removeEventListener("keydown",d),document.removeEventListener("scroll",C)},R=i=>{n&&(i?.preventDefault(),clearTimeout(f.value),T())},z=i=>{n&&(R(i),n.openSingle?m(n.id):s(n.id))},$=i=>{n&&(R(i),n.openSingle?l(n.id,!0):o(n.id,!0))};return e.onBeforeMount(()=>{v.value[t]||c()}),e.onUnmounted(()=>{g()}),{state:v,timeout:f,toggle:s,toggleSingle:m,setCollapsed:o,setSingleCollapsed:l,isCollapsed:a,reset:c,onMouseEnter:b,onMouseLeave:O,focusChange:B,onClickToggle:z,onClickOpen:$}}exports.ActionContent=ae;exports.BaseLink=oe;exports.ErrorList=N;exports.Icon=V;exports.InputLabel=A;exports.InputWrap=Y;exports.cn=M;exports.debounce=W;exports.generateRandomId=H;exports.isRouterLink=L;exports.useCollapse=le;exports.useInput=E;exports.useRouter=D;exports.useValidation=w;

package/dist/index.mjs

@@ -1,21 +1,368 @@
-import { c as o } from "./classNames-CcykAxZN.js";
-import { debounce as r, generateRandomId as t } from "./utils.mjs";
-import { _ as u, c as p, E as i, b as c, a as m, I } from "./BaseLink.vue_vue_type_script_setup_true_lang-Db_46DbD.js";
-import { i as x, u as b, b as d, a as l } from "./useRouter-BVKwor6C.js";
-import { u as R } from "./collapse-BvsHwQBu.js";
+import { ref as k, reactive as te, computed as c, defineComponent as O, createElementBlock as u, createCommentVNode as y, unref as V, openBlock as s, createElementVNode as ne, Fragment as H, renderList as ae, toDisplayString as D, renderSlot as T, onBeforeMount as U, onMounted as ie, normalizeClass as W, createBlock as C, createVNode as le, withCtx as K, createTextVNode as G, normalizeProps as A, guardReactiveProps as oe, mergeProps as w, inject as re, resolveComponent as se, resolveDynamicComponent as ue, onUnmounted as ce } from "vue";
+import { FontAwesomeIcon as de } from "@fortawesome/vue-fontawesome";
+import './index.css';function ve(...t) {
+  return t.filter(Boolean).join(" ");
+}
+function we(t, e) {
+  let a;
+  return (...i) => {
+    a !== void 0 && window.clearTimeout(a), a = window.setTimeout(() => {
+      t(...i);
+    }, e);
+  };
+}
+function Te(t = "phila-ui-") {
+  const e = new Uint8Array(16);
+  crypto.getRandomValues(e);
+  const a = Array.from(e, (i) => i.toString(36)).join("").substring(0, 12);
+  return `${t}-${a}`;
+}
+const z = k("");
+function J() {
+  return {
+    inputValue: z,
+    setInputValue: (e) => {
+      z.value = e;
+    }
+  };
+}
+const o = te({
+  validateOnBlur: !1,
+  validateOnInput: !1,
+  validateOnChange: !1,
+  validateOnMount: !1,
+  required: !1,
+  isValid: !0,
+  errors: []
+}), { inputValue: j } = J();
+function Q(t, e) {
+  return {
+    init: () => {
+      t && (o.validateOnBlur = t.validateOnBlur ?? !1, o.validateOnInput = t.validateOnInput ?? !1, o.validateOnChange = t.validateOnChange ?? !1, o.validateOnMount = t.validateOnMount ?? !1, o.validate = t.validate, o.required = t.required ?? !1, o.errors = t.errors || []);
+    },
+    validation: () => {
+      const n = Object.assign([], t?.errors || []);
+      if (o.required && !j.value && (o.isValid = !1, n.push("This field is required")), o.validate) {
+        const r = o.validate(j.value);
+        typeof r == "string" ? (o.isValid = !1, n.push(r)) : Array.isArray(r) ? (o.isValid = !1, n.push(...r)) : o.isValid = !0;
+      }
+      o.errors = n, n.length > 0 ? (o.isValid = !1, e?.("error", n)) : o.isValid = !0;
+    },
+    isValid: c(() => o.isValid),
+    errors: c(() => o.errors)
+  };
+}
+const fe = {
+  key: 0,
+  class: "input-errors"
+}, me = /* @__PURE__ */ O({
+  __name: "ErrorList",
+  props: {
+    errors: {},
+    validateOnBlur: { type: Boolean },
+    validateOnInput: { type: Boolean },
+    validateOnChange: { type: Boolean },
+    validateOnMount: { type: Boolean },
+    validate: { type: Function },
+    required: { type: Boolean }
+  },
+  setup(t) {
+    const { errors: e, isValid: a } = Q(), i = t, n = c(() => Object.assign([], e.value, i.errors || []));
+    return (r, h) => !V(a) && n.value?.length ? (s(), u("div", fe, [
+      ne("ul", null, [
+        (s(!0), u(H, null, ae(n.value, (v, f) => (s(), u("li", { key: f }, D(v), 1))), 128))
+      ])
+    ])) : y("", !0);
+  }
+}), $ = (t, e) => {
+  const a = t.__vccOpts || t;
+  for (const [i, n] of e)
+    a[i] = n;
+  return a;
+}, ge = /* @__PURE__ */ $(me, [["__scopeId", "data-v-caba8dd2"]]), ye = ["for"], he = {
+  key: 0,
+  class: "required"
+}, _e = /* @__PURE__ */ O({
+  __name: "InputLabel",
+  props: {
+    id: {},
+    required: { type: Boolean }
+  },
+  setup(t) {
+    return (e, a) => (s(), u("label", {
+      class: "input-label",
+      for: t.id
+    }, [
+      T(e.$slots, "default", {}, void 0, !0),
+      t.required ? (s(), u("span", he, "*")) : y("", !0)
+    ], 8, ye));
+  }
+}), pe = /* @__PURE__ */ $(_e, [["__scopeId", "data-v-00c91174"]]), Oe = /* @__PURE__ */ O({
+  inheritAttrs: !1,
+  __name: "InputWrap",
+  props: {
+    id: {},
+    name: {},
+    placeholder: {},
+    label: {},
+    icon: {},
+    required: { type: Boolean },
+    errors: {},
+    validateOnBlur: { type: Boolean },
+    validateOnInput: { type: Boolean },
+    validateOnChange: { type: Boolean },
+    validateOnMount: { type: Boolean },
+    validate: { type: Function },
+    className: {}
+  },
+  emits: ["update:modelValue", "input", "change", "focus", "blur", "keydown", "keyup", "keypress", "error"],
+  setup(t, { emit: e }) {
+    const { setInputValue: a } = J(), i = k(""), n = t, r = e, { init: h, isValid: v, validation: f } = Q(
+      {
+        validateOnMount: n.validateOnMount ?? !0,
+        validateOnInput: n.validateOnInput ?? !0,
+        validateOnBlur: n.validateOnBlur ?? !0,
+        validateOnChange: n.validateOnChange ?? !0,
+        required: n.required ?? !1,
+        errors: n.errors || [],
+        validate: n.validate
+      },
+      r
+    ), _ = c(() => ({
+      invalid: !v.value
+    })), R = (b) => (i.value = b.target.value, r("update:modelValue", i.value), r("input", i.value), a(i.value), n.validateOnInput && f(), i.value), E = () => {
+      n.validateOnBlur && f(), r("blur");
+    }, q = () => {
+      r("focus");
+    };
+    return U(() => {
+      h();
+    }), ie(() => {
+      n.validateOnMount && f();
+    }), (b, S) => (s(), u("div", {
+      class: W(["input-wrap", { hasError: !V(v) }])
+    }, [
+      n.label ? (s(), C(pe, {
+        key: 0,
+        id: n.id,
+        required: n.required
+      }, {
+        default: K(() => [
+          G(D(n.label), 1)
+        ]),
+        _: 1
+      }, 8, ["id", "required"])) : y("", !0),
+      T(b.$slots, "default", A(oe({ inputValue: i.value, onBlur: E, onFocus: q, onInput: R, isValid: V(v), inputClasses: _.value })), void 0, !0),
+      le(ge)
+    ], 2));
+  }
+}), $e = /* @__PURE__ */ $(Oe, [["__scopeId", "data-v-751bf20e"]]), be = ["innerHTML"], Be = ["src", "alt"], Ce = /* @__PURE__ */ O({
+  __name: "Icon",
+  props: {
+    className: {},
+    iconDefinition: {},
+    iconClass: {},
+    src: {},
+    svgRaw: {},
+    variant: {},
+    size: { default: "small" },
+    inline: { type: Boolean },
+    shadow: { type: Boolean },
+    decorative: { type: Boolean },
+    ariaLabel: {}
+  },
+  setup(t) {
+    const e = t, a = c(() => ve(
+      "phila-icon",
+      e.size && `phila-icon--${e.size}`,
+      e.inline && "phila-icon--inline",
+      e.variant && e.variant !== "default" && `phila-icon--${e.variant}`,
+      e.shadow && "phila-icon--shadow",
+      e.className
+    )), i = c(() => e.decorative ? {
+      "aria-hidden": !0
+    } : {
+      "aria-label": e.ariaLabel,
+      role: "img"
+    });
+    return (n, r) => (s(), u("span", w({ class: a.value }, i.value), [
+      e.iconDefinition ? (s(), C(V(de), {
+        key: 0,
+        icon: e.iconDefinition
+      }, null, 8, ["icon"])) : e.iconClass ? (s(), u("i", {
+        key: 1,
+        class: W(`fa fa-${e.iconClass}`)
+      }, null, 2)) : e.svgRaw ? (s(), u("span", {
+        key: 2,
+        class: "phila-icon__svg",
+        innerHTML: e.svgRaw
+      }, null, 8, be)) : e.src ? (s(), u("img", {
+        key: 3,
+        src: e.src,
+        alt: e.decorative ? "" : e.ariaLabel || "Icon"
+      }, null, 8, Be)) : y("", !0)
+    ], 16));
+  }
+}), F = /* @__PURE__ */ $(Ce, [["__scopeId", "data-v-55074cbf"]]), ke = { key: 1 }, Re = /* @__PURE__ */ O({
+  __name: "ActionContent",
+  props: {
+    iconRight: { type: Boolean, default: !1 },
+    iconOnly: { type: Boolean, default: !1 },
+    inline: { type: Boolean },
+    text: { default: void 0 },
+    size: { default: void 0 },
+    shadow: { type: Boolean },
+    iconDefinition: {},
+    iconClass: {},
+    src: {},
+    svgRaw: {},
+    variant: {}
+  },
+  setup(t) {
+    const e = t, a = c(() => e.iconDefinition || e.iconClass || e.src || e.svgRaw), i = c(
+      () => ({
+        iconDefinition: e.iconDefinition,
+        iconClass: e.iconClass,
+        src: e.src,
+        svgRaw: e.svgRaw,
+        size: e.iconOnly ? e.size : void 0,
+        decorative: !0,
+        class: "icon",
+        inline: e.inline ?? !e.iconOnly,
+        shadow: e.shadow
+      })
+    );
+    return (n, r) => (s(), u(H, null, [
+      a.value && !e.iconRight ? (s(), C(F, A(w({ key: 0 }, i.value)), null, 16)) : y("", !0),
+      e.iconOnly ? y("", !0) : (s(), u("span", ke, [
+        T(n.$slots, "default", {}, () => [
+          G(D(e.text), 1)
+        ])
+      ])),
+      a.value && e.iconRight ? (s(), C(F, A(w({ key: 2 }, i.value)), null, 16)) : y("", !0)
+    ], 64));
+  }
+}), P = (t) => "to" in t && t.to !== void 0;
+function Ie() {
+  const t = re("router", null), e = c(() => t !== null);
+  return {
+    router: t,
+    hasRouter: e
+  };
+}
+const Ee = /* @__PURE__ */ O({
+  __name: "BaseLink",
+  props: {
+    to: {},
+    href: {},
+    target: {},
+    rel: {},
+    disabled: { type: Boolean },
+    ariaLabel: {},
+    className: {}
+  },
+  setup(t) {
+    const e = t, { hasRouter: a } = Ie(), i = c(() => P(e) && a.value ? se("RouterLink") : "a"), n = c(() => P(e) ? {
+      to: e.disabled ? void 0 : e.to,
+      ...e.disabled && { "aria-disabled": "true" },
+      ...e.ariaLabel && { "aria-label": e.ariaLabel }
+    } : {
+      href: e.disabled ? void 0 : e.href,
+      ...e.target && { target: e.target },
+      ...e.rel && { rel: e.rel },
+      ...e.disabled && { "aria-disabled": "true" },
+      ...e.ariaLabel && { "aria-label": e.ariaLabel }
+    });
+    return (r, h) => (s(), C(ue(i.value), w({ class: t.className }, n.value), {
+      default: K(() => [
+        T(r.$slots, "default")
+      ]),
+      _: 3
+    }, 16, ["class"]));
+  }
+}), m = k({}), g = k(), L = 400, M = k(null);
+function qe(t) {
+  const e = t?.group ?? "global", a = (l, d) => {
+    m.value[e][l] = d;
+  }, i = (l, d) => {
+    m.value[e] = { [l]: d };
+  }, n = (l) => m.value[e][l] ?? !1, r = (l) => {
+    a(l, !n(l));
+  }, h = (l) => {
+    i(l, !n(l));
+  }, v = () => {
+    m.value[e] = {};
+  }, f = (l) => {
+    l.key === "Escape" && (a(t.id, !1), p());
+  }, _ = (l) => {
+    if (!t) return;
+    const d = l.target, [I] = Object.keys(m.value[e]).filter((ee) => m.value[e][ee] === !0), B = document.getElementById(I), Y = document.querySelector(`[aria-controls="${I}"]`), Z = d.getAttribute("aria-controls") === I || Y?.contains(l.target);
+    B && !B.contains(d) && !Z && (a(t.id, !1), p());
+  }, R = () => {
+    t && (g.value = setTimeout(() => {
+      a(t.id, !1), p();
+    }, L));
+  }, E = () => {
+    t && t.mouseOverToggle === !0 && (M.value = t.id, g.value = setTimeout(() => {
+      x();
+    }, L));
+  }, q = () => {
+    t && t.mouseOverToggle === !0 && (M.value = null, clearTimeout(g.value), g.value = setTimeout(() => {
+      M.value !== t.id && (a(t.id, !1), p());
+    }, L));
+  }, b = (l) => {
+    if (!t) return;
+    const { relatedTarget: d } = l;
+    if (!d || d.getAttribute("aria-controls") === t.id)
+      return;
+    const B = document.getElementById(t.id);
+    B && B.contains(d) || (clearTimeout(g.value), g.value = setTimeout(() => {
+      t.openSingle ? i(t.id, !1) : a(t.id, !1), p();
+    }, L));
+  }, S = () => {
+    t && (t.outsideClickClose && (document.addEventListener("click", _), document.addEventListener("touchend", _)), t.escapeKeyClose && document.addEventListener("keydown", f));
+  }, p = () => {
+    document.removeEventListener("click", _), document.removeEventListener("touchend", _), document.removeEventListener("keydown", f), document.removeEventListener("scroll", R);
+  }, N = (l) => {
+    t && (l?.preventDefault(), clearTimeout(g.value), S());
+  }, X = (l) => {
+    t && (N(l), t.openSingle ? h(t.id) : r(t.id));
+  }, x = (l) => {
+    t && (N(l), t.openSingle ? i(t.id, !0) : a(t.id, !0));
+  };
+  return U(() => {
+    m.value[e] || v();
+  }), ce(() => {
+    p();
+  }), {
+    state: m,
+    timeout: g,
+    toggle: r,
+    toggleSingle: h,
+    setCollapsed: a,
+    setSingleCollapsed: i,
+    isCollapsed: n,
+    reset: v,
+    onMouseEnter: E,
+    onMouseLeave: q,
+    focusChange: b,
+    onClickToggle: X,
+    onClickOpen: x
+  };
+}
 export {
-  u as ActionContent,
-  p as BaseLink,
-  i as ErrorList,
-  c as Icon,
-  m as InputLabel,
-  I as InputWrap,
-  o as cn,
-  r as debounce,
-  t as generateRandomId,
-  x as isRouterLink,
-  R as useCollapse,
-  b as useInput,
-  d as useRouter,
-  l as useValidation
+  Re as ActionContent,
+  Ee as BaseLink,
+  ge as ErrorList,
+  F as Icon,
+  pe as InputLabel,
+  $e as InputWrap,
+  ve as cn,
+  we as debounce,
+  Te as generateRandomId,
+  P as isRouterLink,
+  qe as useCollapse,
+  J as useInput,
+  Ie as useRouter,
+  Q as useValidation
 };

package/dist/styles/elements/buttons.css

@@ -8,7 +8,7 @@
   overflow: hidden;
   white-space: nowrap;
   box-sizing: border-box;
-  border-radius: var(--sizes-scale-400);
+  border-radius: var(--border-radius-2xl);
 
   /* --- Text styles --- */
   color: var(--Schemes-On-Primary-Container);
@@ -30,40 +30,47 @@
   /* --- Reset link styles --- */
   text-decoration: none;
 
+  /* --- Shadow --- */
+  box-shadow:
+    0 1px 2px 0 rgba(0, 0, 0, 0.3),
+    0 1px 3px 1px rgba(0, 0, 0, 0.15);
+
   /* Prevent visited link color changes - maintain button color */
   &:visited:not(:hover):not(:focus):not(:active) {
     color: var(--Schemes-On-Primary-Container);
   }
 
   /* ---  Sizing --- */
-  height: var(--spacing-6xl, 3.25rem);
+  height: var(--dimension-core-700);
   max-width: 18.75rem;
-  padding: var(--spacing-l, 0.5rem) var(--spacing-3xl);
+  padding: var(--spacing-xs) var(--spacing-l);
 
   &.is-medium {
-    height: var(--spacing-5xl, 3rem);
-    padding: var(--spacing-m, 0.75rem) var(--spacing-xxl);
+    height: var(--dimension-core-600);
+    padding: var(--spacing-xs) var(--spacing-m);
   }
   &.is-small {
-    height: var(--spacing-3xl);
-    padding: var(--spacing-s) var(--spacing-l);
+    height: var(--dimension-core-500);
+    padding: var(--spacing-2xs) var(--spacing-s);
   }
   &.is-extra-small:not(.icon-button) {
+    box-shadow: none;
     color: var(--Schemes-Primary-Container);
-    height: var(--spacing-xxl);
-    padding: var(--spacing-xxs);
-    background-color: var(--Schemes-Surface-Container-Lowest) !important;
+    height: var(--dimension-core-400);
+    padding: var(--spacing-3xs);
+    background-color: inherit !important;
     font-family: var(--Label-Default-font-label-default-family, Montserrat);
     font-size: var(--Label-Small-font-label-small-size);
     font-style: normal;
     font-weight: 600;
     line-height: var(--Label-Small-font-label-small-lineheight);
     border-color: var(--Schemes-Surface-Container-Lowest);
-    border-width: var(--spacing-xxs);
+    border-width: var(--spacing-3xs);
     border-style: solid;
     box-sizing: border-box;
     border-left: none;
     border-right: none;
+    border-radius: 0;
     &:focus:not(:disabled),
     &:hover:not(:disabled) {
       --Schemes-On-Primary-Container: --Schemes-Inverse-Surface;
@@ -79,7 +86,7 @@
       color: var(--Schemes-Surface-Container-High);
     }
     &.phila-button--destructive:not(:active) {
-      color: var(--Schemes-Error-Container);
+      color: var(--Schemes-Error);
     }
     &:visited:not(:hover):not(:focus):not(:active) {
       color: var(--Schemes-Primary-Container);
@@ -118,11 +125,11 @@
     color: var(--Schemes-Primary);
     background: var(--Schemes-Surface-Container-Lowest);
     &:not(:active) {
-      border: var(--spacing-xxs) solid var(--Schemes-Primary);
+      border: var(--border-width-m) solid var(--Schemes-Primary);
     }
     &:active:not(:disabled):not(.is-extra-small) {
-      border-right: var(--spacing-xxs) solid var(--Schemes-Surface-Container-Lowest);
-      border-left: var(--spacing-xxs) solid var(--Schemes-Surface-Container-Lowest);
+      border-right: var(--border-width-m) solid var(--Schemes-Surface-Container-Lowest);
+      border-left: var(--border-width-m) solid var(--Schemes-Surface-Container-Lowest);
     }
     &:hover:not(:disabled),
     &:focus:not(:disabled) {
@@ -136,50 +143,51 @@
 
   &.phila-button--destructive:not(:disabled) {
     &:not(.is-extra-small) {
-      background: var(--Schemes-Error-Container);
+      background: var(--Schemes-Error);
     }
   }
 
   /* ---  Icon Buttons --- */
   &.icon-button {
     padding: 0;
-    height: 3.75rem;
-    width: 3.75rem;
+    height: var(--dimension-core-700);
+    width: var(--dimension-core-700);
     border-radius: var(--border-radius-l);
 
     &.is-extra-large {
-      height: 5rem;
-      width: 5rem;
+      height: var(--dimension-core-1000);
+      width: var(--dimension-core-1000);
       border-radius: var(--border-radius-l);
     }
 
     &.is-large {
-      height: 3.75rem;
-      width: 3.75rem;
+      height: var(--dimension-core-700);
+      width: var(--dimension-core-700);
       border-radius: var(--border-radius-m);
     }
 
     &.is-medium {
-      height: 3rem;
-      width: 3rem;
+      height: var(--dimension-core-600);
+      width: var(--dimension-core-600);
       border-radius: var(--border-radius-s);
     }
 
     &.is-small {
-      height: 2rem;
-      width: 2rem;
+      height: var(--dimension-core-400);
+      width: var(--dimension-core-400);
       border-radius: var(--border-radius-xs);
     }
 
     &.is-extra-small {
-      width: 1.5rem;
-      height: 1.5rem;
+      width: var(--dimension-core-300);
+      height: var(--dimension-core-300);
       border-radius: var(--border-radius-xs);
     }
 
     &.icon-button--standard:not(:disabled) {
+      box-shadow: none;
       color: var(--Schemes-Primary, #003282);
-      background: var(--Schemes-Surface-Container-Lowest);
+      background: var(--Schemes-Background);
       &:visited:not(:hover):not(:focus):not(:active) {
         color: var(--Schemes-Primary, #003282);
       }

package/dist/styles/elements/icons.css

@@ -7,45 +7,45 @@
   font-weight: 900;
   line-height: normal;
   font-size: var(--Icon-Solid-Small-font-icon-solid-small-size);
-  height: 2rem;
-  width: 2rem;
+  height: var(--dimension-core-400);
+  width: var(--dimension-core-400);
   padding: var(--spacing-s);
 }
 
 /* Icon size variants */
 .phila-icon--extra-large {
   font-size: var(--Icon-Solid-ExtraLarge-font-icon-solid-xl-size);
-  height: 5rem;
-  width: 5rem;
+  height: var(--dimension-core-1000);
+  width: var(--dimension-core-1000);
   padding: var(--spacing-xl);
 }
 
 .phila-icon--large {
   font-size: var(--Icon-Solid-Large-font-icon-solid-large-size);
-  height: 3.75rem;
-  width: 3.75rem;
+  height: var(--dimension-core-700);
+  width: var(--dimension-core-700);
   padding: var(--spacing-m);
 }
 
 .phila-icon--medium {
   font-size: var(--Icon-Solid-Default-font-icon-solid-default-size);
-  height: 3rem;
-  width: 3rem;
+  height: var(--dimension-core-600);
+  width: var(--dimension-core-600);
   padding: var(--spacing-m);
 }
 
 .phila-icon--small {
   font-size: var(--Icon-Solid-Small-font-icon-solid-small-size);
-  height: 2rem;
-  width: 2rem;
+  height: var(--dimension-core-400);
+  width: var(--dimension-core-400);
   padding: var(--spacing-s);
 }
 
 .phila-icon--extra-small {
   font-size: var(--Icon-Solid-XXSmall-font-icon-solid-xxs-size);
-  height: 1.5rem;
-  width: 1.5rem;
-  padding: var(--scale-xsmall);
+  height: var(--dimension-core-300);
+  width: var(--dimension-core-300);
+  padding: var(--spacing-xs);
 }
 
 .phila-icon.phila-icon--inline {
@@ -60,3 +60,10 @@
   border-radius: 50%;
   color: var(--Schemes-Background);
 }
+
+/* Shadow variant - applies drop shadow to the icon */
+.phila-icon--shadow svg,
+.phila-icon--shadow i,
+.phila-icon--shadow .phila-icon__svg {
+  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.2)) drop-shadow(0 2px 1px rgba(0, 0, 0, 0.1));
+}