@bcc-code/component-library-vue 0.0.0-dev.926a8fe → 0.0.0-dev.95bf9c4

package/dist/theme.css

@@ -1,10 +1,10 @@
 /* Layer order: Tailwind base/utilities first, then PrimeVue so component styles win */
 @layer theme, base, tailwind, primevue;
-@import "@bcc-code/design-tokens/css";
+@import '@bcc-code/design-tokens/css';
 
-@import "tailwindcss";
-@import "@bcc-code/design-tokens/tailwind";
-@import "@bcc-code/design-tokens/primevue/overrides";
+@import 'tailwindcss';
+@import '@bcc-code/design-tokens/tailwind';
+@import '@bcc-code/design-tokens/primevue/overrides';
 
 
 /* === ./styles/theme.css === */
@@ -649,7 +649,8 @@
 
 /* Capitalize first letter */
 @utility capital {
-    display: inline-block;
+    @apply inline-block;
+
     &::first-letter {
         text-transform: uppercase;
     }
@@ -1824,32 +1825,90 @@
 /** Custom styles to fix primevue components that are not custom or wrapped. */
 
 /**
-.BccAutocomplete
+* GUTTER FIX
+* Primevue's dropwdown components are all missing the gap between input and dropdown
+**/
+.p-autocomplete-overlay,
+.p-menu-overlay,
+.p-multiselect-overlay,
+.p-select-overlay,
+.p-treeselect-overlay {
+	margin: var(--p-anchor-gutter) 0;
+}
+
+/* This fix is to ensure overlay badge is contained within the size of the component it wraps */
+.p-overlaybadge {
+	display: inline-block;
+}
+
+/**
+* BccAutocomplete
 **/
 
 /** Our icons are a bit smaller that Primevue's default */
 .p-autocomplete .p-icon {
-    --p-icon-size: var(--icon-size-sm);
-    --p-form-field-sm-font-size: var(--icon-size-sm);
-    --p-form-field-lg-font-size: var(--icon-size-md);
+	--p-icon-size: var(--icon-size-sm);
+	--p-form-field-sm-font-size: var(--icon-size-sm);
+	--p-form-field-lg-font-size: var(--icon-size-md);
+}
+
+.p-autocomplete .p-autocomplete-clear-icon {
+	/** middle-align the icon */
+	top: calc(50% - var(--icon-size-sm) / 2);
+	margin-top: 0;
 }
 
 .p-autocomplete-clearable .p-inputtext {
-    flex-grow: 1;
+	flex-grow: 1;
 }
 
+.p-autocomplete-chip.p-chip {
+	padding-block-start: calc(var(--p-autocomplete-padding-y) / 2);
+	padding-block-end: calc(var(--p-autocomplete-padding-y) / 2);
+	border-radius: var(--p-autocomplete-chip-border-radius);
+}
 
 /**
-GUTTER FIX
-* Primevue's dropwdown components are all missing the gap between input and dropdown
-**/ 
-.p-autocomplete-overlay,
-.p-menu-overlay,
-.p-multiselect-overlay,
-.p-select-overlay,
-.p-treeselect-overlay {
-    margin: var(--p-anchor-gutter) 0;
+* BccSelect
+**/
+.p-select {
+	--p-icon-size: var(--icon-size-sm);
+}
+
+.p-select.inline-select {
+	@apply mx-auto inline-flex w-auto items-center border-0 bg-transparent shadow-none;
+	--p-icon-size: 1.25em;
+	--p-select-dropdown-width: 1.5em;
+	--p-select-min-height: auto;
+}
+
+.p-select.inline-select .p-select-label {
+	@apply inline-block font-semibold;
+	font-size: inherit;
+	padding: 0 0 0 0.25em;
+}
+
+.p-select.inline-select.inverse {
+	--p-select-color: var(--color-neutral-0);
+	--p-select-dropdown-color: var(--color-neutral-0);
+	--p-select-placeholder-color: var(--color-dark-neutral-1000);
+}
+
+/** 
+* Fix issue with icons inside Input within an InputGroup being hidden when Input is in focus
+**/
+.p-inputicon {
+	z-index: 2;
+}
+
+.p-dialog-close-button .p-icon {
+	height: var(--icon-size-sm);
+	width: var(--icon-size-sm);
 }
+.p-dialog .p-button-icon:empty {
+	display: none;
+}
+
 
 
 
@@ -1862,6 +1921,10 @@ GUTTER FIX
   
     @apply bg-ctx text-ctx;
   }
+
+  .bcc-badge.capital {
+    @apply inline-flex;
+  }
   .bcc-badge.sm {
     @apply w-4 h-4 text-heading-xs;
   }
@@ -1872,7 +1935,7 @@ GUTTER FIX
     @apply w-6 h-6 text-heading-md;
   }
   .bcc-badge.xl {
-    @apply w-8 h-8 text-heading-lg;
+    @apply w-8 h-8 text-heading-md;
   }
 
   .bcc-badge .bcc-badge-icon {
@@ -1909,7 +1972,7 @@ GUTTER FIX
   }
 
   .bcc-badge.squared  {
-    @apply rounded;
+    @apply rounded-sm;
   }
 }
 
