@bcc-code/component-library-vue 0.0.0-dev.fd035f5 → 0.0.0-dev.ff65d3f

package/dist/theme.css

@@ -590,78 +590,83 @@
 
 /* === ./styles/utilities.css === */
 @utility center {
-    @apply flex items-center justify-center;
-    
-    &.top {
-        @apply items-start;
-    }
+	@apply flex items-center justify-center;
 
-    &.bottom {
-        @apply items-end;
-    }
+	&.top {
+		@apply items-start;
+	}
 
-    &.left {
-        @apply justify-start;
-    }
+	&.bottom {
+		@apply items-end;
+	}
 
-    &.right {
-        @apply justify-end;
-    }
+	&.left {
+		@apply justify-start;
+	}
 
-    &.stretch {
-        @apply items-stretch;
-    }
+	&.right {
+		@apply justify-end;
+	}
+
+	&.stretch {
+		@apply items-stretch;
+	}
 }
 
 @utility col {
-    @apply flex flex-col items-center justify-center;
+	@apply flex flex-col items-center justify-center;
 
-    &.left {
-        @apply items-start;
-    }
+	&.left {
+		@apply items-start;
+	}
 
-    &.right {
-        @apply items-end;
-    }
+	&.right {
+		@apply items-end;
+	}
 
-    &.top {
-        @apply justify-start;
-    }
+	&.top {
+		@apply justify-start;
+	}
 
-    &.bottom {
-        @apply justify-end;
-    }
+	&.bottom {
+		@apply justify-end;
+	}
 }
 
 @utility between {
-    @apply justify-between;
+	@apply justify-between;
 }
 
 @utility hide-scrollbar {
-    -ms-overflow-style: none; /* for Internet Explorer, Edge */
-    scrollbar-width: none; /* for Firefox */
-    overflow-y: scroll;
+	-ms-overflow-style: none; /* for Internet Explorer, Edge */
+	scrollbar-width: none; /* for Firefox */
+	overflow-y: scroll;
 
-    &::-webkit-scrollbar {
-        display: none; /* for Chrome, Safari, and Opera */
-    }
+	&::-webkit-scrollbar {
+		display: none; /* for Chrome, Safari, and Opera */
+	}
 }
 
 /* Capitalize first letter */
 @utility capital {
-    @apply inline-block;
+	@apply inline-block;
 
-    &::first-letter {
-        text-transform: uppercase;
-    }
+	&::first-letter {
+		text-transform: uppercase;
+	}
+
+	&.bcc-badge {
+		@apply inline-flex;
+	}
 }
 
 /* Inset 0 */
 @utility inset-0 {
-	@apply left-0 right-0 top-0 bottom-0;
+	@apply top-0 right-0 bottom-0 left-0;
 }
 
 
+
 /* === ./styles/contexts.css === */
 /* Auto-generated from src/figma-modes. Do not edit by hand. */
 /* Run: pnpm run generate:context-css */
@@ -1723,88 +1728,104 @@
 
 
 /* === ./styles/context.css === */
-
 @theme {
-  --color-brand-100: var(--color-bcc-100);
-  --color-brand-200: var(--color-bcc-200);
-  --color-brand-300: var(--color-bcc-300);
-  --color-brand-400: var(--color-bcc-400);
-  --color-brand-500: var(--color-bcc-500);
-  --color-brand-600: var(--color-bcc-600);
-  --color-brand-700: var(--color-bcc-700);
-  --color-brand-800: var(--color-bcc-800);
-  --color-brand-900: var(--color-bcc-900);
-  --color-brand-1000: var(--color-bcc-1000);
+	--color-brand-100: var(--color-bcc-100);
+	--color-brand-200: var(--color-bcc-200);
+	--color-brand-300: var(--color-bcc-300);
+	--color-brand-400: var(--color-bcc-400);
+	--color-brand-500: var(--color-bcc-500);
+	--color-brand-600: var(--color-bcc-600);
+	--color-brand-700: var(--color-bcc-700);
+	--color-brand-800: var(--color-bcc-800);
+	--color-brand-900: var(--color-bcc-900);
+	--color-brand-1000: var(--color-bcc-1000);
 }
 
 /** DEFAULT CONTEXTS */
 @utility ctx-default {
-  @apply ctx-neutral-subtlest;
+	@apply ctx-neutral-subtlest;
+}
+@utility ctx-success {
+	@apply ctx-success-subtlest;
+}
+@utility ctx-danger {
+	@apply ctx-danger-subtlest;
+}
+@utility ctx-warning {
+	@apply ctx-warning-subtlest;
+}
+@utility ctx-info {
+	@apply ctx-info-subtlest;
 }
