@bcc-code/component-library-vue 1.3.0 → 1.3.1

package/dist/theme.css

@@ -2331,57 +2331,63 @@
 
 /* from ./BccCapacityIndicator/BccCapacityIndicator.css */
 @layer components {
-    .bcc-capacity-indicator {
-        @apply text-base;
-    }
+	.bcc-capacity-indicator {
+		@apply text-base;
+	}
 
-    .bcc-capacity-indicator.xs {
-        @apply text-xs;
-    }
+	.bcc-capacity-indicator.xs {
+		@apply text-xs;
+	}
 
-    .bcc-capacity-indicator.sm {
-        @apply text-sm;
-    }
+	.bcc-capacity-indicator.sm {
+		@apply text-sm;
+	}
 
-    .bcc-capacity-indicator.lg {
-        @apply text-xl;
-    }
+	.bcc-capacity-indicator.lg {
+		@apply text-xl;
+	}
 
-    .bcc-capacity-indicator {
-        --bcc-capacity-indicator-background: transparent;
-        --bcc-capacity-indicator-text: var(--ctx-text);
-        --bcc-capacity-indicator-circle: var(--ctx-background-pressed);
-        --bcc-capacity-indicator-circle-used: var(--ctx-border);
-        background: var(--bcc-capacity-indicator-background);
-        @apply ctx-gray-subtlest;
-    }
+	.bcc-capacity-indicator {
+		--bcc-capacity-indicator-background: transparent;
+		--bcc-capacity-indicator-text: var(--ctx-text);
+		--bcc-capacity-indicator-circle: var(--ctx-background);
+		--bcc-capacity-indicator-circle-used: var(--color-brand-500);
+		background: var(--bcc-capacity-indicator-background);
+		@apply ctx-gray-subtlest;
+	}
 
-    .bcc-capacity-indicator.colored {
-        --bcc-capacity-indicator-background: var(--ctx-background);
-        @apply ctx-blue-subtlest;
-    }
+	.bcc-capacity-indicator.colored {
+		--bcc-capacity-indicator-background: var(--ctx-background);
+		--bcc-capacity-indicator-circle: var(--ctx-background-hover);
+		--bcc-capacity-indicator-circle-used: var(--ctx-border);
+		@apply ctx-blue-subtlest;
+	}
 
-    .bcc-capacity-indicator .text {
-        color: var(--bcc-capacity-indicator-text);
-    }
-    .bcc-capacity-indicator .circle {
-        stroke: var(--bcc-capacity-indicator-circle);
-    }
-    .bcc-capacity-indicator .circle-used {
-        stroke: var(--bcc-capacity-indicator-circle-used);
-    }
+	.bcc-capacity-indicator .text {
+		color: var(--bcc-capacity-indicator-text);
+	}
+	.bcc-capacity-indicator .circle {
+		stroke: var(--bcc-capacity-indicator-circle);
+	}
+	.bcc-capacity-indicator .circle-used {
+		stroke: var(--bcc-capacity-indicator-circle-used);
+	}
 
-    .bcc-capacity-indicator.is-warning {
-        @apply ctx-yellow-subtlest;
-        --bcc-capacity-indicator-circle: var(--ctx-background);
-    }
+	.bcc-capacity-indicator.is-warning {
+		@apply ctx-yellow-subtlest;
+		--bcc-capacity-indicator-circle-used: var(--ctx-border);
+	}
 
-    .bcc-capacity-indicator.is-full {
-        @apply ctx-red-subtlest;
-    }
+	.bcc-capacity-indicator.is-full {
+		@apply ctx-red-subtlest;
+
+		--bcc-capacity-indicator-circle: var(--ctx-background);
+		--bcc-capacity-indicator-circle-used: var(--ctx-border);
+	}
 }
 
 
