js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

add min size and round track width; fixes #1206

Browse Source
This commit is contained in:
Cory LaViska
2025-11-18 14:41:19 -05:00
parent e2f2a8a0d3
commit 7be226e5c0
2 changed files with 24 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/webawesome/docs/docs/resources/changelog.md
View File

@@ -17,6 +17,7 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
- Fixed a bug in `<wa-slider>` that caused some touch devices to end up with the incorrect value [issue:1703]
- Fixed a bug in `<wa-card>` that prevented some slots from being detected correctly [discuss:1450]
- Fixed a bug in `<wa-dropdown>` that caused the browser to hang when cancelling the `wa-hide` event [issue:1483]
- Fixed a bug in `<wa-tab-group>` that ensures the active indicator always shows [issue:1206]
- Improved performance of `<wa-icon>` so initial rendering occurs faster, especially with multiple icons on the page [issue:1729]
## 3.0.0

43
packages/webawesome/src/components/tab-group/tab-group.css
View File

@@ -3,6 +3,9 @@
--track-color: var(--wa-color-neutral-fill-normal);
--track-width: 0.125rem;
/* Private */
--safe-track-width: max(0.5px, round(var(--track-width), 0.5px));
display: block;
}
@@ -77,12 +80,12 @@
flex: 1 1 auto;
position: relative;
flex-direction: row;
border-bottom: solid var(--track-width) var(--track-color);
border-bottom: solid var(--safe-track-width) var(--track-color);
}
.tab-group-top .indicator {
bottom: calc(-1 * var(--track-width));
border-bottom: solid var(--track-width) var(--indicator-color);
bottom: calc(-1 * var(--safe-track-width));
border-bottom: solid var(--safe-track-width) var(--indicator-color);
}
.tab-group-top .body {
@@ -90,8 +93,8 @@
}
.tab-group-top ::slotted(wa-tab[active]) {
border-block-end: solid var(--track-width) var(--indicator-color);
margin-block-end: calc(-1 * var(--track-width));
border-block-end: solid var(--safe-track-width) var(--indicator-color);
margin-block-end: calc(-1 * var(--safe-track-width));
}
.tab-group-top ::slotted(wa-tab-panel) {
@@ -128,12 +131,12 @@
flex: 1 1 auto;
position: relative;
flex-direction: row;
border-top: solid var(--track-width) var(--track-color);
border-top: solid var(--safe-track-width) var(--track-color);
}
.tab-group-bottom .indicator {
top: calc(-1 * var(--track-width));
border-top: solid var(--track-width) var(--indicator-color);
top: calc(-1 * var(--safe-track-width));
border-top: solid var(--safe-track-width) var(--indicator-color);
}
.tab-group-bottom .body {
@@ -141,8 +144,8 @@
}
.tab-group-bottom ::slotted(wa-tab[active]) {
border-block-start: solid var(--track-width) var(--indicator-color);
margin-block-start: calc(-1 * var(--track-width));
border-block-start: solid var(--safe-track-width) var(--indicator-color);
margin-block-start: calc(-1 * var(--safe-track-width));
}
.tab-group-bottom ::slotted(wa-tab-panel) {
@@ -164,12 +167,12 @@
.tab-group-start .tabs {
flex: 0 0 auto;
flex-direction: column;
border-inline-end: solid var(--track-width) var(--track-color);
border-inline-end: solid var(--safe-track-width) var(--track-color);
}
.tab-group-start .indicator {
inset-inline-end: calc(-1 * var(--track-width));
border-right: solid var(--track-width) var(--indicator-color);
inset-inline-end: calc(-1 * var(--safe-track-width));
border-right: solid var(--safe-track-width) var(--indicator-color);
}
.tab-group-start .body {
@@ -178,8 +181,8 @@
}
.tab-group-start ::slotted(wa-tab[active]) {
border-inline-end: solid var(--track-width) var(--indicator-color);
margin-inline-end: calc(-1 * var(--track-width));
border-inline-end: solid var(--safe-track-width) var(--indicator-color);
margin-inline-end: calc(-1 * var(--safe-track-width));
}
.tab-group-start ::slotted(wa-tab-panel) {
@@ -201,12 +204,12 @@
.tab-group-end .tabs {
flex: 0 0 auto;
flex-direction: column;
border-left: solid var(--track-width) var(--track-color);
border-left: solid var(--safe-track-width) var(--track-color);
}
.tab-group-end .indicator {
inset-inline-start: calc(-1 * var(--track-width));
border-inline-start: solid var(--track-width) var(--indicator-color);
inset-inline-start: calc(-1 * var(--safe-track-width));
border-inline-start: solid var(--safe-track-width) var(--indicator-color);
}
.tab-group-end .body {
@@ -215,8 +218,8 @@
}
.tab-group-end ::slotted(wa-tab[active]) {
border-inline-start: solid var(--track-width) var(--indicator-color);
margin-inline-start: calc(-1 * var(--track-width));
border-inline-start: solid var(--safe-track-width) var(--indicator-color);
margin-inline-start: calc(-1 * var(--safe-track-width));
}
.tab-group-end ::slotted(wa-tab-panel) {