@momentum-design/components 0.106.1 → 0.106.2

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 (7) hide show
  1. package/dist/browser/index.js +49 -30
  2. package/dist/browser/index.js.map +2 -2
  3. package/dist/components/buttongroup/buttongroup.styles.js +49 -30
  4. package/dist/custom-elements.json +1565 -1565
  5. package/dist/react/index.d.ts +4 -4
  6. package/dist/react/index.js +4 -4
  7. package/package.json +1 -1
package/dist/browser/index.js CHANGED
@@ -1492,65 +1492,84 @@
1492
1492
  --mdc-buttongroup-border-radius: 1.25rem;
1493
1493
  --mdc-buttongroup-border-color: var(--mds-color-theme-outline-button-normal);
1494
1494
  --mdc-buttongroup-divider-color: var(--mds-color-theme-outline-secondary-normal);
1495
+ --mdc-buttongroup-border-width: 1px;
1495
1496
  }
1496
1497
 
1497
1498
  :host::part(container) {
1498
1499
  display: flex;
1499
1500
  border-radius: var(--mdc-buttongroup-border-radius);
1500
- border: 1px solid var(--mdc-buttongroup-border-color);
1501
1501
  }
1502
1502
 
1503
1503
  :host([variant='primary'])::part(container) {
1504
+ gap: 1px;
1504
1505
  border: none;
1505
1506
  background-color: var(--mds-color-theme-outline-primary-normal);
1506
- gap: 1px;
1507
1507
  }
1508
1508
 
1509
1509
  ::slotted(mdc-button) {
1510
1510
  width: inherit;
1511
1511
  border-radius: 0;
1512
1512
  border: none;
1513
- box-sizing: content-box;
1513
+ box-sizing: border-box;
1514
+ position: relative;
1514
1515
  }
