@bcc-code/component-library-vue 0.0.0-dev.3d17dd8 → 0.0.0-dev.4029b40

package/dist/theme.css

@@ -774,18 +774,18 @@
 }
 
 @utility ctx-brand-bolder {
-  --ctx-text: var(--color-default-bcc-100);
+  --ctx-text: var(--color-default-neutral-0);
   --ctx-text-bold: var(--color-default-neutral-0);
-  --ctx-background: var(--color-default-bcc-700);
-  --ctx-gradient: var(--color-default-bcc-800);
+  --ctx-background: var(--color-default-bcc-800);
+  --ctx-gradient: var(--color-default-bcc-900);
   --ctx-border: var(--color-default-bcc-700);
   --ctx-shadow: var(--color-neutral-alpha-500A);
-  --ctx-text-hover: var(--color-default-bcc-100);
-  --ctx-text-pressed: var(--color-default-bcc-100);
-  --ctx-background-hover: var(--color-default-bcc-800);
-  --ctx-background-pressed: var(--color-default-bcc-900);
-  --ctx-gradient-hover: var(--color-default-bcc-900);
-  --ctx-gradient-pressed: var(--color-default-bcc-900);
+  --ctx-text-hover: var(--color-default-neutral-0);
+  --ctx-text-pressed: var(--color-default-neutral-0);
+  --ctx-background-hover: var(--color-default-bcc-900);
+  --ctx-background-pressed: var(--color-default-bcc-1000);
+  --ctx-gradient-hover: var(--color-default-bcc-1000);
+  --ctx-gradient-pressed: var(--color-default-bcc-1000);
   --ctx-border-hover: var(--color-default-bcc-700);
   --ctx-border-pressed: var(--color-default-bcc-700);
 }
@@ -980,16 +980,16 @@
 @utility ctx-gray-bolder {
   --ctx-text: var(--color-default-neutral-200);
   --ctx-text-bold: var(--color-default-neutral-100);
-  --ctx-background: var(--color-default-neutral-800);
-  --ctx-gradient: var(--color-default-neutral-700);
+  --ctx-background: var(--color-default-neutral-700);
+  --ctx-gradient: var(--color-default-neutral-800);
   --ctx-border: var(--color-default-neutral-700);
   --ctx-shadow: var(--color-neutral-alpha-500A);
   --ctx-text-hover: var(--color-default-neutral-200);
   --ctx-text-pressed: var(--color-default-neutral-200);
-  --ctx-background-hover: var(--color-default-neutral-700);
-  --ctx-background-pressed: var(--color-default-neutral-600);
-  --ctx-gradient-hover: var(--color-default-neutral-600);
-  --ctx-gradient-pressed: var(--color-default-neutral-600);
+  --ctx-background-hover: var(--color-default-neutral-800);
+  --ctx-background-pressed: var(--color-default-neutral-900);
+  --ctx-gradient-hover: var(--color-default-neutral-900);
+  --ctx-gradient-pressed: var(--color-default-neutral-900);
   --ctx-border-hover: var(--color-default-neutral-700);
   --ctx-border-pressed: var(--color-default-neutral-700);
 }
@@ -1810,16 +1810,18 @@
 	cursor: pointer;
 }
 
