@bcc-code/component-library-vue 0.8.6 → 0.8.8

package/dist/theme.css

@@ -1917,57 +1917,19 @@
 /* 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 sticky inset-x-0 bottom-0 z-20 overflow-visible bg-elevation-surface-default shadow-md sm:rounded-t-xl;
 	}
 	.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);
-	}
-	.dark .bcc-app-nav {
-		@apply backdrop-blur-sm;
-		background: transparent;
-		box-shadow: none;
+		@apply center pb-inset-bottom-1 mx-auto max-w-lg pt-1;
 	}
 
 	.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;
+		@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 .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);
-	}
-
-	.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);
+		@apply text-selected opacity-100;
 	}
 }
 
@@ -2084,6 +2046,7 @@
 
     .bcc-capacity-indicator.is-warning {
         @apply ctx-yellow-subtlest;
+        --bcc-capacity-indicator-circle: var(--ctx-background);
     }
 
     .bcc-capacity-indicator.is-full {

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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bcc-code/component-library-vue",
-	"version": "0.8.6",
+	"version": "0.8.8",
 	"type": "module",
 	"description": "Extended Vue component library based on PrimeVue and BCC design tokens",
 	"repository": "https://github.com/bcc-code/bcc-design.git",