@phila/phila-ui-core 2.3.2 → 2.3.3-beta.1

package/dist/index.css

@@ -1 +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}
+[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-1fe4be50] svg{display:block;width:100%;height:100%}.phila-icon__svg[data-v-1fe4be50] svg path,.phila-icon__svg[data-v-1fe4be50] svg circle,.phila-icon__svg[data-v-1fe4be50] svg rect,.phila-icon__svg[data-v-1fe4be50] svg polygon,.phila-icon__svg[data-v-1fe4be50] svg ellipse,.phila-icon__svg[data-v-1fe4be50] svg line,.phila-icon__svg[data-v-1fe4be50] svg polyline{fill:currentColor}.phila-icon__svg[data-v-1fe4be50] svg [stroke]{stroke:currentColor}

package/dist/index.d.ts

@@ -40,16 +40,19 @@ iconOnly: boolean;
 iconRight: boolean;
 text: undefined;
 size: undefined;
+iconSize: undefined;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps_4<ActionContentProps>, {
 iconOnly: boolean;
 iconRight: boolean;
 text: undefined;
 size: undefined;
+iconSize: undefined;
 }>>> & Readonly<{}>, {
 size: ComponentSize;
 text: string;
 iconRight: boolean;
 iconOnly: boolean;
+iconSize: ComponentSize;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
 declare const __VLS_component_4: DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, PublicProps>;
@@ -174,6 +177,7 @@ export declare interface ActionContentProps extends BaseIconProps {
     text?: string;
     size?: ComponentSize;
     shadow?: boolean;
+    iconSize?: ComponentSize;
 }
 
 export declare interface BaseIconProps {
@@ -217,7 +221,7 @@ export declare interface CollapseState {
     [group: string]: CollapseItems;
 }
 
-export declare type ComponentSize = "extra-large" | "large" | "medium" | "small" | "extra-small";
+export declare type ComponentSize = "extra-large" | "large" | "medium" | "small" | "extra-small" | "xxsmall";
 
 export declare function debounce<T extends (...args: unknown[]) => void>(callback: T, wait: number): (...args: Parameters<T>) => void;
 

package/dist/index.js

@@ -1 +1 @@
-"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&&clearTimeout(o),o=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 T(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}=T(),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}=T({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,w)=>(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))},w=()=>{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),w())},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=T;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),F=require("@fortawesome/vue-fontawesome");function x(...n){return n.filter(Boolean).join(" ")}function W(n,t){let o;return(...l)=>{o!==void 0&&clearTimeout(o),o=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 S=e.ref("");function E(){return{inputValue:S,setInputValue:t=>{S.value=t}}}const s=e.reactive({validateOnBlur:!1,validateOnInput:!1,validateOnChange:!1,validateOnMount:!1,required:!1,isValid:!0,errors:[]}),{inputValue:q}=E();function w(n,t){return{init:()=>{n&&(s.validateOnBlur=n.validateOnBlur??!1,s.validateOnInput=n.validateOnInput??!1,s.validateOnChange=n.validateOnChange??!1,s.validateOnMount=n.validateOnMount??!1,s.validate=n.validate,s.required=n.required??!1,s.errors=n.errors||[])},validation:()=>{const a=Object.assign([],n?.errors||[]);if(s.required&&!q.value&&(s.isValid=!1,a.push("This field is required")),s.validate){const i=s.validate(q.value);typeof i=="string"?(s.isValid=!1,a.push(i)):Array.isArray(i)?(s.isValid=!1,a.push(...i)):s.isValid=!0}s.errors=a,a.length>0?(s.isValid=!1,t?.("error",a)):s.isValid=!0},isValid:e.computed(()=>s.isValid),errors:e.computed(()=>s.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(i,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},z=_(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))}}),M=_(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,i=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},i),p=e.computed(()=>({invalid:!c.value})),C=B=>(l.value=B.target.value,i("update:modelValue",l.value),i("input",l.value),o(l.value),a.validateOnInput&&d(),l.value),b=()=>{a.validateOnBlur&&d(),i("blur")},O=()=>{i("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(M,{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(z)],2))}}),Y=_(X,[["__scopeId","data-v-751bf20e"]]),Z=["innerHTML"],ee=["src","alt"],te=e.defineComponent({__name:"Icon",props:{className:{},iconDefinition:{},iconClass:{},src:{},svgRaw:{},variant:{default:"default"},size:{default:"small"},inline:{type:Boolean},shadow:{type:Boolean},decorative:{type:Boolean},ariaLabel:{default:void 0}},setup(n){const t=n,o=e.computed(()=>x("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,i)=>(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-1fe4be50"]]),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},iconSize:{default:void 0},iconDefinition:{},iconClass:{},src:{},svgRaw:{},variant:{}},setup(n){const t=n,o=e.computed(()=>t.iconDefinition||t.iconClass||t.src||t.svgRaw),l=i=>{if(i.iconOnly)switch(i.size){case"small":return"extra-small";case"extra-small":return"xxsmall";default:return i.size||"medium"}else switch(i.size){case"small":case"extra-small":return"xxsmall";default:return"extra-small"}},a=e.computed(()=>({iconDefinition:t.iconDefinition,iconClass:t.iconClass,src:t.src,svgRaw:t.svgRaw,size:t.iconSize??l(t),decorative:!0,class:"icon",inline:t.inline??!t.iconOnly,shadow:t.shadow}));return(i,m)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[o.value&&!t.iconRight?(e.openBlock(),e.createBlock(V,e.normalizeProps(e.mergeProps({key:0},a.value)),null,16)):e.createCommentVNode("",!0),t.iconOnly?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",ne,[e.renderSlot(i.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])])),o.value&&t.iconRight?(e.openBlock(),e.createBlock(V,e.normalizeProps(e.mergeProps({key:2},a.value)),null,16)):e.createCommentVNode("",!0)],64))}}),L=n=>"to"in n&&n.to!==void 0;function N(){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}=N(),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(i,m)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(l.value),e.mergeProps({class:n.className},a.value),{default:e.withCtx(()=>[e.renderSlot(i.$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=(r,u)=>{v.value[t][r]=u},l=(r,u)=>{v.value[t]={[r]:u}},a=r=>v.value[t]?.[r]??!1,i=r=>{o(r,!a(r))},m=r=>{l(r,!a(r))},c=()=>{v.value[t]={}},d=r=>{r.key==="Escape"&&(o(n.id,!1),g())},p=r=>{if(!n)return;const u=r.target,[y]=Object.keys(v.value[t]).filter(j=>v.value[t][j]===!0),k=document.getElementById(y),D=document.querySelector(`[aria-controls="${y}"]`),P=u.getAttribute("aria-controls")===y||D?.contains(r.target);k&&!k.contains(u)&&!P&&(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=r=>{if(!n)return;const{relatedTarget:u}=r;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=r=>{n&&(r?.preventDefault(),clearTimeout(f.value),T())},A=r=>{n&&(R(r),n.openSingle?m(n.id):i(n.id))},$=r=>{n&&(R(r),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:i,toggleSingle:m,setCollapsed:o,setSingleCollapsed:l,isCollapsed:a,reset:c,onMouseEnter:b,onMouseLeave:O,focusChange:B,onClickToggle:A,onClickOpen:$}}exports.ActionContent=ae;exports.BaseLink=oe;exports.ErrorList=z;exports.Icon=V;exports.InputLabel=M;exports.InputWrap=Y;exports.cn=x;exports.debounce=W;exports.generateRandomId=H;exports.isRouterLink=L;exports.useCollapse=le;exports.useInput=E;exports.useRouter=N;exports.useValidation=w;

package/dist/index.mjs

@@ -1,9 +1,9 @@
-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 $, 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 T, inject as re, resolveComponent as se, resolveDynamicComponent as ue, onUnmounted as ce } from "vue";
+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 z, 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 M, guardReactiveProps as re, mergeProps as w, inject as oe, 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 Te(t, e) {
+function we(t, e) {
   let a;
   return (...i) => {
     a !== void 0 && clearTimeout(a), a = setTimeout(() => {
@@ -11,18 +11,18 @@ function Te(t, e) {
     }, e);
   };
 }
-function $e(t = "phila-ui-") {
+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("");
+const N = k("");
 function J() {
   return {
-    inputValue: z,
+    inputValue: N,
     setInputValue: (e) => {
-      z.value = e;
+      N.value = e;
     }
   };
 }
@@ -43,8 +43,8 @@ function Q(t, e) {
     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;
+        const l = o.validate(j.value);
+        typeof l == "string" ? (o.isValid = !1, n.push(l)) : Array.isArray(l) ? (o.isValid = !1, n.push(...l)) : o.isValid = !0;
       }
       o.errors = n, n.length > 0 ? (o.isValid = !1, e?.("error", n)) : o.isValid = !0;
     },
@@ -68,18 +68,18 @@ const fe = {
   },
   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, [
+    return (l, 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))
+        (s(!0), u(H, null, ae(n.value, (v, f) => (s(), u("li", { key: f }, z(v), 1))), 128))
       ])
     ])) : y("", !0);
   }
