@synergy-design-system/components 1.27.0 → 2.1.0

package/dist/components/tab-group/tab-group.component.d.ts

@@ -0,0 +1,85 @@
+import SynergyElement from '../../internal/synergy-element.js';
+import SynIconButton from '../icon-button/icon-button.component.js';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Tab groups organize content into a container that shows one section at a time.
+ * @documentation https://synergy.style/components/tab-group
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon-button
+ *
+ * @slot - Used for grouping tab panels in the tab group. Must be `<syn-tab-panel>` elements.
+ * @slot nav - Used for grouping tabs in the tab group. Must be `<syn-tab>` elements.
+ *
+ * @event {{ name: String }} syn-tab-show - Emitted when a tab is shown. The payload of the event returns the "panel" attribute of the shown tab.
+ * @event {{ name: String }} syn-tab-hide - Emitted when a tab is hidden. The payload of the event returns the "panel" attribute of the hidden tab.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart nav - The tab group's navigation container where tabs are slotted in.
+ * @csspart tabs - The container that wraps the tabs.
+ * @csspart active-tab-indicator - The line that highlights the currently selected tab.
+ * @csspart body - The tab group's body where tab panels are slotted in.
+ * @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, an `<syn-icon-button>`.
+ * @csspart scroll-button--start - The starting scroll button.
+ * @csspart scroll-button--end - The ending scroll button.
+ * @csspart scroll-button__base - The scroll button's exported `base` part.
+ *
+ * @cssproperty --indicator-color - The color of the active tab indicator.
+ * @cssproperty --indicator-width - The width of the active tab indicator.
+ * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).
+ * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
+ */
+export default class SynTabGroup extends SynergyElement {
+    static styles: CSSResultGroup;
+    static dependencies: {
+        'syn-icon-button': typeof SynIconButton;
+    };
+    private readonly localize;
+    private activeTab?;
+    private mutationObserver;
+    private resizeObserver;
+    private tabs;
+    private panels;
+    tabGroup: HTMLElement;
+    body: HTMLSlotElement;
+    nav: HTMLElement;
+    indicator: HTMLElement;
+    private hasScrollControls;
+    /** The placement of the tabs. */
+    placement: 'top' | 'start' | 'end';
+    /**
+     * When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to
+     * manual, the tab will receive focus but will not show until the user presses spacebar or enter.
+     */
+    activation: 'auto' | 'manual';
+    /** Disables the scroll arrows that appear when tabs overflow. */
+    noScrollControls: boolean;
+    /** Draws the tab group as a contained element. */
+    contained: boolean;
+    /** Draws the tab group with edges instead of roundings. Takes only effect if used with the 'contained' property */
+    sharp: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private getAllTabs;
+    private getAllPanels;
+    private getActiveTab;
+    private handleClick;
+    private handleKeyDown;
+    private handleScrollToStart;
+    private handleScrollToEnd;
+    private setActiveTab;
+    private setAriaLabels;
+    private repositionIndicator;
+    private syncTabsAndPanels;
+    updateScrollControls(): void;
+    syncIndicator(): void;
+    /** Shows the specified tab panel. */
+    show(panel: string): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'syn-tab-group': SynTabGroup;
+    }
+}

package/dist/components/tab-group/tab-group.component.js

@@ -0,0 +1,25 @@
+import {
+  SynTabGroup
+} from "../../chunks/chunk.63OREJEF.js";
+import "../../chunks/chunk.NGI67WXT.js";
+import "../../chunks/chunk.QTTBNK5Q.js";
+import "../../chunks/chunk.RIJKFEYZ.js";
+import "../../chunks/chunk.7BN75LQX.js";
+import "../../chunks/chunk.ZHH2AHOZ.js";
+import "../../chunks/chunk.LJQ7LEPV.js";
+import "../../chunks/chunk.EPP5MGNJ.js";
+import "../../chunks/chunk.JF333ACU.js";
+import "../../chunks/chunk.6C4JXZZN.js";
+import "../../chunks/chunk.SDQC32B3.js";
+import "../../chunks/chunk.PJO6TM3T.js";
+import "../../chunks/chunk.2RF7KO5I.js";
+import "../../chunks/chunk.AVTU2BGE.js";
+import "../../chunks/chunk.C7624ITA.js";
+import "../../chunks/chunk.M6WH7QEC.js";
+import "../../chunks/chunk.6XXPHG57.js";
+import "../../chunks/chunk.NHFTJEYN.js";
+import "../../chunks/chunk.QNDC5KWA.js";
+export {
+  SynTabGroup as default
+};
+//# sourceMappingURL=tab-group.component.js.map

package/dist/components/tab-group/tab-group.component.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/tab-group/tab-group.custom.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/tab-group/tab-group.custom.styles.js

