ids-enterprise-wc 1.0.0-beta.22 → 1.0.0-beta.23

package/components/ids-tabs/ids-tab.d.ts

@@ -53,7 +53,7 @@ declare const Base: {
         click(): void;
         hidePopover(): void;
         showPopover(): void;
-        togglePopover(force?: boolean | undefined): void;
+        togglePopover(force?: boolean | undefined): boolean;
         addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener<K_1 extends keyof HTMLElementEventMap>(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
@@ -188,6 +188,7 @@ declare const Base: {
         ariaColIndex: string | null;
         ariaColSpan: string | null;
         ariaCurrent: string | null;
+        ariaDescription: string | null;
         ariaDisabled: string | null;
         ariaExpanded: string | null;
         ariaHasPopup: string | null;
@@ -258,6 +259,7 @@ declare const Base: {
         onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
         onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
         onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
+        onbeforetoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
         oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
@@ -406,7 +408,7 @@ declare const Base: {
         click(): void;
         hidePopover(): void;
         showPopover(): void;
-        togglePopover(force?: boolean | undefined): void;
+        togglePopover(force?: boolean | undefined): boolean;
         addEventListener<K_17 extends keyof HTMLElementEventMap>(type: K_17, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_17]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener<K_18 extends keyof HTMLElementEventMap>(type: K_18, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_18]) => any, options?: boolean | EventListenerOptions | undefined): void;
@@ -541,6 +543,7 @@ declare const Base: {
         ariaColIndex: string | null;
         ariaColSpan: string | null;
         ariaCurrent: string | null;
+        ariaDescription: string | null;
         ariaDisabled: string | null;
         ariaExpanded: string | null;
         ariaHasPopup: string | null;
@@ -611,6 +614,7 @@ declare const Base: {
         onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
         onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
         onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
+        onbeforetoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
         oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
@@ -708,16 +712,16 @@ declare const Base: {
     readonly attributes: any[];
 } & {
     new (...args: any[]): {
-        "__#13@#isClick": boolean;
-        "__#13@#isFocused": boolean;
+        "__#12@#isClick": boolean;
+        "__#12@#isFocused": boolean;
         connectedCallback(): void;
         disconnectedCallback(): void;
-        "__#13@#attachHideFocusEvents"(): void;
-        "__#13@#removeHideFocusEvents"(): void;
-        "__#13@#addHideFocusCssClass"(): void;
-        "__#13@#addIsFocusedCssClass"(): void;
-        "__#13@#removeHideFocusCssClass"(): void;
-        "__#13@#removeIsFocusedCssClass"(): void;
+        "__#12@#attachHideFocusEvents"(): void;
+        "__#12@#removeHideFocusEvents"(): void;
+        "__#12@#addHideFocusCssClass"(): void;
+        "__#12@#addIsFocusedCssClass"(): void;
+        "__#12@#removeHideFocusCssClass"(): void;
+        "__#12@#removeIsFocusedCssClass"(): void;
         get hideFocus(): boolean;
         set hideFocus(value: string | boolean | null);
         onEvent(eventName: string, target?: any, callback?: ((evt: any) => void) | undefined, options?: import("../../mixins/ids-events-mixin/ids-events-mixin").EventOptions | undefined): void;
@@ -770,7 +774,7 @@ declare const Base: {
         click(): void;
         hidePopover(): void;
         showPopover(): void;
-        togglePopover(force?: boolean | undefined): void;
+        togglePopover(force?: boolean | undefined): boolean;
         addEventListener<K_26 extends keyof HTMLElementEventMap>(type: K_26, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_26]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener<K_27 extends keyof HTMLElementEventMap>(type: K_27, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_27]) => any, options?: boolean | EventListenerOptions | undefined): void;
@@ -905,6 +909,7 @@ declare const Base: {
         ariaColIndex: string | null;
         ariaColSpan: string | null;
         ariaCurrent: string | null;
+        ariaDescription: string | null;
         ariaDisabled: string | null;
         ariaExpanded: string | null;
         ariaHasPopup: string | null;
@@ -975,6 +980,7 @@ declare const Base: {
         onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
         onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
         onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
+        onbeforetoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
         oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
@@ -1154,7 +1160,7 @@ declare const Base: {
         click(): void;
         hidePopover(): void;
         showPopover(): void;
-        togglePopover(force?: boolean | undefined): void;
+        togglePopover(force?: boolean | undefined): boolean;
         addEventListener<K_35 extends keyof HTMLElementEventMap>(type: K_35, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_35]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener<K_36 extends keyof HTMLElementEventMap>(type: K_36, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_36]) => any, options?: boolean | EventListenerOptions | undefined): void;
@@ -1289,6 +1295,7 @@ declare const Base: {
         ariaColIndex: string | null;
         ariaColSpan: string | null;
         ariaCurrent: string | null;
+        ariaDescription: string | null;
         ariaDisabled: string | null;
         ariaExpanded: string | null;
         ariaHasPopup: string | null;
@@ -1359,6 +1366,7 @@ declare const Base: {
         onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
         onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
         onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
+        onbeforetoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
         oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;

package/components/ids-tabs/ids-tab.js

@@ -1 +1 @@
-import{a}from"../../chunks/ids-chunk-5HZOMPC2.js";import"../../chunks/ids-chunk-NUE7RHA7.js";import"../../chunks/ids-chunk-RIOIOE7O.js";import"../../chunks/ids-chunk-Y2X37JEV.js";import"../../chunks/ids-chunk-MFR3ZJU3.js";import"../../chunks/ids-chunk-CVXM6WYD.js";import"../../chunks/ids-chunk-JC5MEEEQ.js";import"../../chunks/ids-chunk-MVPWITHY.js";import"../../chunks/ids-chunk-LZU7QFN4.js";import"../../chunks/ids-chunk-H2UUMN2T.js";import"../../chunks/ids-chunk-T6ZV4PDM.js";import"../../chunks/ids-chunk-3DA43NO3.js";import"../../chunks/ids-chunk-CK6SA7FU.js";import"../../chunks/ids-chunk-27RPCUPT.js";import"../../chunks/ids-chunk-Q4QJCPLZ.js";import"../../chunks/ids-chunk-ZUHWNQKP.js";import"../../chunks/ids-chunk-XE4WFW5M.js";import"../../chunks/ids-chunk-7MATJMV7.js";import"../../chunks/ids-chunk-OM3C4JYX.js";import"../../chunks/ids-chunk-RMV7ZP4H.js";import"../../chunks/ids-chunk-7MVZOSC6.js";import"../../chunks/ids-chunk-ROUTR3H3.js";import"../../chunks/ids-chunk-JN2QIYPV.js";import"../../chunks/ids-chunk-X4NATGYL.js";import"../../chunks/ids-chunk-U4XVR5SW.js";import"../../chunks/ids-chunk-5Q3WPKMB.js";import"../../chunks/ids-chunk-3Q46IU4X.js";import"../../chunks/ids-chunk-Y32WUP63.js";export{a as default};
+import{a}from"../../chunks/ids-chunk-RD7546WB.js";import"../../chunks/ids-chunk-FGGT5JRT.js";import"../../chunks/ids-chunk-THWPNPVI.js";import"../../chunks/ids-chunk-SFFMOANB.js";import"../../chunks/ids-chunk-RK2P2XSH.js";import"../../chunks/ids-chunk-VVZZ2ZHD.js";import"../../chunks/ids-chunk-VEYEV4RH.js";import"../../chunks/ids-chunk-7GOUFWOD.js";import"../../chunks/ids-chunk-LZU7QFN4.js";import"../../chunks/ids-chunk-J3AAQ3QT.js";import"../../chunks/ids-chunk-T6ZV4PDM.js";import"../../chunks/ids-chunk-3DA43NO3.js";import"../../chunks/ids-chunk-CK6SA7FU.js";import"../../chunks/ids-chunk-27RPCUPT.js";import"../../chunks/ids-chunk-K44HS5DC.js";import"../../chunks/ids-chunk-ZUHWNQKP.js";import"../../chunks/ids-chunk-XE4WFW5M.js";import"../../chunks/ids-chunk-WMUHD4GN.js";import"../../chunks/ids-chunk-QNEN3NVF.js";import"../../chunks/ids-chunk-RMV7ZP4H.js";import"../../chunks/ids-chunk-O4ZHP64Q.js";import"../../chunks/ids-chunk-ROUTR3H3.js";import"../../chunks/ids-chunk-2HSRRRSM.js";import"../../chunks/ids-chunk-X4NATGYL.js";import"../../chunks/ids-chunk-U4XVR5SW.js";import"../../chunks/ids-chunk-5Q3WPKMB.js";import"../../chunks/ids-chunk-FAEI3K2L.js";import"../../chunks/ids-chunk-Y32WUP63.js";export{a as default};

package/components/ids-tabs/ids-tabs-context.d.ts

@@ -54,7 +54,7 @@ declare const Base: {
         click(): void;
         hidePopover(): void;
         showPopover(): void;
-        togglePopover(force?: boolean | undefined): void;
+        togglePopover(force?: boolean | undefined): boolean;
         addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener<K_1 extends keyof HTMLElementEventMap>(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
@@ -189,6 +189,7 @@ declare const Base: {
         ariaColIndex: string | null;
         ariaColSpan: string | null;
         ariaCurrent: string | null;
+        ariaDescription: string | null;
         ariaDisabled: string | null;
         ariaExpanded: string | null;
         ariaHasPopup: string | null;
@@ -259,6 +260,7 @@ declare const Base: {
         onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
         onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
         onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
+        onbeforetoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
         oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
@@ -436,7 +438,7 @@ declare const Base: {
         click(): void;
         hidePopover(): void;
         showPopover(): void;
-        togglePopover(force?: boolean | undefined): void;
+        togglePopover(force?: boolean | undefined): boolean;
         addEventListener<K_17 extends keyof HTMLElementEventMap>(type: K_17, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_17]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener<K_18 extends keyof HTMLElementEventMap>(type: K_18, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_18]) => any, options?: boolean | EventListenerOptions | undefined): void;
@@ -571,6 +573,7 @@ declare const Base: {
         ariaColIndex: string | null;
         ariaColSpan: string | null;
         ariaCurrent: string | null;
+        ariaDescription: string | null;
         ariaDisabled: string | null;
         ariaExpanded: string | null;
         ariaHasPopup: string | null;
@@ -641,6 +644,7 @@ declare const Base: {
         onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
         onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
         onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
+        onbeforetoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
         oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;

package/components/ids-tabs/ids-tabs-context.js

@@ -1 +1 @@
-import{a}from"../../chunks/ids-chunk-RWE2DVPW.js";import"../../chunks/ids-chunk-T6LHIK2W.js";import"../../chunks/ids-chunk-NUE7RHA7.js";import"../../chunks/ids-chunk-WBDXDLKP.js";import"../../chunks/ids-chunk-T6ZV4PDM.js";import"../../chunks/ids-chunk-3DA43NO3.js";import"../../chunks/ids-chunk-CK6SA7FU.js";import"../../chunks/ids-chunk-27RPCUPT.js";import"../../chunks/ids-chunk-ZUHWNQKP.js";import"../../chunks/ids-chunk-XE4WFW5M.js";import"../../chunks/ids-chunk-7MATJMV7.js";import"../../chunks/ids-chunk-OM3C4JYX.js";import"../../chunks/ids-chunk-RMV7ZP4H.js";import"../../chunks/ids-chunk-7MVZOSC6.js";import"../../chunks/ids-chunk-ROUTR3H3.js";import"../../chunks/ids-chunk-JN2QIYPV.js";import"../../chunks/ids-chunk-X4NATGYL.js";import"../../chunks/ids-chunk-U4XVR5SW.js";import"../../chunks/ids-chunk-5Q3WPKMB.js";import"../../chunks/ids-chunk-3Q46IU4X.js";import"../../chunks/ids-chunk-Y32WUP63.js";export{a as default};
+import{a}from"../../chunks/ids-chunk-QTQHAQVN.js";import"../../chunks/ids-chunk-ZDCRRF4T.js";import"../../chunks/ids-chunk-FGGT5JRT.js";import"../../chunks/ids-chunk-WBDXDLKP.js";import"../../chunks/ids-chunk-T6ZV4PDM.js";import"../../chunks/ids-chunk-3DA43NO3.js";import"../../chunks/ids-chunk-CK6SA7FU.js";import"../../chunks/ids-chunk-27RPCUPT.js";import"../../chunks/ids-chunk-ZUHWNQKP.js";import"../../chunks/ids-chunk-XE4WFW5M.js";import"../../chunks/ids-chunk-WMUHD4GN.js";import"../../chunks/ids-chunk-QNEN3NVF.js";import"../../chunks/ids-chunk-RMV7ZP4H.js";import"../../chunks/ids-chunk-O4ZHP64Q.js";import"../../chunks/ids-chunk-ROUTR3H3.js";import"../../chunks/ids-chunk-2HSRRRSM.js";import"../../chunks/ids-chunk-X4NATGYL.js";import"../../chunks/ids-chunk-U4XVR5SW.js";import"../../chunks/ids-chunk-5Q3WPKMB.js";import"../../chunks/ids-chunk-FAEI3K2L.js";import"../../chunks/ids-chunk-Y32WUP63.js";export{a as default};

package/components/ids-tabs/ids-tabs.css

@@ -1,345 +1,54 @@
-:host(:not([hidden])) {
-  display: block;
-}
-
-:host([count]) ::slotted(ids-trigger-button) {
-  padding-inline-start: 8px;
-}
-
-:host(ids-tab:not([orientation=vertical]):not([color-variant=module]):first-child),
-:host(ids-tab-more:not([orientation=vertical]):not([color-variant=module]):first-child),
-.ids-tabs-container:not(.orientation-vertical):not(.color-variant-module) [class*=ids-tab]:first-child {
-  margin-inline-start: 4px;
-}
-
-:host(ids-tab:not([orientation=vertical]):not([color-variant=module]):last-child),
-:host(ids-tab-more:not([orientation=vertical]):not([color-variant=module]):last-child),
-.ids-tabs-container:not(.orientation-vertical):not(.color-variant-module) [class*=ids-tab]:last-child {
-  margin-inline-end: 4px;
-}
-
-:host(ids-tab:not([orientation=vertical]):not([color-variant=module]):not(:last-child)),
-:host(ids-tab-more:not([orientation=vertical]):not([color-variant=module]):not(:last-child)),
-.ids-tabs-container:not(.orientation-vertical):not(.color-variant-module) [class*=ids-tab]:not(:last-child) {
-  margin-inline-end: 8px;
-}
-
-:host(ids-tab:focus-visible),
-:host(ids-tab-more:focus-visible),
-.ids-tab-container [class*=ids-tab]:focus-visible {
-  outline: none;
-}
-
-.ids-tab {
-  display: flex;
-  position: relative;
-  color: var(--ids-tab-color-text-default);
-  box-sizing: border-box;
-  height: 100%;
-  padding-inline: 4px;
-  padding-block: 8px;
-  list-style: none outside none;
-  user-select: none;
-  cursor: pointer;
-}
-.ids-tab:hover {
-  color: var(--ids-tab-color-text-hover);
-  background-color: var(--ids-tab-color-background-hover);
-}
-.ids-tab:hover::after, .ids-tab:hover .selection-underline {
-  background-color: var(--ids-tab-color-text-hover);
-}
-.ids-tab.disabled {
-  cursor: default;
-  color: var(--ids-tab-color-text-disabled);
-  pointer-events: none;
-}
-.ids-tab.selected {
-  color: var(--ids-tab-color-text-selected);
-  cursor: default;
-}
-.ids-tab.selected.ids-text {
-  font-weight: 700;
-}
-.ids-tab.selected::after, .ids-tab.selected .selection-underline {
-  background-color: var(--ids-tab-color-text-selected);
-}
-.ids-tab.actionable {
-  cursor: pointer;
-}
-.ids-tab.count {
-  padding-inline: 12px;
-}
-.ids-tab.count .ids-tab-count-container {
-  display: flex;
-  flex-direction: column;
-}
-.ids-tab:focus-visible {
-  outline: none;
-}
-.ids-tab .ids-tab-trigger-container {
+.ids-tabs-container {
+  --tab-width: 100%;
+  --vertical-container-width: 250px;
   display: flex;
-  place-content: center;
-}
-.ids-tab.orientation-horizontal:not(.count) {
-  padding-top: 8px;
-}
-.ids-tab.orientation-horizontal:not(.color-variant-module) {
-  border-bottom: 1px solid transparent;
-}
-.ids-tab.orientation-horizontal:not(.color-variant-module):focus-visible {
-  outline: none;
-}
-.ids-tab.orientation-horizontal:not(.color-variant-module):focus-visible:not(.hide-focus)::before {
-  border: 1px solid;
-  position: absolute;
-  inset-block-start: 0px;
-  inset-inline-start: -1px;
-  width: calc(100% - 0px);
-  height: calc(100% - 2px);
-  content: "";
-  pointer-events: none;
-}
-.ids-tab.orientation-horizontal:not(.color-variant-module).selected, .ids-tab.orientation-horizontal:not(.color-variant-module):hover {
-  border-bottom: 1px solid transparent;
 }
-.ids-tab.orientation-horizontal:not(.color-variant-module).selected::after, .ids-tab.orientation-horizontal:not(.color-variant-module).selected .selection-underline, .ids-tab.orientation-horizontal:not(.color-variant-module):hover::after, .ids-tab.orientation-horizontal:not(.color-variant-module):hover .selection-underline {
-  position: absolute;
-  height: 3px;
-  inset-block-end: 0;
-  inset-inline: 0;
-  z-index: 1;
-  pointer-events: none;
-  content: "";
+.ids-tabs-container:not(.orientation-vertical) .ids-tabs-list {
+  width: var(--tab-width);
 }
-.ids-tab.orientation-horizontal:not(.color-variant-module).disabled::after, .ids-tab.orientation-horizontal:not(.color-variant-module).disabled .selection-underline {
-  display: none;
-}
-.ids-tab ids-text::part(text),
-.ids-tab .ids-tab.ids-text {
-  display: inline-flex;
+.ids-tabs-container.orientation-vertical {
+  background-color: var(--ids-tab-vertical-color-background-default);
+  border-inline-end: 1px solid var(--ids-tab-vertical-color-border-default);
   flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
-}
-.ids-tab:not(.orientation-vertical) ids-text::part(text)::after,
-.ids-tab:not(.orientation-vertical) .ids-tab.ids-text::after {
-  content: attr(data-text);
-  content: attr(data-text)/"";
-  font-weight: 700;
-  visibility: hidden;
-  height: 0;
-  user-select: none;
-  pointer-events: none;
-}
-@media speech {
-  .ids-tab:not(.orientation-vertical) ids-text::part(text)::after,
-  .ids-tab:not(.orientation-vertical) .ids-tab.ids-text::after {
-    display: none;
-  }
-}
-.ids-tab.swappable {
-  padding-inline-start: 8px;
-  padding-inline-end: 6px;
+  height: 100%;
+  width: var(--vertical-container-width);
 }
-
-.ids-tab.orientation-vertical {
-  padding-inline: 24px;
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
+.ids-tabs-container.orientation-vertical .ids-tabs-list,
+.ids-tabs-container.orientation-vertical .ids-tabs-list-more {
   flex-direction: column;
-  width: 100%;
-  height: 42px;
-  background-color: var(--ids-tab-vertical-color-background-default);
-  color: var(--ids-tab-vertical-color-text-default);
-}
-.ids-tab.orientation-vertical:hover {
-  background-color: var(--ids-tab-vertical-color-background-hover);
-  color: var(--ids-tab-vertical-color-text-hover);
-}
-.ids-tab.orientation-vertical.disabled {
-  background-color: var(--ids-tab-vertical-color-background-disabled);
-  color: var(--ids-tab-vertical-color-text-disabled);
-}
-.ids-tab.orientation-vertical:focus-visible {
-  outline: none;
-}
-.ids-tab.orientation-vertical:focus-visible:not(.hide-focus)::before {
-  border: 1px solid;
-  position: absolute;
-  inset-block-start: 1px;
-  inset-inline-start: 1px;
-  width: calc(100% - 4px);
-  height: calc(100% - 4px);
-  content: "";
-  pointer-events: none;
-}
-.ids-tab.orientation-vertical.selected {
-  border-style: none;
-  background-color: var(--ids-tab-vertical-color-background-selected);
-  color: var(--ids-tab-vertical-color-text-selected);
-}
-.ids-tab.orientation-vertical.selected:focus-visible:not(.hide-focus)::after, .ids-tab.orientation-vertical.selected:focus-visible:not(.hide-focus) .selection-underline {
-  background-color: var(--ids-tab-vertical-color-border-selected);
-}
-
-:host(ids-tab[color-variant=module]:not(:last-child)),
-.ids-tabs-container.color-variant-module .ids-tab:not(:last-child) {
-  border-inline-end: 1px solid var(--ids-tab-module-color-border-right);
 }
 
-:host(ids-tab[color-variant=module]:not([orientation=vertical]):not([actionable])),
-:host(ids-tab-more[color-variant=module]:not([orientation=vertical]):not([actionable])),
-.ids-tab-container.color-variant-module:not(.orientation-vertical):not(.actionable) [class*=ids-tab] {
-  flex-grow: 1;
-}
-
-.ids-tab.color-variant-module {
-  outline: none;
-  border-bottom-width: 1px;
-  background-color: var(--ids-tab-module-color-background-default);
-  color: var(--ids-tab-module-color-text-default);
-  justify-content: center;
-  border-color: transparent;
-}
-.ids-tab.color-variant-module:hover {
-  color: var(--ids-tab-module-color-text-hover);
-  background-color: var(--ids-tab-module-color-background-hover);
-}
-.ids-tab.color-variant-module.selected {
-  background-color: var(--ids-tab-module-color-background-selected);
-  color: var(--ids-tab-module-color-text-selected);
-}
-.ids-tab.color-variant-module:focus-visible {
-  outline: none;
-}
-.ids-tab.color-variant-module:focus-visible:not(.hide-focus)::before {
-  border: 1px solid;
-  position: absolute;
-  inset-block-start: 1px;
-  inset-inline-start: 1px;
-  width: calc(100% - 4px);
-  height: calc(100% - 4px);
-  content: "";
-  pointer-events: none;
-}
-.ids-tab.color-variant-module.disabled {
-  background-color: var(--ids-tab-module-color-background-disabled);
-  color: var(--ids-tab-module-color-text-disabled);
-}
-.ids-tab.color-variant-module > ids-text,
-.ids-tab.color-variant-module > .ids-text {
-  text-align: center;
-}
-.ids-tab.color-variant-module:not(.actionable) {
-  min-width: 135px;
-}
-.ids-tab.color-variant-module.actionable {
-  min-width: 44px;
-}
-.ids-tab.color-variant-module.dismissible {
-  justify-content: space-around;
-}
-.ids-tab.color-variant-module.dismissible > ids-text,
-.ids-tab.color-variant-module.dismissible > .ids-text {
-  flex-grow: 1;
-}
-.ids-tab.color-variant-module.dismissible ::slotted(ids-trigger-button),
-.ids-tab.color-variant-module.dismissible > .ids-trigger-button,
-.ids-tab.color-variant-module.dismissible > ids-trigger-button {
-  flex-grow: 0;
+.ids-tabs-list {
   flex-shrink: 1;
-  visibility: hidden;
-}
-.ids-tab.color-variant-module.dismissible:hover ::slotted(ids-trigger-button),
-.ids-tab.color-variant-module.dismissible:hover > .ids-trigger-button,
-.ids-tab.color-variant-module.dismissible:hover > ids-trigger-button {
-  visibility: visible;
-}
-
-.ids-tab.color-variant-alternate {
-  color: var(--ids-tab-alternate-color-text-default);
-}
-.ids-tab.color-variant-alternate:hover {
-  color: var(--ids-tab-alternate-color-text-hover);
-}
-.ids-tab.color-variant-alternate:hover::after {
-  background-color: var(--ids-tab-alternate-color-background-hover);
-}
-.ids-tab.color-variant-alternate.selected {
-  color: var(--ids-tab-alternate-color-text-selected);
-}
-.ids-tab.color-variant-alternate.selected::after, .ids-tab.color-variant-alternate.selected .selection-underline {
-  background-color: var(--ids-tab-alternate-horizontal-color-background);
-}
-.ids-tab.color-variant-alternate.disabled {
-  color: var(--ids-tab-alternate-color-text-disabled);
-}
-.ids-tab.color-variant-alternate.disabled.selected {
-  color: var(--ids-tab-alternate-color-text-disabled);
-}
-.ids-tab.color-variant-alternate.disabled.selected::after, .ids-tab.color-variant-alternate.disabled.selected .selection-underline {
-  background-color: var(--ids-tab-alternate-color-text-disabled);
-}
-.ids-tab.color-variant-alternate:not(.hide-focus):focus-visible, .ids-tab.color-variant-alternate:not(.hide-focus):focus, .ids-tab.color-variant-alternate:not(.hide-focus):focus-within {
-  border-color: var(--ids-tab-alternate-color-border-focus);
-}
-
-.ids-tab.color-variant-header {
-  color: var(--ids-tab-header-color-text-default);
-}
-.ids-tab.color-variant-header:hover {
-  background-color: var(--ids-tab-header-color-background-hover);
-  color: var(--ids-tab-header-color-text-hover);
-}
-.ids-tab.color-variant-header.selected {
-  color: var(--ids-tab-header-color-text-selected);
-}
-.ids-tab.color-variant-header.selected::after, .ids-tab.color-variant-header.selected .selection-underline {
-  background-color: var(--ids-tab-header-color-text-selected);
-}
-.ids-tab.color-variant-header.disabled {
-  color: var(--ids-tab-header-color-text-disabled);
-}
-.ids-tab.color-variant-header:not(.hide-focus):focus-visible, .ids-tab.color-variant-header:not(.hide-focus):focus, .ids-tab.color-variant-header:not(.hide-focus):focus-within {
-  border-color: var(--ids-tab-header-color-border-focus);
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  padding-inline-start: 0;
+  margin-block-start: 0;
+  margin-block-end: -1px;
+  margin-inline-start: 0;
 }
 
-.tab-more-text {
-  display: inline-flex;
-  align-items: center;
-}
-.tab-more-text > *:not(.last-child) {
-  padding-inline-end: 4px;
-}
-.tab-more-text ids-text,
-.tab-more-text .ids-text {
-  display: inline-block;
+.ids-tabs-list-more {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: row;
+  padding-inline-start: 0;
+  margin-block-start: 0;
+  margin-inline-start: 0;
 }
 
-ids-popup-menu,
-.ids-popup-menu {
-  position: absolute;
-  width: 100%;
+.ids-tabs-container:not(.orientation-vertical):not(.color-variant-module) {
+  margin-top: 8px;
 }
 
-.ids-tab:not(.more) ::slotted(ids-icon) {
-  color: currentColor;
-  pointer-events: none;
+.ids-tabs-container:not(.orientation-vertical):not([class*=color-variant-]) {
+  border-bottom: 1px solid var(--ids-tab-divider-color-background);
 }
 
-::slotted(ids-trigger-button) {
-  align-items: center;
-  color: currentColor;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  margin-inline-end: var(--ids-tab-dismiss-button-offset);
-  place-self: center;
+.ids-tabs-container.color-variant-module {
+  border-bottom: 1px solid var(--ids-tab-module-color-background-selected);
 }
-
-::slotted(.ids-tab-more-menu-item-text) {
-  display: inline-block;
-  margin-inline-start: 4px;
+.ids-tabs-container.color-variant-module.has-more-actions .ids-tabs-list-more {
+  border-inline-start: 1px solid var(--ids-tab-module-color-border-right);
 }

package/components/ids-tabs/ids-tabs.d.ts

@@ -58,7 +58,7 @@ declare const Base: {
         click(): void;
         hidePopover(): void;
         showPopover(): void;
-        togglePopover(force?: boolean | undefined): void;
+        togglePopover(force?: boolean | undefined): boolean;
         addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener<K_1 extends keyof HTMLElementEventMap>(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions | undefined): void;
@@ -193,6 +193,7 @@ declare const Base: {
         ariaColIndex: string | null;
         ariaColSpan: string | null;
         ariaCurrent: string | null;
+        ariaDescription: string | null;
         ariaDisabled: string | null;
         ariaExpanded: string | null;
         ariaHasPopup: string | null;
@@ -263,6 +264,7 @@ declare const Base: {
         onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
         onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
         onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
+        onbeforetoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
         oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
@@ -410,7 +412,7 @@ declare const Base: {
         click(): void;
         hidePopover(): void;
         showPopover(): void;
-        togglePopover(force?: boolean | undefined): void;
+        togglePopover(force?: boolean | undefined): boolean;
         addEventListener<K_17 extends keyof HTMLElementEventMap>(type: K_17, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_17]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener<K_18 extends keyof HTMLElementEventMap>(type: K_18, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_18]) => any, options?: boolean | EventListenerOptions | undefined): void;
@@ -545,6 +547,7 @@ declare const Base: {
         ariaColIndex: string | null;
         ariaColSpan: string | null;
         ariaCurrent: string | null;
+        ariaDescription: string | null;
         ariaDisabled: string | null;
         ariaExpanded: string | null;
         ariaHasPopup: string | null;
@@ -615,6 +618,7 @@ declare const Base: {
         onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
         onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
         onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
+        onbeforetoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
         oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
@@ -775,7 +779,7 @@ declare const Base: {
         click(): void;
         hidePopover(): void;
         showPopover(): void;
-        togglePopover(force?: boolean | undefined): void;
+        togglePopover(force?: boolean | undefined): boolean;
         addEventListener<K_26 extends keyof HTMLElementEventMap>(type: K_26, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_26]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener<K_27 extends keyof HTMLElementEventMap>(type: K_27, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_27]) => any, options?: boolean | EventListenerOptions | undefined): void;
@@ -910,6 +914,7 @@ declare const Base: {
         ariaColIndex: string | null;
         ariaColSpan: string | null;
         ariaCurrent: string | null;
+        ariaDescription: string | null;
         ariaDisabled: string | null;
         ariaExpanded: string | null;
         ariaHasPopup: string | null;
@@ -980,6 +985,7 @@ declare const Base: {
         onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
         onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
         onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
+        onbeforetoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
         oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
@@ -1157,7 +1163,7 @@ declare const Base: {
         click(): void;
         hidePopover(): void;
         showPopover(): void;
-        togglePopover(force?: boolean | undefined): void;
+        togglePopover(force?: boolean | undefined): boolean;
         addEventListener<K_35 extends keyof HTMLElementEventMap>(type: K_35, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_35]) => any, options?: boolean | AddEventListenerOptions | undefined): void;
         addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions | undefined): void;
         removeEventListener<K_36 extends keyof HTMLElementEventMap>(type: K_36, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_36]) => any, options?: boolean | EventListenerOptions | undefined): void;
@@ -1292,6 +1298,7 @@ declare const Base: {
         ariaColIndex: string | null;
         ariaColSpan: string | null;
         ariaCurrent: string | null;
+        ariaDescription: string | null;
         ariaDisabled: string | null;
         ariaExpanded: string | null;
         ariaHasPopup: string | null;
@@ -1362,6 +1369,7 @@ declare const Base: {
         onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
         onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
         onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
+        onbeforetoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
         oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
         oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;