@sebgroup/green-core 3.22.0 → 3.23.0

package/components/button/button.component.js

@@ -28,7 +28,7 @@ import {
 import { GdsFormControlElement } from "../form/form-control.js";
 import ButtonStyles from "./button.styles.js";
 const ariaForwards = ["aria-label", "aria-haspopup", "aria-expanded"];
-const attributeForwards = [...ariaForwards, "gds-tabindex"];
+const attributeForwards = [...ariaForwards, "gds-tabindex", "gds-aria-selected"];
 const html = stripWhitespace(customElementHtml);
 let Button = class extends GdsFormControlElement {
   constructor() {

package/components/button/button.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  @layer _base, _ranks, _overrides;\n  :host {\n    display: inline-block;\n  }\n  @layer _base {\n    .button {\n      background-color: transparent;\n      border: 0;\n      cursor: pointer;\n      font-family: inherit;\n      padding: 0;\n      padding-left: 1rem;\n      padding-right: 1rem;\n      padding-bottom: 0.75rem;\n      padding-top: 0.75rem;\n      border-radius: 0.25rem;\n      border: solid 1px var(--gds-sys-color-base-600);\n      font-weight: 500;\n    }\n    .button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    .button:focus, .button:focus-visible {\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    .button {\n      min-height: 2.75rem;\n      align-items: center;\n      display: inline-flex;\n      justify-content: center;\n    }\n    @media (max-width: 35.98em) {\n      .button {\n        min-width: 100%;\n      }\n    }\n    @media screen and (-ms-high-contrast: active) {\n      .button {\n        border: 2px solid currentcolor;\n      }\n    }\n    .button.small {\n      min-height: 2rem;\n      height: 2rem;\n      padding: 0.4375rem 0.75rem;\n      font-size: 0.875rem;\n      line-height: 1rem;\n    }\n    .button.large {\n      min-height: 4rem;\n      padding: 1rem 1.5rem;\n      font-size: 1.5rem;\n      line-height: 2rem;\n    }\n    .button {\n      box-sizing: border-box;\n      font-size: inherit;\n      overflow: hidden;\n      display: flex;\n      gap: 0.5rem;\n      text-decoration: none;\n      width: 100%;\n    }\n    .button slot:not([name]) {\n      display: inline-block;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    :host(:not([variant=ghost])) .button {\n      transition: border var(--gds-sys-transition);\n    }\n    :host(:not([variant=ghost])) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background: var(--gds-sys-color-dark-blue-1);\n      color: var(--gds-sys-color-text-white);\n      --background: var(--gds-sys-color-dark-blue-1);\n      --color: var(--gds-sys-color-text-white);\n      border-color: var(--gds-sys-color-dark-blue-1);\n    }\n    :host(:not([variant=ghost])) .button[aria-selected=true], :host(:not([variant=ghost])) .button:active, :host(:not([variant=ghost])) .button.active, :host(:not([variant=ghost])) .button.active:hover, :host(:not([variant=ghost])) .button:active:hover {\n      background: var(--gds-sys-color-dark-blue-2);\n      color: var(--gds-sys-color-text-white);\n      --background: $bg;\n      --color: $color;\n      border-color: var(--gds-sys-color-dark-blue-2);\n    }\n    :host(:not([variant=ghost])) .button {\n      background: var(--gds-sys-color-dark-blue-2);\n      border-color: var(--gds-sys-color-dark-blue-2);\n      color: var(--gds-sys-color-text-white);\n      --color: var(--gds-sys-color-text-white);\n    }\n    :host(:not([variant=ghost])) .button:disabled, :host(:not([variant=ghost])) .button.disabled, :host(:not([variant=ghost])) .button[aria-disabled=true] {\n      background: var(--gds-sys-color-base-300) !important;\n      color: var(--gds-sys-color-text-disabled) !important;\n      border-color: var(--gds-sys-color-text-disabled) !important;\n      cursor: not-allowed;\n    }\n    :host(:not([variant=ghost])) .button:disabled::-moz-placeholder, :host(:not([variant=ghost])) .button.disabled::-moz-placeholder, :host(:not([variant=ghost])) .button[aria-disabled=true]::-moz-placeholder {\n      color: var(--gds-sys-color-text-disabled);\n    }\n    :host(:not([variant=ghost])) .button:disabled::placeholder, :host(:not([variant=ghost])) .button.disabled::placeholder, :host(:not([variant=ghost])) .button[aria-disabled=true]::placeholder {\n      color: var(--gds-sys-color-text-disabled);\n    }\n    :host([rank*=secondary]) .button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    :host([rank*=secondary]) .button:focus, :host([rank*=secondary]) .button:focus-visible {\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    :host([rank*=secondary]) .button {\n      transition: border var(--gds-sys-transition);\n    }\n    :host([rank*=secondary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background: var(--gds-sys-color-dark-blue-1);\n      color: var(--gds-sys-color-text-white);\n      --background: var(--gds-sys-color-dark-blue-1);\n      --color: var(--gds-sys-color-text-white);\n      border-color: var(--gds-sys-color-dark-blue-1);\n    }\n    :host([rank*=secondary]) .button[aria-selected=true], :host([rank*=secondary]) .button:active, :host([rank*=secondary]) .button.active, :host([rank*=secondary]) .button.active:hover, :host([rank*=secondary]) .button:active:hover {\n      background: var(--gds-sys-color-dark-blue-2);\n      color: var(--gds-sys-color-text-white);\n      --background: $bg;\n      --color: $color;\n      border-color: var(--gds-sys-color-dark-blue-2);\n    }\n    :host([rank*=secondary]) .button {\n      background: transparent;\n      border-color: var(--gds-sys-color-dark-blue-2);\n      color: var(--gds-sys-color-dark-blue-2);\n      --color: var(--gds-sys-color-dark-blue-2);\n    }\n    :host([rank*=secondary]) .button:disabled, :host([rank*=secondary]) .button.disabled, :host([rank*=secondary]) .button[aria-disabled=true] {\n      background: var(--gds-sys-color-base-300) !important;\n      color: var(--gds-sys-color-text-disabled) !important;\n      border-color: var(--gds-sys-color-text-disabled) !important;\n      cursor: not-allowed;\n    }\n    :host([rank*=secondary]) .button:disabled::-moz-placeholder, :host([rank*=secondary]) .button.disabled::-moz-placeholder, :host([rank*=secondary]) .button[aria-disabled=true]::-moz-placeholder {\n      color: var(--gds-sys-color-text-disabled);\n    }\n    :host([rank*=secondary]) .button:disabled::placeholder, :host([rank*=secondary]) .button.disabled::placeholder, :host([rank*=secondary]) .button[aria-disabled=true]::placeholder {\n      color: var(--gds-sys-color-text-disabled);\n    }\n    :host([rank*=tertiary]) .button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    :host([rank*=tertiary]) .button:focus, :host([rank*=tertiary]) .button:focus-visible {\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    :host([rank*=tertiary]) .button {\n      transition: border var(--gds-sys-transition);\n    }\n    :host([rank*=tertiary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background: var(--gds-sys-color-dark-blue-1);\n      color: var(--gds-sys-color-text-white);\n      --background: var(--gds-sys-color-dark-blue-1);\n      --color: var(--gds-sys-color-text-white);\n      border-color: var(--gds-sys-color-dark-blue-1);\n    }\n    :host([rank*=tertiary]) .button[aria-selected=true], :host([rank*=tertiary]) .button:active, :host([rank*=tertiary]) .button.active, :host([rank*=tertiary]) .button.active:hover, :host([rank*=tertiary]) .button:active:hover {\n      background: var(--gds-sys-color-dark-blue-2);\n      color: var(--gds-sys-color-text-white);\n      --background: $bg;\n      --color: $color;\n      border-color: var(--gds-sys-color-dark-blue-2);\n    }\n    :host([rank*=tertiary]) .button {\n      background: transparent;\n      border-color: transparent;\n      color: var(--gds-sys-color-dark-blue-2);\n      --color: var(--gds-sys-color-dark-blue-2);\n    }\n    :host([rank*=tertiary]) .button:disabled, :host([rank*=tertiary]) .button.disabled, :host([rank*=tertiary]) .button[aria-disabled=true] {\n      background: var(--gds-sys-color-base-300) !important;\n      color: var(--gds-sys-color-text-disabled) !important;\n      border-color: var(--gds-sys-color-text-disabled) !important;\n      cursor: not-allowed;\n    }\n    :host([rank*=tertiary]) .button:disabled::-moz-placeholder, :host([rank*=tertiary]) .button.disabled::-moz-placeholder, :host([rank*=tertiary]) .button[aria-disabled=true]::-moz-placeholder {\n      color: var(--gds-sys-color-text-disabled);\n    }\n    :host([rank*=tertiary]) .button:disabled::placeholder, :host([rank*=tertiary]) .button.disabled::placeholder, :host([rank*=tertiary]) .button[aria-disabled=true]::placeholder {\n      color: var(--gds-sys-color-text-disabled);\n    }\n    /* stylelint-disable */\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button,\n    :host([variant=negative][rank=primary]) .button {\n      background: var(--gds-sys-color-dark-red-1);\n      border-color: var(--gds-sys-color-dark-red-1);\n      color: var(--gds-sys-color-text-white);\n      --color: var(--gds-sys-color-text-white);\n      transition: border var(--gds-sys-transition);\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:not(:disabled, .disabled, [aria-disabled]):hover,\n    :host([variant=negative][rank=primary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background: var(--gds-sys-color-dark-red-1);\n      color: var(--gds-sys-color-text-white);\n      --background: var(--gds-sys-color-dark-red-1);\n      --color: var(--gds-sys-color-text-white);\n      border-color: var(--gds-sys-color-dark-red-1);\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-selected=true], :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:active, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.active, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.active:hover, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:active:hover,\n    :host([variant=negative][rank=primary]) .button[aria-selected=true],\n    :host([variant=negative][rank=primary]) .button:active,\n    :host([variant=negative][rank=primary]) .button.active,\n    :host([variant=negative][rank=primary]) .button.active:hover,\n    :host([variant=negative][rank=primary]) .button:active:hover {\n      background: var(--gds-sys-color-dark-red-1);\n      color: var(--gds-sys-color-text-white);\n      --background: $bg;\n      --color: $color;\n      border-color: var(--gds-sys-color-dark-red-1);\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-selected]:hover, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.active:hover, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:active:hover,\n    :host([variant=negative][rank=primary]) .button[aria-selected]:hover,\n    :host([variant=negative][rank=primary]) .button.active:hover,\n    :host([variant=negative][rank=primary]) .button:active:hover {\n      opacity: 0.9;\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:focus:not(:focus-visible),\n    :host([variant=negative][rank=primary]) .button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:focus, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:focus-visible,\n    :host([variant=negative][rank=primary]) .button:focus,\n    :host([variant=negative][rank=primary]) .button:focus-visible {\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    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:disabled, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.disabled, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-disabled=true],\n    :host([variant=negative][rank=primary]) .button:disabled,\n    :host([variant=negative][rank=primary]) .button.disabled,\n    :host([variant=negative][rank=primary]) .button[aria-disabled=true] {\n      background: var(--gds-sys-color-background-primary) !important;\n      color: var(--gds-sys-color-text-white) !important;\n      border-color: var(--gds-sys-color-dark-red-1) !important;\n      cursor: not-allowed;\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:disabled::-moz-placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.disabled::-moz-placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-disabled=true]::-moz-placeholder, :host([variant=negative][rank=primary]) .button:disabled::-moz-placeholder, :host([variant=negative][rank=primary]) .button.disabled::-moz-placeholder, :host([variant=negative][rank=primary]) .button[aria-disabled=true]::-moz-placeholder {\n      color: var(--gds-sys-color-text-disabled);\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:disabled::placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.disabled::placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-disabled=true]::placeholder,\n    :host([variant=negative][rank=primary]) .button:disabled::placeholder,\n    :host([variant=negative][rank=primary]) .button.disabled::placeholder,\n    :host([variant=negative][rank=primary]) .button[aria-disabled=true]::placeholder {\n      color: var(--gds-sys-color-text-disabled);\n    }\n    /* stylelint-enable */\n    :host([variant=negative][rank=secondary]) .button,\n    :host([variant=negative][rank=tertiary]) .button {\n      color: var(--gds-sys-color-dark-red-1);\n      --color: var(--gds-sys-color-dark-red-1);\n      border-color: transparent;\n      transition: border var(--gds-sys-transition);\n    }\n    :host([variant=negative][rank=secondary]) .button:not(:disabled, .disabled, [aria-disabled]):hover,\n    :host([variant=negative][rank=tertiary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background: var(--gds-sys-color-dark-red-1);\n      color: var(--gds-sys-color-text-white);\n      --background: var(--gds-sys-color-dark-red-1);\n      --color: var(--gds-sys-color-text-white);\n      border-color: var(--gds-sys-color-dark-red-1);\n    }\n    :host([variant=negative][rank=secondary]) .button[aria-selected=true], :host([variant=negative][rank=secondary]) .button:active, :host([variant=negative][rank=secondary]) .button.active, :host([variant=negative][rank=secondary]) .button.active:hover, :host([variant=negative][rank=secondary]) .button:active:hover,\n    :host([variant=negative][rank=tertiary]) .button[aria-selected=true],\n    :host([variant=negative][rank=tertiary]) .button:active,\n    :host([variant=negative][rank=tertiary]) .button.active,\n    :host([variant=negative][rank=tertiary]) .button.active:hover,\n    :host([variant=negative][rank=tertiary]) .button:active:hover {\n      background: var(--gds-sys-color-dark-red-1);\n      color: var(--gds-sys-color-text-white);\n      --background: $bg;\n      --color: $color;\n      border-color: var(--gds-sys-color-dark-red-1);\n    }\n    :host([variant=negative][rank=secondary]) .button[aria-selected]:hover, :host([variant=negative][rank=secondary]) .button.active:hover, :host([variant=negative][rank=secondary]) .button:active:hover,\n    :host([variant=negative][rank=tertiary]) .button[aria-selected]:hover,\n    :host([variant=negative][rank=tertiary]) .button.active:hover,\n    :host([variant=negative][rank=tertiary]) .button:active:hover {\n      opacity: 0.9;\n    }\n    :host([variant=negative][rank=secondary]) .button:focus:not(:focus-visible),\n    :host([variant=negative][rank=tertiary]) .button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    :host([variant=negative][rank=secondary]) .button:focus, :host([variant=negative][rank=secondary]) .button:focus-visible,\n    :host([variant=negative][rank=tertiary]) .button:focus,\n    :host([variant=negative][rank=tertiary]) .button:focus-visible {\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    :host([variant=negative][rank=secondary]) .button {\n      border-color: var(--gds-sys-color-dark-red-2);\n    }\n    :host([variant=ghost]) .button {\n      transition: border var(--gds-sys-transition);\n    }\n    :host([variant=ghost]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background: var(--gds-sys-color-base-800);\n      color: var(--gds-sys-color-text-white);\n      --background: var(--gds-sys-color-base-800);\n      --color: var(--gds-sys-color-text-white);\n      border-color: var(--gds-sys-color-base-800);\n    }\n    :host([variant=ghost]) .button[aria-selected=true], :host([variant=ghost]) .button:active, :host([variant=ghost]) .button.active, :host([variant=ghost]) .button.active:hover, :host([variant=ghost]) .button:active:hover {\n      background: var(--gds-sys-color-base-800);\n      color: var(--gds-sys-color-text-white);\n      --background: $bg;\n      --color: $color;\n      border-color: var(--gds-sys-color-base-800);\n    }\n    :host([variant=ghost]) .button[aria-selected]:hover, :host([variant=ghost]) .button.active:hover, :host([variant=ghost]) .button:active:hover {\n      opacity: 0.9;\n    }\n    :host([variant=ghost]) .button {\n      background-color: transparent;\n      border-color: var(--gds-sys-color-base-800);\n      color: var(--gds-sys-color-base-800);\n      --color: var(--gds-sys-color-base-800);\n    }\n    :host([variant=ghost]) .button:disabled, :host([variant=ghost]) .button.disabled, :host([variant=ghost]) .button[aria-disabled=true] {\n      color: var(--gds-sys-color-text-disabled) !important;\n      border-color: var(--gds-sys-color-text-disabled) !important;\n      cursor: not-allowed;\n    }\n    :host([variant=ghost]) .button:disabled::-moz-placeholder, :host([variant=ghost]) .button.disabled::-moz-placeholder, :host([variant=ghost]) .button[aria-disabled=true]::-moz-placeholder {\n      color: var(--gds-sys-color-text-disabled);\n    }\n    :host([variant=ghost]) .button:disabled::placeholder, :host([variant=ghost]) .button.disabled::placeholder, :host([variant=ghost]) .button[aria-disabled=true]::placeholder {\n      color: var(--gds-sys-color-text-disabled);\n    }\n  }\n  @layer _overrides {\n    :host .button.icon {\n      padding: 0.75rem;\n      background: transparent;\n      border-width: 0px;\n      color: currentColor;\n    }\n    :host .button.icon:hover {\n      color: currentColor;\n      background: var(--gds-sys-color-base-300);\n    }\n    :host .button.icon slot {\n      display: contents;\n    }\n    .button.icon.xs {\n      min-height: 1.5rem;\n      line-height: 0.75rem;\n      padding: 0.25rem;\n    }\n    .button.icon.small {\n      padding: 0.5rem;\n    }\n    .button.icon.large {\n      padding: 1rem;\n    }\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  @layer _base, _ranks, _overrides;\n  :host {\n    display: inline-block;\n  }\n  @layer _base {\n    .button {\n      background-color: transparent;\n      border: 0;\n      cursor: pointer;\n      font-family: inherit;\n      padding: 0;\n      padding-left: 1rem;\n      padding-right: 1rem;\n      padding-bottom: 0.75rem;\n      padding-top: 0.75rem;\n      border-radius: 0.25rem;\n      border: solid 1px var(--gds-sys-color-base-600);\n      font-weight: 500;\n    }\n    .button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    .button:focus, .button:focus-visible {\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    .button {\n      min-height: 2.75rem;\n      align-items: center;\n      display: inline-flex;\n      justify-content: center;\n    }\n    @media (max-width: 35.98em) {\n      .button {\n        min-width: 100%;\n      }\n    }\n    @media screen and (-ms-high-contrast: active) {\n      .button {\n        border: 2px solid currentcolor;\n      }\n    }\n    .button.small {\n      min-height: 2rem;\n      height: 2rem;\n      padding: 0.4375rem 0.75rem;\n      font-size: 0.875rem;\n      line-height: 1rem;\n    }\n    .button.large {\n      min-height: 4rem;\n      padding: 1rem 1.5rem;\n      font-size: 1.5rem;\n      line-height: 2rem;\n    }\n    .button {\n      box-sizing: border-box;\n      font-size: inherit;\n      overflow: hidden;\n      display: flex;\n      gap: 0.5rem;\n      text-decoration: none;\n      width: 100%;\n    }\n    .button slot:not([name]) {\n      display: inline-block;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    :host(:not([variant=ghost])) .button {\n      transition: border var(--gds-sys-transition);\n    }\n    :host(:not([variant=ghost])) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background: var(--gds-sys-color-dark-blue-1);\n      color: var(--gds-sys-color-text-white);\n      --background: var(--gds-sys-color-dark-blue-1);\n      --color: var(--gds-sys-color-text-white);\n      border-color: var(--gds-sys-color-dark-blue-1);\n    }\n    :host(:not([variant=ghost])) .button[aria-selected=true], :host(:not([variant=ghost])) .button:active, :host(:not([variant=ghost])) .button.active, :host(:not([variant=ghost])) .button.active:hover, :host(:not([variant=ghost])) .button:active:hover {\n      background: var(--gds-sys-color-dark-blue-2);\n      color: var(--gds-sys-color-text-white);\n      --background: $bg;\n      --color: $color;\n      border-color: var(--gds-sys-color-dark-blue-2);\n    }\n    :host(:not([variant=ghost])) .button {\n      background: var(--gds-sys-color-dark-blue-2);\n      border-color: var(--gds-sys-color-dark-blue-2);\n      color: var(--gds-sys-color-text-white);\n      --color: var(--gds-sys-color-text-white);\n    }\n    :host(:not([variant=ghost])) .button:disabled, :host(:not([variant=ghost])) .button.disabled, :host(:not([variant=ghost])) .button[aria-disabled=true] {\n      background: var(--gds-sys-color-base-300) !important;\n      color: var(--gds-sys-color-text-disabled) !important;\n      border-color: var(--gds-sys-color-text-disabled) !important;\n      cursor: not-allowed;\n    }\n    :host(:not([variant=ghost])) .button:disabled::-moz-placeholder, :host(:not([variant=ghost])) .button.disabled::-moz-placeholder, :host(:not([variant=ghost])) .button[aria-disabled=true]::-moz-placeholder {\n      color: var(--gds-sys-color-text-disabled);\n    }\n    :host(:not([variant=ghost])) .button:disabled::placeholder, :host(:not([variant=ghost])) .button.disabled::placeholder, :host(:not([variant=ghost])) .button[aria-disabled=true]::placeholder {\n      color: var(--gds-sys-color-text-disabled);\n    }\n    :host([rank*=secondary]) .button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    :host([rank*=secondary]) .button:focus, :host([rank*=secondary]) .button:focus-visible {\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    :host([rank*=secondary]) .button {\n      transition: border var(--gds-sys-transition);\n    }\n    :host([rank*=secondary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background: var(--gds-sys-color-dark-blue-1);\n      color: var(--gds-sys-color-text-white);\n      --background: var(--gds-sys-color-dark-blue-1);\n      --color: var(--gds-sys-color-text-white);\n      border-color: var(--gds-sys-color-dark-blue-1);\n    }\n    :host([rank*=secondary]) .button[aria-selected=true], :host([rank*=secondary]) .button:active, :host([rank*=secondary]) .button.active, :host([rank*=secondary]) .button.active:hover, :host([rank*=secondary]) .button:active:hover {\n      background: var(--gds-sys-color-dark-blue-2);\n      color: var(--gds-sys-color-text-white);\n      --background: $bg;\n      --color: $color;\n      border-color: var(--gds-sys-color-dark-blue-2);\n    }\n    :host([rank*=secondary]) .button {\n      background: transparent;\n      border-color: var(--gds-sys-color-dark-blue-2);\n      color: var(--gds-sys-color-dark-blue-2);\n      --color: var(--gds-sys-color-dark-blue-2);\n    }\n    :host([rank*=secondary]) .button:disabled, :host([rank*=secondary]) .button.disabled, :host([rank*=secondary]) .button[aria-disabled=true] {\n      background: var(--gds-sys-color-base-300) !important;\n      color: var(--gds-sys-color-text-disabled) !important;\n      border-color: var(--gds-sys-color-text-disabled) !important;\n      cursor: not-allowed;\n    }\n    :host([rank*=secondary]) .button:disabled::-moz-placeholder, :host([rank*=secondary]) .button.disabled::-moz-placeholder, :host([rank*=secondary]) .button[aria-disabled=true]::-moz-placeholder {\n      color: var(--gds-sys-color-text-disabled);\n    }\n    :host([rank*=secondary]) .button:disabled::placeholder, :host([rank*=secondary]) .button.disabled::placeholder, :host([rank*=secondary]) .button[aria-disabled=true]::placeholder {\n      color: var(--gds-sys-color-text-disabled);\n    }\n    :host([rank*=tertiary]) .button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    :host([rank*=tertiary]) .button:focus, :host([rank*=tertiary]) .button:focus-visible {\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    :host([rank*=tertiary]) .button {\n      transition: border var(--gds-sys-transition);\n    }\n    :host([rank*=tertiary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background: var(--gds-sys-color-dark-blue-1);\n      color: var(--gds-sys-color-text-white);\n      --background: var(--gds-sys-color-dark-blue-1);\n      --color: var(--gds-sys-color-text-white);\n      border-color: var(--gds-sys-color-dark-blue-1);\n    }\n    :host([rank*=tertiary]) .button[aria-selected=true], :host([rank*=tertiary]) .button:active, :host([rank*=tertiary]) .button.active, :host([rank*=tertiary]) .button.active:hover, :host([rank*=tertiary]) .button:active:hover {\n      background: var(--gds-sys-color-dark-blue-2);\n      color: var(--gds-sys-color-text-white);\n      --background: $bg;\n      --color: $color;\n      border-color: var(--gds-sys-color-dark-blue-2);\n    }\n    :host([rank*=tertiary]) .button {\n      background: transparent;\n      border-color: transparent;\n      color: var(--gds-sys-color-dark-blue-2);\n      --color: var(--gds-sys-color-dark-blue-2);\n    }\n    :host([rank*=tertiary]) .button:disabled, :host([rank*=tertiary]) .button.disabled, :host([rank*=tertiary]) .button[aria-disabled=true] {\n      background: var(--gds-sys-color-base-300) !important;\n      color: var(--gds-sys-color-text-disabled) !important;\n      border-color: var(--gds-sys-color-text-disabled) !important;\n      cursor: not-allowed;\n    }\n    :host([rank*=tertiary]) .button:disabled::-moz-placeholder, :host([rank*=tertiary]) .button.disabled::-moz-placeholder, :host([rank*=tertiary]) .button[aria-disabled=true]::-moz-placeholder {\n      color: var(--gds-sys-color-text-disabled);\n    }\n    :host([rank*=tertiary]) .button:disabled::placeholder, :host([rank*=tertiary]) .button.disabled::placeholder, :host([rank*=tertiary]) .button[aria-disabled=true]::placeholder {\n      color: var(--gds-sys-color-text-disabled);\n    }\n    /* stylelint-disable */\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button,\n    :host([variant=negative][rank=primary]) .button {\n      background: var(--gds-sys-color-dark-red-1);\n      border-color: var(--gds-sys-color-dark-red-1);\n      color: var(--gds-sys-color-text-white);\n      --color: var(--gds-sys-color-text-white);\n      transition: border var(--gds-sys-transition);\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:not(:disabled, .disabled, [aria-disabled]):hover,\n    :host([variant=negative][rank=primary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background: var(--gds-sys-color-dark-red-1);\n      color: var(--gds-sys-color-text-white);\n      --background: var(--gds-sys-color-dark-red-1);\n      --color: var(--gds-sys-color-text-white);\n      border-color: var(--gds-sys-color-dark-red-1);\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-selected=true], :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:active, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.active, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.active:hover, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:active:hover,\n    :host([variant=negative][rank=primary]) .button[aria-selected=true],\n    :host([variant=negative][rank=primary]) .button:active,\n    :host([variant=negative][rank=primary]) .button.active,\n    :host([variant=negative][rank=primary]) .button.active:hover,\n    :host([variant=negative][rank=primary]) .button:active:hover {\n      background: var(--gds-sys-color-dark-red-1);\n      color: var(--gds-sys-color-text-white);\n      --background: $bg;\n      --color: $color;\n      border-color: var(--gds-sys-color-dark-red-1);\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-selected]:hover, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.active:hover, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:active:hover,\n    :host([variant=negative][rank=primary]) .button[aria-selected]:hover,\n    :host([variant=negative][rank=primary]) .button.active:hover,\n    :host([variant=negative][rank=primary]) .button:active:hover {\n      opacity: 0.9;\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:focus:not(:focus-visible),\n    :host([variant=negative][rank=primary]) .button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:focus, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:focus-visible,\n    :host([variant=negative][rank=primary]) .button:focus,\n    :host([variant=negative][rank=primary]) .button:focus-visible {\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    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:disabled, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.disabled, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-disabled=true],\n    :host([variant=negative][rank=primary]) .button:disabled,\n    :host([variant=negative][rank=primary]) .button.disabled,\n    :host([variant=negative][rank=primary]) .button[aria-disabled=true] {\n      background: var(--gds-sys-color-background-primary) !important;\n      color: var(--gds-sys-color-text-white) !important;\n      border-color: var(--gds-sys-color-dark-red-1) !important;\n      cursor: not-allowed;\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:disabled::-moz-placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.disabled::-moz-placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-disabled=true]::-moz-placeholder, :host([variant=negative][rank=primary]) .button:disabled::-moz-placeholder, :host([variant=negative][rank=primary]) .button.disabled::-moz-placeholder, :host([variant=negative][rank=primary]) .button[aria-disabled=true]::-moz-placeholder {\n      color: var(--gds-sys-color-text-disabled);\n    }\n    :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button:disabled::placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button.disabled::placeholder, :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button[aria-disabled=true]::placeholder,\n    :host([variant=negative][rank=primary]) .button:disabled::placeholder,\n    :host([variant=negative][rank=primary]) .button.disabled::placeholder,\n    :host([variant=negative][rank=primary]) .button[aria-disabled=true]::placeholder {\n      color: var(--gds-sys-color-text-disabled);\n    }\n    /* stylelint-enable */\n    :host([variant=negative][rank=secondary]) .button,\n    :host([variant=negative][rank=tertiary]) .button {\n      color: var(--gds-sys-color-dark-red-1);\n      --color: var(--gds-sys-color-dark-red-1);\n      border-color: transparent;\n      transition: border var(--gds-sys-transition);\n    }\n    :host([variant=negative][rank=secondary]) .button:not(:disabled, .disabled, [aria-disabled]):hover,\n    :host([variant=negative][rank=tertiary]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background: var(--gds-sys-color-dark-red-1);\n      color: var(--gds-sys-color-text-white);\n      --background: var(--gds-sys-color-dark-red-1);\n      --color: var(--gds-sys-color-text-white);\n      border-color: var(--gds-sys-color-dark-red-1);\n    }\n    :host([variant=negative][rank=secondary]) .button[aria-selected=true], :host([variant=negative][rank=secondary]) .button:active, :host([variant=negative][rank=secondary]) .button.active, :host([variant=negative][rank=secondary]) .button.active:hover, :host([variant=negative][rank=secondary]) .button:active:hover,\n    :host([variant=negative][rank=tertiary]) .button[aria-selected=true],\n    :host([variant=negative][rank=tertiary]) .button:active,\n    :host([variant=negative][rank=tertiary]) .button.active,\n    :host([variant=negative][rank=tertiary]) .button.active:hover,\n    :host([variant=negative][rank=tertiary]) .button:active:hover {\n      background: var(--gds-sys-color-dark-red-1);\n      color: var(--gds-sys-color-text-white);\n      --background: $bg;\n      --color: $color;\n      border-color: var(--gds-sys-color-dark-red-1);\n    }\n    :host([variant=negative][rank=secondary]) .button[aria-selected]:hover, :host([variant=negative][rank=secondary]) .button.active:hover, :host([variant=negative][rank=secondary]) .button:active:hover,\n    :host([variant=negative][rank=tertiary]) .button[aria-selected]:hover,\n    :host([variant=negative][rank=tertiary]) .button.active:hover,\n    :host([variant=negative][rank=tertiary]) .button:active:hover {\n      opacity: 0.9;\n    }\n    :host([variant=negative][rank=secondary]) .button:focus:not(:focus-visible),\n    :host([variant=negative][rank=tertiary]) .button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    :host([variant=negative][rank=secondary]) .button:focus, :host([variant=negative][rank=secondary]) .button:focus-visible,\n    :host([variant=negative][rank=tertiary]) .button:focus,\n    :host([variant=negative][rank=tertiary]) .button:focus-visible {\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    :host([variant=negative][rank=secondary]) .button {\n      border-color: var(--gds-sys-color-dark-red-2);\n    }\n    :host([variant=ghost]) .button {\n      transition: border var(--gds-sys-transition);\n    }\n    :host([variant=ghost]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n      background: var(--gds-sys-color-base-800);\n      color: var(--gds-sys-color-text-white);\n      --background: var(--gds-sys-color-base-800);\n      --color: var(--gds-sys-color-text-white);\n      border-color: var(--gds-sys-color-base-800);\n    }\n    :host([variant=ghost]) .button[aria-selected=true], :host([variant=ghost]) .button:active, :host([variant=ghost]) .button.active, :host([variant=ghost]) .button.active:hover, :host([variant=ghost]) .button:active:hover {\n      background: var(--gds-sys-color-base-800);\n      color: var(--gds-sys-color-text-white);\n      --background: $bg;\n      --color: $color;\n      border-color: var(--gds-sys-color-base-800);\n    }\n    :host([variant=ghost]) .button[aria-selected]:hover, :host([variant=ghost]) .button.active:hover, :host([variant=ghost]) .button:active:hover {\n      opacity: 0.9;\n    }\n    :host([variant=ghost]) .button {\n      background-color: transparent;\n      border-color: var(--gds-sys-color-base-800);\n      color: var(--gds-sys-color-base-800);\n      --color: var(--gds-sys-color-base-800);\n    }\n    :host([variant=ghost]) .button:disabled, :host([variant=ghost]) .button.disabled, :host([variant=ghost]) .button[aria-disabled=true] {\n      color: var(--gds-sys-color-text-disabled) !important;\n      border-color: var(--gds-sys-color-text-disabled) !important;\n      cursor: not-allowed;\n    }\n    :host([variant=ghost]) .button:disabled::-moz-placeholder, :host([variant=ghost]) .button.disabled::-moz-placeholder, :host([variant=ghost]) .button[aria-disabled=true]::-moz-placeholder {\n      color: var(--gds-sys-color-text-disabled);\n    }\n    :host([variant=ghost]) .button:disabled::placeholder, :host([variant=ghost]) .button.disabled::placeholder, :host([variant=ghost]) .button[aria-disabled=true]::placeholder {\n      color: var(--gds-sys-color-text-disabled);\n    }\n  }\n  @layer _overrides {\n    :host .button.icon {\n      padding: 0.75rem;\n      background: transparent;\n      border-width: 0px;\n      color: currentColor;\n    }\n    :host .button.icon:hover {\n      color: currentColor;\n      background: var(--gds-sys-color-base-300);\n    }\n    :host .button.icon slot {\n      display: contents;\n    }\n    .button.icon.xs {\n      min-height: 1.5rem;\n      line-height: 0.75rem;\n      padding: 0.25rem;\n    }\n    .button.icon.small {\n      padding: 0.5rem;\n    }\n    .button.icon.large {\n      padding: 1rem;\n    }\n  }\n}";
 export default styles;

package/components/calendar/calendar.component.js

@@ -154,9 +154,7 @@ let GdsCalendar = class extends GdsElement {
           const shouldRenderBlank = this.hideExtraneousDays && isOutsideCurrentMonth;
           return shouldRenderBlank ? html`<td inert></td>` : html`
                           <td
-                            role="${ifDefined(
-            isDisabled ? void 0 : "gridcell"
-          )}"
+                            role="gridcell"
                             class="${classMap({
             small: Boolean(this.size === "small"),
             "custom-date": Boolean(customization),
@@ -165,6 +163,7 @@ let GdsCalendar = class extends GdsElement {
             "outside-month": isOutsideCurrentMonth
           })}"
                             ?disabled=${isDisabled}
+                            aria-disabled="${isDisabled ? "true" : "false"}"
                             tabindex="${isSameDay(this.focusedDate, day) ? 0 : -1}"
                             aria-selected="${this.value && isSameDay(this.value, day) ? "true" : "false"}"
                             aria-label="${this.dateLabelTemplate(day)}"

package/components/calendar/calendar.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/* medium */\n/* regular */\n/* regular */\n/* regular */\n/* hover */\n/* focus */\n/* selected */\n/* highlighted */\n/* active */\n/* disabled */\n/* today */\n/* weekend */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  @layer _base {\n    :host {\n      display: flex;\n      justify-content: center;\n    }\n    @media (max-width: 35.98em) {\n      :host {\n        flex-wrap: wrap;\n        overflow-y: auto;\n      }\n    }\n    :host table {\n      border-spacing: 0;\n    }\n    :host th,\n    :host td {\n      box-sizing: border-box;\n      height: 2.75rem;\n      text-align: center;\n      width: 2.75rem;\n    }\n    :host thead {\n      /* days */\n    }\n    :host thead th {\n      background: var(--gds-sys-color-background-primary);\n      border-bottom: solid 1px var(--gds-sys-color-base-300);\n      font-weight: 400;\n      top: 0;\n    }\n    @media (max-width: 35.98em) {\n      :host thead th {\n        position: sticky;\n      }\n    }\n    :host tbody {\n      /* week numbers */\n    }\n    :host tbody th {\n      font-weight: 400;\n    }\n    :host tbody {\n      /* dates */\n    }\n    :host tbody td {\n      border: solid 1px transparent;\n      font-weight: 500;\n      -webkit-user-select: none;\n         -moz-user-select: none;\n              user-select: none;\n      /* weekend */\n    }\n    :host tbody td.sg-date-holiday:not(.disabled) {\n      background: var(--gds-sys-color-background-primary);\n      color: var(--gds-sys-color-text-error);\n    }\n    :host tbody td {\n      /* today */\n    }\n    :host tbody td.today {\n      background: transparent;\n      border-radius: 4px;\n      box-shadow: inset 0 0 0 2px var(--gds-sys-color-base-800);\n      color: var(--gds-sys-color-base-800);\n    }\n    :host tbody td {\n      /* hover */\n    }\n    :host tbody td:hover:not(.disabled) {\n      background: var(--gds-sys-color-base-300);\n      border: solid 1px var(--gds-sys-color-background-primary);\n      border-radius: 4px;\n      color: var(--gds-sys-color-text-primary);\n      cursor: pointer;\n    }\n    :host tbody td {\n      /* focus */\n    }\n    :host tbody td:focus-visible:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    :host tbody td:focus-visible:focus, :host tbody td:focus-visible:focus-visible {\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    :host tbody td:focus-visible:not(.disabled) {\n      border: solid 1px var(--gds-sys-color-background-primary);\n      border-radius: 4px;\n      cursor: pointer;\n      position: relative;\n      z-index: 0;\n    }\n    :host tbody td {\n      /* selected */\n    }\n    :host tbody td[aria-selected=true] {\n      background: var(--gds-sys-color-base-800);\n      border: solid 1px var(--gds-sys-color-background-primary);\n      border-radius: 4px;\n      color: var(--gds-sys-color-text-inverted);\n    }\n    :host tbody td {\n      /* highlighted */\n    }\n    :host tbody td[tabindex=\"0\"] {\n      border-radius: 4px;\n    }\n    :host tbody td {\n      /* active (pressed) */\n    }\n    :host tbody td:hover:active:not(.disabled) {\n      background: var(--gds-sys-color-base-800);\n      border: solid 1px var(--gds-sys-color-background-primary);\n      border-radius: 4px;\n      color: var(--gds-sys-color-text-inverted);\n    }\n    :host tbody td {\n      /* disabled */\n    }\n    :host tbody td.disabled {\n      background: var(--gds-sys-color-base-200);\n      border: solid 1px var(--gds-sys-color-background-primary);\n      border-radius: 4px;\n      color: var(--gds-sys-color-text-disabled);\n      cursor: not-allowed;\n      font-weight: 400;\n    }\n    :host tbody td.disabled.sg-date-holiday {\n      color: var(--gds-sys-color-text-error);\n    }\n    :host tbody td.disabled .number,\n    :host tbody td.disabled .indicator-dot {\n      --_color: var(--gds-sys-color-text-disabled) !important;\n    }\n    :host tbody td.custom-date {\n      position: relative;\n    }\n    :host tbody .number {\n      color: var(--_color, \"currentColor\");\n    }\n    :host tbody .indicator-dot {\n      display: block;\n      width: 0.375rem;\n      height: 0.375rem;\n      top: 1.5rem;\n      border-radius: 50%;\n      margin: auto;\n      position: absolute;\n      inset-block-end: 0.125rem;\n      inset-inline: 0;\n      background-color: var(--_color);\n    }\n    :host table {\n      flex-grow: 1;\n      width: 100%;\n    }\n    :host table td {\n      width: 3rem;\n      height: 3rem;\n    }\n  }\n  @layer _modifiers {\n    .week-number {\n      border-right: solid 1px var(--gds-sys-color-base-300);\n      font-weight: 400;\n      pointer-events: none;\n    }\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/* medium */\n/* regular */\n/* regular */\n/* regular */\n/* hover */\n/* focus */\n/* selected */\n/* highlighted */\n/* active */\n/* disabled */\n/* today */\n/* weekend */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  @layer _base {\n    :host {\n      display: flex;\n      justify-content: center;\n    }\n    @media (max-width: 35.98em) {\n      :host {\n        flex-wrap: wrap;\n        overflow-y: auto;\n      }\n    }\n    :host table {\n      border-spacing: 0;\n    }\n    :host th,\n    :host td {\n      box-sizing: border-box;\n      height: 2.75rem;\n      text-align: center;\n      width: 2.75rem;\n    }\n    :host thead {\n      /* days */\n    }\n    :host thead th {\n      background: var(--gds-sys-color-background-primary);\n      border-bottom: solid 1px var(--gds-sys-color-base-300);\n      font-weight: 400;\n      top: 0;\n    }\n    @media (max-width: 35.98em) {\n      :host thead th {\n        position: sticky;\n      }\n    }\n    :host tbody {\n      /* week numbers */\n    }\n    :host tbody th {\n      font-weight: 400;\n    }\n    :host tbody {\n      /* dates */\n    }\n    :host tbody td {\n      border: solid 1px transparent;\n      font-weight: 500;\n      -webkit-user-select: none;\n         -moz-user-select: none;\n              user-select: none;\n      /* weekend */\n    }\n    :host tbody td.sg-date-holiday:not(.disabled) {\n      background: var(--gds-sys-color-background-primary);\n      color: var(--gds-sys-color-text-error);\n    }\n    :host tbody td {\n      /* today */\n    }\n    :host tbody td.today {\n      background: transparent;\n      border-radius: 4px;\n      box-shadow: inset 0 0 0 2px var(--gds-sys-color-base-800);\n      color: var(--gds-sys-color-base-800);\n    }\n    :host tbody td {\n      /* hover */\n    }\n    :host tbody td:hover:not(.disabled) {\n      background: var(--gds-sys-color-base-300);\n      border: solid 1px var(--gds-sys-color-background-primary);\n      border-radius: 4px;\n      color: var(--gds-sys-color-text-primary);\n      cursor: pointer;\n    }\n    :host tbody td {\n      /* focus */\n    }\n    :host tbody td:focus-visible:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    :host tbody td:focus-visible:focus, :host tbody td:focus-visible:focus-visible {\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    :host tbody td:focus-visible:not(.disabled) {\n      border: solid 1px var(--gds-sys-color-background-primary);\n      border-radius: 4px;\n      cursor: pointer;\n      position: relative;\n      z-index: 0;\n    }\n    :host tbody td {\n      /* selected */\n    }\n    :host tbody td[aria-selected=true] {\n      background: var(--gds-sys-color-base-800);\n      border: solid 1px var(--gds-sys-color-background-primary);\n      border-radius: 4px;\n      color: var(--gds-sys-color-text-inverted);\n    }\n    :host tbody td {\n      /* highlighted */\n    }\n    :host tbody td[tabindex=\"0\"] {\n      border-radius: 4px;\n    }\n    :host tbody td {\n      /* active (pressed) */\n    }\n    :host tbody td:hover:active:not(.disabled) {\n      background: var(--gds-sys-color-base-800);\n      border: solid 1px var(--gds-sys-color-background-primary);\n      border-radius: 4px;\n      color: var(--gds-sys-color-text-inverted);\n    }\n    :host tbody td {\n      /* disabled */\n    }\n    :host tbody td.disabled {\n      background: var(--gds-sys-color-base-200);\n      border: solid 1px var(--gds-sys-color-background-primary);\n      border-radius: 4px;\n      color: var(--gds-sys-color-text-disabled);\n      cursor: not-allowed;\n      font-weight: 400;\n    }\n    :host tbody td.disabled.sg-date-holiday {\n      color: var(--gds-sys-color-text-error);\n    }\n    :host tbody td.disabled .number,\n    :host tbody td.disabled .indicator-dot {\n      --_color: var(--gds-sys-color-text-disabled) !important;\n    }\n    :host tbody td.custom-date {\n      position: relative;\n    }\n    :host tbody .number {\n      color: var(--_color, \"currentColor\");\n    }\n    :host tbody .indicator-dot {\n      display: block;\n      width: 0.375rem;\n      height: 0.375rem;\n      top: 1.5rem;\n      border-radius: 50%;\n      margin: auto;\n      position: absolute;\n      inset-block-end: 0.125rem;\n      inset-inline: 0;\n      background-color: var(--_color);\n    }\n    :host table {\n      flex-grow: 1;\n      width: 100%;\n    }\n    :host table td {\n      width: 3rem;\n      height: 3rem;\n    }\n  }\n  @layer _modifiers {\n    .week-number {\n      border-right: solid 1px var(--gds-sys-color-base-300);\n      font-weight: 400;\n      pointer-events: none;\n    }\n  }\n}";
 export default styles;

package/components/context-menu/context-menu.component.d.ts

@@ -43,6 +43,14 @@ export declare class GdsContextMenu extends GdsContextMenu_base {
      * The placement of the popover relative to the trigger.
      */
     placement: Placement;
+    /**
+     * Whether the context menu popover is nonmodal. When true, the popover will not trap focus,
+     * and other elements on the page (including other context menu triggers) will still be
+     * interactable while the menu is open. Enable this when rendering multiple `gds-context-menu`
+     * instances in the same view, so that clicking one trigger while another menu is open closes
+     * the first and opens the second in a single click.
+     */
+    nonmodal: boolean;
     private _elTriggerSlot;
     connectedCallback(): void;
     render(): any;

package/components/context-menu/context-menu.component.js

@@ -45,6 +45,7 @@ let GdsContextMenu = class extends withMarginProps(
     this.label = "";
     this.maxHeight = 500;
     this.placement = "bottom-start";
+    this.nonmodal = false;
     __privateAdd(this, _elTriggerBtn, void 0);
     __privateAdd(this, _setupButton, () => {
       if (!__privateGet(this, _elTriggerBtn))
@@ -84,6 +85,7 @@ let GdsContextMenu = class extends withMarginProps(
       .placement=${this.placement}
       .popupRole=${"menu"}
       .calcMaxHeight=${__privateGet(this, _calcMaxHeight)}
+      .nonmodal=${this.nonmodal}
       @gds-ui-state=${(e) => this.open = e.detail.open}
     >
       <gds-menu
@@ -172,6 +174,9 @@ __decorateClass([
 __decorateClass([
   property()
 ], GdsContextMenu.prototype, "placement", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], GdsContextMenu.prototype, "nonmodal", 2);
 __decorateClass([
   query('slot[name="trigger"]')
 ], GdsContextMenu.prototype, "_elTriggerSlot", 2);

package/components/context-menu/context-menu.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  @layer _base, _overrides;\n  :host {\n    display: inline-block;\n  }\n  @layer _base {\n    button {\n      background-color: transparent;\n      border: 0;\n      cursor: pointer;\n      font-family: inherit;\n      padding: 0;\n      padding-left: 1rem;\n      padding-right: 1rem;\n      padding-bottom: 0.75rem;\n      padding-top: 0.75rem;\n      border-radius: 0.25rem;\n      border: solid 1px var(--gds-sys-color-base-600);\n      font-weight: 500;\n    }\n    button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    button:focus, button:focus-visible {\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    button {\n      min-height: 2.75rem;\n      align-items: center;\n      display: inline-flex;\n      justify-content: center;\n    }\n    @media (max-width: 35.98em) {\n      button {\n        min-width: 100%;\n      }\n    }\n    @media screen and (-ms-high-contrast: active) {\n      button {\n        border: 2px solid currentcolor;\n      }\n    }\n    button.small {\n      min-height: 2rem;\n      height: 2rem;\n      padding: 0.4375rem 0.75rem;\n      font-size: 0.875rem;\n      line-height: 1rem;\n    }\n    button.large {\n      min-height: 4rem;\n      padding: 1rem 1.5rem;\n      font-size: 1.5rem;\n      line-height: 2rem;\n    }\n    button {\n      background-color: transparent;\n      border: 0.0625rem solid transparent;\n      padding: 0.625rem;\n      height: 2.75rem;\n      width: 2.75rem;\n      min-width: auto;\n      --color: var(--gds-sys-color-base-800);\n    }\n    .gds-form-group button {\n      margin-top: -0.625rem;\n    }\n    button.small {\n      height: 2rem;\n      width: 2rem;\n      padding: 0.4375rem;\n      line-height: 1.125rem;\n    }\n    button svg {\n      height: 1rem;\n      width: 1rem;\n    }\n    button path,\n    button line,\n    button circle,\n    button rect,\n    button ellipse,\n    button polyline,\n    button text {\n      fill: var(--gds-sys-color-base-800);\n      stroke: var(--gds-sys-color-base-800);\n      transition: all var(--gds-sys-transition);\n    }\n    button:hover, button.highlighted {\n      background-color: rgba(0, 0, 0, 0.1);\n      border-color: transparent;\n    }\n    button:active, button.highlighted:hover {\n      background-color: rgba(0, 0, 0, 0.2);\n      border-color: transparent;\n    }\n  }\n  @layer _overrides {\n    button {\n      border-color: transparent;\n      color: var(--gds-sys-color-base-800);\n      display: flex;\n      gap: 0.5rem;\n      line-height: 0.75;\n      padding-inline: 0.4375rem;\n      width: auto;\n    }\n    button.highlighted {\n      background-color: var(--gds-sys-color-base-300);\n    }\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  @layer _base, _overrides;\n  :host {\n    display: inline-block;\n  }\n  @layer _base {\n    button {\n      background-color: transparent;\n      border: 0;\n      cursor: pointer;\n      font-family: inherit;\n      padding: 0;\n      padding-left: 1rem;\n      padding-right: 1rem;\n      padding-bottom: 0.75rem;\n      padding-top: 0.75rem;\n      border-radius: 0.25rem;\n      border: solid 1px var(--gds-sys-color-base-600);\n      font-weight: 500;\n    }\n    button:focus:not(:focus-visible) {\n      box-shadow: none;\n      outline: 0;\n    }\n    button:focus, button:focus-visible {\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    button {\n      min-height: 2.75rem;\n      align-items: center;\n      display: inline-flex;\n      justify-content: center;\n    }\n    @media (max-width: 35.98em) {\n      button {\n        min-width: 100%;\n      }\n    }\n    @media screen and (-ms-high-contrast: active) {\n      button {\n        border: 2px solid currentcolor;\n      }\n    }\n    button.small {\n      min-height: 2rem;\n      height: 2rem;\n      padding: 0.4375rem 0.75rem;\n      font-size: 0.875rem;\n      line-height: 1rem;\n    }\n    button.large {\n      min-height: 4rem;\n      padding: 1rem 1.5rem;\n      font-size: 1.5rem;\n      line-height: 2rem;\n    }\n    button {\n      background-color: transparent;\n      border: 0.0625rem solid transparent;\n      padding: 0.625rem;\n      height: 2.75rem;\n      width: 2.75rem;\n      min-width: auto;\n      --color: var(--gds-sys-color-base-800);\n    }\n    .gds-form-group button {\n      margin-top: -0.625rem;\n    }\n    button.small {\n      height: 2rem;\n      width: 2rem;\n      padding: 0.4375rem;\n      line-height: 1.125rem;\n    }\n    button svg {\n      height: 1rem;\n      width: 1rem;\n    }\n    button path,\n    button line,\n    button circle,\n    button rect,\n    button ellipse,\n    button polyline,\n    button text {\n      fill: var(--gds-sys-color-base-800);\n      stroke: var(--gds-sys-color-base-800);\n      transition: all var(--gds-sys-transition);\n    }\n    button:hover, button.highlighted {\n      background-color: rgba(0, 0, 0, 0.1);\n      border-color: transparent;\n    }\n    button:active, button.highlighted:hover {\n      background-color: rgba(0, 0, 0, 0.2);\n      border-color: transparent;\n    }\n  }\n  @layer _overrides {\n    button {\n      border-color: transparent;\n      color: var(--gds-sys-color-base-800);\n      display: flex;\n      gap: 0.5rem;\n      line-height: 0.75;\n      padding-inline: 0.4375rem;\n      width: auto;\n    }\n    button.highlighted {\n      background-color: var(--gds-sys-color-base-300);\n    }\n  }\n}";
 export default styles;

package/components/datepicker/datepicker.component.d.ts

@@ -121,6 +121,7 @@ declare class Datepicker extends GdsFormControlElement<Date> {
     private _focusedYear;
     private _dateFormatLayout;
     private _outOfRangeAction?;
+    private _currentLocale;
     private _elCalendar;
     private _elTrigger;
     private _elFieldAsync;

package/components/datepicker/datepicker.component.js

@@ -5,7 +5,7 @@ import {
   __privateMethod,
   __privateSet
 } from "../../chunks/chunk.CAV4X6PU.js";
-var _utcHours, _valueOnOpen, _shouldShowFooter, shouldShowFooter_fn, _renderBackToValidRangeButton, renderBackToValidRangeButton_fn, _updateOutOfRangeAction, updateOutOfRangeAction_fn, _normalizeDate, normalizeDate_fn, _focusDate, focusDate_fn, _shouldShowTodayButton, shouldShowTodayButton_fn, _getSpinnerLabel, getSpinnerLabel_fn, _getMinSpinnerValue, getMinSpinnerValue_fn, _getMaxSpinnerValue, getMaxSpinnerValue_fn, _dispatchChangeEvent, dispatchChangeEvent_fn, _dispatchInputEvent, dispatchInputEvent_fn, _handleSpinnerFocus, _handleClipboardCopy, _handleClipboardPaste, _handleFieldClick, _handleCalendarChange, _handleMonthChange, _handleYearChange, _handleIncrementFocusedMonth, _handleDecrementFocusedMonth, _handleCalendarFocusChange, _handlePopoverStateChange, _handleSpinnerKeydown, _parseDateFormat, parseDateFormat_fn, _handleSpinnerChange, _spinnerState, _years, years_get, _isValueOutsideRange, isValueOutsideRange_get;
+var _utcHours, _valueOnOpen, _shouldShowFooter, shouldShowFooter_fn, _renderBackToValidRangeButton, renderBackToValidRangeButton_fn, _updateOutOfRangeAction, updateOutOfRangeAction_fn, _normalizeDate, normalizeDate_fn, _focusDate, focusDate_fn, _shouldShowTodayButton, shouldShowTodayButton_fn, _getSpinnerLabel, getSpinnerLabel_fn, _getMinSpinnerValue, getMinSpinnerValue_fn, _getMaxSpinnerValue, getMaxSpinnerValue_fn, _getLocalizedPlaceholder, getLocalizedPlaceholder_fn, _getSpinnerValue, getSpinnerValue_fn, _dispatchChangeEvent, dispatchChangeEvent_fn, _dispatchInputEvent, dispatchInputEvent_fn, _handleSpinnerFocus, _handleClipboardCopy, _handleClipboardPaste, _handleFieldClick, _handleCalendarChange, _handleMonthChange, _handleYearChange, _handleIncrementFocusedMonth, _handleDecrementFocusedMonth, _handleCalendarFocusChange, _handlePopoverStateChange, _handleSpinnerKeydown, _parseDateFormat, parseDateFormat_fn, _handleSpinnerChange, _spinnerState, _years, years_get, _isValueOutsideRange, isValueOutsideRange_get;
 import { localized, msg } from "@lit/localize";
 import { nothing } from "lit";
 import { property, query, queryAll, queryAsync, state } from "lit/decorators.js";
@@ -57,6 +57,8 @@ let Datepicker = class extends GdsFormControlElement {
     __privateAdd(this, _getSpinnerLabel);
     __privateAdd(this, _getMinSpinnerValue);
     __privateAdd(this, _getMaxSpinnerValue);
+    __privateAdd(this, _getLocalizedPlaceholder);
+    __privateAdd(this, _getSpinnerValue);
     __privateAdd(this, _dispatchChangeEvent);
     __privateAdd(this, _dispatchInputEvent);
     /**
@@ -84,6 +86,7 @@ let Datepicker = class extends GdsFormControlElement {
     this._focusedMonth = (/* @__PURE__ */ new Date()).getMonth();
     this._focusedYear = (/* @__PURE__ */ new Date()).getFullYear();
     this._dateFormatLayout = __privateMethod(this, _parseDateFormat, parseDateFormat_fn).call(this, "y-m-d");
+    this._currentLocale = navigator.language;
     __privateAdd(this, _valueOnOpen, void 0);
     __privateAdd(this, _handleSpinnerFocus, (e) => {
       this._elTrigger.then((field) => {
@@ -292,6 +295,19 @@ let Datepicker = class extends GdsFormControlElement {
   connectedCallback() {
     super.connectedCallback();
     TransitionalStyles.instance.apply(this, "gds-datepicker");
+    window.addEventListener("lit-localize-status", (e) => {
+      if (e.detail.status === "ready") {
+        this._currentLocale = e.detail.readyLocale;
+        if (!this.value) {
+          __privateSet(this, _spinnerState, {
+            year: __privateMethod(this, _getLocalizedPlaceholder, getLocalizedPlaceholder_fn).call(this, "year"),
+            month: __privateMethod(this, _getLocalizedPlaceholder, getLocalizedPlaceholder_fn).call(this, "month"),
+            day: __privateMethod(this, _getLocalizedPlaceholder, getLocalizedPlaceholder_fn).call(this, "day")
+          });
+        }
+        this.requestUpdate();
+      }
+    });
   }
   focus(options) {
     this._getValidityAnchor()?.focus(options);
@@ -342,7 +358,7 @@ let Datepicker = class extends GdsFormControlElement {
                   aria-invalid="${this.invalid}"
                   class="spinner"
                   .length=${f.token === "y" ? 4 : 2}
-                  .value=${__privateGet(this, _spinnerState)[f.name]}
+                  .value=${__privateMethod(this, _getSpinnerValue, getSpinnerValue_fn).call(this, f.name)}
                   aria-valuemin=${__privateMethod(this, _getMinSpinnerValue, getMinSpinnerValue_fn).call(this, f.name)}
                   aria-valuemax=${__privateMethod(this, _getMaxSpinnerValue, getMaxSpinnerValue_fn).call(this, f.name)}
                   aria-label=${__privateMethod(this, _getSpinnerLabel, getSpinnerLabel_fn).call(this, f.name)}
@@ -558,9 +574,9 @@ let Datepicker = class extends GdsFormControlElement {
       this.value = void 0;
     if (!this.value) {
       __privateSet(this, _spinnerState, {
-        year: "yyyy",
-        month: "mm",
-        day: "dd"
+        year: __privateMethod(this, _getLocalizedPlaceholder, getLocalizedPlaceholder_fn).call(this, "year"),
+        month: __privateMethod(this, _getLocalizedPlaceholder, getLocalizedPlaceholder_fn).call(this, "month"),
+        day: __privateMethod(this, _getLocalizedPlaceholder, getLocalizedPlaceholder_fn).call(this, "day")
       });
       return;
     }
@@ -665,6 +681,22 @@ getMaxSpinnerValue_fn = function(name) {
   };
   return max[name];
 };
+_getLocalizedPlaceholder = new WeakSet();
+getLocalizedPlaceholder_fn = function(name) {
+  const placeholders = {
+    year: msg("yyyy"),
+    month: msg("mm"),
+    day: msg("dd")
+  };
+  return placeholders[name];
+};
+_getSpinnerValue = new WeakSet();
+getSpinnerValue_fn = function(name) {
+  if (!this.value) {
+    return __privateMethod(this, _getLocalizedPlaceholder, getLocalizedPlaceholder_fn).call(this, name);
+  }
+  return __privateGet(this, _spinnerState)[name];
+};
 _dispatchChangeEvent = new WeakSet();
 dispatchChangeEvent_fn = function() {
   this.updateComplete.then(
@@ -811,6 +843,9 @@ __decorateClass([
 __decorateClass([
   state()
 ], Datepicker.prototype, "_outOfRangeAction", 2);
+__decorateClass([
+  state()
+], Datepicker.prototype, "_currentLocale", 2);
 __decorateClass([
   queryAsync("#calendar")
 ], Datepicker.prototype, "_elCalendar", 2);

package/components/dropdown/dropdown.component.js

@@ -5,7 +5,7 @@ import {
   __privateMethod,
   __privateSet
 } from "../../chunks/chunk.CAV4X6PU.js";
-var _optionElements, _shouldShowFooter, shouldShowFooter_fn, _renderCombobox, _renderTriggerButton, _handleBlur, _calcMaxHeight, _dispatchUISateEvent, _handlePopoverStateChange, _handleClearButton, _handleSearchFieldInput, _handleSearchFieldKeyDown, _handleListboxKeyDown, _handleOptionFocusChange, _handleOptionSelect, _toggleOptionValue, toggleOptionValue_fn, _syncOptionSelection, syncOptionSelection_fn, _focusListbox, _isCommitting, _commitSelection, commitSelection_fn, _registerAutoCloseListener, registerAutoCloseListener_fn, _unregisterAutoCloseListener, unregisterAutoCloseListener_fn, _blurCloseListener, _tabCloseListener;
+var _optionElements, _shouldShowFooter, shouldShowFooter_fn, _renderCombobox, _renderTriggerButton, _handleBlur, _calcMaxHeight, _dispatchUISateEvent, _handlePopoverStateChange, _handleClearButton, _handleSearchFieldInput, _handleSearchFieldKeyDown, _handleListboxKeyDown, _handleOptionFocusChange, _handleOptionSelect, _toggleOptionValue, toggleOptionValue_fn, _syncOptionSelection, syncOptionSelection_fn, _focusListbox, _isPointerPressedInListbox, _handleListboxPointerDown, _handleListboxFocus, _isCommitting, _commitSelection, commitSelection_fn, _registerAutoCloseListener, registerAutoCloseListener_fn, _unregisterAutoCloseListener, unregisterAutoCloseListener_fn, _blurCloseListener, _tabCloseListener;
 import { localized, msg, str } from "@lit/localize";
 import { nothing } from "lit";
 import { property, query } from "lit/decorators.js";
@@ -258,6 +258,25 @@ let Dropdown = class extends GdsFormControlElement {
         (items.find((o) => o.selected) || items[0])?.focus();
       });
     });
+    __privateAdd(this, _isPointerPressedInListbox, false);
+    __privateAdd(this, _handleListboxPointerDown, () => {
+      __privateSet(this, _isPointerPressedInListbox, true);
+      window.addEventListener(
+        "pointerup",
+        () => __privateSet(this, _isPointerPressedInListbox, false),
+        { once: true }
+      );
+    });
+    /**
+     * A pointer press moves focus to the listbox container when it lands somewhere that is not an
+     * option. Handing that focus on to the selected option would scroll the list out from under the
+     * pointer, so the redirect is limited to programmatic focus.
+     */
+    __privateAdd(this, _handleListboxFocus, () => {
+      if (__privateGet(this, _isPointerPressedInListbox))
+        return;
+      __privateGet(this, _focusListbox).call(this);
+    });
     __privateAdd(this, _isCommitting, false);
     /**
      * A listener to close the dropdown when any other element is focused.
@@ -454,7 +473,8 @@ let Dropdown = class extends GdsFormControlElement {
           role="listbox"
           aria-multiselectable="${this.multiple}"
           tabindex="-1"
-          @focus="${__privateGet(this, _focusListbox)}"
+          @focus="${__privateGet(this, _handleListboxFocus)}"
+          @pointerdown="${__privateGet(this, _handleListboxPointerDown)}"
           @gds-select="${__privateGet(this, _handleOptionSelect)}"
           @gds-focus="${__privateGet(this, _handleOptionFocusChange)}"
           @keydown=${__privateGet(this, _handleListboxKeyDown)}
@@ -572,6 +592,9 @@ syncOptionSelection_fn = function() {
   });
 };
 _focusListbox = new WeakMap();
+_isPointerPressedInListbox = new WeakMap();
+_handleListboxPointerDown = new WeakMap();
+_handleListboxFocus = new WeakMap();
 _isCommitting = new WeakMap();
 _commitSelection = new WeakSet();
 commitSelection_fn = function(value, options = {}) {

package/components/dropdown/option.component.js

@@ -44,6 +44,7 @@ let GdsOption = class extends Focusable(GdsElement) {
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute("role", "option");
+    this.setAttribute("tabindex", "-1");
     this.updateComplete.then(() => {
       if (this.isPlaceholder) {
         this.hidden = true;

package/components/filter-chips/filter-chip/filter-chip.component.d.ts

@@ -6,6 +6,10 @@ import { GdsElement } from '../../../gds-element';
  */
 export declare class GdsFilterChip<ValueT = any> extends GdsElement {
     static styles: import("lit").CSSResult[];
+    /**
+     * @internal
+     */
+    static shadowRootOptions: ShadowRootInit;
     /**
      * Whether the chip is selected
      */

package/components/filter-chips/filter-chip/filter-chip.component.js

@@ -46,6 +46,13 @@ let GdsFilterChip = class extends GdsElement {
   }
 };
 GdsFilterChip.styles = [styles];
+/**
+ * @internal
+ */
+GdsFilterChip.shadowRootOptions = {
+  mode: "open",
+  delegatesFocus: true
+};
 __decorateClass([
   property({ reflect: true, type: Boolean })
 ], GdsFilterChip.prototype, "selected", 2);

package/components/filter-chips/filter-chips.component.js

@@ -5,7 +5,7 @@ import {
   __privateMethod,
   __privateSet
 } from "../../chunks/chunk.CAV4X6PU.js";
-var _handleChipClick, _collapseThreshold, _collapsedAt, _getChipHeight, getChipHeight_fn, _handleSlotChange, handleSlotChange_fn;
+var _handleKeyDown, _setRovingTabIndex, _handleChipClick, _collapseThreshold, _collapsedAt, _getChipHeight, getChipHeight_fn, _handleSlotChange, handleSlotChange_fn, _initializeRovingTabIndex;
 import { property, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ariaForwarding } from "../../utils/decorators/aria-forwarding.js";
@@ -28,6 +28,47 @@ let GdsFilterChips = class extends GdsFormControlElement {
     this.label = "";
     this.rowCollapse = false;
     this._collapsed = false;
+    __privateAdd(this, _handleKeyDown, (event) => {
+      const keys = [
+        "ArrowDown",
+        "ArrowUp",
+        "ArrowLeft",
+        "ArrowRight",
+        "Home",
+        "End"
+      ];
+      if (!keys.includes(event.key))
+        return;
+      const sourceChip = event.target instanceof GdsFilterChip ? event.target : null;
+      if (!sourceChip || !this.chips.includes(sourceChip))
+        return;
+      event.preventDefault();
+      const currentIndex = this.chips.indexOf(sourceChip);
+      let nextIndex = currentIndex;
+      switch (event.key) {
+        case "ArrowDown":
+        case "ArrowRight":
+          nextIndex = (currentIndex + 1) % this.chips.length;
+          break;
+        case "ArrowUp":
+        case "ArrowLeft":
+          nextIndex = (currentIndex - 1 + this.chips.length) % this.chips.length;
+          break;
+        case "Home":
+          nextIndex = 0;
+          break;
+        case "End":
+          nextIndex = this.chips.length - 1;
+          break;
+      }
+      __privateGet(this, _setRovingTabIndex).call(this, nextIndex);
+      this.chips[nextIndex]?.focus();
+    });
+    __privateAdd(this, _setRovingTabIndex, (activeIndex) => {
+      this.chips.forEach((chip, index) => {
+        chip.setAttribute("tabindex", index === activeIndex ? "0" : "-1");
+      });
+    });
     __privateAdd(this, _handleChipClick, (event) => {
       const clickedChip = this.chips.find(
         (s) => s === event.target || s.contains(event.target)
@@ -53,6 +94,11 @@ let GdsFilterChips = class extends GdsFormControlElement {
     });
     __privateAdd(this, _collapseThreshold, 3);
     __privateAdd(this, _collapsedAt, 0);
+    __privateAdd(this, _initializeRovingTabIndex, () => {
+      if (this.chips.length === 0)
+        return;
+      __privateGet(this, _setRovingTabIndex).call(this, 0);
+    });
   }
   get value() {
     return this._internalValue;
@@ -76,11 +122,11 @@ let GdsFilterChips = class extends GdsFormControlElement {
       role="listbox"
       aria-label=${this.label}
       aria-multiselectable=${this.multiple}
+      @keydown=${__privateGet(this, _handleKeyDown)}
     >
       <slot
         @click=${__privateGet(this, _handleChipClick)}
         @slotchange=${__privateMethod(this, _handleSlotChange, handleSlotChange_fn)}
-        role="none"
       ></slot>
     </div>`;
   }
@@ -118,6 +164,8 @@ let GdsFilterChips = class extends GdsFormControlElement {
     });
   }
 };
+_handleKeyDown = new WeakMap();
+_setRovingTabIndex = new WeakMap();
 _handleChipClick = new WeakMap();
 _collapseThreshold = new WeakMap();
 _collapsedAt = new WeakMap();
@@ -142,7 +190,11 @@ handleSlotChange_fn = function() {
   } else {
     this._updateSelectedFromValue();
   }
+  this.updateComplete.then(() => {
+    __privateGet(this, _initializeRovingTabIndex).call(this);
+  });
 };
+_initializeRovingTabIndex = new WeakMap();
 GdsFilterChips.styles = [FilterChipsStyles];
 __decorateClass([
   property({ converter: stringArrayConverter })

package/components/radio/radio-group/radio-group.component.js

@@ -57,11 +57,13 @@ let RadioGroup = class extends GdsFormControlElement {
       __privateMethod(this, _initializeFocusable, initializeFocusable_fn).call(this);
     });
     this.addEventListener("invalid", this._syncRadioStates);
+    this.addEventListener("gds-validity-state", this._syncRadioStates);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     this._isConnected = false;
     this.removeEventListener("invalid", this._syncRadioStates);
+    this.removeEventListener("gds-validity-state", this._syncRadioStates);
   }
   focus(options) {
     this._getValidityAnchor()?.focus(options);