@jsekulowicz/ds-components 0.3.1 → 0.4.1
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 +175 -121
- 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
|
@@ -898,102 +898,6 @@
|
|
|
898
898
|
}
|
|
899
899
|
]
|
|
900
900
|
},
|
|
901
|
-
{
|
|
902
|
-
"kind": "javascript-module",
|
|
903
|
-
"path": "src/test-utils/mount.ts",
|
|
904
|
-
"declarations": [
|
|
905
|
-
{
|
|
906
|
-
"kind": "function",
|
|
907
|
-
"name": "resetTestDom",
|
|
908
|
-
"return": {
|
|
909
|
-
"type": {
|
|
910
|
-
"text": "void"
|
|
911
|
-
}
|
|
912
|
-
}
|
|
913
|
-
},
|
|
914
|
-
{
|
|
915
|
-
"kind": "function",
|
|
916
|
-
"name": "mount",
|
|
917
|
-
"return": {
|
|
918
|
-
"type": {
|
|
919
|
-
"text": "Promise<T>"
|
|
920
|
-
}
|
|
921
|
-
},
|
|
922
|
-
"parameters": [
|
|
923
|
-
{
|
|
924
|
-
"name": "template",
|
|
925
|
-
"type": {
|
|
926
|
-
"text": "string"
|
|
927
|
-
}
|
|
928
|
-
},
|
|
929
|
-
{
|
|
930
|
-
"name": "selector",
|
|
931
|
-
"optional": true,
|
|
932
|
-
"type": {
|
|
933
|
-
"text": "string"
|
|
934
|
-
}
|
|
935
|
-
}
|
|
936
|
-
]
|
|
937
|
-
},
|
|
938
|
-
{
|
|
939
|
-
"kind": "function",
|
|
940
|
-
"name": "mountWithProps",
|
|
941
|
-
"return": {
|
|
942
|
-
"type": {
|
|
943
|
-
"text": "Promise<T>"
|
|
944
|
-
}
|
|
945
|
-
},
|
|
946
|
-
"parameters": [
|
|
947
|
-
{
|
|
948
|
-
"name": "template",
|
|
949
|
-
"type": {
|
|
950
|
-
"text": "string"
|
|
951
|
-
}
|
|
952
|
-
},
|
|
953
|
-
{
|
|
954
|
-
"name": "props",
|
|
955
|
-
"default": "{}",
|
|
956
|
-
"type": {
|
|
957
|
-
"text": "Partial<T>"
|
|
958
|
-
}
|
|
959
|
-
},
|
|
960
|
-
{
|
|
961
|
-
"name": "selector",
|
|
962
|
-
"optional": true,
|
|
963
|
-
"type": {
|
|
964
|
-
"text": "string"
|
|
965
|
-
}
|
|
966
|
-
}
|
|
967
|
-
]
|
|
968
|
-
}
|
|
969
|
-
],
|
|
970
|
-
"exports": [
|
|
971
|
-
{
|
|
972
|
-
"kind": "js",
|
|
973
|
-
"name": "resetTestDom",
|
|
974
|
-
"declaration": {
|
|
975
|
-
"name": "resetTestDom",
|
|
976
|
-
"module": "src/test-utils/mount.ts"
|
|
977
|
-
}
|
|
978
|
-
},
|
|
979
|
-
{
|
|
980
|
-
"kind": "js",
|
|
981
|
-
"name": "mount",
|
|
982
|
-
"declaration": {
|
|
983
|
-
"name": "mount",
|
|
984
|
-
"module": "src/test-utils/mount.ts"
|
|
985
|
-
}
|
|
986
|
-
},
|
|
987
|
-
{
|
|
988
|
-
"kind": "js",
|
|
989
|
-
"name": "mountWithProps",
|
|
990
|
-
"declaration": {
|
|
991
|
-
"name": "mountWithProps",
|
|
992
|
-
"module": "src/test-utils/mount.ts"
|
|
993
|
-
}
|
|
994
|
-
}
|
|
995
|
-
]
|
|
996
|
-
},
|
|
997
901
|
{
|
|
998
902
|
"kind": "javascript-module",
|
|
999
903
|
"path": "src/atoms/badge/badge.styles.ts",
|
|
@@ -1109,6 +1013,102 @@
|
|
|
1109
1013
|
}
|
|
1110
1014
|
]
|
|
1111
1015
|
},
|
|
1016
|
+
{
|
|
1017
|
+
"kind": "javascript-module",
|
|
1018
|
+
"path": "src/test-utils/mount.ts",
|
|
1019
|
+
"declarations": [
|
|
1020
|
+
{
|
|
1021
|
+
"kind": "function",
|
|
1022
|
+
"name": "resetTestDom",
|
|
1023
|
+
"return": {
|
|
1024
|
+
"type": {
|
|
1025
|
+
"text": "void"
|
|
1026
|
+
}
|
|
1027
|
+
}
|
|
1028
|
+
},
|
|
1029
|
+
{
|
|
1030
|
+
"kind": "function",
|
|
1031
|
+
"name": "mount",
|
|
1032
|
+
"return": {
|
|
1033
|
+
"type": {
|
|
1034
|
+
"text": "Promise<T>"
|
|
1035
|
+
}
|
|
1036
|
+
},
|
|
1037
|
+
"parameters": [
|
|
1038
|
+
{
|
|
1039
|
+
"name": "template",
|
|
1040
|
+
"type": {
|
|
1041
|
+
"text": "string"
|
|
1042
|
+
}
|
|
1043
|
+
},
|
|
1044
|
+
{
|
|
1045
|
+
"name": "selector",
|
|
1046
|
+
"optional": true,
|
|
1047
|
+
"type": {
|
|
1048
|
+
"text": "string"
|
|
1049
|
+
}
|
|
1050
|
+
}
|
|
1051
|
+
]
|
|
1052
|
+
},
|
|
1053
|
+
{
|
|
1054
|
+
"kind": "function",
|
|
1055
|
+
"name": "mountWithProps",
|
|
1056
|
+
"return": {
|
|
1057
|
+
"type": {
|
|
1058
|
+
"text": "Promise<T>"
|
|
1059
|
+
}
|
|
1060
|
+
},
|
|
1061
|
+
"parameters": [
|
|
1062
|
+
{
|
|
1063
|
+
"name": "template",
|
|
1064
|
+
"type": {
|
|
1065
|
+
"text": "string"
|
|
1066
|
+
}
|
|
1067
|
+
},
|
|
1068
|
+
{
|
|
1069
|
+
"name": "props",
|
|
1070
|
+
"default": "{}",
|
|
1071
|
+
"type": {
|
|
1072
|
+
"text": "Partial<T>"
|
|
1073
|
+
}
|
|
1074
|
+
},
|
|
1075
|
+
{
|
|
1076
|
+
"name": "selector",
|
|
1077
|
+
"optional": true,
|
|
1078
|
+
"type": {
|
|
1079
|
+
"text": "string"
|
|
1080
|
+
}
|
|
1081
|
+
}
|
|
1082
|
+
]
|
|
1083
|
+
}
|
|
1084
|
+
],
|
|
1085
|
+
"exports": [
|
|
1086
|
+
{
|
|
1087
|
+
"kind": "js",
|
|
1088
|
+
"name": "resetTestDom",
|
|
1089
|
+
"declaration": {
|
|
1090
|
+
"name": "resetTestDom",
|
|
1091
|
+
"module": "src/test-utils/mount.ts"
|
|
1092
|
+
}
|
|
1093
|
+
},
|
|
1094
|
+
{
|
|
1095
|
+
"kind": "js",
|
|
1096
|
+
"name": "mount",
|
|
1097
|
+
"declaration": {
|
|
1098
|
+
"name": "mount",
|
|
1099
|
+
"module": "src/test-utils/mount.ts"
|
|
1100
|
+
}
|
|
1101
|
+
},
|
|
1102
|
+
{
|
|
1103
|
+
"kind": "js",
|
|
1104
|
+
"name": "mountWithProps",
|
|
1105
|
+
"declaration": {
|
|
1106
|
+
"name": "mountWithProps",
|
|
1107
|
+
"module": "src/test-utils/mount.ts"
|
|
1108
|
+
}
|
|
1109
|
+
}
|
|
1110
|
+
]
|
|
1111
|
+
},
|
|
1112
1112
|
{
|
|
1113
1113
|
"kind": "javascript-module",
|
|
1114
1114
|
"path": "src/atoms/breadcrumb/breadcrumb-item.styles.ts",
|
|
@@ -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) 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 {
|
|
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: auto; min-width: 0; 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": [
|