bizz-components 0.2.0 → 0.3.0

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 (4) hide show
  1. package/README.md +8 -6
  2. package/package.json +2 -2
  3. package/web/index.d.mts +1 -1
  4. package/web/index.js +540 -136
package/README.md CHANGED
@@ -1,8 +1,8 @@
1
1
  # bizz-components
2
2
 
3
- A framework-agnostic web component library built with [Lit](https://lit.dev). Ships native Custom Elements — use `<bizz-button>`, `<bizz-card>`, `<bizz-tag>`, `<bizz-input>`, and `<bizz-textarea>` in React, Vue, Angular, Svelte, or plain HTML.
3
+ A framework-agnostic web component library built with [Lit](https://lit.dev). Ships native Custom Elements - use `<bizz-button>`, `<bizz-card>`, `<bizz-tag>`, `<bizz-input>`, and `<bizz-textarea>` in React, Vue, Angular, Svelte, or plain HTML.
4
4
 
5
- Design tokens (colors, spacing, typography) are self-injected on first mount — no global CSS import required.
5
+ Design tokens (colors, spacing, typography) are self-injected on first mount - no global CSS import required.
6
6
 
7
7
  ## Installation
8
8
 
@@ -50,11 +50,13 @@ The library uses IBM Plex Sans. Add it to your `<head>`:
50
50
  <bizz-button variant="primary" size="md">Label</bizz-button>
51
51
  <bizz-button variant="secondary" loading>Saving…</bizz-button>
52
52
  <bizz-button variant="danger" full-width>Delete</bizz-button>
53
+ <bizz-button variant="warning">Caution</bizz-button>
54
+ <bizz-button variant="success">Confirm</bizz-button>
53
55
  ```
54
56
 
55
57
  | Attribute | Type | Default | Description |
56
58
  |---|---|---|---|
57
- | `variant` | `primary \| secondary \| disabled \| danger` | `primary` | Visual style |
59
+ | `variant` | `primary \| secondary \| danger \| warning \| success` | `primary` | Visual style |
58
60
  | `size` | `sm \| md \| lg` | `md` | Button size |
59
61
  | `type` | `button \| submit \| reset` | `button` | Native button type |
60
62
  | `disabled` | `boolean` | `false` | Disables the button |
@@ -107,7 +109,7 @@ The library uses IBM Plex Sans. Add it to your `<head>`:
107
109
 
108
110
  | Event | Detail | Description |
109
111
  |---|---|---|
110
- | `bizz-dismissed` | — | Fired when the close button is clicked |
112
+ | `bizz-dismissed` | - | Fired when the close button is clicked |
111
113
 
112
114
  ---
113
115
 
@@ -139,7 +141,7 @@ The library uses IBM Plex Sans. Add it to your `<head>`:
139
141
  | Event | Detail | Description |
140
142
  |---|---|---|
141
143
  | `bizz-input` | `string` | Fired on every keystroke |
142
- | `bizz-blur` | — | Fired on blur |
144
+ | `bizz-blur` | - | Fired on blur |
143
145
 
144
146
  ---
145
147
 
@@ -197,7 +199,7 @@ Wrap any section in `.bizz-theme-dark`:
197
199
 
198
200
  ### Custom brand colors
199
201
 
200
- Override the 5 base color variables — all shades regenerate automatically:
202
+ Override the 5 base color variables - all shades regenerate automatically:
201
203
 
202
204
  ```css
203
205
  :root {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "bizz-components",
3
- "version": "0.2.0",
4
- "description": "Framework-agnostic web component library — use <bizz-button>, <bizz-card>, <bizz-tag>, <bizz-input>, <bizz-textarea> in any framework",
3
+ "version": "0.3.0",
4
+ "description": "Framework-agnostic web component library - use <bizz-button>, <bizz-card>, <bizz-tag>, <bizz-input>, <bizz-textarea> in any framework",
5
5
  "author": "Beatriz Nascimento",
6
6
  "license": "MIT",
7
7
  "keywords": [
package/web/index.d.mts CHANGED
@@ -2,7 +2,7 @@ import * as lit_html from 'lit-html';
2
2
  import * as lit from 'lit';
3
3
  import { LitElement } from 'lit';
4
4
 
5
- type ButtonVariant = 'primary' | 'secondary' | 'disabled' | 'danger';
5
+ type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'warning' | 'success';
6
6
  type ButtonSize = 'sm' | 'md' | 'lg';
7
7
  type ButtonType = 'button' | 'submit' | 'reset';
8
8
  declare class BizzButtonElement extends LitElement {
package/web/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  // projects/bizz-components/src/web/tokens.ts
2
2
  var TOKENS_CSS = `
3
3
  :root {
4
- --bizz-primary: #0f62fe;
4
+ --bizz-primary:rgb(99, 15, 254);
5
5
  --bizz-secondary: #525252;
6
6
  --bizz-success: #24a148;
7
7
  --bizz-warning: #f59e0b;
@@ -92,6 +92,12 @@ var TOKENS_CSS = `
92
92
  --bizz-button-danger: var(--bizz-error-60);
93
93
  --bizz-button-danger-hover: var(--bizz-error-70);
94
94
  --bizz-button-danger-active: var(--bizz-error-80);
95
+ --bizz-button-warning: var(--bizz-warning-60);
96
+ --bizz-button-warning-hover: var(--bizz-warning-70);
97
+ --bizz-button-warning-active: var(--bizz-warning-80);
98
+ --bizz-button-success: var(--bizz-success-60);
99
+ --bizz-button-success-hover: var(--bizz-success-70);
100
+ --bizz-button-success-active: var(--bizz-success-80);
95
101
  --bizz-button-disabled: var(--bizz-secondary-30);
96
102
  --bizz-focus: var(--bizz-primary-60);
97
103
  --bizz-tag-primary-bg: var(--bizz-primary-20);
@@ -145,6 +151,12 @@ var TOKENS_CSS = `
145
151
  --bizz-button-danger: var(--bizz-error-60);
146
152
  --bizz-button-danger-hover: var(--bizz-error-70);
147
153
  --bizz-button-danger-active: var(--bizz-error-80);
154
+ --bizz-button-warning: var(--bizz-warning-60);
155
+ --bizz-button-warning-hover: var(--bizz-warning-70);
156
+ --bizz-button-warning-active: var(--bizz-warning-80);
157
+ --bizz-button-success: var(--bizz-success-60);
158
+ --bizz-button-success-hover: var(--bizz-success-70);
159
+ --bizz-button-success-active: var(--bizz-success-80);
148
160
  --bizz-button-disabled: var(--bizz-secondary-70);
149
161
  --bizz-focus: var(--bizz-white);
150
162
  --bizz-tag-primary-bg: var(--bizz-primary-80);
@@ -1454,6 +1466,191 @@ var o4 = s3.litElementPolyfillSupport;
1454
1466
  o4?.({ LitElement: i3 });
1455
1467
  (s3.litElementVersions ?? (s3.litElementVersions = [])).push("4.2.2");
1456
1468
 
1469
+ // projects/bizz-components/src/web/button/bizz-button.styles.ts
1470
+ var styles = i`
1471
+ :host {
1472
+ display: inline-flex;
1473
+ }
1474
+
1475
+ :host([full-width]) {
1476
+ display: flex;
1477
+ width: 100%;
1478
+ }
1479
+
1480
+ button {
1481
+ display: inline-flex;
1482
+ align-items: center;
1483
+ justify-content: center;
1484
+ gap: var(--bizz-spacing-03);
1485
+ position: relative;
1486
+ flex: 1;
1487
+ border: 2px solid transparent;
1488
+ border-radius: var(--bizz-radius-md);
1489
+ font-family: var(--bizz-font-family-base);
1490
+ font-weight: var(--bizz-font-weight-semibold);
1491
+ cursor: pointer;
1492
+ text-decoration: none;
1493
+ white-space: nowrap;
1494
+ transition:
1495
+ background-color var(--bizz-duration-base) var(--bizz-easing-default),
1496
+ border-color var(--bizz-duration-base) var(--bizz-easing-default),
1497
+ color var(--bizz-duration-base) var(--bizz-easing-default),
1498
+ box-shadow var(--bizz-duration-base) var(--bizz-easing-default),
1499
+ transform var(--bizz-duration-fast) var(--bizz-easing-default);
1500
+ user-select: none;
1501
+ outline: none;
1502
+ }
1503
+
1504
+ button:focus-visible {
1505
+ box-shadow: 0 0 0 3px var(--bizz-focus);
1506
+ }
1507
+
1508
+ button:active:not(:disabled) {
1509
+ transform: translateY(1px);
1510
+ }
1511
+
1512
+ :host([size='sm']) button {
1513
+ height: 2rem;
1514
+ padding: 0 var(--bizz-spacing-04);
1515
+ font-size: var(--bizz-font-size-sm);
1516
+ border-radius: var(--bizz-radius-sm);
1517
+ }
1518
+
1519
+ :host([size='md']) button {
1520
+ height: 2.5rem;
1521
+ padding: 0 var(--bizz-spacing-05);
1522
+ font-size: var(--bizz-font-size-md);
1523
+ }
1524
+
1525
+ :host([size='lg']) button {
1526
+ height: 3rem;
1527
+ padding: 0 var(--bizz-spacing-06);
1528
+ font-size: var(--bizz-font-size-lg);
1529
+ border-radius: var(--bizz-radius-lg);
1530
+ }
1531
+
1532
+ :host([variant='primary']) button {
1533
+ background-color: var(--bizz-button-primary);
1534
+ border-color: var(--bizz-button-primary);
1535
+ color: var(--bizz-text-on-color);
1536
+ }
1537
+
1538
+ :host([variant='primary']) button:hover:not(:disabled) {
1539
+ background-color: var(--bizz-button-primary-hover);
1540
+ border-color: var(--bizz-button-primary-hover);
1541
+ box-shadow: var(--bizz-shadow-md);
1542
+ }
1543
+
1544
+ :host([variant='primary']) button:active:not(:disabled) {
1545
+ background-color: var(--bizz-button-primary-active);
1546
+ border-color: var(--bizz-button-primary-active);
1547
+ }
1548
+
1549
+ :host([variant='secondary']) button {
1550
+ background-color: transparent;
1551
+ border-color: var(--bizz-button-secondary);
1552
+ color: var(--bizz-button-secondary);
1553
+ }
1554
+
1555
+ :host([variant='secondary']) button:hover:not(:disabled) {
1556
+ background-color: var(--bizz-background-hover);
1557
+ border-color: var(--bizz-button-secondary-hover);
1558
+ color: var(--bizz-button-secondary-hover);
1559
+ box-shadow: var(--bizz-shadow-sm);
1560
+ }
1561
+
1562
+ :host([variant='secondary']) button:active:not(:disabled) {
1563
+ background-color: var(--bizz-background-active);
1564
+ border-color: var(--bizz-button-secondary-active);
1565
+ color: var(--bizz-button-secondary-active);
1566
+ }
1567
+
1568
+ :host([variant='danger']) button {
1569
+ background-color: var(--bizz-button-danger);
1570
+ border-color: var(--bizz-button-danger);
1571
+ color: var(--bizz-text-on-color);
1572
+ }
1573
+
1574
+ :host([variant='danger']) button:hover:not(:disabled) {
1575
+ background-color: var(--bizz-button-danger-hover);
1576
+ border-color: var(--bizz-button-danger-hover);
1577
+ box-shadow: var(--bizz-shadow-md);
1578
+ }
1579
+
1580
+ :host([variant='danger']) button:active:not(:disabled) {
1581
+ background-color: var(--bizz-button-danger-active);
1582
+ border-color: var(--bizz-button-danger-active);
1583
+ }
1584
+
1585
+ :host([variant='warning']) button {
1586
+ background-color: var(--bizz-button-warning);
1587
+ border-color: var(--bizz-button-warning);
1588
+ color: var(--bizz-text-on-color);
1589
+ }
1590
+
1591
+ :host([variant='warning']) button:hover:not(:disabled) {
1592
+ background-color: var(--bizz-button-warning-hover);
1593
+ border-color: var(--bizz-button-warning-hover);
1594
+ box-shadow: var(--bizz-shadow-md);
1595
+ }
1596
+
1597
+ :host([variant='warning']) button:active:not(:disabled) {
1598
+ background-color: var(--bizz-button-warning-active);
1599
+ border-color: var(--bizz-button-warning-active);
1600
+ }
1601
+
1602
+ :host([variant='success']) button {
1603
+ background-color: var(--bizz-button-success);
1604
+ border-color: var(--bizz-button-success);
1605
+ color: var(--bizz-text-on-color);
1606
+ }
1607
+
1608
+ :host([variant='success']) button:hover:not(:disabled) {
1609
+ background-color: var(--bizz-button-success-hover);
1610
+ border-color: var(--bizz-button-success-hover);
1611
+ box-shadow: var(--bizz-shadow-md);
1612
+ }
1613
+
1614
+ :host([variant='success']) button:active:not(:disabled) {
1615
+ background-color: var(--bizz-button-success-active);
1616
+ border-color: var(--bizz-button-success-active);
1617
+ }
1618
+
1619
+ button:disabled {
1620
+ background-color: transparent;
1621
+ border-color: transparent;
1622
+ color: var(--bizz-text-secondary);
1623
+ opacity: 0.6;
1624
+ cursor: not-allowed;
1625
+ transform: none;
1626
+ box-shadow: none;
1627
+ }
1628
+
1629
+ :host([loading]) button {
1630
+ cursor: wait;
1631
+ }
1632
+
1633
+ .hidden {
1634
+ opacity: 0;
1635
+ }
1636
+
1637
+ .spinner {
1638
+ position: absolute;
1639
+ width: 1em;
1640
+ height: 1em;
1641
+ border: 2px solid currentColor;
1642
+ border-top-color: transparent;
1643
+ border-radius: 50%;
1644
+ animation: spin 0.6s linear infinite;
1645
+ }
1646
+
1647
+ @keyframes spin {
1648
+ to {
1649
+ transform: rotate(360deg);
1650
+ }
1651
+ }
1652
+ `;
1653
+
1457
1654
  // projects/bizz-components/src/web/button/bizz-button.ts
1458
1655
  var BizzButtonElement = class extends i3 {
1459
1656
  constructor() {
@@ -1486,59 +1683,7 @@ var BizzButtonElement = class extends i3 {
1486
1683
  `;
1487
1684
  }
1488
1685
  };
1489
- BizzButtonElement.styles = i`
1490
- :host {
1491
- display: inline-flex;
1492
- }
1493
- :host([full-width]) {
1494
- display: flex;
1495
- width: 100%;
1496
- }
1497
- button {
1498
- display: inline-flex;
1499
- align-items: center;
1500
- justify-content: center;
1501
- gap: var(--bizz-spacing-03);
1502
- position: relative;
1503
- flex: 1;
1504
- border: 2px solid transparent;
1505
- border-radius: var(--bizz-radius-md);
1506
- font-family: var(--bizz-font-family-base);
1507
- font-weight: var(--bizz-font-weight-semibold);
1508
- cursor: pointer;
1509
- text-decoration: none;
1510
- white-space: nowrap;
1511
- transition:
1512
- background-color var(--bizz-duration-base) var(--bizz-easing-default),
1513
- border-color var(--bizz-duration-base) var(--bizz-easing-default),
1514
- color var(--bizz-duration-base) var(--bizz-easing-default),
1515
- box-shadow var(--bizz-duration-base) var(--bizz-easing-default),
1516
- transform var(--bizz-duration-fast) var(--bizz-easing-default);
1517
- user-select: none;
1518
- outline: none;
1519
- }
1520
- button:focus-visible { box-shadow: 0 0 0 3px var(--bizz-focus); }
1521
- button:active:not(:disabled) { transform: translateY(1px); }
1522
- :host([size='sm']) button { height: 2rem; padding: 0 var(--bizz-spacing-04); font-size: var(--bizz-font-size-sm); border-radius: var(--bizz-radius-sm); }
1523
- :host([size='md']) button { height: 2.5rem; padding: 0 var(--bizz-spacing-05); font-size: var(--bizz-font-size-md); }
1524
- :host([size='lg']) button { height: 3rem; padding: 0 var(--bizz-spacing-06); font-size: var(--bizz-font-size-lg); border-radius: var(--bizz-radius-lg); }
1525
- :host([variant='primary']) button { background-color: var(--bizz-button-primary); border-color: var(--bizz-button-primary); color: var(--bizz-text-on-color); }
1526
- :host([variant='primary']) button:hover:not(:disabled) { background-color: var(--bizz-button-primary-hover); border-color: var(--bizz-button-primary-hover); box-shadow: var(--bizz-shadow-md); }
1527
- :host([variant='primary']) button:active:not(:disabled) { background-color: var(--bizz-button-primary-active); border-color: var(--bizz-button-primary-active); }
1528
- :host([variant='secondary']) button { background-color: transparent; border-color: var(--bizz-button-secondary); color: var(--bizz-button-secondary); }
1529
- :host([variant='secondary']) button:hover:not(:disabled) { background-color: var(--bizz-background-hover); border-color: var(--bizz-button-secondary-hover); color: var(--bizz-button-secondary-hover); box-shadow: var(--bizz-shadow-sm); }
1530
- :host([variant='secondary']) button:active:not(:disabled) { background-color: var(--bizz-background-active); border-color: var(--bizz-button-secondary-active); color: var(--bizz-button-secondary-active); }
1531
- :host([variant='disabled']) button { background-color: transparent; border-color: transparent; color: var(--bizz-text-secondary); }
1532
- :host([variant='disabled']) button:hover:not(:disabled) { background-color: var(--bizz-background-hover); color: var(--bizz-text-primary); }
1533
- :host([variant='danger']) button { background-color: var(--bizz-button-danger); border-color: var(--bizz-button-danger); color: var(--bizz-text-on-color); }
1534
- :host([variant='danger']) button:hover:not(:disabled) { background-color: var(--bizz-button-danger-hover); border-color: var(--bizz-button-danger-hover); box-shadow: var(--bizz-shadow-md); }
1535
- :host([variant='danger']) button:active:not(:disabled) { background-color: var(--bizz-button-danger-active); border-color: var(--bizz-button-danger-active); }
1536
- button:disabled { background-color: var(--bizz-button-disabled); border-color: var(--bizz-button-disabled); color: var(--bizz-text-on-color-disabled); cursor: not-allowed; transform: none; box-shadow: none; }
1537
- :host([loading]) button { cursor: wait; }
1538
- .hidden { opacity: 0; }
1539
- .spinner { position: absolute; width: 1em; height: 1em; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 0.6s linear infinite; }
1540
- @keyframes spin { to { transform: rotate(360deg); } }
1541
- `;
1686
+ BizzButtonElement.styles = styles;
1542
1687
  BizzButtonElement.properties = {
1543
1688
  variant: { type: String, reflect: true },
1544
1689
  size: { type: String, reflect: true },
@@ -1549,6 +1694,91 @@ BizzButtonElement.properties = {
1549
1694
  };
1550
1695
  customElements.define("bizz-button", BizzButtonElement);
1551
1696
 
1697
+ // projects/bizz-components/src/web/card/bizz-card.styles.ts
1698
+ var styles2 = i`
1699
+ :host {
1700
+ display: block;
1701
+ font-family: var(--bizz-font-family-base);
1702
+ background-color: var(--bizz-layer-02);
1703
+ border: 1px solid var(--bizz-border-subtle-01);
1704
+ border-radius: var(--bizz-radius-lg);
1705
+ overflow: hidden;
1706
+ transition:
1707
+ box-shadow var(--bizz-duration-base) var(--bizz-easing-default),
1708
+ transform var(--bizz-duration-fast) var(--bizz-easing-default),
1709
+ border-color var(--bizz-duration-base) var(--bizz-easing-default);
1710
+ }
1711
+
1712
+ :host([elevation='flat']) {
1713
+ box-shadow: none;
1714
+ }
1715
+
1716
+ :host([elevation='raised']) {
1717
+ box-shadow: var(--bizz-shadow-sm);
1718
+ }
1719
+
1720
+ :host([clickable]) {
1721
+ cursor: pointer;
1722
+ outline: none;
1723
+ }
1724
+
1725
+ :host([clickable]:hover) {
1726
+ border-color: var(--bizz-border-interactive);
1727
+ box-shadow: var(--bizz-shadow-md);
1728
+ transform: translateY(-2px);
1729
+ }
1730
+
1731
+ :host([clickable]:active) {
1732
+ transform: translateY(0);
1733
+ box-shadow: var(--bizz-shadow-sm);
1734
+ }
1735
+
1736
+ :host([clickable]:focus-visible) {
1737
+ box-shadow: 0 0 0 3px var(--bizz-focus);
1738
+ }
1739
+
1740
+ .body {
1741
+ display: flex;
1742
+ flex-direction: column;
1743
+ }
1744
+
1745
+ :host([padding='none']) .body {
1746
+ padding: 0;
1747
+ }
1748
+
1749
+ :host([padding='sm']) .body {
1750
+ padding: var(--bizz-spacing-04);
1751
+ }
1752
+
1753
+ :host([padding='md']) .body {
1754
+ padding: var(--bizz-spacing-06);
1755
+ }
1756
+
1757
+ :host([padding='lg']) .body {
1758
+ padding: var(--bizz-spacing-08);
1759
+ }
1760
+
1761
+ ::slotted([slot='card-media']) {
1762
+ display: block;
1763
+ width: 100%;
1764
+ aspect-ratio: 16/9;
1765
+ object-fit: cover;
1766
+ overflow: hidden;
1767
+ }
1768
+
1769
+ ::slotted([slot='card-header']) {
1770
+ display: block;
1771
+ margin-bottom: var(--bizz-spacing-04);
1772
+ }
1773
+
1774
+ ::slotted([slot='card-footer']) {
1775
+ display: block;
1776
+ margin-top: var(--bizz-spacing-05);
1777
+ padding-top: var(--bizz-spacing-04);
1778
+ border-top: 1px solid var(--bizz-border-subtle-00);
1779
+ }
1780
+ `;
1781
+
1552
1782
  // projects/bizz-components/src/web/card/bizz-card.ts
1553
1783
  var BizzCardElement = class extends i3 {
1554
1784
  constructor() {
@@ -1579,34 +1809,7 @@ var BizzCardElement = class extends i3 {
1579
1809
  `;
1580
1810
  }
1581
1811
  };
1582
- BizzCardElement.styles = i`
1583
- :host {
1584
- display: block;
1585
- font-family: var(--bizz-font-family-base);
1586
- background-color: var(--bizz-layer-02);
1587
- border: 1px solid var(--bizz-border-subtle-01);
1588
- border-radius: var(--bizz-radius-lg);
1589
- overflow: hidden;
1590
- transition:
1591
- box-shadow var(--bizz-duration-base) var(--bizz-easing-default),
1592
- transform var(--bizz-duration-fast) var(--bizz-easing-default),
1593
- border-color var(--bizz-duration-base) var(--bizz-easing-default);
1594
- }
1595
- :host([elevation='flat']) { box-shadow: none; }
1596
- :host([elevation='raised']) { box-shadow: var(--bizz-shadow-sm); }
1597
- :host([clickable]) { cursor: pointer; outline: none; }
1598
- :host([clickable]:hover) { border-color: var(--bizz-border-interactive); box-shadow: var(--bizz-shadow-md); transform: translateY(-2px); }
1599
- :host([clickable]:active) { transform: translateY(0); box-shadow: var(--bizz-shadow-sm); }
1600
- :host([clickable]:focus-visible) { box-shadow: 0 0 0 3px var(--bizz-focus); }
1601
- .body { display: flex; flex-direction: column; }
1602
- :host([padding='none']) .body { padding: 0; }
1603
- :host([padding='sm']) .body { padding: var(--bizz-spacing-04); }
1604
- :host([padding='md']) .body { padding: var(--bizz-spacing-06); }
1605
- :host([padding='lg']) .body { padding: var(--bizz-spacing-08); }
1606
- ::slotted([slot='card-media']) { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; overflow: hidden; }
1607
- ::slotted([slot='card-header']) { display: block; margin-bottom: var(--bizz-spacing-04); }
1608
- ::slotted([slot='card-footer']) { display: block; margin-top: var(--bizz-spacing-05); padding-top: var(--bizz-spacing-04); border-top: 1px solid var(--bizz-border-subtle-00); }
1609
- `;
1812
+ BizzCardElement.styles = styles2;
1610
1813
  BizzCardElement.properties = {
1611
1814
  elevation: { type: String, reflect: true },
1612
1815
  padding: { type: String, reflect: true },
@@ -1614,6 +1817,95 @@ BizzCardElement.properties = {
1614
1817
  };
1615
1818
  customElements.define("bizz-card", BizzCardElement);
1616
1819
 
1820
+ // projects/bizz-components/src/web/tag/bizz-tag.styles.ts
1821
+ var styles3 = i`
1822
+ :host {
1823
+ display: inline-flex;
1824
+ align-items: center;
1825
+ gap: var(--bizz-spacing-02);
1826
+ border-radius: var(--bizz-radius-full);
1827
+ font-family: var(--bizz-font-family-base);
1828
+ font-weight: var(--bizz-font-weight-medium);
1829
+ white-space: nowrap;
1830
+ width: fit-content;
1831
+ }
1832
+
1833
+ :host([size='sm']) {
1834
+ height: 1.25rem;
1835
+ padding: 0 var(--bizz-spacing-03);
1836
+ font-size: var(--bizz-font-size-xs);
1837
+ }
1838
+
1839
+ :host([size='md']) {
1840
+ height: 1.5rem;
1841
+ padding: 0 var(--bizz-spacing-03);
1842
+ font-size: var(--bizz-font-size-sm);
1843
+ }
1844
+
1845
+ :host([color='primary']) {
1846
+ background-color: var(--bizz-tag-primary-bg);
1847
+ color: var(--bizz-tag-primary-text);
1848
+ }
1849
+
1850
+ :host([color='secondary']) {
1851
+ background-color: var(--bizz-tag-secondary-bg);
1852
+ color: var(--bizz-tag-secondary-text);
1853
+ }
1854
+
1855
+ :host([color='success']) {
1856
+ background-color: var(--bizz-tag-success-bg);
1857
+ color: var(--bizz-tag-success-text);
1858
+ }
1859
+
1860
+ :host([color='warning']) {
1861
+ background-color: var(--bizz-tag-warning-bg);
1862
+ color: var(--bizz-tag-warning-text);
1863
+ }
1864
+
1865
+ :host([color='error']) {
1866
+ background-color: var(--bizz-tag-error-bg);
1867
+ color: var(--bizz-tag-error-text);
1868
+ }
1869
+
1870
+ :host([color='primary']:hover) {
1871
+ background-color: var(--bizz-tag-primary-hover);
1872
+ }
1873
+
1874
+ :host([color='secondary']:hover) {
1875
+ background-color: var(--bizz-tag-secondary-hover);
1876
+ }
1877
+
1878
+ :host([color='success']:hover) {
1879
+ background-color: var(--bizz-tag-success-hover);
1880
+ }
1881
+
1882
+ :host([color='warning']:hover) {
1883
+ background-color: var(--bizz-tag-warning-hover);
1884
+ }
1885
+
1886
+ :host([color='error']:hover) {
1887
+ background-color: var(--bizz-tag-error-hover);
1888
+ }
1889
+
1890
+ button {
1891
+ display: inline-flex;
1892
+ align-items: center;
1893
+ justify-content: center;
1894
+ background: none;
1895
+ border: none;
1896
+ padding: 0;
1897
+ cursor: pointer;
1898
+ color: inherit;
1899
+ opacity: 0.7;
1900
+ transition: opacity var(--bizz-duration-fast) var(--bizz-easing-default);
1901
+ line-height: 1;
1902
+ }
1903
+
1904
+ button:hover {
1905
+ opacity: 1;
1906
+ }
1907
+ `;
1908
+
1617
1909
  // projects/bizz-components/src/web/tag/bizz-tag.ts
1618
1910
  var BizzTagElement = class extends i3 {
1619
1911
  constructor() {
@@ -1639,32 +1931,7 @@ var BizzTagElement = class extends i3 {
1639
1931
  `;
1640
1932
  }
1641
1933
  };
1642
- BizzTagElement.styles = i`
1643
- :host {
1644
- display: inline-flex;
1645
- align-items: center;
1646
- gap: var(--bizz-spacing-02);
1647
- border-radius: var(--bizz-radius-full);
1648
- font-family: var(--bizz-font-family-base);
1649
- font-weight: var(--bizz-font-weight-medium);
1650
- white-space: nowrap;
1651
- width: fit-content;
1652
- }
1653
- :host([size='sm']) { height: 1.25rem; padding: 0 var(--bizz-spacing-03); font-size: var(--bizz-font-size-xs); }
1654
- :host([size='md']) { height: 1.5rem; padding: 0 var(--bizz-spacing-03); font-size: var(--bizz-font-size-sm); }
1655
- :host([color='primary']) { background-color: var(--bizz-tag-primary-bg); color: var(--bizz-tag-primary-text); }
1656
- :host([color='secondary']) { background-color: var(--bizz-tag-secondary-bg); color: var(--bizz-tag-secondary-text); }
1657
- :host([color='success']) { background-color: var(--bizz-tag-success-bg); color: var(--bizz-tag-success-text); }
1658
- :host([color='warning']) { background-color: var(--bizz-tag-warning-bg); color: var(--bizz-tag-warning-text); }
1659
- :host([color='error']) { background-color: var(--bizz-tag-error-bg); color: var(--bizz-tag-error-text); }
1660
- :host([color='primary']:hover) { background-color: var(--bizz-tag-primary-hover); }
1661
- :host([color='secondary']:hover) { background-color: var(--bizz-tag-secondary-hover); }
1662
- :host([color='success']:hover) { background-color: var(--bizz-tag-success-hover); }
1663
- :host([color='warning']:hover) { background-color: var(--bizz-tag-warning-hover); }
1664
- :host([color='error']:hover) { background-color: var(--bizz-tag-error-hover); }
1665
- button { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; padding: 0; cursor: pointer; color: inherit; opacity: 0.7; transition: opacity var(--bizz-duration-fast) var(--bizz-easing-default); line-height: 1; }
1666
- button:hover { opacity: 1; }
1667
- `;
1934
+ BizzTagElement.styles = styles3;
1668
1935
  BizzTagElement.properties = {
1669
1936
  color: { type: String, reflect: true },
1670
1937
  size: { type: String, reflect: true },
@@ -1672,6 +1939,88 @@ BizzTagElement.properties = {
1672
1939
  };
1673
1940
  customElements.define("bizz-tag", BizzTagElement);
1674
1941
 
1942
+ // projects/bizz-components/src/web/input/bizz-input.styles.ts
1943
+ var styles4 = i`
1944
+ :host {
1945
+ display: flex;
1946
+ flex-direction: column;
1947
+ gap: var(--bizz-spacing-02);
1948
+ font-family: var(--bizz-font-family-base);
1949
+ }
1950
+
1951
+ label {
1952
+ font-size: var(--bizz-font-size-sm);
1953
+ font-weight: var(--bizz-font-weight-semibold);
1954
+ color: var(--bizz-text-primary);
1955
+ line-height: var(--bizz-line-height-normal);
1956
+ }
1957
+
1958
+ .field-wrapper {
1959
+ display: flex;
1960
+ align-items: center;
1961
+ gap: var(--bizz-spacing-03);
1962
+ border: 1px solid var(--bizz-border-strong-01);
1963
+ border-radius: var(--bizz-radius-md);
1964
+ padding: 0 var(--bizz-spacing-04);
1965
+ height: 2.5rem;
1966
+ transition:
1967
+ border-color var(--bizz-duration-base) var(--bizz-easing-default),
1968
+ box-shadow var(--bizz-duration-base) var(--bizz-easing-default);
1969
+ }
1970
+
1971
+ .field-wrapper:focus-within {
1972
+ border-color: var(--bizz-focus);
1973
+ box-shadow: 0 0 0 2px var(--bizz-focus);
1974
+ outline: none;
1975
+ }
1976
+
1977
+ .field-wrapper.error {
1978
+ border-color: var(--bizz-support-error);
1979
+ }
1980
+
1981
+ .field-wrapper.error:focus-within {
1982
+ box-shadow: 0 0 0 2px var(--bizz-support-error);
1983
+ }
1984
+
1985
+ .field-wrapper.disabled {
1986
+ opacity: 0.5;
1987
+ cursor: not-allowed;
1988
+ background-color: var(--bizz-field-hover-01);
1989
+ }
1990
+
1991
+ input {
1992
+ flex: 1;
1993
+ border: none;
1994
+ outline: none;
1995
+ background: transparent;
1996
+ font-family: var(--bizz-font-family-base);
1997
+ font-size: var(--bizz-font-size-md);
1998
+ color: var(--bizz-text-primary);
1999
+ line-height: var(--bizz-line-height-normal);
2000
+ min-width: 0;
2001
+ }
2002
+
2003
+ input::placeholder {
2004
+ color: var(--bizz-text-placeholder);
2005
+ }
2006
+
2007
+ input:disabled {
2008
+ cursor: not-allowed;
2009
+ }
2010
+
2011
+ .helper {
2012
+ font-size: var(--bizz-font-size-xs);
2013
+ color: var(--bizz-text-helper);
2014
+ line-height: var(--bizz-line-height-normal);
2015
+ }
2016
+
2017
+ .error-msg {
2018
+ font-size: var(--bizz-font-size-xs);
2019
+ color: var(--bizz-support-error);
2020
+ line-height: var(--bizz-line-height-normal);
2021
+ }
2022
+ `;
2023
+
1675
2024
  // projects/bizz-components/src/web/input/bizz-input.ts
1676
2025
  var BizzInputElement = class extends i3 {
1677
2026
  constructor() {
@@ -1719,20 +2068,7 @@ var BizzInputElement = class extends i3 {
1719
2068
  `;
1720
2069
  }
1721
2070
  };
1722
- BizzInputElement.styles = i`
1723
- :host { display: flex; flex-direction: column; gap: var(--bizz-spacing-02); font-family: var(--bizz-font-family-base); }
1724
- label { font-size: var(--bizz-font-size-sm); font-weight: var(--bizz-font-weight-semibold); color: var(--bizz-text-primary); line-height: var(--bizz-line-height-normal); }
1725
- .field-wrapper { display: flex; align-items: center; gap: var(--bizz-spacing-03); border: 1px solid var(--bizz-border-strong-01); border-radius: var(--bizz-radius-md); padding: 0 var(--bizz-spacing-04); height: 2.5rem; transition: border-color var(--bizz-duration-base) var(--bizz-easing-default), box-shadow var(--bizz-duration-base) var(--bizz-easing-default); }
1726
- .field-wrapper:focus-within { border-color: var(--bizz-focus); box-shadow: 0 0 0 2px var(--bizz-focus); outline: none; }
1727
- .field-wrapper.error { border-color: var(--bizz-support-error); }
1728
- .field-wrapper.error:focus-within { box-shadow: 0 0 0 2px var(--bizz-support-error); }
1729
- .field-wrapper.disabled { opacity: 0.5; cursor: not-allowed; background-color: var(--bizz-field-hover-01); }
1730
- input { flex: 1; border: none; outline: none; background: transparent; font-family: var(--bizz-font-family-base); font-size: var(--bizz-font-size-md); color: var(--bizz-text-primary); line-height: var(--bizz-line-height-normal); min-width: 0; }
1731
- input::placeholder { color: var(--bizz-text-placeholder); }
1732
- input:disabled { cursor: not-allowed; }
1733
- .helper { font-size: var(--bizz-font-size-xs); color: var(--bizz-text-helper); line-height: var(--bizz-line-height-normal); }
1734
- .error-msg { font-size: var(--bizz-font-size-xs); color: var(--bizz-support-error); line-height: var(--bizz-line-height-normal); }
1735
- `;
2071
+ BizzInputElement.styles = styles4;
1736
2072
  BizzInputElement.properties = {
1737
2073
  label: { type: String },
1738
2074
  placeholder: { type: String },
@@ -1746,6 +2082,87 @@ BizzInputElement.properties = {
1746
2082
  };
1747
2083
  customElements.define("bizz-input", BizzInputElement);
1748
2084
 
2085
+ // projects/bizz-components/src/web/textarea/bizz-textarea.styles.ts
2086
+ var styles5 = i`
2087
+ :host {
2088
+ display: flex;
2089
+ flex-direction: column;
2090
+ gap: var(--bizz-spacing-02);
2091
+ font-family: var(--bizz-font-family-base);
2092
+ }
2093
+
2094
+ label {
2095
+ font-size: var(--bizz-font-size-sm);
2096
+ font-weight: var(--bizz-font-weight-semibold);
2097
+ color: var(--bizz-text-primary);
2098
+ line-height: var(--bizz-line-height-normal);
2099
+ }
2100
+
2101
+ .field-wrapper {
2102
+ border: 1px solid var(--bizz-border-strong-01);
2103
+ border-radius: var(--bizz-radius-md);
2104
+ padding: var(--bizz-spacing-03) var(--bizz-spacing-04);
2105
+ transition:
2106
+ border-color var(--bizz-duration-base) var(--bizz-easing-default),
2107
+ box-shadow var(--bizz-duration-base) var(--bizz-easing-default);
2108
+ }
2109
+
2110
+ .field-wrapper:focus-within {
2111
+ border-color: var(--bizz-focus);
2112
+ box-shadow: 0 0 0 2px var(--bizz-focus);
2113
+ outline: none;
2114
+ }
2115
+
2116
+ .field-wrapper.error {
2117
+ border-color: var(--bizz-support-error);
2118
+ }
2119
+
2120
+ .field-wrapper.error:focus-within {
2121
+ box-shadow: 0 0 0 2px var(--bizz-support-error);
2122
+ }
2123
+
2124
+ .field-wrapper.disabled {
2125
+ opacity: 0.5;
2126
+ cursor: not-allowed;
2127
+ background-color: var(--bizz-field-hover-01);
2128
+ }
2129
+
2130
+ textarea {
2131
+ width: 100%;
2132
+ border: none;
2133
+ outline: none;
2134
+ background: transparent;
2135
+ font-family: var(--bizz-font-family-base);
2136
+ font-size: var(--bizz-font-size-md);
2137
+ color: var(--bizz-text-primary);
2138
+ line-height: var(--bizz-line-height-relaxed);
2139
+ resize: vertical;
2140
+ box-sizing: border-box;
2141
+ display: block;
2142
+ }
2143
+
2144
+ textarea::placeholder {
2145
+ color: var(--bizz-text-placeholder);
2146
+ }
2147
+
2148
+ textarea:disabled {
2149
+ cursor: not-allowed;
2150
+ resize: none;
2151
+ }
2152
+
2153
+ .helper {
2154
+ font-size: var(--bizz-font-size-xs);
2155
+ color: var(--bizz-text-helper);
2156
+ line-height: var(--bizz-line-height-normal);
2157
+ }
2158
+
2159
+ .error-msg {
2160
+ font-size: var(--bizz-font-size-xs);
2161
+ color: var(--bizz-support-error);
2162
+ line-height: var(--bizz-line-height-normal);
2163
+ }
2164
+ `;
2165
+
1749
2166
  // projects/bizz-components/src/web/textarea/bizz-textarea.ts
1750
2167
  var BizzTextareaElement = class extends i3 {
1751
2168
  constructor() {
@@ -1796,20 +2213,7 @@ var BizzTextareaElement = class extends i3 {
1796
2213
  `;
1797
2214
  }
1798
2215
  };
1799
- BizzTextareaElement.styles = i`
1800
- :host { display: flex; flex-direction: column; gap: var(--bizz-spacing-02); font-family: var(--bizz-font-family-base); }
1801
- label { font-size: var(--bizz-font-size-sm); font-weight: var(--bizz-font-weight-semibold); color: var(--bizz-text-primary); line-height: var(--bizz-line-height-normal); }
1802
- .field-wrapper { border: 1px solid var(--bizz-border-strong-01); border-radius: var(--bizz-radius-md); padding: var(--bizz-spacing-03) var(--bizz-spacing-04); transition: border-color var(--bizz-duration-base) var(--bizz-easing-default), box-shadow var(--bizz-duration-base) var(--bizz-easing-default); }
1803
- .field-wrapper:focus-within { border-color: var(--bizz-focus); box-shadow: 0 0 0 2px var(--bizz-focus); outline: none; }
1804
- .field-wrapper.error { border-color: var(--bizz-support-error); }
1805
- .field-wrapper.error:focus-within { box-shadow: 0 0 0 2px var(--bizz-support-error); }
1806
- .field-wrapper.disabled { opacity: 0.5; cursor: not-allowed; background-color: var(--bizz-field-hover-01); }
1807
- textarea { width: 100%; border: none; outline: none; background: transparent; font-family: var(--bizz-font-family-base); font-size: var(--bizz-font-size-md); color: var(--bizz-text-primary); line-height: var(--bizz-line-height-relaxed); resize: vertical; box-sizing: border-box; display: block; }
1808
- textarea::placeholder { color: var(--bizz-text-placeholder); }
1809
- textarea:disabled { cursor: not-allowed; resize: none; }
1810
- .helper { font-size: var(--bizz-font-size-xs); color: var(--bizz-text-helper); line-height: var(--bizz-line-height-normal); }
1811
- .error-msg { font-size: var(--bizz-font-size-xs); color: var(--bizz-support-error); line-height: var(--bizz-line-height-normal); }
1812
- `;
2216
+ BizzTextareaElement.styles = styles5;
1813
2217
  BizzTextareaElement.properties = {
1814
2218
  label: { type: String },
1815
2219
  placeholder: { type: String },