@sebgroup/green-core 3.13.0 → 3.14.0

package/generated/react/video/index.d.ts

@@ -48,10 +48,10 @@ export declare const GdsVideo: {
         position?: string | undefined;
         transform?: string | undefined;
         inset?: string | undefined;
-        readonly semanticVersion?: "__GDS_SEM_VER__" | undefined;
-        syncFirstRender?: boolean | undefined;
+        readonly semanticVersion?: "__GDS_SEM_VER__";
+        syncFirstRender?: boolean;
         gdsElementName?: string | undefined;
-        _isUsingTransitionalStyles?: boolean | undefined;
+        _isUsingTransitionalStyles?: boolean;
         _dynamicStylesController?: import("../../../utils/controllers/dynamic-styles-controller").DynamicStylesController | undefined;
         connectedCallback?: (() => void) | undefined;
         disconnectedCallback?: (() => void) | undefined;
@@ -65,7 +65,7 @@ export declare const GdsVideo: {
         removeController?: ((controller: import("lit").ReactiveController) => void) | undefined;
         attributeChangedCallback?: ((name: string, _old: string | null, value: string | null) => void) | undefined;
         requestUpdate?: ((name?: PropertyKey, oldValue?: unknown, options?: import("lit").PropertyDeclaration, useNewValue?: boolean, newValue?: unknown) => void) | undefined;
-        readonly updateComplete?: Promise<boolean> | undefined;
+        readonly updateComplete?: Promise<boolean>;
         accessKey?: string | undefined;
         readonly accessKeyLabel?: string | undefined;
         autocapitalize?: string | undefined;
@@ -85,11 +85,12 @@ export declare const GdsVideo: {
         spellcheck?: boolean | undefined;
         title?: string | undefined;
         translate?: boolean | undefined;
+        writingSuggestions?: string | undefined;
         attachInternals?: (() => ElementInternals) | undefined;
         click?: (() => void) | undefined;
         hidePopover?: (() => void) | undefined;
         showPopover?: (() => void) | undefined;
-        togglePopover?: ((force?: boolean) => boolean) | undefined;
+        togglePopover?: ((options?: boolean) => boolean) | undefined;
         addEventListener?: {
             <K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
             (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
@@ -99,20 +100,22 @@ export declare const GdsVideo: {
             (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
         } | undefined;
         readonly attributes?: NamedNodeMap | undefined;
-        readonly classList?: DOMTokenList | undefined;
+        classList?: DOMTokenList;
         className?: string | undefined;
         readonly clientHeight?: number | undefined;
         readonly clientLeft?: number | undefined;
         readonly clientTop?: number | undefined;
         readonly clientWidth?: number | undefined;
+        readonly currentCSSZoom?: number | undefined;
         id?: string | undefined;
+        innerHTML?: string | undefined;
         readonly localName?: string | undefined;
         readonly namespaceURI?: string | null | undefined;
         onfullscreenchange?: ((this: Element, ev: Event) => any) | null | undefined;
         onfullscreenerror?: ((this: Element, ev: Event) => any) | null | undefined;
         outerHTML?: string | undefined;
         readonly ownerDocument?: Document | undefined;
-        readonly part?: DOMTokenList | undefined;
+        part?: DOMTokenList;
         readonly prefix?: string | null | undefined;
         readonly scrollHeight?: number | undefined;
         scrollLeft?: number | undefined;
@@ -151,12 +154,13 @@ export declare const GdsVideo: {
             (namespaceURI: "http://www.w3.org/1998/Math/MathML", localName: string): HTMLCollectionOf<MathMLElement>;
             (namespace: string | null, localName: string): HTMLCollectionOf<Element>;
         } | undefined;
+        getHTML?: ((options?: GetHTMLOptions) => string) | undefined;
         hasAttribute?: ((qualifiedName: string) => boolean) | undefined;
         hasAttributeNS?: ((namespace: string | null, localName: string) => boolean) | undefined;
         hasAttributes?: (() => boolean) | undefined;
         hasPointerCapture?: ((pointerId: number) => boolean) | undefined;
         insertAdjacentElement?: ((where: InsertPosition, element: Element) => Element | null) | undefined;
-        insertAdjacentHTML?: ((position: InsertPosition, text: string) => void) | undefined;
+        insertAdjacentHTML?: ((position: InsertPosition, string: string) => void) | undefined;
         insertAdjacentText?: ((where: InsertPosition, data: string) => void) | undefined;
         matches?: ((selectors: string) => boolean) | undefined;
         releasePointerCapture?: ((pointerId: number) => void) | undefined;
@@ -164,7 +168,7 @@ export declare const GdsVideo: {
         removeAttributeNS?: ((namespace: string | null, localName: string) => void) | undefined;
         removeAttributeNode?: ((attr: Attr) => Attr) | undefined;
         requestFullscreen?: ((options?: FullscreenOptions) => Promise<void>) | undefined;
-        requestPointerLock?: (() => void) | undefined;
+        requestPointerLock?: ((options?: PointerLockOptions) => Promise<void>) | undefined;
         scroll?: {
             (options?: ScrollToOptions): void;
             (x: number, y: number): void;
@@ -208,7 +212,7 @@ export declare const GdsVideo: {
         readonly previousSibling?: ChildNode | null | undefined;
         textContent?: string | null | undefined;
         appendChild?: (<T extends Node>(node: T) => T) | undefined;
-        cloneNode?: ((deep?: boolean) => Node) | undefined;
+        cloneNode?: ((subtree?: boolean) => Node) | undefined;
         compareDocumentPosition?: ((other: Node) => number) | undefined;
         contains?: ((other: Node | null) => boolean) | undefined;
         getRootNode?: ((options?: GetRootNodeOptions) => Node) | undefined;
@@ -249,6 +253,7 @@ export declare const GdsVideo: {
         ariaChecked?: string | null | undefined;
         ariaColCount?: string | null | undefined;
         ariaColIndex?: string | null | undefined;
+        ariaColIndexText?: string | null | undefined;
         ariaColSpan?: string | null | undefined;
         ariaCurrent?: string | null | undefined;
         ariaDescription?: string | null | undefined;
@@ -269,10 +274,12 @@ export declare const GdsVideo: {
         ariaPosInSet?: string | null | undefined;
         ariaPressed?: string | null | undefined;
         ariaReadOnly?: string | null | undefined;
+        ariaRelevant?: string | null | undefined;
         ariaRequired?: string | null | undefined;
         ariaRoleDescription?: string | null | undefined;
         ariaRowCount?: string | null | undefined;
         ariaRowIndex?: string | null | undefined;
+        ariaRowIndexText?: string | null | undefined;
         ariaRowSpan?: string | null | undefined;
         ariaSelected?: string | null | undefined;
         ariaSetSize?: string | null | undefined;
@@ -288,7 +295,6 @@ export declare const GdsVideo: {
         before?: ((...nodes: (Node | string)[]) => void) | undefined;
         remove?: (() => void) | undefined;
         replaceWith?: ((...nodes: (Node | string)[]) => void) | undefined;
-        innerHTML?: string | undefined;
         readonly nextElementSibling?: Element | null | undefined;
         readonly previousElementSibling?: Element | null | undefined;
         readonly childElementCount?: number | undefined;
@@ -314,7 +320,7 @@ export declare const GdsVideo: {
         replaceChildren?: ((...nodes: (Node | string)[]) => void) | undefined;
         readonly assignedSlot?: HTMLSlotElement | null | undefined;
         readonly attributeStyleMap?: StylePropertyMap | undefined;
-        readonly style?: CSSStyleDeclaration | undefined;
+        style?: CSSStyleDeclaration;
         contentEditable?: string | undefined;
         enterKeyHint?: string | undefined;
         inputMode?: string | undefined;
@@ -334,7 +340,9 @@ export declare const GdsVideo: {
         onchange?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
         onclick?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
         onclose?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+        oncontextlost?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
         oncontextmenu?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
+        oncontextrestored?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
         oncopy?: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null | undefined;
         oncuechange?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
         oncut?: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null | undefined;
@@ -400,10 +408,10 @@ export declare const GdsVideo: {
         onsuspend?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
         ontimeupdate?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
         ontoggle?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
-        ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
-        ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
-        ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
-        ontouchstart?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
+        ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined | undefined;
+        ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined | undefined;
+        ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined | undefined;
+        ontouchstart?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined | undefined;
         ontransitioncancel?: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null | undefined;
         ontransitionend?: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null | undefined;
         ontransitionrun?: ((this: GlobalEventHandlers, ev: TransitionEvent) => any) | null | undefined;
@@ -422,118 +430,118 @@ export declare const GdsVideo: {
         blur?: (() => void) | undefined;
         focus?: ((options?: FocusOptions) => void) | undefined;
     }, "dir" | "slot" | "style" | "title" | "role" | "aria-label" | "property" | "content" | "color" | "accessKey" | "draggable" | "hidden" | "inert" | "lang" | "popover" | "translate" | "className" | "id" | "prefix" | "contentEditable" | "enterKeyHint" | "inputMode" | "nonce" | "tabIndex" | "aria-selected" | "defaultChecked" | "defaultValue" | "popoverTargetAction" | "aria-haspopup" | "aria-expanded" | "rel" | "aria-multiselectable" | "aria-valuemin" | "aria-valuemax" | "aria-valuetext" | "aria-checked" | "aria-disabled" | "aria-description" | "aria-invalid" | "aria-describedby" | "aria-live" | "onToggle" | "resource" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "autoCapitalize" | "autoFocus" | "contextMenu" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popoverTarget" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-details" | "aria-dropeffect" | "aria-errormessage" | "aria-flowto" | "aria-grabbed" | "aria-hidden" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-modal" | "aria-multiline" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-setsize" | "aria-sort" | "aria-valuenow" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture">, "children"> & {
-        children?: import("react").ReactNode;
+        children?: React.ReactNode;
     } & {
-        dir?: string | undefined;
-        slot?: string | undefined;
+        dir?: string | undefined | undefined;
+        slot?: string | undefined | undefined;
         style?: import("react").CSSProperties | undefined;
-        title?: string | undefined;
+        title?: string | undefined | undefined;
         role?: import("react").AriaRole | undefined;
-        "aria-label"?: string | undefined;
-        property?: string | undefined;
-        content?: string | undefined;
-        color?: string | undefined;
-        accessKey?: string | undefined;
+        "aria-label"?: string | undefined | undefined;
+        property?: string | undefined | undefined;
+        content?: string | undefined | undefined;
+        color?: string | undefined | undefined;
+        accessKey?: string | undefined | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
-        hidden?: boolean | undefined;
-        inert?: boolean | undefined;
-        lang?: string | undefined;
-        popover?: "" | "auto" | "manual" | undefined;
-        translate?: "yes" | "no" | undefined;
-        className?: string | undefined;
-        id?: string | undefined;
-        prefix?: string | undefined;
-        contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
-        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
-        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
-        nonce?: string | undefined;
-        tabIndex?: number | undefined;
+        hidden?: boolean | undefined | undefined;
+        inert?: boolean | undefined | undefined;
+        lang?: string | undefined | undefined;
+        popover?: "" | "auto" | "manual" | undefined | undefined;
+        translate?: "yes" | "no" | undefined | undefined;
+        className?: string | undefined | undefined;
+        id?: string | undefined | undefined;
+        prefix?: string | undefined | undefined;
+        contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
+        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
+        nonce?: string | undefined | undefined;
+        tabIndex?: number | undefined | undefined;
         "aria-selected"?: (boolean | "true" | "false") | undefined;
-        defaultChecked?: boolean | undefined;
+        defaultChecked?: boolean | undefined | undefined;
         defaultValue?: string | number | readonly string[] | undefined;
-        popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
-        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+        popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
+        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
         "aria-expanded"?: (boolean | "true" | "false") | undefined;
-        rel?: string | undefined;
+        rel?: string | undefined | undefined;
         "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
-        "aria-valuemin"?: number | undefined;
-        "aria-valuemax"?: number | undefined;
-        "aria-valuetext"?: string | undefined;
-        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-valuemin"?: number | undefined | undefined;
+        "aria-valuemax"?: number | undefined | undefined;
+        "aria-valuetext"?: string | undefined | undefined;
+        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
         "aria-disabled"?: (boolean | "true" | "false") | undefined;
-        "aria-description"?: string | undefined;
-        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
-        "aria-describedby"?: string | undefined;
-        "aria-live"?: "off" | "assertive" | "polite" | undefined;
+        "aria-description"?: string | undefined | undefined;
+        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
+        "aria-describedby"?: string | undefined | undefined;
+        "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
         onToggle?: import("react").ToggleEventHandler<HTMLElement> | undefined;
-        resource?: string | undefined;
-        suppressContentEditableWarning?: boolean | undefined;
-        suppressHydrationWarning?: boolean | undefined;
-        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
-        autoFocus?: boolean | undefined;
-        contextMenu?: string | undefined;
+        resource?: string | undefined | undefined;
+        suppressContentEditableWarning?: boolean | undefined | undefined;
+        suppressHydrationWarning?: boolean | undefined | undefined;
+        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
+        autoFocus?: boolean | undefined | undefined;
+        contextMenu?: string | undefined | undefined;
         spellCheck?: (boolean | "true" | "false") | undefined;
-        radioGroup?: string | undefined;
-        about?: string | undefined;
-        datatype?: string | undefined;
+        radioGroup?: string | undefined | undefined;
+        about?: string | undefined | undefined;
+        datatype?: string | undefined | undefined;
         inlist?: any;
-        rev?: string | undefined;
-        typeof?: string | undefined;
-        vocab?: string | undefined;
-        autoCorrect?: string | undefined;
-        autoSave?: string | undefined;
-        itemProp?: string | undefined;
-        itemScope?: boolean | undefined;
-        itemType?: string | undefined;
-        itemID?: string | undefined;
-        itemRef?: string | undefined;
-        results?: number | undefined;
-        security?: string | undefined;
-        unselectable?: "on" | "off" | undefined;
-        popoverTarget?: string | undefined;
-        is?: string | undefined;
-        "aria-activedescendant"?: string | undefined;
+        rev?: string | undefined | undefined;
+        typeof?: string | undefined | undefined;
+        vocab?: string | undefined | undefined;
+        autoCorrect?: string | undefined | undefined;
+        autoSave?: string | undefined | undefined;
+        itemProp?: string | undefined | undefined;
+        itemScope?: boolean | undefined | undefined;
+        itemType?: string | undefined | undefined;
+        itemID?: string | undefined | undefined;
+        itemRef?: string | undefined | undefined;
+        results?: number | undefined | undefined;
+        security?: string | undefined | undefined;
+        unselectable?: "on" | "off" | undefined | undefined;
+        popoverTarget?: string | undefined | undefined;
+        is?: string | undefined | undefined;
+        "aria-activedescendant"?: string | undefined | undefined;
         "aria-atomic"?: (boolean | "true" | "false") | undefined;
-        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
-        "aria-braillelabel"?: string | undefined;
-        "aria-brailleroledescription"?: string | undefined;
+        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
+        "aria-braillelabel"?: string | undefined | undefined;
+        "aria-brailleroledescription"?: string | undefined | undefined;
         "aria-busy"?: (boolean | "true" | "false") | undefined;
-        "aria-colcount"?: number | undefined;
-        "aria-colindex"?: number | undefined;
-        "aria-colindextext"?: string | undefined;
-        "aria-colspan"?: number | undefined;
-        "aria-controls"?: string | undefined;
-        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
-        "aria-details"?: string | undefined;
-        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
-        "aria-errormessage"?: string | undefined;
-        "aria-flowto"?: string | undefined;
+        "aria-colcount"?: number | undefined | undefined;
+        "aria-colindex"?: number | undefined | undefined;
+        "aria-colindextext"?: string | undefined | undefined;
+        "aria-colspan"?: number | undefined | undefined;
+        "aria-controls"?: string | undefined | undefined;
+        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
+        "aria-details"?: string | undefined | undefined;
+        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
+        "aria-errormessage"?: string | undefined | undefined;
+        "aria-flowto"?: string | undefined | undefined;
         "aria-grabbed"?: (boolean | "true" | "false") | undefined;
         "aria-hidden"?: (boolean | "true" | "false") | undefined;
-        "aria-keyshortcuts"?: string | undefined;
-        "aria-labelledby"?: string | undefined;
-        "aria-level"?: number | undefined;
+        "aria-keyshortcuts"?: string | undefined | undefined;
+        "aria-labelledby"?: string | undefined | undefined;
+        "aria-level"?: number | undefined | undefined;
         "aria-modal"?: (boolean | "true" | "false") | undefined;
         "aria-multiline"?: (boolean | "true" | "false") | undefined;
-        "aria-orientation"?: "horizontal" | "vertical" | undefined;
-        "aria-owns"?: string | undefined;
-        "aria-placeholder"?: string | undefined;
-        "aria-posinset"?: number | undefined;
-        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
+        "aria-owns"?: string | undefined | undefined;
+        "aria-placeholder"?: string | undefined | undefined;
+        "aria-posinset"?: number | undefined | undefined;
+        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
         "aria-readonly"?: (boolean | "true" | "false") | undefined;
-        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
         "aria-required"?: (boolean | "true" | "false") | undefined;
-        "aria-roledescription"?: string | undefined;
-        "aria-rowcount"?: number | undefined;
-        "aria-rowindex"?: number | undefined;
-        "aria-rowindextext"?: string | undefined;
-        "aria-rowspan"?: number | undefined;
-        "aria-setsize"?: number | undefined;
-        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
-        "aria-valuenow"?: number | undefined;
+        "aria-roledescription"?: string | undefined | undefined;
+        "aria-rowcount"?: number | undefined | undefined;
+        "aria-rowindex"?: number | undefined | undefined;
+        "aria-rowindextext"?: string | undefined | undefined;
+        "aria-rowspan"?: number | undefined | undefined;
+        "aria-setsize"?: number | undefined | undefined;
+        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
+        "aria-valuenow"?: number | undefined | undefined;
         dangerouslySetInnerHTML?: {
             __html: string | TrustedHTML;
-        } | undefined;
+        } | undefined | undefined;
         onCopy?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
         onCopyCapture?: import("react").ClipboardEventHandler<HTMLElement> | undefined;
         onCut?: import("react").ClipboardEventHandler<HTMLElement> | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sebgroup/green-core",
   "description": "A carefully crafted set of Web Components, laying the foundation of the Green Design System.",
-  "version": "3.13.0",
+  "version": "3.14.0",
   "main": "index.js",
   "module": "index.js",
   "type": "module",
@@ -73,6 +73,12 @@
     "./components/textarea/index.js",
     "./components/text/text.js",
     "./components/text/index.js",
+    "./components/tabs/tabs.js",
+    "./components/tabs/index.js",
+    "./components/tabs/tab-panel/tab-panel.js",
+    "./components/tabs/tab-panel/index.js",
+    "./components/tabs/tab/tab.js",
+    "./components/tabs/tab/index.js",
     "./components/table/table.types.js",
     "./components/table/table.stories.data.js",
     "./components/table/table.js",

package/primitives/listbox/listbox.trans.styles.scss.js

@@ -1,2 +1,2 @@
-const styles = "/* stylelint-disable max-nesting-depth */\n/**\n * Assert that a map is in ascending order\n * @mixin assert-ascending\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Assert that the first breakpoint in a map starts at zero\n * @mixin assert-starts-at-zero\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Check if a value is important\n * @function is-important\n * @param {Boolean} $important - Whether the value is important\n * @return {String} - \"!important\" if true, otherwise an empty string\n */\n/**\n * Replace a substring in a string\n * @function str-replace\n * @param {String} $string - The original string\n * @param {String} $search - The substring to replace\n * @param {String} $replace - The replacement string\n * @return {String} - The updated string\n */\n/**\n * Convert a map to its negative variant\n * @function negativify-map\n * @param {Map} $map - The map to convert\n * @return {Map} - The negative variant of the map\n */\n/**\n * Generate utility classes\n * @mixin generate-utility\n * @param {Map} $utility - Utility map\n * @param {String} $infix - Infix for class names\n * @param {Boolean} $is-rfs-media-query - Whether to use RFS media query\n */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * @function luminance\n * @param {Color} $color - The color to calculate luminance for\n * @return {Number} - The luminance value\n */\n/**\n * Calculate the contrast ratio between two colors.\n * @function color-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @return {Number} - The contrast ratio\n */\n/**\n * Remove the unit of a length\n * @function strip-unit\n * @param {Number} $number - Number to remove unit from\n * @return {Number} - Unitless number\n */\n/**\n * Validate font size\n * @function validate-font-size\n * @param {Number} $size - Font size to validate\n * @return {Number} - Validated font size in pixels\n */\n/**\n * Get ratio for WCAG level\n * @function get-ratio\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @return {Number} - Ratio value\n */\n/**\n * Determine if a color is light or dark\n * @function light-or-dark\n * @param {Color} $color - The color to check\n * @return {String} - \"light\" or \"dark\"\n */\n/**\n * Get the most legible color (black or white) for a given background color\n * @function most-legible-color\n * @param {Color} $color - The background color\n * @return {Color} - The most legible color\n */\n/**\n * Get the desired color combination for foreground and background colors\n * @function desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n * @return {List} - List containing background and foreground colors\n */\n/**\n * @mixin desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n */\n/**\n * Get an accessible color for a given foreground and background color\n * @function a11y-color\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @param {Number} $maxOffset - Maximum offset\n * @param {Boolean} $darkMode - Is dark mode\n * @param {Number} $ratio - Contrast ratio\n * @return {Color} - Accessible color\n */\n/**\n * Get the maximum contrast color\n * @function max-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Color} $max - Maximum contrast color\n * @return {Color} - Maximum contrast color\n */\n/**\n * Get the RGB values of a color as a string\n * @function stripped-rgb\n * @param {Color} $color - The color\n * @return {String} - RGB values as a string\n */\n/**\n * Get the HSL values of a color as a string\n * @function stripped-hsl\n * @param {Color} $color - The color\n * @return {String} - HSL values as a string\n */\n/**\n * Convert a map of colors to a map of HSL values\n * @function hsl-map\n * @param {Map} $colors - Map of colors\n * @return {Map} - Map of HSL values\n */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\n/**\n * Breakpoint viewport sizes and media queries.\n *\n * Breakpoints are defined as a map of (name: minimum width), order from small to large:\n *\n *    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n *\n * The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n */\n/**\n * Name of the next breakpoint, or null for the last breakpoint.\n *\n *    >> breakpoint-next(sm)\n *    md\n *    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    md\n *    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n *    md\n */\n/**\n * Minimum breakpoint width. Null for the smallest (first) breakpoint.\n *\n *    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    576px\n */\n/**\n * Maximum breakpoint width.\n * The maximum value is reduced by 0.02px to work around the limitations of\n * `min-` and `max-` prefixes and viewports with fractional widths.\n * See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n * Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n * See https://bugs.webkit.org/show_bug.cgi?id=178261\n *\n *    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    767.98px\n */\n/**\n * Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n * Useful for making responsive utilities.\n *\n *    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    \"\"  (Returns a blank string)\n *    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    \"-sm\"\n */\n/**\n * Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n * Makes the @content apply to the given breakpoint and wider.\n */\n/**\n * Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n * Makes the @content apply to the given breakpoint and narrower.\n */\n/**\n * Media that spans multiple breakpoint widths.\n * Makes the @content apply between the min and max breakpoints\n */\n/**\n * Media between the breakpoint's minimum and maximum widths.\n * No minimum for the smallest breakpoint, and no maximum for the largest one.\n * Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\n */\n/** \n  * @deprecated in favor of Grouped list component\n  */\n/** \n  * @deprecated in favor of Grouped list component\n  */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  :host {\n    padding-left: 0;\n    margin-bottom: 0;\n    margin-top: 0;\n    display: flex;\n    flex-direction: column;\n    list-style: none;\n  }\n  :host > li {\n    padding-bottom: 0.5rem;\n    padding-top: 0.5rem;\n    border: 0;\n    display: block;\n    position: relative;\n  }\n  :host > li::before {\n    font-weight: 500;\n    display: inline-block;\n    left: 0;\n    position: absolute;\n    text-align: center;\n  }\n  :host {\n    overflow-y: auto;\n  }\n}";
+const styles = "/* stylelint-disable max-nesting-depth */\n/**\n * Assert that a map is in ascending order\n * @mixin assert-ascending\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Assert that the first breakpoint in a map starts at zero\n * @mixin assert-starts-at-zero\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Check if a value is important\n * @function is-important\n * @param {Boolean} $important - Whether the value is important\n * @return {String} - \"!important\" if true, otherwise an empty string\n */\n/**\n * Replace a substring in a string\n * @function str-replace\n * @param {String} $string - The original string\n * @param {String} $search - The substring to replace\n * @param {String} $replace - The replacement string\n * @return {String} - The updated string\n */\n/**\n * Convert a map to its negative variant\n * @function negativify-map\n * @param {Map} $map - The map to convert\n * @return {Map} - The negative variant of the map\n */\n/**\n * Generate utility classes\n * @mixin generate-utility\n * @param {Map} $utility - Utility map\n * @param {String} $infix - Infix for class names\n * @param {Boolean} $is-rfs-media-query - Whether to use RFS media query\n */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * @function luminance\n * @param {Color} $color - The color to calculate luminance for\n * @return {Number} - The luminance value\n */\n/**\n * Calculate the contrast ratio between two colors.\n * @function color-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @return {Number} - The contrast ratio\n */\n/**\n * Remove the unit of a length\n * @function strip-unit\n * @param {Number} $number - Number to remove unit from\n * @return {Number} - Unitless number\n */\n/**\n * Validate font size\n * @function validate-font-size\n * @param {Number} $size - Font size to validate\n * @return {Number} - Validated font size in pixels\n */\n/**\n * Get ratio for WCAG level\n * @function get-ratio\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @return {Number} - Ratio value\n */\n/**\n * Determine if a color is light or dark\n * @function light-or-dark\n * @param {Color} $color - The color to check\n * @return {String} - \"light\" or \"dark\"\n */\n/**\n * Get the most legible color (black or white) for a given background color\n * @function most-legible-color\n * @param {Color} $color - The background color\n * @return {Color} - The most legible color\n */\n/**\n * Get the desired color combination for foreground and background colors\n * @function desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n * @return {List} - List containing background and foreground colors\n */\n/**\n * @mixin desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n */\n/**\n * Get an accessible color for a given foreground and background color\n * @function a11y-color\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @param {Number} $maxOffset - Maximum offset\n * @param {Boolean} $darkMode - Is dark mode\n * @param {Number} $ratio - Contrast ratio\n * @return {Color} - Accessible color\n */\n/**\n * Get the maximum contrast color\n * @function max-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Color} $max - Maximum contrast color\n * @return {Color} - Maximum contrast color\n */\n/**\n * Get the RGB values of a color as a string\n * @function stripped-rgb\n * @param {Color} $color - The color\n * @return {String} - RGB values as a string\n */\n/**\n * Get the HSL values of a color as a string\n * @function stripped-hsl\n * @param {Color} $color - The color\n * @return {String} - HSL values as a string\n */\n/**\n * Convert a map of colors to a map of HSL values\n * @function hsl-map\n * @param {Map} $colors - Map of colors\n * @return {Map} - Map of HSL values\n */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\n/**\n * Breakpoint viewport sizes and media queries.\n *\n * Breakpoints are defined as a map of (name: minimum width), order from small to large:\n *\n *    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n *\n * The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n */\n/**\n * Name of the next breakpoint, or null for the last breakpoint.\n *\n *    >> breakpoint-next(sm)\n *    md\n *    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    md\n *    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n *    md\n */\n/**\n * Minimum breakpoint width. Null for the smallest (first) breakpoint.\n *\n *    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    576px\n */\n/**\n * Maximum breakpoint width.\n * The maximum value is reduced by 0.02px to work around the limitations of\n * `min-` and `max-` prefixes and viewports with fractional widths.\n * See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n * Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n * See https://bugs.webkit.org/show_bug.cgi?id=178261\n *\n *    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    767.98px\n */\n/**\n * Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n * Useful for making responsive utilities.\n *\n *    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    \"\"  (Returns a blank string)\n *    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    \"-sm\"\n */\n/**\n * Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n * Makes the @content apply to the given breakpoint and wider.\n */\n/**\n * Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n * Makes the @content apply to the given breakpoint and narrower.\n */\n/**\n * Media that spans multiple breakpoint widths.\n * Makes the @content apply between the min and max breakpoints\n */\n/**\n * Media between the breakpoint's minimum and maximum widths.\n * No minimum for the smallest breakpoint, and no maximum for the largest one.\n * Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\n */\n/** \n  * @deprecated in favor of Grouped list component\n  */\n/** \n  * @deprecated in favor of Grouped list component\n  */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  :host {\n    padding-left: 0 \"\";\n    margin-bottom: 0 \"\";\n    margin-top: 0 \"\";\n    display: flex;\n    flex-direction: column;\n    list-style: none;\n  }\n  :host > li {\n    padding-bottom: 0.5rem \"\";\n    padding-top: 0.5rem \"\";\n    border: 0;\n    display: block;\n    position: relative;\n  }\n  :host > li::before {\n    font-weight: 500;\n    display: inline-block;\n    left: 0;\n    position: absolute;\n    text-align: center;\n  }\n  :host {\n    overflow-y: auto;\n  }\n}";
 export default styles;

package/primitives/listbox/option.trans.styles.scss.js

@@ -1,2 +1,2 @@
-const styles = "/* stylelint-disable max-nesting-depth */\n/**\n * Assert that a map is in ascending order\n * @mixin assert-ascending\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Assert that the first breakpoint in a map starts at zero\n * @mixin assert-starts-at-zero\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Check if a value is important\n * @function is-important\n * @param {Boolean} $important - Whether the value is important\n * @return {String} - \"!important\" if true, otherwise an empty string\n */\n/**\n * Replace a substring in a string\n * @function str-replace\n * @param {String} $string - The original string\n * @param {String} $search - The substring to replace\n * @param {String} $replace - The replacement string\n * @return {String} - The updated string\n */\n/**\n * Convert a map to its negative variant\n * @function negativify-map\n * @param {Map} $map - The map to convert\n * @return {Map} - The negative variant of the map\n */\n/**\n * Generate utility classes\n * @mixin generate-utility\n * @param {Map} $utility - Utility map\n * @param {String} $infix - Infix for class names\n * @param {Boolean} $is-rfs-media-query - Whether to use RFS media query\n */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * @function luminance\n * @param {Color} $color - The color to calculate luminance for\n * @return {Number} - The luminance value\n */\n/**\n * Calculate the contrast ratio between two colors.\n * @function color-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @return {Number} - The contrast ratio\n */\n/**\n * Remove the unit of a length\n * @function strip-unit\n * @param {Number} $number - Number to remove unit from\n * @return {Number} - Unitless number\n */\n/**\n * Validate font size\n * @function validate-font-size\n * @param {Number} $size - Font size to validate\n * @return {Number} - Validated font size in pixels\n */\n/**\n * Get ratio for WCAG level\n * @function get-ratio\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @return {Number} - Ratio value\n */\n/**\n * Determine if a color is light or dark\n * @function light-or-dark\n * @param {Color} $color - The color to check\n * @return {String} - \"light\" or \"dark\"\n */\n/**\n * Get the most legible color (black or white) for a given background color\n * @function most-legible-color\n * @param {Color} $color - The background color\n * @return {Color} - The most legible color\n */\n/**\n * Get the desired color combination for foreground and background colors\n * @function desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n * @return {List} - List containing background and foreground colors\n */\n/**\n * @mixin desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n */\n/**\n * Get an accessible color for a given foreground and background color\n * @function a11y-color\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @param {Number} $maxOffset - Maximum offset\n * @param {Boolean} $darkMode - Is dark mode\n * @param {Number} $ratio - Contrast ratio\n * @return {Color} - Accessible color\n */\n/**\n * Get the maximum contrast color\n * @function max-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Color} $max - Maximum contrast color\n * @return {Color} - Maximum contrast color\n */\n/**\n * Get the RGB values of a color as a string\n * @function stripped-rgb\n * @param {Color} $color - The color\n * @return {String} - RGB values as a string\n */\n/**\n * Get the HSL values of a color as a string\n * @function stripped-hsl\n * @param {Color} $color - The color\n * @return {String} - HSL values as a string\n */\n/**\n * Convert a map of colors to a map of HSL values\n * @function hsl-map\n * @param {Map} $colors - Map of colors\n * @return {Map} - Map of HSL values\n */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\n/**\n * Breakpoint viewport sizes and media queries.\n *\n * Breakpoints are defined as a map of (name: minimum width), order from small to large:\n *\n *    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n *\n * The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n */\n/**\n * Name of the next breakpoint, or null for the last breakpoint.\n *\n *    >> breakpoint-next(sm)\n *    md\n *    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    md\n *    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n *    md\n */\n/**\n * Minimum breakpoint width. Null for the smallest (first) breakpoint.\n *\n *    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    576px\n */\n/**\n * Maximum breakpoint width.\n * The maximum value is reduced by 0.02px to work around the limitations of\n * `min-` and `max-` prefixes and viewports with fractional widths.\n * See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n * Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n * See https://bugs.webkit.org/show_bug.cgi?id=178261\n *\n *    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    767.98px\n */\n/**\n * Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n * Useful for making responsive utilities.\n *\n *    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    \"\"  (Returns a blank string)\n *    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    \"-sm\"\n */\n/**\n * Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n * Makes the @content apply to the given breakpoint and wider.\n */\n/**\n * Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n * Makes the @content apply to the given breakpoint and narrower.\n */\n/**\n * Media that spans multiple breakpoint widths.\n * Makes the @content apply between the min and max breakpoints\n */\n/**\n * Media between the breakpoint's minimum and maximum widths.\n * No minimum for the smallest breakpoint, and no maximum for the largest one.\n * Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\n */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  .item {\n    padding-left: 1rem;\n    padding-right: 1rem;\n    padding-bottom: 0.75rem;\n    padding-top: 0.75rem;\n    line-height: 1.25;\n    cursor: pointer;\n  }\n  .item:hover, .item:focus-visible {\n    background-color: var(--gds-sys-color-base-200);\n  }\n  .item:active {\n    background-color: var(--gds-sys-color-base-200);\n  }\n  .item:focus {\n    outline-color: #000;\n    outline-offset: -0.25rem;\n  }\n  .item.active.sg-highlighted, .item[aria-selected=true] {\n    background: var(--gds-sys-color-base-800);\n    color: #fff;\n  }\n  .item {\n    display: flex;\n    gap: 0.75rem;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n  :host(:hover) div,\n  :host(:focus-visible) div {\n    background-color: var(--gds-sys-color-base-200);\n  }\n  :host(:active) div {\n    background-color: var(--gds-sys-color-base-300);\n  }\n  :host(:focus-visible) {\n    outline-color: #000;\n    outline-offset: -0.25rem;\n  }\n  :host([inert]) {\n    display: none;\n  }\n  :host([highlighted]) .item {\n    background: var(--gds-sys-color-base-800);\n    color: #fff;\n  }\n}";
+const styles = "/* stylelint-disable max-nesting-depth */\n/**\n * Assert that a map is in ascending order\n * @mixin assert-ascending\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Assert that the first breakpoint in a map starts at zero\n * @mixin assert-starts-at-zero\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Check if a value is important\n * @function is-important\n * @param {Boolean} $important - Whether the value is important\n * @return {String} - \"!important\" if true, otherwise an empty string\n */\n/**\n * Replace a substring in a string\n * @function str-replace\n * @param {String} $string - The original string\n * @param {String} $search - The substring to replace\n * @param {String} $replace - The replacement string\n * @return {String} - The updated string\n */\n/**\n * Convert a map to its negative variant\n * @function negativify-map\n * @param {Map} $map - The map to convert\n * @return {Map} - The negative variant of the map\n */\n/**\n * Generate utility classes\n * @mixin generate-utility\n * @param {Map} $utility - Utility map\n * @param {String} $infix - Infix for class names\n * @param {Boolean} $is-rfs-media-query - Whether to use RFS media query\n */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * @function luminance\n * @param {Color} $color - The color to calculate luminance for\n * @return {Number} - The luminance value\n */\n/**\n * Calculate the contrast ratio between two colors.\n * @function color-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @return {Number} - The contrast ratio\n */\n/**\n * Remove the unit of a length\n * @function strip-unit\n * @param {Number} $number - Number to remove unit from\n * @return {Number} - Unitless number\n */\n/**\n * Validate font size\n * @function validate-font-size\n * @param {Number} $size - Font size to validate\n * @return {Number} - Validated font size in pixels\n */\n/**\n * Get ratio for WCAG level\n * @function get-ratio\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @return {Number} - Ratio value\n */\n/**\n * Determine if a color is light or dark\n * @function light-or-dark\n * @param {Color} $color - The color to check\n * @return {String} - \"light\" or \"dark\"\n */\n/**\n * Get the most legible color (black or white) for a given background color\n * @function most-legible-color\n * @param {Color} $color - The background color\n * @return {Color} - The most legible color\n */\n/**\n * Get the desired color combination for foreground and background colors\n * @function desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n * @return {List} - List containing background and foreground colors\n */\n/**\n * @mixin desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n */\n/**\n * Get an accessible color for a given foreground and background color\n * @function a11y-color\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @param {Number} $maxOffset - Maximum offset\n * @param {Boolean} $darkMode - Is dark mode\n * @param {Number} $ratio - Contrast ratio\n * @return {Color} - Accessible color\n */\n/**\n * Get the maximum contrast color\n * @function max-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Color} $max - Maximum contrast color\n * @return {Color} - Maximum contrast color\n */\n/**\n * Get the RGB values of a color as a string\n * @function stripped-rgb\n * @param {Color} $color - The color\n * @return {String} - RGB values as a string\n */\n/**\n * Get the HSL values of a color as a string\n * @function stripped-hsl\n * @param {Color} $color - The color\n * @return {String} - HSL values as a string\n */\n/**\n * Convert a map of colors to a map of HSL values\n * @function hsl-map\n * @param {Map} $colors - Map of colors\n * @return {Map} - Map of HSL values\n */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\n/**\n * Breakpoint viewport sizes and media queries.\n *\n * Breakpoints are defined as a map of (name: minimum width), order from small to large:\n *\n *    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n *\n * The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n */\n/**\n * Name of the next breakpoint, or null for the last breakpoint.\n *\n *    >> breakpoint-next(sm)\n *    md\n *    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    md\n *    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n *    md\n */\n/**\n * Minimum breakpoint width. Null for the smallest (first) breakpoint.\n *\n *    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    576px\n */\n/**\n * Maximum breakpoint width.\n * The maximum value is reduced by 0.02px to work around the limitations of\n * `min-` and `max-` prefixes and viewports with fractional widths.\n * See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n * Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n * See https://bugs.webkit.org/show_bug.cgi?id=178261\n *\n *    >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    767.98px\n */\n/**\n * Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n * Useful for making responsive utilities.\n *\n *    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    \"\"  (Returns a blank string)\n *    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n *    \"-sm\"\n */\n/**\n * Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n * Makes the @content apply to the given breakpoint and wider.\n */\n/**\n * Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n * Makes the @content apply to the given breakpoint and narrower.\n */\n/**\n * Media that spans multiple breakpoint widths.\n * Makes the @content apply between the min and max breakpoints\n */\n/**\n * Media between the breakpoint's minimum and maximum widths.\n * No minimum for the smallest breakpoint, and no maximum for the largest one.\n * Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\n */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  .item {\n    padding-left: 1rem \"\";\n    padding-right: 1rem \"\";\n    padding-bottom: 0.75rem \"\";\n    padding-top: 0.75rem \"\";\n    line-height: 1.25;\n    cursor: pointer;\n  }\n  .item:hover, .item:focus-visible {\n    background-color: var(--gds-sys-color-base-200);\n  }\n  .item:active {\n    background-color: var(--gds-sys-color-base-200);\n  }\n  .item:focus {\n    outline-color: #000;\n    outline-offset: -0.25rem;\n  }\n  .item.active.sg-highlighted, .item[aria-selected=true] {\n    background: var(--gds-sys-color-base-800);\n    color: #fff;\n  }\n  .item {\n    display: flex;\n    gap: 0.75rem;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none;\n  }\n  :host(:hover) div,\n  :host(:focus-visible) div {\n    background-color: var(--gds-sys-color-base-200);\n  }\n  :host(:active) div {\n    background-color: var(--gds-sys-color-base-300);\n  }\n  :host(:focus-visible) {\n    outline-color: #000;\n    outline-offset: -0.25rem;\n  }\n  :host([inert]) {\n    display: none;\n  }\n  :host([highlighted]) .item {\n    background: var(--gds-sys-color-base-800);\n    color: #fff;\n  }\n}";
 export default styles;

package/utils/helpers/custom-element-scoping.js

@@ -1,6 +1,6 @@
 import "../../chunks/chunk.CAV4X6PU.js";
 import { html as litHtml } from "lit";
-const VER_SUFFIX = "-1035d1";
+const VER_SUFFIX = "-eadd84";
 class ScopedElementRegistry {
   static get instance() {
     if (!globalThis.__gdsElementLookupTable?.[VER_SUFFIX])