@@ -2011,8 +2074,8 @@ GUTTER FIX
     .bcc-frame--raised {
         --ctx-background: var(--color-elevation-surface-raised-default);
     }
-    .bcc-frame--raised.rounded {
-        @apply rounded;
+    .bcc-frame--rounded {
+        @apply rounded-md;
     }
     .bcc-frame--raised.bcc-frame--shadow {
         @apply shadow-raised;
@@ -2083,43 +2146,53 @@ GUTTER FIX
     @apply relative w-full;
   }
 
-  .bcc-nps-result .result-gauge-dial {
+  .bcc-nps-result.xs {
+    @apply w-24;
+  }
+  .bcc-nps-result.sm {
+    @apply w-36;
+  }
+  .bcc-nps-result.md {
+    @apply w-48;
+  }
+  .bcc-nps-result.lg {
+    @apply w-60;
+  }
+  .bcc-nps-result.xl {
+    @apply w-72;
+  }
+
+  .bcc-nps-result .bcc-nps-result-gauge-dial {
     transform-origin: center;
   }
 
-  .bcc-nps-result.animated .result-gauge-dial {
+  .bcc-nps-result.animated .bcc-nps-result-gauge-dial {
     transition-delay: 0.3s;
     transition: all .7s cubic-bezier(0, 0, 0.3, 1.5);    
   }
 
-  .bcc-nps-result-labels.lg {
-    @apply bottom-[2em];
-  }
   .bcc-nps-result-labels {
-    @apply absolute bottom-[1em] flex w-full flex-col items-center justify-center;
-  }
-  .bcc-nps-result-labels.sm {
-    @apply bottom-0;
+    @apply absolute text-base bottom-1/4 translate-y-1/2  flex w-full flex-col items-center justify-center;
   }
 
-  .bcc-nps-result-labels.lg .bcc-nps-result-labels--heading {
-    @apply text-heading-xl leading-tight;
-  }
   .bcc-nps-result-labels--heading {
-    @apply text-heading-lg leading-none;
+    @apply text-[1.25em] font-semibold leading-none;
   }
-  .bcc-nps-result-labels.sm .bcc-nps-result-labels--heading {
-    @apply text-heading-md leading-none;
+  .bcc-nps-result-labels--label {
+    @apply text-[0.75em] text-subtlest;
   }
 
-  .bcc-nps-result-labels.lg .bcc-nps-result-labels--label {
-    @apply text-body-lg opacity-60;
+  .bcc-nps-result.md .bcc-nps-result-labels {
+    @apply text-lg;
   }
-  .bcc-nps-result-labels--label {
-    @apply text-body-md opacity-60;
+  .bcc-nps-result.lg .bcc-nps-result-labels {
+    @apply text-xl;
   }
-  .bcc-nps-result-labels.sm .bcc-nps-result-labels--label {
-    @apply text-body-sm;
+  .bcc-nps-result.xl .bcc-nps-result-labels {
+    @apply text-2xl;
+  }
+  .bcc-nps-result.full .bcc-nps-result-labels {
+    @apply text-lg;
   }
 }
 
@@ -2306,8 +2379,13 @@ GUTTER FIX
         --p-avatar-background: var(--ctx-background);
         --p-avatar-color: var(--ctx-text);
         --bcc-avatar-border: var(--ctx-border);
-        @apply overflow-hidden shrink-0 ctx-gray-subtler;
+        @apply overflow-hidden shrink-0 ctx-gray-subtler text-sm;
+    }
+
+    .bcc-avatar .icon {
+        height: var(--icon-size-sm);
     }
+
     .bcc-avatar.male,
     .bcc-avatar.M {
         @apply ctx-blue-subtler;
@@ -2330,43 +2408,54 @@ GUTTER FIX
     .bcc-avatar.xs {
         @apply size-5 text-xs;
     }
+    .bcc-avatar.xs .icon {
+        height: var(--icon-size-xs);
+    }
     .bcc-avatar.sm {
-        @apply size-6 text-sm;
+        @apply size-6 text-xs;
+    }
+    .bcc-avatar.sm .icon {
+        height: var(--icon-size-xs);
     }
     .bcc-avatar.md {
-        @apply size-8 text-base;
+        /* same as default */
+    }
+    .bcc-avatar.md .icon {
+        /* same as default */
     }
     .bcc-avatar.lg {
-        @apply size-10 text-lg;
+        @apply size-10 text-md;
+    }
+    .bcc-avatar.lg .icon {
+        height: var(--icon-size-md);
     }
     .bcc-avatar.xl {
         @apply size-12 text-xl;
     }
+    .bcc-avatar.xl .icon {
+        height: var(--icon-size-lg);
+    }
     .bcc-avatar.xxl {
         @apply size-20 text-3xl;
     }
+    .bcc-avatar.xxl .icon {
+        height: var(--icon-size-xl);
+    }
     .bcc-avatar.xxxl {
         @apply size-24 text-4xl;
     }
-
-    .bcc-avatar.squared.lg {
-        @apply text-xl;
-    }
-    .bcc-avatar.squared.xl {
-        @apply text-2xl;
-    }
-    .bcc-avatar.squared.xxl {
-        @apply text-4xl;
-    }
-    .bcc-avatar.squared.xxxl {
-        @apply text-5xl;
+    .bcc-avatar.xxxl .icon {
+        height: var(--icon-size-xl);
     }
 
+    .p-overlaybadge .bcc-avatar.p-avatar-circle.lg~.p-badge,
+    .p-overlaybadge .bcc-avatar.p-avatar-circle.xl~.p-badge {
+        transform: translate(40%, -40%);
+    }
 
     .p-overlaybadge .bcc-avatar.p-avatar-circle.xxxl~.p-badge,
-    .p-overlaybadge .bcc-avatar.p-avatar-circle.xxl~.p-badge,
-    .p-overlaybadge .bcc-avatar.p-avatar-circle.xl~.p-badge {
-        transform: translate(25%, -25%);
+    .p-overlaybadge .bcc-avatar.p-avatar-circle.xxl~.p-badge {
+        transform: translate(20%, -20%);
     }
 }
 
@@ -2411,24 +2500,28 @@ GUTTER FIX
 
 
 
-:root, :host {
+:root,
+:host {
 	--font-sans: 'Archivo', system-ui, sans-serif;
-  @apply font-sans antialiased p-0 m-0;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+	@apply m-0 p-0 font-sans antialiased;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
 
+hr {
+	border-color: var(--color-border-default);
 }
 
 b,
 strong,
 .bold {
-  font-weight: bold;
-  --ctx-text: var(--ctx-text-bold);
+	font-weight: bold;
+	--ctx-text: var(--ctx-text-bold);
 }
 
 /* Disable state */
 :disabled,
 .disabled {
-  cursor: not-allowed;
-  pointer-events: none;
+	cursor: not-allowed;
+	pointer-events: none;
 }

package/dist-types/components/custom/BccNpsResult/BccNpsResult.vue.d.ts

@@ -2,7 +2,7 @@ export type NpsResultProps = {
     /** NPS score between -100 and 100; drives the gauge needle angle and position. */
     score: number;
     /** Controls the size of the gauge and optional text (lg, md, sm, xs). */
-    size?: 'lg' | 'md' | 'sm' | 'xs';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
     /** Text shown as the main heading; defaults to the numeric score when unset. */
     display?: string;
     /** Secondary label shown under the main heading. */
@@ -13,7 +13,7 @@ export type NpsResultProps = {
     animated?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<NpsResultProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NpsResultProps> & Readonly<{}>, {
-    size: "lg" | "md" | "sm" | "xs";
+    size: "xs" | "sm" | "md" | "lg" | "xl" | "full";
     hideText: boolean;
     animated: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist-types/components/custom/BccStepIndicator/BccStepIndicator.vue.d.ts

@@ -1,8 +1,8 @@
 import { type BCC_CONTEXT } from '@/contexts';
 export type StepIndicatorProps = {
-    steps: string[];
-    additionalText?: boolean;
-    showStepLabel?: boolean;
+    steps: string[] | number;
+    hideText?: boolean;
+    hideLabel?: boolean;
     left?: boolean;
     right?: boolean;
     context?: BCC_CONTEXT;
@@ -20,8 +20,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
     "onUpdate:modelValue"?: ((value: number) => any) | undefined;
 }>, {
     context: BCC_CONTEXT;
-    additionalText: boolean;
-    showStepLabel: boolean;
+    hideText: boolean;
+    hideLabel: boolean;
     headingFn: (currentStep: number, totalSteps: number) => string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist-types/components/wrapped/BccAvatar/BccAvatar.vue.d.ts

@@ -11,8 +11,8 @@ export type AvatarProps = Omit<PrimeAvatarProps, 'shape' | 'size'> & {
     squared?: boolean;
     /** Adds a visible border around the avatar. */
     bordered?: boolean;
-    /** Controls the avatar dimensions; maps to CSS size classes (xs through xxl). */
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+    /** Controls the avatar dimensions; maps to CSS size classes (xs through xxl). Default: md */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'xxxl';
 };
 declare const __VLS_export: import("vue").DefineComponent<AvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist-types/components/wrapped/BccButton.vue.d.ts

@@ -3,6 +3,7 @@ import { type ButtonProps as PrimeButtonProps } from 'primevue/button';
 export type ButtonProps = {
     icon?: VueComponent;
     iconRight?: boolean;
+    iconClass?: PrimeButtonProps['iconClass'];
     size?: PrimeButtonProps['size'];
     useCtx?: boolean;
 } & /* @vue-ignore */ Omit<PrimeButtonProps, 'icon' | 'iconPos'>;

package/dist-types/components/wrapped/BccMenu/BccMenu.vue.d.ts

@@ -0,0 +1,18 @@
+import type { VueComponent } from '@/types';
+import { type MenuProps as PrimeMenuProps } from 'primevue/menu';
+import type { MenuItem } from 'primevue/menuitem';
+/** Menu item model for BccMenu: icon can be a PrimeVue icon class string or a Vue icon component. */
+export type BccMenuItem = Omit<MenuItem, 'icon' | 'items'> & {
+    icon?: VueComponent;
+    items?: BccMenuItem[];
+};
+export type MenuProps = {
+    model?: BccMenuItem[];
+} & Omit<PrimeMenuProps, 'model'>;
+declare const __VLS_export: import("vue").DefineComponent<MenuProps, {
+    toggle: (event: Event, target?: unknown) => void | undefined;
+    show: (event: Event, target?: unknown) => void | undefined;
+    hide: () => void | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MenuProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist-types/components/wrapped/BccToggle/BccToggle.vue.d.ts

@@ -14,6 +14,12 @@ export type ToggleProps = ToggleSwitchProps & {
     /** When true, applies context-aware styling (e.g. from design tokens/theme). */
     useCtx?: boolean;
 };
-declare const __VLS_export: import("vue").DefineComponent<ToggleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToggleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<ToggleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (value: string | boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<ToggleProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | boolean | undefined) => any) | undefined;
+}>, {
+    defaultValue: string | boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist-types/components/wrapped/index.d.ts

@@ -5,7 +5,10 @@
 export { default as BccAvatar } from './BccAvatar/BccAvatar.vue';
 export { default as BccButton } from './BccButton.vue';
 export { default as BccCheckbox } from './BccCheckbox.vue';
+export { default as BccChip } from './BccChip/BccChip.vue';
+export { default as BccConfirmDialog } from './BccConfirmDialog/BccConfirmDialog.vue';
 export { default as BccInput } from './BccInput.vue';
+export { default as BccMenu } from './BccMenu/BccMenu.vue';
 export { default as BccMessage } from './BccMessage.vue';
 export { default as BccTabs } from './BccTabs/BccTabs.vue';
 export { default as BccToggle } from './BccToggle/BccToggle.vue';
@@ -13,7 +16,9 @@ export { default as BccToggleButton } from './BccToggleButton.vue';
 export type { AvatarProps } from './BccAvatar/BccAvatar.vue';
 export type { ButtonProps } from './BccButton.vue';
 export type { CheckboxProps } from './BccCheckbox.vue';
+export type { ChipProps } from './BccChip/BccChip.vue';
 export type { InputProps } from './BccInput.vue';
+export type { BccMenuItem, MenuProps } from './BccMenu/BccMenu.vue';
 export type { MessageProps } from './BccMessage.vue';
 export type { TabItem, TabsProps } from './BccTabs/BccTabs.vue';
 export type { ToggleProps } from './BccToggle/BccToggle.vue';

package/dist-types/index.d.ts

@@ -16,6 +16,7 @@
  * 2. Alternative: Pre-built CSS only (no Tailwind in your app; library styles + components only):
  *    - main.ts: import "@bcc-code/component-library-vue/style.css";
  */
+import type { ConfirmationOptions } from 'primevue/confirmationoptions';
 import './style.css';
 export { default as BccPreset } from '@bcc-code/design-tokens/primevue';
 export { BCC_CONTEXTS, type BCC_CONTEXT } from './contexts';
@@ -45,7 +46,6 @@ export { default as BccColorPicker } from 'primevue/colorpicker';
 export { default as BccColumn } from 'primevue/column';
 export { default as BccColumnGroup } from 'primevue/columngroup';
 export { default as BccConfig } from 'primevue/config';
-export { default as BccConfirmDialog } from 'primevue/confirmdialog';
 export { default as BccConfirmPopup } from 'primevue/confirmpopup';
 export { default as BccContextMenu } from 'primevue/contextmenu';
 export { default as BccDataTable } from 'primevue/datatable';
@@ -80,7 +80,6 @@ export { default as BccKeyFilter } from 'primevue/keyfilter';
 export { default as BccKnob } from 'primevue/knob';
 export { default as BccListbox } from 'primevue/listbox';
 export { default as BccMegaMenu } from 'primevue/megamenu';
-export { default as BccMenu } from 'primevue/menu';
 export { default as BccMenubar } from 'primevue/menubar';
 export { default as BccMeterGroup } from 'primevue/metergroup';
 export { default as BccMultiSelect } from 'primevue/multiselect';
@@ -116,6 +115,7 @@ export { default as BccStepItem } from 'primevue/stepitem';
 export { default as BccStepList } from 'primevue/steplist';
 export { default as BccStepPanel } from 'primevue/steppanel';
 export { default as BccStepPanels } from 'primevue/steppanels';
+export { default as BccStepper } from 'primevue/stepper';
 export { default as BccSteps } from 'primevue/steps';
 export { default as BccStyleClass } from 'primevue/styleclass';
 export { default as BccTab } from 'primevue/tab';
@@ -137,8 +137,18 @@ export { default as BccTooltip } from 'primevue/tooltip';
 export { default as BccTree } from 'primevue/tree';
 export { default as BccTreeSelect } from 'primevue/treeselect';
 export { default as BccTreeTable } from 'primevue/treetable';
-export { default as BccVirtualScroller } from 'primevue/virtualscroller';
-export { useConfirm } from 'primevue/useconfirm';
 export { useDialog } from 'primevue/usedialog';
 export { useToast } from 'primevue/usetoast';
+export { default as BccVirtualScroller } from 'primevue/virtualscroller';
 export { default as useAnimatedNumber } from './composables/animatedNumber';
+import type { VueComponent } from './types';
+interface UseConfirmOptions extends Omit<ConfirmationOptions, 'icon' | 'acceptIcon' | 'rejectIcon'> {
+    icon?: VueComponent | undefined;
+    acceptIcon?: VueComponent | undefined;
+    rejectIcon?: VueComponent | undefined;
+}
+type UseConfirmReturn = {
+    require: (option: UseConfirmOptions) => void;
+    close: () => void;
+};
+export declare function useConfirm(): UseConfirmReturn;