@phila/phila-ui-checkbox 0.1.1 → 1.0.0-beta.11

package/dist/Checkbox.vue.d.ts

@@ -11,6 +11,6 @@ declare const _default: import('vue').DefineComponent<CheckboxProps, {}, {}, {},
     onBlur?: ((event: FocusEvent) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     inputRef: HTMLInputElement;
-}, HTMLLabelElement>;
+}, HTMLSpanElement>;
 export default _default;
 //# sourceMappingURL=Checkbox.vue.d.ts.map

package/dist/Checkbox.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.vue.d.ts","sourceRoot":"","sources":["../src/Checkbox.vue"],"names":[],"mappings":"AAiKA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;;;;;;;;;;;;;;AAsJ7C,wBAUG"}
+{"version":3,"file":"Checkbox.vue.d.ts","sourceRoot":"","sources":["../src/Checkbox.vue"],"names":[],"mappings":"AA6LA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;;;;;;;;;;;;;;AAsM7C,wBAUG"}

package/dist/CheckboxGroup.vue.d.ts

@@ -1,8 +1,8 @@
 import { CheckboxGroupProps } from './index';
 declare const _default: import('vue').DefineComponent<CheckboxGroupProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (value: (string | number | boolean)[]) => any;
+    "update:modelValue": (value: Record<string, boolean>) => any;
 }, string, import('vue').PublicProps, Readonly<CheckboxGroupProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: (string | number | boolean)[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: Record<string, boolean>) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
 export default _default;
 //# sourceMappingURL=CheckboxGroup.vue.d.ts.map

package/dist/CheckboxGroup.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.vue.d.ts","sourceRoot":"","sources":["../src/CheckboxGroup.vue"],"names":[],"mappings":"AA+GA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;;;;;;AAyJlD,wBASG"}
+{"version":3,"file":"CheckboxGroup.vue.d.ts","sourceRoot":"","sources":["../src/CheckboxGroup.vue"],"names":[],"mappings":"AAuHA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;;;;;;AAkKlD,wBASG"}

package/dist/index.css

