@bcc-code/component-library-vue 0.0.0-dev.3657f7e → 0.0.0-dev.38989a9

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 */
@@ -769,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);
 }
@@ -975,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);
 }
@@ -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
@@ -1937,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;
 	}
 }
 
@@ -1972,10 +1995,6 @@
 
 		@apply bg-ctx text-ctx;
 	}
-
-	.bcc-badge.capital {
-		@apply inline-flex;
-	}
 	.bcc-badge.gradient {
 		@apply ctx-gradient;
 	}
@@ -2121,40 +2140,43 @@
 
 /* from ./BccFrame/BccFrame.css */
 @layer components {
-    .bcc-frame {
-        @apply ctx ctx-default w-full;
-    }
+	.bcc-frame {
+		@apply ctx ctx-default w-full border border-transparent;
+	}
 
-    .bcc-frame.bcc-frame--shadow {
-        @apply shadow shadow-ctx;
-    }
+	.bcc-frame.bcc-frame--shadow {
+		@apply shadow-ctx shadow;
+	}
 
-    .bcc-frame--raised {
-        --ctx-background: var(--color-elevation-surface-raised-default);
-    }
-    .bcc-frame--rounded {
-        @apply rounded-md;
-    }
-    .bcc-frame--raised.bcc-frame--shadow {
-        @apply shadow-raised;
-    }
+	.bcc-frame--raised {
+		--ctx-background: var(--color-elevation-surface-raised-default);
+	}
+	.bcc-frame--rounded {
+		@apply rounded-md;
+	}
+	.bcc-frame--raised.bcc-frame--shadow {
+		@apply shadow-raised dark:border-default;
+	}
 
-    .bcc-frame--overlay {
-        --ctx-background: var(--color-elevation-surface-overlay-default);
-    }
-    .bcc-frame--overlay.bcc-frame--shadow {
-        @apply shadow-overlay;
-    }
+	.bcc-frame--overlay {
+		--ctx-background: var(--color-elevation-surface-overlay-default);
+		@apply border;
+	}
+	.bcc-frame--overlay.bcc-frame--shadow {
+		@apply shadow-overlay dark:border-default;
+	}
 
-    .bcc-frame--sunken {
-        --ctx-background: var(--color-elevation-surface-sunken-default);
-    }
-    .bcc-frame--sunken.bcc-frame--shadow {
-        @apply shadow-inner;
-    }
+	.bcc-frame--sunken {
+		--ctx-background: var(--color-elevation-surface-sunken-default);
+		@apply border;
+	}
+	.bcc-frame--sunken.bcc-frame--shadow {
+		@apply dark:border-default shadow-inner;
+	}
 }
 
 
+
 /* from ./BccGraphic/BccGraphic.css */
 @layer components {
   .bcc-graphic .corner,
@@ -2318,117 +2340,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/BccGraphic/BccGraphic.vue.d.ts

@@ -9,6 +9,8 @@ export type GraphicProps = {
     ratio?: AspectRatioStyle;
     /** When true, renders the banner image in grayscale. */
     grayscale?: boolean;
+    /** When true, renders the banner image with a brightness of 150%. */
+    highlight?: boolean;
 };
 export declare const ratioClasses: {
     ultraWide: string;