@phila/phila-ui-filter-chip 0.2.0-beta.2 → 0.2.0-beta.4

package/README.md

@@ -22,7 +22,7 @@ pnpm add @phila/phila-ui-filter-chip
 ## Shared model
 
 ```ts
-import type { FilterDefinition, FilterValues } from "@phila/phila-ui-filter-chip";
+import type { FilterDefinition, FilterValues } from "@phila/phila-ui-core";
 
 // Describes one filter axis.
 interface FilterDefinition {
@@ -61,7 +61,7 @@ const openNow = ref(false);
 <script setup lang="ts">
 import { ref } from "vue";
 import { FilterChip } from "@phila/phila-ui-filter-chip";
-import type { FilterChoice } from "@phila/phila-ui-filter-chip";
+import type { FilterChoice } from "@phila/phila-ui-core";
 
 const districtChoices: FilterChoice[] = [
   { text: "Center City", value: "center-city" },
@@ -97,7 +97,7 @@ With `filterButton`, a leading button (sliders icon + a count of total active se
 <script setup lang="ts">
 import { ref } from "vue";
 import { FilterChipGroup } from "@phila/phila-ui-filter-chip";
-import type { FilterDefinition, FilterValues } from "@phila/phila-ui-filter-chip";
+import type { FilterDefinition, FilterValues } from "@phila/phila-ui-core";
 
 const filters: FilterDefinition[] = [
   { key: "openNow", label: "Open Now" }, // toggle

package/dist/FilterChip.vue.d.ts

@@ -15,7 +15,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<Fi
     iconColor: string;
     trailingIconDefinition: import('@fortawesome/fontawesome-svg-core').IconDefinition;
     label: string;
-    choices: import('./index').FilterChoice[];
+    choices: import('@phila/phila-ui-core').FilterChoice[];
     multiple: boolean;
     applyText: string;
     resetText: string;

package/dist/FilterChipDropdownPanel.vue.d.ts

@@ -1,4 +1,4 @@
-import { FilterChoice } from './index';
+import { FilterChoice } from '@phila/phila-ui-core';
 type __VLS_Props = {
     menuId: string;
     label: string;

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

@@ -1 +1 @@
-{"version":3,"file":"FilterChipDropdownPanel.vue.d.ts","sourceRoot":"","sources":["../src/FilterChipDropdownPanel.vue"],"names":[],"mappings":"AAgOA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,KAAK,WAAW,GAAG;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,sCAAsC;IACtC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACzB,6EAA6E;IAC7E,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,uEAAuE;IACvE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;;;;;;;;;;YAHS,OAAO;eACJ,MAAM;eACN,MAAM;;AA2QtB,wBASG"}
+{"version":3,"file":"FilterChipDropdownPanel.vue.d.ts","sourceRoot":"","sources":["../src/FilterChipDropdownPanel.vue"],"names":[],"mappings":"AAgOA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEzD,KAAK,WAAW,GAAG;IACf,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,sCAAsC;IACtC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACzB,6EAA6E;IAC7E,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,uEAAuE;IACvE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;;;;;;;;;;YAHS,OAAO;eACJ,MAAM;eACN,MAAM;;AA2QtB,wBASG"}

package/dist/FilterChipGroup.vue.d.ts

@@ -1,4 +1,5 @@
-import { FilterChipGroupProps, FilterValues } from './index';
+import { FilterChipGroupProps } from './index';
+import { FilterValues } from '@phila/phila-ui-core';
 declare const _default: import('vue').DefineComponent<FilterChipGroupProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:modelValue": (value: FilterValues) => any;
     "open-filters": () => any;

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

@@ -1 +1 @@
-{"version":3,"file":"FilterChipGroup.vue.d.ts","sourceRoot":"","sources":["../src/FilterChipGroup.vue"],"names":[],"mappings":"AAuPA,OAAO,KAAK,EAAE,oBAAoB,EAAoB,YAAY,EAAE,MAAM,SAAS,CAAC;;;;;;;;;;;;;;;;AAoUpF,wBAUG"}
+{"version":3,"file":"FilterChipGroup.vue.d.ts","sourceRoot":"","sources":["../src/FilterChipGroup.vue"],"names":[],"mappings":"AAgQA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,KAAK,EAAoB,YAAY,EAAE,MAAM,sBAAsB,CAAC;;;;;;;;;;;;;;;;AAqU3E,wBAUG"}

package/dist/index.css

@@ -1 +1 @@
-.phila-filter-chip[data-v-2925d75a]{display:inline-flex;align-items:center;height:var(--scale-350, 1.75rem);cursor:pointer;border-style:solid;border-radius:var(--border-radius-l);white-space:nowrap;box-sizing:border-box;appearance:none;text-decoration:none;padding:var(--scale-25) var(--scale-75);gap:var(--spacing-xs);border-width:var(--border-width-s)}.phila-filter-chip.is-extra-large[data-v-2925d75a]{height:var(--scale-400, 2rem);padding:var(--scale-75) var(--spacing-xs);gap:var(--spacing-2xs)}.phila-filter-chip.is-large[data-v-2925d75a]{height:var(--scale-400, 2rem);padding:var(--scale-75) var(--spacing-xs)}.phila-filter-chip.is-small[data-v-2925d75a]{height:var(--scale-250, 1.25rem);padding:var(--scale-10) var(--spacing-2xs);gap:var(--spacing-2xs)}.phila-filter-chip.is-icon-only[data-v-2925d75a]{padding-left:var(--spacing-s, .75rem);padding-right:var(--spacing-s, .75rem)}.phila-filter-chip.phila-filter-chip--blue[data-v-2925d75a]{color:var(--Schemes-Inverse-Primary);border-color:var(--Schemes-Inverse-Primary);background:var(--Schemes-Info-Container)}.phila-filter-chip.phila-filter-chip--blue.is-active[data-v-2925d75a]{background:var(--Palettes-Secondary-Secondary-150);color:var(--Schemes-On-Primary);border-color:var(--Palettes-Tertiary-Tertiary-100)}.phila-filter-chip.phila-filter-chip--blue[data-v-2925d75a]:hover:not(:disabled){background:var(--Palettes-Secondary-Secondary-600);color:var(--Palettes-Tertiary-Tertiary-50);border-color:var(--Palettes-Tertiary-Tertiary-100)}.phila-filter-chip.phila-filter-chip--grey[data-v-2925d75a]{color:var(--Palettes-Neutral-Variant-Neutral-Variant-200);border-color:var(--Schemes-Border-low);background:var(--Palettes-Neutral-Neutral-700)}.phila-filter-chip.phila-filter-chip--grey.is-active[data-v-2925d75a]{background:var(--Palettes-Neutral-Neutral-100);color:var(--Schemes-On-Primary);border-color:var(--Schemes-Border-low)}.phila-filter-chip.phila-filter-chip--grey[data-v-2925d75a]:hover:not(:disabled){background:var(--Palettes-Neutral-Neutral-600);color:var(--Palettes-Neutral-Variant-Neutral-Variant-50);border-color:var(--Schemes-Border-low)}.phila-filter-chip.phila-filter-chip--green[data-v-2925d75a]{color:var(--Palettes-Success-Success-100);border-color:var(--Palettes-Success-Success-150);background:var(--Palettes-Success-Success-700)}.phila-filter-chip.phila-filter-chip--green.is-active[data-v-2925d75a]{background:var(--Palettes-Success-Success-200);color:var(--Schemes-On-Primary);border-color:var(--Palettes-Success-Success-200)}.phila-filter-chip.phila-filter-chip--green[data-v-2925d75a]:hover:not(:disabled){background:var(--Palettes-Success-Success-600);color:var(--Palettes-Success-Success-100);border-color:var(--Palettes-Success-Success-150)}.phila-filter-chip.phila-filter-chip--red[data-v-2925d75a]{color:var(--Schemes-On-Error-Container);border-color:var(--Schemes-On-Error-Container);background:var(--Schemes-Error-Container)}.phila-filter-chip.phila-filter-chip--red.is-active[data-v-2925d75a]{background:var(--Palettes-Error-Error-250);color:var(--Schemes-On-Primary);border-color:var(--Palettes-Error-Error-150)}.phila-filter-chip.phila-filter-chip--red[data-v-2925d75a]:hover:not(:disabled){background:var(--Palettes-Error-Error-650);color:var(--Palettes-Error-Error-200);border-color:var(--Palettes-Error-Error-150)}.phila-filter-chip.phila-filter-chip--white[data-v-2925d75a]{color:var(--Palettes-Neutral-Variant-Neutral-Variant-200);border-color:var(--Schemes-Border-low);background:var(--Schemes-On-Primary)}.phila-filter-chip.phila-filter-chip--white.is-active[data-v-2925d75a]{background:var(--Palettes-Neutral-Neutral-100);color:var(--Schemes-On-Primary);border-color:var(--Schemes-Border-low)}.phila-filter-chip.phila-filter-chip--white[data-v-2925d75a]:hover:not(:disabled){background:var(--Schemes-Surface-Container-Lowest);color:var(--Schemes-Inverse-Surface);border-color:var(--Schemes-Border-low)}.phila-filter-chip.phila-filter-chip--yellow[data-v-2925d75a]{color:var(--Schemes-On-Alert-Container);border-color:var(--Palettes-Alert-Alert-150);background:var(--Palettes-Alert-Alert-700)}.phila-filter-chip.phila-filter-chip--yellow.is-active[data-v-2925d75a]{background:var(--Palettes-Alert-Alert-250);color:var(--Schemes-On-Primary);border-color:var(--Palettes-Alert-Alert-150)}.phila-filter-chip.phila-filter-chip--yellow[data-v-2925d75a]:hover:not(:disabled){background:var(--Palettes-Alert-Alert-550);color:var(--Schemes-On-Alert-Container);border-color:var(--Palettes-Alert-Alert-150)}.phila-filter-chip[data-v-2925d75a]:focus-visible{outline:2px solid currentColor;outline-offset:var(--spacing-2xs)}.phila-filter-chip[data-v-2925d75a] .icon{color:var(--chip-icon-color, currentColor)}.phila-filter-chip[data-v-2925d75a] .icon path{fill:var(--chip-icon-color, currentColor)}.phila-filter-chip-panel{position:fixed;z-index:1000;min-width:12rem;background:var(--Schemes-Background);border:var(--border-width-s) solid var(--Schemes-Border);border-radius:var(--border-radius-s);box-shadow:0 4px 8px #0000001a;padding:var(--spacing-s, .75rem);display:flex;flex-direction:column;gap:var(--spacing-s, .75rem)}.phila-filter-chip-panel__footer{display:flex;justify-content:flex-end;align-items:center;gap:var(--spacing-s, .75rem)}.phila-filter-chip-sheet__scrim{position:fixed;inset:0;z-index:1000;background:#0000004d}.phila-filter-chip-sheet{position:fixed;left:0;right:0;bottom:0;z-index:1001;background:var(--Schemes-Background);border-top-left-radius:var(--border-radius-l, 1rem);border-top-right-radius:var(--border-radius-l, 1rem);box-shadow:0 -4px 16px #00000026;padding:var(--spacing-m, 1rem);display:flex;flex-direction:column;gap:var(--spacing-s, .75rem);max-height:80vh;overflow-y:auto}.phila-filter-chip-sheet__header{display:flex;align-items:center;justify-content:space-between}.phila-filter-chip-sheet__title{font-weight:700;font-family:var(--Body-Default-font-body-default-family, "Montserrat", sans-serif)}.phila-filter-chip-sheet__footer{display:flex;gap:var(--spacing-s, .75rem);margin-top:var(--spacing-xs, .5rem)}.phila-filter-chip-sheet__footer>*{flex:1}.phila-filter-chip-sheet__close{background:none;border:none;cursor:pointer;font-size:1.25rem;line-height:1;padding:0;color:var(--Schemes-On-Surface, inherit)}.phila-filter-chip-sheet .labels-container{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.phila-filter-chip-panel .phila-filter-chip-panel__reset{background:none;border:none;padding:0;cursor:pointer;color:var(--Schemes-Primary);text-decoration:underline;font-weight:600}.phila-filter-chip-panel .phila-filter-chip-panel__reset:focus-visible{outline:2px solid var(--Schemes-Primary);outline-offset:2px}.phila-filter-chip-group[data-v-0999af8a]{display:flex;flex-direction:column;gap:var(--spacing-2xs)}.phila-filter-chip-group__viewport[data-v-0999af8a]{position:relative}.phila-filter-chip-group__row[data-v-0999af8a]{display:flex;flex-wrap:nowrap;gap:var(--spacing-xs);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.phila-filter-chip-group__row[data-v-0999af8a]::-webkit-scrollbar{display:none}.phila-filter-chip-group__arrow[data-v-0999af8a]{position:absolute;top:50%;transform:translateY(-50%);z-index:1;display:none;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border-radius:50%;border:var(--border-width-s) solid var(--Schemes-Border);background:var(--Schemes-Background);color:var(--Schemes-On-Surface);box-shadow:0 6px 8px -2px #00000059;cursor:pointer}.phila-filter-chip-group__arrow--left[data-v-0999af8a]{left:var(--spacing-m)}.phila-filter-chip-group__arrow--right[data-v-0999af8a]{right:var(--spacing-m)}@media(hover:hover)and (pointer:fine){.phila-filter-chip-group__viewport:hover .phila-filter-chip-group__arrow[data-v-0999af8a]{display:flex}}.phila-filter-chip-group.is-elevated[data-v-0999af8a] .phila-filter-chip{box-shadow:0 2px 4px #0003}.phila-filter-chip-group.is-elevated .phila-filter-chip-group__row[data-v-0999af8a]{padding-top:2px;padding-bottom:8px}
+.phila-filter-chip[data-v-2925d75a]{display:inline-flex;align-items:center;height:var(--scale-350, 1.75rem);cursor:pointer;border-style:solid;border-radius:var(--border-radius-l);white-space:nowrap;box-sizing:border-box;appearance:none;text-decoration:none;padding:var(--scale-25) var(--scale-75);gap:var(--spacing-xs);border-width:var(--border-width-s)}.phila-filter-chip.is-extra-large[data-v-2925d75a]{height:var(--scale-400, 2rem);padding:var(--scale-75) var(--spacing-xs);gap:var(--spacing-2xs)}.phila-filter-chip.is-large[data-v-2925d75a]{height:var(--scale-400, 2rem);padding:var(--scale-75) var(--spacing-xs)}.phila-filter-chip.is-small[data-v-2925d75a]{height:var(--scale-250, 1.25rem);padding:var(--scale-10) var(--spacing-2xs);gap:var(--spacing-2xs)}.phila-filter-chip.is-icon-only[data-v-2925d75a]{padding-left:var(--spacing-s, .75rem);padding-right:var(--spacing-s, .75rem)}.phila-filter-chip.phila-filter-chip--blue[data-v-2925d75a]{color:var(--Schemes-Inverse-Primary);border-color:var(--Schemes-Inverse-Primary);background:var(--Schemes-Info-Container)}.phila-filter-chip.phila-filter-chip--blue.is-active[data-v-2925d75a]{background:var(--Palettes-Secondary-Secondary-150);color:var(--Schemes-On-Primary);border-color:var(--Palettes-Tertiary-Tertiary-100)}.phila-filter-chip.phila-filter-chip--blue[data-v-2925d75a]:hover:not(:disabled){background:var(--Palettes-Secondary-Secondary-600);color:var(--Palettes-Tertiary-Tertiary-50);border-color:var(--Palettes-Tertiary-Tertiary-100)}.phila-filter-chip.phila-filter-chip--grey[data-v-2925d75a]{color:var(--Palettes-Neutral-Variant-Neutral-Variant-200);border-color:var(--Schemes-Border-low);background:var(--Palettes-Neutral-Neutral-700)}.phila-filter-chip.phila-filter-chip--grey.is-active[data-v-2925d75a]{background:var(--Palettes-Neutral-Neutral-100);color:var(--Schemes-On-Primary);border-color:var(--Schemes-Border-low)}.phila-filter-chip.phila-filter-chip--grey[data-v-2925d75a]:hover:not(:disabled){background:var(--Palettes-Neutral-Neutral-600);color:var(--Palettes-Neutral-Variant-Neutral-Variant-50);border-color:var(--Schemes-Border-low)}.phila-filter-chip.phila-filter-chip--green[data-v-2925d75a]{color:var(--Palettes-Success-Success-100);border-color:var(--Palettes-Success-Success-150);background:var(--Palettes-Success-Success-700)}.phila-filter-chip.phila-filter-chip--green.is-active[data-v-2925d75a]{background:var(--Palettes-Success-Success-200);color:var(--Schemes-On-Primary);border-color:var(--Palettes-Success-Success-200)}.phila-filter-chip.phila-filter-chip--green[data-v-2925d75a]:hover:not(:disabled){background:var(--Palettes-Success-Success-600);color:var(--Palettes-Success-Success-100);border-color:var(--Palettes-Success-Success-150)}.phila-filter-chip.phila-filter-chip--red[data-v-2925d75a]{color:var(--Schemes-On-Error-Container);border-color:var(--Schemes-On-Error-Container);background:var(--Schemes-Error-Container)}.phila-filter-chip.phila-filter-chip--red.is-active[data-v-2925d75a]{background:var(--Palettes-Error-Error-250);color:var(--Schemes-On-Primary);border-color:var(--Palettes-Error-Error-150)}.phila-filter-chip.phila-filter-chip--red[data-v-2925d75a]:hover:not(:disabled){background:var(--Palettes-Error-Error-650);color:var(--Palettes-Error-Error-200);border-color:var(--Palettes-Error-Error-150)}.phila-filter-chip.phila-filter-chip--white[data-v-2925d75a]{color:var(--Palettes-Neutral-Variant-Neutral-Variant-200);border-color:var(--Schemes-Border-low);background:var(--Schemes-On-Primary)}.phila-filter-chip.phila-filter-chip--white.is-active[data-v-2925d75a]{background:var(--Palettes-Neutral-Neutral-100);color:var(--Schemes-On-Primary);border-color:var(--Schemes-Border-low)}.phila-filter-chip.phila-filter-chip--white[data-v-2925d75a]:hover:not(:disabled){background:var(--Schemes-Surface-Container-Lowest);color:var(--Schemes-Inverse-Surface);border-color:var(--Schemes-Border-low)}.phila-filter-chip.phila-filter-chip--yellow[data-v-2925d75a]{color:var(--Schemes-On-Alert-Container);border-color:var(--Palettes-Alert-Alert-150);background:var(--Palettes-Alert-Alert-700)}.phila-filter-chip.phila-filter-chip--yellow.is-active[data-v-2925d75a]{background:var(--Palettes-Alert-Alert-250);color:var(--Schemes-On-Primary);border-color:var(--Palettes-Alert-Alert-150)}.phila-filter-chip.phila-filter-chip--yellow[data-v-2925d75a]:hover:not(:disabled){background:var(--Palettes-Alert-Alert-550);color:var(--Schemes-On-Alert-Container);border-color:var(--Palettes-Alert-Alert-150)}.phila-filter-chip[data-v-2925d75a]:focus-visible{outline:2px solid currentColor;outline-offset:var(--spacing-2xs)}.phila-filter-chip[data-v-2925d75a] .icon{color:var(--chip-icon-color, currentColor)}.phila-filter-chip[data-v-2925d75a] .icon path{fill:var(--chip-icon-color, currentColor)}.phila-filter-chip-panel{position:fixed;z-index:1000;min-width:12rem;background:var(--Schemes-Background);border:var(--border-width-s) solid var(--Schemes-Border);border-radius:var(--border-radius-s);box-shadow:0 4px 8px #0000001a;padding:var(--spacing-s, .75rem);display:flex;flex-direction:column;gap:var(--spacing-s, .75rem)}.phila-filter-chip-panel__footer{display:flex;justify-content:flex-end;align-items:center;gap:var(--spacing-s, .75rem)}.phila-filter-chip-sheet__scrim{position:fixed;inset:0;z-index:1000;background:#0000004d}.phila-filter-chip-sheet{position:fixed;left:0;right:0;bottom:0;z-index:1001;background:var(--Schemes-Background);border-top-left-radius:var(--border-radius-l, 1rem);border-top-right-radius:var(--border-radius-l, 1rem);box-shadow:0 -4px 16px #00000026;padding:var(--spacing-m, 1rem);display:flex;flex-direction:column;gap:var(--spacing-s, .75rem);max-height:80vh;overflow-y:auto}.phila-filter-chip-sheet__header{display:flex;align-items:center;justify-content:space-between}.phila-filter-chip-sheet__title{font-weight:700;font-family:var(--Body-Default-font-body-default-family, "Montserrat", sans-serif)}.phila-filter-chip-sheet__footer{display:flex;gap:var(--spacing-s, .75rem);margin-top:var(--spacing-xs, .5rem)}.phila-filter-chip-sheet__footer>*{flex:1}.phila-filter-chip-sheet__close{background:none;border:none;cursor:pointer;font-size:1.25rem;line-height:1;padding:0;color:var(--Schemes-On-Surface, inherit)}.phila-filter-chip-sheet .labels-container{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.phila-filter-chip-panel .phila-filter-chip-panel__reset{background:none;border:none;padding:0;cursor:pointer;color:var(--Schemes-Primary);text-decoration:underline;font-weight:600}.phila-filter-chip-panel .phila-filter-chip-panel__reset:focus-visible{outline:2px solid var(--Schemes-Primary);outline-offset:2px}.phila-filter-chip-group[data-v-9c777e02]{display:flex;flex-direction:column;gap:var(--spacing-2xs)}.phila-filter-chip-group__viewport[data-v-9c777e02]{position:relative}.phila-filter-chip-group__label[data-v-9c777e02]{padding-inline:var(--spacing-m)}.phila-filter-chip-group__row[data-v-9c777e02]{display:flex;flex-wrap:nowrap;gap:var(--spacing-xs);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;padding-inline:var(--spacing-m)}.phila-filter-chip-group__row[data-v-9c777e02]::-webkit-scrollbar{display:none}.phila-filter-chip-group__arrow[data-v-9c777e02]{position:absolute;top:50%;transform:translateY(-50%);z-index:1;display:none;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;padding:0;border-radius:50%;border:var(--border-width-s) solid var(--Schemes-Border);background:var(--Schemes-Background);color:var(--Schemes-On-Surface);box-shadow:0 6px 8px -2px #00000059;cursor:pointer}.phila-filter-chip-group__arrow--left[data-v-9c777e02]{left:var(--spacing-m)}.phila-filter-chip-group__arrow--right[data-v-9c777e02]{right:var(--spacing-m)}@media(hover:hover)and (pointer:fine){.phila-filter-chip-group__viewport:hover .phila-filter-chip-group__arrow[data-v-9c777e02]{display:flex}}.phila-filter-chip-group.is-elevated[data-v-9c777e02] .phila-filter-chip{box-shadow:0 2px 4px #0003}.phila-filter-chip-group.is-elevated .phila-filter-chip-group__row[data-v-9c777e02]{padding-top:2px;padding-bottom:8px}

package/dist/index.d.ts

@@ -1,27 +1,8 @@
-import { BaseProps, ComponentSize } from '@phila/phila-ui-core';
+import { BaseProps, ComponentSize, FilterChoice, FilterDefinition, FilterValues } from '@phila/phila-ui-core';
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 export { default as FilterChip } from './FilterChip.vue';
 export { default as FilterChipGroup } from './FilterChipGroup.vue';
 export type FilterChipColor = "blue" | "grey" | "green" | "red" | "white" | "yellow";
-/** value is string to satisfy RadioGroup (string-only) and CheckboxGroup. */
-export interface FilterChoice {
-    text: string;
-    value: string;
-}
-export interface FilterDefinition {
-    key: string;
-    label: string;
-    /** Present → dropdown chip; absent → toggle chip. */
-    choices?: FilterChoice[];
-    /** Dropdown only: checkbox group (true) vs radio group (false). Default false. */
-    multiple?: boolean;
-    iconDefinition?: IconDefinition;
-    /** Optional CSS color for this chip's leading icon (independent of text color). */
-    iconColor?: string;
-    /** Leave this filter's selections out of the filter button's count (e.g. Sort). */
-    excludeFromCount?: boolean;
-}
-export type FilterValues = Record<string, string | string[] | boolean>;
 /** A single chip. Toggle mode when `choices` is absent; dropdown mode when present. */
 export interface FilterChipProps extends BaseProps {
     /** Chip label (also the radio/checkbox group label in dropdown mode). */

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,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAExE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAEnE,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAC;AAErF,6EAA6E;AAC7E,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,gBAAgB;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,qDAAqD;IACrD,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,mFAAmF;IACnF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mFAAmF;IACnF,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,OAAO,CAAC,CAAC;AAEvE,uFAAuF;AACvF,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,qEAAqE;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mFAAmF;IACnF,sBAAsB,CAAC,EAAE,cAAc,CAAC;IACxC,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0EAA0E;IAC1E,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,OAAO,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,+FAA+F;IAC/F,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,YAAY,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACnH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAExE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAEnE,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAC;AAErF,uFAAuF;AACvF,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,yEAAyE;IACzE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,qEAAqE;IACrE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mFAAmF;IACnF,sBAAsB,CAAC,EAAE,cAAc,CAAC;IACxC,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,0EAA0E;IAC1E,UAAU,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,OAAO,CAAC;IACzC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,oBAAqB,SAAQ,SAAS;IACrD,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,+FAA+F;IAC/F,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),b=require("@phila/phila-ui-core"),w=require("@fortawesome/pro-solid-svg-icons"),L=require("@phila/phila-ui-radio"),R=require("@phila/phila-ui-checkbox"),S=require("@phila/phila-ui-button"),F=["aria-pressed","aria-expanded"],E="xxsmall",U=e.defineComponent({__name:"FilterChipBase",props:{text:{default:void 0},size:{default:"medium"},color:{default:"blue"},iconDefinition:{default:void 0},iconColor:{default:void 0},trailingIconDefinition:{default:void 0},iconOnly:{type:Boolean,default:!1},active:{type:Boolean,default:!1},chevron:{type:Boolean,default:!1},ariaPressed:{type:Boolean},ariaExpanded:{type:Boolean}},emits:["click"],setup(t,{expose:u}){const l=t,a=e.ref(null),i=e.computed(()=>b.cn("phila-filter-chip",`phila-filter-chip--${l.color}`,l.size!=="medium"&&`is-${l.size}`,"has-text-body-"+s(l.size),l.active&&"is-active",l.iconOnly&&"is-icon-only"));u({el:a});const s=r=>{switch(r){case"extra-large":return"default";case"large":return"small";default:return"extra-small"}};return(r,h)=>(e.openBlock(),e.createElementBlock("button",{ref_key:"rootEl",ref:a,type:"button",class:e.normalizeClass(i.value),style:e.normalizeStyle(t.iconColor?{"--chip-icon-color":t.iconColor}:void 0),"aria-pressed":t.ariaPressed,"aria-expanded":t.ariaExpanded,onClick:h[0]||(h[0]=v=>r.$emit("click",v))},[e.createVNode(e.unref(b.ActionContent),{"icon-definition":t.iconDefinition,size:t.size,inline:"","icon-size":E,"icon-only":t.iconOnly},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)],!0)]),_:3},8,["icon-definition","size","icon-only"]),t.chevron?(e.openBlock(),e.createBlock(e.unref(b.Icon),{key:0,"icon-definition":e.unref(w.faChevronDown),size:"xxsmall",inline:"",decorative:"",class:"phila-filter-chip__chevron"},null,8,["icon-definition"])):t.trailingIconDefinition?(e.openBlock(),e.createBlock(e.unref(b.Icon),{key:1,"icon-definition":t.trailingIconDefinition,size:E,inline:"",decorative:""},null,8,["icon-definition"])):e.createCommentVNode("",!0)],14,F))}}),$=(t,u)=>{const l=t.__vccOpts||t;for(const[a,i]of u)l[a]=i;return l},D=$(U,[["__scopeId","data-v-2925d75a"]]),M=["id","aria-label"],O={key:0,class:"phila-filter-chip-sheet__header"},q={class:"phila-filter-chip-sheet__title"},G={key:3,class:"phila-filter-chip-sheet__footer"},H={key:4,class:"phila-filter-chip-panel__footer"},W=e.defineComponent({__name:"FilterChipDropdownPanel",props:{menuId:{},label:{},choices:{},multiple:{type:Boolean},value:{},top:{},left:{},mobile:{type:Boolean,default:!1},applyText:{default:"Apply"},resetText:{default:"Reset"}},emits:["apply","reset","close"],setup(t,{emit:u}){const l=t,a=u,i=e.ref(typeof l.value=="string"?l.value:""),s=e.ref(Array.isArray(l.value)?[...l.value]:[]);e.watch(()=>l.value,c=>{l.multiple?s.value=Array.isArray(c)?[...c]:[]:i.value=typeof c=="string"?c:""});const r=e.computed(()=>l.choices.map(c=>({text:c.text,value:c.value}))),h=e.computed(()=>l.multiple?s.value.length:i.value?1:0),v=e.computed(()=>h.value>0?`${l.applyText} (${h.value})`:l.applyText),k=()=>{i.value="",s.value=[],a("reset")},d=()=>{a("apply",l.multiple?[...s.value]:i.value)};return(c,p)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[t.mobile?(e.openBlock(),e.createElementBlock("div",{key:0,class:"phila-filter-chip-sheet__scrim",onClick:p[0]||(p[0]=y=>a("close"))})):e.createCommentVNode("",!0),e.createElementVNode("div",{id:t.menuId,class:e.normalizeClass(t.mobile?"phila-filter-chip-sheet":"phila-filter-chip-panel"),role:"dialog","aria-label":t.label,style:e.normalizeStyle(t.mobile?void 0:{top:t.top+"px",left:t.left+"px"})},[t.mobile?(e.openBlock(),e.createElementBlock("header",O,[e.createElementVNode("span",q,e.toDisplayString(t.label),1),e.createElementVNode("button",{type:"button",class:"phila-filter-chip-sheet__close","aria-label":"Close",onClick:p[1]||(p[1]=y=>a("close"))}," ✕ ")])):e.createCommentVNode("",!0),t.multiple?(e.openBlock(),e.createBlock(e.unref(R.CheckboxGroup),{key:1,"group-label":t.label,choices:r.value,"model-value":s.value,"onUpdate:modelValue":p[2]||(p[2]=y=>s.value=y)},null,8,["group-label","choices","model-value"])):(e.openBlock(),e.createBlock(e.unref(L.RadioGroup),{key:2,"group-label":t.label,choices:r.value,"model-value":i.value,"onUpdate:modelValue":p[3]||(p[3]=y=>i.value=y)},null,8,["group-label","choices","model-value"])),t.mobile?(e.openBlock(),e.createElementBlock("div",G,[e.createVNode(e.unref(S.PhilaButton),{variant:"secondary",text:t.resetText,onClick:k},null,8,["text"]),e.createVNode(e.unref(S.PhilaButton),{variant:"primary",text:v.value,onClick:d},null,8,["text"])])):(e.openBlock(),e.createElementBlock("div",H,[e.createElementVNode("button",{type:"button",class:"phila-filter-chip-panel__reset has-text-body-small",onClick:k},e.toDisplayString(t.resetText),1),e.createVNode(e.unref(S.PhilaButton),{variant:"primary",size:"small",text:t.applyText,onClick:d},null,8,["text"])]))],14,M)]))}}),N="(max-width: 1064px) and (max-height: 915px)";function X(){const t=e.ref(typeof window<"u"&&window.matchMedia(N).matches);let u=null;function l(a){t.value=a.matches}return e.onMounted(()=>{u=window.matchMedia(N),t.value=u.matches,u.addEventListener("change",l)}),e.onBeforeUnmount(()=>{u?.removeEventListener("change",l)}),{isMobile:t}}let j=0;const A=e.defineComponent({__name:"FilterChip",props:{label:{default:void 0},text:{default:void 0},size:{default:"medium"},color:{default:"blue"},iconDefinition:{default:void 0},iconColor:{default:void 0},trailingIconDefinition:{default:void 0},selected:{type:Boolean,default:!1},choices:{default:void 0},multiple:{type:Boolean,default:!1},modelValue:{type:[String,Array,Boolean],default:void 0},applyText:{default:"Apply"},resetText:{default:"Reset"},className:{}},emits:["update:selected","update:modelValue","click"],setup(t,{emit:u}){const l=t,a=u,i=e.computed(()=>Array.isArray(l.choices)),s=e.useSlots(),r=e.computed(()=>!i.value&&!!l.iconDefinition&&!l.text&&!l.label&&!s.default);function h(m){a("update:selected",!l.selected),a("click",m)}const v=`phila-filter-chip-${e.useId()}-${++j}`,{isVisible:k,setVisibility:d}=b.useVisibility({id:v,group:"phila-filter-chip",outsideClickHide:!0,escapeKeyHide:!0,showSingle:!0}),c=e.computed(()=>k(v)),{isMobile:p}=X(),y=e.ref(null),B=e.ref(0),g=e.ref(0),z=e.computed(()=>l.multiple?Array.isArray(l.modelValue)?l.modelValue:[]:typeof l.modelValue=="string"?l.modelValue:""),x=e.computed(()=>l.multiple?Array.isArray(l.modelValue)&&l.modelValue.length>0:typeof l.modelValue=="string"&&l.modelValue!==""),n=e.computed(()=>l.multiple&&Array.isArray(l.modelValue)?l.modelValue.length:0),f=e.computed(()=>{const m=l.label??l.text??"";return n.value>0?`${m} (${n.value})`:m});function o(){const m=y.value?.el??null;if(!m)return;const V=m.getBoundingClientRect();B.value=V.bottom+4,g.value=V.left}function C(){c.value&&d(!1)}e.watch(c,m=>{m&&!p.value?window.addEventListener("scroll",C,{capture:!0}):window.removeEventListener("scroll",C,{capture:!0})});function T(){const m=!c.value;m&&!p.value&&o(),d(m)}function I(m){a("update:modelValue",m),d(!1)}function P(){a("update:modelValue",l.multiple?[]:"")}return(m,V)=>i.value?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createVNode(D,{ref_key:"triggerRef",ref:y,text:f.value,size:t.size,color:t.color,"icon-definition":t.iconDefinition,"icon-color":t.iconColor,active:x.value||c.value,chevron:"","aria-expanded":c.value,"data-toggle":`visibility-${v}`,onClick:T},null,8,["text","size","color","icon-definition","icon-color","active","aria-expanded","data-toggle"]),c.value?(e.openBlock(),e.createBlock(W,{key:0,"menu-id":v,label:t.label??t.text??"",choices:t.choices,multiple:t.multiple,value:z.value,top:B.value,left:g.value,mobile:e.unref(p),"apply-text":t.applyText,"reset-text":t.resetText,onApply:I,onReset:P,onClose:V[0]||(V[0]=ee=>e.unref(d)(!1))},null,8,["label","choices","multiple","value","top","left","mobile","apply-text","reset-text"])):e.createCommentVNode("",!0)],64)):(e.openBlock(),e.createBlock(D,{key:1,size:t.size,color:t.color,"icon-definition":t.iconDefinition,"icon-color":t.iconColor,"trailing-icon-definition":t.trailingIconDefinition,"icon-only":r.value,active:t.selected,"aria-pressed":t.selected,onClick:h},{default:e.withCtx(()=>[e.renderSlot(m.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])]),_:3},8,["size","color","icon-definition","icon-color","trailing-icon-definition","icon-only","active","aria-pressed"]))}}),K=5;function Q(){const t=e.ref(null),u=e.ref(!1);let l=!1,a=0,i=0,s=!1,r=null;const h=d=>{t.value&&d.pointerType!=="mouse"&&(l=!0,s=!1,a=d.clientX,i=t.value.scrollLeft)},v=d=>{if(!l||!t.value)return;const c=d.clientX-a;!s&&Math.abs(c)>K&&(s=!0,u.value=!0,t.value.setPointerCapture(d.pointerId),r=d.pointerId),s&&(t.value.scrollLeft=i-c)},k=()=>{if(t.value&&r!==null){try{t.value.releasePointerCapture(r)}catch{}r=null}l=!1,s&&setTimeout(()=>u.value=!1,0)};return e.onBeforeUnmount(k),{el:t,suppressClick:u,dragHandlers:{onPointerdown:h,onPointermove:v,onPointerup:k,onPointerleave:k}}}const Y={key:0,class:"phila-filter-chip-group__label has-text-label-default"},J={class:"phila-filter-chip-group__viewport"},Z=e.defineComponent({__name:"FilterChipGroup",props:{filters:{},modelValue:{default:()=>({})},label:{},size:{default:"medium"},color:{default:"blue"},filterButton:{type:Boolean,default:!1},elevated:{type:Boolean,default:!1},className:{}},emits:["update:modelValue","open-filters"],setup(t,{emit:u}){const l=t,a=u,i=e.computed(()=>{let n=0;for(const f of l.filters){if(f.excludeFromCount)continue;const o=l.modelValue[f.key];Array.isArray(o)?n+=o.length:typeof o=="string"?n+=o?1:0:o===!0&&(n+=1)}return n}),s=e.computed(()=>i.value>0?`Filters (${i.value} selected)`:"Filters"),{el:r,suppressClick:h,dragHandlers:v}=Q(),k=e.computed(()=>b.cn("phila-filter-chip-group",l.elevated&&"is-elevated",l.className));function d(n){return Array.isArray(n.choices)}function c(n,f){a("update:modelValue",{...l.modelValue,[n]:f})}function p(n){h.value&&(n.stopPropagation(),n.preventDefault())}const y=e.ref(!1),B=e.ref(!1);function g(){const n=r.value;n&&(y.value=n.scrollLeft>1,B.value=n.scrollLeft+n.clientWidth<n.scrollWidth-1)}function z(n){const f=r.value;f&&f.scrollBy({left:n*f.clientWidth*.8,behavior:"smooth"})}let x=null;return e.onMounted(()=>{e.nextTick(g),r.value&&(x=new ResizeObserver(()=>g()),x.observe(r.value))}),e.onBeforeUnmount(()=>{x?.disconnect(),x=null}),e.watch(()=>l.filters,()=>e.nextTick(g)),(n,f)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(k.value)},[t.label?(e.openBlock(),e.createElementBlock("span",Y,e.toDisplayString(t.label),1)):e.createCommentVNode("",!0),e.createElementVNode("div",J,[y.value?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"phila-filter-chip-group__arrow phila-filter-chip-group__arrow--left","aria-label":"Scroll filters left",onClick:f[0]||(f[0]=o=>z(-1))},[e.createVNode(e.unref(b.Icon),{"icon-definition":e.unref(w.faChevronLeft),size:"xxsmall",inline:"",decorative:""},null,8,["icon-definition"])])):e.createCommentVNode("",!0),e.createElementVNode("div",e.mergeProps({ref_key:"el",ref:r,class:"phila-filter-chip-group__row"},e.unref(v),{onClickCapture:p,onScroll:g}),[t.filterButton?(e.openBlock(),e.createBlock(D,{key:0,size:t.size,color:t.color,"icon-definition":e.unref(w.faSliders),text:i.value>0?`(${i.value})`:"","icon-only":i.value===0,active:i.value>0,"aria-label":s.value,onClick:f[1]||(f[1]=o=>a("open-filters"))},null,8,["size","color","icon-definition","text","icon-only","active","aria-label"])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.filters,o=>(e.openBlock(),e.createBlock(A,{key:o.key,label:o.label,text:o.label,size:t.size,color:t.color,"icon-definition":o.iconDefinition,"icon-color":o.iconColor,choices:o.choices,multiple:o.multiple,"model-value":d(o)?t.modelValue[o.key]:void 0,selected:!d(o)&&t.modelValue[o.key]===!0,"onUpdate:modelValue":C=>c(o.key,C),"onUpdate:selected":C=>c(o.key,C)},null,8,["label","text","size","color","icon-definition","icon-color","choices","multiple","model-value","selected","onUpdate:modelValue","onUpdate:selected"]))),128))],16),B.value?(e.openBlock(),e.createElementBlock("button",{key:1,type:"button",class:"phila-filter-chip-group__arrow phila-filter-chip-group__arrow--right","aria-label":"Scroll filters right",onClick:f[2]||(f[2]=o=>z(1))},[e.createVNode(e.unref(b.Icon),{"icon-definition":e.unref(w.faChevronRight),size:"xxsmall",inline:"",decorative:""},null,8,["icon-definition"])])):e.createCommentVNode("",!0)])],2))}}),_=$(Z,[["__scopeId","data-v-0999af8a"]]);exports.FilterChip=A;exports.FilterChipGroup=_;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('./index.css');const e=require("vue"),b=require("@phila/phila-ui-core"),w=require("@fortawesome/pro-solid-svg-icons"),L=require("@phila/phila-ui-radio"),R=require("@phila/phila-ui-checkbox"),S=require("@phila/phila-ui-button"),F=["aria-pressed","aria-expanded"],E="xxsmall",U=e.defineComponent({__name:"FilterChipBase",props:{text:{default:void 0},size:{default:"medium"},color:{default:"blue"},iconDefinition:{default:void 0},iconColor:{default:void 0},trailingIconDefinition:{default:void 0},iconOnly:{type:Boolean,default:!1},active:{type:Boolean,default:!1},chevron:{type:Boolean,default:!1},ariaPressed:{type:Boolean},ariaExpanded:{type:Boolean}},emits:["click"],setup(t,{expose:u}){const l=t,a=e.ref(null),i=e.computed(()=>b.cn("phila-filter-chip",`phila-filter-chip--${l.color}`,l.size!=="medium"&&`is-${l.size}`,"has-text-body-"+s(l.size),l.active&&"is-active",l.iconOnly&&"is-icon-only"));u({el:a});const s=r=>{switch(r){case"extra-large":return"default";case"large":return"small";default:return"extra-small"}};return(r,h)=>(e.openBlock(),e.createElementBlock("button",{ref_key:"rootEl",ref:a,type:"button",class:e.normalizeClass(i.value),style:e.normalizeStyle(t.iconColor?{"--chip-icon-color":t.iconColor}:void 0),"aria-pressed":t.ariaPressed,"aria-expanded":t.ariaExpanded,onClick:h[0]||(h[0]=v=>r.$emit("click",v))},[e.createVNode(e.unref(b.ActionContent),{"icon-definition":t.iconDefinition,size:t.size,inline:"","icon-size":E,"icon-only":t.iconOnly},{default:e.withCtx(()=>[e.renderSlot(r.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)],!0)]),_:3},8,["icon-definition","size","icon-only"]),t.chevron?(e.openBlock(),e.createBlock(e.unref(b.Icon),{key:0,"icon-definition":e.unref(w.faChevronDown),size:"xxsmall",inline:"",decorative:"",class:"phila-filter-chip__chevron"},null,8,["icon-definition"])):t.trailingIconDefinition?(e.openBlock(),e.createBlock(e.unref(b.Icon),{key:1,"icon-definition":t.trailingIconDefinition,size:E,inline:"",decorative:""},null,8,["icon-definition"])):e.createCommentVNode("",!0)],14,F))}}),$=(t,u)=>{const l=t.__vccOpts||t;for(const[a,i]of u)l[a]=i;return l},D=$(U,[["__scopeId","data-v-2925d75a"]]),M=["id","aria-label"],O={key:0,class:"phila-filter-chip-sheet__header"},q={class:"phila-filter-chip-sheet__title"},G={key:3,class:"phila-filter-chip-sheet__footer"},H={key:4,class:"phila-filter-chip-panel__footer"},W=e.defineComponent({__name:"FilterChipDropdownPanel",props:{menuId:{},label:{},choices:{},multiple:{type:Boolean},value:{},top:{},left:{},mobile:{type:Boolean,default:!1},applyText:{default:"Apply"},resetText:{default:"Reset"}},emits:["apply","reset","close"],setup(t,{emit:u}){const l=t,a=u,i=e.ref(typeof l.value=="string"?l.value:""),s=e.ref(Array.isArray(l.value)?[...l.value]:[]);e.watch(()=>l.value,c=>{l.multiple?s.value=Array.isArray(c)?[...c]:[]:i.value=typeof c=="string"?c:""});const r=e.computed(()=>l.choices.map(c=>({text:c.text,value:c.value}))),h=e.computed(()=>l.multiple?s.value.length:i.value?1:0),v=e.computed(()=>h.value>0?`${l.applyText} (${h.value})`:l.applyText),k=()=>{i.value="",s.value=[],a("reset")},d=()=>{a("apply",l.multiple?[...s.value]:i.value)};return(c,p)=>(e.openBlock(),e.createBlock(e.Teleport,{to:"body"},[t.mobile?(e.openBlock(),e.createElementBlock("div",{key:0,class:"phila-filter-chip-sheet__scrim",onClick:p[0]||(p[0]=y=>a("close"))})):e.createCommentVNode("",!0),e.createElementVNode("div",{id:t.menuId,class:e.normalizeClass(t.mobile?"phila-filter-chip-sheet":"phila-filter-chip-panel"),role:"dialog","aria-label":t.label,style:e.normalizeStyle(t.mobile?void 0:{top:t.top+"px",left:t.left+"px"})},[t.mobile?(e.openBlock(),e.createElementBlock("header",O,[e.createElementVNode("span",q,e.toDisplayString(t.label),1),e.createElementVNode("button",{type:"button",class:"phila-filter-chip-sheet__close","aria-label":"Close",onClick:p[1]||(p[1]=y=>a("close"))}," ✕ ")])):e.createCommentVNode("",!0),t.multiple?(e.openBlock(),e.createBlock(e.unref(R.CheckboxGroup),{key:1,"group-label":t.label,choices:r.value,"model-value":s.value,"onUpdate:modelValue":p[2]||(p[2]=y=>s.value=y)},null,8,["group-label","choices","model-value"])):(e.openBlock(),e.createBlock(e.unref(L.RadioGroup),{key:2,"group-label":t.label,choices:r.value,"model-value":i.value,"onUpdate:modelValue":p[3]||(p[3]=y=>i.value=y)},null,8,["group-label","choices","model-value"])),t.mobile?(e.openBlock(),e.createElementBlock("div",G,[e.createVNode(e.unref(S.PhilaButton),{variant:"secondary",text:t.resetText,onClick:k},null,8,["text"]),e.createVNode(e.unref(S.PhilaButton),{variant:"primary",text:v.value,onClick:d},null,8,["text"])])):(e.openBlock(),e.createElementBlock("div",H,[e.createElementVNode("button",{type:"button",class:"phila-filter-chip-panel__reset has-text-body-small",onClick:k},e.toDisplayString(t.resetText),1),e.createVNode(e.unref(S.PhilaButton),{variant:"primary",size:"small",text:t.applyText,onClick:d},null,8,["text"])]))],14,M)]))}}),N="(max-width: 1064px) and (max-height: 915px)";function X(){const t=e.ref(typeof window<"u"&&window.matchMedia(N).matches);let u=null;function l(a){t.value=a.matches}return e.onMounted(()=>{u=window.matchMedia(N),t.value=u.matches,u.addEventListener("change",l)}),e.onBeforeUnmount(()=>{u?.removeEventListener("change",l)}),{isMobile:t}}let j=0;const A=e.defineComponent({__name:"FilterChip",props:{label:{default:void 0},text:{default:void 0},size:{default:"medium"},color:{default:"blue"},iconDefinition:{default:void 0},iconColor:{default:void 0},trailingIconDefinition:{default:void 0},selected:{type:Boolean,default:!1},choices:{default:void 0},multiple:{type:Boolean,default:!1},modelValue:{type:[String,Array,Boolean],default:void 0},applyText:{default:"Apply"},resetText:{default:"Reset"},className:{}},emits:["update:selected","update:modelValue","click"],setup(t,{emit:u}){const l=t,a=u,i=e.computed(()=>Array.isArray(l.choices)),s=e.useSlots(),r=e.computed(()=>!i.value&&!!l.iconDefinition&&!l.text&&!l.label&&!s.default);function h(m){a("update:selected",!l.selected),a("click",m)}const v=`phila-filter-chip-${e.useId()}-${++j}`,{isVisible:k,setVisibility:d}=b.useVisibility({id:v,group:"phila-filter-chip",outsideClickHide:!0,escapeKeyHide:!0,showSingle:!0}),c=e.computed(()=>k(v)),{isMobile:p}=X(),y=e.ref(null),B=e.ref(0),g=e.ref(0),z=e.computed(()=>l.multiple?Array.isArray(l.modelValue)?l.modelValue:[]:typeof l.modelValue=="string"?l.modelValue:""),x=e.computed(()=>l.multiple?Array.isArray(l.modelValue)&&l.modelValue.length>0:typeof l.modelValue=="string"&&l.modelValue!==""),n=e.computed(()=>l.multiple&&Array.isArray(l.modelValue)?l.modelValue.length:0),f=e.computed(()=>{const m=l.label??l.text??"";return n.value>0?`${m} (${n.value})`:m});function o(){const m=y.value?.el??null;if(!m)return;const V=m.getBoundingClientRect();B.value=V.bottom+4,g.value=V.left}function C(){c.value&&d(!1)}e.watch(c,m=>{m&&!p.value?window.addEventListener("scroll",C,{capture:!0}):window.removeEventListener("scroll",C,{capture:!0})});function T(){const m=!c.value;m&&!p.value&&o(),d(m)}function I(m){a("update:modelValue",m),d(!1)}function P(){a("update:modelValue",l.multiple?[]:"")}return(m,V)=>i.value?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createVNode(D,{ref_key:"triggerRef",ref:y,text:f.value,size:t.size,color:t.color,"icon-definition":t.iconDefinition,"icon-color":t.iconColor,active:x.value||c.value,chevron:"","aria-expanded":c.value,"data-toggle":`visibility-${v}`,onClick:T},null,8,["text","size","color","icon-definition","icon-color","active","aria-expanded","data-toggle"]),c.value?(e.openBlock(),e.createBlock(W,{key:0,"menu-id":v,label:t.label??t.text??"",choices:t.choices,multiple:t.multiple,value:z.value,top:B.value,left:g.value,mobile:e.unref(p),"apply-text":t.applyText,"reset-text":t.resetText,onApply:I,onReset:P,onClose:V[0]||(V[0]=ee=>e.unref(d)(!1))},null,8,["label","choices","multiple","value","top","left","mobile","apply-text","reset-text"])):e.createCommentVNode("",!0)],64)):(e.openBlock(),e.createBlock(D,{key:1,size:t.size,color:t.color,"icon-definition":t.iconDefinition,"icon-color":t.iconColor,"trailing-icon-definition":t.trailingIconDefinition,"icon-only":r.value,active:t.selected,"aria-pressed":t.selected,onClick:h},{default:e.withCtx(()=>[e.renderSlot(m.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(t.text),1)])]),_:3},8,["size","color","icon-definition","icon-color","trailing-icon-definition","icon-only","active","aria-pressed"]))}}),K=5;function Q(){const t=e.ref(null),u=e.ref(!1);let l=!1,a=0,i=0,s=!1,r=null;const h=d=>{t.value&&d.pointerType!=="mouse"&&(l=!0,s=!1,a=d.clientX,i=t.value.scrollLeft)},v=d=>{if(!l||!t.value)return;const c=d.clientX-a;!s&&Math.abs(c)>K&&(s=!0,u.value=!0,t.value.setPointerCapture(d.pointerId),r=d.pointerId),s&&(t.value.scrollLeft=i-c)},k=()=>{if(t.value&&r!==null){try{t.value.releasePointerCapture(r)}catch{}r=null}l=!1,s&&setTimeout(()=>u.value=!1,0)};return e.onBeforeUnmount(k),{el:t,suppressClick:u,dragHandlers:{onPointerdown:h,onPointermove:v,onPointerup:k,onPointerleave:k}}}const Y={key:0,class:"phila-filter-chip-group__label has-text-label-default"},J={class:"phila-filter-chip-group__viewport"},Z=e.defineComponent({__name:"FilterChipGroup",props:{filters:{},modelValue:{default:()=>({})},label:{},size:{default:"medium"},color:{default:"blue"},filterButton:{type:Boolean,default:!1},elevated:{type:Boolean,default:!1},className:{}},emits:["update:modelValue","open-filters"],setup(t,{emit:u}){const l=t,a=u,i=e.computed(()=>{let n=0;for(const f of l.filters){if(f.excludeFromCount)continue;const o=l.modelValue[f.key];Array.isArray(o)?n+=o.length:typeof o=="string"?n+=o?1:0:o===!0&&(n+=1)}return n}),s=e.computed(()=>i.value>0?`Filters (${i.value} selected)`:"Filters"),{el:r,suppressClick:h,dragHandlers:v}=Q(),k=e.computed(()=>b.cn("phila-filter-chip-group",l.elevated&&"is-elevated",l.className));function d(n){return Array.isArray(n.choices)}function c(n,f){a("update:modelValue",{...l.modelValue,[n]:f})}function p(n){h.value&&(n.stopPropagation(),n.preventDefault())}const y=e.ref(!1),B=e.ref(!1);function g(){const n=r.value;n&&(y.value=n.scrollLeft>1,B.value=n.scrollLeft+n.clientWidth<n.scrollWidth-1)}function z(n){const f=r.value;f&&f.scrollBy({left:n*f.clientWidth*.8,behavior:"smooth"})}let x=null;return e.onMounted(()=>{e.nextTick(g),r.value&&(x=new ResizeObserver(()=>g()),x.observe(r.value))}),e.onBeforeUnmount(()=>{x?.disconnect(),x=null}),e.watch(()=>l.filters,()=>e.nextTick(g)),(n,f)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(k.value)},[t.label?(e.openBlock(),e.createElementBlock("span",Y,e.toDisplayString(t.label),1)):e.createCommentVNode("",!0),e.createElementVNode("div",J,[y.value?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"phila-filter-chip-group__arrow phila-filter-chip-group__arrow--left","aria-label":"Scroll filters left",onClick:f[0]||(f[0]=o=>z(-1))},[e.createVNode(e.unref(b.Icon),{"icon-definition":e.unref(w.faChevronLeft),size:"xxsmall",inline:"",decorative:""},null,8,["icon-definition"])])):e.createCommentVNode("",!0),e.createElementVNode("div",e.mergeProps({ref_key:"el",ref:r,class:"phila-filter-chip-group__row"},e.unref(v),{onClickCapture:p,onScroll:g}),[t.filterButton?(e.openBlock(),e.createBlock(D,{key:0,size:t.size,color:t.color,"icon-definition":e.unref(w.faSliders),text:i.value>0?`(${i.value})`:"","icon-only":i.value===0,active:i.value>0,"aria-label":s.value,onClick:f[1]||(f[1]=o=>a("open-filters"))},null,8,["size","color","icon-definition","text","icon-only","active","aria-label"])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.filters,o=>(e.openBlock(),e.createBlock(A,{key:o.key,label:o.label,text:o.label,size:t.size,color:t.color,"icon-definition":o.iconDefinition,"icon-color":o.iconColor,choices:o.choices,multiple:o.multiple,"model-value":d(o)?t.modelValue[o.key]:void 0,selected:!d(o)&&t.modelValue[o.key]===!0,"onUpdate:modelValue":C=>c(o.key,C),"onUpdate:selected":C=>c(o.key,C)},null,8,["label","text","size","color","icon-definition","icon-color","choices","multiple","model-value","selected","onUpdate:modelValue","onUpdate:selected"]))),128))],16),B.value?(e.openBlock(),e.createElementBlock("button",{key:1,type:"button",class:"phila-filter-chip-group__arrow phila-filter-chip-group__arrow--right","aria-label":"Scroll filters right",onClick:f[2]||(f[2]=o=>z(1))},[e.createVNode(e.unref(b.Icon),{"icon-definition":e.unref(w.faChevronRight),size:"xxsmall",inline:"",decorative:""},null,8,["icon-definition"])])):e.createCommentVNode("",!0)])],2))}}),_=$(Z,[["__scopeId","data-v-9c777e02"]]);exports.FilterChip=A;exports.FilterChipGroup=_;

package/dist/index.mjs

@@ -467,7 +467,7 @@ const $e = {
       ])
     ], 2));
   }
-}), Fe = /* @__PURE__ */ J(Ae, [["__scopeId", "data-v-0999af8a"]]);
+}), Fe = /* @__PURE__ */ J(Ae, [["__scopeId", "data-v-9c777e02"]]);
 export {
   ze as FilterChip,
   Fe as FilterChipGroup

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phila/phila-ui-filter-chip",
-  "version": "0.2.0-beta.2",
+  "version": "0.2.0-beta.4",
   "type": "module",
   "description": "Filter chips for faceted filtering",
   "main": "./dist/index.js",
@@ -30,10 +30,10 @@
     "@fortawesome/pro-solid-svg-icons": "^7.1.0"
   },
   "dependencies": {
-    "@phila/phila-ui-core": "3.0.0-beta.4",
-    "@phila/phila-ui-radio": "0.1.1-beta.5",
-    "@phila/phila-ui-checkbox": "0.1.1-beta.5",
-    "@phila/phila-ui-button": "2.2.3-beta.5"
+    "@phila/phila-ui-core": "3.0.0-beta.6",
+    "@phila/phila-ui-radio": "0.1.1-beta.7",
+    "@phila/phila-ui-checkbox": "0.1.1-beta.7",
+    "@phila/phila-ui-button": "2.2.3-beta.7"
   },
   "devDependencies": {
     "@types/node": "^24.0.0",