@@ -0,0 +1,8 @@
+import {
+  tab_group_custom_styles_default
+} from "../../chunks/chunk.NGI67WXT.js";
+import "../../chunks/chunk.QNDC5KWA.js";
+export {
+  tab_group_custom_styles_default as default
+};
+//# sourceMappingURL=tab-group.custom.styles.js.map

package/dist/components/tab-group/tab-group.custom.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/tab-group/tab-group.d.ts

@@ -0,0 +1,8 @@
+import SynTabGroup from './tab-group.component.js';
+export * from './tab-group.component.js';
+export default SynTabGroup;
+declare global {
+    interface HTMLElementTagNameMap {
+        'syn-tab-group': SynTabGroup;
+    }
+}

package/dist/components/tab-group/tab-group.js

@@ -0,0 +1,26 @@
+import {
+  tab_group_default
+} from "../../chunks/chunk.QYBARUDC.js";
+import "../../chunks/chunk.63OREJEF.js";
+import "../../chunks/chunk.NGI67WXT.js";
+import "../../chunks/chunk.QTTBNK5Q.js";
+import "../../chunks/chunk.RIJKFEYZ.js";
+import "../../chunks/chunk.7BN75LQX.js";
+import "../../chunks/chunk.ZHH2AHOZ.js";
+import "../../chunks/chunk.LJQ7LEPV.js";
+import "../../chunks/chunk.EPP5MGNJ.js";
+import "../../chunks/chunk.JF333ACU.js";
+import "../../chunks/chunk.6C4JXZZN.js";
+import "../../chunks/chunk.SDQC32B3.js";
+import "../../chunks/chunk.PJO6TM3T.js";
+import "../../chunks/chunk.2RF7KO5I.js";
+import "../../chunks/chunk.AVTU2BGE.js";
+import "../../chunks/chunk.C7624ITA.js";
+import "../../chunks/chunk.M6WH7QEC.js";
+import "../../chunks/chunk.6XXPHG57.js";
+import "../../chunks/chunk.NHFTJEYN.js";
+import "../../chunks/chunk.QNDC5KWA.js";
+export {
+  tab_group_default as default
+};
+//# sourceMappingURL=tab-group.js.map

package/dist/components/tab-group/tab-group.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/tab-group/tab-group.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/tab-group/tab-group.styles.js

@@ -0,0 +1,8 @@
+import {
+  tab_group_styles_default
+} from "../../chunks/chunk.QTTBNK5Q.js";
+import "../../chunks/chunk.QNDC5KWA.js";
+export {
+  tab_group_styles_default as default
+};
+//# sourceMappingURL=tab-group.styles.js.map

package/dist/components/tab-group/tab-group.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/tab-panel/tab-panel.component.d.ts

@@ -0,0 +1,26 @@
+import SynergyElement from '../../internal/synergy-element.js';
+import type { CSSResultGroup } from 'lit';
+/**
+ * @summary Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.
+ * @documentation https://synergy.style/components/tab-panel
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - The tab panel's content.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --padding - The tab panel's padding.
+ */
+export default class SynTabPanel extends SynergyElement {
+    static styles: CSSResultGroup;
+    private readonly attrId;
+    private readonly componentId;
+    /** The tab panel's name. */
+    name: string;
+    /** When true, the tab panel will be shown. */
+    active: boolean;
+    connectedCallback(): void;
+    handleActiveChange(): void;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/components/tab-panel/tab-panel.component.js

@@ -0,0 +1,12 @@
+import {
+  SynTabPanel
+} from "../../chunks/chunk.Q2LICMN2.js";
+import "../../chunks/chunk.XHWYGYMQ.js";
+import "../../chunks/chunk.YUHA7UIQ.js";
+import "../../chunks/chunk.AVTU2BGE.js";
+import "../../chunks/chunk.NHFTJEYN.js";
+import "../../chunks/chunk.QNDC5KWA.js";
+export {
+  SynTabPanel as default
+};
+//# sourceMappingURL=tab-panel.component.js.map

package/dist/components/tab-panel/tab-panel.component.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/tab-panel/tab-panel.custom.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/tab-panel/tab-panel.custom.styles.js

@@ -0,0 +1,8 @@
+import {
+  tab_panel_custom_styles_default
+} from "../../chunks/chunk.XHWYGYMQ.js";
+import "../../chunks/chunk.QNDC5KWA.js";
+export {
+  tab_panel_custom_styles_default as default
+};
+//# sourceMappingURL=tab-panel.custom.styles.js.map

package/dist/components/tab-panel/tab-panel.custom.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/tab-panel/tab-panel.d.ts

@@ -0,0 +1,8 @@
+import SynTabPanel from './tab-panel.component.js';
+export * from './tab-panel.component.js';
+export default SynTabPanel;
+declare global {
+    interface HTMLElementTagNameMap {
+        'syn-tab-panel': SynTabPanel;
+    }
+}

package/dist/components/tab-panel/tab-panel.js

@@ -0,0 +1,13 @@
+import {
+  tab_panel_default
+} from "../../chunks/chunk.NXTU4OEY.js";
+import "../../chunks/chunk.Q2LICMN2.js";
+import "../../chunks/chunk.XHWYGYMQ.js";
+import "../../chunks/chunk.YUHA7UIQ.js";
+import "../../chunks/chunk.AVTU2BGE.js";
+import "../../chunks/chunk.NHFTJEYN.js";
+import "../../chunks/chunk.QNDC5KWA.js";
+export {
+  tab_panel_default as default
+};
+//# sourceMappingURL=tab-panel.js.map

package/dist/components/tab-panel/tab-panel.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/tab-panel/tab-panel.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/tab-panel/tab-panel.styles.js

@@ -0,0 +1,8 @@
+import {
+  tab_panel_styles_default
+} from "../../chunks/chunk.YUHA7UIQ.js";
+import "../../chunks/chunk.QNDC5KWA.js";
+export {
+  tab_panel_styles_default as default
+};
+//# sourceMappingURL=tab-panel.styles.js.map

package/dist/components/tab-panel/tab-panel.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/tag/tag.component.js

@@ -1,22 +1,22 @@
 import {
   SynTag
-} from "../../chunks/chunk.3WS2ECKG.js";
+} from "../../chunks/chunk.RESDFE73.js";
 import "../../chunks/chunk.B6R3IVGO.js";
 import "../../chunks/chunk.BGHK4NQA.js";
