@sondor-technology/sondor-components 1.0.4 → 1.0.6
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/dist/components/alert/alert.constants.d.ts +3 -0
- package/dist/components/alert/alert.constants.d.ts.map +1 -0
- package/dist/components/alert/alert.constants.js +2 -0
- package/dist/components/alert/alert.constants.js.map +1 -0
- package/dist/components/alert/alert.d.ts +4 -3
- package/dist/components/alert/alert.d.ts.map +1 -1
- package/dist/components/alert/alert.js +21 -11
- package/dist/components/alert/alert.js.map +1 -0
- package/dist/components/badge/badge.constants.d.ts +3 -0
- package/dist/components/badge/badge.constants.d.ts.map +1 -0
- package/dist/components/badge/badge.constants.js +2 -0
- package/dist/components/badge/badge.constants.js.map +1 -0
- package/dist/components/badge/badge.d.ts +1 -1
- package/dist/components/badge/badge.d.ts.map +1 -1
- package/dist/components/badge/badge.js +3 -2
- package/dist/components/badge/badge.js.map +1 -0
- package/dist/components/breadcrumb/breadcrumb.d.ts.map +1 -1
- package/dist/components/breadcrumb/breadcrumb.js +2 -1
- package/dist/components/breadcrumb/breadcrumb.js.map +1 -0
- package/dist/components/button/button.constants.d.ts +7 -0
- package/dist/components/button/button.constants.d.ts.map +1 -0
- package/dist/components/button/button.constants.js +4 -0
- package/dist/components/button/button.constants.js.map +1 -0
- package/dist/components/button/button.d.ts +8 -4
- package/dist/components/button/button.d.ts.map +1 -1
- package/dist/components/button/button.js +181 -137
- package/dist/components/button/button.js.map +1 -0
- package/dist/components/button-group/button-group.d.ts +6 -0
- package/dist/components/button-group/button-group.d.ts.map +1 -1
- package/dist/components/button-group/button-group.js +17 -21
- package/dist/components/button-group/button-group.js.map +1 -0
- package/dist/components/checkbox/checkbox.constants.d.ts +3 -0
- package/dist/components/checkbox/checkbox.constants.d.ts.map +1 -0
- package/dist/components/checkbox/checkbox.constants.js +2 -0
- package/dist/components/checkbox/checkbox.constants.js.map +1 -0
- package/dist/components/checkbox/checkbox.d.ts +5 -1
- package/dist/components/checkbox/checkbox.d.ts.map +1 -1
- package/dist/components/checkbox/checkbox.js +21 -5
- package/dist/components/checkbox/checkbox.js.map +1 -0
- package/dist/components/code-block/code-block.d.ts +12 -7
- package/dist/components/code-block/code-block.d.ts.map +1 -1
- package/dist/components/code-block/code-block.js +130 -66
- package/dist/components/code-block/code-block.js.map +1 -0
- package/dist/components/content-card/content-card.d.ts.map +1 -1
- package/dist/components/content-card/content-card.js +10 -15
- package/dist/components/content-card/content-card.js.map +1 -0
- package/dist/components/divider/divider.constants.d.ts +5 -0
- package/dist/components/divider/divider.constants.d.ts.map +1 -0
- package/dist/components/divider/divider.constants.js +3 -0
- package/dist/components/divider/divider.constants.js.map +1 -0
- package/dist/components/divider/divider.d.ts +4 -2
- package/dist/components/divider/divider.d.ts.map +1 -1
- package/dist/components/divider/divider.js +18 -9
- package/dist/components/divider/divider.js.map +1 -0
- package/dist/components/drawer/drawer.d.ts +7 -4
- package/dist/components/drawer/drawer.d.ts.map +1 -1
- package/dist/components/drawer/drawer.js +73 -30
- package/dist/components/drawer/drawer.js.map +1 -0
- package/dist/components/field/field.d.ts +2 -2
- package/dist/components/field/field.d.ts.map +1 -1
- package/dist/components/field/field.js +8 -9
- package/dist/components/field/field.js.map +1 -0
- package/dist/components/footer/footer.d.ts +8 -1
- package/dist/components/footer/footer.d.ts.map +1 -1
- package/dist/components/footer/footer.js +42 -12
- package/dist/components/footer/footer.js.map +1 -0
- package/dist/components/form/form-step.js +1 -0
- package/dist/components/form/form-step.js.map +1 -0
- package/dist/components/form/form.d.ts +3 -0
- package/dist/components/form/form.d.ts.map +1 -1
- package/dist/components/form/form.js +107 -67
- package/dist/components/form/form.js.map +1 -0
- package/dist/components/grid/grid-row.d.ts +3 -3
- package/dist/components/grid/grid-row.d.ts.map +1 -1
- package/dist/components/grid/grid-row.js +36 -22
- package/dist/components/grid/grid-row.js.map +1 -0
- package/dist/components/grid/grid.d.ts +2 -2
- package/dist/components/grid/grid.d.ts.map +1 -1
- package/dist/components/grid/grid.js +5 -2
- package/dist/components/grid/grid.js.map +1 -0
- package/dist/components/icon/icon-paths.js +1 -0
- package/dist/components/icon/icon-paths.js.map +1 -0
- package/dist/components/icon/icon.js +1 -0
- package/dist/components/icon/icon.js.map +1 -0
- package/dist/components/input/input.d.ts +14 -0
- package/dist/components/input/input.d.ts.map +1 -1
- package/dist/components/input/input.js +30 -37
- package/dist/components/input/input.js.map +1 -0
- package/dist/components/link/link.d.ts +6 -6
- package/dist/components/link/link.d.ts.map +1 -1
- package/dist/components/link/link.js +42 -19
- package/dist/components/link/link.js.map +1 -0
- package/dist/components/metadata/metadata.d.ts +3 -3
- package/dist/components/metadata/metadata.d.ts.map +1 -1
- package/dist/components/metadata/metadata.js +23 -20
- package/dist/components/metadata/metadata.js.map +1 -0
- package/dist/components/modal/modal.d.ts +4 -16
- package/dist/components/modal/modal.d.ts.map +1 -1
- package/dist/components/modal/modal.js +99 -62
- package/dist/components/modal/modal.js.map +1 -0
- package/dist/components/page-layout/page-layout.d.ts +4 -3
- package/dist/components/page-layout/page-layout.d.ts.map +1 -1
- package/dist/components/page-layout/page-layout.js +96 -69
- package/dist/components/page-layout/page-layout.js.map +1 -0
- package/dist/components/radio/radio.d.ts +8 -0
- package/dist/components/radio/radio.d.ts.map +1 -1
- package/dist/components/radio/radio.js +8 -12
- package/dist/components/radio/radio.js.map +1 -0
- package/dist/components/radio-group/radio-group.d.ts +6 -1
- package/dist/components/radio-group/radio-group.d.ts.map +1 -1
- package/dist/components/radio-group/radio-group.js +44 -18
- package/dist/components/radio-group/radio-group.js.map +1 -0
- package/dist/components/router/router.d.ts +5 -7
- package/dist/components/router/router.d.ts.map +1 -1
- package/dist/components/router/router.js +54 -38
- package/dist/components/router/router.js.map +1 -0
- package/dist/components/select/select.d.ts +41 -7
- package/dist/components/select/select.d.ts.map +1 -1
- package/dist/components/select/select.js +467 -150
- package/dist/components/select/select.js.map +1 -0
- package/dist/components/skeleton/skeleton.d.ts +3 -2
- package/dist/components/skeleton/skeleton.d.ts.map +1 -1
- package/dist/components/skeleton/skeleton.js +10 -13
- package/dist/components/skeleton/skeleton.js.map +1 -0
- package/dist/components/switch/switch.d.ts +12 -0
- package/dist/components/switch/switch.d.ts.map +1 -1
- package/dist/components/switch/switch.js +28 -22
- package/dist/components/switch/switch.js.map +1 -0
- package/dist/components/table/data-table.d.ts +3 -25
- package/dist/components/table/data-table.d.ts.map +1 -1
- package/dist/components/table/data-table.js +211 -146
- package/dist/components/table/data-table.js.map +1 -0
- package/dist/components/table/table.d.ts +3 -3
- package/dist/components/table/table.d.ts.map +1 -1
- package/dist/components/table/table.js +39 -20
- package/dist/components/table/table.js.map +1 -0
- package/dist/components/tabs/tab-panel.d.ts +8 -1
- package/dist/components/tabs/tab-panel.d.ts.map +1 -1
- package/dist/components/tabs/tab-panel.js +21 -11
- package/dist/components/tabs/tab-panel.js.map +1 -0
- package/dist/components/tabs/tab.d.ts +10 -1
- package/dist/components/tabs/tab.d.ts.map +1 -1
- package/dist/components/tabs/tab.js +46 -28
- package/dist/components/tabs/tab.js.map +1 -0
- package/dist/components/tabs/tabs.d.ts +9 -0
- package/dist/components/tabs/tabs.d.ts.map +1 -1
- package/dist/components/tabs/tabs.js +76 -13
- package/dist/components/tabs/tabs.js.map +1 -0
- package/dist/components/textarea/textarea.d.ts +13 -0
- package/dist/components/textarea/textarea.d.ts.map +1 -1
- package/dist/components/textarea/textarea.js +59 -13
- package/dist/components/textarea/textarea.js.map +1 -0
- package/dist/components/theme-toggle/theme-toggle.constants.d.ts +3 -0
- package/dist/components/theme-toggle/theme-toggle.constants.d.ts.map +1 -0
- package/dist/components/theme-toggle/theme-toggle.constants.js +2 -0
- package/dist/components/theme-toggle/theme-toggle.constants.js.map +1 -0
- package/dist/components/theme-toggle/theme-toggle.d.ts +3 -2
- package/dist/components/theme-toggle/theme-toggle.d.ts.map +1 -1
- package/dist/components/theme-toggle/theme-toggle.js +46 -19
- package/dist/components/theme-toggle/theme-toggle.js.map +1 -0
- package/dist/components/vertical-nav/vertical-nav-group.d.ts +5 -2
- package/dist/components/vertical-nav/vertical-nav-group.d.ts.map +1 -1
- package/dist/components/vertical-nav/vertical-nav-group.js +50 -14
- package/dist/components/vertical-nav/vertical-nav-group.js.map +1 -0
- package/dist/components/vertical-nav/vertical-nav-item.d.ts +3 -2
- package/dist/components/vertical-nav/vertical-nav-item.d.ts.map +1 -1
- package/dist/components/vertical-nav/vertical-nav-item.js +30 -8
- package/dist/components/vertical-nav/vertical-nav-item.js.map +1 -0
- package/dist/styles/index.css +50 -17
- package/dist/styles/reset.js +1 -0
- package/dist/styles/reset.js.map +1 -0
- package/package.json +2 -1
- package/src/components/alert/alert.constants.ts +2 -0
- package/src/components/alert/alert.ts +24 -15
- package/src/components/badge/badge.constants.ts +2 -0
- package/src/components/badge/badge.ts +3 -4
- package/src/components/breadcrumb/breadcrumb.ts +2 -2
- package/src/components/button/button.constants.ts +8 -0
- package/src/components/button/button.ts +184 -144
- package/src/components/button-group/button-group.ts +23 -21
- package/src/components/checkbox/checkbox.constants.ts +2 -0
- package/src/components/checkbox/checkbox.ts +33 -18
- package/src/components/code-block/code-block.ts +157 -84
- package/src/components/content-card/content-card.ts +10 -16
- package/src/components/divider/divider.constants.ts +5 -0
- package/src/components/divider/divider.ts +22 -11
- package/src/components/drawer/drawer.ts +79 -34
- package/src/components/field/field.ts +9 -11
- package/src/components/footer/footer.ts +43 -12
- package/src/components/form/form.ts +120 -83
- package/src/components/grid/grid-row.ts +45 -32
- package/src/components/grid/grid.ts +7 -4
- package/src/components/input/input.ts +37 -41
- package/src/components/link/link.ts +45 -21
- package/src/components/metadata/metadata.ts +26 -24
- package/src/components/modal/modal.ts +108 -74
- package/src/components/page-layout/page-layout.ts +98 -73
- package/src/components/radio/radio.ts +8 -13
- package/src/components/radio-group/radio-group.ts +45 -21
- package/src/components/router/router.ts +73 -50
- package/src/components/select/select.ts +502 -131
- package/src/components/skeleton/skeleton.ts +14 -14
- package/src/components/switch/switch.ts +31 -25
- package/src/components/table/data-table.ts +248 -177
- package/src/components/table/table.ts +52 -29
- package/src/components/tabs/tab-panel.ts +30 -13
- package/src/components/tabs/tab.ts +64 -33
- package/src/components/tabs/tabs.ts +82 -14
- package/src/components/textarea/textarea.ts +63 -15
- package/src/components/theme-toggle/theme-toggle.constants.ts +2 -0
- package/src/components/theme-toggle/theme-toggle.ts +47 -22
- package/src/components/vertical-nav/vertical-nav-group.ts +57 -18
- package/src/components/vertical-nav/vertical-nav-item.ts +35 -12
- package/src/styles/globals.css +27 -4
- package/src/styles/theme.css +39 -31
- package/tsconfig.json +2 -1
- package/dist/components/card/card.d.ts +0 -11
- package/dist/components/card/card.d.ts.map +0 -1
- package/dist/components/card/card.js +0 -54
- package/src/components/card/card.ts +0 -53
|
@@ -4,15 +4,15 @@ 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 { LitElement, html, css } from
|
|
8
|
-
import { customElement, property } from
|
|
9
|
-
import { resetStyles } from
|
|
7
|
+
import { LitElement, html, css } from "lit";
|
|
8
|
+
import { customElement, property } from "lit/decorators.js";
|
|
9
|
+
import { resetStyles } from "../../styles/reset.js";
|
|
10
10
|
let StTable = class StTable extends LitElement {
|
|
11
11
|
constructor() {
|
|
12
12
|
super(...arguments);
|
|
13
13
|
this.columns = [];
|
|
14
14
|
this.data = [];
|
|
15
|
-
this.mode =
|
|
15
|
+
this.mode = "horizontal";
|
|
16
16
|
this.striped = false;
|
|
17
17
|
this.hoverable = false;
|
|
18
18
|
this.dense = false;
|
|
@@ -20,20 +20,31 @@ let StTable = class StTable extends LitElement {
|
|
|
20
20
|
render() {
|
|
21
21
|
return html `
|
|
22
22
|
<div class="table-wrapper">
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
23
|
+
<!-- 🚀 FIX: Explicit ARIA roles map to preserve semantics when CSS 'display' changes -->
|
|
24
|
+
<table role="table">
|
|
25
|
+
<thead role="rowgroup">
|
|
26
|
+
<tr role="row">
|
|
27
|
+
${this.columns.map((col) => html `<th role="columnheader" scope="col">${col.header}</th>`)}
|
|
27
28
|
</tr>
|
|
28
29
|
</thead>
|
|
29
|
-
<tbody>
|
|
30
|
-
${this.data.
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
30
|
+
<tbody role="rowgroup">
|
|
31
|
+
${this.data.length === 0
|
|
32
|
+
? html `
|
|
33
|
+
<tr role="row">
|
|
34
|
+
<td role="cell" colspan=${this.columns.length} class="empty-state">
|
|
35
|
+
No data available.
|
|
36
|
+
</td>
|
|
37
|
+
</tr>
|
|
38
|
+
`
|
|
39
|
+
: this.data.map((row) => html `
|
|
40
|
+
<tr role="row">
|
|
41
|
+
${this.columns.map(
|
|
42
|
+
// 🚀 FIX: Nullish coalescing prevents printing "undefined" for sparse data objects
|
|
43
|
+
(col) => html `
|
|
44
|
+
<td role="cell" data-label=${col.header}>${row[col.key] ?? ""}</td>
|
|
45
|
+
`)}
|
|
46
|
+
</tr>
|
|
47
|
+
`)}
|
|
37
48
|
</tbody>
|
|
38
49
|
</table>
|
|
39
50
|
</div>
|
|
@@ -82,11 +93,11 @@ StTable.styles = [
|
|
|
82
93
|
}
|
|
83
94
|
|
|
84
95
|
:host([striped]) tbody tr:nth-of-type(odd) {
|
|
85
|
-
background-color: var(--st-color-surface-muted);
|
|
96
|
+
background-color: var(--st-color-surface-muted, #f8fafc);
|
|
86
97
|
}
|
|
87
98
|
|
|
88
99
|
:host([hoverable]) tbody tr:hover {
|
|
89
|
-
background-color: var(--st-color-surface-hover);
|
|
100
|
+
background-color: var(--st-color-surface-hover, #f1f5f9);
|
|
90
101
|
}
|
|
91
102
|
|
|
92
103
|
/* ==========================================================
|
|
@@ -141,7 +152,14 @@ StTable.styles = [
|
|
|
141
152
|
padding-right: var(--st-spacing-md);
|
|
142
153
|
color: var(--st-color-text-muted);
|
|
143
154
|
}
|
|
144
|
-
|
|
155
|
+
|
|
156
|
+
.empty-state {
|
|
157
|
+
text-align: center;
|
|
158
|
+
padding: 2rem !important;
|
|
159
|
+
color: var(--st-color-text-muted);
|
|
160
|
+
font-style: italic;
|
|
161
|
+
}
|
|
162
|
+
`,
|
|
145
163
|
];
|
|
146
164
|
__decorate([
|
|
147
165
|
property({ type: Array })
|
|
@@ -162,6 +180,7 @@ __decorate([
|
|
|
162
180
|
property({ type: Boolean, reflect: true })
|
|
163
181
|
], StTable.prototype, "dense", void 0);
|
|
164
182
|
StTable = __decorate([
|
|
165
|
-
customElement(
|
|
183
|
+
customElement("st-table")
|
|
166
184
|
], StTable);
|
|
167
185
|
export { StTable };
|
|
186
|
+
//# sourceMappingURL=table.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../src/components/table/table.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,GAAG,EAAC,MAAM,KAAK,CAAC;AAC1C,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAU3C,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,UAAU;IAAhC;;QACoB,YAAO,GAAkB,EAAE,CAAC;QAC5B,SAAI,GAA0B,EAAE,CAAC;QAEjB,SAAI,GAAc,YAAY,CAAC;QAC9B,YAAO,GAAG,KAAK,CAAC;QAChB,cAAS,GAAG,KAAK,CAAC;QAClB,UAAK,GAAG,KAAK,CAAC;IAuJ1D,CAAC;IAtCC,MAAM;QACJ,OAAO,IAAI,CAAA;;;;;;gBAMC,IAAI,CAAC,OAAO,CAAC,GAAG,CAChB,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAA,uCAAuC,GAAG,CAAC,MAAM,OAAO,CACtE;;;;cAID,IAAI,CAAC,IAAI,CAAC,MAAM,KAAK,CAAC;YACtB,CAAC,CAAC,IAAI,CAAA;;8CAE0B,IAAI,CAAC,OAAO,CAAC,MAAM;;;;iBAIhD;YACH,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CACX,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAA;;wBAEP,IAAI,CAAC,OAAO,CAAC,GAAG;YAChB,mFAAmF;YACnF,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAA;uDACkB,GAAG,CAAC,MAAM,IAAI,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,EAAE;yBAC9D,CACF;;mBAEJ,CACF;;;;KAIZ,CAAC;IACJ,CAAC;CACF,CAAA;AArJQ,cAAM,GAAG;IACd,WAAW;IACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0GF;CACF,AA7GY,CA6GX;AArHuB;IAAxB,QAAQ,CAAC,EAAC,IAAI,EAAE,KAAK,EAAC,CAAC;wCAA6B;AAC5B;IAAxB,QAAQ,CAAC,EAAC,IAAI,EAAE,KAAK,EAAC,CAAC;qCAAkC;AAEjB;IAAxC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;qCAAgC;AAC9B;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;wCAAiB;AAChB;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;0CAAmB;AAClB;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;sCAAe;AAP7C,OAAO;IADnB,aAAa,CAAC,UAAU,CAAC;GACb,OAAO,CA8JnB"}
|
|
@@ -1,8 +1,15 @@
|
|
|
1
|
-
import { LitElement } from
|
|
1
|
+
import { LitElement, PropertyValues } from "lit";
|
|
2
2
|
export declare class StTabPanel extends LitElement {
|
|
3
3
|
name: string;
|
|
4
4
|
active: boolean;
|
|
5
5
|
static styles: import("lit").CSSResult[];
|
|
6
|
+
connectedCallback(): void;
|
|
7
|
+
updated(changedProperties: PropertyValues): void;
|
|
6
8
|
render(): import("lit-html").TemplateResult<1>;
|
|
7
9
|
}
|
|
10
|
+
declare global {
|
|
11
|
+
interface HTMLElementTagNameMap {
|
|
12
|
+
"st-tab-panel": StTabPanel;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
8
15
|
//# sourceMappingURL=tab-panel.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab-panel.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tab-panel.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"tab-panel.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tab-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAC,MAAM,KAAK,CAAC;AAI1D,qBACa,UAAW,SAAQ,UAAU;IACC,IAAI,SAAM;IACT,MAAM,UAAS;IAEzD,MAAM,CAAC,MAAM,4BAYX;IAEF,iBAAiB,SAMhB;IAEQ,OAAO,CAAC,iBAAiB,EAAE,cAAc,QAKjD;IAED,MAAM,yCAEL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,UAAU,CAAC;KAC5B;CACF"}
|
|
@@ -4,21 +4,30 @@ 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 { LitElement, html, css } from
|
|
8
|
-
import { customElement, property } from
|
|
9
|
-
import { resetStyles } from
|
|
7
|
+
import { LitElement, html, css } from "lit";
|
|
8
|
+
import { customElement, property } from "lit/decorators.js";
|
|
9
|
+
import { resetStyles } from "../../styles/reset.js";
|
|
10
10
|
let StTabPanel = class StTabPanel extends LitElement {
|
|
11
11
|
constructor() {
|
|
12
12
|
super(...arguments);
|
|
13
|
-
this.name =
|
|
13
|
+
this.name = "";
|
|
14
14
|
this.active = false;
|
|
15
15
|
}
|
|
16
|
+
connectedCallback() {
|
|
17
|
+
super.connectedCallback();
|
|
18
|
+
// 🚀 FIX: Expose role and ID on the host to link perfectly with the orchestrator
|
|
19
|
+
this.id = this.id || `panel-${this.name}`;
|
|
20
|
+
this.setAttribute("role", "tabpanel");
|
|
21
|
+
this.setAttribute("aria-hidden", this.active ? "false" : "true");
|
|
22
|
+
}
|
|
23
|
+
updated(changedProperties) {
|
|
24
|
+
super.updated(changedProperties);
|
|
25
|
+
if (changedProperties.has("active")) {
|
|
26
|
+
this.setAttribute("aria-hidden", this.active ? "false" : "true");
|
|
27
|
+
}
|
|
28
|
+
}
|
|
16
29
|
render() {
|
|
17
|
-
return html
|
|
18
|
-
<div role="tabpanel" aria-hidden=${this.active ? 'false' : 'true'}>
|
|
19
|
-
<slot></slot>
|
|
20
|
-
</div>
|
|
21
|
-
`;
|
|
30
|
+
return html `<slot></slot>`;
|
|
22
31
|
}
|
|
23
32
|
};
|
|
24
33
|
StTabPanel.styles = [
|
|
@@ -32,7 +41,7 @@ StTabPanel.styles = [
|
|
|
32
41
|
:host(:not([active])) {
|
|
33
42
|
display: none;
|
|
34
43
|
}
|
|
35
|
-
|
|
44
|
+
`,
|
|
36
45
|
];
|
|
37
46
|
__decorate([
|
|
38
47
|
property({ type: String, reflect: true })
|
|
@@ -41,6 +50,7 @@ __decorate([
|
|
|
41
50
|
property({ type: Boolean, reflect: true })
|
|
42
51
|
], StTabPanel.prototype, "active", void 0);
|
|
43
52
|
StTabPanel = __decorate([
|
|
44
|
-
customElement(
|
|
53
|
+
customElement("st-tab-panel")
|
|
45
54
|
], StTabPanel);
|
|
46
55
|
export { StTabPanel };
|
|
56
|
+
//# sourceMappingURL=tab-panel.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tab-panel.js","sourceRoot":"","sources":["../../../src/components/tabs/tab-panel.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,GAAG,EAAiB,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAG3C,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,UAAU;IAAnC;;QACoC,SAAI,GAAG,EAAE,CAAC;QACT,WAAM,GAAG,KAAK,CAAC;IAkC3D,CAAC;IAlBC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,iFAAiF;QACjF,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,IAAI,SAAS,IAAI,CAAC,IAAI,EAAE,CAAC;QAC1C,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;QACtC,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;IACnE,CAAC;IAEQ,OAAO,CAAC,iBAAiC;QAChD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YACpC,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;QACnE,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;CACF,CAAA;AAhCQ,iBAAM,GAAG;IACd,WAAW;IACX,GAAG,CAAA;;;;;;;;;KASF;CACF,AAZY,CAYX;AAfuC;IAAxC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;wCAAW;AACT;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;0CAAgB;AAF9C,UAAU;IADtB,aAAa,CAAC,cAAc,CAAC;GACjB,UAAU,CAoCtB"}
|
|
@@ -1,9 +1,18 @@
|
|
|
1
|
-
import { LitElement } from
|
|
1
|
+
import { LitElement, PropertyValues } from "lit";
|
|
2
2
|
export declare class StTab extends LitElement {
|
|
3
3
|
panel: string;
|
|
4
4
|
active: boolean;
|
|
5
5
|
static styles: import("lit").CSSResult[];
|
|
6
|
+
connectedCallback(): void;
|
|
7
|
+
disconnectedCallback(): void;
|
|
8
|
+
updated(changedProperties: PropertyValues): void;
|
|
6
9
|
private _handleClick;
|
|
10
|
+
private _handleKeyDown;
|
|
7
11
|
render(): import("lit-html").TemplateResult<1>;
|
|
8
12
|
}
|
|
13
|
+
declare global {
|
|
14
|
+
interface HTMLElementTagNameMap {
|
|
15
|
+
"st-tab": StTab;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
9
18
|
//# sourceMappingURL=tab.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tab.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"tab.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tab.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAC,MAAM,KAAK,CAAC;AAI1D,qBACa,KAAM,SAAQ,UAAU;IACM,KAAK,SAAM;IACV,MAAM,UAAS;IAEzD,MAAM,CAAC,MAAM,4BAwCX;IAEF,iBAAiB,SAYhB;IAED,oBAAoB,SAInB;IAEQ,OAAO,CAAC,iBAAiB,EAAE,cAAc,QAOjD;IAED,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,cAAc;IAQtB,MAAM,yCAEL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,KAAK,CAAC;KACjB;CACF"}
|
|
@@ -4,48 +4,66 @@ 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 { LitElement, html, css } from
|
|
8
|
-
import { customElement, property } from
|
|
9
|
-
import { resetStyles } from
|
|
7
|
+
import { LitElement, html, css } from "lit";
|
|
8
|
+
import { customElement, property } from "lit/decorators.js";
|
|
9
|
+
import { resetStyles } from "../../styles/reset.js";
|
|
10
10
|
let StTab = class StTab extends LitElement {
|
|
11
11
|
constructor() {
|
|
12
12
|
super(...arguments);
|
|
13
|
-
this.panel =
|
|
13
|
+
this.panel = "";
|
|
14
14
|
this.active = false;
|
|
15
15
|
}
|
|
16
|
+
connectedCallback() {
|
|
17
|
+
super.connectedCallback();
|
|
18
|
+
// 🚀 FIX: Apply the ARIA role and attributes to the Host element
|
|
19
|
+
this.id = this.id || `tab-${this.panel}`;
|
|
20
|
+
this.setAttribute("role", "tab");
|
|
21
|
+
this.setAttribute("aria-selected", this.active ? "true" : "false");
|
|
22
|
+
this.setAttribute("tabindex", this.active ? "0" : "-1");
|
|
23
|
+
// Attach native event listeners since we are no longer using a button
|
|
24
|
+
this.addEventListener("click", this._handleClick);
|
|
25
|
+
this.addEventListener("keydown", this._handleKeyDown);
|
|
26
|
+
}
|
|
27
|
+
disconnectedCallback() {
|
|
28
|
+
super.disconnectedCallback();
|
|
29
|
+
this.removeEventListener("click", this._handleClick);
|
|
30
|
+
this.removeEventListener("keydown", this._handleKeyDown);
|
|
31
|
+
}
|
|
32
|
+
updated(changedProperties) {
|
|
33
|
+
super.updated(changedProperties);
|
|
34
|
+
if (changedProperties.has("active")) {
|
|
35
|
+
// Sync ARIA states when active changes
|
|
36
|
+
this.setAttribute("aria-selected", this.active ? "true" : "false");
|
|
37
|
+
this.setAttribute("tabindex", this.active ? "0" : "-1");
|
|
38
|
+
}
|
|
39
|
+
}
|
|
16
40
|
_handleClick() {
|
|
17
|
-
this.dispatchEvent(new CustomEvent(
|
|
41
|
+
this.dispatchEvent(new CustomEvent("st-tab-select", {
|
|
18
42
|
detail: { panel: this.panel },
|
|
19
43
|
bubbles: true,
|
|
20
|
-
composed: true
|
|
44
|
+
composed: true,
|
|
21
45
|
}));
|
|
22
46
|
}
|
|
47
|
+
_handleKeyDown(e) {
|
|
48
|
+
// 🚀 FIX: Ensure Enter and Space keys activate the tab natively
|
|
49
|
+
if (e.key === "Enter" || e.key === " ") {
|
|
50
|
+
e.preventDefault();
|
|
51
|
+
this._handleClick();
|
|
52
|
+
}
|
|
53
|
+
}
|
|
23
54
|
render() {
|
|
24
|
-
return html
|
|
25
|
-
<button
|
|
26
|
-
role="tab"
|
|
27
|
-
aria-selected=${this.active ? 'true' : 'false'}
|
|
28
|
-
tabindex=${this.active ? '0' : '-1'}
|
|
29
|
-
@click=${this._handleClick}
|
|
30
|
-
>
|
|
31
|
-
<slot></slot>
|
|
32
|
-
</button>
|
|
33
|
-
`;
|
|
55
|
+
return html `<slot></slot>`;
|
|
34
56
|
}
|
|
35
57
|
};
|
|
36
58
|
StTab.styles = [
|
|
37
59
|
resetStyles,
|
|
38
60
|
css `
|
|
61
|
+
/* 🚀 FIX: Style the host element directly to act as the interactive tab */
|
|
39
62
|
:host {
|
|
40
|
-
display: inline-block;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
button {
|
|
44
63
|
display: inline-flex;
|
|
45
64
|
align-items: center;
|
|
46
65
|
gap: var(--st-spacing-sm);
|
|
47
66
|
background: transparent;
|
|
48
|
-
border: none;
|
|
49
67
|
border-bottom: 2px solid transparent;
|
|
50
68
|
padding: var(--st-spacing-sm) var(--st-spacing-md);
|
|
51
69
|
color: var(--st-color-text-muted);
|
|
@@ -54,20 +72,19 @@ StTab.styles = [
|
|
|
54
72
|
cursor: pointer;
|
|
55
73
|
transition: all 0.2s ease;
|
|
56
74
|
white-space: nowrap;
|
|
75
|
+
outline: none; /* Focus outline handled below */
|
|
57
76
|
}
|
|
58
77
|
|
|
59
|
-
|
|
78
|
+
:host(:hover) {
|
|
60
79
|
color: var(--st-color-text);
|
|
61
80
|
}
|
|
62
81
|
|
|
63
|
-
|
|
64
|
-
outline: none;
|
|
82
|
+
:host(:focus-visible) {
|
|
65
83
|
background-color: var(--st-color-surface);
|
|
66
84
|
border-radius: 4px 4px 0 0;
|
|
67
85
|
}
|
|
68
86
|
|
|
69
|
-
|
|
70
|
-
:host([active]) button {
|
|
87
|
+
:host([active]) {
|
|
71
88
|
color: var(--st-color-primary);
|
|
72
89
|
border-bottom-color: var(--st-color-primary);
|
|
73
90
|
}
|
|
@@ -77,7 +94,7 @@ StTab.styles = [
|
|
|
77
94
|
height: 1.125rem;
|
|
78
95
|
fill: currentColor;
|
|
79
96
|
}
|
|
80
|
-
|
|
97
|
+
`,
|
|
81
98
|
];
|
|
82
99
|
__decorate([
|
|
83
100
|
property({ type: String, reflect: true })
|
|
@@ -86,6 +103,7 @@ __decorate([
|
|
|
86
103
|
property({ type: Boolean, reflect: true })
|
|
87
104
|
], StTab.prototype, "active", void 0);
|
|
88
105
|
StTab = __decorate([
|
|
89
|
-
customElement(
|
|
106
|
+
customElement("st-tab")
|
|
90
107
|
], StTab);
|
|
91
108
|
export { StTab };
|
|
109
|
+
//# sourceMappingURL=tab.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tab.js","sourceRoot":"","sources":["../../../src/components/tabs/tab.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAC,UAAU,EAAE,IAAI,EAAE,GAAG,EAAiB,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAC,aAAa,EAAE,QAAQ,EAAC,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAC,WAAW,EAAC,MAAM,uBAAuB,CAAC;AAG3C,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQ,UAAU;IAA9B;;QACoC,UAAK,GAAG,EAAE,CAAC;QACV,WAAM,GAAG,KAAK,CAAC;IA8F3D,CAAC;IAlDC,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,iEAAiE;QACjE,IAAI,CAAC,EAAE,GAAG,IAAI,CAAC,EAAE,IAAI,OAAO,IAAI,CAAC,KAAK,EAAE,CAAC;QACzC,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QACjC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QACnE,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QAExD,sEAAsE;QACtE,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAClD,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IACxD,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QACrD,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IAC3D,CAAC;IAEQ,OAAO,CAAC,iBAAiC;QAChD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC;YACpC,uCAAuC;YACvC,IAAI,CAAC,YAAY,CAAC,eAAe,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;YACnE,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QAC1D,CAAC;IACH,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,eAAe,EAAE;YAC/B,MAAM,EAAE,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAC;YAC3B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,cAAc,CAAC,CAAgB;QACrC,gEAAgE;QAChE,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YACvC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;CACF,CAAA;AA5FQ,YAAM,GAAG;IACd,WAAW;IACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqCF;CACF,AAxCY,CAwCX;AA3CuC;IAAxC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;oCAAY;AACV;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;qCAAgB;AAF9C,KAAK;IADjB,aAAa,CAAC,QAAQ,CAAC;GACX,KAAK,CAgGjB"}
|
|
@@ -4,11 +4,20 @@ import { LitElement } from "lit";
|
|
|
4
4
|
export declare class StTabs extends LitElement {
|
|
5
5
|
private _tabs;
|
|
6
6
|
private _panels;
|
|
7
|
+
syncUrl: boolean;
|
|
7
8
|
static styles: import("lit").CSSResult[];
|
|
8
9
|
connectedCallback(): void;
|
|
9
10
|
disconnectedCallback(): void;
|
|
11
|
+
private _handleHashChange;
|
|
10
12
|
private _handleTabSelect;
|
|
13
|
+
private _activateTab;
|
|
11
14
|
private _handleSlotChange;
|
|
15
|
+
private _handleKeyDown;
|
|
12
16
|
render(): import("lit-html").TemplateResult<1>;
|
|
13
17
|
}
|
|
18
|
+
declare global {
|
|
19
|
+
interface HTMLElementTagNameMap {
|
|
20
|
+
"st-tabs": StTabs;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
14
23
|
//# sourceMappingURL=tabs.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,CAAC;AAClB,OAAO,gBAAgB,CAAC;AAExB,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAM1C,qBACa,MAAO,SAAQ,UAAU;IAEpC,OAAO,CAAC,KAAK,CAAW;IAGxB,OAAO,CAAC,OAAO,CAAgB;
|
|
1
|
+
{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,CAAC;AAClB,OAAO,gBAAgB,CAAC;AAExB,OAAO,EAAC,UAAU,EAAY,MAAM,KAAK,CAAC;AAM1C,qBACa,MAAO,SAAQ,UAAU;IAEpC,OAAO,CAAC,KAAK,CAAW;IAGxB,OAAO,CAAC,OAAO,CAAgB;IAGmB,OAAO,UAAS;IAElE,MAAM,CAAC,MAAM,4BAmBX;IAEF,iBAAiB,SAIhB;IAED,oBAAoB,SAInB;IAED,OAAO,CAAC,iBAAiB,CAMvB;IAEF,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,YAAY;IAsBpB,OAAO,CAAC,iBAAiB;IA4BzB,OAAO,CAAC,cAAc;IAuBtB,MAAM,yCASL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}
|
|
@@ -7,43 +7,103 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
|
|
|
7
7
|
import "./tab.js";
|
|
8
8
|
import "./tab-panel.js";
|
|
9
9
|
import { LitElement, html, css } from "lit";
|
|
10
|
-
import { customElement, queryAssignedElements } from "lit/decorators.js";
|
|
10
|
+
import { customElement, queryAssignedElements, property } from "lit/decorators.js";
|
|
11
11
|
import { resetStyles } from "../../styles/reset.js";
|
|
12
12
|
let StTabs = class StTabs extends LitElement {
|
|
13
|
+
constructor() {
|
|
14
|
+
super(...arguments);
|
|
15
|
+
// 🚀 FEATURE: Syncs the active tab with the URL Hash
|
|
16
|
+
this.syncUrl = false;
|
|
17
|
+
this._handleHashChange = () => {
|
|
18
|
+
if (!this.syncUrl)
|
|
19
|
+
return;
|
|
20
|
+
const hash = window.location.hash.replace("#", "");
|
|
21
|
+
if (hash && this._tabs.some((t) => t.panel === hash)) {
|
|
22
|
+
this._activateTab(hash, false); // Don't push state if we are responding to a history change
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
}
|
|
13
26
|
connectedCallback() {
|
|
14
27
|
super.connectedCallback();
|
|
15
28
|
this.addEventListener("st-tab-select", this._handleTabSelect);
|
|
29
|
+
window.addEventListener("hashchange", this._handleHashChange);
|
|
16
30
|
}
|
|
17
31
|
disconnectedCallback() {
|
|
18
32
|
super.disconnectedCallback();
|
|
19
33
|
this.removeEventListener("st-tab-select", this._handleTabSelect);
|
|
34
|
+
window.removeEventListener("hashchange", this._handleHashChange);
|
|
20
35
|
}
|
|
21
36
|
_handleTabSelect(e) {
|
|
22
|
-
// 1. Stop the event here so parent <st-tabs> instances don't react to it
|
|
23
37
|
e.stopPropagation();
|
|
24
|
-
|
|
25
|
-
|
|
38
|
+
this._activateTab(e.detail.panel, true);
|
|
39
|
+
}
|
|
40
|
+
_activateTab(targetPanel, updateUrl) {
|
|
26
41
|
this._tabs.forEach((tab) => {
|
|
27
42
|
tab.active = tab.panel === targetPanel;
|
|
28
43
|
});
|
|
29
|
-
// Update active states on all panels
|
|
30
44
|
this._panels.forEach((panel) => {
|
|
31
45
|
panel.active = panel.name === targetPanel;
|
|
32
46
|
});
|
|
47
|
+
if (updateUrl && this.syncUrl) {
|
|
48
|
+
window.history.replaceState(null, "", `#${targetPanel}`);
|
|
49
|
+
}
|
|
50
|
+
this.dispatchEvent(new CustomEvent("change", {
|
|
51
|
+
detail: { panel: targetPanel },
|
|
52
|
+
bubbles: true,
|
|
53
|
+
composed: true,
|
|
54
|
+
}));
|
|
33
55
|
}
|
|
34
|
-
// Ensures the first tab is active by default if none are explicitly set
|
|
35
56
|
_handleSlotChange() {
|
|
36
57
|
if (!this._tabs.length || !this._panels.length)
|
|
37
58
|
return;
|
|
59
|
+
// Link ARIA attributes securely
|
|
60
|
+
this._tabs.forEach((t) => {
|
|
61
|
+
t.setAttribute("aria-controls", `panel-${t.panel}`);
|
|
62
|
+
});
|
|
63
|
+
this._panels.forEach((p) => {
|
|
64
|
+
p.setAttribute("aria-labelledby", `tab-${p.name}`);
|
|
65
|
+
});
|
|
66
|
+
// 1. If sync-url is on, and hash exists, try to load it
|
|
67
|
+
if (this.syncUrl) {
|
|
68
|
+
const hash = window.location.hash.replace("#", "");
|
|
69
|
+
if (hash && this._tabs.some((t) => t.panel === hash)) {
|
|
70
|
+
this._activateTab(hash, false);
|
|
71
|
+
return;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
// 2. Otherwise fallback to the first active tab, or the very first tab
|
|
38
75
|
const hasActiveTab = this._tabs.some((tab) => tab.active);
|
|
39
76
|
if (!hasActiveTab) {
|
|
40
|
-
this._tabs[0].
|
|
41
|
-
this._panels[0].active = true;
|
|
77
|
+
this._activateTab(this._tabs[0].panel, false);
|
|
42
78
|
}
|
|
43
79
|
}
|
|
80
|
+
// 🚀 FEATURE: W3C Keyboard Navigation (Arrows, Home, End)
|
|
81
|
+
_handleKeyDown(e) {
|
|
82
|
+
if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(e.key))
|
|
83
|
+
return;
|
|
84
|
+
const tabs = this._tabs;
|
|
85
|
+
const currentIndex = tabs.findIndex((t) => t.active);
|
|
86
|
+
let nextIndex = currentIndex;
|
|
87
|
+
if (e.key === "ArrowRight") {
|
|
88
|
+
nextIndex = (currentIndex + 1) % tabs.length;
|
|
89
|
+
}
|
|
90
|
+
else if (e.key === "ArrowLeft") {
|
|
91
|
+
nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
|
|
92
|
+
}
|
|
93
|
+
else if (e.key === "Home") {
|
|
94
|
+
nextIndex = 0;
|
|
95
|
+
}
|
|
96
|
+
else if (e.key === "End") {
|
|
97
|
+
nextIndex = tabs.length - 1;
|
|
98
|
+
}
|
|
99
|
+
e.preventDefault();
|
|
100
|
+
const targetTab = tabs[nextIndex];
|
|
101
|
+
targetTab.focus();
|
|
102
|
+
this._activateTab(targetTab.panel, true);
|
|
103
|
+
}
|
|
44
104
|
render() {
|
|
45
105
|
return html `
|
|
46
|
-
<div class="nav-container" role="tablist">
|
|
106
|
+
<div class="nav-container" role="tablist" @keydown=${this._handleKeyDown}>
|
|
47
107
|
<slot name="nav" @slotchange=${this._handleSlotChange}></slot>
|
|
48
108
|
</div>
|
|
49
109
|
<div class="panels-container">
|
|
@@ -61,15 +121,14 @@ StTabs.styles = [
|
|
|
61
121
|
|
|
62
122
|
.nav-container {
|
|
63
123
|
display: flex;
|
|
64
|
-
/* Creates the track line underneath the tabs */
|
|
65
124
|
border-bottom: 1px solid var(--st-color-border);
|
|
66
125
|
gap: var(--st-spacing-xs);
|
|
67
|
-
overflow-x: auto;
|
|
68
|
-
scrollbar-width: none;
|
|
126
|
+
overflow-x: auto;
|
|
127
|
+
scrollbar-width: none;
|
|
69
128
|
}
|
|
70
129
|
|
|
71
130
|
.nav-container::-webkit-scrollbar {
|
|
72
|
-
display: none;
|
|
131
|
+
display: none;
|
|
73
132
|
}
|
|
74
133
|
`,
|
|
75
134
|
];
|
|
@@ -79,7 +138,11 @@ __decorate([
|
|
|
79
138
|
__decorate([
|
|
80
139
|
queryAssignedElements({ selector: "st-tab-panel" })
|
|
81
140
|
], StTabs.prototype, "_panels", void 0);
|
|
141
|
+
__decorate([
|
|
142
|
+
property({ type: Boolean, attribute: "sync-url" })
|
|
143
|
+
], StTabs.prototype, "syncUrl", void 0);
|
|
82
144
|
StTabs = __decorate([
|
|
83
145
|
customElement("st-tabs")
|
|
84
146
|
], StTabs);
|
|
85
147
|
export { StTabs };
|
|
148
|
+
//# sourceMappingURL=tabs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.ts"],"names":[],"mappings":"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"}
|
|
@@ -3,6 +3,14 @@ export type TextareaResize = "none" | "vertical" | "horizontal" | "both";
|
|
|
3
3
|
export declare class StTextarea extends LitElement {
|
|
4
4
|
static formAssociated: boolean;
|
|
5
5
|
private _internals;
|
|
6
|
+
static shadowRootOptions: {
|
|
7
|
+
clonable?: boolean;
|
|
8
|
+
customElementRegistry?: CustomElementRegistry | null;
|
|
9
|
+
mode: ShadowRootMode;
|
|
10
|
+
serializable?: boolean;
|
|
11
|
+
slotAssignment?: SlotAssignmentMode;
|
|
12
|
+
delegatesFocus: boolean;
|
|
13
|
+
};
|
|
6
14
|
private _textareaEl;
|
|
7
15
|
name: string;
|
|
8
16
|
label: string;
|
|
@@ -11,15 +19,20 @@ export declare class StTextarea extends LitElement {
|
|
|
11
19
|
helpText: string;
|
|
12
20
|
rows: number;
|
|
13
21
|
resize: TextareaResize;
|
|
22
|
+
autoResize: boolean;
|
|
23
|
+
spellcheckAttr?: "true" | "false";
|
|
14
24
|
required: boolean;
|
|
15
25
|
minlength?: number;
|
|
16
26
|
maxlength?: number;
|
|
17
27
|
disabled: boolean;
|
|
18
28
|
invalid: boolean;
|
|
19
29
|
readonly: boolean;
|
|
30
|
+
private _defaultValue;
|
|
20
31
|
constructor();
|
|
21
32
|
static styles: import("lit").CSSResult[];
|
|
33
|
+
firstUpdated(changedProperties: PropertyValues<this>): void;
|
|
22
34
|
updated(changedProperties: PropertyValues<this>): void;
|
|
35
|
+
private _adjustHeight;
|
|
23
36
|
private _syncValidity;
|
|
24
37
|
formResetCallback(): void;
|
|
25
38
|
checkValidity(): boolean;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/textarea.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAC,MAAM,KAAK,CAAC;AAK1D,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;AAEzE,qBACa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAmB;
|
|
1
|
+
{"version":3,"file":"textarea.d.ts","sourceRoot":"","sources":["../../../src/components/textarea/textarea.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAa,cAAc,EAAC,MAAM,KAAK,CAAC;AAK1D,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;AAEzE,qBACa,UAAW,SAAQ,UAAU;IACxC,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAmB;IAGrC,MAAM,CAAC,iBAAiB;;;;;;;MAA2D;IAEhE,OAAO,CAAC,WAAW,CAAuB;IAEpB,IAAI,SAAM;IACzB,KAAK,SAAM;IACX,KAAK,SAAM;IACX,WAAW,SAAM;IACP,QAAQ,SAAM;IAGxB,IAAI,SAAK;IACM,MAAM,EAAE,cAAc,CAAc;IAGxB,UAAU,UAAS;IAGrB,cAAc,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAG3C,QAAQ,UAAS;IACjC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IAGH,QAAQ,UAAS;IACjB,OAAO,UAAS;IAChB,QAAQ,UAAS;IAE3D,OAAO,CAAC,aAAa,CAAM;IAE3B,cAaC;IAED,MAAM,CAAC,MAAM,4BA4FX;IAEO,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,QAI5D;IAEQ,OAAO,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,QASvD;YAEa,aAAa;IAS3B,OAAO,CAAC,aAAa;IASrB,iBAAiB,SAShB;IAEM,aAAa,YAEnB;IAEM,cAAc,YAEpB;IAED,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,aAAa;IAIrB,MAAM,yCA4BL;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
|