@bcc-code/component-library-vue 0.0.0-dev.f28f614 → 0.0.0-dev.f3f88c3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/theme.css CHANGED
@@ -590,78 +590,83 @@
590
590
 
591
591
  /* === ./styles/utilities.css === */
592
592
  @utility center {
593
- @apply flex items-center justify-center;
594
-
595
- &.top {
596
- @apply items-start;
597
- }
593
+ @apply flex items-center justify-center;
598
594
 
599
- &.bottom {
600
- @apply items-end;
601
- }
595
+ &.top {
596
+ @apply items-start;
597
+ }
602
598
 
603
- &.left {
604
- @apply justify-start;
605
- }
599
+ &.bottom {
600
+ @apply items-end;
601
+ }
606
602
 
607
- &.right {
608
- @apply justify-end;
609
- }
603
+ &.left {
604
+ @apply justify-start;
605
+ }
610
606
 
611
- &.stretch {
612
- @apply items-stretch;
613
- }
607
+ &.right {
608
+ @apply justify-end;
609
+ }
610
+
611
+ &.stretch {
612
+ @apply items-stretch;
613
+ }
614
614
  }
615
615
 
616
616
  @utility col {
617
- @apply flex flex-col items-center justify-center;
617
+ @apply flex flex-col items-center justify-center;
618
618
 
619
- &.left {
620
- @apply items-start;
621
- }
619
+ &.left {
620
+ @apply items-start;
621
+ }
622
622
 
623
- &.right {
624
- @apply items-end;
625
- }
623
+ &.right {
624
+ @apply items-end;
625
+ }
626
626
 
627
- &.top {
628
- @apply justify-start;
629
- }
627
+ &.top {
628
+ @apply justify-start;
629
+ }
630
630
 
631
- &.bottom {
632
- @apply justify-end;
633
- }
631
+ &.bottom {
632
+ @apply justify-end;
633
+ }
634
634
  }
635
635
 
636
636
  @utility between {
637
- @apply justify-between;
637
+ @apply justify-between;
638
638
  }
639
639
 
640
640
  @utility hide-scrollbar {
641
- -ms-overflow-style: none; /* for Internet Explorer, Edge */
642
- scrollbar-width: none; /* for Firefox */
643
- overflow-y: scroll;
641
+ -ms-overflow-style: none; /* for Internet Explorer, Edge */
642
+ scrollbar-width: none; /* for Firefox */
643
+ overflow-y: scroll;
644
644
 
645
- &::-webkit-scrollbar {
646
- display: none; /* for Chrome, Safari, and Opera */
647
- }
645
+ &::-webkit-scrollbar {
646
+ display: none; /* for Chrome, Safari, and Opera */
647
+ }
648
648
  }
649
649
 
650
650
  /* Capitalize first letter */
651
651
  @utility capital {
652
- @apply inline-block;
652
+ @apply inline-block;
653
653
 
654
- &::first-letter {
655
- text-transform: uppercase;
656
- }
654
+ &::first-letter {
655
+ text-transform: uppercase;
656
+ }
657
+
658
+ &.bcc-badge {
659
+ @apply inline-flex;
660
+ }
657
661
  }
658
662
 
659
663
  /* Inset 0 */
660
664
  @utility inset-0 {
661
- @apply left-0 right-0 top-0 bottom-0;
665
+ @apply top-0 right-0 bottom-0 left-0;
662
666
  }
663
667
 
664
668
 
669
+
665
670
  /* === ./styles/contexts.css === */
666
671
  /* Auto-generated from src/figma-modes. Do not edit by hand. */
667
672
  /* Run: pnpm run generate:context-css */
@@ -1909,6 +1914,19 @@
1909
1914
  display: none;
1910
1915
  }
1911
1916
 
1917
+ .p-togglebutton {
1918
+ font-size: var(--text-sm);
1919
+ border: 0;
1920
+ }
1921
+
1922
+ .p-togglebutton-sm {
1923
+ font-size: var(--text-sm);
1924
+ }
1925
+
1926
+ .p-togglebutton-lg {
1927
+ font-size: var(--text-md);
1928
+ }
1929
+
1912
1930
 
