@sebgroup/green-core 3.22.0 → 3.22.1

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

@@ -30,10 +30,11 @@ export declare const GdsTheme: {
         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>;
+        readonly updateComplete?: Promise<boolean> | undefined;
         accessKey?: string | undefined;
         readonly accessKeyLabel?: string | undefined;
         autocapitalize?: string | undefined;
+        autocorrect?: boolean | undefined;
         dir?: string | undefined;
         draggable?: boolean | undefined;
         hidden?: boolean | undefined;
@@ -65,7 +66,7 @@ export declare const GdsTheme: {
             (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
         } | undefined;
         readonly attributes?: NamedNodeMap | undefined;
-        classList?: DOMTokenList;
+        classList?: DOMTokenList | undefined;
         className?: string | undefined;
         readonly clientHeight?: number | undefined;
         readonly clientLeft?: number | undefined;
@@ -80,7 +81,7 @@ export declare const GdsTheme: {
         onfullscreenerror?: ((this: Element, ev: Event) => any) | null | undefined;
         outerHTML?: string | undefined;
         readonly ownerDocument?: Document | undefined;
-        part?: DOMTokenList;
+        part?: DOMTokenList | undefined;
         readonly prefix?: string | null | undefined;
         readonly scrollHeight?: number | undefined;
         scrollLeft?: number | undefined;
@@ -155,6 +156,7 @@ export declare const GdsTheme: {
         setPointerCapture?: ((pointerId: number) => void) | undefined;
         toggleAttribute?: ((qualifiedName: string, force?: boolean) => boolean) | undefined;
         webkitMatchesSelector?: ((selectors: string) => boolean) | undefined;
+        textContent?: string | undefined;
         ariaActiveDescendantElement?: Element | null | undefined;
         ariaControlsElements?: Element[] | null | undefined;
         ariaDescribedByElements?: Element[] | null | undefined;
@@ -175,7 +177,6 @@ export declare const GdsTheme: {
         readonly parentElement?: HTMLElement | null | undefined;
         readonly parentNode?: ParentNode | null | undefined;
         readonly previousSibling?: ChildNode | null | undefined;
-        textContent?: string | null | undefined;
         appendChild?: (<T extends Node>(node: T) => T) | undefined;
         cloneNode?: ((subtree?: boolean) => Node) | undefined;
         compareDocumentPosition?: ((other: Node) => number) | undefined;
@@ -285,7 +286,7 @@ export declare const GdsTheme: {
         replaceChildren?: ((...nodes: (Node | string)[]) => void) | undefined;
         readonly assignedSlot?: HTMLSlotElement | null | undefined;
         readonly attributeStyleMap?: StylePropertyMap | undefined;
-        style?: CSSStyleDeclaration;
+        style?: CSSStyleDeclaration | undefined;
         contentEditable?: string | undefined;
         enterKeyHint?: string | undefined;
         inputMode?: string | undefined;
@@ -295,18 +296,19 @@ export declare const GdsTheme: {
         onanimationend?: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null | undefined;
         onanimationiteration?: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null | undefined;
         onanimationstart?: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null | undefined;
-        onauxclick?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
+        onauxclick?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
         onbeforeinput?: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null | undefined;
-        onbeforetoggle?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+        onbeforematch?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+        onbeforetoggle?: ((this: GlobalEventHandlers, ev: ToggleEvent) => any) | null | undefined;
         onblur?: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null | undefined;
         oncancel?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
         oncanplay?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
         oncanplaythrough?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
         onchange?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
-        onclick?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
+        onclick?: ((this: GlobalEventHandlers, ev: PointerEvent) => 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;
+        oncontextmenu?: ((this: GlobalEventHandlers, ev: PointerEvent) => 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;
@@ -354,6 +356,7 @@ export declare const GdsTheme: {
         onpointermove?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
         onpointerout?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
         onpointerover?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
+        onpointerrawupdate?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
         onpointerup?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
         onprogress?: ((this: GlobalEventHandlers, ev: ProgressEvent) => any) | null | undefined;
         onratechange?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
@@ -372,7 +375,7 @@ export declare const GdsTheme: {
         onsubmit?: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null | undefined;
         onsuspend?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
         ontimeupdate?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
-        ontoggle?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+        ontoggle?: ((this: GlobalEventHandlers, ev: ToggleEvent) => 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;

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

@@ -65,10 +65,11 @@ 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>;
+        readonly updateComplete?: Promise<boolean> | undefined;
         accessKey?: string | undefined;
         readonly accessKeyLabel?: string | undefined;
         autocapitalize?: string | undefined;
+        autocorrect?: boolean | undefined;
         dir?: string | undefined;
         draggable?: boolean | undefined;
         hidden?: boolean | undefined;
@@ -100,7 +101,7 @@ export declare const GdsVideo: {
             (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
         } | undefined;
         readonly attributes?: NamedNodeMap | undefined;
-        classList?: DOMTokenList;
+        classList?: DOMTokenList | undefined;
         className?: string | undefined;
         readonly clientHeight?: number | undefined;
         readonly clientLeft?: number | undefined;
@@ -115,7 +116,7 @@ export declare const GdsVideo: {
         onfullscreenerror?: ((this: Element, ev: Event) => any) | null | undefined;
         outerHTML?: string | undefined;
         readonly ownerDocument?: Document | undefined;
-        part?: DOMTokenList;
+        part?: DOMTokenList | undefined;
         readonly prefix?: string | null | undefined;
         readonly scrollHeight?: number | undefined;
         scrollLeft?: number | undefined;
@@ -190,6 +191,7 @@ export declare const GdsVideo: {
         setPointerCapture?: ((pointerId: number) => void) | undefined;
         toggleAttribute?: ((qualifiedName: string, force?: boolean) => boolean) | undefined;
         webkitMatchesSelector?: ((selectors: string) => boolean) | undefined;
+        textContent?: string | undefined;
         ariaActiveDescendantElement?: Element | null | undefined;
         ariaControlsElements?: Element[] | null | undefined;
         ariaDescribedByElements?: Element[] | null | undefined;
@@ -210,7 +212,6 @@ export declare const GdsVideo: {
         readonly parentElement?: HTMLElement | null | undefined;
         readonly parentNode?: ParentNode | null | undefined;
         readonly previousSibling?: ChildNode | null | undefined;
-        textContent?: string | null | undefined;
         appendChild?: (<T extends Node>(node: T) => T) | undefined;
         cloneNode?: ((subtree?: boolean) => Node) | undefined;
         compareDocumentPosition?: ((other: Node) => number) | undefined;
@@ -320,7 +321,7 @@ export declare const GdsVideo: {
         replaceChildren?: ((...nodes: (Node | string)[]) => void) | undefined;
         readonly assignedSlot?: HTMLSlotElement | null | undefined;
         readonly attributeStyleMap?: StylePropertyMap | undefined;
-        style?: CSSStyleDeclaration;
+        style?: CSSStyleDeclaration | undefined;
         contentEditable?: string | undefined;
         enterKeyHint?: string | undefined;
         inputMode?: string | undefined;
@@ -330,18 +331,19 @@ export declare const GdsVideo: {
         onanimationend?: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null | undefined;
         onanimationiteration?: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null | undefined;
         onanimationstart?: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null | undefined;
-        onauxclick?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
+        onauxclick?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
         onbeforeinput?: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null | undefined;
-        onbeforetoggle?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+        onbeforematch?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+        onbeforetoggle?: ((this: GlobalEventHandlers, ev: ToggleEvent) => any) | null | undefined;
         onblur?: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null | undefined;
         oncancel?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
         oncanplay?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
         oncanplaythrough?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
         onchange?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
-        onclick?: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null | undefined;
+        onclick?: ((this: GlobalEventHandlers, ev: PointerEvent) => 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;
+        oncontextmenu?: ((this: GlobalEventHandlers, ev: PointerEvent) => 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;
@@ -389,6 +391,7 @@ export declare const GdsVideo: {
         onpointermove?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
         onpointerout?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
         onpointerover?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
+        onpointerrawupdate?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
         onpointerup?: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null | undefined;
         onprogress?: ((this: GlobalEventHandlers, ev: ProgressEvent) => any) | null | undefined;
         onratechange?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
@@ -407,7 +410,7 @@ export declare const GdsVideo: {
         onsubmit?: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null | undefined;
         onsuspend?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
         ontimeupdate?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
-        ontoggle?: ((this: GlobalEventHandlers, ev: Event) => any) | null | undefined;
+        ontoggle?: ((this: GlobalEventHandlers, ev: ToggleEvent) => 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;

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.22.0",
+  "version": "3.22.1",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

package/primitives/field-base/field-base.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  .field {\n    border-radius: 0.25rem;\n    border: solid 1px var(--gds-sys-color-base-600);\n    --border-color: var(--gds-sys-color-base-600);\n  }\n  .field:focus:not(:focus-visible) {\n    box-shadow: none;\n    outline: 0;\n  }\n  .field:focus, .field:focus-within {\n    outline-color: var(--gds-sys-color-focus-outline);\n    outline-style: solid;\n    outline-width: 0.125rem;\n    outline-offset: 0.125rem;\n  }\n  .field {\n    align-items: stretch;\n    gap: var(--gds-sys-space-xs);\n    background-color: var(--gds-sys-color-background-primary);\n    box-sizing: border-box;\n    color: var(--gds-sys-color-text-primary);\n    cursor: text;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: calc(var(--gds-sys-space-xs) - 1px) var(--gds-sys-space-xs) calc(var(--gds-sys-space-xs) - 1px) var(--gds-sys-space-m);\n    min-block-size: 44px;\n  }\n  .field:hover {\n    background-color: var(--grey-200);\n  }\n  .field.small {\n    font-size: 0.875rem;\n    min-height: 2rem;\n  }\n  .field.multiline {\n    align-items: flex-start;\n    padding: calc(var(--gds-sys-space-s) - 1px) var(--gds-sys-space-s) calc(var(--gds-sys-space-s) - 1px) var(--gds-sys-space-m);\n    height: -moz-max-content;\n    height: max-content;\n  }\n  .field.action-slot-occupied:not(.trail-slot-occupied) {\n    padding-right: var(--gds-sys-space-xs);\n  }\n  .field.lead-slot-occupied {\n    padding-left: var(--gds-sys-space-xs);\n  }\n  .field.trail-slot-occupied {\n    padding: calc(var(--gds-sys-space-xs) - 1px) var(--gds-sys-space-m);\n  }\n  .field slot[name=action]::slotted(*) {\n    margin: -3px 0 -3px -3px;\n  }\n  .field:focus-within {\n    outline-color: currentColor;\n  }\n  .field.invalid {\n    border-color: var(--gds-sys-color-border-negative-01);\n    color: var(--gds-sys-color-content-negative-01);\n    border-bottom-width: 2px;\n  }\n  .field.disabled {\n    background: var(--gds-sys-color-l3-disabled-01);\n    color: var(--gds-sys-color-content-disabled-01);\n    border-color: transparent;\n    pointer-events: none;\n  }\n  .main-slot-wrap {\n    display: flex;\n    flex: 1;\n  }\n  slot:not([name])::slotted(*) {\n    color: currentColor;\n  }\n  slot[name=lead]::slotted([gds-element^=gds-icon-]) {\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    min-width: var(--gds-sys-space-l);\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  .field {\n    border-radius: 0.25rem;\n    border: solid 1px var(--gds-sys-color-base-600);\n    --border-color: var(--gds-sys-color-base-600);\n  }\n  .field:focus:not(:focus-visible) {\n    box-shadow: none;\n    outline: 0;\n  }\n  .field:focus, .field:focus-within {\n    outline-color: var(--gds-sys-color-focus-outline, var(--gds-sys-color-base-900));\n    outline-style: solid;\n    outline-width: 0.125rem;\n    outline-offset: 0.125rem;\n  }\n  .field {\n    align-items: stretch;\n    gap: var(--gds-sys-space-xs);\n    background-color: var(--gds-sys-color-background-primary);\n    box-sizing: border-box;\n    color: var(--gds-sys-color-text-primary);\n    cursor: text;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: calc(var(--gds-sys-space-xs) - 1px) var(--gds-sys-space-xs) calc(var(--gds-sys-space-xs) - 1px) var(--gds-sys-space-m);\n    min-block-size: 44px;\n  }\n  .field:hover {\n    background-color: var(--grey-200);\n  }\n  .field.small {\n    font-size: 0.875rem;\n    min-height: 2rem;\n  }\n  .field.multiline {\n    align-items: flex-start;\n    padding: calc(var(--gds-sys-space-s) - 1px) var(--gds-sys-space-s) calc(var(--gds-sys-space-s) - 1px) var(--gds-sys-space-m);\n    height: -moz-max-content;\n    height: max-content;\n  }\n  .field.action-slot-occupied:not(.trail-slot-occupied) {\n    padding-right: var(--gds-sys-space-xs);\n  }\n  .field.lead-slot-occupied {\n    padding-left: var(--gds-sys-space-xs);\n  }\n  .field.trail-slot-occupied {\n    padding: calc(var(--gds-sys-space-xs) - 1px) var(--gds-sys-space-m);\n  }\n  .field slot[name=action]::slotted(*) {\n    margin: -3px 0 -3px -3px;\n  }\n  .field:focus-within {\n    outline-color: currentColor;\n  }\n  .field.invalid {\n    border-color: var(--gds-sys-color-border-negative-01);\n    color: var(--gds-sys-color-content-negative-01);\n    border-bottom-width: 2px;\n  }\n  .field.disabled {\n    background: var(--gds-sys-color-l3-disabled-01);\n    color: var(--gds-sys-color-content-disabled-01);\n    border-color: transparent;\n    pointer-events: none;\n  }\n  .main-slot-wrap {\n    display: flex;\n    flex: 1;\n  }\n  slot:not([name])::slotted(*) {\n    color: currentColor;\n  }\n  slot[name=lead]::slotted([gds-element^=gds-icon-]) {\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    min-width: var(--gds-sys-space-l);\n  }\n}";
 export default styles;

package/shared-styles/rbcb-toggle.style.js

@@ -170,11 +170,9 @@ var rbcb_toggle_style_default = css`
   }
 
   :host([gds-element='gds-radio']:focus-visible) .rbcb__perimeter,
-  :host([gds-element='gds-radio']:focus-within) .rbcb__perimeter,
-  :host([gds-element='gds-checkbox']:focus-visible) .rbcb__perimeter,
-  :host([gds-element='gds-checkbox']:focus-within) .rbcb__perimeter,
-  .rbcb-wrapper:focus-visible .rbcb__perimeter,
-  .rbcb-wrapper:focus-within .rbcb__perimeter {
+  :host([gds-element='gds-checkbox']):has(.visually-hidden-checkbox:focus-visible)
+    .rbcb__perimeter,
+  .rbcb-wrapper:has(.visually-hidden-checkbox:focus-visible) .rbcb__perimeter {
     outline-width: var(--gds-sys-space-4xs);
     scale: 1;
   }

package/test-setup.d.ts

@@ -2,6 +2,7 @@ interface AccessibleOptions {
     rules?: Record<string, {
         enabled: boolean;
     }>;
+    ignoredRules?: string[];
 }
 declare module 'vitest' {
     interface Assertion {

package/test-setup.js

@@ -2,11 +2,19 @@ import * as axe from "axe-core";
 import { afterEach, expect } from "vitest";
 expect.extend({
   async toBeAccessible(received, options = {}) {
-    const { rules = {} } = options;
+    const { rules = {}, ignoredRules = [] } = options;
+    const disabledRules = ignoredRules.reduce(
+      (acc, ruleId) => {
+        acc[ruleId] = { enabled: false };
+        return acc;
+      },
+      {}
+    );
     const results = await axe.run(received, {
       rules: {
         // Disable color-contrast by default as it's often problematic in test environments
         "color-contrast": { enabled: false },
+        ...disabledRules,
         ...rules
       }
     });

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 = "-d5b7b0";
+const VER_SUFFIX = "-a567c2";
 class ScopedElementRegistry {
   static get instance() {
     if (!globalThis.__gdsElementLookupTable?.[VER_SUFFIX])