@@ -1 +1 @@
-.checkbox-svg .checkbox-bg{fill:var(--Schemes-Surface-Bright, #fafafa);stroke:var(--Schemes-Border, #cfcfcf);stroke-width:1}.checkbox-svg .checkbox-check{stroke:none;fill:none}.checkbox-svg--checked .checkbox-bg{fill:var(--Schemes-Primary, #0f33f5);stroke:var(--Schemes-Primary, #0f33f5)}.checkbox-svg--checked .checkbox-check{stroke:var(--Schemes-On-Primary, #ffffff);stroke-width:2}.philaCheckbox[data-v-354b2e5e]{position:relative;display:inline-block;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.philaCheckbox__visual[data-v-354b2e5e]{display:flex;align-items:center;gap:var(--spacing-s, .75rem)}.philaCheckbox--icon-only .philaCheckbox__visual[data-v-354b2e5e]{gap:0}.philaCheckbox input[data-v-354b2e5e]{position:absolute;opacity:0;cursor:pointer;height:0;width:0}[data-v-354b2e5e] .checkbox-svg{flex-shrink:0;overflow:visible}.philaCheckbox[data-v-354b2e5e]:focus-within{outline:2px solid var(--Schemes-Primary, #0f33f5);outline-offset:2px}.philaCheckbox-enabled[data-v-354b2e5e]:hover .checkbox-svg .checkbox-bg{stroke:var(--Schemes-Primary, #0f33f5);stroke-width:2}.philaCheckbox-error[data-v-354b2e5e] .checkbox-svg .checkbox-bg{stroke:var(--Schemes-Error, #cc0406);stroke-width:2}.philaCheckbox-disabled[data-v-354b2e5e]{cursor:not-allowed;color:var(--Schemes-Surface-Variant, #a2a2a2)}.philaCheckbox-disabled[data-v-354b2e5e] .checkbox-svg .checkbox-bg{stroke:var(--Schemes-Surface-Dim, #cfcfcf);stroke-width:1;fill:var(--Schemes-Surface-Bright, #fafafa)}.philaCheckbox-disabled[data-v-354b2e5e] .checkbox-svg--checked .checkbox-bg{fill:var(--Schemes-Surface-Dim, #cfcfcf);stroke:var(--Schemes-Surface-Dim, #cfcfcf)}.philaCheckbox-disabled[data-v-354b2e5e] .checkbox-svg--checked .checkbox-check{stroke:var(--Schemes-Surface-Bright, #fafafa);stroke-width:2}.group-container[data-v-1408bdad]{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-xs, .5rem)}.labels-container[data-v-1408bdad]{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-2xs, .25rem);align-self:stretch}span[data-v-1408bdad]{display:block}.checkbox-container[data-v-1408bdad]{display:flex;padding:var(--spacing-m, 1rem);flex-direction:column;align-items:flex-start;gap:var(--Radio-margin-bottom, 1rem);align-self:stretch}.checkbox-container-error[data-v-1408bdad]{border-radius:var(--border-radius-m, .75rem)}.error-message[data-v-1408bdad]{display:flex;align-items:center;gap:var(--spacing-s, .75rem);align-self:stretch;font-weight:600}
+.tooltip[data-v-af4a0398]{position:relative;display:inline-flex;flex-direction:column;align-items:flex-start;border-radius:var(--border-radius-xs);filter:drop-shadow(0px 1px 2px rgba(0,0,0,.3)) drop-shadow(0px 1px 3px rgba(0,0,0,.15));--tooltip-bg: var(--Schemes-On-Primary);background-color:var(--tooltip-bg);color:var(--Schemes-On-Background)}.tooltip.tooltip--grey[data-v-af4a0398]{--tooltip-bg: var(--Schemes-Surface-Container-Lowest);color:var(--Schemes-On-Surface)}.tooltip.tooltip--plain[data-v-af4a0398]{--tail-height: 10px;padding:var(--spacing-2xs) var(--spacing-xs);justify-content:center;width:max-content;max-width:min(18rem,calc(100vw - 3rem))}.tooltip.tooltip--rich[data-v-af4a0398]{--tail-height: 12px;padding:var(--spacing-s) var(--spacing-m);width:max-content;min-width:11.25rem;max-width:min(25rem,calc(100vw - 3rem));gap:var(--spacing-xs)}.tooltip .tooltip__tail[data-v-af4a0398]{position:absolute;width:20px;height:var(--tail-height);background-color:var(--tooltip-bg)}.tooltip.tooltip--top-left .tooltip__tail[data-v-af4a0398],.tooltip.tooltip--top-right .tooltip__tail[data-v-af4a0398],.tooltip.tooltip--top-center .tooltip__tail[data-v-af4a0398]{clip-path:polygon(0 0,100% 0,50% 100%);bottom:calc(-1 * var(--tail-height) + 1px)}.tooltip.tooltip--bottom-left .tooltip__tail[data-v-af4a0398],.tooltip.tooltip--bottom-right .tooltip__tail[data-v-af4a0398],.tooltip.tooltip--bottom-center .tooltip__tail[data-v-af4a0398]{clip-path:polygon(50% 0,0 100%,100% 100%);top:calc(-1 * var(--tail-height) + 1px)}.tooltip.tooltip--top-left .tooltip__tail[data-v-af4a0398],.tooltip.tooltip--bottom-left .tooltip__tail[data-v-af4a0398]{left:8px}.tooltip.tooltip--top-right .tooltip__tail[data-v-af4a0398],.tooltip.tooltip--bottom-right .tooltip__tail[data-v-af4a0398]{right:8px}.tooltip.tooltip--top-center .tooltip__tail[data-v-af4a0398],.tooltip.tooltip--bottom-center .tooltip__tail[data-v-af4a0398]{left:50%;transform:translate(-50%)}.tooltip__plain-row[data-v-af4a0398],.tooltip__title-row[data-v-af4a0398]{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--spacing-xs);width:100%}.tooltip__title-row h6[data-v-af4a0398]{flex:1}.tooltip__dismiss[data-v-af4a0398]{margin-left:auto;flex-shrink:0}.tooltip-trigger[data-v-591a1092]{position:relative;display:inline-block}.tooltip-positioner[data-v-591a1092]{position:fixed;z-index:10010;width:max-content}.checkbox-svg .checkbox-bg{fill:var(--Schemes-Surface-Bright, #fafafa);stroke:var(--Schemes-Border, #cfcfcf);stroke-width:1}.checkbox-svg .checkbox-check{stroke:none;fill:none}.checkbox-svg--checked .checkbox-bg{fill:var(--Schemes-Primary, #0f33f5);stroke:var(--Schemes-Primary, #0f33f5)}.checkbox-svg--checked .checkbox-check{stroke:var(--Schemes-On-Primary, #ffffff);stroke-width:2}.philaCheckbox-row[data-v-6d41adb5]{display:inline-flex;align-items:center;gap:var(--spacing-xs, .5rem)}.philaCheckbox[data-v-6d41adb5]{position:relative;display:inline-block;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.philaCheckbox__visual[data-v-6d41adb5]{display:flex;align-items:center;gap:var(--spacing-s, .75rem)}.philaCheckbox__info[data-v-6d41adb5]{display:inline-flex;align-items:center;padding:0;border:none;background:none;cursor:help;color:var(--Schemes-On-Surface-Variant, inherit)}.philaCheckbox--icon-only .philaCheckbox__visual[data-v-6d41adb5]{gap:0}.philaCheckbox input[data-v-6d41adb5]{position:absolute;opacity:0;cursor:pointer;height:0;width:0}[data-v-6d41adb5] .checkbox-svg{flex-shrink:0;overflow:visible}.philaCheckbox[data-v-6d41adb5]:focus-within{outline:2px solid var(--Schemes-Primary, #0f33f5);outline-offset:2px}.philaCheckbox-enabled[data-v-6d41adb5]:hover .checkbox-svg .checkbox-bg{stroke:var(--Schemes-Primary, #0f33f5);stroke-width:2}.philaCheckbox-error[data-v-6d41adb5] .checkbox-svg .checkbox-bg{stroke:var(--Schemes-Error, #cc0406);stroke-width:2}.philaCheckbox-disabled[data-v-6d41adb5]{cursor:not-allowed;color:var(--Schemes-Surface-Variant, #a2a2a2)}.philaCheckbox-disabled[data-v-6d41adb5] .checkbox-svg .checkbox-bg{stroke:var(--Schemes-Surface-Dim, #cfcfcf);stroke-width:1;fill:var(--Schemes-Surface-Bright, #fafafa)}.philaCheckbox-disabled[data-v-6d41adb5] .checkbox-svg--checked .checkbox-bg{fill:var(--Schemes-Surface-Dim, #cfcfcf);stroke:var(--Schemes-Surface-Dim, #cfcfcf)}.philaCheckbox-disabled[data-v-6d41adb5] .checkbox-svg--checked .checkbox-check{stroke:var(--Schemes-Surface-Bright, #fafafa);stroke-width:2}.group-container[data-v-dfb87f32]{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-xs, .5rem)}.labels-container[data-v-dfb87f32]{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-2xs, .25rem);align-self:stretch}span[data-v-dfb87f32]{display:block}.checkbox-container[data-v-dfb87f32]{display:flex;padding:var(--spacing-m, 1rem);flex-direction:column;align-items:flex-start;gap:var(--Radio-margin-bottom, 1rem);align-self:stretch}.checkbox-container-error[data-v-dfb87f32]{border-radius:var(--border-radius-m, .75rem)}.error-message[data-v-dfb87f32]{display:flex;align-items:center;gap:var(--spacing-s, .75rem);align-self:stretch;font-weight:600}

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export interface CheckboxProps extends BaseProps {
     value?: string | number | boolean;
     modelValue?: boolean | Array<string | number | boolean>;
     text?: string;
+    tooltip?: string;
     disabled?: boolean;
     error?: boolean;
     indeterminate?: boolean;
@@ -15,7 +16,7 @@ export interface CheckboxGroupProps extends BaseProps {
     groupLabel: string;
     description?: string;
     choices: CheckboxChoice[];
-    modelValue?: Array<string | number | boolean>;
+    modelValue?: Record<string, boolean>;
     error?: boolean;
     errorMessage?: string;
     disabled?: boolean;
@@ -23,5 +24,6 @@ export interface CheckboxGroupProps extends BaseProps {
 type CheckboxChoice = {
     text: string;
     value: string | number | boolean;
+    tooltip?: string;
 };
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAE7D,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IAClC,UAAU,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;IACxD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,KAAK,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;CAClC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAE7D,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IAClC,UAAU,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC;IACxD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC"}

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),s=require("@phila/phila-ui-core"),h=e.defineComponent({__name:"CheckboxIcon",props:{checked:{type:Boolean}},setup(a){return(c,o)=>(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(["checkbox-svg",{"checkbox-svg--checked":a.checked}]),width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},[...o[0]||(o[0]=[e.createElementVNode("rect",{class:"checkbox-bg",x:"1",y:"1",width:"18",height:"18",rx:"3",ry:"3"},null,-1),e.createElementVNode("path",{class:"checkbox-check",d:"M 4.5 10 L 8.5 14 L 15.5 6","stroke-linecap":"round","stroke-linejoin":"round"},null,-1)])],2))}}),f={class:"philaCheckbox__visual"},v={key:0},g=["name","value","checked","disabled"],C=e.defineComponent({__name:"Checkbox",props:{name:{},value:{type:[String,Number,Boolean]},modelValue:{type:[Boolean,Array]},text:{},disabled:{type:Boolean},error:{type:Boolean},indeterminate:{type:Boolean},className:{}},emits:["update:modelValue","change","focus","blur"],setup(a,{emit:c}){const o=a,n=c,l=e.ref(null);e.watchEffect(()=>{l.value&&(l.value.indeterminate=o.indeterminate??!1)});const d=e.computed(()=>Array.isArray(o.modelValue)?o.modelValue.includes(o.value):!!o.modelValue);function m(u){if(Array.isArray(o.modelValue)){const t=[...o.modelValue],r=o.value,i=t.indexOf(r);i===-1?t.push(r):t.splice(i,1),n("update:modelValue",t)}else n("update:modelValue",!o.modelValue);n("change",u)}const p=e.computed(()=>s.cn("philaCheckbox","has-text-body-default",o.className,!o.disabled&&"philaCheckbox-enabled",o.disabled&&"philaCheckbox-disabled",o.error&&"philaCheckbox-error",!o.text&&"philaCheckbox--icon-only"));return(u,t)=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(p.value)},[e.createElementVNode("span",f,[e.createVNode(h,{checked:d.value},null,8,["checked"]),o.text?(e.openBlock(),e.createElementBlock("span",v,e.toDisplayString(o.text),1)):e.createCommentVNode("",!0)]),e.createElementVNode("input",{ref_key:"inputRef",ref:l,type:"checkbox",name:o.name,value:o.value,checked:d.value,disabled:o.disabled,onChange:m,onFocus:t[0]||(t[0]=r=>n("focus",r)),onBlur:t[1]||(t[1]=r=>n("blur",r))},null,40,g)],2))}}),k=(a,c)=>{const o=a.__vccOpts||a;for(const[n,l]of c)o[n]=l;return o},b=k(C,[["__scopeId","data-v-354b2e5e"]]);var y={prefix:"fas",iconName:"circle-exclamation",icon:[512,512,["exclamation-circle"],"f06a","M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zm0-192a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm0-192c-18.2 0-32.7 15.5-31.4 33.7l7.4 104c.9 12.6 11.4 22.3 23.9 22.3 12.6 0 23-9.7 23.9-22.3l7.4-104c1.3-18.2-13.1-33.7-31.4-33.7z"]};const _={class:"labels-container"},V={class:"has-text-body-default"},B={key:0,class:"error-message has-text-error content"},N=e.defineComponent({__name:"CheckboxGroup",props:{groupLabel:{},description:{},choices:{},modelValue:{},error:{type:Boolean},errorMessage:{},disabled:{type:Boolean},className:{}},emits:["update:modelValue"],setup(a,{emit:c}){const o=a,n=c,l=s.generateRandomId(),d=e.computed(()=>s.cn("group-container",o.className)),m=e.computed(()=>s.cn("checkbox-container",o.error&&"checkbox-container-error has-background-error")),p=e.computed(()=>s.cn("has-text-label-default",o.error&&"has-text-error"));function u(t){n("update:modelValue",t)}return(t,r)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(d.value)},[e.createElementVNode("div",_,[e.createElementVNode("span",{class:e.normalizeClass(p.value)},e.toDisplayString(a.groupLabel),3),e.createElementVNode("span",V,e.toDisplayString(a.description),1)]),e.createElementVNode("div",{class:e.normalizeClass(m.value)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.choices,(i,x)=>(e.openBlock(),e.createBlock(b,{key:e.unref(l)+x,name:e.unref(l),value:i.value,text:i.text,"model-value":o.modelValue,disabled:o.disabled,error:o.error,"onUpdate:modelValue":u},null,8,["name","value","text","model-value","disabled","error"]))),128)),o.error?(e.openBlock(),e.createElementBlock("div",B,[e.createVNode(e.unref(s.Icon),{style:{height:"fit-content",width:"fit-content",padding:"0"},size:"large",inline:"","aria-hidden":"true","icon-definition":e.unref(y)},null,8,["icon-definition"]),e.createTextVNode(" "+e.toDisplayString(a.errorMessage),1)])):e.createCommentVNode("",!0)],2)],2))}}),E=k(N,[["__scopeId","data-v-1408bdad"]]);exports.Checkbox=b;exports.CheckboxGroup=E;exports.CheckboxIcon=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),p=require("@phila/phila-ui-core"),E=require("@phila/phila-ui-core/icons"),F=["disabled"],z=e.defineComponent({inheritAttrs:!1,__name:"PhlButton",props:{href:{},to:{},target:{},rel:{},disabled:{type:Boolean,default:!1},clickTarget:{},variant:{default:"primary"},size:{default:"medium"},iconOnly:{type:Boolean,default:!1},iconRight:{type:Boolean},text:{},className:{},icon:{},src:{},svgRaw:{}},setup(l){const o=l,t=s=>"href"in s&&s.href!==void 0||"to"in s&&s.to!==void 0,a=e.computed(()=>p.cn("phila-button",`phila-button--${o.variant}`,o.size&&`is-${o.size}`,o.iconOnly&&"icon-button",o.iconOnly&&o.variant==="standard"&&"icon-button--standard",o.className)),n=e.computed(()=>t(o)?"to"in o&&o.to!==void 0?{to:o.to,disabled:o.disabled,className:a.value}:{href:o.href,target:o.target,rel:o.rel,disabled:o.disabled,className:a.value}:{}),c=e.computed(()=>({icon:o.icon,src:o.src,iconRight:o.iconRight,iconOnly:o.iconOnly,text:o.text,size:o.size}));return(s,h)=>t(o)?(e.openBlock(),e.createBlock(e.unref(p.BaseLink),e.mergeProps({key:0},{...n.value,...s.$attrs},{role:"button"}),{default:e.withCtx(()=>[e.createVNode(e.unref(p.ActionContent),e.normalizeProps(e.guardReactiveProps(c.value)),{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(o.text),1)])]),_:3},16)]),_:3},16)):(e.openBlock(),e.createElementBlock("button",e.mergeProps({key:1,type:"button",disabled:o.disabled,class:a.value},s.$attrs),[e.createVNode(e.unref(p.ActionContent),e.normalizeProps(e.guardReactiveProps(c.value)),{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(o.text),1)])]),_:3},16)],16,F))}}),U=["id"],q={key:0,class:"tooltip__tail","aria-hidden":"true"},G={key:1,class:"tooltip__plain-row has-text-body-small"},H={key:0,class:"tooltip__title-row"},j={key:0},W=e.defineComponent({__name:"TooltipBubble",props:{id:{},type:{default:"plain"},color:{default:"default"},tail:{type:Boolean,default:!1},placement:{default:"top-center"},title:{},dismissable:{type:Boolean,default:!1},className:{}},emits:["dismiss"],setup(l){const o=l,t=e.computed(()=>p.cn("tooltip","content","resets-link-colors",`tooltip--${o.type}`,`tooltip--${o.color}`,o.tail&&`tooltip--${o.placement}`,o.className));return(a,n)=>(e.openBlock(),e.createElementBlock("div",{id:l.id,class:e.normalizeClass(t.value),role:"tooltip"},[l.tail?(e.openBlock(),e.createElementBlock("div",q)):e.createCommentVNode("",!0),l.type==="plain"?(e.openBlock(),e.createElementBlock("div",G,[e.renderSlot(a.$slots,"default",{},void 0,!0),l.dismissable?(e.openBlock(),e.createBlock(e.unref(z),{key:0,class:"tooltip__dismiss",variant:"standard",size:"extra-small","icon-only":!0,icon:e.unref(E.IconClose),"aria-label":"Dismiss tooltip",onClick:n[0]||(n[0]=c=>a.$emit("dismiss"))},null,8,["icon"])):e.createCommentVNode("",!0)])):(e.openBlock(),e.createElementBlock(e.Fragment,{key:2},[l.title||l.dismissable?(e.openBlock(),e.createElementBlock("div",H,[l.title?(e.openBlock(),e.createElementBlock("h6",j,e.toDisplayString(l.title),1)):e.createCommentVNode("",!0),l.dismissable?(e.openBlock(),e.createBlock(e.unref(z),{key:1,class:"tooltip__dismiss",variant:"standard",size:"extra-small","icon-only":!0,icon:e.unref(E.IconClose),"aria-label":"Dismiss tooltip",onClick:n[1]||(n[1]=c=>a.$emit("dismiss"))},null,8,["icon"])):e.createCommentVNode("",!0)])):e.createCommentVNode("",!0),e.renderSlot(a.$slots,"default",{},void 0,!0)],64))],10,U))}}),I=(l,o)=>{const t=l.__vccOpts||l;for(const[a,n]of o)t[a]=n;return t},K=I(W,[["__scopeId","data-v-af4a0398"]]),N=8,w=8,X=e.defineComponent({__name:"Tooltip",props:{trigger:{default:"hover"},type:{default:"plain"},color:{default:"default"},tail:{type:Boolean,default:!1},placement:{default:"auto"},title:{},dismissable:{type:Boolean},className:{}},setup(l,{expose:o}){const t=l,a=e.useId(),n=e.ref(!1),c=e.ref(null),s=e.ref(null),h=e.ref("top-center"),k=e.ref({top:0,left:0});let r=null;const m=()=>{const i=c.value?.getBoundingClientRect();if(!i)return"top-center";const{innerWidth:u,innerHeight:x}=window,y=i.top,$=x-i.bottom,_=s.value?.getBoundingClientRect().height??0,B=(_>0?y>=_:y>=$)?"top":"bottom",v=i.left+i.width/2,A=v<u/3?"left":v>u*2/3?"right":"center";return`${B}-${A}`};function d(){const i=c.value?.getBoundingClientRect(),u=s.value?.getBoundingClientRect();if(!i||!u)return;const{innerWidth:x,innerHeight:y}=window,[$,_]=h.value.split("-");let B=$==="top"?i.top-N-u.height:i.bottom+N,v;_==="center"?v=i.left+i.width/2-u.width/2:_==="left"?v=i.left-N:v=i.right+N-u.width,v=Math.min(Math.max(v,w),x-w-u.width),B=Math.min(Math.max(B,w),y-w-u.height),k.value={top:B,left:v}}const g=i=>{i.key==="Escape"&&f()},b=i=>{const u=i.target,x=c.value?.contains(u),y=s.value?.contains(u);!x&&!y&&f()},C=()=>{n.value&&d()},V=async()=>{r&&(clearTimeout(r),r=null),h.value=t.placement==="auto"?m():t.placement,n.value=!0,document.addEventListener("keydown",g),t.trigger==="click"&&document.addEventListener("click",b),window.addEventListener("scroll",C,!0),window.addEventListener("resize",C),await e.nextTick(),t.placement==="auto"&&(h.value=m()),d()},f=()=>{n.value=!1,r&&(clearTimeout(r),r=null),document.removeEventListener("keydown",g),document.removeEventListener("click",b),window.removeEventListener("scroll",C,!0),window.removeEventListener("resize",C)},S=()=>{if(t.trigger!=="hover")return f();r=setTimeout(f,100)},R=()=>{r&&(clearTimeout(r),r=null)},D=()=>{n.value?f():V()};e.onUnmounted(f),o({show:V,hide:f});const P=e.computed(()=>({type:t.type,color:t.color,tail:t.tail,placement:h.value,title:t.title,dismissable:t.dismissable})),O=e.computed(()=>({top:`${k.value.top}px`,left:`${k.value.left}px`,visibility:n.value?"visible":"hidden"}));return(i,u)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createElementVNode("span",e.mergeProps({ref_key:"wrapperEl",ref:c,class:e.unref(p.cn)("tooltip-trigger",t.className)},l.trigger==="click"?{onClick:D}:{onMouseenter:V,onMouseleave:S,onFocusin:V,onFocusout:f}),[e.renderSlot(i.$slots,"default",{tooltipId:e.unref(a),isOpen:n.value},void 0,!0)],16),(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[e.createElementVNode("div",{ref_key:"bubbleEl",ref:s,class:"tooltip-positioner",style:e.normalizeStyle(O.value),onMouseenter:R,onMouseleave:S},[e.createVNode(K,e.mergeProps(P.value,{id:e.unref(a),onDismiss:f}),{default:e.withCtx(()=>[e.renderSlot(i.$slots,"body",{},void 0,!0)]),_:3},16,["id"])],36)]))],64))}}),Y=I(X,[["__scopeId","data-v-591a1092"]]),T=e.defineComponent({__name:"CheckboxIcon",props:{checked:{type:Boolean}},setup(l){return(o,t)=>(e.openBlock(),e.createElementBlock("svg",{class:e.normalizeClass(["checkbox-svg",{"checkbox-svg--checked":l.checked}]),width:"20",height:"20",viewBox:"0 0 20 20",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},[...t[0]||(t[0]=[e.createElementVNode("rect",{class:"checkbox-bg",x:"1",y:"1",width:"18",height:"18",rx:"3",ry:"3"},null,-1),e.createElementVNode("path",{class:"checkbox-check",d:"M 4.5 10 L 8.5 14 L 15.5 6","stroke-linecap":"round","stroke-linejoin":"round"},null,-1)])],2))}}),Z={class:"philaCheckbox-row"},J={class:"philaCheckbox__visual"},Q={key:0},ee=["name","value","checked","disabled"],te={type:"button",class:"philaCheckbox__info","aria-label":"More information"},oe=e.defineComponent({__name:"Checkbox",props:{name:{},value:{type:[String,Number,Boolean]},modelValue:{type:[Boolean,Array]},text:{},tooltip:{},disabled:{type:Boolean},error:{type:Boolean},indeterminate:{type:Boolean},className:{}},emits:["update:modelValue","change","focus","blur"],setup(l,{emit:o}){const t=l,a=o,n=e.ref(null);e.watchEffect(()=>{n.value&&(n.value.indeterminate=t.indeterminate??!1)});const c=e.computed(()=>Array.isArray(t.modelValue)?t.modelValue.includes(t.value):!!t.modelValue);function s(k){if(Array.isArray(t.modelValue)){const r=[...t.modelValue],m=t.value,d=r.indexOf(m);d===-1?r.push(m):r.splice(d,1),a("update:modelValue",r)}else a("update:modelValue",!t.modelValue);a("change",k)}const h=e.computed(()=>p.cn("philaCheckbox","has-text-body-default",t.className,!t.disabled&&"philaCheckbox-enabled",t.disabled&&"philaCheckbox-disabled",t.error&&"philaCheckbox-error",!t.text&&"philaCheckbox--icon-only"));return(k,r)=>(e.openBlock(),e.createElementBlock("span",Z,[e.createElementVNode("label",{class:e.normalizeClass(h.value)},[e.createElementVNode("span",J,[e.createVNode(T,{checked:c.value},null,8,["checked"]),t.text?(e.openBlock(),e.createElementBlock("span",Q,e.toDisplayString(t.text),1)):e.createCommentVNode("",!0)]),e.createElementVNode("input",{ref_key:"inputRef",ref:n,type:"checkbox",name:t.name,value:t.value,checked:c.value,disabled:t.disabled,onChange:s,onFocus:r[0]||(r[0]=m=>a("focus",m)),onBlur:r[1]||(r[1]=m=>a("blur",m))},null,40,ee)],2),t.tooltip?(e.openBlock(),e.createBlock(e.unref(Y),{key:0,trigger:"hover",class:"philaCheckbox__tooltip"},{body:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(t.tooltip),1)]),default:e.withCtx(()=>[e.createElementVNode("button",te,[e.createVNode(e.unref(p.Icon),{icon:e.unref(E.IconCircleInfo),size:"small",inline:"",decorative:""},null,8,["icon"])])]),_:1})):e.createCommentVNode("",!0)]))}}),L=(l,o)=>{const t=l.__vccOpts||l;for(const[a,n]of o)t[a]=n;return t},M=L(oe,[["__scopeId","data-v-6d41adb5"]]),le={class:"labels-container"},ne={class:"has-text-body-default"},ae={key:0,class:"error-message has-text-error content"},re=e.defineComponent({__name:"CheckboxGroup",props:{groupLabel:{},description:{},choices:{},modelValue:{},error:{type:Boolean},errorMessage:{},disabled:{type:Boolean},className:{}},emits:["update:modelValue"],setup(l,{emit:o}){const t=l,a=o,n=p.generateRandomId(),c=e.computed(()=>p.cn("group-container",t.className)),s=e.computed(()=>p.cn("checkbox-container",t.error&&"checkbox-container-error has-background-error")),h=e.computed(()=>p.cn("has-text-label-default",t.error&&"has-text-error"));function k(r,m){const d={};for(const g of t.choices){const b=String(g.value);d[b]=b===String(r)?m:!!t.modelValue?.[b]}a("update:modelValue",d)}return(r,m)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(c.value)},[e.createElementVNode("div",le,[e.createElementVNode("span",{class:e.normalizeClass(h.value)},e.toDisplayString(l.groupLabel),3),e.createElementVNode("span",ne,e.toDisplayString(l.description),1)]),e.createElementVNode("div",{class:e.normalizeClass(s.value)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.choices,(d,g)=>(e.openBlock(),e.createBlock(M,{key:e.unref(n)+g,name:e.unref(n),value:d.value,text:d.text,tooltip:d.tooltip,"model-value":t.modelValue?.[String(d.value)]??!1,disabled:t.disabled,error:t.error,"onUpdate:modelValue":b=>k(d.value,b)},null,8,["name","value","text","tooltip","model-value","disabled","error","onUpdate:modelValue"]))),128)),t.error?(e.openBlock(),e.createElementBlock("div",ae,[e.createVNode(e.unref(p.Icon),{style:{height:"fit-content",width:"fit-content",padding:"0"},size:"large",inline:"","aria-hidden":"true",icon:e.unref(E.IconCircleExclamation)},null,8,["icon"]),e.createTextVNode(" "+e.toDisplayString(l.errorMessage),1)])):e.createCommentVNode("",!0)],2)],2))}}),ie=L(re,[["__scopeId","data-v-dfb87f32"]]);exports.Checkbox=M;exports.CheckboxGroup=ie;exports.CheckboxIcon=T;