-.clickable:hover {
-	--ctx-background: var(--ctx-background-hover);
-	--ctx-text: var(--ctx-text-hover);
-	--ctx-border: var(--ctx-border-hover);
-}
+@media (hover: hover) and (pointer: fine) {
+	.clickable:hover {
+		--ctx-background: var(--ctx-background-hover);
+		--ctx-text: var(--ctx-text-hover);
+		--ctx-border: var(--ctx-border-hover);
+	}
 
-.clickable:active {
-	--ctx-background: var(--ctx-background-pressed);
-	--ctx-text: var(--ctx-text-pressed);
-	--ctx-border: var(--ctx-border-pressed);
+	.clickable:active {
+		--ctx-background: var(--ctx-background-pressed);
+		--ctx-text: var(--ctx-text-pressed);
+		--ctx-border: var(--ctx-border-pressed);
+	}
 }
 
 
@@ -1843,6 +1845,10 @@
 /* === ./styles/component-overrides.css === */
 /** Custom styles to fix primevue components that are not custom or wrapped. */
 
+:root {
+	--p-toast-width: min(85vw, 400px);
+}
+
 /**
 * GUTTER FIX
 * Primevue's dropwdown components are all missing the gap between input and dropdown
@@ -1956,29 +1962,27 @@
 	}
 
 	.bcc-app-nav-item {
-		@apply ctx-gray-subtlest text-ctx relative flex h-12 flex-1 flex-col items-center justify-center gap-1 transition-colors focus:ring-0 focus:outline-none;
+		@apply relative flex h-12 flex-1 flex-col items-center justify-center gap-1 transition-colors focus:ring-0 focus:outline-none;
 	}
 
 	.bcc-nav-item-icon {
-		@apply size-6 opacity-50;
+		@apply size-6 icon-subtlest;
 	}
 
 	.bcc-nav-item-badge {
-		@apply absolute top-0 right-1 opacity-75;
+		@apply absolute top-0 right-1;
 	}
 
 	.bcc-nav-item-title {
-		@apply text-heading-xs text-center opacity-50;
+		@apply text-heading-xs text-center text-subtlest opacity-75;
 	}
 
-	.bcc-app-nav-item--active {
-		@apply text-selected;
+	.bcc-app-nav-item--active .bcc-nav-item-title {
+		@apply text-selected opacity-100;
 	}
 
-	.bcc-app-nav-item--active .bcc-nav-item-icon,
-	.bcc-app-nav-item--active .bcc-nav-item-badge,
-	.bcc-app-nav-item--active .bcc-nav-item-title {
-		@apply opacity-100;
+	.bcc-app-nav-item--active .bcc-nav-item-icon {
+		@apply text-selected;
 	}
 }
 
@@ -2333,117 +2337,120 @@
 
 /* from ./BccReact/BccReact.css */
 @layer components {
-  .bcc-react {
-    @apply relative flex w-full items-center overflow-visible;
-  }
-  .bcc-react-toggle {
-    @apply mr-1 flex shrink-0 cursor-pointer items-center justify-center rounded-full p-1 leading-tight transition;
-  }
-  .bcc-react-list {
-    @apply hide-scrollbar flex flex-1 items-center gap-1 overflow-x-auto overflow-y-hidden rounded-full p-1;
-  }
-  .bcc-react-empty {
-    @apply heading-xs flex items-center;
-  }
+	.bcc-react {
+		@apply relative flex w-full items-center overflow-visible;
+	}
+	.bcc-react-toggle {
+		@apply mr-1 flex shrink-0 cursor-pointer items-center justify-center rounded-full p-1 transition;
+	}
+	.bcc-react-list {
+		@apply hide-scrollbar flex flex-1 items-center gap-1 overflow-x-auto overflow-y-hidden rounded-full p-1;
+	}
+	.bcc-react-empty {
+		@apply heading-xs flex items-center;
+	}
 
-  .bcc-react-selector-container {
-    @apply absolute z-50 h-9;
-    @apply top-11 origin-top-left;
-  }
+	.bcc-react-selector-container {
+		@apply absolute z-50 h-9;
+		@apply top-11 origin-top-left;
+	}
 
-  .bcc-react-selector-container--top {
-    @apply -top-10 origin-bottom-left;
-  }
+	.bcc-react-selector-container--top {
+		@apply -top-10 origin-bottom-left;
+	}
 
-  .bcc-react-selector {
-    @apply flex h-9 flex-col overflow-hidden bg-neutral-100 px-0 shadow-md;
-    border-radius: 18px;
-  }
+	.bcc-react-selector {
+		@apply flex h-9 flex-col overflow-hidden bg-neutral-100 px-0 shadow-md;
+		border-radius: 18px;
+	}
 
-  .bcc-react-selector-emojis-container {
-    @apply flex items-center bg-neutral-100 px-1;
-  }
+	.bcc-react-selector-emojis-container {
+		@apply flex items-center bg-neutral-100 px-1;
+	}
 
-  .bcc-react-selector-more {
-    @apply flex w-9 items-center justify-center;
-  }
-  .bcc-react-selector-more-btn {
-    @apply flex h-7 w-7 items-center justify-center rounded-full bg-slate-200;
-  }
+	.bcc-react-selector-more {
+		@apply flex w-9 items-center justify-center;
+	}
+	.bcc-react-selector-more-btn {
+		@apply flex h-7 w-7 items-center justify-center rounded-full bg-slate-200;
+	}
 
-  .bcc-react-dropdown-container {
-    @apply left-0 top-0 -z-10 w-full max-w-full;
-    width: 296px;
-  }
-  .bcc-react-dropdown-container--top {
-    @apply bottom-0 top-auto pb-0;
-  }
+	.bcc-react-dropdown-container {
+		@apply top-0 left-0 -z-10 w-full max-w-full;
+		width: 296px;
+	}
+	.bcc-react-dropdown-container--top {
+		@apply top-auto bottom-0 pb-0;
+	}
 
-  .bcc-react-dropdown {
-    @apply -z-10 flex w-full flex-wrap overflow-hidden px-1;
-  }
+	.bcc-react-dropdown {
+		@apply -z-10 flex w-full flex-wrap overflow-hidden px-1;
+	}
 
-  .bcc-react-arrow-down-icon {
-    @apply h-6 w-6 text-slate-600;
-    transition: transform 0.3s ease;
-  }
-  .bcc-react-arrow-down-icon.open {
-    transform: rotate(-180deg);
-  }
+	.bcc-react-arrow-down-icon {
+		@apply h-6 w-6 text-slate-600;
+		transition: transform 0.3s ease;
+	}
+	.bcc-react-arrow-down-icon.open {
+		transform: rotate(-180deg);
+	}
 
-  .bcc-react-selector-item {
-    @apply p-2 text-xl leading-none transition-transform duration-200 ease-out h-9 w-9 relative;
-  }
+	.bcc-react-selector-item {
+		@apply relative h-9 w-9 p-2 text-xl leading-none transition-transform duration-200 ease-out;
+	}
 
-  .bcc-react-selector-item--clicked {
-    animation: scaleFadeOut 300ms forwards;
-  }
+	.bcc-react-selector-item--clicked {
+		animation: scaleFadeOut 300ms forwards;
+	}
 
-  @keyframes scaleFadeOut {
-    0% {
-      transform: scale(1);
-      opacity: 1;
-    }
-    100% {
-      transform: scale(1.4);
-      opacity: 0;
-    }
-  }
+	@keyframes scaleFadeOut {
+		0% {
+			transform: scale(1);
+			opacity: 1;
+		}
+		100% {
+			transform: scale(1.4);
+			opacity: 0;
+		}
+	}
 
-  .bcc-react-emoji-list-item {
-    @apply flex ctx clickable items-center justify-center rounded-full p-1 text-2xl leading-none drop-shadow transition-all hover:scale-105;
-    /* Default --not-selected */
-    @apply ctx-neutral-subtlest;
-  }
-  .bcc-react-emoji-list-item.selected {
-    @apply ctx-neutral-subtle;
-  }
+	.bcc-react-emoji-list-item {
+		@apply ctx clickable center h-7 min-w-7 shrink-0 rounded-full p-1 text-lg leading-none drop-shadow transition-all hover:scale-105;
+		/* Default --not-selected */
+		@apply ctx-neutral-subtlest;
+	}
+	.bcc-react-emoji-list-item span {
+		@apply leading-none;
+	}
+	.bcc-react-emoji-list-item.selected {
+		@apply ctx-neutral-subtle;
+	}
 }
 
 
 
 /* from ./BccTag/BccTag.css */
-
 @layer components {
 	.bcc-tag.bcc-badge {
 		@apply w-auto;
 	}
 	.bcc-tag.bcc-badge.md {
-		@apply font-regular h-6;
+		@apply text-body-md h-6;
 	}
 	.bcc-tag.bcc-badge.sm {
-		@apply font-regular h-5;
+		@apply text-body-sm h-5;
 	}
 	.bcc-tag.bcc-badge.lg {
-		@apply font-regular h-8;
+		@apply text-body-md h-8;
 	}
 	.bcc-tag.bcc-badge.xl {
-		@apply font-regular h-10;
+		@apply text-body-lg h-10;
 	}
 }
 
 
 
+
 /* === ./components/wrapped/styles.css === */
 
 /* from ./BccAvatar/BccAvatar.css */

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

@@ -1,3 +1,11 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Props = {
+    icon?: string;
+    size?: 'sm' | 'md' | 'base' | 'lg' | 'xl' | '2xl' | '3xl';
+    left?: boolean;
+    right?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: "sm" | "md" | "base" | "lg" | "xl" | "2xl" | "3xl";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -1,4 +1,4 @@
-import type { ReactProps } from './types';
+import type { ReactInfo, ReactProps } from './types';
 declare const __VLS_export: import("vue").DefineComponent<ReactProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     toggle: (id: string) => any;
 }, string, import("vue").PublicProps, Readonly<ReactProps> & Readonly<{
@@ -6,6 +6,7 @@ declare const __VLS_export: import("vue").DefineComponent<ReactProps, {}, {}, {}
 }>, {
     placeholder: string;
     top: boolean;
+    emojis: ReactInfo[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -11,13 +11,13 @@ export type StepIndicatorProps = {
 };
 type __VLS_Props = StepIndicatorProps;
 type __VLS_ModelProps = {
-    modelValue?: number;
+    modelValue?: number | null;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: number) => any;
+    "update:modelValue": (value: number | null) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: number) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: number | null) => any) | undefined;
 }>, {
     context: BCC_CONTEXT;
     hideText: boolean;

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

@@ -11,6 +11,7 @@ export type TagProps = Omit<BadgeProps, 'value' | 'squared'> & {
     clickable?: boolean;
     /** Label text for the tag when not using the default slot. */
     text?: string;
+    truncate?: boolean;
 };
 declare var __VLS_13: {};
 type __VLS_Slots = {} & {

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

@@ -22,13 +22,23 @@ declare var __VLS_1: {
         title: string;
         subtitle: string;
     };
-}, __VLS_13: {}, __VLS_20: {};
+}, __VLS_8: {}, __VLS_15: {
+    title: string;
+}, __VLS_17: {
+    subtitle: string;
+}, __VLS_19: {}, __VLS_26: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 } & {
-    right?: (props: typeof __VLS_13) => any;
+    left?: (props: typeof __VLS_8) => any;
 } & {
-    bottom?: (props: typeof __VLS_20) => any;
+    title?: (props: typeof __VLS_15) => any;
+} & {
+    subtitle?: (props: typeof __VLS_17) => any;
+} & {
+    right?: (props: typeof __VLS_19) => any;
+} & {
+    bottom?: (props: typeof __VLS_26) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     back: () => any;

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

@@ -9,6 +9,20 @@ export type BccMenuItem = Omit<MenuItem, 'icon' | 'items'> & {
 export type MenuProps = {
     model?: BccMenuItem[];
 } & Omit<PrimeMenuProps, 'model'>;
-declare const __VLS_export: import("vue").DefineComponent<MenuProps, PrimeMenuMethods, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MenuProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare var __VLS_16: {
+    item: MenuItem;
+    label: string | ((...args: any) => string) | undefined;
+    props: import("primevue").MenuRouterBindProps;
+};
+type __VLS_Slots = {} & {
+    item?: (props: typeof __VLS_16) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<MenuProps, PrimeMenuMethods, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MenuProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -2,6 +2,7 @@ import { type RadioButtonProps as PrimeRadioButtonProps } from 'primevue/radiobu
 export type RadioButtonProps = PrimeRadioButtonProps & {
     label?: string;
     labelLeft?: boolean;
+    justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
 };
 declare var __VLS_6: {};
 type __VLS_Slots = {} & {

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

@@ -1,12 +1,15 @@
+import type { VueComponent } from '@/types';
 import { type SelectButtonProps as PrimeSelectButtonProps } from 'primevue/selectbutton';
-export type SelectButtonProps = PrimeSelectButtonProps;
+export type SelectButtonProps = PrimeSelectButtonProps & {
+    optionIcon?: string | ((option: unknown) => VueComponent | null);
+};
 declare var __VLS_9: {
     option: any;
 };
 type __VLS_Slots = {} & {
     option?: (props: typeof __VLS_9) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<PrimeSelectButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PrimeSelectButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<SelectButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SelectButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bcc-code/component-library-vue",
-	"version": "0.0.0-dev.3d17dd8",
+	"version": "0.0.0-dev.4029b40",
 	"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.56",
+		"@bcc-code/design-tokens": "^5.1.72",
 		"@bcc-code/icons-vue": "^1.4.0",
 		"@primeuix/themes": "^2.0.3",
 		"@tailwindcss/vite": "^4.1.18",