-import "../../chunks/chunk.TUIMTZS3.js";
+import "../../chunks/chunk.7BN75LQX.js";
 import "../../chunks/chunk.ZHH2AHOZ.js";
 import "../../chunks/chunk.LJQ7LEPV.js";
-import "../../chunks/chunk.JVN6QVKB.js";
-import "../../chunks/chunk.66MOXMDP.js";
+import "../../chunks/chunk.EPP5MGNJ.js";
+import "../../chunks/chunk.JF333ACU.js";
 import "../../chunks/chunk.6C4JXZZN.js";
-import "../../chunks/chunk.VTKIDI7N.js";
+import "../../chunks/chunk.SDQC32B3.js";
 import "../../chunks/chunk.PJO6TM3T.js";
 import "../../chunks/chunk.2RF7KO5I.js";
 import "../../chunks/chunk.AVTU2BGE.js";
 import "../../chunks/chunk.C7624ITA.js";
-import "../../chunks/chunk.GEHO4WRP.js";
-import "../../chunks/chunk.QY3GFWGZ.js";
-import "../../chunks/chunk.ALVUFXV4.js";
+import "../../chunks/chunk.M6WH7QEC.js";
+import "../../chunks/chunk.6XXPHG57.js";
+import "../../chunks/chunk.NHFTJEYN.js";
 import "../../chunks/chunk.QNDC5KWA.js";
 export {
   SynTag as default

package/dist/components/tag/tag.js

@@ -1,23 +1,23 @@
 import {
   tag_default
-} from "../../chunks/chunk.ULXRBTQD.js";
-import "../../chunks/chunk.3WS2ECKG.js";
+} from "../../chunks/chunk.GC2WQKSX.js";
+import "../../chunks/chunk.RESDFE73.js";
 import "../../chunks/chunk.B6R3IVGO.js";
 import "../../chunks/chunk.BGHK4NQA.js";
-import "../../chunks/chunk.TUIMTZS3.js";
+import "../../chunks/chunk.7BN75LQX.js";
 import "../../chunks/chunk.ZHH2AHOZ.js";
 import "../../chunks/chunk.LJQ7LEPV.js";
-import "../../chunks/chunk.JVN6QVKB.js";
-import "../../chunks/chunk.66MOXMDP.js";
+import "../../chunks/chunk.EPP5MGNJ.js";
+import "../../chunks/chunk.JF333ACU.js";
 import "../../chunks/chunk.6C4JXZZN.js";
-import "../../chunks/chunk.VTKIDI7N.js";
+import "../../chunks/chunk.SDQC32B3.js";
 import "../../chunks/chunk.PJO6TM3T.js";
 import "../../chunks/chunk.2RF7KO5I.js";
 import "../../chunks/chunk.AVTU2BGE.js";
 import "../../chunks/chunk.C7624ITA.js";
