@bcc-code/component-library-vue 0.0.0-dev.edf8c5a → 0.0.0-dev.f0229a6

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.
Files changed (25) hide show
  1. package/dist/component-library.js +45012 -42101
  2. package/dist/component-library.umd.cjs +1671 -1475
  3. package/dist/index.css +1 -1
  4. package/dist/theme.css +299 -166
  5. package/dist-types/components/custom/BccAppNavigation/BccAppNavigation.vue.d.ts +32 -0
  6. package/dist-types/components/custom/BccBadge/BccBadge.vue.d.ts +2 -0
  7. package/dist-types/components/custom/BccCapacityIndicator/BccCapacityIndicator.vue.d.ts +3 -0
  8. package/dist-types/components/custom/BccDialKnob/BccDialKnob.vue.d.ts +1 -1
  9. package/dist-types/components/custom/BccNpsResult/BccNpsResult.vue.d.ts +2 -2
  10. package/dist-types/components/custom/BccReact/BccReact.vue.d.ts +1 -1
  11. package/dist-types/components/custom/BccStepIndicator/BccStepIndicator.vue.d.ts +5 -5
  12. package/dist-types/components/custom/BccTopNavigation/BccTopNavigation.vue.d.ts +47 -0
  13. package/dist-types/components/custom/index.d.ts +4 -0
  14. package/dist-types/components/wrapped/BccAvatar/BccAvatar.vue.d.ts +2 -2
  15. package/dist-types/components/wrapped/BccButton.vue.d.ts +1 -0
  16. package/dist-types/components/wrapped/BccImage.vue.d.ts +17 -0
  17. package/dist-types/components/wrapped/BccMenu/BccMenu.vue.d.ts +14 -0
  18. package/dist-types/components/wrapped/BccMessage.vue.d.ts +4 -2
  19. package/dist-types/components/wrapped/BccRadioButton.vue.d.ts +18 -0
  20. package/dist-types/components/wrapped/BccSelectButton.vue.d.ts +17 -0
  21. package/dist-types/components/wrapped/BccTabs/BccTabs.vue.d.ts +2 -0
  22. package/dist-types/components/wrapped/BccToggle/BccToggle.vue.d.ts +12 -1
  23. package/dist-types/components/wrapped/index.d.ts +11 -0
  24. package/dist-types/index.d.ts +14 -7
  25. package/package.json +103 -100
package/dist/theme.css CHANGED
@@ -1,10 +1,10 @@
1
1
  /* Layer order: Tailwind base/utilities first, then PrimeVue so component styles win */
2
2
  @layer theme, base, tailwind, primevue;
3
- @import "@bcc-code/design-tokens/css";
3
+ @import '@bcc-code/design-tokens/css';
4
4
 
5
- @import "tailwindcss";
6
- @import "@bcc-code/design-tokens/tailwind";
7
- @import "@bcc-code/design-tokens/primevue/overrides";
5
+ @import 'tailwindcss';
6
+ @import '@bcc-code/design-tokens/tailwind';
7
+ @import '@bcc-code/design-tokens/primevue/overrides';
8
8
 
9
9
 
10
10
  /* === ./styles/theme.css === */
@@ -649,7 +649,8 @@
649
649
 
650
650
  /* Capitalize first letter */
