@bcc-code/component-library-vue 0.7.3 → 0.7.6

package/dist/theme.css

@@ -649,7 +649,8 @@
 
 /* Capitalize first letter */
 @utility capital {
-    display: inline-block;
+    @apply inline-block;
+
     &::first-letter {
         text-transform: uppercase;
     }
@@ -1838,12 +1839,30 @@
     flex-grow: 1;
 }
 
-/** Primevue 's component is missing the gap between input and dropdown */
-.p-autocomplete-overlay {
-    margin-top: var(--p-anchor-gutter);
+.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;
+}
+
+/* This fix is to ensure overlay badge is contained within the size of the component it wraps */
+.p-overlaybadge {
+    display: inline-block;
+}
+
 
 
 /* === ./components/custom/styles.css === */
@@ -1855,6 +1874,10 @@
   
     @apply bg-ctx text-ctx;
   }
+
+  .bcc-badge.capital {
+    @apply inline-flex;
+  }
   .bcc-badge.sm {
     @apply w-4 h-4 text-heading-xs;
   }
@@ -1865,7 +1888,7 @@
     @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 {
@@ -1902,7 +1925,7 @@
   }
 
   .bcc-badge.squared  {
-    @apply rounded;
+    @apply rounded-sm;
   }
 }
 
@@ -2004,8 +2027,8 @@
     .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;
@@ -2076,43 +2099,53 @@
     @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.xl .bcc-nps-result-labels {
+    @apply text-2xl;
   }
-  .bcc-nps-result-labels.sm .bcc-nps-result-labels--label {
-    @apply text-body-sm;
+  .bcc-nps-result.full .bcc-nps-result-labels {
+    @apply text-lg;
   }
 }
 
@@ -2355,11 +2388,14 @@
         @apply text-5xl;
     }
 
+    .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%);
     }
 }
 

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/wrapped/BccAvatar/BccAvatar.vue.d.ts

@@ -11,7 +11,7 @@ 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). */
+    /** Controls the avatar dimensions; maps to CSS size classes (xs through xxl). Default: md */
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 };
 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>;

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/index.d.ts

@@ -5,6 +5,7 @@
 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 BccInput } from './BccInput.vue';
 export { default as BccMessage } from './BccMessage.vue';
 export { default as BccTabs } from './BccTabs/BccTabs.vue';
@@ -13,6 +14,7 @@ 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 { MessageProps } from './BccMessage.vue';
 export type { TabItem, TabsProps } from './BccTabs/BccTabs.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';
@@ -116,6 +116,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 +138,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bcc-code/component-library-vue",
-  "version": "0.7.3",
+  "version": "0.7.6",
   "type": "module",
   "description": "Extended Vue component library based on PrimeVue and BCC design tokens",
   "repository": "https://github.com/bcc-code/bcc-design.git",
@@ -53,7 +53,7 @@
     "create-version": "node ./scripts/version.cjs"
   },
   "dependencies": {
-    "@bcc-code/design-tokens": "^5.1.2",
+    "@bcc-code/design-tokens": "^5.1.34",
     "@bcc-code/icons-vue": "^1.4.0",
     "@primeuix/themes": "^2.0.3",
     "@tailwindcss/vite": "^4.1.18",
@@ -67,6 +67,8 @@
     "@eslint/js": "^9.39.2",
     "@primevue/auto-import-resolver": "^4.5.4",
     "@storybook/addon-docs": "^10.2.8",
+    "@storybook/manager-api": "^8.6.14",
+    "@storybook/theming": "^8.6.14",
     "@storybook/vue3": "^10.0.0",
     "@storybook/vue3-vite": "^10.0.0",
     "@types/node": "^22.0.0",