-import "../../chunks/chunk.GEHO4WRP.js";
-import "../../chunks/chunk.QY3GFWGZ.js";
-import "../../chunks/chunk.ALVUFXV4.js";
+import "../../chunks/chunk.M6WH7QEC.js";
+import "../../chunks/chunk.6XXPHG57.js";
+import "../../chunks/chunk.NHFTJEYN.js";
 import "../../chunks/chunk.QNDC5KWA.js";
 export {
   tag_default as default

package/dist/components/textarea/textarea.component.js

@@ -1,6 +1,6 @@
 import {
   SynTextarea
-} from "../../chunks/chunk.VX7U6NLG.js";
+} from "../../chunks/chunk.K3D5B3ZN.js";
 import "../../chunks/chunk.YBIBWRKC.js";
 import "../../chunks/chunk.2EI3TNL7.js";
 import "../../chunks/chunk.WFAJR3FN.js";
@@ -8,7 +8,7 @@ import "../../chunks/chunk.TTL762VF.js";
 import "../../chunks/chunk.JUJZBRXD.js";
 import "../../chunks/chunk.66WXVGAW.js";
 import "../../chunks/chunk.AVTU2BGE.js";
-import "../../chunks/chunk.ALVUFXV4.js";
+import "../../chunks/chunk.NHFTJEYN.js";
 import "../../chunks/chunk.QNDC5KWA.js";
 export {
   SynTextarea as default

package/dist/components/textarea/textarea.js

@@ -1,7 +1,7 @@
 import {
   textarea_default
-} from "../../chunks/chunk.BTBIQMBX.js";
-import "../../chunks/chunk.VX7U6NLG.js";
+} from "../../chunks/chunk.3YSKET4G.js";
+import "../../chunks/chunk.K3D5B3ZN.js";
 import "../../chunks/chunk.YBIBWRKC.js";
 import "../../chunks/chunk.2EI3TNL7.js";
 import "../../chunks/chunk.WFAJR3FN.js";
@@ -9,7 +9,7 @@ import "../../chunks/chunk.TTL762VF.js";
 import "../../chunks/chunk.JUJZBRXD.js";
 import "../../chunks/chunk.66WXVGAW.js";
 import "../../chunks/chunk.AVTU2BGE.js";
-import "../../chunks/chunk.ALVUFXV4.js";
+import "../../chunks/chunk.NHFTJEYN.js";
 import "../../chunks/chunk.QNDC5KWA.js";
 export {
   textarea_default as default

package/dist/components/tooltip/tooltip.component.js

@@ -1,16 +1,16 @@
 import {
   SynTooltip
-} from "../../chunks/chunk.CWXJ42YP.js";
+} from "../../chunks/chunk.AM4TRH2T.js";
 import "../../chunks/chunk.4X3HY2V5.js";
 import "../../chunks/chunk.YHRXL2XR.js";
-import "../../chunks/chunk.UHHXPHZM.js";
+import "../../chunks/chunk.QUR6IKYK.js";
 import "../../chunks/chunk.MIMALEWP.js";
 import "../../chunks/chunk.UMKKOHXB.js";
 import "../../chunks/chunk.QAUTITK3.js";
 import "../../chunks/chunk.AVTU2BGE.js";
-import "../../chunks/chunk.GEHO4WRP.js";
-import "../../chunks/chunk.QY3GFWGZ.js";
-import "../../chunks/chunk.ALVUFXV4.js";
+import "../../chunks/chunk.M6WH7QEC.js";
+import "../../chunks/chunk.6XXPHG57.js";
+import "../../chunks/chunk.NHFTJEYN.js";
 import "../../chunks/chunk.QNDC5KWA.js";
 export {
   SynTooltip as default

package/dist/components/tooltip/tooltip.js

@@ -1,17 +1,17 @@
 import {
   tooltip_default
-} from "../../chunks/chunk.6FQ4SKI2.js";
-import "../../chunks/chunk.CWXJ42YP.js";
+} from "../../chunks/chunk.CSLZHXEE.js";
+import "../../chunks/chunk.AM4TRH2T.js";
 import "../../chunks/chunk.4X3HY2V5.js";
 import "../../chunks/chunk.YHRXL2XR.js";
-import "../../chunks/chunk.UHHXPHZM.js";
+import "../../chunks/chunk.QUR6IKYK.js";
 import "../../chunks/chunk.MIMALEWP.js";
 import "../../chunks/chunk.UMKKOHXB.js";
 import "../../chunks/chunk.QAUTITK3.js";
 import "../../chunks/chunk.AVTU2BGE.js";
-import "../../chunks/chunk.GEHO4WRP.js";
-import "../../chunks/chunk.QY3GFWGZ.js";
-import "../../chunks/chunk.ALVUFXV4.js";
+import "../../chunks/chunk.M6WH7QEC.js";
+import "../../chunks/chunk.6XXPHG57.js";
+import "../../chunks/chunk.NHFTJEYN.js";
 import "../../chunks/chunk.QNDC5KWA.js";
 export {
   tooltip_default as default