@jsekulowicz/ds-components 0.4.1 → 0.5.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 +141 -102
- package/dist/atoms/icon/icon.d.ts +1 -1
- package/dist/atoms/icon/icon.d.ts.map +1 -1
- package/dist/atoms/icon/icon.js +4 -3
- package/dist/atoms/icon/icon.js.map +1 -1
- package/dist/atoms/icon/icon.styles.d.ts.map +1 -1
- package/dist/atoms/icon/icon.styles.js +8 -0
- package/dist/atoms/icon/icon.styles.js.map +1 -1
- package/dist/organisms/footer/footer.styles.d.ts.map +1 -1
- package/dist/organisms/footer/footer.styles.js +6 -1
- package/dist/organisms/footer/footer.styles.js.map +1 -1
- package/dist/organisms/navbar/navbar.js +1 -1
- package/dist/organisms/navbar/navbar.styles.d.ts.map +1 -1
- package/dist/organisms/navbar/navbar.styles.js +7 -1
- package/dist/organisms/navbar/navbar.styles.js.map +1 -1
- package/dist/organisms/sidenav/sidenav.styles.d.ts.map +1 -1
- package/dist/organisms/sidenav/sidenav.styles.js +5 -1
- package/dist/organisms/sidenav/sidenav.styles.js.map +1 -1
- package/dist/templates/page-shell/page-shell.d.ts +5 -1
- package/dist/templates/page-shell/page-shell.d.ts.map +1 -1
- package/dist/templates/page-shell/page-shell.js +38 -4
- 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 +62 -8
- package/dist/templates/page-shell/page-shell.styles.js.map +1 -1
- package/package.json +3 -3
package/custom-elements.json
CHANGED
|
@@ -898,6 +898,102 @@
|
|
|
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
|
+
},
|
|
901
997
|
{
|
|
902
998
|
"kind": "javascript-module",
|
|
903
999
|
"path": "src/atoms/badge/badge.styles.ts",
|
|
@@ -1013,102 +1109,6 @@
|
|
|
1013
1109
|
}
|
|
1014
1110
|
]
|
|
1015
1111
|
},
|
|
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",
|
|
@@ -2457,7 +2457,7 @@
|
|
|
2457
2457
|
{
|
|
2458
2458
|
"kind": "variable",
|
|
2459
2459
|
"name": "iconStyles",
|
|
2460
|
-
"default": "css` :host { display: inline-flex; width: 1em; height: 1em; color: currentColor; vertical-align: middle; flex-shrink: 0; } :host([size='sm']) { width: 0.875em; height: 0.875em; } :host([size='lg']) { width: 1.25em; height: 1.25em; } svg { width: 100%; height: 100%; display: block; } `"
|
|
2460
|
+
"default": "css` :host { display: inline-flex; width: 1em; height: 1em; color: currentColor; vertical-align: middle; flex-shrink: 0; } :host([size='sm']) { width: 0.875em; height: 0.875em; } :host([size='lg']) { width: 1.25em; height: 1.25em; } :host([size='xl']) { width: 1.25rem; height: 1.25rem; } :host([size='2xl']) { width: 1.5rem; height: 1.5rem; } svg { width: 100%; height: 100%; display: block; } `"
|
|
2461
2461
|
}
|
|
2462
2462
|
],
|
|
2463
2463
|
"exports": [
|
|
@@ -12965,7 +12965,7 @@
|
|
|
12965
12965
|
{
|
|
12966
12966
|
"kind": "variable",
|
|
12967
12967
|
"name": "footerStyles",
|
|
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);
|
|
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); font-size: var(--ds-font-size-xs); } .start, .middle, .end { gap: var(--ds-space-2); } } @media (max-width: ${belowDesktopBreakpoint}) { footer { padding-inline: var(--ds-space-4); } } `"
|
|
12969
12969
|
}
|
|
12970
12970
|
],
|
|
12971
12971
|
"exports": [
|
|
@@ -13296,7 +13296,7 @@
|
|
|
13296
13296
|
{
|
|
13297
13297
|
"kind": "variable",
|
|
13298
13298
|
"name": "navbarStyles",
|
|
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-
|
|
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-5); 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; } } @media (max-width: ${belowDesktopBreakpoint}) { nav { padding-inline: var(--ds-space-4); } } `"
|
|
13300
13300
|
}
|
|
13301
13301
|
],
|
|
13302
13302
|
"exports": [
|
|
@@ -13472,7 +13472,7 @@
|
|
|
13472
13472
|
{
|
|
13473
13473
|
"kind": "variable",
|
|
13474
13474
|
"name": "sidenavStyles",
|
|
13475
|
-
"default": "css` :host { --ds-sidenav-item-height: var(--ds-space-10, 2.5rem); --ds-sidenav-item-compact-size: var(--ds-space-12, 3rem); --ds-sidenav-width: var(--ds-space-64, 16rem); display: block; width: var(--ds-sidenav-width); max-width: 100%; transition: width var(--ds-duration-slow) var(--ds-easing-standard); } :host([collapsed]) { --ds-sidenav-collapsed-width: var(--ds-space-14, 3.5rem); justify-items: flex-start; width: var(--ds-sidenav-collapsed-width); nav { width: var(--ds-sidenav-collapsed-width); scrollbar-width: none; } } nav { display: flex; flex-direction: column; height: 100%; padding: var(--ds-space-
|
|
13475
|
+
"default": "css` :host { --ds-sidenav-item-height: var(--ds-space-10, 2.5rem); --ds-sidenav-item-compact-size: var(--ds-space-12, 3rem); --ds-sidenav-width: var(--ds-space-64, 16rem); display: block; width: var(--ds-sidenav-width); max-width: 100%; transition: width var(--ds-duration-slow) var(--ds-easing-standard); } :host([collapsed]) { --ds-sidenav-collapsed-width: var(--ds-space-14, 3.5rem); justify-items: flex-start; width: var(--ds-sidenav-collapsed-width); nav { width: var(--ds-sidenav-collapsed-width); padding: var(--ds-space-4) var(--ds-space-1); scrollbar-width: none; } } nav { display: flex; flex-direction: column; height: 100%; padding: var(--ds-space-4); background: var(--ds-color-bg); overflow-x: clip; overflow-y: auto; scrollbar-color: var(--ds-color-fg-subtle) transparent; scrollbar-width: thin; } .header { padding: 0 var(--ds-space-3); margin-bottom: var(--ds-space-3); font-family: var(--ds-font-display); font-size: var(--ds-font-size-lg); color: var(--ds-color-fg); } .header[hidden], .footer[hidden] { display: none; } .list { display: flex; flex-direction: column; gap: var(--ds-space-1); flex: 1; min-height: 0; } .footer { margin-top: var(--ds-space-4); border-top: 1px solid var(--ds-color-border); display: flex; flex-direction: column; gap: var(--ds-space-1); } :host-context(ds-page-shell[mobile-layout]) nav { padding-block: var(--ds-space-2); } :host-context(ds-page-shell:not([mobile-layout])) nav { border-right: 1px solid var(--ds-color-border); } `"
|
|
13476
13476
|
}
|
|
13477
13477
|
],
|
|
13478
13478
|
"exports": [
|
|
@@ -13861,7 +13861,7 @@
|
|
|
13861
13861
|
{
|
|
13862
13862
|
"kind": "variable",
|
|
13863
13863
|
"name": "pageShellStyles",
|
|
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:
|
|
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 auto; min-height: 0; } :host([aside-empty]) .shell-body { grid-template-columns: 1fr auto; } :host([aside-end-empty]) .shell-body { grid-template-columns: auto 1fr; } :host([aside-empty][aside-end-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; /* No scrollbar-gutter reservation: the aside sits flush with its column edge so the consumer's <main> solely owns the gap. The scrollbar appears on demand when the aside genuinely overflows. */ } :host([aside-empty]) aside[part=\"aside\"], :host([aside-empty]) .mobile-backdrop { display: none; } :host([aside-end-empty]) aside[part=\"aside-end\"] { 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; /* Reserve scrollbar gutters on both inline sides so the horizontal content position stays symmetric whether the vertical scrollbar is present or not. Without this, an overflowing main has its content pushed inward on the inline-end side only (asymmetric margins). */ scrollbar-gutter: stable both-edges; } @media (max-width: ${belowDesktopBreakpoint}) { .shell-inner { padding-inline: var(--ds-space-4); } main { padding: var(--ds-space-4) var(--ds-space-2); } } .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-brand { 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]) aside[part=\"aside-end\"] { /* Secondary inline-end region is not surfaced in the mobile drawer in v1. Consumers can opt back in by overriding via ::part(aside-end). */ display: none; } :host([mobile-layout]) .brand { flex: 1; } :host([mobile-layout]) aside[part=\"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[part=\"aside\"] { transform: translateX(0); } :host([mobile-layout]) .drawer-header { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-3); padding: var(--ds-space-2) var(--ds-space-4); } :host([mobile-layout]) .drawer-brand { display: inline-flex; align-items: center; flex: 1; min-width: 0; font-family: var(--ds-font-display); font-size: var(--ds-font-size-lg); letter-spacing: var(--ds-letter-spacing-display); } :host([mobile-layout]) slot[name='drawer-brand']::slotted(*) { max-width: 100%; } :host([mobile-layout]) .drawer-close { display: inline-flex; flex: 0 0 auto; margin: 0; } :host([mobile-layout]) aside[part=\"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); } `"
|
|
13865
13865
|
}
|
|
13866
13866
|
],
|
|
13867
13867
|
"exports": [
|
|
@@ -13894,14 +13894,22 @@
|
|
|
13894
13894
|
"description": "Top-left brand/logo.",
|
|
13895
13895
|
"name": "brand"
|
|
13896
13896
|
},
|
|
13897
|
+
{
|
|
13898
|
+
"description": "Brand/logo shown at the start of the mobile navigation drawer.",
|
|
13899
|
+
"name": "drawer-brand"
|
|
13900
|
+
},
|
|
13897
13901
|
{
|
|
13898
13902
|
"description": "Top-right actions.",
|
|
13899
13903
|
"name": "header-actions"
|
|
13900
13904
|
},
|
|
13901
13905
|
{
|
|
13902
|
-
"description": "
|
|
13906
|
+
"description": "Primary side navigation (inline-start). When empty, the column and hamburger toggle are not rendered.",
|
|
13903
13907
|
"name": "aside"
|
|
13904
13908
|
},
|
|
13909
|
+
{
|
|
13910
|
+
"description": "Secondary side region (inline-end), e.g. table of contents, contextual help. Hidden on mobile.",
|
|
13911
|
+
"name": "aside-end"
|
|
13912
|
+
},
|
|
13905
13913
|
{
|
|
13906
13914
|
"description": "Main content.",
|
|
13907
13915
|
"name": "default"
|
|
@@ -13930,6 +13938,15 @@
|
|
|
13930
13938
|
"default": "'Navigation menu'",
|
|
13931
13939
|
"attribute": "menu-label"
|
|
13932
13940
|
},
|
|
13941
|
+
{
|
|
13942
|
+
"kind": "field",
|
|
13943
|
+
"name": "endLabel",
|
|
13944
|
+
"type": {
|
|
13945
|
+
"text": "string"
|
|
13946
|
+
},
|
|
13947
|
+
"default": "'Secondary navigation'",
|
|
13948
|
+
"attribute": "end-label"
|
|
13949
|
+
},
|
|
13933
13950
|
{
|
|
13934
13951
|
"kind": "field",
|
|
13935
13952
|
"name": "_mobileNavOpen",
|
|
@@ -13948,6 +13965,15 @@
|
|
|
13948
13965
|
"privacy": "private",
|
|
13949
13966
|
"default": "false"
|
|
13950
13967
|
},
|
|
13968
|
+
{
|
|
13969
|
+
"kind": "field",
|
|
13970
|
+
"name": "_hasAsideEnd",
|
|
13971
|
+
"type": {
|
|
13972
|
+
"text": "boolean"
|
|
13973
|
+
},
|
|
13974
|
+
"privacy": "private",
|
|
13975
|
+
"default": "false"
|
|
13976
|
+
},
|
|
13951
13977
|
{
|
|
13952
13978
|
"kind": "field",
|
|
13953
13979
|
"name": "_hasFooter",
|
|
@@ -14015,6 +14041,11 @@
|
|
|
14015
14041
|
"name": "#onAsideSlotChange",
|
|
14016
14042
|
"privacy": "private"
|
|
14017
14043
|
},
|
|
14044
|
+
{
|
|
14045
|
+
"kind": "field",
|
|
14046
|
+
"name": "#onAsideEndSlotChange",
|
|
14047
|
+
"privacy": "private"
|
|
14048
|
+
},
|
|
14018
14049
|
{
|
|
14019
14050
|
"kind": "field",
|
|
14020
14051
|
"name": "#onFooterSlotChange",
|
|
@@ -14037,6 +14068,14 @@
|
|
|
14037
14068
|
},
|
|
14038
14069
|
"default": "'Navigation menu'",
|
|
14039
14070
|
"fieldName": "menuLabel"
|
|
14071
|
+
},
|
|
14072
|
+
{
|
|
14073
|
+
"name": "end-label",
|
|
14074
|
+
"type": {
|
|
14075
|
+
"text": "string"
|
|
14076
|
+
},
|
|
14077
|
+
"default": "'Secondary navigation'",
|
|
14078
|
+
"fieldName": "endLabel"
|
|
14040
14079
|
}
|
|
14041
14080
|
],
|
|
14042
14081
|
"superclass": {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type TemplateResult } from 'lit';
|
|
2
2
|
import { DsElement } from '@jsekulowicz/ds-core';
|
|
3
|
-
export type IconSize = 'sm' | 'md' | 'lg';
|
|
3
|
+
export type IconSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
4
4
|
export declare function registerIcon(name: string, svgMarkup: string): void;
|
|
5
5
|
export declare function getIcon(name: string): string | undefined;
|
|
6
6
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/atoms/icon/icon.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/atoms/icon/icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,cAAc,EAA0B,MAAM,KAAK,CAAC;AAI7E,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGjD,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAIzD,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,CAElE;AAED,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAExD;AAED;;;;GAIG;AACH,qBAAa,MAAO,SAAQ,SAAS;IACnC,OAAgB,MAAM,4BAAqC;IAE/C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACE,IAAI,EAAE,QAAQ,CAAQ;IAC1C,OAAO,CAAC,GAAG,CAAkC;IAE7C,UAAU,IAAI,IAAI;IAclB,MAAM,IAAI,cAAc;CAWlC"}
|
package/dist/atoms/icon/icon.js
CHANGED
|
@@ -4,8 +4,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
4
4
|
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
5
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
6
|
};
|
|
7
|
-
import { html,
|
|
7
|
+
import { html, svg } from 'lit';
|
|
8
8
|
import { property, state } from 'lit/decorators.js';
|
|
9
|
+
import { ifDefined } from 'lit/directives/if-defined.js';
|
|
9
10
|
import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
|
|
10
11
|
import { DsElement } from '@jsekulowicz/ds-core';
|
|
11
12
|
import { iconStyles } from './icon.styles.js';
|
|
@@ -45,9 +46,9 @@ export class DsIcon extends DsElement {
|
|
|
45
46
|
const ariaHidden = this.label ? 'false' : 'true';
|
|
46
47
|
const role = this.label ? 'img' : undefined;
|
|
47
48
|
return html `<span
|
|
48
|
-
role=${role
|
|
49
|
+
role=${ifDefined(role)}
|
|
49
50
|
aria-hidden=${ariaHidden}
|
|
50
|
-
aria-label=${this.label
|
|
51
|
+
aria-label=${ifDefined(this.label)}
|
|
51
52
|
>
|
|
52
53
|
${this.svg ? this.svg : html `<slot></slot>`}
|
|
53
54
|
</span>`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/atoms/icon/icon.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../src/atoms/icon/icon.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAA+C,MAAM,KAAK,CAAC;AAC7E,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAI9C,MAAM,QAAQ,GAAG,IAAI,GAAG,EAAkB,CAAC;AAE3C,MAAM,UAAU,YAAY,CAAC,IAAY,EAAE,SAAiB;IAC1D,QAAQ,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;AAChC,CAAC;AAED,MAAM,UAAU,OAAO,CAAC,IAAY;IAClC,OAAO,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;AAC5B,CAAC;AAED;;;;GAIG;AACH,MAAM,OAAO,MAAO,SAAQ,SAAS;IAArC;;QAK+B,SAAI,GAAa,IAAI,CAAC;QAClC,QAAG,GAA6B,IAAI,CAAC;IA2BxD,CAAC;aAhCiB,WAAM,GAAG,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,UAAU,CAAC,AAApC,CAAqC;IAOlD,UAAU;QACjB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC;YAChB,OAAO;QACT,CAAC;QACD,MAAM,MAAM,GAAG,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACvC,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC;YAChB,OAAO,CAAC,IAAI,CAAC,4BAA4B,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;YACvD,OAAO;QACT,CAAC;QACD,IAAI,CAAC,GAAG,GAAG,GAAG,CAAA,GAAG,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC;IACvC,CAAC;IAEQ,MAAM;QACb,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;QACjD,MAAM,IAAI,GAAsB,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;QAC/D,OAAO,IAAI,CAAA;aACF,SAAS,CAAC,IAAI,CAAC;oBACR,UAAU;mBACX,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;;QAEhC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAA,eAAe;YACrC,CAAC;IACX,CAAC;;AA7BW;IAAX,QAAQ,EAAE;oCAAe;AACd;IAAX,QAAQ,EAAE;qCAAgB;AACE;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oCAAuB;AAClC;IAAhB,KAAK,EAAE;mCAA8C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/icon/icon.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,
|
|
1
|
+
{"version":3,"file":"icon.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/icon/icon.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,yBA8BtB,CAAC"}
|
|
@@ -16,6 +16,14 @@ export const iconStyles = css `
|
|
|
16
16
|
width: 1.25em;
|
|
17
17
|
height: 1.25em;
|
|
18
18
|
}
|
|
19
|
+
:host([size='xl']) {
|
|
20
|
+
width: 1.25rem;
|
|
21
|
+
height: 1.25rem;
|
|
22
|
+
}
|
|
23
|
+
:host([size='2xl']) {
|
|
24
|
+
width: 1.5rem;
|
|
25
|
+
height: 1.5rem;
|
|
26
|
+
}
|
|
19
27
|
svg {
|
|
20
28
|
width: 100%;
|
|
21
29
|
height: 100%;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon.styles.js","sourceRoot":"","sources":["../../../src/atoms/icon/icon.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"icon.styles.js","sourceRoot":"","sources":["../../../src/atoms/icon/icon.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8B5B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"footer.styles.d.ts","sourceRoot":"","sources":["../../../src/organisms/footer/footer.styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"footer.styles.d.ts","sourceRoot":"","sources":["../../../src/organisms/footer/footer.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY,yBA4CxB,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { css, unsafeCSS } from 'lit';
|
|
2
2
|
import { breakpoint } from '@jsekulowicz/ds-tokens';
|
|
3
3
|
const mobileBreakpoint = unsafeCSS(breakpoint.sm);
|
|
4
|
+
const belowDesktopBreakpoint = unsafeCSS(`calc(${breakpoint.lg} - 0.02px)`);
|
|
4
5
|
export const footerStyles = css `
|
|
5
6
|
:host {
|
|
6
7
|
display: block;
|
|
@@ -32,7 +33,6 @@ export const footerStyles = css `
|
|
|
32
33
|
@container (max-width: ${mobileBreakpoint}) {
|
|
33
34
|
footer {
|
|
34
35
|
gap: var(--ds-space-2);
|
|
35
|
-
padding: var(--ds-space-2) var(--ds-space-4);
|
|
36
36
|
font-size: var(--ds-font-size-xs);
|
|
37
37
|
}
|
|
38
38
|
.start,
|
|
@@ -41,5 +41,10 @@ export const footerStyles = css `
|
|
|
41
41
|
gap: var(--ds-space-2);
|
|
42
42
|
}
|
|
43
43
|
}
|
|
44
|
+
@media (max-width: ${belowDesktopBreakpoint}) {
|
|
45
|
+
footer {
|
|
46
|
+
padding-inline: var(--ds-space-4);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
44
49
|
`;
|
|
45
50
|
//# sourceMappingURL=footer.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"footer.styles.js","sourceRoot":"","sources":["../../../src/organisms/footer/footer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,gBAAgB,GAAG,SAAS,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"footer.styles.js","sourceRoot":"","sources":["../../../src/organisms/footer/footer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,gBAAgB,GAAG,SAAS,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;AAClD,MAAM,sBAAsB,GAAG,SAAS,CAAC,QAAQ,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAE5E,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BA4BJ,gBAAgB;;;;;;;;;;;uBAWpB,sBAAsB;;;;;CAK5C,CAAC"}
|
|
@@ -68,7 +68,7 @@ export class DsNavbar extends DsElement {
|
|
|
68
68
|
aria-controls=${menuId}
|
|
69
69
|
@click=${this.#onToggle}
|
|
70
70
|
>
|
|
71
|
-
<ds-icon name=${iconName} size="
|
|
71
|
+
<ds-icon name=${iconName} size="xl"></ds-icon>
|
|
72
72
|
</button>
|
|
73
73
|
<div class="menu" part="menu" id=${menuId} role="list">
|
|
74
74
|
<slot></slot>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navbar.styles.d.ts","sourceRoot":"","sources":["../../../src/organisms/navbar/navbar.styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"navbar.styles.d.ts","sourceRoot":"","sources":["../../../src/organisms/navbar/navbar.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY,yBAoFxB,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { css, unsafeCSS } from 'lit';
|
|
2
2
|
import { breakpoint } from '@jsekulowicz/ds-tokens';
|
|
3
3
|
const tabletBreakpoint = unsafeCSS(breakpoint.md);
|
|
4
|
+
const belowDesktopBreakpoint = unsafeCSS(`calc(${breakpoint.lg} - 0.02px)`);
|
|
4
5
|
export const navbarStyles = css `
|
|
5
6
|
:host {
|
|
6
7
|
display: block;
|
|
@@ -11,7 +12,7 @@ export const navbarStyles = css `
|
|
|
11
12
|
display: flex;
|
|
12
13
|
align-items: center;
|
|
13
14
|
gap: var(--ds-space-4);
|
|
14
|
-
padding: var(--ds-space-3) var(--ds-space-
|
|
15
|
+
padding: var(--ds-space-3) var(--ds-space-5);
|
|
15
16
|
background: var(--ds-color-bg);
|
|
16
17
|
border-bottom: 1px solid var(--ds-color-border);
|
|
17
18
|
font-family: var(--ds-font-body);
|
|
@@ -80,5 +81,10 @@ export const navbarStyles = css `
|
|
|
80
81
|
display: flex;
|
|
81
82
|
}
|
|
82
83
|
}
|
|
84
|
+
@media (max-width: ${belowDesktopBreakpoint}) {
|
|
85
|
+
nav {
|
|
86
|
+
padding-inline: var(--ds-space-4);
|
|
87
|
+
}
|
|
88
|
+
}
|
|
83
89
|
`;
|
|
84
90
|
//# sourceMappingURL=navbar.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navbar.styles.js","sourceRoot":"","sources":["../../../src/organisms/navbar/navbar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,gBAAgB,GAAG,SAAS,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"navbar.styles.js","sourceRoot":"","sources":["../../../src/organisms/navbar/navbar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,gBAAgB,GAAG,SAAS,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;AAClD,MAAM,sBAAsB,GAAG,SAAS,CAAC,QAAQ,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAE5E,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2BAmDJ,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA4BpB,sBAAsB;;;;;CAK5C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidenav.styles.d.ts","sourceRoot":"","sources":["../../../src/organisms/sidenav/sidenav.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,
|
|
1
|
+
{"version":3,"file":"sidenav.styles.d.ts","sourceRoot":"","sources":["../../../src/organisms/sidenav/sidenav.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,yBAgEzB,CAAC"}
|
|
@@ -17,6 +17,7 @@ export const sidenavStyles = css `
|
|
|
17
17
|
|
|
18
18
|
nav {
|
|
19
19
|
width: var(--ds-sidenav-collapsed-width);
|
|
20
|
+
padding: var(--ds-space-4) var(--ds-space-1);
|
|
20
21
|
scrollbar-width: none;
|
|
21
22
|
}
|
|
22
23
|
}
|
|
@@ -24,7 +25,7 @@ export const sidenavStyles = css `
|
|
|
24
25
|
display: flex;
|
|
25
26
|
flex-direction: column;
|
|
26
27
|
height: 100%;
|
|
27
|
-
padding: var(--ds-space-
|
|
28
|
+
padding: var(--ds-space-4);
|
|
28
29
|
background: var(--ds-color-bg);
|
|
29
30
|
overflow-x: clip;
|
|
30
31
|
overflow-y: auto;
|
|
@@ -56,6 +57,9 @@ export const sidenavStyles = css `
|
|
|
56
57
|
flex-direction: column;
|
|
57
58
|
gap: var(--ds-space-1);
|
|
58
59
|
}
|
|
60
|
+
:host-context(ds-page-shell[mobile-layout]) nav {
|
|
61
|
+
padding-block: var(--ds-space-2);
|
|
62
|
+
}
|
|
59
63
|
:host-context(ds-page-shell:not([mobile-layout])) nav {
|
|
60
64
|
border-right: 1px solid var(--ds-color-border);
|
|
61
65
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sidenav.styles.js","sourceRoot":"","sources":["../../../src/organisms/sidenav/sidenav.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"sidenav.styles.js","sourceRoot":"","sources":["../../../src/organisms/sidenav/sidenav.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgE/B,CAAC"}
|
|
@@ -8,8 +8,10 @@ import '../../atoms/icon/icons/x-mark.js';
|
|
|
8
8
|
* @tag ds-page-shell
|
|
9
9
|
* @summary Application frame: header + aside + main + optional footer with responsive collapse.
|
|
10
10
|
* @slot brand - Top-left brand/logo.
|
|
11
|
+
* @slot drawer-brand - Brand/logo shown at the start of the mobile navigation drawer.
|
|
11
12
|
* @slot header-actions - Top-right actions.
|
|
12
|
-
* @slot aside -
|
|
13
|
+
* @slot aside - Primary side navigation (inline-start). When empty, the column and hamburger toggle are not rendered.
|
|
14
|
+
* @slot aside-end - Secondary side region (inline-end), e.g. table of contents, contextual help. Hidden on mobile.
|
|
13
15
|
* @slot default - Main content.
|
|
14
16
|
* @slot footer - Footer content.
|
|
15
17
|
* @cssprop --ds-page-shell-max-width - Outer cap for the shell's content column. Header inner
|
|
@@ -21,8 +23,10 @@ export declare class DsPageShell extends DsElement {
|
|
|
21
23
|
static styles: import("lit").CSSResult[];
|
|
22
24
|
brand: string;
|
|
23
25
|
menuLabel: string;
|
|
26
|
+
endLabel: string;
|
|
24
27
|
private _mobileNavOpen;
|
|
25
28
|
private _hasAside;
|
|
29
|
+
private _hasAsideEnd;
|
|
26
30
|
private _hasFooter;
|
|
27
31
|
connectedCallback(): void;
|
|
28
32
|
disconnectedCallback(): void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"page-shell.d.ts","sourceRoot":"","sources":["../../../src/templates/page-shell/page-shell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,kCAAkC,CAAC;AAE1C
|
|
1
|
+
{"version":3,"file":"page-shell.d.ts","sourceRoot":"","sources":["../../../src/templates/page-shell/page-shell.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,kCAAkC,CAAC;AAE1C;;;;;;;;;;;;;GAaG;AACH,qBAAa,WAAY,SAAQ,SAAS;;IACxC,OAAgB,MAAM,4BAA0C;IAEpD,KAAK,SAAM;IACgB,SAAS,SAAqB;IAC/B,QAAQ,SAA0B;IAC/D,OAAO,CAAC,cAAc,CAAS;IAC/B,OAAO,CAAC,SAAS,CAAS;IAC1B,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,UAAU,CAAS;IAI3B,iBAAiB,IAAI,IAAI;IAuBzB,oBAAoB,IAAI,IAAI;IAS5B,YAAY,IAAI,IAAI;IAkFpB,MAAM,IAAI,cAAc;CA0ElC"}
|
|
@@ -16,8 +16,10 @@ import '../../atoms/icon/icons/x-mark.js';
|
|
|
16
16
|
* @tag ds-page-shell
|
|
17
17
|
* @summary Application frame: header + aside + main + optional footer with responsive collapse.
|
|
18
18
|
* @slot brand - Top-left brand/logo.
|
|
19
|
+
* @slot drawer-brand - Brand/logo shown at the start of the mobile navigation drawer.
|
|
19
20
|
* @slot header-actions - Top-right actions.
|
|
20
|
-
* @slot aside -
|
|
21
|
+
* @slot aside - Primary side navigation (inline-start). When empty, the column and hamburger toggle are not rendered.
|
|
22
|
+
* @slot aside-end - Secondary side region (inline-end), e.g. table of contents, contextual help. Hidden on mobile.
|
|
21
23
|
* @slot default - Main content.
|
|
22
24
|
* @slot footer - Footer content.
|
|
23
25
|
* @cssprop --ds-page-shell-max-width - Outer cap for the shell's content column. Header inner
|
|
@@ -29,17 +31,22 @@ export class DsPageShell extends DsElement {
|
|
|
29
31
|
super(...arguments);
|
|
30
32
|
this.brand = '';
|
|
31
33
|
this.menuLabel = 'Navigation menu';
|
|
34
|
+
this.endLabel = 'Secondary navigation';
|
|
32
35
|
this._mobileNavOpen = false;
|
|
33
36
|
this._hasAside = false;
|
|
37
|
+
this._hasAsideEnd = false;
|
|
34
38
|
this._hasFooter = false;
|
|
35
39
|
this.#resizeObserver = null;
|
|
36
40
|
this.#slotObserver = null;
|
|
37
41
|
this.#syncSlotPresence = () => {
|
|
38
42
|
const aside = this.shadowRoot?.querySelector('slot[name="aside"]');
|
|
43
|
+
const asideEnd = this.shadowRoot?.querySelector('slot[name="aside-end"]');
|
|
39
44
|
const footer = this.shadowRoot?.querySelector('slot[name="footer"]');
|
|
40
45
|
this._hasAside = hasNamedSlotContent(this, 'aside', aside);
|
|
46
|
+
this._hasAsideEnd = hasNamedSlotContent(this, 'aside-end', asideEnd);
|
|
41
47
|
this._hasFooter = hasNamedSlotContent(this, 'footer', footer);
|
|
42
48
|
this.toggleAttribute('aside-empty', !this._hasAside);
|
|
49
|
+
this.toggleAttribute('aside-end-empty', !this._hasAsideEnd);
|
|
43
50
|
this.toggleAttribute('footer-empty', !this._hasFooter);
|
|
44
51
|
};
|
|
45
52
|
this.#syncLayout = (width) => {
|
|
@@ -86,6 +93,11 @@ export class DsPageShell extends DsElement {
|
|
|
86
93
|
this._hasAside = hasAssignedContent(slot);
|
|
87
94
|
this.toggleAttribute('aside-empty', !this._hasAside);
|
|
88
95
|
};
|
|
96
|
+
this.#onAsideEndSlotChange = (event) => {
|
|
97
|
+
const slot = event.target;
|
|
98
|
+
this._hasAsideEnd = hasAssignedContent(slot);
|
|
99
|
+
this.toggleAttribute('aside-end-empty', !this._hasAsideEnd);
|
|
100
|
+
};
|
|
89
101
|
this.#onFooterSlotChange = (event) => {
|
|
90
102
|
const slot = event.target;
|
|
91
103
|
this._hasFooter = hasAssignedContent(slot);
|
|
@@ -136,6 +148,7 @@ export class DsPageShell extends DsElement {
|
|
|
136
148
|
#closeMobileNav;
|
|
137
149
|
#onAsideClick;
|
|
138
150
|
#onAsideSlotChange;
|
|
151
|
+
#onAsideEndSlotChange;
|
|
139
152
|
#onFooterSlotChange;
|
|
140
153
|
render() {
|
|
141
154
|
const menuIcon = this._mobileNavOpen ? 'x-mark' : 'bars-3';
|
|
@@ -154,7 +167,7 @@ export class DsPageShell extends DsElement {
|
|
|
154
167
|
aria-controls="mobile-aside"
|
|
155
168
|
@click=${this.#toggleMobileNav}
|
|
156
169
|
>
|
|
157
|
-
<ds-icon slot="leading" name=${menuIcon} size="
|
|
170
|
+
<ds-icon slot="leading" name=${menuIcon} size="xl"></ds-icon>
|
|
158
171
|
</ds-button>`
|
|
159
172
|
: null}
|
|
160
173
|
<div class="brand">
|
|
@@ -171,8 +184,16 @@ export class DsPageShell extends DsElement {
|
|
|
171
184
|
@click=${this.#closeMobileNav}
|
|
172
185
|
></button>
|
|
173
186
|
<div class="shell-body" part="body">
|
|
174
|
-
<aside
|
|
187
|
+
<aside
|
|
188
|
+
id="mobile-aside"
|
|
189
|
+
part="aside"
|
|
190
|
+
aria-label=${this.menuLabel}
|
|
191
|
+
@click=${this.#onAsideClick}
|
|
192
|
+
>
|
|
175
193
|
<div class="drawer-header">
|
|
194
|
+
<div class="drawer-brand">
|
|
195
|
+
<slot name="drawer-brand">${this.brand}</slot>
|
|
196
|
+
</div>
|
|
176
197
|
<ds-button
|
|
177
198
|
class="drawer-close"
|
|
178
199
|
variant="ghost"
|
|
@@ -181,7 +202,7 @@ export class DsPageShell extends DsElement {
|
|
|
181
202
|
aria-label="Close navigation"
|
|
182
203
|
@click=${this.#closeMobileNav}
|
|
183
204
|
>
|
|
184
|
-
<ds-icon slot="leading" name="x-mark" size="
|
|
205
|
+
<ds-icon slot="leading" name="x-mark" size="xl"></ds-icon>
|
|
185
206
|
</ds-button>
|
|
186
207
|
</div>
|
|
187
208
|
<slot name="aside" @slotchange=${this.#onAsideSlotChange}></slot>
|
|
@@ -189,6 +210,13 @@ export class DsPageShell extends DsElement {
|
|
|
189
210
|
<main part="main">
|
|
190
211
|
<slot></slot>
|
|
191
212
|
</main>
|
|
213
|
+
<aside
|
|
214
|
+
part="aside-end"
|
|
215
|
+
aria-label=${this.endLabel}
|
|
216
|
+
?hidden=${!this._hasAsideEnd}
|
|
217
|
+
>
|
|
218
|
+
<slot name="aside-end" @slotchange=${this.#onAsideEndSlotChange}></slot>
|
|
219
|
+
</aside>
|
|
192
220
|
</div>
|
|
193
221
|
${hasFooter
|
|
194
222
|
? html `<footer part="footer">
|
|
@@ -203,12 +231,18 @@ __decorate([
|
|
|
203
231
|
__decorate([
|
|
204
232
|
property({ attribute: 'menu-label' })
|
|
205
233
|
], DsPageShell.prototype, "menuLabel", void 0);
|
|
234
|
+
__decorate([
|
|
235
|
+
property({ attribute: 'end-label' })
|
|
236
|
+
], DsPageShell.prototype, "endLabel", void 0);
|
|
206
237
|
__decorate([
|
|
207
238
|
state()
|
|
208
239
|
], DsPageShell.prototype, "_mobileNavOpen", void 0);
|
|
209
240
|
__decorate([
|
|
210
241
|
state()
|
|
211
242
|
], DsPageShell.prototype, "_hasAside", void 0);
|
|
243
|
+
__decorate([
|
|
244
|
+
state()
|
|
245
|
+
], DsPageShell.prototype, "_hasAsideEnd", void 0);
|
|
212
246
|
__decorate([
|
|
213
247
|
state()
|
|
214
248
|
], DsPageShell.prototype, "_hasFooter", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"page-shell.js","sourceRoot":"","sources":["../../../src/templates/page-shell/page-shell.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAuB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,8BAA8B,CAAC;AACtC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,kCAAkC,CAAC;AAE1C
|
|
1
|
+
{"version":3,"file":"page-shell.js","sourceRoot":"","sources":["../../../src/templates/page-shell/page-shell.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"page-shell.styles.d.ts","sourceRoot":"","sources":["../../../src/templates/page-shell/page-shell.styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"page-shell.styles.d.ts","sourceRoot":"","sources":["../../../src/templates/page-shell/page-shell.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,eAAe,yBAsN3B,CAAC"}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
import { css } from 'lit';
|
|
1
|
+
import { css, unsafeCSS } from 'lit';
|
|
2
|
+
import { breakpoint } from '@jsekulowicz/ds-tokens';
|
|
3
|
+
const belowDesktopBreakpoint = unsafeCSS(`calc(${breakpoint.lg} - 0.02px)`);
|
|
2
4
|
export const pageShellStyles = css `
|
|
3
5
|
:host {
|
|
4
6
|
--ds-page-shell-max-width: 90rem;
|
|
@@ -47,11 +49,19 @@ export const pageShellStyles = css `
|
|
|
47
49
|
max-width: var(--ds-page-shell-max-width);
|
|
48
50
|
margin-inline: auto;
|
|
49
51
|
display: grid;
|
|
50
|
-
grid-template-columns: auto 1fr;
|
|
52
|
+
grid-template-columns: auto 1fr auto;
|
|
51
53
|
min-height: 0;
|
|
52
54
|
}
|
|
53
55
|
|
|
54
56
|
:host([aside-empty]) .shell-body {
|
|
57
|
+
grid-template-columns: 1fr auto;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
:host([aside-end-empty]) .shell-body {
|
|
61
|
+
grid-template-columns: auto 1fr;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
:host([aside-empty][aside-end-empty]) .shell-body {
|
|
55
65
|
grid-template-columns: 1fr;
|
|
56
66
|
}
|
|
57
67
|
|
|
@@ -62,14 +72,20 @@ export const pageShellStyles = css `
|
|
|
62
72
|
min-height: 0;
|
|
63
73
|
scrollbar-color: var(--ds-color-fg-subtle) transparent;
|
|
64
74
|
scrollbar-width: thin;
|
|
65
|
-
scrollbar-gutter:
|
|
75
|
+
/* No scrollbar-gutter reservation: the aside sits flush with its column
|
|
76
|
+
edge so the consumer's <main> solely owns the gap. The scrollbar
|
|
77
|
+
appears on demand when the aside genuinely overflows. */
|
|
66
78
|
}
|
|
67
79
|
|
|
68
|
-
:host([aside-empty]) aside,
|
|
80
|
+
:host([aside-empty]) aside[part="aside"],
|
|
69
81
|
:host([aside-empty]) .mobile-backdrop {
|
|
70
82
|
display: none;
|
|
71
83
|
}
|
|
72
84
|
|
|
85
|
+
:host([aside-end-empty]) aside[part="aside-end"] {
|
|
86
|
+
display: none;
|
|
87
|
+
}
|
|
88
|
+
|
|
73
89
|
main {
|
|
74
90
|
padding: var(--ds-space-5);
|
|
75
91
|
overflow: auto;
|
|
@@ -77,6 +93,21 @@ export const pageShellStyles = css `
|
|
|
77
93
|
min-height: 0;
|
|
78
94
|
scrollbar-color: var(--ds-color-fg-subtle) transparent;
|
|
79
95
|
scrollbar-width: thin;
|
|
96
|
+
/* Reserve scrollbar gutters on both inline sides so the horizontal
|
|
97
|
+
content position stays symmetric whether the vertical scrollbar is
|
|
98
|
+
present or not. Without this, an overflowing main has its content
|
|
99
|
+
pushed inward on the inline-end side only (asymmetric margins). */
|
|
100
|
+
scrollbar-gutter: stable both-edges;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
@media (max-width: ${belowDesktopBreakpoint}) {
|
|
104
|
+
.shell-inner {
|
|
105
|
+
padding-inline: var(--ds-space-4);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
main {
|
|
109
|
+
padding: var(--ds-space-4) var(--ds-space-2);
|
|
110
|
+
}
|
|
80
111
|
}
|
|
81
112
|
|
|
82
113
|
.brand {
|
|
@@ -94,6 +125,9 @@ export const pageShellStyles = css `
|
|
|
94
125
|
.drawer-header {
|
|
95
126
|
display: none;
|
|
96
127
|
}
|
|
128
|
+
.drawer-brand {
|
|
129
|
+
display: none;
|
|
130
|
+
}
|
|
97
131
|
.drawer-close {
|
|
98
132
|
display: none;
|
|
99
133
|
}
|
|
@@ -111,10 +145,15 @@ export const pageShellStyles = css `
|
|
|
111
145
|
:host([mobile-layout]) .shell-body {
|
|
112
146
|
grid-template-columns: 1fr;
|
|
113
147
|
}
|
|
148
|
+
:host([mobile-layout]) aside[part="aside-end"] {
|
|
149
|
+
/* Secondary inline-end region is not surfaced in the mobile drawer in v1.
|
|
150
|
+
Consumers can opt back in by overriding via ::part(aside-end). */
|
|
151
|
+
display: none;
|
|
152
|
+
}
|
|
114
153
|
:host([mobile-layout]) .brand {
|
|
115
154
|
flex: 1;
|
|
116
155
|
}
|
|
117
|
-
:host([mobile-layout]) aside {
|
|
156
|
+
:host([mobile-layout]) aside[part="aside"] {
|
|
118
157
|
position: absolute;
|
|
119
158
|
top: 0;
|
|
120
159
|
left: 0;
|
|
@@ -131,19 +170,34 @@ export const pageShellStyles = css `
|
|
|
131
170
|
overflow: hidden;
|
|
132
171
|
box-sizing: border-box;
|
|
133
172
|
}
|
|
134
|
-
:host([mobile-layout][data-mobile-nav-open]) aside {
|
|
173
|
+
:host([mobile-layout][data-mobile-nav-open]) aside[part="aside"] {
|
|
135
174
|
transform: translateX(0);
|
|
136
175
|
}
|
|
137
176
|
:host([mobile-layout]) .drawer-header {
|
|
138
177
|
display: flex;
|
|
139
178
|
align-items: center;
|
|
140
|
-
|
|
179
|
+
justify-content: space-between;
|
|
180
|
+
gap: var(--ds-space-3);
|
|
181
|
+
padding: var(--ds-space-2) var(--ds-space-4);
|
|
182
|
+
}
|
|
183
|
+
:host([mobile-layout]) .drawer-brand {
|
|
184
|
+
display: inline-flex;
|
|
185
|
+
align-items: center;
|
|
186
|
+
flex: 1;
|
|
187
|
+
min-width: 0;
|
|
188
|
+
font-family: var(--ds-font-display);
|
|
189
|
+
font-size: var(--ds-font-size-lg);
|
|
190
|
+
letter-spacing: var(--ds-letter-spacing-display);
|
|
191
|
+
}
|
|
192
|
+
:host([mobile-layout]) slot[name='drawer-brand']::slotted(*) {
|
|
193
|
+
max-width: 100%;
|
|
141
194
|
}
|
|
142
195
|
:host([mobile-layout]) .drawer-close {
|
|
143
196
|
display: inline-flex;
|
|
197
|
+
flex: 0 0 auto;
|
|
144
198
|
margin: 0;
|
|
145
199
|
}
|
|
146
|
-
:host([mobile-layout]) aside ::slotted(ds-sidenav) {
|
|
200
|
+
:host([mobile-layout]) aside[part="aside"] ::slotted(ds-sidenav) {
|
|
147
201
|
width: 100% !important;
|
|
148
202
|
max-width: 100% !important;
|
|
149
203
|
flex: 1 1 auto;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"page-shell.styles.js","sourceRoot":"","sources":["../../../src/templates/page-shell/page-shell.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;
|
|
1
|
+
{"version":3,"file":"page-shell.styles.js","sourceRoot":"","sources":["../../../src/templates/page-shell/page-shell.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,sBAAsB,GAAG,SAAS,CAAC,QAAQ,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAE5E,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAmGX,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmH5C,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jsekulowicz/ds-components",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.1",
|
|
4
4
|
"description": "Lit web components for the Design System Library (atoms, molecules, organisms, templates, pages).",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"repository": {
|
|
@@ -381,8 +381,8 @@
|
|
|
381
381
|
],
|
|
382
382
|
"dependencies": {
|
|
383
383
|
"lit": "^3.2.1",
|
|
384
|
-
"@jsekulowicz/ds-core": "0.
|
|
385
|
-
"@jsekulowicz/ds-tokens": "0.
|
|
384
|
+
"@jsekulowicz/ds-core": "0.5.0",
|
|
385
|
+
"@jsekulowicz/ds-tokens": "0.5.0"
|
|
386
386
|
},
|
|
387
387
|
"devDependencies": {
|
|
388
388
|
"heroicons": "2.2.0",
|