1515
-
1516
- :host([orientation='vertical'])::part(container) {
1517
- flex-direction: column;
1516
+ :host([orientation='horizontal'][variant='secondary']) ::slotted(mdc-button) {
1517
+ border-block-start: var(--mdc-buttongroup-border-width) solid var(--mdc-buttongroup-border-color);
1518
+ border-block-end: var(--mdc-buttongroup-border-width) solid var(--mdc-buttongroup-border-color);
1519
+ }
1520
+ :host([orientation='horizontal'][variant='secondary']) ::slotted(mdc-button:first-of-type) {
1521
+ border-inline-start: var(--mdc-buttongroup-border-width) solid var(--mdc-buttongroup-border-color);
1522
+ }
1523
+ :host([orientation='horizontal'][variant='secondary']) ::slotted(mdc-button:last-of-type) {
1524
+ border-inline-end: var(--mdc-buttongroup-border-width) solid var(--mdc-buttongroup-border-color);
1518
1525
  }
1519
1526
 
1520
- :host([orientation='horizontal'][variant='secondary']:dir(ltr)) ::slotted(mdc-button:not(:last-child)) {
1521
- border-right: 1px solid var(--mdc-buttongroup-divider-color);
1527
+ :host([orientation='vertical'][variant='secondary']) ::slotted(mdc-button) {
1528
+ border-inline-start: var(--mdc-buttongroup-border-width) solid var(--mdc-buttongroup-border-color);
1529
+ border-inline-end: var(--mdc-buttongroup-border-width) solid var(--mdc-buttongroup-border-color);
1522
1530
  }
1523
- :host([orientation='horizontal'][variant='secondary']:dir(rtl)) ::slotted(mdc-button:not(:last-child)) {
1524
- border-left: 1px solid var(--mdc-buttongroup-divider-color);
1531
+ :host([orientation='vertical'][variant='secondary']) ::slotted(mdc-button:first-of-type) {
1532
+ border-block-start: var(--mdc-buttongroup-border-width) solid var(--mdc-buttongroup-border-color);
1525
1533
  }
1526
- :host([orientation='vertical'][variant='secondary']) ::slotted(mdc-button:not(:last-child)) {
1527
- border-bottom: 1px solid var(--mdc-buttongroup-divider-color);
1534
+ :host([orientation='vertical'][variant='secondary']) ::slotted(mdc-button:last-of-type) {
1535
+ border-block-end: var(--mdc-buttongroup-border-width) solid var(--mdc-buttongroup-border-color);
1528
1536
  }
1529
1537
 
1530
- :host([orientation='vertical']) ::slotted(mdc-button:first-child) {
1531
- border-top-left-radius: var(--mdc-buttongroup-border-radius);
1532
- border-top-right-radius: var(--mdc-buttongroup-border-radius);
1538
+ :host([orientation='vertical'])::part(container) {
1539
+ flex-direction: column;
1533
1540
  }
1534
- :host([orientation='vertical']) ::slotted(mdc-button:last-child) {
1535
- border-bottom-left-radius: var(--mdc-buttongroup-border-radius);
1536
- border-bottom-right-radius: var(--mdc-buttongroup-border-radius);
1541
+
1542
+ :host([variant='secondary'][orientation='horizontal']) ::slotted(mdc-button:not(:last-of-type))::after {
1543
+ content: '';
1544
+ position: absolute;
1545
+ height: 100%;
1546
+ border-inline-end: var(--mdc-buttongroup-border-width) solid var(--mdc-buttongroup-divider-color);
1547
+ inset-inline-end: calc(var(--mdc-buttongroup-border-width) / 2);
1548
+ }
1549
+ :host([variant='secondary'][orientation='vertical']) ::slotted(mdc-button:not(:last-of-type))::after {
1550
+ content: '';
1551
+ position: absolute;
1552
+ width: 100%;
1553
+ border-block-end: var(--mdc-buttongroup-border-width) solid var(--mdc-buttongroup-divider-color);
1554
+ inset-block-end: calc(var(--mdc-buttongroup-border-width) / 2);
1537
1555
  }
1538
1556
 
1539
- :host([orientation='horizontal']:dir(ltr)) ::slotted(mdc-button:first-child) {
1540
- border-top-left-radius: var(--mdc-buttongroup-border-radius);
1541
- border-bottom-left-radius: var(--mdc-buttongroup-border-radius);
1557
+ :host([orientation='vertical']) ::slotted(mdc-button:first-of-type) {
1558
+ border-start-start-radius: var(--mdc-buttongroup-border-radius);
1559
+ border-start-end-radius: var(--mdc-buttongroup-border-radius);
1542
1560
  }
1543
- :host([orientation='horizontal']:dir(rtl)) ::slotted(mdc-button:first-child) {
1544
- border-top-right-radius: var(--mdc-buttongroup-border-radius);
1545
- border-bottom-right-radius: var(--mdc-buttongroup-border-radius);
1561
+ :host([orientation='vertical']) ::slotted(mdc-button:last-of-type) {
1562
+ border-end-start-radius: var(--mdc-buttongroup-border-radius);
1563
+ border-end-end-radius: var(--mdc-buttongroup-border-radius);
1546
1564
  }
1547
- :host([orientation='horizontal']:dir(ltr)) ::slotted(mdc-button:last-child) {
1548
- border-top-right-radius: var(--mdc-buttongroup-border-radius);
1549
- border-bottom-right-radius: var(--mdc-buttongroup-border-radius);
1565
+
1566
+ :host([orientation='horizontal']) ::slotted(mdc-button:first-of-type) {
1567
+ border-start-start-radius: var(--mdc-buttongroup-border-radius);
1568
+ border-end-start-radius: var(--mdc-buttongroup-border-radius);
1550
1569
  }
1551
- :host([orientation='horizontal']:dir(rtl)) ::slotted(mdc-button:last-child) {
1552
- border-top-left-radius: var(--mdc-buttongroup-border-radius);
1553
- border-bottom-left-radius: var(--mdc-buttongroup-border-radius);
1570
+ :host([orientation='horizontal']) ::slotted(mdc-button:last-of-type) {
1571
+ border-start-end-radius: var(--mdc-buttongroup-border-radius);
1572
+ border-end-end-radius: var(--mdc-buttongroup-border-radius);
1554
1573
  }
1555
1574
 
1556
1575
  :host([compact][orientation='horizontal']) ::slotted(mdc-button) {