651
651
  @utility capital {
652
- display: inline-block;
652
+ @apply inline-block;
653
+
653
654
  &::first-letter {
654
655
  text-transform: uppercase;
655
656
  }
@@ -1824,99 +1825,212 @@
1824
1825
  /** Custom styles to fix primevue components that are not custom or wrapped. */
1825
1826
 
1826
1827
  /**
1827
- .BccAutocomplete
1828
+ * GUTTER FIX
1829
+ * Primevue's dropwdown components are all missing the gap between input and dropdown
1830
+ **/
1831
+ .p-autocomplete-overlay,
1832
+ .p-menu-overlay,
1833
+ .p-multiselect-overlay,
1834
+ .p-select-overlay,
1835
+ .p-datepicker-panel,
1836
+ .p-treeselect-overlay {
1837
+ margin: var(--p-anchor-gutter) 0;
1838
+ }
1839
+
1840
+ /* This fix is to ensure overlay badge is contained within the size of the component it wraps */
1841
+ .p-overlaybadge {
1842
+ display: inline-block;
1843
+ }
1844
+
1845
+ /**
1846
+ * BccAutocomplete
1828
1847
  **/
1829
1848
 
1830
1849
  /** Our icons are a bit smaller that Primevue's default */
1831
1850
  .p-autocomplete .p-icon {
1832
- --p-icon-size: var(--icon-size-sm);
1833
- --p-form-field-sm-font-size: var(--icon-size-sm);
1834
- --p-form-field-lg-font-size: var(--icon-size-md);
1851
+ --p-icon-size: var(--icon-size-sm);
1852
+ --p-form-field-sm-font-size: var(--icon-size-sm);
1853
+ --p-form-field-lg-font-size: var(--icon-size-md);
1854
+ }
1855
+
1856
+ .p-autocomplete .p-autocomplete-clear-icon {
1857
+ /** middle-align the icon */
1858
+ top: calc(50% - var(--icon-size-sm) / 2);
1859
+ margin-top: 0;
1835
1860
  }
1836
1861
 
1837
1862
  .p-autocomplete-clearable .p-inputtext {
1838
- flex-grow: 1;
1863
+ flex-grow: 1;
1839
1864
  }
1840
1865
 
1841
1866
  .p-autocomplete-chip.p-chip {
1842
- padding-block-start: calc(var(--p-autocomplete-padding-y) / 2);
1843
- padding-block-end: calc(var(--p-autocomplete-padding-y) / 2);
1844
- border-radius: var(--p-autocomplete-chip-border-radius);
1867
+ padding-block-start: calc(var(--p-autocomplete-padding-y) / 2);
1868
+ padding-block-end: calc(var(--p-autocomplete-padding-y) / 2);
1869
+ border-radius: var(--p-autocomplete-chip-border-radius);
1845
1870
  }
1846
1871
 
1847
-
1848
1872
  /**
1849
- GUTTER FIX
1850
- * Primevue's dropwdown components are all missing the gap between input and dropdown
1851
- **/
1852
- .p-autocomplete-overlay,
1853
- .p-menu-overlay,
1854
- .p-multiselect-overlay,
1855
- .p-select-overlay,
1856
- .p-treeselect-overlay {
1857
- margin: var(--p-anchor-gutter) 0;
1873
+ * BccSelect
1874
+ **/
1875
+ .p-select {
1876
+ --p-icon-size: var(--icon-size-sm);
1877
+ }
1878
+
1879
+ .p-select.inline-select {
1880
+ @apply mx-auto inline-flex w-auto items-center border-0 bg-transparent shadow-none;
1881
+ --p-icon-size: 1.25em;
1882
+ --p-select-dropdown-width: 1.5em;
1883
+ --p-select-min-height: auto;
1884
+ }
1885
+
1886
+ .p-select.inline-select .p-select-label {
1887
+ @apply inline-block font-semibold;
1888
+ font-size: inherit;
1889
+ padding: 0 0 0 0.25em;
1890
+ }
1891
+
1892
+ .p-select.inline-select.inverse {
1893
+ --p-select-color: var(--color-neutral-0);
1894
+ --p-select-dropdown-color: var(--color-neutral-0);
1895
+ --p-select-placeholder-color: var(--color-dark-neutral-1000);
1896
+ }
1897
+
1898
+ /**
1899
+ * Fix issue with icons inside Input within an InputGroup being hidden when Input is in focus
1900
+ **/
1901
+ .p-inputicon {
1902
+ z-index: 2;
1903
+ }
1904
+
1905
+ .p-dialog-close-button {
1906
+ --p-icon-size: var(--icon-size-sm);
1907
+ }
1908
+ .p-dialog .p-button-icon:empty {
1909
+ display: none;
1910
+ }
1911
+
1912
+ .p-togglebutton {
1913
+ font-size: var(--text-sm);
1914
+ border: 0;
1915
+ }
1916
+
1917
+ .p-togglebutton-sm {
1918
+ font-size: var(--text-sm);
1919
+ }
1920
+
1921
+ .p-togglebutton-lg {
1922
+ font-size: var(--text-md);
1858
1923
  }
1859
1924
 
1860
1925
 
1861
1926
 
1927
+
1862
1928
  /* === ./components/custom/styles.css === */
1863
1929
 
1930
+ /* from ./BccAppNavigation/BccAppNavigation.css */
1931
+ @layer components {
1932
+ .bcc-app-nav {
1933
+ @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;
1934
+ }
1935
+ .bcc-app-nav-container {
1936
+ @apply center pb-inset-bottom-1 mx-auto max-w-lg pt-1;
1937
+ }
1938
+
1939
+ .bcc-app-nav-item {
1940
+ @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;
1941
+ }
1942
+
1943
+ .bcc-nav-item-icon {
1944
+ @apply size-6 opacity-50;
1945
+ }
1946
+
1947
+ .bcc-nav-item-badge {
1948
+ @apply absolute top-0 right-1 opacity-75;
1949
+ }
1950
+
1951
+ .bcc-nav-item-title {
1952
+ @apply text-heading-xs text-center opacity-50;
1953
+ }
1954
+
1955
+ .bcc-app-nav-item--active {
1956
+ @apply text-selected;
1957
+ }
1958
+
1959
+ .bcc-app-nav-item--active .bcc-nav-item-icon,
1960
+ .bcc-app-nav-item--active .bcc-nav-item-badge,
1961
+ .bcc-app-nav-item--active .bcc-nav-item-title {
1962
+ @apply opacity-100;
1963
+ }
1964
+ }
1965
+
1966
+
1967
+
1864
1968
  /* from ./BccBadge/BccBadge.css */
1865
1969
  @layer components {
1866
- .bcc-badge {
1867
- @apply inline-flex shrink-0 gap-1 items-center justify-center rounded-full leading-none whitespace-nowrap;
1868
-
1869
- @apply bg-ctx text-ctx;
1870
- }
1871
- .bcc-badge.sm {
1872
- @apply w-4 h-4 text-heading-xs;
1873
- }
1874
- .bcc-badge.md {
1875
- @apply h-5 w-5 text-heading-sm;
1876
- }
1877
- .bcc-badge.lg {
1878
- @apply w-6 h-6 text-heading-md;
1879
- }
1880
- .bcc-badge.xl {
1881
- @apply w-8 h-8 text-heading-lg;
1882
- }
1970
+ .bcc-badge {
1971
+ @apply inline-flex shrink-0 items-center justify-center gap-1 rounded-full leading-none whitespace-nowrap;
1883
1972
 
1884
- .bcc-badge .bcc-badge-icon {
1885
- @apply size-4;
1886
- }
1887
- .bcc-badge.lg .bcc-badge-icon {
1888
- @apply size-5;
1889
- }
1890
- .bcc-badge.xl .bcc-badge-icon {
1891
- @apply size-6;
1892
- }
1973
+ @apply bg-ctx text-ctx;
1974
+ }
1893
1975
 
1894
- .bcc-badge.bcc-badge-text {
1895
- @apply w-auto px-2;
1896
- }
1897
- .bcc-badge-text.lg, .bcc-badge-text.xl {
1898
- @apply px-3;
1899
- }
1900
- .bcc-badge-text.border.lg, .bcc-badge-text.border.xl {
1901
- @apply px-2;
1902
- }
1903
- .bcc-badge-text.bordered.lg, .bcc-badge-text.bordered.xl {
1904
- @apply px-1;
1905
- }
1976
+ .bcc-badge.capital {
1977
+ @apply inline-flex;
1978
+ }
1979
+ .bcc-badge.gradient {
1980
+ @apply ctx-gradient;
1981
+ }
1982
+ .bcc-badge.sm {
1983
+ @apply text-heading-xs h-4 w-4;
1984
+ }
1985
+ .bcc-badge.md {
1986
+ @apply text-heading-sm h-5 w-5;
1987
+ }
1988
+ .bcc-badge.lg {
1989
+ @apply text-heading-md h-6 w-6;
1990
+ }
1991
+ .bcc-badge.xl {
1992
+ @apply text-heading-md h-8 w-8;
1993
+ }
1906
1994
 
1907
- .bcc-badge.border {
1908
- @apply border-1;
1909
- border-color: var(--ctx-background-pressed);
1910
- }
1995
+ .bcc-badge .bcc-badge-icon {
1996
+ @apply size-4;
1997
+ }
1998
+ .bcc-badge.lg .bcc-badge-icon {
1999
+ @apply size-5;
2000
+ }
2001
+ .bcc-badge.xl .bcc-badge-icon {
2002
+ @apply size-6;
2003
+ }
1911
2004
 
1912
- .bcc-badge.bordered {
1913
- @apply border-2;
1914
- border-color: var(--ctx-background-pressed);
1915
- }
2005
+ .bcc-badge.bcc-badge-text {
2006
+ @apply w-auto px-2;
2007
+ }
2008
+ .bcc-badge-text.lg,
2009
+ .bcc-badge-text.xl {
2010
+ @apply px-3;
2011
+ }
2012
+ .bcc-badge-text.border.lg,
2013
+ .bcc-badge-text.border.xl {
2014
+ @apply px-2;
2015
+ }
2016
+ .bcc-badge-text.bordered.lg,
2017
+ .bcc-badge-text.bordered.xl {
2018
+ @apply px-1;
2019
+ }
1916
2020
 
1917
- .bcc-badge.squared {
1918
- @apply rounded-sm;
1919
- }
2021
+ .bcc-badge.border {
2022
+ @apply border-1;
2023
+ border-color: var(--ctx-background-pressed);
2024
+ }
2025
+
2026
+ .bcc-badge.bordered {
2027
+ @apply border-2;
2028
+ border-color: var(--ctx-background-pressed);
2029
+ }
2030
+
2031
+ .bcc-badge.squared {
2032
+ @apply rounded-sm;
2033
+ }
1920
2034
  }
1921
2035
 
1922
2036
 
@@ -1965,6 +2079,7 @@ GUTTER FIX
1965
2079
 
1966
2080
  .bcc-capacity-indicator.is-warning {
1967
2081
  @apply ctx-yellow-subtlest;
2082
+ --bcc-capacity-indicator-circle: var(--ctx-background);
1968
2083
  }
1969
2084
 
1970
2085
  .bcc-capacity-indicator.is-full {
@@ -2017,8 +2132,8 @@ GUTTER FIX
2017
2132
  .bcc-frame--raised {
2018
2133
  --ctx-background: var(--color-elevation-surface-raised-default);
2019
2134
  }
2020
- .bcc-frame--raised.rounded {
2021
- @apply rounded;
2135
+ .bcc-frame--rounded {
2136
+ @apply rounded-md;
2022
2137
  }
2023
2138
  .bcc-frame--raised.bcc-frame--shadow {
2024
2139
  @apply shadow-raised;
@@ -2089,43 +2204,53 @@ GUTTER FIX
2089
2204
  @apply relative w-full;
2090
2205
  }
2091
2206
 
2092
- .bcc-nps-result .result-gauge-dial {
2207
+ .bcc-nps-result.xs {
2208
+ @apply w-24;
2209
+ }
2210
+ .bcc-nps-result.sm {
2211
+ @apply w-36;
2212
+ }
2213
+ .bcc-nps-result.md {
2214
+ @apply w-48;
2215
+ }
2216
+ .bcc-nps-result.lg {
2217
+ @apply w-60;
2218
+ }
2219
+ .bcc-nps-result.xl {
2220
+ @apply w-72;
2221
+ }
2222
+
2223
+ .bcc-nps-result .bcc-nps-result-gauge-dial {
2093
2224
  transform-origin: center;
2094
2225
  }
2095
2226
 
2096
- .bcc-nps-result.animated .result-gauge-dial {
2227
+ .bcc-nps-result.animated .bcc-nps-result-gauge-dial {
2097
2228
  transition-delay: 0.3s;
2098
2229
  transition: all .7s cubic-bezier(0, 0, 0.3, 1.5);
2099
2230
  }
2100
2231
 
2101
- .bcc-nps-result-labels.lg {
2102
- @apply bottom-[2em];
2103
- }
2104
2232
  .bcc-nps-result-labels {
2105
- @apply absolute bottom-[1em] flex w-full flex-col items-center justify-center;
2106
- }
2107
- .bcc-nps-result-labels.sm {
2108
- @apply bottom-0;
2233
+ @apply absolute text-base bottom-1/4 translate-y-1/2 flex w-full flex-col items-center justify-center;
2109
2234
  }
2110
2235
 
2111
- .bcc-nps-result-labels.lg .bcc-nps-result-labels--heading {
2112
- @apply text-heading-xl leading-tight;
2113
- }
2114
2236
  .bcc-nps-result-labels--heading {
2115
- @apply text-heading-lg leading-none;
2237
+ @apply text-[1.25em] font-semibold leading-none;
2116
2238
  }
2117
- .bcc-nps-result-labels.sm .bcc-nps-result-labels--heading {
2118
- @apply text-heading-md leading-none;
2239
+ .bcc-nps-result-labels--label {
2240
+ @apply text-[0.75em] text-subtlest;
2119
2241
  }
2120
2242
 
2121
- .bcc-nps-result-labels.lg .bcc-nps-result-labels--label {
2122
- @apply text-body-lg opacity-60;
2243
+ .bcc-nps-result.md .bcc-nps-result-labels {
2244
+ @apply text-lg;
2123
2245
  }
2124
- .bcc-nps-result-labels--label {
2125
- @apply text-body-md opacity-60;
2246
+ .bcc-nps-result.lg .bcc-nps-result-labels {
2247
+ @apply text-xl;
2126
2248
  }
2127
- .bcc-nps-result-labels.sm .bcc-nps-result-labels--label {
2128
- @apply text-body-sm;
2249
+ .bcc-nps-result.xl .bcc-nps-result-labels {
2250
+ @apply text-2xl;
2251
+ }
2252
+ .bcc-nps-result.full .bcc-nps-result-labels {
2253
+ @apply text-lg;
2129
2254
  }
2130
2255
  }
2131
2256
 
@@ -2308,75 +2433,74 @@ GUTTER FIX
2308
2433
 
2309
2434
  /* from ./BccAvatar/BccAvatar.css */
2310
2435
  @layer components {
2311
- .bcc-avatar {
2312
- --p-avatar-background: var(--ctx-background);
2313
- --p-avatar-color: var(--ctx-text);
2314
- --bcc-avatar-border: var(--ctx-border);
2315
- @apply overflow-hidden shrink-0 ctx-gray-subtler;
2316
- }
2317
- .bcc-avatar.male,
2318
- .bcc-avatar.M {
2319
- @apply ctx-blue-subtler;
2320
- }
2321
- .bcc-avatar.female,
2322
- .bcc-avatar.F {
2323
- @apply ctx-purple-subtler;
2324
- }
2325
- .bcc-avatar.male.child,
2326
- .bcc-avatar.M.child {
2327
- @apply ctx-teal-subtler;
2328
- }
2329
- .bcc-avatar.female.child,
2330
- .bcc-avatar.F.child {
2331
- @apply ctx-magenta-subtler;
2332
- }
2333
- .bcc-avatar.bordered {
2334
- @apply border-2 border-ctx;
2335
- }
2336
- .bcc-avatar.xs {
2337
- @apply size-5 text-xs;
2338
- }
2339
- .bcc-avatar.sm {
2340
- @apply size-6 text-sm;
2341
- }
2342
- .bcc-avatar.md {
2343
- @apply size-8 text-base;
2344
- }
2345
- .bcc-avatar.lg {
2346
- @apply size-10 text-lg;
2347
- }
2348
- .bcc-avatar.xl {
2349
- @apply size-12 text-xl;
2350
- }
2351
- .bcc-avatar.xxl {
2352
- @apply size-20 text-3xl;
2353
- }
2354
- .bcc-avatar.xxxl {
2355
- @apply size-24 text-4xl;
2356
- }
2436
+ .bcc-avatar {
2437
+ --p-avatar-background: var(--ctx-background);
2438
+ --p-avatar-color: var(--ctx-text);
2439
+ --bcc-avatar-border: var(--ctx-border);
2440
+ --p-icon-size: var(--icon-size-sm);
2441
+ @apply ctx-gray-subtler shrink-0 overflow-hidden text-sm;
2442
+ }
2357
2443
 
2358
- .bcc-avatar.squared.lg {
2359
- @apply text-xl;
2360
- }
2361
- .bcc-avatar.squared.xl {
2362
- @apply text-2xl;
2363
- }
2364
- .bcc-avatar.squared.xxl {
2365
- @apply text-4xl;
2366
- }
2367
- .bcc-avatar.squared.xxxl {
2368
- @apply text-5xl;
2369
- }
2444
+ .bcc-avatar.male,
2445
+ .bcc-avatar.M {
2446
+ @apply ctx-blue-subtler;
2447
+ }
2448
+ .bcc-avatar.female,
2449
+ .bcc-avatar.F {
2450
+ @apply ctx-purple-subtler;
2451
+ }
2452
+ .bcc-avatar.male.child,
2453
+ .bcc-avatar.M.child {
2454
+ @apply ctx-teal-subtler;
2455
+ }
2456
+ .bcc-avatar.female.child,
2457
+ .bcc-avatar.F.child {
2458
+ @apply ctx-magenta-subtler;
2459
+ }
2460
+ .bcc-avatar.bordered {
2461
+ @apply border-ctx border-2;
2462
+ }
2463
+ .bcc-avatar.xs {
2464
+ @apply size-5 text-xs;
2465
+ --p-icon-size: var(--icon-size-xs);
2466
+ }
2467
+ .bcc-avatar.sm {
2468
+ @apply size-6 text-xs;
2469
+ --p-icon-size: var(--icon-size-xs);
2470
+ }
2471
+ /* .bcc-avatar.md {
2472
+ same as default
2473
+ }*/
2474
+ .bcc-avatar.lg {
2475
+ @apply text-md size-10;
2476
+ --p-icon-size: var(--icon-size-md);
2477
+ }
2478
+ .bcc-avatar.xl {
2479
+ @apply size-12 text-xl;
2480
+ --p-icon-size: var(--icon-size-lg);
2481
+ }
2482
+ .bcc-avatar.xxl {
2483
+ @apply size-20 text-3xl;
2484
+ --p-icon-size: var(--icon-size-xl);
2485
+ }
2486
+ .bcc-avatar.xxxl {
2487
+ @apply size-24 text-4xl;
2488
+ --p-icon-size: var(--icon-size-xl);
2489
+ }
2370
2490
 
2491
+ .p-overlaybadge .bcc-avatar.p-avatar-circle.lg ~ .p-badge,
2492
+ .p-overlaybadge .bcc-avatar.p-avatar-circle.xl ~ .p-badge {
2493
+ transform: translate(40%, -40%);
2494
+ }
2371
2495
 
2372
- .p-overlaybadge .bcc-avatar.p-avatar-circle.xxxl~.p-badge,
2373
- .p-overlaybadge .bcc-avatar.p-avatar-circle.xxl~.p-badge,
2374
- .p-overlaybadge .bcc-avatar.p-avatar-circle.xl~.p-badge {
2375
- transform: translate(25%, -25%);
2376
- }
2496
+ .p-overlaybadge .bcc-avatar.p-avatar-circle.xxxl ~ .p-badge,
2497
+ .p-overlaybadge .bcc-avatar.p-avatar-circle.xxl ~ .p-badge {
2498
+ transform: translate(20%, -20%);
2499
+ }
2377
2500
  }
2378
2501
 
2379
2502
 
2503
+
2380
2504
  /* from ./BccTabs/BccTabs.css */
2381
2505
  @layer components {
2382
2506
  .bcc-tabs-fill.p-tabs {
@@ -2395,6 +2519,9 @@ GUTTER FIX
2395
2519
  height: 100%;
2396
2520
  overflow: auto;
2397
2521
  }
2522
+ .bcc-tabs-fluid.p-tabs {
2523
+ width: 100%;
2524
+ }
2398
2525
  }
2399
2526
 
2400
2527
 
@@ -2417,24 +2544,30 @@ GUTTER FIX
2417
2544
 
2418
2545
 
2419
2546
 
2420
- :root, :host {
2547
+ :root,
2548
+ :host {
2421
2549
  --font-sans: 'Archivo', system-ui, sans-serif;
2422
- @apply font-sans antialiased p-0 m-0;
2423
- -webkit-font-smoothing: antialiased;
2424
- -moz-osx-font-smoothing: grayscale;
2550
+ @apply m-0 p-0 font-sans antialiased;
2551
+ -webkit-font-smoothing: antialiased;
2552
+ -moz-osx-font-smoothing: grayscale;
2553
+ line-height: 1.2;
2554
+ font-kerning: normal;
2555
+ }
2425
2556
 
2557
+ hr {
2558
+ border-color: var(--color-border-default);
2426
2559
  }
2427
2560
 
2428
2561
  b,
2429
2562
  strong,
2430
2563
  .bold {
2431
- font-weight: bold;
2432
- --ctx-text: var(--ctx-text-bold);
2564
+ font-weight: bold;
2565
+ --ctx-text: var(--ctx-text-bold);
2433
2566
  }
2434
2567
 
2435
2568
  /* Disable state */
2436
2569
  :disabled,
2437
2570
  .disabled {
2438
- cursor: not-allowed;
2439
- pointer-events: none;
2571
+ cursor: not-allowed;
2572
+ pointer-events: none;
2440
2573
  }
@@ -0,0 +1,32 @@
1
+ import type { VueComponent } from '@/types';
2
+ import { type Component } from 'vue';
3
+ export type BccAppNavigationItem = {
4
+ key: string;
5
+ title: string;
6
+ icon: Component;
7
+ pin?: number;
8
+ /** Any additional properties will be passed to the component.
9
+ * @example
10
+ * {
11
+ * href: '/',
12
+ * target: '_blank',
13
+ * } or for router link:
14
+ * {
15
+ * to: '/',
16
+ * replace: true,
17
+ * }
18
+ */
19
+ [key: string]: unknown;
20
+ };
21
+ type __VLS_Props = {
22
+ items: BccAppNavigationItem[];
23
+ linkComponent?: VueComponent;
24
+ activeKey?: BccAppNavigationItem['key'] | null;
25
+ };
26
+ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
27
+ select: (item: BccAppNavigationItem) => any;
28
+ }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
29
+ onSelect?: ((item: BccAppNavigationItem) => any) | undefined;
30
+ }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
31
+ declare const _default: typeof __VLS_export;
32
+ export default _default;
@@ -13,6 +13,7 @@ export type BadgeProps = {
13
13
  squared?: boolean;
14
14
  /** Design context (e.g. neutral, brand) used for background and text color. */
15
15
  context?: BCC_CONTEXT;
16
+ gradient?: boolean;
16
17
  };
17
18
  declare var __VLS_1: {};
18
19
  type __VLS_Slots = {} & {
@@ -21,6 +22,7 @@ type __VLS_Slots = {} & {
21
22
  declare const __VLS_base: import("vue").DefineComponent<BadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BadgeProps> & Readonly<{}>, {
22
23
  size: "sm" | "md" | "lg" | "xl";
23
24
  context: BCC_CONTEXT;
25
+ gradient: boolean;
24
26
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
25
27
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
26
28
  declare const _default: typeof __VLS_export;
@@ -1,3 +1,4 @@
1
+ import { BCC_CONTEXT } from '@/contexts';
1
2
  export type CapacityIndicatorProps = {
2
3
  /** Total capacity; use -1 for “unlimited” (shows an infinity-style icon instead of a bar). */
3
4
  total: number;
@@ -11,6 +12,8 @@ export type CapacityIndicatorProps = {
11
12
  squared?: boolean;
12
13
  /** When true, applies warning/full color states (e.g. color change at high usage). */
13
14
  colored?: boolean;
15
+ /** Design context (e.g. neutral, brand) used for background and text color. */
16
+ context?: BCC_CONTEXT;
14
17
  };
15
18
  declare const __VLS_export: import("vue").DefineComponent<CapacityIndicatorProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CapacityIndicatorProps> & Readonly<{}>, {
16
19
  size: "xs" | "sm" | "base" | "lg";
@@ -44,6 +44,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
44
44
  "onUpdate:modelValue"?: ((value: number) => any) | undefined;
45
45
  }>, {
46
46
  size: number;
47
+ duration: number;
47
48
  colored: boolean;
48
49
  arcWidth: number;
49
50
  min: number;
@@ -51,7 +52,6 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
51
52
  steps: number;
52
53
  showHandle: boolean;
53
54
  hideArrows: boolean;
54
- duration: number;
55
55
  animateRotations: number;
56
56
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
57
57
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
@@ -2,7 +2,7 @@ export type NpsResultProps = {
2
2
  /** NPS score between -100 and 100; drives the gauge needle angle and position. */
3
3
  score: number;
4
4
  /** Controls the size of the gauge and optional text (lg, md, sm, xs). */
5
- size?: 'lg' | 'md' | 'sm' | 'xs';
5
+ size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
6
6
  /** Text shown as the main heading; defaults to the numeric score when unset. */
7
7
  display?: string;
8
8
  /** Secondary label shown under the main heading. */
@@ -13,7 +13,7 @@ export type NpsResultProps = {
13
13
  animated?: boolean;
14
14
  };
15
15
  declare const __VLS_export: import("vue").DefineComponent<NpsResultProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<NpsResultProps> & Readonly<{}>, {
16
- size: "lg" | "md" | "sm" | "xs";
16
+ size: "xs" | "sm" | "md" | "lg" | "xl" | "full";
17
17
  hideText: boolean;
18
18
  animated: boolean;
19
19
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
@@ -4,8 +4,8 @@ declare const __VLS_export: import("vue").DefineComponent<ReactProps, {}, {}, {}
4
4
  }, string, import("vue").PublicProps, Readonly<ReactProps> & Readonly<{
5
5
  onToggle?: ((id: string) => any) | undefined;
6
6
  }>, {
7
- top: boolean;
8
7
  placeholder: string;
8
+ top: boolean;
9
9
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
10
10
  declare const _default: typeof __VLS_export;
11
11
  export default _default;