@phila/phila-ui-filter-chip 0.2.0-beta.0

package/README.md

@@ -0,0 +1,214 @@
+# FilterChip Component
+
+<!-- status-badge-start -->
+
+### Component Status
+
+| Component       | Status                                                             |
+| --------------- | ------------------------------------------------------------------ |
+| FilterChip      | ![In Progress](https://img.shields.io/badge/-In%20Progress-yellow) |
+| FilterChipGroup | ![In Progress](https://img.shields.io/badge/-In%20Progress-yellow) |
+
+<!-- status-badge-end -->
+
+`@phila/phila-ui-filter-chip` — pill-shaped filter controls for faceted filtering. A chip is a **toggle** when no `choices` are provided, or a **dropdown** (with deferred Apply/Reset) when `choices` is present.
+
+## Installation
+
+```bash
+pnpm add @phila/phila-ui-filter-chip
+```
+
+## Shared model
+
+```ts
+import type { FilterDefinition, FilterValues } from "@phila/phila-ui-filter-chip";
+
+// Describes one filter axis.
+interface FilterDefinition {
+  key: string; // unique key for FilterValues map
+  label: string; // chip label
+  choices?: FilterChoice[]; // present → dropdown; absent → toggle
+  multiple?: boolean; // dropdown only: checkbox (true) vs radio (false)
+  iconDefinition?: IconDefinition;
+  excludeFromCount?: boolean; // leave out of the filter button's count (e.g. Sort)
+}
+
+// Holds the current value of every filter, keyed by FilterDefinition.key.
+type FilterValues = Record<string, string | string[] | boolean>;
+```
+
+`FilterValues` is the single object that represents your entire filter state. Toggle chips store a `boolean`; single-select dropdowns store a `string`; multi-select dropdowns store a `string[]`.
+
+## FilterChip — toggle
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { FilterChip } from "@phila/phila-ui-filter-chip";
+
+const openNow = ref(false);
+</script>
+
+<template>
+  <FilterChip text="Open Now" v-model:selected="openNow" />
+</template>
+```
+
+## FilterChip — dropdown (single-select)
+
+```vue
+<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";
+
+const districtChoices: FilterChoice[] = [
+  { text: "Center City", value: "center-city" },
+  { text: "North Philadelphia", value: "north-philly" },
+  { text: "West Philadelphia", value: "west-philly" },
+];
+
+const district = ref("");
+</script>
+
+<template>
+  <FilterChip label="District" :choices="districtChoices" v-model="district" />
+</template>
+```
+
+Selections are **deferred**: the panel stays open while the user picks, and `update:modelValue` fires only when the user clicks Apply. Reset clears the value without closing.
+
+## FilterChip — dropdown (multi-select)
+
+```vue
+<template>
+  <FilterChip label="Neighborhoods" :choices="neighborhoodChoices" :multiple="true" v-model="selectedNeighborhoods" />
+</template>
+```
+
+## FilterChipGroup — data-driven row
+
+`FilterChipGroup` renders a row of chips from a `filters` array. The row never wraps: on hover-capable (mouse) devices, hovering reveals `‹`/`›` buttons at the edges to scroll offscreen chips into view; on touch devices the row drag-scrolls instead (a drag suppresses the click that ends it).
+
+With `filterButton`, a leading button (sliders icon + a count of total active selections) scrolls with the chips and emits `open-filters` when clicked — wire that to your app's own filter panel. A filter can opt out of the count with `excludeFromCount` (e.g. a Sort chip, which is ordering rather than filtering).
+
+```vue
+<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";
+
+const filters: FilterDefinition[] = [
+  { key: "openNow", label: "Open Now" }, // toggle
+  { key: "accessible", label: "Accessible" }, // toggle
+  {
+    key: "district",
+    label: "District",
+    choices: [
+      { text: "Center City", value: "center-city" },
+      { text: "North Philadelphia", value: "north-philly" },
+    ],
+  },
+  {
+    key: "amenities",
+    label: "Amenities",
+    multiple: true,
+    choices: [
+      { text: "Parking", value: "parking" },
+      { text: "Wi-Fi", value: "wifi" },
+    ],
+  },
+];
+
+const values = ref<FilterValues>({});
+</script>
+
+<template>
+  <FilterChipGroup :filters="filters" v-model="values" />
+</template>
+```
+
+`values` updates whenever any chip is applied or toggled:
+
+```ts
+// Example shape after interaction:
+{
+  openNow: true,
+  district: "center-city",
+  amenities: ["parking", "wifi"],
+}
+```
+
+## FilterChipGroup props
+
+| Prop           | Type                 | Default    | Description                                                    |
+| -------------- | -------------------- | ---------- | -------------------------------------------------------------- |
+| `filters`      | `FilterDefinition[]` | —          | Required. Ordered list of filter axes.                         |
+| `modelValue`   | `FilterValues`       | `{}`       | Current filter state (`v-model`).                              |
+| `label`        | `string`             | —          | Optional row label rendered above chips.                       |
+| `size`         | `ComponentSize`      | `"medium"` | Chip size applied to all chips.                                |
+| `color`        | `FilterChipColor`    | `"blue"`   | Chip color applied to all chips.                               |
+| `filterButton` | `boolean`            | `false`    | Show a leading sliders button with the active-selection count. |
+
+## FilterChipGroup events
+
+| Event               | Payload        | Description                                                        |
+| ------------------- | -------------- | ------------------------------------------------------------------ |
+| `update:modelValue` | `FilterValues` | Next filter state when any chip is applied or toggled (`v-model`). |
+| `open-filters`      | —              | The `filterButton` was clicked; open your app's filter panel.      |
+
+## FilterChip props
+
+| Prop                     | Type                 | Default    | Description                                                    |
+| ------------------------ | -------------------- | ---------- | -------------------------------------------------------------- |
+| `label`                  | `string`             | —          | Chip label (also the group label in dropdown mode).            |
+| `text`                   | `string`             | —          | Alias of `label` for toggle mode.                              |
+| `size`                   | `ComponentSize`      | `"medium"` | Chip size.                                                     |
+| `color`                  | `FilterChipColor`    | `"blue"`   | Chip color.                                                    |
+| `iconDefinition`         | `IconDefinition`     | —          | Optional leading FA icon shown inside the chip.                |
+| `trailingIconDefinition` | `IconDefinition`     | —          | Toggle mode: optional trailing icon (dropdown uses a chevron). |
+| `selected`               | `boolean`            | `false`    | Toggle mode: active state (`v-model:selected`).                |
+| `choices`                | `FilterChoice[]`     | —          | Presence switches to dropdown mode.                            |
+| `multiple`               | `boolean`            | `false`    | Dropdown mode: multi-select (checkbox) vs single (radio).      |
+| `modelValue`             | `string \| string[]` | —          | Dropdown mode: bound value (`v-model`).                        |
+| `applyText`              | `string`             | `"Apply"`  | Label for the Apply button.                                    |
+| `resetText`              | `string`             | `"Reset"`  | Label for the Reset button.                                    |
+
+A toggle chip with an `iconDefinition` but no label/text renders the icon **centered** as the chip's content (icon-only), rather than as a leading icon beside an empty label. Chip icons are a fixed size regardless of chip size; only the text scales.
+
+## FilterChip events
+
+| Event               | Payload              | Description                                 |
+| ------------------- | -------------------- | ------------------------------------------- |
+| `update:selected`   | `boolean`            | Toggle mode: fired on every click.          |
+| `update:modelValue` | `string \| string[]` | Dropdown mode: fired when Apply is clicked. |
+| `click`             | `MouseEvent`         | Toggle mode: the raw click event.           |
+
+## Building a custom filter panel
+
+`FilterDefinition` and `FilterValues` are the same model that `FilterChipGroup` uses internally. An app can bind its own summary panel or drawer to the same `values` ref — the chip row and the panel are two views over one piece of state. No generic aggregating panel ships in this package.
+
+## Development
+
+### Install Dependencies
+
+```bash
+pnpm install
+```
+
+### Build Library
+
+```bash
+pnpm build
+```
+
+### Type Check
+
+```bash
+pnpm type-check
+```
+
+## License
+
+MIT

package/dist/FilterChip.vue.d.ts

@@ -0,0 +1,140 @@
+import { FilterChipProps } from './index';
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<FilterChipProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    click: (event: MouseEvent) => any;
+    "update:modelValue": (value: string | string[]) => any;
+    "update:selected": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<FilterChipProps> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | string[]) => any) | undefined;
+    "onUpdate:selected"?: ((value: boolean) => any) | undefined;
+}>, {
+    text: string;
+    size: import('@phila/phila-ui-core').ComponentSize;
+    color: import('./index').FilterChipColor;
+    iconDefinition: import('@fortawesome/fontawesome-svg-core').IconDefinition;
+    trailingIconDefinition: import('@fortawesome/fontawesome-svg-core').IconDefinition;
+    label: string;
+    choices: import('./index').FilterChoice[];
+    multiple: boolean;
+    applyText: string;
+    resetText: string;
+    modelValue: string | string[] | boolean;
+    selected: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    triggerRef: ({
+        $: import('vue').ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly text?: string | undefined;
+            readonly size?: import('@phila/phila-ui-core').ComponentSize | undefined;
+            readonly color?: import('./index').FilterChipColor | undefined;
+            readonly iconDefinition?: import('@fortawesome/fontawesome-svg-core').IconDefinition | undefined;
+            readonly trailingIconDefinition?: import('@fortawesome/fontawesome-svg-core').IconDefinition | undefined;
+            readonly iconOnly?: boolean | undefined;
+            readonly active?: boolean | undefined;
+            readonly chevron?: boolean | undefined;
+            readonly ariaPressed?: boolean | undefined;
+            readonly ariaExpanded?: boolean | undefined;
+            readonly onClick?: ((event: MouseEvent) => any) | undefined;
+        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        } & {
+            rootEl: HTMLButtonElement;
+        };
+        $slots: Readonly<{
+            [name: string]: import('vue').Slot<any> | undefined;
+        }>;
+        $root: import('vue').ComponentPublicInstance | null;
+        $parent: import('vue').ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: (event: "click", event: MouseEvent) => void;
+        $el: HTMLButtonElement;
+        $options: import('vue').ComponentOptionsBase<Readonly<{
+            text?: string;
+            size?: import('@phila/phila-ui-core').ComponentSize;
+            color?: import('./index').FilterChipColor;
+            iconDefinition?: import('@fortawesome/fontawesome-svg-core').IconDefinition;
+            trailingIconDefinition?: import('@fortawesome/fontawesome-svg-core').IconDefinition;
+            iconOnly?: boolean;
+            active?: boolean;
+            chevron?: boolean;
+            ariaPressed?: boolean;
+            ariaExpanded?: boolean;
+        }> & Readonly<{
+            onClick?: ((event: MouseEvent) => any) | undefined;
+        }>, {
+            el: import('vue').Ref<HTMLButtonElement | null, HTMLButtonElement | null>;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+            click: (event: MouseEvent) => any;
+        }, string, {
+            text: string;
+            size: import('@phila/phila-ui-core').ComponentSize;
+            color: import('./index').FilterChipColor;
+            iconDefinition: import('@fortawesome/fontawesome-svg-core').IconDefinition;
+            trailingIconDefinition: import('@fortawesome/fontawesome-svg-core').IconDefinition;
+            iconOnly: boolean;
+            active: boolean;
+            chevron: boolean;
+        }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import('vue').nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+    } & Readonly<{
+        text: string;
+        size: import('@phila/phila-ui-core').ComponentSize;
+        color: import('./index').FilterChipColor;
+        iconDefinition: import('@fortawesome/fontawesome-svg-core').IconDefinition;
+        trailingIconDefinition: import('@fortawesome/fontawesome-svg-core').IconDefinition;
+        iconOnly: boolean;
+        active: boolean;
+        chevron: boolean;
+    }> & Omit<Readonly<{
+        text?: string;
+        size?: import('@phila/phila-ui-core').ComponentSize;
+        color?: import('./index').FilterChipColor;
+        iconDefinition?: import('@fortawesome/fontawesome-svg-core').IconDefinition;
+        trailingIconDefinition?: import('@fortawesome/fontawesome-svg-core').IconDefinition;
+        iconOnly?: boolean;
+        active?: boolean;
+        chevron?: boolean;
+        ariaPressed?: boolean;
+        ariaExpanded?: boolean;
+    }> & Readonly<{
+        onClick?: ((event: MouseEvent) => any) | undefined;
+    }>, "el" | ("text" | "size" | "color" | "iconDefinition" | "trailingIconDefinition" | "iconOnly" | "active" | "chevron")> & import('vue').ShallowUnwrapRef<{
+        el: import('vue').Ref<HTMLButtonElement | null, HTMLButtonElement | null>;
+    }> & {} & import('vue').ComponentCustomProperties & {} & {
+        $slots: {
+            default?(_: {}): any;
+        };
+    }) | null;
+}, any>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=FilterChip.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterChip.vue.d.ts","sourceRoot":"","sources":["../src/FilterChip.vue"],"names":[],"mappings":"AA2KA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAsU2qT,GAAG,8CAA8C,GAAG,yBAAyB,GAAG,6DAAmC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA1ElzT,GAAG;;AApPjC,wBA0SK;AAaL,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/FilterChipBase.vue.d.ts

@@ -0,0 +1,57 @@
+import { ComponentSize } from '@phila/phila-ui-core';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { FilterChipColor } from './index';
+type __VLS_Props = {
+    text?: string;
+    size?: ComponentSize;
+    color?: FilterChipColor;
+    iconDefinition?: IconDefinition;
+    /** trailing icon (toggle mode); ignored when `chevron` is set. */
+    trailingIconDefinition?: IconDefinition;
+    /** render only the icon, centered, with no text content. */
+    iconOnly?: boolean;
+    /** active = selected (toggle) or has-value/open (dropdown). */
+    active?: boolean;
+    /** show a trailing chevron (dropdown mode). */
+    chevron?: boolean;
+    /** aria-pressed for toggle; aria-expanded for dropdown. Set by caller. */
+    ariaPressed?: boolean;
+    ariaExpanded?: boolean;
+};
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        rootEl: HTMLButtonElement;
+    };
+    rootEl: HTMLButtonElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {
+    el: import('vue').Ref<HTMLButtonElement | null, HTMLButtonElement | null>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    click: (event: MouseEvent) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    text: string;
+    size: ComponentSize;
+    color: FilterChipColor;
+    iconDefinition: IconDefinition;
+    trailingIconDefinition: IconDefinition;
+    iconOnly: boolean;
+    active: boolean;
+    chevron: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    rootEl: HTMLButtonElement;
+}, HTMLButtonElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=FilterChipBase.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterChipBase.vue.d.ts","sourceRoot":"","sources":["../src/FilterChipBase.vue"],"names":[],"mappings":"AA+PA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAExE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,KAAK,WAAW,GAAG;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,kEAAkE;IAClE,sBAAsB,CAAC,EAAE,cAAc,CAAC;IACxC,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,0EAA0E;IAC1E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AA6DJ,iBAAS,cAAc;WA0GT,OAAO,IAA6B;;yBAXrB,GAAG;;;;;;EAgB/B;AAgBD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;UA5MV,MAAM;UACN,aAAa;WACZ,eAAe;oBACN,cAAc;4BAEN,cAAc;cAE5B,OAAO;YAET,OAAO;aAEN,OAAO;;;qBA4MnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/FilterChipDropdownPanel.vue.d.ts

@@ -0,0 +1,26 @@
+import { FilterChoice } from './index';
+type __VLS_Props = {
+    menuId: string;
+    label: string;
+    choices: FilterChoice[];
+    multiple: boolean;
+    /** committed value from the parent */
+    value: string | string[];
+    /** fixed-position coords computed from the trigger rect */
+    top: number;
+    left: number;
+    applyText?: string;
+    resetText?: string;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    reset: () => any;
+    apply: (value: string | string[]) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onReset?: (() => any) | undefined;
+    onApply?: ((value: string | string[]) => any) | undefined;
+}>, {
+    applyText: string;
+    resetText: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;
+//# sourceMappingURL=FilterChipDropdownPanel.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilterChipDropdownPanel.vue.d.ts","sourceRoot":"","sources":["../src/FilterChipDropdownPanel.vue"],"names":[],"mappings":"AAmIA,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,2DAA2D;IAC3D,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;;;;;;;;eAFY,MAAM;eACN,MAAM;;AA0LtB,wBASG"}

package/dist/FilterChipGroup.vue.d.ts

@@ -0,0 +1,17 @@
+import { FilterChipGroupProps, FilterValues } from './index';
+declare const _default: import('vue').DefineComponent<FilterChipGroupProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: FilterValues) => any;
+    "open-filters": () => any;
+}, string, import('vue').PublicProps, Readonly<FilterChipGroupProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: FilterValues) => any) | undefined;
+    "onOpen-filters"?: (() => any) | undefined;
+}>, {
+    size: import('@phila/phila-ui-core').ComponentSize;
+    color: import('./index').FilterChipColor;
+    modelValue: FilterValues;
+    filterButton: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    el: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;
+//# sourceMappingURL=FilterChipGroup.vue.d.ts.map

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

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

package/dist/index.css

@@ -0,0 +1 @@
+.phila-filter-chip[data-v-7411a108]{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-7411a108]{height:var(--scale-400, 2rem);padding:var(--scale-75) var(--spacing-xs);gap:var(--spacing-2xs)}.phila-filter-chip.is-large[data-v-7411a108]{height:var(--scale-400, 2rem);padding:var(--scale-75) var(--spacing-xs)}.phila-filter-chip.is-small[data-v-7411a108]{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-7411a108]{padding-left:var(--spacing-s, .75rem);padding-right:var(--spacing-s, .75rem)}.phila-filter-chip.phila-filter-chip--blue[data-v-7411a108]{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-7411a108]{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-7411a108]: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-7411a108]{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-7411a108]{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-7411a108]: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-7411a108]{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-7411a108]{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-7411a108]: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-7411a108]{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-7411a108]{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-7411a108]: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-7411a108]{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-7411a108]{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-7411a108]: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-7411a108]{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-7411a108]{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-7411a108]: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-7411a108]:focus-visible{outline:2px solid currentColor;outline-offset:var(--spacing-2xs)}.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-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-99d3ffdf]{display:flex;flex-direction:column;gap:var(--spacing-2xs)}.phila-filter-chip-group__viewport[data-v-99d3ffdf]{position:relative}.phila-filter-chip-group__row[data-v-99d3ffdf]{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-99d3ffdf]::-webkit-scrollbar{display:none}.phila-filter-chip-group__arrow[data-v-99d3ffdf]{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-99d3ffdf]{left:0}.phila-filter-chip-group__arrow--right[data-v-99d3ffdf]{right:0}@media(hover:hover)and (pointer:fine){.phila-filter-chip-group__viewport:hover .phila-filter-chip-group__arrow[data-v-99d3ffdf]{display:flex}}

package/dist/index.d.ts

@@ -0,0 +1,54 @@
+import { BaseProps, ComponentSize } 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;
+    /** 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). */
+    label?: string;
+    /** Toggle label when no choices (alias of label via slot). */
+    text?: string;
+    size?: ComponentSize;
+    color?: FilterChipColor;
+    iconDefinition?: IconDefinition;
+    /** Toggle mode: trailing icon (ignored in dropdown mode, which uses a chevron). */
+    trailingIconDefinition?: IconDefinition;
+    /** Toggle mode: selection state. */
+    selected?: boolean;
+    /** Dropdown mode: presence switches the chip to a dropdown. */
+    choices?: FilterChoice[];
+    /** Dropdown mode: multi (checkbox) vs single (radio). */
+    multiple?: boolean;
+    /** Dropdown mode: bound value (string for single, string[] for multi). */
+    modelValue?: string | string[] | boolean;
+    applyText?: string;
+    resetText?: string;
+}
+export interface FilterChipGroupProps extends BaseProps {
+    filters: FilterDefinition[];
+    modelValue?: FilterValues;
+    label?: string;
+    size?: ComponentSize;
+    color?: FilterChipColor;
+    /** Show a leading button (sliders icon + active-selection count) that emits `open-filters`. */
+    filterButton?: boolean;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +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,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,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;CACxB"}

package/dist/index.js

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

package/dist/index.mjs

@@ -0,0 +1,416 @@
+import { defineComponent as T, ref as x, computed as h, createElementBlock as C, openBlock as p, normalizeClass as U, createVNode as S, createBlock as b, createCommentVNode as z, unref as m, withCtx as H, renderSlot as G, createTextVNode as M, toDisplayString as L, watch as E, Teleport as Q, createElementVNode as B, normalizeStyle as Y, useSlots as Z, useId as _, Fragment as W, onBeforeUnmount as X, onMounted as ee, nextTick as O, mergeProps as le, renderList as te } from "vue";
+import { cn as K, ActionContent as ie, Icon as P, useVisibility as oe } from "@phila/phila-ui-core";
+import { faChevronDown as ne, faChevronLeft as ae, faSliders as re, faChevronRight as ue } from "@fortawesome/pro-solid-svg-icons";
+import { RadioGroup as ce } from "@phila/phila-ui-radio";
+import { CheckboxGroup as se } from "@phila/phila-ui-checkbox";
+import { PhilaButton as de } from "@phila/phila-ui-button";
+import './index.css';const fe = ["aria-pressed", "aria-expanded"], N = "xxsmall", pe = /* @__PURE__ */ T({
+  __name: "FilterChipBase",
+  props: {
+    text: { default: void 0 },
+    size: { default: "medium" },
+    color: { default: "blue" },
+    iconDefinition: { 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(e, { expose: v }) {
+    const l = e, a = x(null), i = h(
+      () => K(
+        "phila-filter-chip",
+        `phila-filter-chip--${l.color}`,
+        l.size !== "medium" && `is-${l.size}`,
+        "has-text-body-" + u(l.size),
+        l.active && "is-active",
+        l.iconOnly && "is-icon-only"
+      )
+    );
+    v({ el: a });
+    const u = (n) => {
+      switch (n) {
+        case "extra-large":
+          return "default";
+        case "large":
+          return "small";
+        default:
+          return "extra-small";
+      }
+    };
+    return (n, g) => (p(), C("button", {
+      ref_key: "rootEl",
+      ref: a,
+      type: "button",
+      class: U(i.value),
+      "aria-pressed": e.ariaPressed,
+      "aria-expanded": e.ariaExpanded,
+      onClick: g[0] || (g[0] = (y) => n.$emit("click", y))
+    }, [
+      S(m(ie), {
+        "icon-definition": e.iconDefinition,
+        size: e.size,
+        inline: "",
+        "icon-size": N,
+        "icon-only": e.iconOnly
+      }, {
+        default: H(() => [
+          G(n.$slots, "default", {}, () => [
+            M(L(e.text), 1)
+          ], !0)
+        ]),
+        _: 3
+      }, 8, ["icon-definition", "size", "icon-only"]),
+      e.chevron ? (p(), b(m(P), {
+        key: 0,
+        "icon-definition": m(ne),
+        size: "xxsmall",
+        inline: "",
+        decorative: "",
+        class: "phila-filter-chip__chevron"
+      }, null, 8, ["icon-definition"])) : e.trailingIconDefinition ? (p(), b(m(P), {
+        key: 1,
+        "icon-definition": e.trailingIconDefinition,
+        size: N,
+        inline: "",
+        decorative: ""
+      }, null, 8, ["icon-definition"])) : z("", !0)
+    ], 10, fe));
+  }
+}), j = (e, v) => {
+  const l = e.__vccOpts || e;
+  for (const [a, i] of v)
+    l[a] = i;
+  return l;
+}, F = /* @__PURE__ */ j(pe, [["__scopeId", "data-v-7411a108"]]), ve = ["id", "aria-label"], me = { class: "phila-filter-chip-panel__footer" }, ye = /* @__PURE__ */ T({
+  __name: "FilterChipDropdownPanel",
+  props: {
+    menuId: {},
+    label: {},
+    choices: {},
+    multiple: { type: Boolean },
+    value: {},
+    top: {},
+    left: {},
+    applyText: { default: "Apply" },
+    resetText: { default: "Reset" }
+  },
+  emits: ["apply", "reset"],
+  setup(e, { emit: v }) {
+    const l = e, a = v, i = x(typeof l.value == "string" ? l.value : ""), u = x(Array.isArray(l.value) ? [...l.value] : []);
+    E(
+      () => l.value,
+      (s) => {
+        l.multiple ? u.value = Array.isArray(s) ? [...s] : [] : i.value = typeof s == "string" ? s : "";
+      }
+    );
+    const n = h(() => l.choices.map((s) => ({ text: s.text, value: s.value }))), g = () => {
+      i.value = "", u.value = [], a("reset");
+    }, y = () => {
+      a("apply", l.multiple ? [...u.value] : i.value);
+    };
+    return (s, r) => (p(), b(Q, { to: "body" }, [
+      B("div", {
+        id: e.menuId,
+        class: "phila-filter-chip-panel",
+        role: "dialog",
+        "aria-label": e.label,
+        style: Y({ top: e.top + "px", left: e.left + "px" })
+      }, [
+        e.multiple ? (p(), b(m(se), {
+          key: 0,
+          "group-label": e.label,
+          choices: n.value,
+          "model-value": u.value,
+          "onUpdate:modelValue": r[0] || (r[0] = (d) => u.value = d)
+        }, null, 8, ["group-label", "choices", "model-value"])) : (p(), b(m(ce), {
+          key: 1,
+          "group-label": e.label,
+          choices: n.value,
+          "model-value": i.value,
+          "onUpdate:modelValue": r[1] || (r[1] = (d) => i.value = d)
+        }, null, 8, ["group-label", "choices", "model-value"])),
+        B("div", me, [
+          B("button", {
+            type: "button",
+            class: "phila-filter-chip-panel__reset has-text-body-small",
+            onClick: g
+          }, L(e.resetText), 1),
+          S(m(de), {
+            variant: "primary",
+            size: "small",
+            text: e.applyText,
+            onClick: y
+          }, null, 8, ["text"])
+        ])
+      ], 12, ve)
+    ]));
+  }
+});
+let he = 0;
+const ge = /* @__PURE__ */ T({
+  __name: "FilterChip",
+  props: {
+    label: { default: void 0 },
+    text: { default: void 0 },
+    size: { default: "medium" },
+    color: { default: "blue" },
+    iconDefinition: { 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(e, { emit: v }) {
+    const l = e, a = v, i = h(() => Array.isArray(l.choices)), u = Z(), n = h(
+      () => !i.value && !!l.iconDefinition && !l.text && !l.label && !u.default
+    );
+    function g(f) {
+      a("update:selected", !l.selected), a("click", f);
+    }
+    const y = `phila-filter-chip-${_()}-${++he}`, { isVisible: s, setVisibility: r } = oe({
+      id: y,
+      group: "phila-filter-chip",
+      outsideClickHide: !0,
+      escapeKeyHide: !0,
+      showSingle: !0
+    }), d = h(() => s(y)), $ = x(null), D = x(0), w = x(0), V = h(() => l.multiple ? Array.isArray(l.modelValue) ? l.modelValue : [] : typeof l.modelValue == "string" ? l.modelValue : ""), I = h(() => l.multiple ? Array.isArray(l.modelValue) && l.modelValue.length > 0 : typeof l.modelValue == "string" && l.modelValue !== ""), k = h(() => l.multiple && Array.isArray(l.modelValue) ? l.modelValue.length : 0), o = h(() => {
+      const f = l.label ?? l.text ?? "";
+      return k.value > 0 ? `${f} (${k.value})` : f;
+    });
+    function c() {
+      const f = $.value?.el ?? null;
+      if (!f) return;
+      const R = f.getBoundingClientRect();
+      D.value = R.bottom + 4, w.value = R.left;
+    }
+    function t() {
+      d.value && r(!1);
+    }
+    E(d, (f) => {
+      f ? window.addEventListener("scroll", t, { capture: !0 }) : window.removeEventListener("scroll", t, { capture: !0 });
+    });
+    function A() {
+      const f = !d.value;
+      f && c(), r(f);
+    }
+    function q(f) {
+      a("update:modelValue", f), r(!1);
+    }
+    function J() {
+      a("update:modelValue", l.multiple ? [] : "");
+    }
+    return (f, R) => i.value ? (p(), C(W, { key: 0 }, [
+      S(F, {
+        ref_key: "triggerRef",
+        ref: $,
+        text: o.value,
+        size: e.size,
+        color: e.color,
+        "icon-definition": e.iconDefinition,
+        active: I.value || d.value,
+        chevron: "",
+        "aria-expanded": d.value,
+        "data-toggle": `visibility-${y}`,
+        onClick: A
+      }, null, 8, ["text", "size", "color", "icon-definition", "active", "aria-expanded", "data-toggle"]),
+      d.value ? (p(), b(ye, {
+        key: 0,
+        "menu-id": y,
+        label: e.label ?? e.text ?? "",
+        choices: e.choices,
+        multiple: e.multiple,
+        value: V.value,
+        top: D.value,
+        left: w.value,
+        "apply-text": e.applyText,
+        "reset-text": e.resetText,
+        onApply: q,
+        onReset: J
+      }, null, 8, ["label", "choices", "multiple", "value", "top", "left", "apply-text", "reset-text"])) : z("", !0)
+    ], 64)) : (p(), b(F, {
+      key: 1,
+      size: e.size,
+      color: e.color,
+      "icon-definition": e.iconDefinition,
+      "trailing-icon-definition": e.trailingIconDefinition,
+      "icon-only": n.value,
+      active: e.selected,
+      "aria-pressed": e.selected,
+      onClick: g
+    }, {
+      default: H(() => [
+        G(f.$slots, "default", {}, () => [
+          M(L(e.text), 1)
+        ])
+      ]),
+      _: 3
+    }, 8, ["size", "color", "icon-definition", "trailing-icon-definition", "icon-only", "active", "aria-pressed"]));
+  }
+}), xe = 5;
+function be() {
+  const e = x(null), v = x(!1);
+  let l = !1, a = 0, i = 0, u = !1, n = null;
+  const g = (r) => {
+    e.value && r.pointerType !== "mouse" && (l = !0, u = !1, a = r.clientX, i = e.value.scrollLeft);
+  }, y = (r) => {
+    if (!l || !e.value) return;
+    const d = r.clientX - a;
+    !u && Math.abs(d) > xe && (u = !0, v.value = !0, e.value.setPointerCapture(r.pointerId), n = r.pointerId), u && (e.value.scrollLeft = i - d);
+  }, s = () => {
+    if (e.value && n !== null) {
+      try {
+        e.value.releasePointerCapture(n);
+      } catch {
+      }
+      n = null;
+    }
+    l = !1, u && setTimeout(() => v.value = !1, 0);
+  };
+  return X(s), {
+    el: e,
+    suppressClick: v,
+    dragHandlers: {
+      onPointerdown: g,
+      onPointermove: y,
+      onPointerup: s,
+      onPointerleave: s
+    }
+  };
+}
+const ke = {
+  key: 0,
+  class: "phila-filter-chip-group__label has-text-label-default"
+}, Ce = { class: "phila-filter-chip-group__viewport" }, Ve = /* @__PURE__ */ T({
+  __name: "FilterChipGroup",
+  props: {
+    filters: {},
+    modelValue: { default: () => ({}) },
+    label: {},
+    size: { default: "medium" },
+    color: { default: "blue" },
+    filterButton: { type: Boolean, default: !1 },
+    className: {}
+  },
+  emits: ["update:modelValue", "open-filters"],
+  setup(e, { emit: v }) {
+    const l = e, a = v, i = h(() => {
+      let o = 0;
+      for (const c of l.filters) {
+        if (c.excludeFromCount) continue;
+        const t = l.modelValue[c.key];
+        Array.isArray(t) ? o += t.length : typeof t == "string" ? o += t ? 1 : 0 : t === !0 && (o += 1);
+      }
+      return o;
+    }), u = h(
+      () => i.value > 0 ? `Filters (${i.value} selected)` : "Filters"
+    ), { el: n, suppressClick: g, dragHandlers: y } = be(), s = h(() => K("phila-filter-chip-group", l.className));
+    function r(o) {
+      return Array.isArray(o.choices);
+    }
+    function d(o, c) {
+      a("update:modelValue", { ...l.modelValue, [o]: c });
+    }
+    function $(o) {
+      g.value && (o.stopPropagation(), o.preventDefault());
+    }
+    const D = x(!1), w = x(!1);
+    function V() {
+      const o = n.value;
+      o && (D.value = o.scrollLeft > 1, w.value = o.scrollLeft + o.clientWidth < o.scrollWidth - 1);
+    }
+    function I(o) {
+      const c = n.value;
+      c && c.scrollBy({ left: o * c.clientWidth * 0.8, behavior: "smooth" });
+    }
+    let k = null;
+    return ee(() => {
+      O(V), n.value && (k = new ResizeObserver(() => V()), k.observe(n.value));
+    }), X(() => {
+      k?.disconnect(), k = null;
+    }), E(
+      () => l.filters,
+      () => O(V)
+    ), (o, c) => (p(), C("div", {
+      class: U(s.value)
+    }, [
+      e.label ? (p(), C("span", ke, L(e.label), 1)) : z("", !0),
+      B("div", Ce, [
+        D.value ? (p(), C("button", {
+          key: 0,
+          type: "button",
+          class: "phila-filter-chip-group__arrow phila-filter-chip-group__arrow--left",
+          "aria-label": "Scroll filters left",
+          onClick: c[0] || (c[0] = (t) => I(-1))
+        }, [
+          S(m(P), {
+            "icon-definition": m(ae),
+            size: "xxsmall",
+            inline: "",
+            decorative: ""
+          }, null, 8, ["icon-definition"])
+        ])) : z("", !0),
+        B("div", le({
+          ref_key: "el",
+          ref: n,
+          class: "phila-filter-chip-group__row"
+        }, m(y), {
+          onClickCapture: $,
+          onScroll: V
+        }), [
+          e.filterButton ? (p(), b(F, {
+            key: 0,
+            size: e.size,
+            color: e.color,
+            "icon-definition": m(re),
+            text: i.value > 0 ? `(${i.value})` : "",
+            "icon-only": i.value === 0,
+            active: i.value > 0,
+            "aria-label": u.value,
+            onClick: c[1] || (c[1] = (t) => a("open-filters"))
+          }, null, 8, ["size", "color", "icon-definition", "text", "icon-only", "active", "aria-label"])) : z("", !0),
+          (p(!0), C(W, null, te(e.filters, (t) => (p(), b(ge, {
+            key: t.key,
+            label: t.label,
+            text: t.label,
+            size: e.size,
+            color: e.color,
+            "icon-definition": t.iconDefinition,
+            choices: t.choices,
+            multiple: t.multiple,
+            "model-value": r(t) ? e.modelValue[t.key] : void 0,
+            selected: !r(t) && e.modelValue[t.key] === !0,
+            "onUpdate:modelValue": (A) => d(t.key, A),
+            "onUpdate:selected": (A) => d(t.key, A)
+          }, null, 8, ["label", "text", "size", "color", "icon-definition", "choices", "multiple", "model-value", "selected", "onUpdate:modelValue", "onUpdate:selected"]))), 128))
+        ], 16),
+        w.value ? (p(), C("button", {
+          key: 1,
+          type: "button",
+          class: "phila-filter-chip-group__arrow phila-filter-chip-group__arrow--right",
+          "aria-label": "Scroll filters right",
+          onClick: c[2] || (c[2] = (t) => I(1))
+        }, [
+          S(m(P), {
+            "icon-definition": m(ue),
+            size: "xxsmall",
+            inline: "",
+            decorative: ""
+          }, null, 8, ["icon-definition"])
+        ])) : z("", !0)
+      ])
+    ], 2));
+  }
+}), $e = /* @__PURE__ */ j(Ve, [["__scopeId", "data-v-99d3ffdf"]]);
+export {
+  ge as FilterChip,
+  $e as FilterChipGroup
+};

package/dist/useDragScroll.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Pointer drag-to-scroll for a horizontally overflowing element.
+ * While dragging past DRAG_THRESHOLD, sets `suppressClick` true for the
+ * duration of the drag so a chip click does not fire on drag release.
+ */
+export declare function useDragScroll(): {
+    el: import('vue').Ref<HTMLElement | null, HTMLElement | null>;
+    suppressClick: import('vue').Ref<boolean, boolean>;
+    dragHandlers: {
+        onPointerdown: (e: PointerEvent) => void;
+        onPointermove: (e: PointerEvent) => void;
+        onPointerup: () => void;
+        onPointerleave: () => void;
+    };
+};
+//# sourceMappingURL=useDragScroll.d.ts.map

package/dist/useDragScroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDragScroll.d.ts","sourceRoot":"","sources":["../src/useDragScroll.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AACH,wBAAgB,aAAa;;;;2BAUD,YAAY;2BAWZ,YAAY;;;;EAsCvC"}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@phila/phila-ui-filter-chip",
+  "version": "0.2.0-beta.0",
+  "type": "module",
+  "description": "Filter chips for faceted filtering",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "ui",
+    "filter-chip",
+    "vue",
+    "component"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0",
+    "@fortawesome/fontawesome-svg-core": "^7.1.0",
+    "@fortawesome/pro-solid-svg-icons": "^7.1.0"
+  },
+  "dependencies": {
+    "@phila/phila-ui-checkbox": "0.1.1-beta.4",
+    "@phila/phila-ui-core": "3.0.0-beta.3",
+    "@phila/phila-ui-radio": "0.1.1-beta.4",
+    "@phila/phila-ui-button": "2.2.3-beta.4"
+  },
+  "devDependencies": {
+    "@types/node": "^24.0.0",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "eslint": "^9.0.0",
+    "typescript": "^5.8.3",
+    "vite": "^7.0.6",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-lib-inject-css": "^2.2.2"
+  },
+  "scripts": {
+    "build": "vite build",
+    "build-win": "vite build",
+    "dev": "vite build --watch",
+    "lint": "eslint src --ext .ts,.tsx,.vue",
+    "lint:fix": "eslint src --ext .ts,.tsx,.vue --fix",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
+  }
+}