@jsekulowicz/ds-components 0.3.0 → 0.4.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.
- package/custom-elements.json +79 -25
- package/dist/atoms/breadcrumb/breadcrumb-item.styles.d.ts.map +1 -1
- package/dist/atoms/breadcrumb/breadcrumb-item.styles.js +0 -1
- package/dist/atoms/breadcrumb/breadcrumb-item.styles.js.map +1 -1
- package/dist/atoms/button/button.d.ts +2 -0
- package/dist/atoms/button/button.d.ts.map +1 -1
- package/dist/atoms/button/button.js +5 -0
- package/dist/atoms/button/button.js.map +1 -1
- package/dist/atoms/button/button.styles.d.ts.map +1 -1
- package/dist/atoms/button/button.styles.js +13 -5
- package/dist/atoms/button/button.styles.js.map +1 -1
- package/dist/atoms/link/link.styles.d.ts.map +1 -1
- package/dist/atoms/link/link.styles.js +0 -1
- package/dist/atoms/link/link.styles.js.map +1 -1
- package/dist/atoms/menu/menu-item.styles.d.ts.map +1 -1
- package/dist/atoms/menu/menu-item.styles.js +0 -1
- package/dist/atoms/menu/menu-item.styles.js.map +1 -1
- package/dist/atoms/menu/menu.styles.d.ts.map +1 -1
- package/dist/atoms/menu/menu.styles.js +0 -4
- package/dist/atoms/menu/menu.styles.js.map +1 -1
- package/dist/atoms/nav-item/nav-group.styles.d.ts.map +1 -1
- package/dist/atoms/nav-item/nav-group.styles.js +0 -1
- package/dist/atoms/nav-item/nav-group.styles.js.map +1 -1
- package/dist/atoms/nav-item/nav-item.styles.d.ts.map +1 -1
- package/dist/atoms/nav-item/nav-item.styles.js +0 -1
- package/dist/atoms/nav-item/nav-item.styles.js.map +1 -1
- package/dist/atoms/searchable-select/searchable-select.d.ts.map +1 -1
- package/dist/atoms/searchable-select/searchable-select.js +7 -1
- package/dist/atoms/searchable-select/searchable-select.js.map +1 -1
- package/dist/atoms/searchable-select/searchable-select.styles.d.ts.map +1 -1
- package/dist/atoms/searchable-select/searchable-select.styles.js +0 -158
- package/dist/atoms/searchable-select/searchable-select.styles.js.map +1 -1
- package/dist/atoms/select/select.common-styles.d.ts +2 -0
- package/dist/atoms/select/select.common-styles.d.ts.map +1 -0
- package/dist/atoms/select/select.common-styles.js +150 -0
- package/dist/atoms/select/select.common-styles.js.map +1 -0
- package/dist/atoms/select/select.d.ts.map +1 -1
- package/dist/atoms/select/select.js +2 -1
- package/dist/atoms/select/select.js.map +1 -1
- package/dist/atoms/select/select.styles.d.ts.map +1 -1
- package/dist/atoms/select/select.styles.js +0 -159
- package/dist/atoms/select/select.styles.js.map +1 -1
- package/dist/atoms/tabs/tab-panel.styles.d.ts.map +1 -1
- package/dist/atoms/tabs/tab-panel.styles.js +0 -4
- package/dist/atoms/tabs/tab-panel.styles.js.map +1 -1
- package/dist/atoms/tabs/tab.styles.d.ts.map +1 -1
- package/dist/atoms/tabs/tab.styles.js +0 -1
- package/dist/atoms/tabs/tab.styles.js.map +1 -1
- package/dist/molecules/alert/alert.styles.d.ts.map +1 -1
- package/dist/molecules/alert/alert.styles.js +0 -1
- package/dist/molecules/alert/alert.styles.js.map +1 -1
- package/dist/molecules/bar-chart/bar-chart.styles.d.ts.map +1 -1
- package/dist/molecules/bar-chart/bar-chart.styles.js +0 -1
- package/dist/molecules/bar-chart/bar-chart.styles.js.map +1 -1
- package/dist/molecules/card/card.styles.d.ts.map +1 -1
- package/dist/molecules/card/card.styles.js +12 -1
- package/dist/molecules/card/card.styles.js.map +1 -1
- package/dist/molecules/color-picker/color-picker-swatch.styles.d.ts.map +1 -1
- package/dist/molecules/color-picker/color-picker-swatch.styles.js +0 -1
- package/dist/molecules/color-picker/color-picker-swatch.styles.js.map +1 -1
- package/dist/molecules/color-picker/color-picker.styles.d.ts.map +1 -1
- package/dist/molecules/color-picker/color-picker.styles.js +4 -2
- package/dist/molecules/color-picker/color-picker.styles.js.map +1 -1
- package/dist/molecules/color-picker/input-color.styles.d.ts.map +1 -1
- package/dist/molecules/color-picker/input-color.styles.js +4 -3
- package/dist/molecules/color-picker/input-color.styles.js.map +1 -1
- package/dist/molecules/toast/toast.styles.d.ts.map +1 -1
- package/dist/molecules/toast/toast.styles.js +0 -1
- package/dist/molecules/toast/toast.styles.js.map +1 -1
- package/dist/organisms/footer/footer.styles.d.ts.map +1 -1
- package/dist/organisms/footer/footer.styles.js +4 -2
- package/dist/organisms/footer/footer.styles.js.map +1 -1
- package/dist/organisms/form/form.styles.d.ts.map +1 -1
- package/dist/organisms/form/form.styles.js +9 -2
- package/dist/organisms/form/form.styles.js.map +1 -1
- package/dist/organisms/navbar/navbar.styles.d.ts.map +1 -1
- package/dist/organisms/navbar/navbar.styles.js +4 -4
- package/dist/organisms/navbar/navbar.styles.js.map +1 -1
- package/dist/pages/settings-page/settings-page.styles.d.ts.map +1 -1
- package/dist/pages/settings-page/settings-page.styles.js +4 -2
- package/dist/pages/settings-page/settings-page.styles.js.map +1 -1
- package/dist/templates/page-shell/page-shell.d.ts +4 -5
- package/dist/templates/page-shell/page-shell.d.ts.map +1 -1
- package/dist/templates/page-shell/page-shell.js +40 -21
- package/dist/templates/page-shell/page-shell.js.map +1 -1
- package/dist/templates/page-shell/page-shell.styles.d.ts.map +1 -1
- package/dist/templates/page-shell/page-shell.styles.js +3 -8
- package/dist/templates/page-shell/page-shell.styles.js.map +1 -1
- package/package.json +4 -4
package/custom-elements.json
CHANGED
|
@@ -1116,7 +1116,7 @@
|
|
|
1116
1116
|
{
|
|
1117
1117
|
"kind": "variable",
|
|
1118
1118
|
"name": "breadcrumbItemStyles",
|
|
1119
|
-
"default": "css` :host { display: inline-flex; align-items: center; gap: var(--ds-space-1); color: inherit; font: inherit; } a { display: inline-flex; align-items: center; gap: var(--ds-space-1); color: var(--ds-color-fg-muted); text-decoration: none; padding: var(--ds-space-1) 0; border-radius: var(--ds-radius-sm); transition: color var(--ds-duration-fast) var(--ds-easing-standard); } a:hover { color: var(--ds-color-accent); text-decoration: underline; } a:focus-visible {
|
|
1119
|
+
"default": "css` :host { display: inline-flex; align-items: center; gap: var(--ds-space-1); color: inherit; font: inherit; } a { display: inline-flex; align-items: center; gap: var(--ds-space-1); color: var(--ds-color-fg-muted); text-decoration: none; padding: var(--ds-space-1) 0; border-radius: var(--ds-radius-sm); transition: color var(--ds-duration-fast) var(--ds-easing-standard); } a:hover { color: var(--ds-color-accent); text-decoration: underline; } a:focus-visible { box-shadow: var(--ds-shadow-focus); } .current { display: inline-flex; align-items: center; gap: var(--ds-space-1); color: var(--ds-color-fg); font-weight: var(--ds-font-weight-medium); padding: var(--ds-space-1) 0; } .separator { display: inline-flex; color: var(--ds-color-fg-subtle); font-size: 0.875em; } `"
|
|
1120
1120
|
}
|
|
1121
1121
|
],
|
|
1122
1122
|
"exports": [
|
|
@@ -1523,7 +1523,7 @@
|
|
|
1523
1523
|
{
|
|
1524
1524
|
"kind": "variable",
|
|
1525
1525
|
"name": "buttonStyles",
|
|
1526
|
-
"default": "css` :host { display: inline-flex; vertical-align: middle; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-1); padding: 0 var(--ds-space-2); height: var(--ds-size
|
|
1526
|
+
"default": "css` :host { --ds-button-size: var(--ds-size-md); --ds-button-min-width: 4.5rem; display: inline-flex; vertical-align: middle; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-1); padding: 0 var(--ds-space-2); height: var(--ds-button-size); min-width: var(--ds-button-min-width); border-radius: var(--ds-radius-sm); border: 1px solid transparent; font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); font-weight: var(--ds-font-weight-medium); letter-spacing: var(--ds-letter-spacing-normal); line-height: 1; cursor: pointer; background: transparent; color: var(--ds-color-fg); transition: background var(--ds-duration-fast) var(--ds-easing-standard), color var(--ds-duration-fast) var(--ds-easing-standard), border-color var(--ds-duration-fast) var(--ds-easing-standard), transform var(--ds-duration-fast) var(--ds-easing-standard); user-select: none; -webkit-tap-highlight-color: transparent; } .btn:focus-visible { box-shadow: var(--ds-shadow-focus); } .btn:active:not([aria-disabled='true']) { transform: translateY(1px); } :host([disabled]) .btn { opacity: 0.45; cursor: not-allowed; } :host([loading]) .btn { cursor: wait; } .spinner { width: 1.25rem; height: 1.25rem; flex-shrink: 0; animation: ds-btn-spin 0.75s linear infinite; } @keyframes ds-btn-spin { to { transform: rotate(360deg); } } :host([variant='primary']) .btn { background: var(--ds-color-accent); color: var(--ds-color-accent-fg); } :host([variant='primary']) .btn:hover:not([aria-disabled='true']) { background: var(--ds-color-accent-hover); } :host([variant='primary']) .btn:active:not([aria-disabled='true']) { background: var(--ds-color-accent-active); } :host([variant='secondary']) .btn { background: transparent; color: var(--ds-color-fg); border-color: var(--ds-color-border-strong); } :host([variant='secondary']) .btn:hover:not([aria-disabled='true']) { background: var(--ds-color-bg-subtle); } :host([variant='ghost']) .btn { background: transparent; color: var(--ds-color-fg); } :host([variant='ghost']) .btn:hover:not([aria-disabled='true']) { background: var(--ds-color-bg-subtle); } :host([variant='danger']) .btn { background: var(--ds-color-danger); color: var(--ds-color-accent-fg); } :host([square]) .btn { width: var(--ds-button-size); min-width: var(--ds-button-size); padding: 0; } :host([size='sm']) .btn { --ds-button-size: var(--ds-size-sm); --ds-button-min-width: 4rem; font-size: var(--ds-font-size-xs); } :host([size='lg']) .btn { --ds-button-size: var(--ds-size-lg); --ds-button-min-width: 5rem; font-size: var(--ds-font-size-md); } :host([full-width]) { display: flex; width: 100%; } :host([full-width]) .btn { width: 100%; } `"
|
|
1527
1527
|
}
|
|
1528
1528
|
],
|
|
1529
1529
|
"exports": [
|
|
@@ -1626,6 +1626,16 @@
|
|
|
1626
1626
|
"attribute": "full-width",
|
|
1627
1627
|
"reflects": true
|
|
1628
1628
|
},
|
|
1629
|
+
{
|
|
1630
|
+
"kind": "field",
|
|
1631
|
+
"name": "square",
|
|
1632
|
+
"type": {
|
|
1633
|
+
"text": "boolean"
|
|
1634
|
+
},
|
|
1635
|
+
"default": "false",
|
|
1636
|
+
"attribute": "square",
|
|
1637
|
+
"reflects": true
|
|
1638
|
+
},
|
|
1629
1639
|
{
|
|
1630
1640
|
"kind": "field",
|
|
1631
1641
|
"name": "label",
|
|
@@ -1699,6 +1709,15 @@
|
|
|
1699
1709
|
}
|
|
1700
1710
|
],
|
|
1701
1711
|
"attributes": [
|
|
1712
|
+
{
|
|
1713
|
+
"type": {
|
|
1714
|
+
"text": "boolean"
|
|
1715
|
+
},
|
|
1716
|
+
"description": "Forces an icon-sized square button and ignores the text-button min width.",
|
|
1717
|
+
"name": "square",
|
|
1718
|
+
"default": "false",
|
|
1719
|
+
"fieldName": "square"
|
|
1720
|
+
},
|
|
1702
1721
|
{
|
|
1703
1722
|
"name": "variant",
|
|
1704
1723
|
"type": {
|
|
@@ -2687,7 +2706,7 @@
|
|
|
2687
2706
|
{
|
|
2688
2707
|
"kind": "variable",
|
|
2689
2708
|
"name": "linkStyles",
|
|
2690
|
-
"default": "css` :host { display: inline; } a { color: var(--ds-color-accent-active); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color var(--ds-duration-fast) var(--ds-easing-standard); border-radius: var(--ds-radius-xs); } a:hover { color: var(--ds-color-accent); } a:focus-visible {
|
|
2709
|
+
"default": "css` :host { display: inline; } a { color: var(--ds-color-accent-active); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; transition: color var(--ds-duration-fast) var(--ds-easing-standard); border-radius: var(--ds-radius-xs); } a:hover { color: var(--ds-color-accent); } a:focus-visible { box-shadow: var(--ds-shadow-focus); } :host([variant='quiet']) a { color: inherit; text-decoration-color: var(--ds-color-border-strong); } :host([variant='quiet']) a:hover { color: var(--ds-color-accent-active); } :host([variant='standalone']) a { text-decoration: none; font-weight: var(--ds-font-weight-medium); } :host([variant='standalone']) a:hover { text-decoration: underline; } `"
|
|
2691
2710
|
}
|
|
2692
2711
|
],
|
|
2693
2712
|
"exports": [
|
|
@@ -3136,7 +3155,7 @@
|
|
|
3136
3155
|
{
|
|
3137
3156
|
"kind": "variable",
|
|
3138
3157
|
"name": "menuItemStyles",
|
|
3139
|
-
"default": "css` :host { display: block; cursor: pointer; border-radius: var(--ds-radius-sm); color: var(--ds-color-fg); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); user-select: none; } :host([disabled]) { cursor: not-allowed; opacity: 0.5; } :host(:hover:not([disabled])), :host(:focus-visible) { background: var(--ds-color-bg-subtle); } :host(:focus-visible) {
|
|
3158
|
+
"default": "css` :host { display: block; cursor: pointer; border-radius: var(--ds-radius-sm); color: var(--ds-color-fg); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); user-select: none; } :host([disabled]) { cursor: not-allowed; opacity: 0.5; } :host(:hover:not([disabled])), :host(:focus-visible) { background: var(--ds-color-bg-subtle); } :host(:focus-visible) { box-shadow: var(--ds-shadow-focus); } .item { display: flex; align-items: center; gap: var(--ds-space-2); padding: var(--ds-space-2) var(--ds-space-3); min-height: 36px; box-sizing: border-box; } .leading, .trailing { display: inline-flex; align-items: center; flex-shrink: 0; color: var(--ds-color-fg-subtle, var(--ds-color-fg)); } .leading:empty, .trailing:empty { display: none; } .content { display: flex; flex-direction: column; flex: 1; min-width: 0; } .primary { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .description { display: block; font-size: var(--ds-font-size-2xs); color: var(--ds-color-fg-subtle, var(--ds-color-fg)); } .description:empty { display: none; } .check { width: 1rem; height: 1rem; color: var(--ds-color-accent); } `"
|
|
3140
3159
|
}
|
|
3141
3160
|
],
|
|
3142
3161
|
"exports": [
|
|
@@ -3305,7 +3324,7 @@
|
|
|
3305
3324
|
{
|
|
3306
3325
|
"kind": "variable",
|
|
3307
3326
|
"name": "menuStyles",
|
|
3308
|
-
"default": "css` :host { display: inline-block; background: var(--ds-color-bg); color: var(--ds-color-fg); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-sm); box-shadow: var(--ds-shadow-md); overflow: hidden; min-width: 180px; font-family: var(--ds-font-body); } .header, .footer { display: block; padding: var(--ds-space-2) var(--ds-space-3); color: var(--ds-color-fg-subtle, var(--ds-color-fg)); font-size: var(--ds-font-size-2xs); letter-spacing: var(--ds-letter-spacing-wide); text-transform: uppercase; } .header
|
|
3327
|
+
"default": "css` :host { display: inline-block; background: var(--ds-color-bg); color: var(--ds-color-fg); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-sm); box-shadow: var(--ds-shadow-md); overflow: hidden; min-width: 180px; font-family: var(--ds-font-body); } .header, .footer { display: block; padding: var(--ds-space-2) var(--ds-space-3); color: var(--ds-color-fg-subtle, var(--ds-color-fg)); font-size: var(--ds-font-size-2xs); letter-spacing: var(--ds-letter-spacing-wide); text-transform: uppercase; } .header[hidden], .footer[hidden] { display: none; } .header { border-bottom: 1px solid var(--ds-color-border); } .footer { border-top: 1px solid var(--ds-color-border); } .items { display: block; padding: var(--ds-space-1); max-height: var(--ds-menu-max-height, 320px); overflow-y: auto; } `"
|
|
3309
3328
|
}
|
|
3310
3329
|
],
|
|
3311
3330
|
"exports": [
|
|
@@ -3571,7 +3590,7 @@
|
|
|
3571
3590
|
{
|
|
3572
3591
|
"kind": "variable",
|
|
3573
3592
|
"name": "navGroupStyles",
|
|
3574
|
-
"default": "css` :host { display: block; } :host([compact]) { .heading { height: var(--ds-sidenav-item-compact-size); width: var(--ds-sidenav-item-compact-size); } } .heading { display: flex; align-items: center; gap: var(--ds-space-2); width: 100%; height: var(--ds-sidenav-item-height); padding: var(--ds-space-2) var(--ds-space-3); border: none; background: transparent; border-radius: var(--ds-radius-sm); color: var(--ds-color-fg-subtle); font-family: var(--ds-font-body); font-size: var(--ds-font-size-2xs); font-weight: var(--ds-font-weight-semibold); letter-spacing: var(--ds-letter-spacing-wide); text-transform: uppercase; text-align: left; cursor: pointer; } .heading[disabled] { cursor: default; } .heading:hover:not([disabled]) { color: var(--ds-color-fg); } .heading:focus-visible {
|
|
3593
|
+
"default": "css` :host { display: block; } :host([compact]) { .heading { height: var(--ds-sidenav-item-compact-size); width: var(--ds-sidenav-item-compact-size); } } .heading { display: flex; align-items: center; gap: var(--ds-space-2); width: 100%; height: var(--ds-sidenav-item-height); padding: var(--ds-space-2) var(--ds-space-3); border: none; background: transparent; border-radius: var(--ds-radius-sm); color: var(--ds-color-fg-subtle); font-family: var(--ds-font-body); font-size: var(--ds-font-size-2xs); font-weight: var(--ds-font-weight-semibold); letter-spacing: var(--ds-letter-spacing-wide); text-transform: uppercase; text-align: left; cursor: pointer; } .heading[disabled] { cursor: default; } .heading:hover:not([disabled]) { color: var(--ds-color-fg); } .heading:focus-visible { box-shadow: var(--ds-shadow-focus); } .icon { display: inline-flex; flex: none; } .icon[hidden] { display: none; } .label { flex: 1; overflow: hidden; white-space: nowrap; } .chevron { display: inline-flex; flex: none; transition: transform var(--ds-duration-fast) var(--ds-easing-standard); } .chevron svg { width: 1rem; height: 1rem; } :host([expanded]) .chevron { transform: rotate(180deg); } .items { display: flex; flex-direction: column; gap: var(--ds-space-1); padding-left: var(--ds-space-2); } .items[hidden] { display: none; } :host([compact]) .label { clip-path: inset(50%); height: 1px; width: 1px; overflow: hidden; white-space: nowrap; position: absolute; } :host([compact]) .heading { justify-content: center; gap: var(--ds-space-1); padding: var(--ds-space-2); } :host([compact]) .chevron svg { width: 0.75rem; height: 0.75rem; } :host([compact]) .items { padding-left: 0; } .tooltip-wrapper { display: block; width: 100%; } :host([compact]) .tooltip-wrapper { display: flex; justify-content: center; } :host([compact]) .tooltip-wrapper::part(anchor) { display: inline-flex; width: auto; } `"
|
|
3575
3594
|
}
|
|
3576
3595
|
],
|
|
3577
3596
|
"exports": [
|
|
@@ -3773,7 +3792,7 @@
|
|
|
3773
3792
|
{
|
|
3774
3793
|
"kind": "variable",
|
|
3775
3794
|
"name": "navItemStyles",
|
|
3776
|
-
"default": "css` :host { display: block; } :host([compact]) { .link { height: var(--ds-sidenav-item-compact-size); width: var(--ds-sidenav-item-compact-size); } } .link { display: inline-flex; align-items: center; height: var(--ds-sidenav-item-height); gap: var(--ds-space-1); padding: var(--ds-space-2) var(--ds-space-3); border-radius: var(--ds-radius-sm); color: var(--ds-color-fg-muted); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); font-weight: var(--ds-font-weight-medium); text-decoration: none; transition: background var(--ds-duration-fast) var(--ds-easing-standard), color var(--ds-duration-fast) var(--ds-easing-standard), padding var(--ds-duration-slow) var(--ds-easing-standard); } .link:hover { background: var(--ds-color-bg-subtle); color: var(--ds-color-fg); } .link:focus-visible {
|
|
3795
|
+
"default": "css` :host { display: block; } :host([compact]) { .link { height: var(--ds-sidenav-item-compact-size); width: var(--ds-sidenav-item-compact-size); } } .link { display: inline-flex; align-items: center; height: var(--ds-sidenav-item-height); gap: var(--ds-space-1); padding: var(--ds-space-2) var(--ds-space-3); border-radius: var(--ds-radius-sm); color: var(--ds-color-fg-muted); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); font-weight: var(--ds-font-weight-medium); text-decoration: none; transition: background var(--ds-duration-fast) var(--ds-easing-standard), color var(--ds-duration-fast) var(--ds-easing-standard), padding var(--ds-duration-slow) var(--ds-easing-standard); } .link:hover { background: var(--ds-color-bg-subtle); color: var(--ds-color-fg); } .link:focus-visible { box-shadow: var(--ds-shadow-focus); } :host([current]) .link { background: var(--ds-color-accent-subtle); color: var(--ds-color-accent-active); } :host([disabled]) .link { color: var(--ds-color-fg-subtle); cursor: not-allowed; } .icon { display: inline-flex; flex: none; } .icon[hidden] { display: none; } .label { display: inline-flex; min-width: 0; overflow: hidden; white-space: nowrap; max-width: 20rem; opacity: 1; transition: max-width var(--ds-duration-slow) var(--ds-easing-standard), opacity var(--ds-duration-fast) var(--ds-easing-standard); } :host-context(ds-sidenav) { display: block; } :host-context(ds-sidenav) .link { display: flex; width: 100%; } :host([compact]) .label { max-width: 0; opacity: 0; } :host([compact]) .link { justify-content: center; padding: var(--ds-space-2); gap: 0; } .tooltip-wrapper { display: block; width: 100%; } :host([compact]) .tooltip-wrapper { display: flex; justify-content: center; } :host([compact]) .tooltip-wrapper::part(anchor) { display: inline-flex; width: auto; } `"
|
|
3777
3796
|
}
|
|
3778
3797
|
],
|
|
3779
3798
|
"exports": [
|
|
@@ -4524,7 +4543,7 @@
|
|
|
4524
4543
|
{
|
|
4525
4544
|
"kind": "variable",
|
|
4526
4545
|
"name": "searchableSelectStyles",
|
|
4527
|
-
"default": "css`
|
|
4546
|
+
"default": "css` .trigger { flex-wrap: wrap; } .trigger:focus-within { border-color: var(--ds-color-accent); box-shadow: var(--ds-shadow-focus); } .trigger.open { border-color: var(--ds-color-accent); box-shadow: var(--ds-shadow-focus); } .search-input { flex: 1; border: none; outline: none; background: transparent; color: var(--ds-color-fg); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); min-width: 0; cursor: pointer; } .search-input::placeholder { color: var(--ds-color-fg-muted); } .trigger.open .search-input { cursor: text; } :host([loading]) .trigger { cursor: default; pointer-events: none; } .spinner { width: 1.2rem; height: 1.2rem; margin-left: var(--ds-space-2); color: var(--ds-color-fg-muted); flex-shrink: 0; animation: spin 0.75s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .trigger.open .caret { transform: rotate(180deg); } .empty { margin: 0; padding: var(--ds-space-3); font-size: var(--ds-font-size-sm); color: var(--ds-color-fg-muted); text-align: center; } mark.match { background: none; color: var(--ds-color-accent); font-weight: var(--ds-font-weight-medium); } `"
|
|
4528
4547
|
}
|
|
4529
4548
|
],
|
|
4530
4549
|
"exports": [
|
|
@@ -5465,6 +5484,27 @@
|
|
|
5465
5484
|
}
|
|
5466
5485
|
]
|
|
5467
5486
|
},
|
|
5487
|
+
{
|
|
5488
|
+
"kind": "javascript-module",
|
|
5489
|
+
"path": "src/atoms/select/select.common-styles.ts",
|
|
5490
|
+
"declarations": [
|
|
5491
|
+
{
|
|
5492
|
+
"kind": "variable",
|
|
5493
|
+
"name": "selectCommonStyles",
|
|
5494
|
+
"default": "css` :host { display: inline-flex; flex-direction: column; gap: var(--ds-space-1); width: 100%; } .control-wrap { position: relative; width: 100%; } .trigger { display: flex; align-items: center; width: 100%; height: var(--ds-size-md); padding: 0 var(--ds-space-3); background: var(--ds-color-bg); border: 1px solid var(--ds-color-border-strong); border-radius: var(--ds-radius-sm); transition: border-color var(--ds-duration-fast) var(--ds-easing-standard), box-shadow var(--ds-duration-fast) var(--ds-easing-standard); } .trigger:hover { border-color: var(--ds-color-fg-subtle); } :host([invalid]) .trigger { border-color: var(--ds-color-danger); background: var(--ds-color-danger-subtle); } :host([invalid]) .trigger:is(:focus-visible, :focus-within) { box-shadow: 0 0 0 3px rgba(178, 26, 10, 0.3); } :host([disabled]) .trigger { opacity: 0.5; background: var(--ds-color-bg-subtle); cursor: not-allowed; pointer-events: none; } .trigger-multiple { height: auto; min-height: var(--ds-size-md); padding: 6px var(--ds-space-3); flex-wrap: wrap; align-items: center; gap: var(--ds-space-1); overflow: visible; } .tiles { display: flex; flex-wrap: wrap; gap: var(--ds-space-1); min-width: 0; } .tile { display: inline-flex; align-items: center; gap: var(--ds-space-1); height: 24px; padding: 0 var(--ds-space-1) 0 var(--ds-space-2); background: var(--ds-color-bg-subtle); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-xs); color: var(--ds-color-fg); font-size: var(--ds-font-size-xs); white-space: nowrap; } .tile-focused { border-color: var(--ds-color-accent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ds-color-accent) 35%, transparent); } .tile-overflow { padding: 0 var(--ds-space-2); background: var(--ds-color-accent-subtle); border-color: var(--ds-color-accent); color: var(--ds-color-accent); font-weight: var(--ds-font-weight-medium); } .tile-label { max-width: 120px; overflow: hidden; text-overflow: ellipsis; } .tile-remove, .clear-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: none; background: none; color: var(--ds-color-fg-muted); cursor: pointer; border-radius: var(--ds-radius-xs); flex-shrink: 0; } .tile-remove { width: 14px; height: 14px; } .tile-remove:hover { color: var(--ds-color-fg); background: var(--ds-color-border); } .tile-remove svg { width: 10px; height: 10px; } .leading { display: inline-flex; align-items: center; margin-right: var(--ds-space-1); color: var(--ds-color-fg-muted); flex-shrink: 0; } .leading[hidden] { display: none; } .clear-btn { width: 1.2rem; height: 1.2rem; } .clear-btn:hover { color: var(--ds-color-fg); } .clear-btn:focus-visible { box-shadow: var(--ds-shadow-focus); } .clear-btn svg { width: 1rem; height: 1rem; } .caret { width: 1.2rem; height: 1.2rem; margin-left: var(--ds-space-2); color: var(--ds-color-fg-muted); pointer-events: none; flex-shrink: 0; transition: transform var(--ds-duration-fast) var(--ds-easing-standard); } .listbox { position: absolute; inset: calc(100% + var(--ds-space-1)) 0 auto; z-index: 100; max-height: 240px; overflow-y: auto; background: var(--ds-color-bg); border: 1px solid var(--ds-color-border-strong); border-radius: var(--ds-radius-sm); box-shadow: var(--ds-shadow-md); } `"
|
|
5495
|
+
}
|
|
5496
|
+
],
|
|
5497
|
+
"exports": [
|
|
5498
|
+
{
|
|
5499
|
+
"kind": "js",
|
|
5500
|
+
"name": "selectCommonStyles",
|
|
5501
|
+
"declaration": {
|
|
5502
|
+
"name": "selectCommonStyles",
|
|
5503
|
+
"module": "src/atoms/select/select.common-styles.ts"
|
|
5504
|
+
}
|
|
5505
|
+
}
|
|
5506
|
+
]
|
|
5507
|
+
},
|
|
5468
5508
|
{
|
|
5469
5509
|
"kind": "javascript-module",
|
|
5470
5510
|
"path": "src/atoms/select/select.shared.ts",
|
|
@@ -5726,7 +5766,7 @@
|
|
|
5726
5766
|
{
|
|
5727
5767
|
"kind": "variable",
|
|
5728
5768
|
"name": "selectStyles",
|
|
5729
|
-
"default": "css`
|
|
5769
|
+
"default": "css` .trigger { cursor: pointer; text-align: left; font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); color: var(--ds-color-fg); } .trigger:focus-visible { border-color: var(--ds-color-accent); box-shadow: var(--ds-shadow-focus); } .trigger[aria-expanded='true'] { border-color: var(--ds-color-accent); box-shadow: var(--ds-shadow-focus); } .tiles { flex: 1; } .trigger-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trigger-label.placeholder { color: var(--ds-color-fg-muted); } .trigger[aria-expanded='true'] .caret { transform: rotate(180deg); } `"
|
|
5730
5770
|
}
|
|
5731
5771
|
],
|
|
5732
5772
|
"exports": [
|
|
@@ -7213,7 +7253,7 @@
|
|
|
7213
7253
|
{
|
|
7214
7254
|
"kind": "variable",
|
|
7215
7255
|
"name": "tabPanelStyles",
|
|
7216
|
-
"default": "css` :host { display: block;
|
|
7256
|
+
"default": "css` :host { display: block; } :host(:focus-visible) { border-radius: var(--ds-radius-sm); box-shadow: var(--ds-shadow-focus); } `"
|
|
7217
7257
|
}
|
|
7218
7258
|
],
|
|
7219
7259
|
"exports": [
|
|
@@ -7307,7 +7347,7 @@
|
|
|
7307
7347
|
{
|
|
7308
7348
|
"kind": "variable",
|
|
7309
7349
|
"name": "tabStyles",
|
|
7310
|
-
"default": "css` :host { display: inline-flex;
|
|
7350
|
+
"default": "css` :host { display: inline-flex; } :host([disabled]) { cursor: not-allowed; opacity: 0.5; } .tab { display: inline-flex; align-items: center; gap: var(--ds-space-2); padding: var(--ds-space-3) var(--ds-space-2); color: var(--ds-color-fg-muted); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); font-weight: var(--ds-font-weight-medium); line-height: 1; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--ds-duration-fast) var(--ds-easing-standard), border-color var(--ds-duration-fast) var(--ds-easing-standard); user-select: none; white-space: nowrap; } :host(:hover:not([disabled])) .tab { color: var(--ds-color-fg); } :host([selected]) .tab { color: var(--ds-color-accent); border-bottom-color: var(--ds-color-accent); } :host(:focus-visible) .tab { border-radius: var(--ds-radius-sm); box-shadow: var(--ds-shadow-focus); } `"
|
|
7311
7351
|
}
|
|
7312
7352
|
],
|
|
7313
7353
|
"exports": [
|
|
@@ -8281,7 +8321,7 @@
|
|
|
8281
8321
|
{
|
|
8282
8322
|
"kind": "variable",
|
|
8283
8323
|
"name": "alertStyles",
|
|
8284
|
-
"default": "css` :host { display: block; } .alert { display: flex; align-items: flex-start; gap: var(--ds-space-3); padding: var(--ds-space-4); border-radius: var(--ds-radius-sm); border-left: 3px solid var(--ds-color-accent); background: var(--ds-color-bg-subtle); color: var(--ds-color-fg); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); line-height: 1.5; } :host([tone='info']) .alert { border-left-color: var(--ds-color-accent); background: var(--ds-color-accent-subtle); } :host([tone='success']) .alert { border-left-color: var(--ds-color-success); background: var(--ds-color-success-subtle); } :host([tone='warning']) .alert { border-left-color: var(--ds-color-warning); background: var(--ds-color-warning-subtle); } :host([tone='danger']) .alert { border-left-color: var(--ds-color-danger); background: var(--ds-color-danger-subtle); } .content { flex: 1; display: flex; flex-direction: column; gap: var(--ds-space-1); } .title { font-family: var(--ds-font-display); font-weight: var(--ds-font-weight-semibold); font-size: var(--ds-font-size-md); letter-spacing: var(--ds-letter-spacing-display); } .close { appearance: none; background: transparent; border: none; color: inherit; padding: var(--ds-space-1); margin: calc(var(--ds-space-1) * -1); cursor: pointer; border-radius: var(--ds-radius-xs); } .close:focus-visible {
|
|
8324
|
+
"default": "css` :host { display: block; } .alert { display: flex; align-items: flex-start; gap: var(--ds-space-3); padding: var(--ds-space-4); border-radius: var(--ds-radius-sm); border-left: 3px solid var(--ds-color-accent); background: var(--ds-color-bg-subtle); color: var(--ds-color-fg); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); line-height: 1.5; } :host([tone='info']) .alert { border-left-color: var(--ds-color-accent); background: var(--ds-color-accent-subtle); } :host([tone='success']) .alert { border-left-color: var(--ds-color-success); background: var(--ds-color-success-subtle); } :host([tone='warning']) .alert { border-left-color: var(--ds-color-warning); background: var(--ds-color-warning-subtle); } :host([tone='danger']) .alert { border-left-color: var(--ds-color-danger); background: var(--ds-color-danger-subtle); } .content { flex: 1; display: flex; flex-direction: column; gap: var(--ds-space-1); } .title { font-family: var(--ds-font-display); font-weight: var(--ds-font-weight-semibold); font-size: var(--ds-font-size-md); letter-spacing: var(--ds-letter-spacing-display); } .close { appearance: none; background: transparent; border: none; color: inherit; padding: var(--ds-space-1); margin: calc(var(--ds-space-1) * -1); cursor: pointer; border-radius: var(--ds-radius-xs); } .close:focus-visible { box-shadow: var(--ds-shadow-focus); } .icon { flex-shrink: 0; width: 1.1rem; height: 1.1rem; margin-top: 0.1rem; } `"
|
|
8285
8325
|
}
|
|
8286
8326
|
],
|
|
8287
8327
|
"exports": [
|
|
@@ -8461,7 +8501,7 @@
|
|
|
8461
8501
|
{
|
|
8462
8502
|
"kind": "variable",
|
|
8463
8503
|
"name": "barChartStyles",
|
|
8464
|
-
"default": "css` :host { display: block; position: relative; width: 100%; color: var(--ds-color-fg); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); } .frame { position: relative; width: 100%; outline: none; border-radius: var(--ds-radius-md); } .frame:focus-visible {
|
|
8504
|
+
"default": "css` :host { display: block; position: relative; width: 100%; color: var(--ds-color-fg); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); } .frame { position: relative; width: 100%; outline: none; border-radius: var(--ds-radius-md); } .frame:focus-visible { box-shadow: var(--ds-shadow-focus); } svg { display: block; width: 100%; height: 100%; overflow: visible; } .grid line { stroke: var(--ds-color-border-subtle); stroke-width: 1; } .axis line, .axis path { stroke: var(--ds-color-border); stroke-width: 1; fill: none; } .axis text { fill: var(--ds-color-fg-muted); font-size: 0.75rem; } .axis-label { fill: var(--ds-color-fg-muted); font-size: 0.75rem; font-weight: var(--ds-font-weight-medium); } .bar { transition: opacity var(--ds-duration-fast) var(--ds-easing-standard); } .bar-group.inactive .bar { opacity: 0.55; } .focus-ring { fill: none; stroke: var(--ds-color-accent); stroke-width: 2; pointer-events: none; rx: 4; } .legend { display: flex; flex-wrap: wrap; gap: var(--ds-space-2) var(--ds-space-4); margin-top: var(--ds-space-3); color: var(--ds-color-fg-muted); } .legend-item { display: inline-flex; align-items: center; gap: var(--ds-space-2); } .legend-swatch { display: inline-block; width: 0.75em; height: 0.75em; border-radius: var(--ds-radius-xs); } .tooltip { position: absolute; pointer-events: none; background: var(--ds-color-bg-inverse); color: var(--ds-color-fg-inverse); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-md); padding: var(--ds-space-2) var(--ds-space-3); font-size: var(--ds-font-size-sm); box-shadow: var(--ds-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.18)); min-width: 120px; max-width: min(220px, calc(100% - 16px)); box-sizing: border-box; z-index: 1; } .tooltip[data-position=\"above\"] { transform: translate(-50%, -100%); margin-top: -8px; } .tooltip[data-position=\"below\"] { transform: translate(-50%, 0); margin-top: 8px; } .tooltip[hidden] { display: none; } .tooltip-title { font-weight: var(--ds-font-weight-medium); margin-bottom: var(--ds-space-1); } .tooltip-rows { display: grid; grid-template-columns: auto auto; gap: 2px var(--ds-space-3); list-style: none; padding: 0; margin: 0; } .tooltip-row-label { display: inline-flex; align-items: center; gap: var(--ds-space-1); } .tooltip-swatch { display: inline-block; width: 0.625em; height: 0.625em; border-radius: 2px; } .tooltip-row-value { font-variant-numeric: tabular-nums; text-align: right; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } `"
|
|
8465
8505
|
}
|
|
8466
8506
|
],
|
|
8467
8507
|
"exports": [
|
|
@@ -9705,7 +9745,7 @@
|
|
|
9705
9745
|
{
|
|
9706
9746
|
"kind": "variable",
|
|
9707
9747
|
"name": "cardStyles",
|
|
9708
|
-
"default": "css` :host { display: block; container-type: inline-size; } .card { display: flex; flex-direction: column; gap: var(--ds-space-4); padding: var(--ds-space-6); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-sm); background: var(--ds-color-bg); color: var(--ds-color-fg); transition: border-color var(--ds-duration-normal) var(--ds-easing-standard), transform var(--ds-duration-normal) var(--ds-easing-standard); } :host([elevation='sm']) .card { box-shadow: var(--ds-shadow-sm); } :host([elevation='md']) .card { box-shadow: var(--ds-shadow-md); } :host([interactive]) .card { cursor: pointer; } :host([interactive]) .card:hover { border-color: var(--ds-color-fg-subtle); transform: translateY(-1px); } :host([orientation='horizontal']) .card { flex-direction: row; align-items: center; } :host([orientation='horizontal']) .body { flex: 1; } @container (max-width: 360px) { :host([orientation='horizontal']) .card { flex-direction: column; align-items: stretch; } :host([orientation='horizontal']) .body { flex: unset; } } .header { display: flex; flex-direction: column; gap: var(--ds-space-1); } [hidden] { display: none; } ::slotted([slot='actions']) { display: flex; gap: var(--ds-space-2); flex-wrap: wrap; } ::slotted([slot='title']) { font-family: var(--ds-font-display); font-size: var(--ds-font-size-xl); font-weight: var(--ds-font-weight-semibold); letter-spacing: var(--ds-letter-spacing-display); margin: 0; } ::slotted([slot='eyebrow']) { font-size: var(--ds-font-size-2xs); letter-spacing: var(--ds-letter-spacing-wide); text-transform: uppercase; color: var(--ds-color-accent); } `"
|
|
9748
|
+
"default": "css` :host { display: block; container-type: inline-size; } .card { display: flex; flex-direction: column; gap: var(--ds-space-4); padding: var(--ds-space-6); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-sm); background: var(--ds-color-bg); color: var(--ds-color-fg); transition: border-color var(--ds-duration-normal) var(--ds-easing-standard), transform var(--ds-duration-normal) var(--ds-easing-standard); } :host([elevation='sm']) .card { box-shadow: var(--ds-shadow-sm); } :host([elevation='md']) .card { box-shadow: var(--ds-shadow-md); } :host([interactive]) .card { cursor: pointer; } :host([interactive]) .card:hover { border-color: var(--ds-color-fg-subtle); transform: translateY(-1px); } :host([orientation='horizontal']) .card { flex-direction: row; align-items: center; } :host([orientation='horizontal']) .body { flex: 1; } @container (max-width: 360px) { :host([orientation='horizontal']) .card { flex-direction: column; align-items: stretch; } :host([orientation='horizontal']) .body { flex: unset; } } .header { display: flex; flex-direction: column; gap: var(--ds-space-1); } .actions { display: flex; justify-content: flex-start; } @media (max-width: ${belowTabletBreakpoint}) { .actions { justify-content: flex-end; } } [hidden] { display: none; } ::slotted([slot='actions']) { display: flex; gap: var(--ds-space-2); flex-wrap: wrap; } ::slotted([slot='title']) { font-family: var(--ds-font-display); font-size: var(--ds-font-size-xl); font-weight: var(--ds-font-weight-semibold); letter-spacing: var(--ds-letter-spacing-display); margin: 0; } ::slotted([slot='eyebrow']) { font-size: var(--ds-font-size-2xs); letter-spacing: var(--ds-letter-spacing-wide); text-transform: uppercase; color: var(--ds-color-accent); } `"
|
|
9709
9749
|
}
|
|
9710
9750
|
],
|
|
9711
9751
|
"exports": [
|
|
@@ -10524,7 +10564,7 @@
|
|
|
10524
10564
|
{
|
|
10525
10565
|
"kind": "variable",
|
|
10526
10566
|
"name": "colorPickerSwatchStyles",
|
|
10527
|
-
"default": "css` :host { position: relative; display: inline-flex; align-items: center; justify-content: center; aspect-ratio: 1; width: var(--color-picker-swatch-size, 28px); min-width: var(--color-picker-swatch-size, 28px); border: 1px solid var(--ds-color-border-strong); border-radius: var(--ds-radius-sm); background: var(--color-picker-value, transparent); cursor: pointer; } :host(:focus-visible) {
|
|
10567
|
+
"default": "css` :host { position: relative; display: inline-flex; align-items: center; justify-content: center; aspect-ratio: 1; width: var(--color-picker-swatch-size, 28px); min-width: var(--color-picker-swatch-size, 28px); border: 1px solid var(--ds-color-border-strong); border-radius: var(--ds-radius-sm); background: var(--color-picker-value, transparent); cursor: pointer; } :host(:focus-visible) { box-shadow: var(--ds-shadow-focus); } :host([disabled]) { opacity: 0.4; cursor: not-allowed; } :host([selected]) { border-color: transparent; } .check { display: none; width: 18px; height: 18px; color: var(--color-picker-check-color, var(--ds-color-bg)); } :host([selected]) .check { display: block; } `"
|
|
10528
10568
|
}
|
|
10529
10569
|
],
|
|
10530
10570
|
"exports": [
|
|
@@ -10699,7 +10739,7 @@
|
|
|
10699
10739
|
{
|
|
10700
10740
|
"kind": "variable",
|
|
10701
10741
|
"name": "colorPickerStyles",
|
|
10702
|
-
"default": "css` :host { display: inline-flex; flex-direction: column; gap: var(--ds-space-1); width: 100%; } :host([compact]) { width: auto; } .control-wrap { position: relative; width: 100%; } :host([compact]) .control-wrap { width: auto; } .trigger { width: 100%; } :host([compact]) .trigger { width: auto; } .trigger::part(button) { display: flex; align-items: center; justify-content: flex-start; width: 100%; min-height: var(--ds-size-md); gap: var(--ds-space-3); padding: var(--ds-space-1) var(--ds-space-3); border: 1px solid var(--ds-color-border-strong); border-radius: var(--ds-radius-sm); background: var(--ds-color-bg); color: var(--ds-color-fg); height: auto; text-align: left; transition: border-color var(--ds-duration-fast) var(--ds-easing-standard), box-shadow var(--ds-duration-fast) var(--ds-easing-standard); } .trigger:hover::part(button) { border-color: var(--ds-color-fg-subtle); } .trigger[aria-expanded='true']::part(button) { border-color: var(--ds-color-accent); box-shadow: var(--ds-shadow-focus); outline: none; } :host([compact]) .trigger::part(button) { --color-picker-compact-size: 24px; width: var(--color-picker-compact-size); min-width: var(--color-picker-compact-size); height: var(--color-picker-compact-size); min-height: var(--color-picker-compact-size); padding: 0; border-color: var(--color-picker-compact-bg, var(--ds-color-border-strong)); background: var(--color-picker-compact-bg, var(--ds-color-bg)); color: var(--color-picker-compact-fg, var(--ds-color-fg)); justify-content: center; } :host([compact]) .trigger:hover::part(button), :host([compact]) .trigger[aria-expanded='true']::part(button) { border-color: var(--color-picker-compact-fg, var(--ds-color-fg-subtle)); } :host([invalid]) .trigger::part(button) { border-color: var(--ds-color-danger); background: var(--ds-color-danger-subtle); } :host([disabled]) .trigger::part(button) { opacity: 0.5; background: var(--ds-color-bg-subtle); cursor: not-allowed; } .preview { background: var(--color-picker-value, transparent); width: 24px; height: 24px; border: 1px solid var(--ds-color-border-strong); border-radius: var(--ds-radius-sm); flex: 0 0 auto; } :host([compact]) .preview { display: none; } .compact-icon { display: none; } :host([compact]) .compact-icon { display: inline-flex; color: currentColor; font-size: 1rem; } .trigger-text { display: grid; gap: 2px; min-width: 0; flex: 1; } .trigger-label, .trigger-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trigger-value { color: var(--ds-color-fg-muted); font-size: var(--ds-font-size-xs); } .placeholder { color: var(--ds-color-fg-muted); } .panel { position: absolute; inset-inline: 0; top: calc(100% + var(--ds-space-1)); z-index: 100; max-width: min(100%, calc(100vw - 2rem)); } :host([compact]) .panel { width: min(280px, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); inset-inline-end: auto; } ds-card::part(card) { gap: var(--ds-space-3); padding: var(--ds-space-4); box-shadow: var(--ds-shadow-md); } ds-card::part(body) { display: grid; gap: var(--ds-space-3); } .panel-title { font-size: var(--ds-font-size-sm); font-weight: var(--ds-font-weight-semibold); } .section { display: grid; gap: var(--ds-space-2); } .section-label { color: var(--ds-color-fg); font-size: var(--ds-font-size-sm); font-weight: var(--ds-font-weight-medium); } .custom-row { display: grid; grid-template-columns: auto 1fr; gap: var(--ds-space-2); align-items: end; } .native-color { align-self: end; --color-picker-input-size: var(--ds-size-sm); } .hex-input { min-width: 0; } .panel-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ds-space-2); } @media (max-width:
|
|
10742
|
+
"default": "css` :host { display: inline-flex; flex-direction: column; gap: var(--ds-space-1); width: 100%; } :host([compact]) { width: auto; } .control-wrap { position: relative; width: 100%; } :host([compact]) .control-wrap { width: auto; } .trigger { width: 100%; } :host([compact]) .trigger { width: auto; } .trigger::part(button) { display: flex; align-items: center; justify-content: flex-start; width: 100%; min-height: var(--ds-size-md); gap: var(--ds-space-3); padding: var(--ds-space-1) var(--ds-space-3); border: 1px solid var(--ds-color-border-strong); border-radius: var(--ds-radius-sm); background: var(--ds-color-bg); color: var(--ds-color-fg); height: auto; text-align: left; transition: border-color var(--ds-duration-fast) var(--ds-easing-standard), box-shadow var(--ds-duration-fast) var(--ds-easing-standard); } .trigger:hover::part(button) { border-color: var(--ds-color-fg-subtle); } .trigger[aria-expanded='true']::part(button) { border-color: var(--ds-color-accent); box-shadow: var(--ds-shadow-focus); outline: none; } :host([compact]) .trigger::part(button) { --color-picker-compact-size: 24px; width: var(--color-picker-compact-size); min-width: var(--color-picker-compact-size); height: var(--color-picker-compact-size); min-height: var(--color-picker-compact-size); padding: 0; border-color: var(--color-picker-compact-bg, var(--ds-color-border-strong)); background: var(--color-picker-compact-bg, var(--ds-color-bg)); color: var(--color-picker-compact-fg, var(--ds-color-fg)); justify-content: center; } :host([compact]) .trigger:hover::part(button), :host([compact]) .trigger[aria-expanded='true']::part(button) { border-color: var(--color-picker-compact-fg, var(--ds-color-fg-subtle)); } :host([invalid]) .trigger::part(button) { border-color: var(--ds-color-danger); background: var(--ds-color-danger-subtle); } :host([disabled]) .trigger::part(button) { opacity: 0.5; background: var(--ds-color-bg-subtle); cursor: not-allowed; } .preview { background: var(--color-picker-value, transparent); width: 24px; height: 24px; border: 1px solid var(--ds-color-border-strong); border-radius: var(--ds-radius-sm); flex: 0 0 auto; } :host([compact]) .preview { display: none; } .compact-icon { display: none; } :host([compact]) .compact-icon { display: inline-flex; color: currentColor; font-size: 1rem; } .trigger-text { display: grid; gap: 2px; min-width: 0; flex: 1; } .trigger-label, .trigger-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .trigger-value { color: var(--ds-color-fg-muted); font-size: var(--ds-font-size-xs); } .placeholder { color: var(--ds-color-fg-muted); } .panel { position: absolute; inset-inline: 0; top: calc(100% + var(--ds-space-1)); z-index: 100; max-width: min(100%, calc(100vw - 2rem)); } :host([compact]) .panel { width: min(280px, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); inset-inline-end: auto; } ds-card::part(card) { gap: var(--ds-space-3); padding: var(--ds-space-4); box-shadow: var(--ds-shadow-md); } ds-card::part(body) { display: grid; gap: var(--ds-space-3); } .panel-title { font-size: var(--ds-font-size-sm); font-weight: var(--ds-font-weight-semibold); } .section { display: grid; gap: var(--ds-space-2); } .section-label { color: var(--ds-color-fg); font-size: var(--ds-font-size-sm); font-weight: var(--ds-font-weight-medium); } .custom-row { display: grid; grid-template-columns: auto 1fr; gap: var(--ds-space-2); align-items: end; } .native-color { align-self: end; --color-picker-input-size: var(--ds-size-sm); } .hex-input { min-width: 0; } .panel-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--ds-space-2); } @media (max-width: ${belowMobileBreakpoint}) { .custom-row { grid-template-columns: 1fr; align-items: stretch; } .panel-actions ds-button { flex: 1 1 120px; } } `"
|
|
10703
10743
|
}
|
|
10704
10744
|
],
|
|
10705
10745
|
"exports": [
|
|
@@ -11450,7 +11490,7 @@
|
|
|
11450
11490
|
{
|
|
11451
11491
|
"kind": "variable",
|
|
11452
11492
|
"name": "inputColorStyles",
|
|
11453
|
-
"default": "css` :host { display: inline-flex; width: var(--color-picker-input-size, var(--ds-size-sm)); height: var(--color-picker-input-size, var(--ds-size-sm)); } input { width: 100%; height: 100%; padding: 1px; border: 1px solid var(--ds-color-border-strong); border-radius: var(--ds-radius-sm); background: var(--ds-color-bg); cursor: pointer; } input:focus-visible { border-color: var(--ds-color-accent); box-shadow: var(--ds-shadow-focus);
|
|
11493
|
+
"default": "css` :host { display: inline-flex; width: var(--color-picker-input-size, var(--ds-size-sm)); height: var(--color-picker-input-size, var(--ds-size-sm)); } input { width: 100%; height: 100%; padding: 1px; border: 1px solid var(--ds-color-border-strong); border-radius: var(--ds-radius-sm); background: var(--ds-color-bg); cursor: pointer; } input:focus-visible { border-color: var(--ds-color-accent); box-shadow: var(--ds-shadow-focus); } :host([disabled]) input { opacity: 0.5; cursor: not-allowed; } @media (max-width: ${belowMobileBreakpoint}) { :host { width: 100%; } } `"
|
|
11454
11494
|
}
|
|
11455
11495
|
],
|
|
11456
11496
|
"exports": [
|
|
@@ -12643,7 +12683,7 @@
|
|
|
12643
12683
|
{
|
|
12644
12684
|
"kind": "variable",
|
|
12645
12685
|
"name": "toastStyles",
|
|
12646
|
-
"default": "css` :host { display: block; pointer-events: auto; min-width: 280px; max-width: 420px; } .toast { display: flex; align-items: flex-start; gap: var(--ds-space-3); padding: var(--ds-space-4); border-radius: var(--ds-radius-sm); border-left: 3px solid var(--ds-color-accent); background: var(--ds-color-bg); color: var(--ds-color-fg); box-shadow: var(--ds-shadow-md); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); line-height: 1.5; } :host([tone='info']) .toast { border-left-color: var(--ds-color-accent); background: var(--ds-color-accent-subtle); } :host([tone='success']) .toast { border-left-color: var(--ds-color-success); background: var(--ds-color-success-subtle); } :host([tone='warning']) .toast { border-left-color: var(--ds-color-warning); background: var(--ds-color-warning-subtle); } :host([tone='danger']) .toast { border-left-color: var(--ds-color-danger); background: var(--ds-color-danger-subtle); } .content { flex: 1; display: flex; flex-direction: column; gap: var(--ds-space-1); min-width: 0; } .title { font-family: var(--ds-font-display); font-weight: var(--ds-font-weight-semibold); font-size: var(--ds-font-size-md); letter-spacing: var(--ds-letter-spacing-display); } ::slotted([slot='actions']) { margin-top: var(--ds-space-2); display: flex; gap: var(--ds-space-2); } .close { appearance: none; background: transparent; border: none; color: inherit; padding: var(--ds-space-1); margin: calc(var(--ds-space-1) * -1); cursor: pointer; border-radius: var(--ds-radius-xs); } .close:focus-visible {
|
|
12686
|
+
"default": "css` :host { display: block; pointer-events: auto; min-width: 280px; max-width: 420px; } .toast { display: flex; align-items: flex-start; gap: var(--ds-space-3); padding: var(--ds-space-4); border-radius: var(--ds-radius-sm); border-left: 3px solid var(--ds-color-accent); background: var(--ds-color-bg); color: var(--ds-color-fg); box-shadow: var(--ds-shadow-md); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); line-height: 1.5; } :host([tone='info']) .toast { border-left-color: var(--ds-color-accent); background: var(--ds-color-accent-subtle); } :host([tone='success']) .toast { border-left-color: var(--ds-color-success); background: var(--ds-color-success-subtle); } :host([tone='warning']) .toast { border-left-color: var(--ds-color-warning); background: var(--ds-color-warning-subtle); } :host([tone='danger']) .toast { border-left-color: var(--ds-color-danger); background: var(--ds-color-danger-subtle); } .content { flex: 1; display: flex; flex-direction: column; gap: var(--ds-space-1); min-width: 0; } .title { font-family: var(--ds-font-display); font-weight: var(--ds-font-weight-semibold); font-size: var(--ds-font-size-md); letter-spacing: var(--ds-letter-spacing-display); } ::slotted([slot='actions']) { margin-top: var(--ds-space-2); display: flex; gap: var(--ds-space-2); } .close { appearance: none; background: transparent; border: none; color: inherit; padding: var(--ds-space-1); margin: calc(var(--ds-space-1) * -1); cursor: pointer; border-radius: var(--ds-radius-xs); } .close:focus-visible { box-shadow: var(--ds-shadow-focus); } `"
|
|
12647
12687
|
}
|
|
12648
12688
|
],
|
|
12649
12689
|
"exports": [
|
|
@@ -12925,7 +12965,7 @@
|
|
|
12925
12965
|
{
|
|
12926
12966
|
"kind": "variable",
|
|
12927
12967
|
"name": "footerStyles",
|
|
12928
|
-
"default": "css` :host { display: block; container-type: inline-size; } footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: var(--ds-space-4); padding: var(--ds-space-2) var(--ds-space-5); border-top: 1px solid var(--ds-color-border); color: var(--ds-color-fg-muted); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); } .start, .middle, .end { display: flex; align-items: center; gap: var(--ds-space-3); min-width: 0; } .end { justify-content: flex-end; } @container (max-width:
|
|
12968
|
+
"default": "css` :host { display: block; container-type: inline-size; } footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: var(--ds-space-4); padding: var(--ds-space-2) var(--ds-space-5); border-top: 1px solid var(--ds-color-border); color: var(--ds-color-fg-muted); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); } .start, .middle, .end { display: flex; align-items: center; gap: var(--ds-space-3); min-width: 0; } .end { justify-content: flex-end; } @container (max-width: ${mobileBreakpoint}) { footer { gap: var(--ds-space-2); padding: var(--ds-space-2) var(--ds-space-4); font-size: var(--ds-font-size-xs); } .start, .middle, .end { gap: var(--ds-space-2); } } `"
|
|
12929
12969
|
}
|
|
12930
12970
|
],
|
|
12931
12971
|
"exports": [
|
|
@@ -13037,7 +13077,7 @@
|
|
|
13037
13077
|
{
|
|
13038
13078
|
"kind": "variable",
|
|
13039
13079
|
"name": "formStyles",
|
|
13040
|
-
"default": "css` :host { display: block; container-type: inline-size; } form { display: flex; flex-direction: column; } .section { display: flex; flex-direction: column; gap: var(--ds-space-4); padding: var(--ds-space-6); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-sm); background: var(--ds-color-bg); } .actions { display: flex; gap: var(--ds-space-3); justify-content: flex-
|
|
13080
|
+
"default": "css` :host { display: block; container-type: inline-size; } form { display: flex; flex-direction: column; } .section { display: flex; flex-direction: column; gap: var(--ds-space-4); padding: var(--ds-space-6); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-sm); background: var(--ds-color-bg); } .actions { display: flex; gap: var(--ds-space-3); justify-content: flex-start; margin-top: var(--ds-space-5); } @media (max-width: ${belowTabletBreakpoint}) { .actions { justify-content: flex-end; } } .title { margin: 0 0 var(--ds-space-4); font-family: var(--ds-font-display); font-size: var(--ds-font-size-xl); letter-spacing: var(--ds-letter-spacing-display); color: var(--ds-color-fg); } `"
|
|
13041
13081
|
}
|
|
13042
13082
|
],
|
|
13043
13083
|
"exports": [
|
|
@@ -13256,7 +13296,7 @@
|
|
|
13256
13296
|
{
|
|
13257
13297
|
"kind": "variable",
|
|
13258
13298
|
"name": "navbarStyles",
|
|
13259
|
-
"default": "css` :host { display: block; container-type: inline-size;
|
|
13299
|
+
"default": "css` :host { display: block; container-type: inline-size; } nav { position: relative; display: flex; align-items: center; gap: var(--ds-space-4); padding: var(--ds-space-3) var(--ds-space-6); background: var(--ds-color-bg); border-bottom: 1px solid var(--ds-color-border); font-family: var(--ds-font-body); } .brand { display: flex; align-items: center; gap: var(--ds-space-2); font-family: var(--ds-font-display); font-size: var(--ds-font-size-lg); color: var(--ds-color-fg); } .links { display: flex; align-items: center; gap: var(--ds-space-3); flex: 1; } .actions { display: flex; align-items: center; gap: var(--ds-space-2); } .toggle { display: none; align-items: center; justify-content: center; border: 1px solid var(--ds-color-border); background: transparent; border-radius: var(--ds-radius-sm); color: var(--ds-color-fg); cursor: pointer; padding: var(--ds-space-2); } .toggle:focus-visible { box-shadow: var(--ds-shadow-focus); } .menu { display: contents; } @container (max-width: ${tabletBreakpoint}) { .links { justify-content: flex-end; flex: 0 0 auto; margin-left: auto; } .toggle { display: inline-flex; } .menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: var(--ds-space-1); padding: var(--ds-space-3); background: var(--ds-color-bg); border-bottom: 1px solid var(--ds-color-border); box-shadow: var(--ds-shadow-md); z-index: 10; } :host([data-open]) .menu { display: flex; } } `"
|
|
13260
13300
|
}
|
|
13261
13301
|
],
|
|
13262
13302
|
"exports": [
|
|
@@ -13649,7 +13689,7 @@
|
|
|
13649
13689
|
{
|
|
13650
13690
|
"kind": "variable",
|
|
13651
13691
|
"name": "settingsPageStyles",
|
|
13652
|
-
"default": "css` :host { display: block; } .hero { display: flex; flex-direction: column; gap: var(--ds-space-2); padding-bottom: var(--ds-space-6); border-bottom: 1px solid var(--ds-color-border); } .hero .eyebrow { font-size: var(--ds-font-size-2xs); letter-spacing: var(--ds-letter-spacing-wide); text-transform: uppercase; color: var(--ds-color-accent); } .hero h1 { font-family: var(--ds-font-display); font-weight: var(--ds-font-weight-semibold); margin: 0; } .hero p { color: var(--ds-color-fg-muted); font-size: var(--ds-font-size-md); max-width: 52ch; margin: 0; } .grid { display: grid; grid-template-columns: minmax(12rem, 16rem) 1fr; gap: var(--ds-space-10); padding: var(--ds-space-8) 0; } @media (max-width:
|
|
13692
|
+
"default": "css` :host { display: block; } .hero { display: flex; flex-direction: column; gap: var(--ds-space-2); padding-bottom: var(--ds-space-6); border-bottom: 1px solid var(--ds-color-border); } .hero .eyebrow { font-size: var(--ds-font-size-2xs); letter-spacing: var(--ds-letter-spacing-wide); text-transform: uppercase; color: var(--ds-color-accent); } .hero h1 { font-family: var(--ds-font-display); font-weight: var(--ds-font-weight-semibold); margin: 0; } .hero p { color: var(--ds-color-fg-muted); font-size: var(--ds-font-size-md); max-width: 52ch; margin: 0; } .grid { display: grid; grid-template-columns: minmax(12rem, 16rem) 1fr; gap: var(--ds-space-10); padding: var(--ds-space-8) 0; } @media (max-width: ${belowTabletBreakpoint}) { .grid { grid-template-columns: 1fr; gap: var(--ds-space-6); padding: var(--ds-space-5) 0; } } nav { display: flex; flex-direction: column; gap: var(--ds-space-1); position: sticky; top: calc(var(--ds-space-10) + var(--ds-space-4)); align-self: start; } nav a { padding: var(--ds-space-2) var(--ds-space-3); color: var(--ds-color-fg-muted); text-decoration: none; border-radius: var(--ds-radius-xs); font-size: var(--ds-font-size-sm); } nav a[aria-current='true'] { color: var(--ds-color-fg); background: var(--ds-color-bg-subtle); font-weight: var(--ds-font-weight-medium); } .sections { display: flex; flex-direction: column; gap: var(--ds-space-6); } :host > .sections { padding-top: var(--ds-space-8); } `"
|
|
13653
13693
|
}
|
|
13654
13694
|
],
|
|
13655
13695
|
"exports": [
|
|
@@ -13821,7 +13861,7 @@
|
|
|
13821
13861
|
{
|
|
13822
13862
|
"kind": "variable",
|
|
13823
13863
|
"name": "pageShellStyles",
|
|
13824
|
-
"default": "css` :host { --ds-page-shell-max-width: 90rem; display: flex; flex-direction: column; position: relative; min-height: 100vh; overflow-x: clip; background: var(--ds-color-bg); color: var(--ds-color-fg); font-family: var(--ds-font-body); } header { border-bottom: 1px solid var(--ds-color-border); padding: var(--ds-space-2)
|
|
13864
|
+
"default": "css` :host { --ds-page-shell-max-width: 90rem; display: flex; flex-direction: column; position: relative; min-height: 100vh; overflow-x: clip; background: var(--ds-color-bg); color: var(--ds-color-fg); font-family: var(--ds-font-body); } header { border-bottom: 1px solid var(--ds-color-border); padding: var(--ds-space-2) 0; position: sticky; top: 0; background: color-mix(in oklab, var(--ds-color-bg) 92%, transparent); backdrop-filter: blur(12px); z-index: var(--ds-z-index-sticky); } footer { display: block; } .shell-inner { width: 100%; max-width: var(--ds-page-shell-max-width); margin-inline: auto; padding-inline: var(--ds-space-5); } .shell-inner--header { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); } .shell-body { flex: 1; width: 100%; max-width: var(--ds-page-shell-max-width); margin-inline: auto; display: grid; grid-template-columns: auto 1fr; min-height: 0; } :host([aside-empty]) .shell-body { grid-template-columns: 1fr; } aside { display: flex; overflow-x: clip; overflow-y: auto; min-height: 0; scrollbar-color: var(--ds-color-fg-subtle) transparent; scrollbar-width: thin; scrollbar-gutter: stable; } :host([aside-empty]) aside, :host([aside-empty]) .mobile-backdrop { display: none; } main { padding: var(--ds-space-5); overflow-y: auto; min-height: 0; scrollbar-color: var(--ds-color-fg-subtle) transparent; scrollbar-width: thin; } .brand { font-family: var(--ds-font-display); font-size: var(--ds-font-size-lg); letter-spacing: var(--ds-letter-spacing-display); } .menu-toggle { display: inline-flex; } .mobile-backdrop { display: none; } .drawer-header { display: none; } .drawer-close { display: none; } .menu-toggle::part(button), .drawer-close::part(button) { min-width: var(--ds-size-sm); width: var(--ds-size-sm); padding: 0; } :host(:not([mobile-layout])) .menu-toggle { display: none; } :host([mobile-layout]) .shell-body { grid-template-columns: 1fr; } :host([mobile-layout]) .brand { flex: 1; } :host([mobile-layout]) aside { position: absolute; top: 0; left: 0; width: 16rem; display: flex; flex-direction: column; height: 100%; background: var(--ds-color-bg); border-right: 0; z-index: var(--ds-z-index-modal); transform: translateX(-100%); transition: transform var(--ds-duration-slow) var(--ds-easing-standard); scrollbar-gutter: auto; overflow: hidden; box-sizing: border-box; } :host([mobile-layout][data-mobile-nav-open]) aside { transform: translateX(0); } :host([mobile-layout]) .drawer-header { display: flex; align-items: center; padding: var(--ds-space-2) var(--ds-space-2) 0; } :host([mobile-layout]) .drawer-close { display: inline-flex; margin: 0; } :host([mobile-layout]) aside ::slotted(ds-sidenav) { width: 100% !important; max-width: 100% !important; flex: 1 1 auto; min-width: 0; min-height: 0; height: auto !important; } :host([mobile-layout][data-mobile-nav-open]) .mobile-backdrop { display: block; position: absolute; inset: 0; border: 0; margin: 0; padding: 0; background: color-mix(in oklab, var(--ds-color-fg) 26%, transparent); z-index: var(--ds-z-index-overlay); } `"
|
|
13825
13865
|
}
|
|
13826
13866
|
],
|
|
13827
13867
|
"exports": [
|
|
@@ -13845,7 +13885,7 @@
|
|
|
13845
13885
|
"name": "DsPageShell",
|
|
13846
13886
|
"cssProperties": [
|
|
13847
13887
|
{
|
|
13848
|
-
"description": "Outer cap for the shell's content column. Header inner content
|
|
13888
|
+
"description": "Outer cap for the shell's content column. Header inner content and the aside + main row centre at this width and align vertically. Defaults to `90rem` (1440px). Header chrome remains full-bleed.",
|
|
13849
13889
|
"name": "--ds-page-shell-max-width"
|
|
13850
13890
|
}
|
|
13851
13891
|
],
|
|
@@ -13926,6 +13966,20 @@
|
|
|
13926
13966
|
},
|
|
13927
13967
|
"default": "null"
|
|
13928
13968
|
},
|
|
13969
|
+
{
|
|
13970
|
+
"kind": "field",
|
|
13971
|
+
"name": "#slotObserver",
|
|
13972
|
+
"privacy": "private",
|
|
13973
|
+
"type": {
|
|
13974
|
+
"text": "MutationObserver | null"
|
|
13975
|
+
},
|
|
13976
|
+
"default": "null"
|
|
13977
|
+
},
|
|
13978
|
+
{
|
|
13979
|
+
"kind": "field",
|
|
13980
|
+
"name": "#syncSlotPresence",
|
|
13981
|
+
"privacy": "private"
|
|
13982
|
+
},
|
|
13929
13983
|
{
|
|
13930
13984
|
"kind": "field",
|
|
13931
13985
|
"name": "#syncLayout",
|
|
@@ -13991,7 +14045,7 @@
|
|
|
13991
14045
|
},
|
|
13992
14046
|
"tagName": "ds-page-shell",
|
|
13993
14047
|
"customElement": true,
|
|
13994
|
-
"summary": "Application frame: header + aside + main + footer with responsive collapse."
|
|
14048
|
+
"summary": "Application frame: header + aside + main + optional footer with responsive collapse."
|
|
13995
14049
|
}
|
|
13996
14050
|
],
|
|
13997
14051
|
"exports": [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"breadcrumb-item.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/breadcrumb/breadcrumb-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB,
|
|
1
|
+
{"version":3,"file":"breadcrumb-item.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/breadcrumb/breadcrumb-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB,yBAyChC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"breadcrumb-item.styles.js","sourceRoot":"","sources":["../../../src/atoms/breadcrumb/breadcrumb-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"breadcrumb-item.styles.js","sourceRoot":"","sources":["../../../src/atoms/breadcrumb/breadcrumb-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCtC,CAAC"}
|
|
@@ -9,6 +9,7 @@ export type ButtonType = 'button' | 'submit' | 'reset';
|
|
|
9
9
|
* @slot default - The button label.
|
|
10
10
|
* @slot leading - Icon or adornment rendered before the label.
|
|
11
11
|
* @slot trailing - Icon or adornment rendered after the label.
|
|
12
|
+
* @attr {boolean} square - Forces an icon-sized square button and ignores the text-button min width.
|
|
12
13
|
* @csspart button - The internal `<button>` element.
|
|
13
14
|
* @event ds-click - Emitted when the button is activated.
|
|
14
15
|
*/
|
|
@@ -21,6 +22,7 @@ export declare class DsButton extends DsElement {
|
|
|
21
22
|
disabled: boolean;
|
|
22
23
|
loading: boolean;
|
|
23
24
|
fullWidth: boolean;
|
|
25
|
+
square: boolean;
|
|
24
26
|
label?: string;
|
|
25
27
|
ariaControlsAttr?: string;
|
|
26
28
|
ariaExpandedAttr?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/atoms/button/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGjD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;AACzE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEvD
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/atoms/button/button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGjD,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;AACzE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC5C,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEvD;;;;;;;;;GASG;AACH,qBAAa,QAAS,SAAQ,SAAS;;IACrC,OAAgB,MAAM,4BAAuC;IAEhC,OAAO,EAAE,aAAa,CAAa;IACnC,IAAI,EAAE,UAAU,CAAQ;IACxB,IAAI,EAAE,UAAU,CAAY;IACb,QAAQ,UAAS;IACjB,OAAO,UAAS;IACS,SAAS,UAAS;IAC3C,MAAM,UAAS;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACe,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;IA+BzD,MAAM,IAAI,cAAc;CAkClC"}
|
|
@@ -14,6 +14,7 @@ import { buttonStyles } from './button.styles.js';
|
|
|
14
14
|
* @slot default - The button label.
|
|
15
15
|
* @slot leading - Icon or adornment rendered before the label.
|
|
16
16
|
* @slot trailing - Icon or adornment rendered after the label.
|
|
17
|
+
* @attr {boolean} square - Forces an icon-sized square button and ignores the text-button min width.
|
|
17
18
|
* @csspart button - The internal `<button>` element.
|
|
18
19
|
* @event ds-click - Emitted when the button is activated.
|
|
19
20
|
*/
|
|
@@ -26,6 +27,7 @@ export class DsButton extends DsElement {
|
|
|
26
27
|
this.disabled = false;
|
|
27
28
|
this.loading = false;
|
|
28
29
|
this.fullWidth = false;
|
|
30
|
+
this.square = false;
|
|
29
31
|
this.#handleClick = (event) => {
|
|
30
32
|
if (this.disabled || this.loading) {
|
|
31
33
|
event.preventDefault();
|
|
@@ -109,6 +111,9 @@ __decorate([
|
|
|
109
111
|
__decorate([
|
|
110
112
|
property({ type: Boolean, reflect: true, attribute: 'full-width' })
|
|
111
113
|
], DsButton.prototype, "fullWidth", void 0);
|
|
114
|
+
__decorate([
|
|
115
|
+
property({ type: Boolean, reflect: true })
|
|
116
|
+
], DsButton.prototype, "square", void 0);
|
|
112
117
|
__decorate([
|
|
113
118
|
property()
|
|
114
119
|
], DsButton.prototype, "label", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/atoms/button/button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAMlD
|
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/atoms/button/button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAMlD;;;;;;;;;GASG;AACH,MAAM,OAAO,QAAS,SAAQ,SAAS;IAAvC;;QAG+B,YAAO,GAAkB,SAAS,CAAC;QACnC,SAAI,GAAe,IAAI,CAAC;QACxB,SAAI,GAAe,QAAQ,CAAC;QACb,aAAQ,GAAG,KAAK,CAAC;QACjB,YAAO,GAAG,KAAK,CAAC;QACS,cAAS,GAAG,KAAK,CAAC;QAC3C,WAAM,GAAG,KAAK,CAAC;QAO3D,iBAAY,GAAG,CAAC,KAAiB,EAAQ,EAAE;YACzC,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;gBAClC,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,KAAK,CAAC,wBAAwB,EAAE,CAAC;gBACjC,OAAO;YACT,CAAC;YACD,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;gBACpD,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,CAAC;YACD,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE,MAAM,EAAE,EAAE,aAAa,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;QAC9D,CAAC,CAAC;IAqDJ,CAAC;aA9EiB,WAAM,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,YAAY,CAAC,AAAtC,CAAuC;IAe7D,YAAY,CAUV;IAEF,eAAe;QACb,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;QAC5D,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,OAAO;QACT,CAAC;QACD,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;YAC3B,IAAI,CAAC,aAAa,EAAE,CAAC;QACvB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC;IACH,CAAC;IAED,eAAe;QACb,MAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;QACrC,OAAO,IAAI,EAAE,UAAU,EAAE,aAAa,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC;IACzD,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;;;eAIA,IAAI,CAAC,IAAI;wBACA,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;oBACpD,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;wBAC3B,IAAI,CAAC,gBAAgB,IAAI,OAAO;wBAChC,IAAI,CAAC,gBAAgB,IAAI,OAAO;wBAChC,IAAI,CAAC,gBAAgB,IAAI,OAAO;uBACjC,IAAI,CAAC,eAAe,IAAI,OAAO;qBACjC,IAAI,CAAC,KAAK,IAAI,OAAO;iBACzB,IAAI,CAAC,YAAY;;UAExB,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA;;;;;;;;;;;mBAWG;YACT,CAAC,CAAC,IAAI,CAAA,8BAA8B;;;;KAIzC,CAAC;IACJ,CAAC;;AA3E4B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAoC;AACnC;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAAyB;AACxB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCAA6B;AACb;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAkB;AACjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAAiB;AACS;IAApE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;2CAAmB;AAC3C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAgB;AAC/C;IAAX,QAAQ,EAAE;uCAAgB;AACe;IAAzC,QAAQ,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;kDAA2B;AAC1B;IAAzC,QAAQ,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;kDAA2B;AAC1B;IAAzC,QAAQ,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;kDAA2B;AAC3B;IAAxC,QAAQ,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC;iDAA0B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/button/button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,
|
|
1
|
+
{"version":3,"file":"button.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/button/button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBA4GxB,CAAC"}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
2
|
export const buttonStyles = css `
|
|
3
3
|
:host {
|
|
4
|
+
--ds-button-size: var(--ds-size-md);
|
|
5
|
+
--ds-button-min-width: 4.5rem;
|
|
4
6
|
display: inline-flex;
|
|
5
7
|
vertical-align: middle;
|
|
6
8
|
}
|
|
@@ -10,8 +12,8 @@ export const buttonStyles = css `
|
|
|
10
12
|
justify-content: center;
|
|
11
13
|
gap: var(--ds-space-1);
|
|
12
14
|
padding: 0 var(--ds-space-2);
|
|
13
|
-
height: var(--ds-size
|
|
14
|
-
min-width: var(--ds-
|
|
15
|
+
height: var(--ds-button-size);
|
|
16
|
+
min-width: var(--ds-button-min-width);
|
|
15
17
|
border-radius: var(--ds-radius-sm);
|
|
16
18
|
border: 1px solid transparent;
|
|
17
19
|
font-family: var(--ds-font-body);
|
|
@@ -31,7 +33,6 @@ export const buttonStyles = css `
|
|
|
31
33
|
-webkit-tap-highlight-color: transparent;
|
|
32
34
|
}
|
|
33
35
|
.btn:focus-visible {
|
|
34
|
-
outline: 2px solid transparent;
|
|
35
36
|
box-shadow: var(--ds-shadow-focus);
|
|
36
37
|
}
|
|
37
38
|
.btn:active:not([aria-disabled='true']) {
|
|
@@ -84,12 +85,19 @@ export const buttonStyles = css `
|
|
|
84
85
|
background: var(--ds-color-danger);
|
|
85
86
|
color: var(--ds-color-accent-fg);
|
|
86
87
|
}
|
|
88
|
+
:host([square]) .btn {
|
|
89
|
+
width: var(--ds-button-size);
|
|
90
|
+
min-width: var(--ds-button-size);
|
|
91
|
+
padding: 0;
|
|
92
|
+
}
|
|
87
93
|
:host([size='sm']) .btn {
|
|
88
|
-
|
|
94
|
+
--ds-button-size: var(--ds-size-sm);
|
|
95
|
+
--ds-button-min-width: 4rem;
|
|
89
96
|
font-size: var(--ds-font-size-xs);
|
|
90
97
|
}
|
|
91
98
|
:host([size='lg']) .btn {
|
|
92
|
-
|
|
99
|
+
--ds-button-size: var(--ds-size-lg);
|
|
100
|
+
--ds-button-min-width: 5rem;
|
|
93
101
|
font-size: var(--ds-font-size-md);
|
|
94
102
|
}
|
|
95
103
|
:host([full-width]) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../../src/atoms/button/button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../../src/atoms/button/button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4G9B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"link.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/link/link.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"link.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/link/link.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,yBAgCtB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"link.styles.js","sourceRoot":"","sources":["../../../src/atoms/link/link.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"link.styles.js","sourceRoot":"","sources":["../../../src/atoms/link/link.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgC5B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu-item.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/menu/menu-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,
|
|
1
|
+
{"version":3,"file":"menu-item.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/menu/menu-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,yBAiE1B,CAAC"}
|