@bcc-code/component-library-vue 0.6.6 → 0.6.8

package/dist/theme.css

@@ -648,7 +648,7 @@
 
 /* Capitalize first letter */
 @utility capital {
-    display: inline-block;
+    display: inline-flex;
     &::first-letter {
         text-transform: uppercase;
     }
@@ -1771,7 +1771,7 @@
 }
 
 @utility ctx-gradient {
-  background: linear-gradient(225deg, var(--ctx-gradient) 0%, var(--ctx-background) 100%);
+  background: linear-gradient(225deg, var(--ctx-background) 0%, var(--ctx-gradient) 100%);
 }
 
 @utility ctx-raised {
@@ -1820,86 +1820,26 @@
 
 
 /* === ./styles/component-overrides.css === */
+/** Our icons are a bit smaller that Primevue's default */
 .p-autocomplete .p-icon {
-    --p-icon-size: 20px;
-    --p-form-field-sm-font-size: 20px;
-    --p-form-field-lg-font-size: 24px;
+    --p-icon-size: var(--icon-size-sm);
+    --p-form-field-sm-font-size: var(--icon-size-sm);
+    --p-form-field-lg-font-size: var(--icon-size-md);
 }
 
+.p-autocomplete-clearable .p-inputtext {
+    flex-grow: 1;
+}
 
+/** Primevue 's component is missing the gap between input and dropdown */
+.p-autocomplete-overlay {
+    margin-top: var(--p-anchor-gutter);
+}
 
-/* === ./components/custom/styles.css === */
-
-/* from ./BccAvatar/BccAvatar.css */
-@layer components {
-    .bcc-avatar {
-        --p-avatar-background: var(--ctx-background);
-        --p-avatar-color: var(--ctx-text);
-        --bcc-avatar-border: var(--ctx-border);
-        @apply overflow-hidden shrink-0 ctx-gray-subtler;
-    }
-    .bcc-avatar.male,
-    .bcc-avatar.M {
-        @apply ctx-blue-subtler;
-    }
-    .bcc-avatar.female,
-    .bcc-avatar.F {
-        @apply ctx-purple-subtler;
-    }
-    .bcc-avatar.male.child,
-    .bcc-avatar.M.child {
-        @apply ctx-teal-subtler;
-    }
-    .bcc-avatar.female.child,
-    .bcc-avatar.F.child {
-        @apply ctx-magenta-subtler;
-    }
-    .bcc-avatar.bordered {
-        @apply border-2 border-ctx;
-    }
-    .bcc-avatar.xs {
-        @apply size-5 text-xs;
-    }
-    .bcc-avatar.sm {
-        @apply size-6 text-sm;
-    }
-    .bcc-avatar.md {
-        @apply size-8 text-base;
-    }
-    .bcc-avatar.lg {
-        @apply size-10 text-lg;
-    }
-    .bcc-avatar.xl {
-        @apply size-12 text-xl;
-    }
-    .bcc-avatar.xxl {
-        @apply size-20 text-3xl;
-    }
-    .bcc-avatar.xxxl {
-        @apply size-24 text-4xl;
-    }
-
-    .bcc-avatar.squared.lg {
-        @apply text-xl;
-    }
-    .bcc-avatar.squared.xl {
-        @apply text-2xl;
-    }
-    .bcc-avatar.squared.xxl {
-        @apply text-4xl;
-    }
-    .bcc-avatar.squared.xxxl {
-        @apply text-5xl;
-    }
 
 
-    .p-overlaybadge .bcc-avatar.p-avatar-circle.xxxl~.p-badge,
-    .p-overlaybadge .bcc-avatar.p-avatar-circle.xxl~.p-badge,
-    .p-overlaybadge .bcc-avatar.p-avatar-circle.xl~.p-badge {
-        transform: translate(25%, -25%);
-    }
-}
 
+/* === ./components/custom/styles.css === */
 
 /* from ./BccBadge/BccBadge.css */
 @layer components {
@@ -2322,27 +2262,6 @@
 
 
 
-/* from ./BccTabs/BccTabs.css */
-@layer components {
-    .bcc-tabs-fill.p-tabs {
-        height: 100%;
-        overflow: hidden;
-    }
-    .bcc-tabs-fill.p-tabs > .p-tablist {
-        flex-shrink: 0;
-    }
-    .bcc-tabs-fill.p-tabs > .p-tabpanels {
-        height: 100%;
-        overflow: hidden;
-        padding: 0;
-    }
-    .bcc-tabs-fill.p-tabs > .p-tabpanels > .p-tabpanel {
-        height: 100%;
-        overflow: auto;
-    }
-}
-
-
 /* from ./BccTag/BccTag.css */
 
 @layer components {
@@ -2364,6 +2283,101 @@
 }
 
 
+
+/* === ./components/wrapped/styles.css === */
+
+/* from ./BccAvatar/BccAvatar.css */
+@layer components {
+    .bcc-avatar {
+        --p-avatar-background: var(--ctx-background);
+        --p-avatar-color: var(--ctx-text);
+        --bcc-avatar-border: var(--ctx-border);
+        @apply overflow-hidden shrink-0 ctx-gray-subtler;
+    }
+    .bcc-avatar.male,
+    .bcc-avatar.M {
+        @apply ctx-blue-subtler;
+    }
+    .bcc-avatar.female,
+    .bcc-avatar.F {
+        @apply ctx-purple-subtler;
+    }
+    .bcc-avatar.male.child,
+    .bcc-avatar.M.child {
+        @apply ctx-teal-subtler;
+    }
+    .bcc-avatar.female.child,
+    .bcc-avatar.F.child {
+        @apply ctx-magenta-subtler;
+    }
+    .bcc-avatar.bordered {
+        @apply border-2 border-ctx;
+    }
+    .bcc-avatar.xs {
+        @apply size-5 text-xs;
+    }
+    .bcc-avatar.sm {
+        @apply size-6 text-sm;
+    }
+    .bcc-avatar.md {
+        @apply size-8 text-base;
+    }
+    .bcc-avatar.lg {
+        @apply size-10 text-lg;
+    }
+    .bcc-avatar.xl {
+        @apply size-12 text-xl;
+    }
+    .bcc-avatar.xxl {
+        @apply size-20 text-3xl;
+    }
+    .bcc-avatar.xxxl {
+        @apply size-24 text-4xl;
+    }
+
+    .bcc-avatar.squared.lg {
+        @apply text-xl;
+    }
+    .bcc-avatar.squared.xl {
+        @apply text-2xl;
+    }
+    .bcc-avatar.squared.xxl {
+        @apply text-4xl;
+    }
+    .bcc-avatar.squared.xxxl {
+        @apply text-5xl;
+    }
+
+
+    .p-overlaybadge .bcc-avatar.p-avatar-circle.xxxl~.p-badge,
+    .p-overlaybadge .bcc-avatar.p-avatar-circle.xxl~.p-badge,
+    .p-overlaybadge .bcc-avatar.p-avatar-circle.xl~.p-badge {
+        transform: translate(25%, -25%);
+    }
+}
+
+
+/* from ./BccTabs/BccTabs.css */
+@layer components {
+    .bcc-tabs-fill.p-tabs {
+        height: 100%;
+        overflow: hidden;
+    }
+    .bcc-tabs-fill.p-tabs > .p-tablist {
+        flex-shrink: 0;
+    }
+    .bcc-tabs-fill.p-tabs > .p-tabpanels {
+        height: 100%;
+        overflow: hidden;
+        padding: 0;
+    }
+    .bcc-tabs-fill.p-tabs > .p-tabpanels > .p-tabpanel {
+        height: 100%;
+        overflow: auto;
+    }
+}
+
+
 /* from ./BccToggle/BccToggle.css */
 @layer components {
     .p-toggleswitch.useCtx {

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

@@ -0,0 +1,16 @@
+type Props = {
+    currentStep: number;
+    steps: string[];
+    additionalText: boolean;
+    showStepLabel?: boolean;
+    headingFn?: (currentStep: number, totalSteps: number) => {};
+};
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    steps: string[];
+    currentStep: number;
+    additionalText: boolean;
+    showStepLabel: boolean;
+    headingFn: (currentStep: number, totalSteps: number) => {};
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -2,7 +2,6 @@
  * Custom BCC components (not based on PrimeVue).
  * Add new custom components here and export them from this file.
  */
-export { default as BccAvatar } from './BccAvatar/BccAvatar.vue';
 export { default as BccBadge } from './BccBadge/BccBadge.vue';
 export { default as BccCapacityIndicator } from './BccCapacityIndicator/BccCapacityIndicator.vue';
 export { default as BccCircleLoader } from './BccCircleLoader/BccCircleLoader.vue';
@@ -13,10 +12,7 @@ export { default as BccNpsResult } from './BccNpsResult/BccNpsResult.vue';
 export { default as BccNpsScore } from './BccNpsScore/BccNpsScore.vue';
 export { default as BccReact } from './BccReact/BccReact.vue';
 export { default as BccReactEmoji } from './BccReact/BccReactEmoji.vue';
-export { default as BccTabs } from './BccTabs/BccTabs.vue';
 export { default as BccTag } from './BccTag/BccTag.vue';
-export { default as BccToggle } from './BccToggle/BccToggle.vue';
-export type { AvatarProps } from './BccAvatar/BccAvatar.vue';
 export type { BadgeProps } from './BccBadge/BccBadge.vue';
 export type { CapacityIndicatorProps } from './BccCapacityIndicator/BccCapacityIndicator.vue';
 export type { KnobProps, KnobSlots } from './BccDialKnob/BccDialKnob.vue';
@@ -25,6 +21,4 @@ export type { GraphicProps } from './BccGraphic/BccGraphic.vue';
 export type { NpsResultProps } from './BccNpsResult/BccNpsResult.vue';
 export type { NpsScoreProps } from './BccNpsScore/BccNpsScore.vue';
 export type { ReactInfo, ReactProps } from './BccReact/types';
-export type { TabItem, TabsProps } from './BccTabs/BccTabs.vue';
 export type { TagProps } from './BccTag/BccTag.vue';
-export type { ToggleProps } from './BccToggle/BccToggle.vue';

package/dist-types/components/{custom → wrapped}/BccTabs/BccTabs.vue.d.ts

@@ -1,6 +1,6 @@
 import type { VueComponent } from '@/types';
 import { type TabsProps as PrimeTabsProps } from 'primevue/tabs';
-import { type BadgeProps } from '../BccBadge/BccBadge.vue';
+import { type BadgeProps } from '../../custom';
 export interface TabItem {
     title: string;
     icon?: VueComponent;

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

@@ -2,13 +2,19 @@
  * Wrapped PrimeVue components with BCC defaults or extensions.
  * Add new wrapped components here and export them from this file.
  */
+export { default as BccAvatar } from './BccAvatar/BccAvatar.vue';
 export { default as BccButton } from './BccButton.vue';
 export { default as BccCheckbox } from './BccCheckbox.vue';
 export { default as BccInput } from './BccInput.vue';
 export { default as BccMessage } from './BccMessage.vue';
+export { default as BccTabs } from './BccTabs/BccTabs.vue';
+export { default as BccToggle } from './BccToggle/BccToggle.vue';
 export { default as BccToggleButton } from './BccToggleButton.vue';
+export type { AvatarProps } from './BccAvatar/BccAvatar.vue';
 export type { ButtonProps } from './BccButton.vue';
 export type { CheckboxProps } from './BccCheckbox.vue';
 export type { InputProps } from './BccInput.vue';
 export type { MessageProps } from './BccMessage.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

@@ -133,7 +133,6 @@ export { default as BccTieredMenu } from 'primevue/tieredmenu';
 export { default as BccTimeline } from 'primevue/timeline';
 export { default as BccToast } from 'primevue/toast';
 export { default as BccToastService } from 'primevue/toastservice';
-export { default as BccToggleSwitch } from 'primevue/toggleswitch';
 export { default as BccToolbar } from 'primevue/toolbar';
 export { default as BccTooltip } from 'primevue/tooltip';
 export { default as BccTree } from 'primevue/tree';

package/package.json

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