@stackoverflow/stacks 0.76.0 → 1.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (86) hide show
  1. package/LICENSE.MD +9 -9
  2. package/README.md +47 -47
  3. package/dist/controllers/index.d.ts +7 -7
  4. package/dist/controllers/s-expandable-control.d.ts +17 -17
  5. package/dist/controllers/s-modal.d.ts +97 -97
  6. package/dist/controllers/s-navigation-tablist.d.ts +36 -36
  7. package/dist/controllers/s-popover.d.ts +155 -155
  8. package/dist/controllers/s-table.d.ts +8 -8
  9. package/dist/controllers/s-tooltip.d.ts +82 -82
  10. package/dist/controllers/s-uploader.d.ts +48 -48
  11. package/dist/css/stacks.css +4321 -2635
  12. package/dist/css/stacks.min.css +1 -1
  13. package/dist/index.d.ts +3 -3
  14. package/dist/js/stacks.js +1978 -1978
  15. package/dist/js/stacks.min.js +1 -1
  16. package/dist/stacks.d.ts +21 -21
  17. package/lib/css/atomic/{_stacks-borders.less → borders.less} +378 -378
  18. package/lib/css/atomic/{_stacks-colors.less → colors.less} +209 -209
  19. package/lib/css/atomic/{_stacks-flex.less → flex.less} +375 -374
  20. package/lib/css/atomic/{_stacks-grid.less → grid.less} +174 -174
  21. package/lib/css/atomic/{_stacks-misc.less → misc.less} +343 -343
  22. package/lib/css/atomic/spacing.less +314 -0
  23. package/lib/css/atomic/{_stacks-typography.less → typography.less} +273 -273
  24. package/lib/css/atomic/width-height.less +194 -0
  25. package/lib/css/base/{_stacks-body.less → body.less} +44 -44
  26. package/lib/css/base/{_stacks-configuration-static.less → configuration-static.less} +61 -59
  27. package/lib/css/base/{_stacks-icons.less → icons.less} +20 -20
  28. package/lib/css/base/{_stacks-internals.less → internals.less} +220 -220
  29. package/lib/css/base/{_stacks-reset-meyer.less → reset-meyer.less} +64 -64
  30. package/lib/css/base/{_stacks-reset-normalize.less → reset-normalize.less} +449 -449
  31. package/lib/css/base/{_stacks-reset.less → reset.less} +20 -20
  32. package/lib/css/components/{_stacks-activity-indicator.less → activity-indicator.less} +45 -45
  33. package/lib/css/components/{_stacks-avatars.less → avatars.less} +189 -189
  34. package/lib/css/components/{_stacks-badges.less → badges.less} +209 -209
  35. package/lib/css/components/{_stacks-banners.less → banners.less} +80 -80
  36. package/lib/css/components/{_stacks-blank-states.less → blank-states.less} +26 -26
  37. package/lib/css/components/{_stacks-breadcrumbs.less → breadcrumbs.less} +44 -44
  38. package/lib/css/components/{_stacks-button-groups.less → button-groups.less} +104 -104
  39. package/lib/css/components/{_stacks-buttons.less → buttons.less} +665 -658
  40. package/lib/css/components/{_stacks-cards.less → cards.less} +44 -44
  41. package/lib/css/components/{_stacks-code-blocks.less → code-blocks.less} +130 -130
  42. package/lib/css/components/{_stacks-collapsible.less → collapsible.less} +104 -104
  43. package/lib/css/components/{_stacks-inputs.less → inputs.less} +728 -728
  44. package/lib/css/components/{_stacks-link-previews.less → link-previews.less} +136 -136
  45. package/lib/css/components/{_stacks-links.less → links.less} +218 -218
  46. package/lib/css/components/{_stacks-menu.less → menu.less} +47 -47
  47. package/lib/css/components/{_stacks-modals.less → modals.less} +133 -133
  48. package/lib/css/components/{_stacks-navigation.less → navigation.less} +146 -146
  49. package/lib/css/components/{_stacks-notices.less → notices.less} +233 -233
  50. package/lib/css/components/{_stacks-page-titles.less → page-titles.less} +60 -60
  51. package/lib/css/components/{_stacks-pagination.less → pagination.less} +55 -55
  52. package/lib/css/components/{_stacks-popovers.less → popovers.less} +197 -197
  53. package/lib/css/components/{_stacks-post-summary.less → post-summary.less} +425 -425
  54. package/lib/css/components/{_stacks-progress-bars.less → progress-bars.less} +330 -331
  55. package/lib/css/components/{_stacks-prose.less → prose.less} +503 -503
  56. package/lib/css/components/{_stacks-spinner.less → spinner.less} +107 -107
  57. package/lib/css/components/{_stacks-tables.less → tables.less} +341 -341
  58. package/lib/css/components/{_stacks-tags.less → tags.less} +236 -236
  59. package/lib/css/components/{_stacks-toggle-switches.less → toggle-switches.less} +144 -144
  60. package/lib/css/components/{_stacks-topbar.less → topbar.less} +427 -425
  61. package/lib/css/components/{_stacks-uploader.less → uploader.less} +210 -210
  62. package/lib/css/components/{_stacks-user-cards.less → user-cards.less} +169 -169
  63. package/lib/css/components/{_stacks-widget-dynamic.less → widget-dynamic.less} +33 -33
  64. package/lib/css/components/{_stacks-widget-static.less → widget-static.less} +273 -272
  65. package/lib/css/exports/{_stacks-constants-colors.less → constants-colors.less} +1092 -1112
  66. package/lib/css/exports/constants-helpers.less +108 -0
  67. package/lib/css/exports/{_stacks-constants-type.less → constants-type.less} +153 -152
  68. package/lib/css/exports/{_stacks-exports.less → exports.less} +15 -15
  69. package/lib/css/exports/{_stacks-mixins.less → mixins.less} +237 -220
  70. package/lib/css/stacks-dynamic.less +35 -35
  71. package/lib/css/stacks-static.less +86 -86
  72. package/lib/ts/controllers/index.ts +7 -7
  73. package/lib/ts/controllers/s-expandable-control.ts +188 -188
  74. package/lib/ts/controllers/s-modal.ts +321 -321
  75. package/lib/ts/controllers/s-navigation-tablist.ts +117 -117
  76. package/lib/ts/controllers/s-popover.ts +547 -547
  77. package/lib/ts/controllers/s-table.ts +220 -220
  78. package/lib/ts/controllers/s-tooltip.ts +246 -246
  79. package/lib/ts/controllers/s-uploader.ts +172 -172
  80. package/lib/ts/index.ts +20 -20
  81. package/lib/ts/stacks.ts +88 -88
  82. package/lib/tsconfig.json +13 -13
  83. package/package.json +87 -87
  84. package/lib/css/atomic/_stacks-spacing.less +0 -168
  85. package/lib/css/atomic/_stacks-width-height.less +0 -195
  86. package/lib/css/exports/_stacks-constants-helpers.less +0 -139