package/dist/index.mjs

@@ -1,13 +1,262 @@
-import { defineComponent as _, createElementBlock as i, openBlock as c, normalizeClass as u, createElementVNode as l, ref as B, watchEffect as N, computed as h, createVNode as g, createCommentVNode as y, toDisplayString as b, Fragment as w, renderList as I, createBlock as z, unref as x, createTextVNode as A } from "vue";
-import { cn as k, generateRandomId as L, Icon as $ } from "@phila/phila-ui-core";
-import './index.css';const E = /* @__PURE__ */ _({
+import { defineComponent as M, useId as ne, ref as V, onUnmounted as se, computed as f, createElementBlock as p, openBlock as i, Fragment as G, createElementVNode as v, createBlock as I, mergeProps as F, unref as c, renderSlot as z, Teleport as ie, normalizeStyle as re, createVNode as L, withCtx as N, nextTick as ce, normalizeClass as E, createCommentVNode as x, toDisplayString as C, normalizeProps as j, guardReactiveProps as K, createTextVNode as H, watchEffect as de, renderList as ue } from "vue";
+import { cn as w, BaseLink as pe, ActionContent as X, Icon as q, generateRandomId as me } from "@phila/phila-ui-core";
+import { IconClose as Y, IconCircleInfo as he, IconCircleExclamation as ve } from "@phila/phila-ui-core/icons";
+import './index.css';const fe = ["disabled"], Z = /* @__PURE__ */ M({
+  inheritAttrs: !1,
+  __name: "PhlButton",
+  props: {
+    href: {},
+    to: {},
+    target: {},
+    rel: {},
+    disabled: { type: Boolean, default: !1 },
+    clickTarget: {},
+    variant: { default: "primary" },
+    size: { default: "medium" },
+    iconOnly: { type: Boolean, default: !1 },
+    iconRight: { type: Boolean },
+    text: {},
+    className: {},
+    icon: {},
+    src: {},
+    svgRaw: {}
+  },
+  setup(o) {
+    const t = o, e = (r) => "href" in r && r.href !== void 0 || "to" in r && r.to !== void 0, a = f(() => w(
+      "phila-button",
+      `phila-button--${t.variant}`,
+      t.size && `is-${t.size}`,
+      t.iconOnly && "icon-button",
+      t.iconOnly && t.variant === "standard" && "icon-button--standard",
+      t.className
+    )), l = f(() => e(t) ? "to" in t && t.to !== void 0 ? {
+      to: t.to,
+      disabled: t.disabled,
+      className: a.value
+    } : {
+      href: t.href,
+      target: t.target,
+      rel: t.rel,
+      disabled: t.disabled,
+      className: a.value
+    } : {}), d = f(
+      () => ({
+        icon: t.icon,
+        src: t.src,
+        iconRight: t.iconRight,
+        iconOnly: t.iconOnly,
+        text: t.text,
+        size: t.size
+      })
+    );
+    return (r, b) => e(t) ? (i(), I(c(pe), F({ key: 0 }, { ...l.value, ...r.$attrs }, { role: "button" }), {
+      default: N(() => [
+        L(c(X), j(K(d.value)), {
+          default: N(() => [
+            z(r.$slots, "default", {}, () => [
+              H(C(t.text), 1)
+            ])
+          ]),
+          _: 3
+        }, 16)
+      ]),
+      _: 3
+    }, 16)) : (i(), p("button", F({
+      key: 1,
+      type: "button",
+      disabled: t.disabled,
+      class: a.value
+    }, r.$attrs), [
+      L(c(X), j(K(d.value)), {
+        default: N(() => [
+          z(r.$slots, "default", {}, () => [
+            H(C(t.text), 1)
+          ])
+        ]),
+        _: 3
+      }, 16)
+    ], 16, fe));
+  }
+}), be = ["id"], ye = {
+  key: 0,
+  class: "tooltip__tail",
+  "aria-hidden": "true"
+}, ge = {
+  key: 1,
+  class: "tooltip__plain-row has-text-body-small"
+}, ke = {
+  key: 0,
+  class: "tooltip__title-row"
+}, _e = { key: 0 }, xe = /* @__PURE__ */ M({
+  __name: "TooltipBubble",
+  props: {
+    id: {},
+    type: { default: "plain" },
+    color: { default: "default" },
+    tail: { type: Boolean, default: !1 },
+    placement: { default: "top-center" },
+    title: {},
+    dismissable: { type: Boolean, default: !1 },
+    className: {}
+  },
+  emits: ["dismiss"],
+  setup(o) {
+    const t = o, e = f(
+      () => w(
+        "tooltip",
+        "content",
+        "resets-link-colors",
+        `tooltip--${t.type}`,
+        `tooltip--${t.color}`,
+        t.tail && `tooltip--${t.placement}`,
+        t.className
+      )
+    );
+    return (a, l) => (i(), p("div", {
+      id: o.id,
+      class: E(e.value),
+      role: "tooltip"
+    }, [
+      o.tail ? (i(), p("div", ye)) : x("", !0),
+      o.type === "plain" ? (i(), p("div", ge, [
+        z(a.$slots, "default", {}, void 0, !0),
+        o.dismissable ? (i(), I(c(Z), {
+          key: 0,
+          class: "tooltip__dismiss",
+          variant: "standard",
+          size: "extra-small",
+          "icon-only": !0,
+          icon: c(Y),
+          "aria-label": "Dismiss tooltip",
+          onClick: l[0] || (l[0] = (d) => a.$emit("dismiss"))
+        }, null, 8, ["icon"])) : x("", !0)
+      ])) : (i(), p(G, { key: 2 }, [
+        o.title || o.dismissable ? (i(), p("div", ke, [
+          o.title ? (i(), p("h6", _e, C(o.title), 1)) : x("", !0),
+          o.dismissable ? (i(), I(c(Z), {
+            key: 1,
+            class: "tooltip__dismiss",
+            variant: "standard",
+            size: "extra-small",
+            "icon-only": !0,
+            icon: c(Y),
+            "aria-label": "Dismiss tooltip",
+            onClick: l[1] || (l[1] = (d) => a.$emit("dismiss"))
+          }, null, 8, ["icon"])) : x("", !0)
+        ])) : x("", !0),
+        z(a.$slots, "default", {}, void 0, !0)
+      ], 64))
+    ], 10, be));
+  }
+}), J = (o, t) => {
+  const e = o.__vccOpts || o;
+  for (const [a, l] of t)
+    e[a] = l;
+  return e;
+}, Ce = /* @__PURE__ */ J(xe, [["__scopeId", "data-v-af4a0398"]]), P = 8, D = 8, we = /* @__PURE__ */ M({
+  __name: "Tooltip",
+  props: {
+    trigger: { default: "hover" },
+    type: { default: "plain" },
+    color: { default: "default" },
+    tail: { type: Boolean, default: !1 },
+    placement: { default: "auto" },
+    title: {},
+    dismissable: { type: Boolean },
+    className: {}
+  },
+  setup(o, { expose: t }) {
+    const e = o, a = ne(), l = V(!1), d = V(null), r = V(null), b = V("top-center"), k = V({ top: 0, left: 0 });
+    let n = null;
+    const h = () => {
+      const s = d.value?.getBoundingClientRect();
+      if (!s) return "top-center";
+      const { innerWidth: m, innerHeight: R } = window, $ = s.top, U = R - s.bottom, T = r.value?.getBoundingClientRect().height ?? 0, O = (T > 0 ? $ >= T : $ >= U) ? "top" : "bottom", g = s.left + s.width / 2, ae = g < m / 3 ? "left" : g > m * 2 / 3 ? "right" : "center";
+      return `${O}-${ae}`;
+    };
+    function u() {
+      const s = d.value?.getBoundingClientRect(), m = r.value?.getBoundingClientRect();
+      if (!s || !m) return;
+      const { innerWidth: R, innerHeight: $ } = window, [U, T] = b.value.split("-");
+      let O = U === "top" ? s.top - P - m.height : s.bottom + P, g;
+      T === "center" ? g = s.left + s.width / 2 - m.width / 2 : T === "left" ? g = s.left - P : g = s.right + P - m.width, g = Math.min(Math.max(g, D), R - D - m.width), O = Math.min(Math.max(O, D), $ - D - m.height), k.value = { top: O, left: g };
+    }
+    const B = (s) => {
+      s.key === "Escape" && y();
+    }, _ = (s) => {
+      const m = s.target, R = d.value?.contains(m), $ = r.value?.contains(m);
+      !R && !$ && y();
+    }, S = () => {
+      l.value && u();
+    }, A = async () => {
+      n && (clearTimeout(n), n = null), b.value = e.placement === "auto" ? h() : e.placement, l.value = !0, document.addEventListener("keydown", B), e.trigger === "click" && document.addEventListener("click", _), window.addEventListener("scroll", S, !0), window.addEventListener("resize", S), await ce(), e.placement === "auto" && (b.value = h()), u();
+    }, y = () => {
+      l.value = !1, n && (clearTimeout(n), n = null), document.removeEventListener("keydown", B), document.removeEventListener("click", _), window.removeEventListener("scroll", S, !0), window.removeEventListener("resize", S);
+    }, W = () => {
+      if (e.trigger !== "hover") return y();
+      n = setTimeout(y, 100);
+    }, ee = () => {
+      n && (clearTimeout(n), n = null);
+    }, te = () => {
+      l.value ? y() : A();
+    };
+    se(y), t({ show: A, hide: y });
+    const oe = f(() => ({
+      type: e.type,
+      color: e.color,
+      tail: e.tail,
+      placement: b.value,
+      title: e.title,
+      dismissable: e.dismissable
+    })), le = f(() => ({
+      top: `${k.value.top}px`,
+      left: `${k.value.left}px`,
+      visibility: l.value ? "visible" : "hidden"
+    }));
+    return (s, m) => (i(), p(G, null, [
+      v("span", F(
+        {
+          ref_key: "wrapperEl",
+          ref: d,
+          class: c(w)("tooltip-trigger", e.className)
+        },
+        o.trigger === "click" ? { onClick: te } : { onMouseenter: A, onMouseleave: W, onFocusin: A, onFocusout: y }
+      ), [
+        z(s.$slots, "default", {
+          tooltipId: c(a),
+          isOpen: l.value
+        }, void 0, !0)
+      ], 16),
+      (i(), I(ie, { to: "body" }, [
+        v("div", {
+          ref_key: "bubbleEl",
+          ref: r,
+          class: "tooltip-positioner",
+          style: re(le.value),
+          onMouseenter: ee,
+          onMouseleave: W
+        }, [
+          L(Ce, F(oe.value, {
+            id: c(a),
+            onDismiss: y
+          }), {
+            default: N(() => [
+              z(s.$slots, "body", {}, void 0, !0)
+            ]),
+            _: 3
+          }, 16, ["id"])
+        ], 36)
+      ]))
+    ], 64));
+  }
+}), Be = /* @__PURE__ */ J(we, [["__scopeId", "data-v-591a1092"]]), $e = /* @__PURE__ */ M({
   __name: "CheckboxIcon",
   props: {
     checked: { type: Boolean }
   },
-  setup(t) {
-    return (s, e) => (c(), i("svg", {
-      class: u(["checkbox-svg", { "checkbox-svg--checked": t.checked }]),
+  setup(o) {
+    return (t, e) => (i(), p("svg", {
+      class: E(["checkbox-svg", { "checkbox-svg--checked": o.checked }]),
       width: "20",
       height: "20",
       viewBox: "0 0 20 20",
@@ -15,7 +264,7 @@ import './index.css';const E = /* @__PURE__ */ _({
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true"
     }, [...e[0] || (e[0] = [
-      l("rect", {
+      v("rect", {
         class: "checkbox-bg",
         x: "1",
         y: "1",
@@ -24,7 +273,7 @@ import './index.css';const E = /* @__PURE__ */ _({
         rx: "3",
         ry: "3"
       }, null, -1),
-      l("path", {
+      v("path", {
         class: "checkbox-check",
         d: "M 4.5 10 L 8.5 14 L 15.5 6",
         "stroke-linecap": "round",
@@ -32,34 +281,39 @@ import './index.css';const E = /* @__PURE__ */ _({
       }, null, -1)
     ])], 2));
   }
-}), M = { class: "philaCheckbox__visual" }, R = { key: 0 }, F = ["name", "value", "checked", "disabled"], G = /* @__PURE__ */ _({
+}), Ve = { class: "philaCheckbox-row" }, Ne = { class: "philaCheckbox__visual" }, Ee = { key: 0 }, Ie = ["name", "value", "checked", "disabled"], ze = {
+  type: "button",
+  class: "philaCheckbox__info",
+  "aria-label": "More information"
+}, Le = /* @__PURE__ */ M({
   __name: "Checkbox",
   props: {
     name: {},
     value: { type: [String, Number, Boolean] },
     modelValue: { type: [Boolean, Array] },
     text: {},
+    tooltip: {},
     disabled: { type: Boolean },
     error: { type: Boolean },
     indeterminate: { type: Boolean },
     className: {}
   },
   emits: ["update:modelValue", "change", "focus", "blur"],
-  setup(t, { emit: s }) {
-    const e = t, o = s, n = B(null);
-    N(() => {
-      n.value && (n.value.indeterminate = e.indeterminate ?? !1);
+  setup(o, { emit: t }) {
+    const e = o, a = t, l = V(null);
+    de(() => {
+      l.value && (l.value.indeterminate = e.indeterminate ?? !1);
     });
-    const m = h(() => Array.isArray(e.modelValue) ? e.modelValue.includes(e.value) : !!e.modelValue);
-    function f(p) {
+    const d = f(() => Array.isArray(e.modelValue) ? e.modelValue.includes(e.value) : !!e.modelValue);
+    function r(k) {
       if (Array.isArray(e.modelValue)) {
-        const a = [...e.modelValue], r = e.value, d = a.indexOf(r);
-        d === -1 ? a.push(r) : a.splice(d, 1), o("update:modelValue", a);
+        const n = [...e.modelValue], h = e.value, u = n.indexOf(h);
+        u === -1 ? n.push(h) : n.splice(u, 1), a("update:modelValue", n);
       } else
-        o("update:modelValue", !e.modelValue);
-      o("change", p);
+        a("update:modelValue", !e.modelValue);
+      a("change", k);
     }
-    const v = h(() => k(
+    const b = f(() => w(
       "philaCheckbox",
       "has-text-body-default",
       e.className,
@@ -68,42 +322,58 @@ import './index.css';const E = /* @__PURE__ */ _({
       e.error && "philaCheckbox-error",
       !e.text && "philaCheckbox--icon-only"
     ));
-    return (p, a) => (c(), i("label", {
-      class: u(v.value)
-    }, [
-      l("span", M, [
-        g(E, { checked: m.value }, null, 8, ["checked"]),
-        e.text ? (c(), i("span", R, b(e.text), 1)) : y("", !0)
-      ]),
-      l("input", {
-        ref_key: "inputRef",
-        ref: n,
-        type: "checkbox",
-        name: e.name,
-        value: e.value,
-        checked: m.value,
-        disabled: e.disabled,
-        onChange: f,
-        onFocus: a[0] || (a[0] = (r) => o("focus", r)),
-        onBlur: a[1] || (a[1] = (r) => o("blur", r))
-      }, null, 40, F)
-    ], 2));
+    return (k, n) => (i(), p("span", Ve, [
+      v("label", {
+        class: E(b.value)
+      }, [
+        v("span", Ne, [
+          L($e, { checked: d.value }, null, 8, ["checked"]),
+          e.text ? (i(), p("span", Ee, C(e.text), 1)) : x("", !0)
+        ]),
+        v("input", {
+          ref_key: "inputRef",
+          ref: l,
+          type: "checkbox",
+          name: e.name,
+          value: e.value,
+          checked: d.value,
+          disabled: e.disabled,
+          onChange: r,
+          onFocus: n[0] || (n[0] = (h) => a("focus", h)),
+          onBlur: n[1] || (n[1] = (h) => a("blur", h))
+        }, null, 40, Ie)
+      ], 2),
+      e.tooltip ? (i(), I(c(Be), {
+        key: 0,
+        trigger: "hover",
+        class: "philaCheckbox__tooltip"
+      }, {
+        body: N(() => [
+          H(C(e.tooltip), 1)
+        ]),
+        default: N(() => [
+          v("button", ze, [
+            L(c(q), {
+              icon: c(he),
+              size: "small",
+              inline: "",
+              decorative: ""
+            }, null, 8, ["icon"])
+          ])
+        ]),
+        _: 1
+      })) : x("", !0)
+    ]));
   }
-}), C = (t, s) => {
-  const e = t.__vccOpts || t;
-  for (const [o, n] of s)
-    e[o] = n;
+}), Q = (o, t) => {
+  const e = o.__vccOpts || o;
+  for (const [a, l] of t)
+    e[a] = l;
   return e;
-}, O = /* @__PURE__ */ C(G, [["__scopeId", "data-v-354b2e5e"]]);
-var S = {
-  prefix: "fas",
-  iconName: "circle-exclamation",
-  icon: [512, 512, ["exclamation-circle"], "f06a", "M256 512a256 256 0 1 1 0-512 256 256 0 1 1 0 512zm0-192a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm0-192c-18.2 0-32.7 15.5-31.4 33.7l7.4 104c.9 12.6 11.4 22.3 23.9 22.3 12.6 0 23-9.7 23.9-22.3l7.4-104c1.3-18.2-13.1-33.7-31.4-33.7z"]
-};
-const U = { class: "labels-container" }, j = { class: "has-text-body-default" }, D = {
+}, Me = /* @__PURE__ */ Q(Le, [["__scopeId", "data-v-6d41adb5"]]), Re = { class: "labels-container" }, Te = { class: "has-text-body-default" }, Oe = {
   key: 0,
   class: "error-message has-text-error content"
-}, T = /* @__PURE__ */ _({
+}, Se = /* @__PURE__ */ M({
   __name: "CheckboxGroup",
   props: {
     groupLabel: {},
@@ -116,49 +386,55 @@ const U = { class: "labels-container" }, j = { class: "has-text-body-default" },
     className: {}
   },
   emits: ["update:modelValue"],
-  setup(t, { emit: s }) {
-    const e = t, o = s, n = L(), m = h(() => k("group-container", e.className)), f = h(() => k("checkbox-container", e.error && "checkbox-container-error has-background-error")), v = h(() => k("has-text-label-default", e.error && "has-text-error"));
-    function p(a) {
-      o("update:modelValue", a);
+  setup(o, { emit: t }) {
+    const e = o, a = t, l = me(), d = f(() => w("group-container", e.className)), r = f(() => w("checkbox-container", e.error && "checkbox-container-error has-background-error")), b = f(() => w("has-text-label-default", e.error && "has-text-error"));
+    function k(n, h) {
+      const u = {};
+      for (const B of e.choices) {
+        const _ = String(B.value);
+        u[_] = _ === String(n) ? h : !!e.modelValue?.[_];
+      }
+      a("update:modelValue", u);
     }
-    return (a, r) => (c(), i("div", {
-      class: u(m.value)
+    return (n, h) => (i(), p("div", {
+      class: E(d.value)
     }, [
-      l("div", U, [
-        l("span", {
-          class: u(v.value)
-        }, b(t.groupLabel), 3),
-        l("span", j, b(t.description), 1)
+      v("div", Re, [
+        v("span", {
+          class: E(b.value)
+        }, C(o.groupLabel), 3),
+        v("span", Te, C(o.description), 1)
       ]),
-      l("div", {
-        class: u(f.value)
+      v("div", {
+        class: E(r.value)
       }, [
-        (c(!0), i(w, null, I(e.choices, (d, V) => (c(), z(O, {
-          key: x(n) + V,
-          name: x(n),
-          value: d.value,
-          text: d.text,
-          "model-value": e.modelValue,
+        (i(!0), p(G, null, ue(e.choices, (u, B) => (i(), I(Me, {
+          key: c(l) + B,
+          name: c(l),
+          value: u.value,
+          text: u.text,
+          tooltip: u.tooltip,
+          "model-value": e.modelValue?.[String(u.value)] ?? !1,
           disabled: e.disabled,
           error: e.error,
-          "onUpdate:modelValue": p
-        }, null, 8, ["name", "value", "text", "model-value", "disabled", "error"]))), 128)),
-        e.error ? (c(), i("div", D, [
-          g(x($), {
+          "onUpdate:modelValue": (_) => k(u.value, _)
+        }, null, 8, ["name", "value", "text", "tooltip", "model-value", "disabled", "error", "onUpdate:modelValue"]))), 128)),
+        e.error ? (i(), p("div", Oe, [
+          L(c(q), {
             style: { height: "fit-content", width: "fit-content", padding: "0" },
             size: "large",
             inline: "",
             "aria-hidden": "true",
-            "icon-definition": x(S)
-          }, null, 8, ["icon-definition"]),
-          A(" " + b(t.errorMessage), 1)
-        ])) : y("", !0)
+            icon: c(ve)
+          }, null, 8, ["icon"]),
+          H(" " + C(o.errorMessage), 1)
+        ])) : x("", !0)
       ], 2)
     ], 2));
   }
-}), J = /* @__PURE__ */ C(T, [["__scopeId", "data-v-1408bdad"]]);
+}), Fe = /* @__PURE__ */ Q(Se, [["__scopeId", "data-v-dfb87f32"]]);
 export {
-  O as Checkbox,
-  J as CheckboxGroup,
-  E as CheckboxIcon
+  Me as Checkbox,
+  Fe as CheckboxGroup,
+  $e as CheckboxIcon
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phila/phila-ui-checkbox",
-  "version": "0.1.1",
+  "version": "1.0.0-beta.11",
   "type": "module",
   "description": "A checkbox input.",
   "main": "./dist/index.js",
@@ -28,7 +28,8 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@phila/phila-ui-core": "2.4.0"
+    "@phila/phila-ui-core": "3.0.0-beta.9",
+    "@phila/phila-ui-tooltip": "0.1.0-beta.11"
   },
   "devDependencies": {
     "@types/node": "^24.0.0",