-}), w = (t, e) => {
+}), $ = (t, e) => {
   const a = t.__vccOpts || t;
   for (const [i, n] of e)
     a[i] = n;
   return a;
-}, ge = /* @__PURE__ */ w(me, [["__scopeId", "data-v-caba8dd2"]]), ye = ["for"], he = {
+}, ge = /* @__PURE__ */ $(me, [["__scopeId", "data-v-caba8dd2"]]), he = ["for"], ye = {
   key: 0,
   class: "required"
 }, _e = /* @__PURE__ */ O({
@@ -93,11 +93,11 @@ const fe = {
       class: "input-label",
       for: t.id
     }, [
-      $(e.$slots, "default", {}, void 0, !0),
-      t.required ? (s(), u("span", he, "*")) : y("", !0)
-    ], 8, ye));
+      T(e.$slots, "default", {}, void 0, !0),
+      t.required ? (s(), u("span", ye, "*")) : y("", !0)
+    ], 8, he));
   }
-}), pe = /* @__PURE__ */ w(_e, [["__scopeId", "data-v-00c91174"]]), Oe = /* @__PURE__ */ O({
+}), pe = /* @__PURE__ */ $(_e, [["__scopeId", "data-v-00c91174"]]), Oe = /* @__PURE__ */ O({
   inheritAttrs: !1,
   __name: "InputWrap",
   props: {
@@ -117,7 +117,7 @@ const fe = {
   },
   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(
+    const { setInputValue: a } = J(), i = k(""), n = t, l = e, { init: h, isValid: v, validation: f } = Q(
       {
         validateOnMount: n.validateOnMount ?? !0,
         validateOnInput: n.validateOnInput ?? !0,
@@ -127,13 +127,13 @@ const fe = {
         errors: n.errors || [],
         validate: n.validate
       },
-      r
+      l
     ), _ = 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");
+    })), R = (b) => (i.value = b.target.value, l("update:modelValue", i.value), l("input", i.value), a(i.value), n.validateOnInput && f(), i.value), E = () => {
+      n.validateOnBlur && f(), l("blur");
     }, q = () => {
-      r("focus");
+      l("focus");
     };
     return U(() => {
       h();
@@ -148,15 +148,15 @@ const fe = {
         required: n.required
       }, {
         default: K(() => [
-          G(D(n.label), 1)
+          G(z(n.label), 1)
         ]),
         _: 1
       }, 8, ["id", "required"])) : y("", !0),
-      $(b.$slots, "default", A(oe({ inputValue: i.value, onBlur: E, onFocus: q, onInput: R, isValid: V(v), inputClasses: _.value })), void 0, !0),
+      T(b.$slots, "default", M(re({ inputValue: i.value, onBlur: E, onFocus: q, onInput: R, isValid: V(v), inputClasses: _.value })), void 0, !0),
       le(ge)
     ], 2));
   }