package/LICENSE.MD CHANGED
@@ -1,9 +1,9 @@
1
- The MIT License (MIT)
2
-
3
- Copyright 2017-2020 Stack Exchange Inc.
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6
-
7
- The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
8
-
9
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
1
+ The MIT License (MIT)
2
+
3
+ Copyright 2017-2020 Stack Exchange Inc.
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
6
+
7
+ The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
8
+
9
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
package/README.md CHANGED
@@ -1,47 +1,47 @@
1
- # Stacks
2
-
3
- Stacks is Stack Overflow’s design system. It includes the resources needed to create consistent, predictable interfaces and workflows that conform to Stack Overflow’s principles, design language, and best practices.
4
-
5
- Our documentation is built with Stacks itself, using its [immutable, atomic classes](http://johnpolacek.com/rethinking/) and components.
6
-
7
- The Stacks website documents:
8
-
9
- ### Product
10
- - Semantic and accessible component markup
11
- - Cross-browser compatible Less / CSS
12
- - An [icon library](https://github.com/StackExchange/Stacks-Icons)
13
-
14
- ### Email
15
- - Email templates & components
16
-
17
- Stacks documentation can be found at https://stackoverflow.design/
18
-
19
- ## Table of contents
20
-
21
- - [Using Stacks](#using-stacks)
22
- - [Building Stacks](#building-stacks)
23
- - [Bugs and feature requests](#bugs-and-feature-requests)
24
- - [Contributing](#contributing)
25
- - [License](#license)
26
-
27
- ## Using Stacks
28
- Using Stacks is outlined in our [usage guidelines](https://stackoverflow.design/product/guidelines/using-stacks).
29
-
30
- ## Building Stacks
31
- To contribute to Stacks documentation or its CSS library, you’ll need to build Stacks locally. View our [building guidelines](https://stackoverflow.design/product/guidelines/building).
32
-
33
- Having trouble getting these steps to work? Open [an issue](https://github.com/StackExchange/Stacks/issues/new) with a `setup` label.
34
-
35
- ## Testing Stacks
36
- Stacks has implemented visual regression testing with [Backstop](https://github.com/garris/BackstopJS). To test if your new feature introduces visual regressions, run `npm run test` in a new Terminal window while Stacks is running. After the tests have run, a new browser window with any regressions will show. If the regressions are desired, you can run `npm run approve` to establish the new baseline.
37
-
38
- Individual routes to test are found in [backstop.json](/backstop.json)
39
-
40
- ## Bugs and feature requests
41
- Have a bug or feature request? First search existing or closed issues to make sure the issue hasn’t been noted yet. If not, review our [issue guidelines](/CONTRIBUTING.md#open-an-issue) for submitting [a bug report](/CONTRIBUTING.md#reporting-bugs) or [feature request](/CONTRIBUTING.md#feature-requests).
42
-
43
- ## Contributing
44
- If you’d like to contribute to Stacks, please read through our [contribution guidelines](/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
45
-
46
- ## License
47
- Code and documentation copyright 2017-2022 Stack Exchange, Inc and released under the [MIT License](/LICENSE.MD).
1
+ # Stacks
2
+
3
+ Stacks is Stack Overflow’s design system. It includes the resources needed to create consistent, predictable interfaces and workflows that conform to Stack Overflow’s principles, design language, and best practices.
4
+
5
+ Our documentation is built with Stacks itself, using its [immutable, atomic classes](http://johnpolacek.com/rethinking/) and components.
6
+
7
+ The Stacks website documents:
8
+
9
+ ### Product
10
+ - Semantic and accessible component markup
11
+ - Cross-browser compatible Less / CSS
12
+ - An [icon library](https://github.com/StackExchange/Stacks-Icons)
13
+
14
+ ### Email
15
+ - Email templates & components
16
+
17
+ Stacks documentation can be found at https://stackoverflow.design/
18
+
19
+ ## Table of contents
20
+
21
+ - [Using Stacks](#using-stacks)
22
+ - [Building Stacks](#building-stacks)
23
+ - [Bugs and feature requests](#bugs-and-feature-requests)
24
+ - [Contributing](#contributing)
25
+ - [License](#license)
26
+
27
+ ## Using Stacks
28
+ Using Stacks is outlined in our [usage guidelines](https://stackoverflow.design/product/guidelines/using-stacks).
29
+
30
+ ## Building Stacks
31
+ To contribute to Stacks documentation or its CSS library, you’ll need to build Stacks locally. View our [building guidelines](https://stackoverflow.design/product/guidelines/building).
32
+
33
+ Having trouble getting these steps to work? Open [an issue](https://github.com/StackExchange/Stacks/issues/new) with a `setup` label.
34
+
35
+ ## Testing Stacks
36
+ Stacks has implemented visual regression testing with [Backstop](https://github.com/garris/BackstopJS). To test if your new feature introduces visual regressions, run `npm run test` in a new Terminal window while Stacks is running. After the tests have run, a new browser window with any regressions will show. If the regressions are desired, you can run `npm run approve` to establish the new baseline.
37
+
38
+ Individual routes to test are found in [backstop.json](/backstop.json)
39
+
40
+ ## Bugs and feature requests
41
+ Have a bug or feature request? First search existing or closed issues to make sure the issue hasn’t been noted yet. If not, review our [issue guidelines](/CONTRIBUTING.md#open-an-issue) for submitting [a bug report](/CONTRIBUTING.md#reporting-bugs) or [feature request](/CONTRIBUTING.md#feature-requests).
42
+
43
+ ## Contributing
44
+ If you’d like to contribute to Stacks, please read through our [contribution guidelines](/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
45
+
46
+ ## License
47
+ Code and documentation copyright 2017-2022 Stack Exchange, Inc and released under the [MIT License](/LICENSE.MD).
@@ -1,7 +1,7 @@
1
- export { ExpandableController } from './s-expandable-control';
2
- export { hideModal, ModalController, showModal } from './s-modal';
3
- export { TabListController } from './s-navigation-tablist';
4
- export { attachPopover, detachPopover, hidePopover, BasePopoverController, PopoverController, showPopover } from './s-popover';
5
- export { TableController } from './s-table';
6
- export { setTooltipHtml, setTooltipText, TooltipController } from './s-tooltip';
7
- export { UploaderController } from './s-uploader';
1
+ export { ExpandableController } from './s-expandable-control';
2
+ export { hideModal, ModalController, showModal } from './s-modal';
3
+ export { TabListController } from './s-navigation-tablist';
4
+ export { attachPopover, detachPopover, hidePopover, BasePopoverController, PopoverController, showPopover } from './s-popover';
5
+ export { TableController } from './s-table';
6
+ export { setTooltipHtml, setTooltipText, TooltipController } from './s-tooltip';
7
+ export { UploaderController } from './s-uploader';
@@ -1,17 +1,17 @@
1
- import * as Stacks from '../stacks';
2
- export declare class ExpandableController extends Stacks.StacksController {
3
- private isCollapsed;
4
- private events;
5
- private isCheckable;
6
- private isRadio;
7
- private lastKeydownClickTimestamp;
8
- initialize(): void;
9
- _isCollapsedForClickable(): boolean;
10
- _isCollapsedForCheckable(): boolean;
11
- get controlledCollapsibles(): HTMLElement[];
12
- _dispatchShowHideEvent(isShow: boolean): void;
13
- _toggleClass(doAdd: boolean): void;
14
- listener(e: Event): void;
15
- connect(): void;
16
- disconnect(): void;
17
- }
1
+ import * as Stacks from '../stacks';
2
+ export declare class ExpandableController extends Stacks.StacksController {
3
+ private isCollapsed;
4
+ private events;
5
+ private isCheckable;
6
+ private isRadio;
7
+ private lastKeydownClickTimestamp;
8
+ initialize(): void;
9
+ _isCollapsedForClickable(): boolean;
10
+ _isCollapsedForCheckable(): boolean;
11
+ get controlledCollapsibles(): HTMLElement[];
12
+ _dispatchShowHideEvent(isShow: boolean): void;
13
+ _toggleClass(doAdd: boolean): void;
14
+ listener(e: Event): void;
15
+ connect(): void;
16
+ disconnect(): void;
17
+ }
@@ -1,97 +1,97 @@
1
- import * as Stacks from "../stacks";
2
- export declare class ModalController extends Stacks.StacksController {
3
- static targets: string[];
4
- private modalTarget;
5
- private initialFocusTargets;
6
- private _boundClickFn;
7
- private _boundKeypressFn;
8
- private returnElement;
9
- private _boundTabTrap;
10
- connect(): void;
11
- /**
12
- * Disconnects all added event listeners on controller disconnect
13
- */
14
- disconnect(): void;
15
- /**
16
- * Toggles the visibility of the modal
17
- */
18
- toggle(dispatcher?: Event | Element | null): void;
19
- /**
20
- * Shows the modal
21
- */
22
- show(dispatcher?: Event | Element | null): void;
23
- /**
24
- * Hides the modal
25
- */
26
- hide(dispatcher?: Event | Element | null): void;
27
- /**
28
- * Validates the modal settings and attempts to set necessary internal variables
29
- */
30
- private validate;
31
- /**
32
- * Toggles the visibility of the modal element
33
- * @param show Optional parameter that force shows/hides the element or toggles it if left undefined
34
- */
35
- private _toggle;
36
- /**
37
- * Listens for the s-modal:hidden event and focuses the returnElement when it is fired
38
- */
39
- private focusReturnElement;
40
- /**
41
- * Remove the element on hide if the `remove-when-hidden` flag is set
42
- */
43
- private removeModalOnHide;
44
- /**
45
- * Gets all elements within the modal that could receive keyboard focus.
46
- */
47
- private getAllTabbables;
48
- /**
49
- * Returns the first visible element in an array or `undefined` if no elements are visible.
50
- */
51
- private firstVisible;
52
- /**
53
- * Returns the last visible element in an array or `undefined` if no elements are visible.
54
- */
55
- private lastVisible;
56
- /**
57
- * Attempts to shift keyboard focus into the modal.
58
- * If elements with `data-s-modal-target="initialFocus"` are present and visible, one of those will be selected.
59
- * Otherwise, the first visible focusable element will receive focus.
60
- */
61
- private focusInsideModal;
62
- /**
63
- * Returns keyboard focus to the modal if it has left or is about to leave.
64
- */
65
- private keepFocusWithinModal;
66
- /**
67
- * Binds global events to the document for hiding popovers on user interaction
68
- */
69
- private bindDocumentEvents;
70
- /**
71
- * Unbinds global events to the document for hiding popovers on user interaction
72
- */
73
- private unbindDocumentEvents;
74
- /**
75
- * Forces the popover to hide if a user clicks outside of it or its reference element
76
- */
77
- private hideOnOutsideClick;
78
- /**
79
- * Forces the popover to hide if the user presses escape while it, one of its childen, or the reference element are focused
80
- */
81
- private hideOnEscapePress;
82
- /**
83
- * Determines the correct dispatching element from a potential input
84
- * @param dispatcher The event or element to get the dispatcher from
85
- */
86
- private getDispatcher;
87
- }
88
- /**
89
- * Helper to manually show an s-modal element via external JS
90
- * @param element the element the `data-controller="s-modal"` attribute is on
91
- */
92
- export declare function showModal(element: HTMLElement): void;
93
- /**
94
- * Helper to manually hide an s-modal element via external JS
95
- * @param element the element the `data-controller="s-modal"` attribute is on
96
- */
97
- export declare function hideModal(element: HTMLElement): void;
1
+ import * as Stacks from "../stacks";
2
+ export declare class ModalController extends Stacks.StacksController {
3
+ static targets: string[];
4
+ private modalTarget;
5
+ private initialFocusTargets;
6
+ private _boundClickFn;
7
+ private _boundKeypressFn;
8
+ private returnElement;
9
+ private _boundTabTrap;
10
+ connect(): void;
11
+ /**
12
+ * Disconnects all added event listeners on controller disconnect
13
+ */
14
+ disconnect(): void;
15
+ /**
16
+ * Toggles the visibility of the modal
17
+ */
18
+ toggle(dispatcher?: Event | Element | null): void;
19
+ /**
20
+ * Shows the modal
21
+ */
22
+ show(dispatcher?: Event | Element | null): void;
23
+ /**
24
+ * Hides the modal
25
+ */
26
+ hide(dispatcher?: Event | Element | null): void;
27
+ /**
28
+ * Validates the modal settings and attempts to set necessary internal variables
29
+ */
30
+ private validate;
31
+ /**
32
+ * Toggles the visibility of the modal element
33
+ * @param show Optional parameter that force shows/hides the element or toggles it if left undefined
34
+ */
35
+ private _toggle;
36
+ /**
37
+ * Listens for the s-modal:hidden event and focuses the returnElement when it is fired
38
+ */
39
+ private focusReturnElement;
40
+ /**
41
+ * Remove the element on hide if the `remove-when-hidden` flag is set
42
+ */
43
+ private removeModalOnHide;
44
+ /**
45
+ * Gets all elements within the modal that could receive keyboard focus.
46
+ */
47
+ private getAllTabbables;
48
+ /**
49
+ * Returns the first visible element in an array or `undefined` if no elements are visible.
50
+ */
51
+ private firstVisible;
52
+ /**
53
+ * Returns the last visible element in an array or `undefined` if no elements are visible.
54
+ */
55
+ private lastVisible;
56
+ /**
57
+ * Attempts to shift keyboard focus into the modal.
58
+ * If elements with `data-s-modal-target="initialFocus"` are present and visible, one of those will be selected.
59
+ * Otherwise, the first visible focusable element will receive focus.
60
+ */
61
+ private focusInsideModal;
62
+ /**
63
+ * Returns keyboard focus to the modal if it has left or is about to leave.
64
+ */
65
+ private keepFocusWithinModal;
66
+ /**
67
+ * Binds global events to the document for hiding popovers on user interaction
68
+ */
69
+ private bindDocumentEvents;
70
+ /**
71
+ * Unbinds global events to the document for hiding popovers on user interaction
72
+ */
73
+ private unbindDocumentEvents;
74
+ /**
75
+ * Forces the popover to hide if a user clicks outside of it or its reference element
76
+ */
77
+ private hideOnOutsideClick;
78
+ /**
79
+ * Forces the popover to hide if the user presses escape while it, one of its childen, or the reference element are focused
80
+ */
81
+ private hideOnEscapePress;
82
+ /**
83
+ * Determines the correct dispatching element from a potential input
84
+ * @param dispatcher The event or element to get the dispatcher from
85
+ */
86
+ private getDispatcher;
87
+ }
88
+ /**
89
+ * Helper to manually show an s-modal element via external JS
90
+ * @param element the element the `data-controller="s-modal"` attribute is on
91
+ */
92
+ export declare function showModal(element: HTMLElement): void;
93
+ /**
94
+ * Helper to manually hide an s-modal element via external JS
95
+ * @param element the element the `data-controller="s-modal"` attribute is on
96
+ */
97
+ export declare function hideModal(element: HTMLElement): void;
@@ -1,36 +1,36 @@
1
- import * as Stacks from "../stacks";
2
- export declare class TabListController extends Stacks.StacksController {
3
- private boundSelectTab;
4
- private boundHandleKeydown;
5
- connect(): void;
6
- disconnect(): void;
7
- /**
8
- * Gets all tabs within the controller.
9
- */
10
- get tabTargets(): HTMLElement[];
11
- /**
12
- * Handles click events on individual tabs, causing them to be selected.
13
- */
14
- selectTab(event: MouseEvent): void;
15
- /**
16
- * Handles left and right arrow keydown events on individual tabs,
17
- * selecting the adjacent tab corresponding to the event.
18
- */
19
- handleKeydown(event: KeyboardEvent): void;
20
- /**
21
- * Attempts to switch to a new tab, doing nothing if the tab is already selected or
22
- * the s-navigation-tablist:select event is prevented.
23
- */
24
- private switchToTab;
25
- /**
26
- * Returns the currently selected tab or null if no tabs are selected.
27
- */
28
- get selectedTab(): HTMLElement | null;
29
- /**
30
- * Switches the tablist to the provided tab, updating the tabs and panels
31
- * to reflect the change.
32
- * @param selectedTab The tab to select. If `null` is provided or the element
33
- * is not a valid tab, all tabs will be unselected.
34
- */
35
- set selectedTab(selectedTab: HTMLElement | null);
36
- }
1
+ import * as Stacks from "../stacks";
2
+ export declare class TabListController extends Stacks.StacksController {
3
+ private boundSelectTab;
4
+ private boundHandleKeydown;
5
+ connect(): void;
6
+ disconnect(): void;
7
+ /**
8
+ * Gets all tabs within the controller.
9
+ */
10
+ get tabTargets(): HTMLElement[];
11
+ /**
12
+ * Handles click events on individual tabs, causing them to be selected.
13
+ */
14
+ selectTab(event: MouseEvent): void;
15
+ /**
16
+ * Handles left and right arrow keydown events on individual tabs,
17
+ * selecting the adjacent tab corresponding to the event.
18
+ */
19
+ handleKeydown(event: KeyboardEvent): void;
20
+ /**
21
+ * Attempts to switch to a new tab, doing nothing if the tab is already selected or
22
+ * the s-navigation-tablist:select event is prevented.
23
+ */
24
+ private switchToTab;
25
+ /**
26
+ * Returns the currently selected tab or null if no tabs are selected.
27
+ */
28
+ get selectedTab(): HTMLElement | null;
29
+ /**
30
+ * Switches the tablist to the provided tab, updating the tabs and panels
31
+ * to reflect the change.
32
+ * @param selectedTab The tab to select. If `null` is provided or the element
33
+ * is not a valid tab, all tabs will be unselected.
34
+ */
35
+ set selectedTab(selectedTab: HTMLElement | null);
36
+ }