1913
1931
 
1914
1932
 
@@ -1917,19 +1935,36 @@
1917
1935
  /* from ./BccAppNavigation/BccAppNavigation.css */
1918
1936
  @layer components {
1919
1937
  .bcc-app-nav {
1920
- @apply sticky inset-x-0 bottom-0 z-20 overflow-visible bg-elevation-surface-default shadow-md sm:rounded-t-xl;
1938
+ @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;
1921
1939
  }
1922
- .bcc-app-nav .bcc-app-nav-container {
1940
+ .bcc-app-nav-container {
1923
1941
  @apply center pb-inset-bottom-1 mx-auto max-w-lg pt-1;
1924
1942
  }
1925
1943
 
1926
- .bcc-app-nav .bcc-app-nav-item {
1927
- @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;
1928
- @apply opacity-50;
1944
+ .bcc-app-nav-item {
1945
+ @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;
1929
1946
  }
1930
1947
 
1931
- .bcc-app-nav .bcc-app-nav-item--active {
1932
- @apply text-selected opacity-100;
1948
+ .bcc-nav-item-icon {
1949
+ @apply size-6 opacity-50;
1950
+ }
1951
+
1952
+ .bcc-nav-item-badge {
1953
+ @apply absolute top-0 right-1 opacity-75;
1954
+ }
1955
+
1956
+ .bcc-nav-item-title {
1957
+ @apply text-heading-xs text-center opacity-50;
1958
+ }
1959
+
1960
+ .bcc-app-nav-item--active {
1961
+ @apply text-selected;
1962
+ }
1963
+
1964
+ .bcc-app-nav-item--active .bcc-nav-item-icon,
1965
+ .bcc-app-nav-item--active .bcc-nav-item-badge,
1966
+ .bcc-app-nav-item--active .bcc-nav-item-title {
1967
+ @apply opacity-100;
1933
1968
  }
1934
1969
  }
1935
1970
 
@@ -1937,67 +1972,66 @@
1937
1972
 
1938
1973
  /* from ./BccBadge/BccBadge.css */
1939
1974
  @layer components {
1940
- .bcc-badge {
1941
- @apply inline-flex shrink-0 gap-1 items-center justify-center rounded-full leading-none whitespace-nowrap;
1942
-
1943
- @apply bg-ctx text-ctx;
1944
- }
1975
+ .bcc-badge {
1976
+ @apply inline-flex shrink-0 items-center justify-center gap-1 rounded-full leading-none whitespace-nowrap;
1945
1977
 
1946
- .bcc-badge.capital {
1947
- @apply inline-flex;
1948
- }
1949
- .bcc-badge.gradient {
1950
- @apply ctx-gradient;
1951
- }
1952
- .bcc-badge.sm {
1953
- @apply w-4 h-4 text-heading-xs;
1954
- }
1955
- .bcc-badge.md {
1956
- @apply h-5 w-5 text-heading-sm;
1957
- }
1958
- .bcc-badge.lg {
1959
- @apply w-6 h-6 text-heading-md;
1960
- }
1961
- .bcc-badge.xl {
1962
- @apply w-8 h-8 text-heading-md;
1963
- }
1978
+ @apply bg-ctx text-ctx;
1979
+ }
1980
+ .bcc-badge.gradient {
1981
+ @apply ctx-gradient;
1982
+ }
1983
+ .bcc-badge.sm {
1984
+ @apply text-heading-xs h-4 w-4;
1985
+ }
1986
+ .bcc-badge.md {
1987
+ @apply text-heading-sm h-5 w-5;
1988
+ }
1989
+ .bcc-badge.lg {
1990
+ @apply text-heading-md h-6 w-6;
1991
+ }
1992
+ .bcc-badge.xl {
1993
+ @apply text-heading-md h-8 w-8;
1994
+ }
1964
1995
 
1965
- .bcc-badge .bcc-badge-icon {
1966
- @apply size-4;
1967
- }
1968
- .bcc-badge.lg .bcc-badge-icon {
1969
- @apply size-5;
1970
- }
1971
- .bcc-badge.xl .bcc-badge-icon {
1972
- @apply size-6;
1973
- }
1996
+ .bcc-badge .bcc-badge-icon {
1997
+ @apply size-4;
1998
+ }
1999
+ .bcc-badge.lg .bcc-badge-icon {
2000
+ @apply size-5;
2001
+ }
2002
+ .bcc-badge.xl .bcc-badge-icon {
2003
+ @apply size-6;
2004
+ }
1974
2005
 
1975
- .bcc-badge.bcc-badge-text {
1976
- @apply w-auto px-2;
1977
- }
1978
- .bcc-badge-text.lg, .bcc-badge-text.xl {
1979
- @apply px-3;
1980
- }
1981
- .bcc-badge-text.border.lg, .bcc-badge-text.border.xl {
1982
- @apply px-2;
1983
- }
1984
- .bcc-badge-text.bordered.lg, .bcc-badge-text.bordered.xl {
1985
- @apply px-1;
1986
- }
2006
+ .bcc-badge.bcc-badge-text {
2007
+ @apply w-auto px-2;
2008
+ }
2009
+ .bcc-badge-text.lg,
2010
+ .bcc-badge-text.xl {
2011
+ @apply px-3;
2012
+ }
2013
+ .bcc-badge-text.border.lg,
2014
+ .bcc-badge-text.border.xl {
2015
+ @apply px-2;
2016
+ }
2017
+ .bcc-badge-text.bordered.lg,
2018
+ .bcc-badge-text.bordered.xl {
2019
+ @apply px-1;
2020
+ }
1987
2021
 
1988
- .bcc-badge.border {
1989
- @apply border-1;
1990
- border-color: var(--ctx-background-pressed);
1991
- }
2022
+ .bcc-badge.border {
2023
+ @apply border-1;
2024
+ border-color: var(--ctx-background-pressed);
2025
+ }
1992
2026
 
1993
- .bcc-badge.bordered {
1994
- @apply border-2;
1995
- border-color: var(--ctx-background-pressed);
1996
- }
2027
+ .bcc-badge.bordered {
2028
+ @apply border-2;
2029
+ border-color: var(--ctx-background-pressed);
2030
+ }
1997
2031
 
1998
- .bcc-badge.squared {
1999
- @apply rounded-sm;
2000
- }
2032
+ .bcc-badge.squared {
2033
+ @apply rounded-sm;
2034
+ }
2001
2035
  }
2002
2036
 
2003
2037
 
@@ -2518,6 +2552,7 @@
2518
2552
  -webkit-font-smoothing: antialiased;
2519
2553
  -moz-osx-font-smoothing: grayscale;
2520
2554
  line-height: 1.2;
2555
+ font-kerning: normal;
2521
2556
  }
2522
2557
 
2523
2558
  hr {
@@ -0,0 +1,18 @@
1
+ import { type RadioButtonProps as PrimeRadioButtonProps } from 'primevue/radiobutton';
2
+ export type RadioButtonProps = PrimeRadioButtonProps & {
3
+ label?: string;
4
+ labelLeft?: boolean;
5
+ };
6
+ declare var __VLS_6: {};
7
+ type __VLS_Slots = {} & {
8
+ default?: (props: typeof __VLS_6) => any;
9
+ };
10
+ 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>;
11
+ declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
12
+ declare const _default: typeof __VLS_export;
13
+ export default _default;
14
+ type __VLS_WithSlots<T, S> = T & {
15
+ new (): {
16
+ $slots: S;
17
+ };
18
+ };
@@ -0,0 +1,17 @@
1
+ import { type SelectButtonProps as PrimeSelectButtonProps } from 'primevue/selectbutton';
2
+ export type SelectButtonProps = PrimeSelectButtonProps;
3
+ declare var __VLS_9: {
4
+ option: any;
5
+ };
6
+ type __VLS_Slots = {} & {
7
+ option?: (props: typeof __VLS_9) => any;
8
+ };
9
+ declare const __VLS_base: import("vue").DefineComponent<PrimeSelectButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PrimeSelectButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
10
+ declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
11
+ declare const _default: typeof __VLS_export;
12
+ export default _default;
13
+ type __VLS_WithSlots<T, S> = T & {
14
+ new (): {
15
+ $slots: S;
16
+ };
17
+ };
@@ -11,6 +11,8 @@ export { default as BccImage } from './BccImage.vue';
11
11
  export { default as BccInput } from './BccInput.vue';
12
12
  export { default as BccMenu } from './BccMenu/BccMenu.vue';
13
13
  export { default as BccMessage } from './BccMessage.vue';
14
+ export { default as BccRadioButton } from './BccRadioButton.vue';
15
+ export { default as BccSelectButton } from './BccSelectButton.vue';
14
16
  export { default as BccTabs } from './BccTabs/BccTabs.vue';
15
17
  export { default as BccToggle } from './BccToggle/BccToggle.vue';
16
18
  export { default as BccToggleButton } from './BccToggleButton.vue';
@@ -22,6 +24,8 @@ export type { ImageProps } from './BccImage.vue';
22
24
  export type { InputProps } from './BccInput.vue';
23
25
  export type { BccMenuItem, MenuProps } from './BccMenu/BccMenu.vue';
24
26
  export type { MessageProps } from './BccMessage.vue';
27
+ export type { RadioButtonProps } from './BccRadioButton.vue';
28
+ export type { SelectButtonProps } from './BccSelectButton.vue';
25
29
  export type { TabItem, TabsProps } from './BccTabs/BccTabs.vue';
26
30
  export type { ToggleProps } from './BccToggle/BccToggle.vue';
27
31
  export type { ToggleButtonProps } from './BccToggleButton.vue';
@@ -94,7 +94,6 @@ export { default as BccPopover } from 'primevue/popover';
94
94
  export { default as BccPortal } from 'primevue/portal';
95
95
  export { default as BccProgressBar } from 'primevue/progressbar';
96
96
  export { default as BccProgressSpinner } from 'primevue/progressspinner';
97
- export { default as BccRadioButton } from 'primevue/radiobutton';
98
97
  export { default as BccRadioButtonGroup } from 'primevue/radiobuttongroup';
99
98
  export { default as BccRating } from 'primevue/rating';
100
99
  export { default as BccRipple } from 'primevue/ripple';
@@ -102,7 +101,6 @@ export { default as BccRow } from 'primevue/row';
102
101
  export { default as BccScrollPanel } from 'primevue/scrollpanel';
103
102
  export { default as BccScrollTop } from 'primevue/scrolltop';
104
103
  export { default as BccSelect } from 'primevue/select';
105
- export { default as BccSelectButton } from 'primevue/selectbutton';
106
104
  export { default as BccSkeleton } from 'primevue/skeleton';
107
105
  export { default as BccSlider } from 'primevue/slider';
108
106
  export { default as BccSpeedDial } from 'primevue/speeddial';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bcc-code/component-library-vue",
3
- "version": "0.0.0-dev.f28f614",
3
+ "version": "0.0.0-dev.f3f88c3",
4
4
  "type": "module",
5
5
  "description": "Extended Vue component library based on PrimeVue and BCC design tokens",
6
6
  "repository": "https://github.com/bcc-code/bcc-design.git",
@@ -53,7 +53,7 @@
53
53
  "create-version": "node ./scripts/version.cjs"
54
54
  },
55
55
  "dependencies": {
56
- "@bcc-code/design-tokens": "^5.1.49",
56
+ "@bcc-code/design-tokens": "^5.1.50",
57
57
  "@bcc-code/icons-vue": "^1.4.0",
58
58
  "@primeuix/themes": "^2.0.3",
59
59
  "@tailwindcss/vite": "^4.1.18",