-}), we = /* @__PURE__ */ w(Oe, [["__scopeId", "data-v-751bf20e"]]), be = ["innerHTML"], Be = ["src", "alt"], Ce = /* @__PURE__ */ O({
+}), $e = /* @__PURE__ */ $(Oe, [["__scopeId", "data-v-751bf20e"]]), be = ["innerHTML"], Be = ["src", "alt"], Ce = /* @__PURE__ */ O({
   __name: "Icon",
   props: {
     className: {},
@@ -164,12 +164,12 @@ const fe = {
     iconClass: {},
     src: {},
     svgRaw: {},
-    variant: {},
+    variant: { default: "default" },
     size: { default: "small" },
     inline: { type: Boolean },
     shadow: { type: Boolean },
     decorative: { type: Boolean },
-    ariaLabel: {}
+    ariaLabel: { default: void 0 }
   },
   setup(t) {
     const e = t, a = c(() => ve(
@@ -185,7 +185,7 @@ const fe = {
       "aria-label": e.ariaLabel,
       role: "img"
     });
-    return (n, r) => (s(), u("span", T({ class: a.value }, i.value), [
+    return (n, l) => (s(), u("span", w({ class: a.value }, i.value), [
       e.iconDefinition ? (s(), C(V(de), {
         key: 0,
         icon: e.iconDefinition
@@ -203,7 +203,7 @@ const fe = {
       }, null, 8, Be)) : y("", !0)
     ], 16));
   }
-}), F = /* @__PURE__ */ w(Ce, [["__scopeId", "data-v-55074cbf"]]), ke = { key: 1 }, Re = /* @__PURE__ */ O({
+}), F = /* @__PURE__ */ $(Ce, [["__scopeId", "data-v-1fe4be50"]]), ke = { key: 1 }, Re = /* @__PURE__ */ O({
   __name: "ActionContent",
   props: {
     iconRight: { type: Boolean, default: !1 },
@@ -212,6 +212,7 @@ const fe = {
     text: { default: void 0 },
     size: { default: void 0 },
     shadow: { type: Boolean },
+    iconSize: { default: void 0 },
     iconDefinition: {},
     iconClass: {},
     src: {},
@@ -219,32 +220,50 @@ const fe = {
     variant: {}
   },
   setup(t) {
-    const e = t, a = c(() => e.iconDefinition || e.iconClass || e.src || e.svgRaw), i = c(
+    const e = t, a = c(() => e.iconDefinition || e.iconClass || e.src || e.svgRaw), i = (l) => {
+      if (l.iconOnly)
+        switch (l.size) {
+          case "small":
+            return "extra-small";
+          case "extra-small":
+            return "xxsmall";
+          default:
+            return l.size || "medium";
+        }
+      else
+        switch (l.size) {
+          case "small":
+          case "extra-small":
+            return "xxsmall";
+          default:
+            return "extra-small";
+        }
+    }, n = c(
       () => ({
         iconDefinition: e.iconDefinition,
         iconClass: e.iconClass,
         src: e.src,
         svgRaw: e.svgRaw,
-        size: e.iconOnly ? e.size : void 0,
+        size: e.iconSize ?? i(e),
         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(T({ key: 0 }, i.value)), null, 16)) : y("", !0),
+    return (l, h) => (s(), u(H, null, [
+      a.value && !e.iconRight ? (s(), C(F, M(w({ key: 0 }, n.value)), null, 16)) : y("", !0),
       e.iconOnly ? y("", !0) : (s(), u("span", ke, [
-        $(n.$slots, "default", {}, () => [
-          G(D(e.text), 1)
+        T(l.$slots, "default", {}, () => [
+          G(z(e.text), 1)
         ])
       ])),
-      a.value && e.iconRight ? (s(), C(F, A(T({ key: 2 }, i.value)), null, 16)) : y("", !0)
+      a.value && e.iconRight ? (s(), C(F, M(w({ key: 2 }, n.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);
+  const t = oe("router", null), e = c(() => t !== null);
   return {
     router: t,
     hasRouter: e
@@ -273,46 +292,46 @@ const Ee = /* @__PURE__ */ O({
       ...e.disabled && { "aria-disabled": "true" },
       ...e.ariaLabel && { "aria-label": e.ariaLabel }
     });
-    return (r, h) => (s(), C(ue(i.value), T({ class: t.className }, n.value), {
+    return (l, h) => (s(), C(ue(i.value), w({ class: t.className }, n.value), {
       default: K(() => [
-        $(r.$slots, "default")
+        T(l.$slots, "default")
       ]),
       _: 3
     }, 16, ["class"]));
   }
-}), m = k({}), g = k(), L = 400, M = k(null);
+}), m = k({}), g = k(), L = 400, x = 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));
+  const e = t?.group ?? "global", a = (r, d) => {
+    m.value[e][r] = d;
+  }, i = (r, d) => {
+    m.value[e] = { [r]: d };
+  }, n = (r) => m.value[e]?.[r] ?? !1, l = (r) => {
+    a(r, !n(r));
+  }, h = (r) => {
+    i(r, !n(r));
   }, v = () => {
     m.value[e] = {};
-  }, f = (l) => {
-    l.key === "Escape" && (a(t.id, !1), p());
-  }, _ = (l) => {
+  }, f = (r) => {
+    r.key === "Escape" && (a(t.id, !1), p());
+  }, _ = (r) => {
     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);
+    const d = r.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(r.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();
+    t && t.mouseOverToggle === !0 && (x.value = t.id, g.value = setTimeout(() => {
+      D();
     }, L));
   }, q = () => {
-    t && t.mouseOverToggle === !0 && (M.value = null, clearTimeout(g.value), g.value = setTimeout(() => {
-      M.value !== t.id && (a(t.id, !1), p());
+    t && t.mouseOverToggle === !0 && (x.value = null, clearTimeout(g.value), g.value = setTimeout(() => {
+      x.value !== t.id && (a(t.id, !1), p());
     }, L));
-  }, b = (l) => {
+  }, b = (r) => {
     if (!t) return;
-    const { relatedTarget: d } = l;
+    const { relatedTarget: d } = r;
     if (!d || d.getAttribute("aria-controls") === t.id)
       return;
     const B = document.getElementById(t.id);
@@ -323,12 +342,12 @@ function qe(t) {
     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));
+  }, A = (r) => {
+    t && (r?.preventDefault(), clearTimeout(g.value), S());
+  }, X = (r) => {
+    t && (A(r), t.openSingle ? h(t.id) : l(t.id));
+  }, D = (r) => {
+    t && (A(r), t.openSingle ? i(t.id, !0) : a(t.id, !0));
   };
   return U(() => {
     m.value[e] || v();
@@ -337,7 +356,7 @@ function qe(t) {
   }), {
     state: m,
     timeout: g,
-    toggle: r,
+    toggle: l,
     toggleSingle: h,
     setCollapsed: a,
     setSingleCollapsed: i,
@@ -347,7 +366,7 @@ function qe(t) {
     onMouseLeave: q,
     focusChange: b,
     onClickToggle: X,
-    onClickOpen: x
+    onClickOpen: D
   };
 }
 export {
@@ -356,10 +375,10 @@ export {
   ge as ErrorList,
   F as Icon,
   pe as InputLabel,
-  we as InputWrap,
+  $e as InputWrap,
   ve as cn,
-  Te as debounce,
-  $e as generateRandomId,
+  we as debounce,
+  Te as generateRandomId,
   P as isRouterLink,
   qe as useCollapse,
   J as useInput,

package/dist/styles/elements/buttons.css

@@ -118,7 +118,7 @@
 
   /* ---  Variants --- */
   &.phila-button--primary:not(:disabled) {
-    background: var(--Schemes-Primary-Container);
+    background: var(--Schemes-Primary);
   }
 
   &.phila-button--secondary:not(:disabled) {

package/dist/styles/elements/icons.css

@@ -42,6 +42,13 @@
 }
 
 .phila-icon--extra-small {
+  font-size: var(--Icon-Solid-ExtraSmall-font-icon-solid-xs-size);
+  height: var(--dimension-core-300);
+  width: var(--dimension-core-300);
+  padding: var(--spacing-xs);
+}
+
+.phila-icon--xxsmall {
   font-size: var(--Icon-Solid-XXSmall-font-icon-solid-xxs-size);
   height: var(--dimension-core-300);
   width: var(--dimension-core-300);

package/dist/styles/utilities/color.css

@@ -1,3 +1,13 @@
+/* Resets inherited link color tokens back to their defaults.
+   Apply to any container that has a standard surface background but sits inside
+   a colored ancestor (e.g. has-background-primary) that overrides link colors. */
+.resets-link-colors {
+  --Base-font-variables-Color-Link-link-default: initial;
+  --Extended-Colors-link-default: initial;
+  --Extended-Colors-link-hover: initial;
+  --Extended-Colors-link-visited: initial;
+}
+
 .has-background-ben-franklin-blue {
   background-color: var(--dark-ben-franklin-blue);
 }

package/dist/styles/utilities/text.css

@@ -59,6 +59,13 @@
   font-weight: 400;
   line-height: var(--Body-Small-font-body-small-lineheight) !important;
 }
+.has-text-body-extra-small {
+  font-family: var(--Body-ExtraSmall-font-body-xs-family) !important;
+  font-size: var(--Body-ExtraSmall-font-body-xs-size) !important;
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--Body-ExtraSmall-font-body-xs-lineheight) !important;
+}
 .has-text-body-large {
   font-family: var(--Body-Large-font-body-large-family) !important;
   font-size: var(--Body-Large-font-body-large-size) !important;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phila/phila-ui-core",
-  "version": "2.3.2",
+  "version": "2.3.3-beta.1",
   "type": "module",
   "description": "Core utilities and styles for Phila UI library",
   "main": "./dist/index.js",