-@utility ctx-success { @apply ctx-success-subtlest; }
-@utility ctx-danger { @apply ctx-danger-subtlest; }
-@utility ctx-warning { @apply ctx-warning-subtlest; }
-@utility ctx-info { @apply ctx-info-subtlest; }
 
 @utility text-ctx {
-  color: var(--ctx-text);
+	color: var(--ctx-text);
 }
 
 @utility text-ctx-bold {
-  color: var(--ctx-text-bold);
+	color: var(--ctx-text-bold);
 }
 
 @utility bg-ctx {
-  background-color: var(--ctx-background);
+	background-color: var(--ctx-background);
 }
 
 @utility border-ctx {
-  border-color: var(--ctx-border);
+	border-color: var(--ctx-border);
 }
 
 @utility shadow-ctx {
-  --tw-shadow-color: var(--ctx-shadow);
+	--tw-shadow-color: var(--ctx-shadow);
 }
 
 @utility ctx {
-  background-color: var(--ctx-background);
-  color: var(--ctx-text);
-  border-color: var(--ctx-border);
+	background-color: var(--ctx-background);
+	color: var(--ctx-text);
+	border-color: var(--ctx-border);
 }
 
 @utility ctx-gradient {
-  background: linear-gradient(225deg, var(--ctx-background) 0%, var(--ctx-gradient) 100%);
+	background: linear-gradient(225deg, var(--ctx-background) 0%, var(--ctx-gradient) 100%);
+
+	@variant dark {
+		background: linear-gradient(225deg, var(--ctx-gradient) 0%, var(--ctx-background) 100%);
+	}
 }
 
 @utility ctx-raised {
-  box-shadow: 0 1px 1px 0 var(--ctx-shadow), 0 0 1px 0 var(--ctx-shadow);
+	box-shadow:
+		0 1px 1px 0 var(--ctx-shadow),
+		0 0 1px 0 var(--ctx-shadow);
 }
 
 @utility ctx-flat {
-  --ctx-background: transparent;
+	--ctx-background: transparent;
 
-  @variant hover {
-    --ctx-background: var(--ctx-background-hover);
-  }
+	@variant hover {
+		--ctx-background: var(--ctx-background-hover);
+	}
 }
 
 @utility clickable {
-  cursor: pointer;
+	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);
+	}
 }
 
 
+
 /* === ./styles/fonts.css === */
 @utility heading-xs { font: var(--heading-xs); }
 @utility heading-sm { font: var(--heading-sm); }
@@ -1824,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
@@ -1909,6 +1934,19 @@
 	display: none;
 }
 
+.p-togglebutton {
+	font-size: var(--text-sm);
+	border: 0;
+}
+
+.p-togglebutton-sm {
+	font-size: var(--text-sm);
+}
+
+.p-togglebutton-lg {
+	font-size: var(--text-md);
+}
+
 
 
 