+
 /* from ./BccDialKnob/BccDialKnob.css */
 @layer components {
     .bcc-knob {
@@ -2555,60 +2561,60 @@
 
 /* from ./BccNpsScore/BccNpsScore.css */
 @layer components {
-  .bcc-nps-score {
-    @apply min-w-70 p-4 body-sm flex flex-col gap-y-2 select-none;
-  }
+	.bcc-nps-score {
+		@apply body-sm flex min-w-70 flex-col gap-y-2 p-4 select-none;
+	}
 
-  .bcc-nps-score--heading {
-    @apply flex items-center justify-between;
-  }
+	.bcc-nps-score--heading {
+		@apply flex items-center justify-between;
+	}
 
-  .bcc-nps-score--label {
-    @apply flex-1 truncate;
-  }
+	.bcc-nps-score--label {
+		@apply flex-1 truncate;
+	}
 
-  .bcc-nps-score--bar {
-    @apply flex justify-evenly rounded-xl text-white pointer-events-none;
-    @apply bg-linear-to-r from-red-600 via-yellow-400 via-75% to-green-400;
-  }
+	.bcc-nps-score--bar {
+		@apply pointer-events-none flex justify-evenly rounded-xl text-white;
+		@apply bg-linear-to-r from-red-600 via-yellow-400 via-75% to-green-400;
+	}
 
-  .bcc-nps-score--bar.reverse {
-    @apply bg-linear-to-l;
-  }
+	.bcc-nps-score--bar.reverse {
+		@apply bg-linear-to-l;
+	}
 
-  .bcc-nps-score--bar.disabled .bcc-nps-score--number.inactive {
-    @apply bg-ctx ctx-gray-subtlest text-disabled;
-  }
+	.bcc-nps-score--bar.disabled .bcc-nps-score--number.inactive {
+		@apply bg-ctx ctx-gray-subtlest text-disabled;
+	}
 
-  .bcc-nps-score--number {
-    @apply border-border-inverse;
-    @apply flex h-8 flex-1 items-center justify-center border-r-2 font-bold text-sm leading-none;
-    @apply pointer-events-auto cursor-pointer transition-all duration-200 hover:bg-transparent;
-  }
+	.bcc-nps-score--number {
+		@apply border-inverse;
+		@apply flex h-8 flex-1 items-center justify-center border-r-2 text-sm leading-none font-bold;
+		@apply pointer-events-auto cursor-pointer transition-all duration-200 hover:bg-transparent;
+	}
 
-  .bcc-nps-score--number:disabled {
-    @apply cursor-not-allowed;
-  }
+	.bcc-nps-score--number:disabled {
+		@apply cursor-not-allowed;
+	}
 
-  .bcc-nps-score--number.active {
-    @apply pointer-events-none;
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-  }
+	.bcc-nps-score--number.active {
+		@apply pointer-events-none;
+		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+	}
 
-  .bcc-nps-score--number:has(~ .bcc-nps-score--number.active) {
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-  }
+	.bcc-nps-score--number:has(~ .bcc-nps-score--number.active) {
+		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+	}
 
-  .bcc-nps-score--number.inactive {
-    @apply bg-ctx text-ctx ctx-gray-subtler;
-  }
+	.bcc-nps-score--number.inactive {
+		@apply bg-ctx text-ctx ctx-gray-subtler;
+	}
 
-  .bcc-nps-score--number:first-child {
-    @apply rounded-l-xl pl-0.5;
-  }
-  .bcc-nps-score--number:last-child{
-    @apply rounded-r-xl border-r-0 pr-0.5;
-  }
+	.bcc-nps-score--number:first-child {
+		@apply rounded-l-xl pl-0.5;
+	}
+	.bcc-nps-score--number:last-child {
+		@apply rounded-r-xl border-r-0 pr-0.5;
+	}
 }
 
 

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

@@ -24,6 +24,7 @@ export declare const roundingClasses: {
     sm: string;
     base: string;
     md: string;
+    lg: string;
     xl: string;
 };
 export type AspectRatioStyle = keyof typeof ratioClasses | string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bcc-code/component-library-vue",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "type": "module",
   "description": "Extended Vue component library based on PrimeVue and BCC design tokens",
   "repository": "https://github.com/bcc-code/bcc-design.git",
@@ -54,7 +54,7 @@
     "create-version": "node ./scripts/version.cjs"
   },
   "dependencies": {
-    "@bcc-code/design-tokens": "^5.2.1",
+    "@bcc-code/design-tokens": "^5.2.2",
     "@bcc-code/icons-vue": "^1.4.0",
     "@primeuix/themes": "^2.0.3",
     "@tailwindcss/vite": "^4.1.18",