@bcc-code/component-library-vue 0.0.0-dev.04e49df → 0.0.0-dev.06d31a8

package/dist/theme.css

@@ -1832,6 +1832,7 @@
 .p-menu-overlay,
 .p-multiselect-overlay,
 .p-select-overlay,
+.p-datepicker-panel,
 .p-treeselect-overlay {
 	margin: var(--p-anchor-gutter) 0;
 }
@@ -1901,14 +1902,26 @@
 	z-index: 2;
 }
 
-.p-dialog-close-button .p-icon {
-	height: var(--icon-size-sm);
-	width: var(--icon-size-sm);
+.p-dialog-close-button {
+	--p-icon-size: var(--icon-size-sm);
 }
 .p-dialog .p-button-icon:empty {
 	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,57 +1930,36 @@
 /* from ./BccAppNavigation/BccAppNavigation.css */
 @layer components {
 	.bcc-app-nav {
-		@apply pb-inset-bottom-2 absolute inset-x-0 bottom-0 z-20 flex w-full items-center justify-center overflow-visible;
+		@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-container {
+		@apply center pb-inset-bottom-1 mx-auto max-w-lg pt-1;
+	}
+
+	.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-app-nav .bcc-app-nav-container {
-		@apply dark:border-default mx-auto flex items-center justify-center border border-white p-0.5;
-
-		border-radius: 20px;
-		background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(243, 244, 246, 0.4) 100%);
-		backdrop-filter: blur(12px) saturate(160%);
-		-webkit-backdrop-filter: blur(12px) saturate(160%);
-
-		max-width: min(96%, var(--container-lg));
-		box-shadow:
-            /* inner bevel (top-left highlight, bottom-right shade) */
-			inset 0 0 32px white,
-			inset 1px 0 4px -1px rgba(0, 0, 0, 0.3),
-			inset 1px -2px 0 -1px white,
-			inset -1px 2px 0 -1px white,
-			0px -1px 1px -2px rgba(16, 24, 40, 0.05),
-			0px 4px 6px -2px rgba(16, 24, 40, 0.05),
-			0px 12px 16px -4px rgba(16, 24, 40, 0.1);
+
+	.bcc-nav-item-icon {
+		@apply size-6 opacity-50;
 	}
-	.dark .bcc-app-nav {
-		@apply backdrop-blur-sm;
-		background: transparent;
-		box-shadow: none;
+
+	.bcc-nav-item-badge {
+		@apply absolute top-0 right-1 opacity-75;
 	}
 
-	.bcc-app-nav .bcc-app-nav-item {
-		@apply col text-text-subtlest relative h-12 min-w-16 cursor-pointer rounded-xl border border-transparent px-2 opacity-90 transition-all select-none focus:outline-none;
+	.bcc-nav-item-title {
+		@apply text-heading-xs text-center opacity-50;
 	}
 
-	.bcc-app-nav .bcc-app-nav-item--active {
-		@apply text-brand-default bg-dark-neutral-alpha-500-a border-white opacity-100;
-		box-shadow:
-            /* inner bevel (top-left highlight, bottom-right shade) */
-			inset 1px 0 4px -1px rgba(0, 100, 50, 0.3),
-			inset 1px 2px 0 -1px white,
-			inset -1px -2px 0 -1px white,
-			inset 0 0 1px 0 rgba(0, 100, 50, 0.1),
-			inset 0 -3px 2px 0 rgba(0, 100, 50, 0.1);
+	.bcc-app-nav-item--active {
+		@apply text-selected;
 	}
 
-	.dark .bcc-app-nav .bcc-app-nav-item--active {
-		@apply bg-neutral-alpha-500-a text-brand-bold border-transparent;
-		box-shadow:
-            /* inner bevel (top-left highlight, bottom-right shade) */
-			inset 1px 0 4px -1px var(--blue-500),
-			inset 1px 2px 0 -1px var(--blue-900),
-			inset -1px -2px 0 -1px var(--blue-900),
-			inset 0 0 1px 0 var(--blue-300),
-			inset 0 -3px 2px 0 var(--blue-300);
+	.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;
 	}
 }
 
@@ -1975,67 +1967,70 @@
 
 /* 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 .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.capital {
+		@apply inline-flex;
+	}
+	.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-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-icon {
+		@apply size-4;
+	}
+	.bcc-badge.lg .bcc-badge-icon {
+		@apply size-5;
+	}
+	.bcc-badge.xl .bcc-badge-icon {
+		@apply size-6;
+	}
 
-  .bcc-badge.border {
-    @apply border-1;
-    border-color: var(--ctx-background-pressed);
-  }
+	.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.bordered {
-    @apply border-2;
-    border-color: var(--ctx-background-pressed);
-  }
+	.bcc-badge.border {
+		@apply border-1;
+		border-color: var(--ctx-background-pressed);
+	}
 
-  .bcc-badge.squared  {
-    @apply rounded-sm;
-  }
+	.bcc-badge.bordered {
+		@apply border-2;
+		border-color: var(--ctx-background-pressed);
+	}
+
+	.bcc-badge.squared {
+		@apply rounded-sm;
+	}
 }
 
 
@@ -2084,6 +2079,7 @@
 
     .bcc-capacity-indicator.is-warning {
         @apply ctx-yellow-subtlest;
+        --bcc-capacity-indicator-circle: var(--ctx-background);
     }
 
     .bcc-capacity-indicator.is-full {
@@ -2523,6 +2519,9 @@
         height: 100%;
         overflow: auto;
     }
+    .bcc-tabs-fluid.p-tabs {
+        width: 100%;
+    }
 }
 
 
@@ -2551,6 +2550,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/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/BccTabs/BccTabs.vue.d.ts

@@ -13,6 +13,8 @@ export type TabsProps = Omit<PrimeTabsProps, 'value'> & {
     fill?: boolean;
     modelValue?: number;
     noPanels?: boolean;
+    fluid?: boolean;
+    bold?: boolean;
 };
 type __VLS_Props = TabsProps;
 type __VLS_ModelProps = {

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

@@ -11,6 +11,7 @@ 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 BccTabs } from './BccTabs/BccTabs.vue';
 export { default as BccToggle } from './BccToggle/BccToggle.vue';
 export { default as BccToggleButton } from './BccToggleButton.vue';
@@ -22,6 +23,7 @@ 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 { 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';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bcc-code/component-library-vue",
-	"version": "0.0.0-dev.04e49df",
+	"version": "0.0.0-dev.06d31a8",
 	"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.42",
+		"@bcc-code/design-tokens": "^5.1.50",
 		"@bcc-code/icons-vue": "^1.4.0",
 		"@primeuix/themes": "^2.0.3",
 		"@tailwindcss/vite": "^4.1.18",