@@ -1917,19 +1955,36 @@
 /* from ./BccAppNavigation/BccAppNavigation.css */
 @layer components {
 	.bcc-app-nav {
-		@apply sticky inset-x-0 bottom-0 z-20 overflow-visible bg-elevation-surface-default shadow-md sm:rounded-t-xl;
+		@apply bg-elevation-surface-default dark:border-brand-800 sticky inset-x-0 bottom-0 z-20 overflow-visible shadow-md sm:rounded-t-xl dark:border-t;
 	}
-	.bcc-app-nav .bcc-app-nav-container {
+	.bcc-app-nav-container {
 		@apply center pb-inset-bottom-1 mx-auto max-w-lg pt-1;
 	}
 
-	.bcc-app-nav .bcc-app-nav-item {
-		@apply flex flex-col items-center justify-center relative h-12 flex-1 gap-1 ctx-gray-subtlest transition-colors focus:outline-none focus:ring-0 text-ctx;
-		@apply opacity-50;
+	.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;
+	}
+
+	.bcc-nav-item-icon {
+		@apply size-6 opacity-50;
+	}
+
+	.bcc-nav-item-badge {
+		@apply absolute top-0 right-1 opacity-75;
+	}
+
+	.bcc-nav-item-title {
+		@apply text-heading-xs text-center opacity-50;
+	}
+
+	.bcc-app-nav-item--active {
+		@apply text-selected;
 	}
 
-	.bcc-app-nav .bcc-app-nav-item--active {
-		@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;
 	}
 }
 
@@ -1937,67 +1992,66 @@
 
 /* from ./BccBadge/BccBadge.css */
 @layer components {
-  .bcc-badge {
-    @apply inline-flex shrink-0 gap-1 items-center justify-center rounded-full leading-none whitespace-nowrap;
-  
-    @apply bg-ctx text-ctx;
-  }
+	.bcc-badge {
+		@apply inline-flex shrink-0 items-center justify-center gap-1 rounded-full leading-none whitespace-nowrap;
 
-  .bcc-badge.capital {
-    @apply inline-flex;
-  }
-  .bcc-badge.gradient {
-    @apply ctx-gradient;
-  }
-  .bcc-badge.sm {
-    @apply w-4 h-4 text-heading-xs;
-  }
-  .bcc-badge.md {
-    @apply h-5 w-5 text-heading-sm;
-  }
-  .bcc-badge.lg {
-    @apply w-6 h-6 text-heading-md;
-  }
-  .bcc-badge.xl {
-    @apply w-8 h-8 text-heading-md;
-  }
+		@apply bg-ctx text-ctx;
+	}
+	.bcc-badge.gradient {
+		@apply ctx-gradient;
+	}
+	.bcc-badge.sm {
+		@apply text-heading-xs h-4 w-4;
+	}
+	.bcc-badge.md {
+		@apply text-heading-sm h-5 w-5;
+	}
+	.bcc-badge.lg {
+		@apply text-heading-md h-6 w-6;
+	}
+	.bcc-badge.xl {
+		@apply text-heading-md h-8 w-8;
+	}
 
-  .bcc-badge .bcc-badge-icon {
-    @apply size-4;
-  }
-  .bcc-badge.lg .bcc-badge-icon {
-    @apply size-5;
-  }
-  .bcc-badge.xl .bcc-badge-icon {
-    @apply size-6;
-  }
+	.bcc-badge .bcc-badge-icon {
+		@apply size-4;
+	}
+	.bcc-badge.lg .bcc-badge-icon {
+		@apply size-5;
+	}
+	.bcc-badge.xl .bcc-badge-icon {
+		@apply size-6;
+	}
 
-  .bcc-badge.bcc-badge-text {
-    @apply w-auto px-2;
-  }
-  .bcc-badge-text.lg, .bcc-badge-text.xl { 
-    @apply px-3;
-  }
-  .bcc-badge-text.border.lg, .bcc-badge-text.border.xl { 
-    @apply px-2;
-  }
-  .bcc-badge-text.bordered.lg, .bcc-badge-text.bordered.xl { 
-    @apply px-1;
-  }
+	.bcc-badge.bcc-badge-text {
+		@apply w-auto px-2;
+	}
+	.bcc-badge-text.lg,
+	.bcc-badge-text.xl {
+		@apply px-3;
+	}
+	.bcc-badge-text.border.lg,
+	.bcc-badge-text.border.xl {
+		@apply px-2;
+	}
+	.bcc-badge-text.bordered.lg,
+	.bcc-badge-text.bordered.xl {
+		@apply px-1;
+	}
 
-  .bcc-badge.border {
-    @apply border-1;
-    border-color: var(--ctx-background-pressed);
-  }
+	.bcc-badge.border {
+		@apply border-1;
+		border-color: var(--ctx-background-pressed);
+	}
 
-  .bcc-badge.bordered {
-    @apply border-2;
-    border-color: var(--ctx-background-pressed);
-  }
+	.bcc-badge.bordered {
+		@apply border-2;
+		border-color: var(--ctx-background-pressed);
+	}
 
-  .bcc-badge.squared  {
-    @apply rounded-sm;
-  }
+	.bcc-badge.squared {
+		@apply rounded-sm;
+	}
 }
 
 
@@ -2046,6 +2100,7 @@
 
     .bcc-capacity-indicator.is-warning {
         @apply ctx-yellow-subtlest;
+        --bcc-capacity-indicator-circle: var(--ctx-background);
     }
 
     .bcc-capacity-indicator.is-full {
@@ -2516,6 +2571,8 @@
 	@apply m-0 p-0 font-sans antialiased;
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
+	line-height: 1.2;
+	font-kerning: normal;
 }
 
 hr {

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

@@ -1,3 +1,4 @@
+import { BCC_CONTEXT } from '@/contexts';
 export type CapacityIndicatorProps = {
     /** Total capacity; use -1 for “unlimited” (shows an infinity-style icon instead of a bar). */
     total: number;
@@ -11,6 +12,8 @@ export type CapacityIndicatorProps = {
     squared?: boolean;
     /** When true, applies warning/full color states (e.g. color change at high usage). */
     colored?: boolean;
+    /** Design context (e.g. neutral, brand) used for background and text color. */
+    context?: BCC_CONTEXT;
 };
 declare const __VLS_export: import("vue").DefineComponent<CapacityIndicatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CapacityIndicatorProps> & Readonly<{}>, {
     size: "xs" | "sm" | "base" | "lg";

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

@@ -3,10 +3,12 @@ import { type MessageProps as PrimeMessageProps } from 'primevue/message';
 export type MessageProps = Omit<PrimeMessageProps, 'icon'> & {
     icon?: boolean | VueComponent;
     iconRight?: VueComponent | boolean;
+    title?: string;
+    message?: string;
 };
-declare var __VLS_14: {};
+declare var __VLS_19: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_14) => any;
+    default?: (props: typeof __VLS_19) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<MessageProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MessageProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -0,0 +1,18 @@
+import { type RadioButtonProps as PrimeRadioButtonProps } from 'primevue/radiobutton';
+export type RadioButtonProps = PrimeRadioButtonProps & {
+    label?: string;
+    labelLeft?: boolean;
+};
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<RadioButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<RadioButtonProps> & 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/BccSelectButton.vue.d.ts

@@ -0,0 +1,17 @@
+import { type SelectButtonProps as PrimeSelectButtonProps } from 'primevue/selectbutton';
+export type SelectButtonProps = PrimeSelectButtonProps;
+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_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/index.d.ts

@@ -11,6 +11,8 @@ export { default as BccImage } from './BccImage.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 BccRadioButton } from './BccRadioButton.vue';
+export { default as BccSelectButton } from './BccSelectButton.vue';
 export { default as BccTabs } from './BccTabs/BccTabs.vue';
 export { default as BccToggle } from './BccToggle/BccToggle.vue';
 export { default as BccToggleButton } from './BccToggleButton.vue';
@@ -22,6 +24,8 @@ export type { ImageProps } from './BccImage.vue';
 export type { InputProps } from './BccInput.vue';
 export type { BccMenuItem, MenuProps } from './BccMenu/BccMenu.vue';
 export type { MessageProps } from './BccMessage.vue';
+export type { RadioButtonProps } from './BccRadioButton.vue';
+export type { SelectButtonProps } from './BccSelectButton.vue';
 export type { TabItem, TabsProps } from './BccTabs/BccTabs.vue';
 export type { ToggleProps } from './BccToggle/BccToggle.vue';
 export type { ToggleButtonProps } from './BccToggleButton.vue';

package/dist-types/index.d.ts

@@ -94,7 +94,6 @@ export { default as BccPopover } from 'primevue/popover';
 export { default as BccPortal } from 'primevue/portal';
 export { default as BccProgressBar } from 'primevue/progressbar';
 export { default as BccProgressSpinner } from 'primevue/progressspinner';
-export { default as BccRadioButton } from 'primevue/radiobutton';
 export { default as BccRadioButtonGroup } from 'primevue/radiobuttongroup';
 export { default as BccRating } from 'primevue/rating';
 export { default as BccRipple } from 'primevue/ripple';
@@ -102,7 +101,6 @@ export { default as BccRow } from 'primevue/row';
 export { default as BccScrollPanel } from 'primevue/scrollpanel';
 export { default as BccScrollTop } from 'primevue/scrolltop';
 export { default as BccSelect } from 'primevue/select';
-export { default as BccSelectButton } from 'primevue/selectbutton';
 export { default as BccSkeleton } from 'primevue/skeleton';
 export { default as BccSlider } from 'primevue/slider';
 export { default as BccSpeedDial } from 'primevue/speeddial';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bcc-code/component-library-vue",
-	"version": "0.0.0-dev.fd035f5",
+	"version": "0.0.0-dev.ff65d3f",
 	"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.45",
+		"@bcc-code/design-tokens": "^5.1.56",
 		"@bcc-code/icons-vue": "^1.4.0",
 		"@primeuix/themes": "^2.0.3",
 		"@tailwindcss/vite": "^4.1.18",