@sebgroup/green-core 3.16.0 → 3.17.0-rc.20260629120923350

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);\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}";
 export default styles;

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);\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/list/list-item/list-item.component.d.ts

@@ -9,7 +9,7 @@ declare const GdsListItem_base: (new (...args: any[]) => import("../../../utils/
  * @slot - Content to be displayed as the main content.
  */
 export declare class GdsListItem extends GdsListItem_base {
-    static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    static styles: import("lit").CSSResult[];
     connectedCallback(): void;
     render(): any;
 }

package/components/list/list-item/list-item.component.js

@@ -5,7 +5,6 @@ import { GdsElement } from "../../../gds-element.js";
 import { gdsCustomElement, html } from "../../../scoping.js";
 import { tokens } from "../../../tokens.style.js";
 import { withLayoutChildProps } from "../../../utils/mixins/declarative-layout-mixins.js";
-import ListItemStyles from "./list-item.styles.js";
 let GdsListItem = class extends withLayoutChildProps(GdsElement) {
   connectedCallback() {
     super.connectedCallback();
@@ -15,7 +14,7 @@ let GdsListItem = class extends withLayoutChildProps(GdsElement) {
     return html`<slot></slot>`;
   }
 };
-GdsListItem.styles = [tokens, ListItemStyles];
+GdsListItem.styles = tokens;
 GdsListItem = __decorateClass([
   gdsCustomElement("gds-list-item")
 ], GdsListItem);

package/components/list/list.component.d.ts

@@ -11,6 +11,10 @@ import { GdsFlex } from '../flex/flex.component';
  */
 export declare class GdsList extends GdsFlex {
     static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    /**
+     * Renders dividers (borders) between list items and removes the default gap.
+     */
+    dividers: boolean;
     connectedCallback(): void;
     render(): any;
 }

package/components/list/list.component.js

@@ -1,11 +1,16 @@
 import {
   __decorateClass
 } from "../../chunks/chunk.CAV4X6PU.js";
+import { property } from "lit/decorators.js";
 import { gdsCustomElement, html } from "../../scoping.js";
 import { tokens } from "../../tokens.style.js";
 import { GdsFlex } from "../flex/flex.component.js";
 import ListStyles from "./list.styles.js";
 let GdsList = class extends GdsFlex {
+  constructor() {
+    super(...arguments);
+    this.dividers = false;
+  }
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute("role", "list");
@@ -15,6 +20,9 @@ let GdsList = class extends GdsFlex {
   }
 };
 GdsList.styles = [tokens, ListStyles];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], GdsList.prototype, "dividers", 2);
 GdsList = __decorateClass([
   gdsCustomElement("gds-list")
 ], GdsList);

package/components/list/list.styles.js

@@ -6,6 +6,19 @@ const style = css`
     flex-direction: column;
     gap: var(--gds-sys-space-m);
   }
+
+  :host([dividers]) {
+    gap: 0;
+  }
+
+  :host([dividers]) ::slotted(*:not(:last-child)) {
+    border-bottom: 1px solid var(--gds-sys-color-border-neutral-03);
+    border-radius: 0;
+  }
+
+  :host([dividers]) ::slotted([href]) {
+    padding: var(--gds-sys-space-s) 0;
+  }
 `;
 var list_styles_default = style;
 export {

package/components/popover/popover.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  :host {\n    display: contents;\n  }\n  :host([open]) dialog {\n    box-sizing: border-box;\n    opacity: 1;\n    transform: translate3d(0, 0, 0);\n    visibility: visible;\n  }\n  :host > div:not([hidden]) {\n    display: contents;\n  }\n  header {\n    display: flex;\n  }\n  header .close::part(_button) {\n    border-radius: 100%;\n    color: var(--gds-sys-color-text-primary);\n    border: 1px solid transparent;\n  }\n  header .close::part(_button):hover {\n    background-color: var(--gds-sys-color-base-300);\n  }\n  header h2 {\n    flex-grow: 1;\n    font-weight: 400;\n    line-height: 1.5;\n    margin: 0.25rem 0 0 0.75rem;\n  }\n  dialog {\n    background-color: var(--gds-sys-color-background-primary);\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    opacity: 0;\n    visibility: hidden;\n    position: fixed;\n    inset: auto;\n    z-index: 1060;\n    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n    color: var(--gds-sys-color-text-primary);\n    overflow: hidden;\n    padding: 0;\n    padding-bottom: 0 \"\";\n    border: solid 1px var(--gds-sys-color-base-600);\n    --border-color: var(--gds-sys-color-text-primary);\n    border-radius: 0.25rem;\n  }\n  @media (max-width: 35.98em) {\n    dialog.use-modal-in-mobile {\n      border-top: solid 1px var(--gds-sys-color-base-600);\n      --border-color: var(--gds-sys-color-base-600);\n      padding-bottom: 0.5rem \"\";\n      border-radius: 1rem 1rem 0 0;\n      bottom: 0;\n      left: 0;\n      transition: all 300ms ease-in-out;\n      width: 100%;\n      border: 1px solid var(--border-color);\n      border-radius: 0.25rem;\n      max-height: 80svh;\n      padding-bottom: 0;\n      inset: 0;\n    }\n    dialog.use-modal-in-mobile.v-kb-visible {\n      inset-block-end: auto;\n      max-height: 50svh;\n      top: 1rem;\n    }\n  }\n  @media (min-width: 36em) {\n    dialog.use-modal-in-mobile header {\n      display: none;\n    }\n  }\n  @media (min-width: 36em) {\n    dialog.use-modal-in-mobile:not(.has-backdrop)::backdrop {\n      opacity: 0;\n    }\n  }\n  dialog::backdrop {\n    background-color: rgba(0, 0, 0, 0.2);\n    display: block;\n    position: fixed;\n  }\n  dialog:not(.use-modal-in-mobile) header {\n    display: none;\n  }\n  dialog:not(.use-modal-in-mobile)::backdrop {\n    opacity: 0;\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  :host {\n    display: contents;\n  }\n  :host([open]) dialog {\n    box-sizing: border-box;\n    opacity: 1;\n    transform: translate3d(0, 0, 0);\n    visibility: visible;\n  }\n  :host > div:not([hidden]) {\n    display: contents;\n  }\n  header {\n    display: flex;\n  }\n  header .close::part(_button) {\n    border-radius: 100%;\n    color: var(--gds-sys-color-text-primary);\n    border: 1px solid transparent;\n  }\n  header .close::part(_button):hover {\n    background-color: var(--gds-sys-color-base-300);\n  }\n  header h2 {\n    flex-grow: 1;\n    font-weight: 400;\n    line-height: 1.5;\n    margin: 0.25rem 0 0 0.75rem;\n  }\n  dialog {\n    background-color: var(--gds-sys-color-background-primary);\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-end;\n    opacity: 0;\n    visibility: hidden;\n    position: fixed;\n    inset: auto;\n    z-index: 1060;\n    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n    color: var(--gds-sys-color-text-primary);\n    overflow: hidden;\n    padding: 0;\n    padding-bottom: 0;\n    border: solid 1px var(--gds-sys-color-base-600);\n    --border-color: var(--gds-sys-color-text-primary);\n    border-radius: 0.25rem;\n  }\n  @media (max-width: 35.98em) {\n    dialog.use-modal-in-mobile {\n      border-top: solid 1px var(--gds-sys-color-base-600);\n      --border-color: var(--gds-sys-color-base-600);\n      padding-bottom: 0.5rem;\n      border-radius: 1rem 1rem 0 0;\n      bottom: 0;\n      left: 0;\n      transition: all 300ms ease-in-out;\n      width: 100%;\n      border: 1px solid var(--border-color);\n      border-radius: 0.25rem;\n      max-height: 80svh;\n      padding-bottom: 0;\n      inset: 0;\n    }\n    dialog.use-modal-in-mobile.v-kb-visible {\n      inset-block-end: auto;\n      max-height: 50svh;\n      top: 1rem;\n    }\n  }\n  @media (min-width: 36em) {\n    dialog.use-modal-in-mobile header {\n      display: none;\n    }\n  }\n  @media (min-width: 36em) {\n    dialog.use-modal-in-mobile:not(.has-backdrop)::backdrop {\n      opacity: 0;\n    }\n  }\n  dialog::backdrop {\n    background-color: rgba(0, 0, 0, 0.2);\n    display: block;\n    position: fixed;\n  }\n  dialog:not(.use-modal-in-mobile) header {\n    display: none;\n  }\n  dialog:not(.use-modal-in-mobile)::backdrop {\n    opacity: 0;\n  }\n}";
 export default styles;

package/components/table/table.component.d.ts

@@ -1,6 +1,7 @@
 import { GdsElement } from '../../gds-element';
 import * as Types from './table.types';
 type TableVariant = 'neutral-01' | 'neutral-02' | 'neutral-02-outlined';
+declare const GdsTable_base: (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").SizeXProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").MarginProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").PaddingProps) & (new (...args: any[]) => import("../../utils/mixins/declarative-layout-mixins").LayoutChildProps) & typeof GdsElement;
 /**
  * @element gds-table
  * @status beta
@@ -23,7 +24,7 @@ type TableVariant = 'neutral-01' | 'neutral-02' | 'neutral-02-outlined';
  * @event gds-table-selection - Fired when row selection changes.
  * @event gds-table-expand-change - Fired when row expansion changes. Detail: `{ index: number, row: T, expanded: boolean, expandedIndices: number[] }`
  */
-export declare class GdsTable<T extends Types.Row = Types.Row> extends GdsElement {
+export declare class GdsTable<T extends Types.Row = Types.Row> extends GdsTable_base {
     #private;
     static styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
     /**

package/components/table/table.component.js

@@ -5,7 +5,7 @@ import {
   __privateMethod,
   __privateSet
 } from "../../chunks/chunk.CAV4X6PU.js";
-var _cache, _cacheDuration, _isResponsiveStacked, isResponsiveStacked_get, _isExpandableEnabled, isExpandableEnabled_get, _isSelectableEnabled, isSelectableEnabled_get, _Density, Density_get, _expandTransitionTimers, _expandedLoadingExitDuration, _hasSelection, hasSelection_get, _isAllSelected, isAllSelected_get, _isPartialSelection, isPartialSelection_get, _expandableIndices, expandableIndices_get, _isAllExpanded, isAllExpanded_get, _getCacheKey, getCacheKey_fn, _clearExpansionTransitionTimer, clearExpansionTransitionTimer_fn, _clearExpansionLoadingState, clearExpansionLoadingState_fn, _clearAllExpansionLoadingStates, clearAllExpansionLoadingStates_fn, _scheduleExpansionContentReveal, scheduleExpansionContentReveal_fn, _isCacheValid, isCacheValid_fn, _loadData, loadData_fn, _getStickyBorderKeys, getStickyBorderKeys_fn, _updateStickyOffsets, updateStickyOffsets_fn, _getRowKey, getRowKey_fn, _renderCellWrapped, renderCellWrapped_fn, _renderMobileLabel, renderMobileLabel_fn, _renderSlotElement, renderSlotElement_fn, _renderCellContent, renderCellContent_fn, _renderSortIcon, renderSortIcon_fn, _hasHeaderContent, hasHeaderContent_fn, _renderHeaderControls, renderHeaderControls_fn, _renderColumnHeader, renderColumnHeader_fn, _renderSelectableHeader, renderSelectableHeader_fn, _renderExpandableHeader, renderExpandableHeader_fn, _getRowSubRowsSource, getRowSubRowsSource_fn, _getRowFullContentSource, getRowFullContentSource_fn, _getExpandedRows, getExpandedRows_fn, _hasAsyncSubRows, hasAsyncSubRows_fn, _hasAsyncFullContent, hasAsyncFullContent_fn, _getSubRowCount, getSubRowCount_fn, _hasExpandedFullSlot, hasExpandedFullSlot_fn, _hasExpandedFullContent, hasExpandedFullContent_fn, _isRowExpandable, isRowExpandable_fn, _getExpandedGroupId, getExpandedGroupId_fn, _getRenderedColumnCount, getRenderedColumnCount_fn, _renderColumnHeaders, renderColumnHeaders_fn, _renderTableHeader, renderTableHeader_fn, _renderTableCell, renderTableCell_fn, _renderExpandableCell, renderExpandableCell_fn, _renderSelectableCell, renderSelectableCell_fn, _renderRowCells, renderRowCells_fn, _renderFullWidthDetailsRow, renderFullWidthDetailsRow_fn, _renderExpandedLoadingRow, renderExpandedLoadingRow_fn, _renderExpandedLoadingRows, renderExpandedLoadingRows_fn, _renderExpandedFullLoadingRow, renderExpandedFullLoadingRow_fn, _getExpandedChildRowClasses, getExpandedChildRowClasses_fn, _getTableRowClasses, getTableRowClasses_fn, _getRowAriaExpanded, getRowAriaExpanded_fn, _getTableRowPresentation, getTableRowPresentation_fn, _renderExpandedChildRow, renderExpandedChildRow_fn, _getRowExpansionLoadingKind, getRowExpansionLoadingKind_fn, _getRowExpansionState, getRowExpansionState_fn, _renderExpandedRowContent, renderExpandedRowContent_fn, _renderTableRow, renderTableRow_fn, _renderCheckbox, renderCheckbox_fn, _renderSkeletonCell, renderSkeletonCell_fn, _renderSkeletonRow, renderSkeletonRow_fn, _renderTableBody, renderTableBody_fn, _renderTableFoot, renderTableFoot_fn, _renderTable, renderTable_fn, _renderErrorState, renderErrorState_fn, _renderEmptyState, renderEmptyState_fn, _renderFooter, renderFooter_fn, _renderHeadline, renderHeadline_fn, _handleSearch, handleSearch_fn, _handleSearchClear, handleSearchClear_fn, _handleSort, handleSort_fn, _handlePageChange, handlePageChange_fn, _handlePageSizeChange, handlePageSizeChange_fn, _handleColumnVisibility, handleColumnVisibility_fn, _handleSelectAll, handleSelectAll_fn, _handleRowSelect, handleRowSelect_fn, _handleExpandToggle, handleExpandToggle_fn, _handleExpandAll, handleExpandAll_fn, _emitExpandChange, emitExpandChange_fn, _resolveExpandedContent, resolveExpandedContent_fn, _setRowExpanded, setRowExpanded_fn, _selectAllInternal, selectAllInternal_fn, _clearSelectionInternal, clearSelectionInternal_fn, _emitSelectionChange, emitSelectionChange_fn, _initializeScrollTracking, initializeScrollTracking_fn, _updateVerticalScrollState, updateVerticalScrollState_fn, _updateHorizontalScrollState, updateHorizontalScrollState_fn;
+var _cache, _cacheDuration, _isResponsiveStacked, isResponsiveStacked_get, _isExpandableEnabled, isExpandableEnabled_get, _isSelectableEnabled, isSelectableEnabled_get, _Density, Density_get, _expandTransitionTimers, _expandedLoadingExitDuration, _hasSelection, hasSelection_get, _isAllSelected, isAllSelected_get, _isPartialSelection, isPartialSelection_get, _expandableIndices, expandableIndices_get, _isAllExpanded, isAllExpanded_get, _getCacheKey, getCacheKey_fn, _clearExpansionTransitionTimer, clearExpansionTransitionTimer_fn, _clearExpansionLoadingState, clearExpansionLoadingState_fn, _clearAllExpansionLoadingStates, clearAllExpansionLoadingStates_fn, _scheduleExpansionContentReveal, scheduleExpansionContentReveal_fn, _isCacheValid, isCacheValid_fn, _getControlledColumnSort, getControlledColumnSort_fn, _loadData, loadData_fn, _getStickyBorderKeys, getStickyBorderKeys_fn, _updateStickyOffsets, updateStickyOffsets_fn, _getRowKey, getRowKey_fn, _renderCellWrapped, renderCellWrapped_fn, _renderMobileLabel, renderMobileLabel_fn, _renderSlotElement, renderSlotElement_fn, _renderCellContent, renderCellContent_fn, _renderSortIcon, renderSortIcon_fn, _hasHeaderContent, hasHeaderContent_fn, _renderHeaderControls, renderHeaderControls_fn, _renderColumnHeader, renderColumnHeader_fn, _renderSelectableHeader, renderSelectableHeader_fn, _renderExpandableHeader, renderExpandableHeader_fn, _getRowSubRowsSource, getRowSubRowsSource_fn, _getRowFullContentSource, getRowFullContentSource_fn, _getExpandedRows, getExpandedRows_fn, _hasAsyncSubRows, hasAsyncSubRows_fn, _hasAsyncFullContent, hasAsyncFullContent_fn, _getSubRowCount, getSubRowCount_fn, _hasExpandedFullSlot, hasExpandedFullSlot_fn, _hasExpandedFullContent, hasExpandedFullContent_fn, _isRowExpandable, isRowExpandable_fn, _getExpandedGroupId, getExpandedGroupId_fn, _getRenderedColumnCount, getRenderedColumnCount_fn, _renderColumnHeaders, renderColumnHeaders_fn, _renderTableHeader, renderTableHeader_fn, _renderTableCell, renderTableCell_fn, _renderExpandableCell, renderExpandableCell_fn, _renderSelectableCell, renderSelectableCell_fn, _renderRowCells, renderRowCells_fn, _renderFullWidthDetailsRow, renderFullWidthDetailsRow_fn, _renderExpandedLoadingRow, renderExpandedLoadingRow_fn, _renderExpandedLoadingRows, renderExpandedLoadingRows_fn, _renderExpandedFullLoadingRow, renderExpandedFullLoadingRow_fn, _getExpandedChildRowClasses, getExpandedChildRowClasses_fn, _getTableRowClasses, getTableRowClasses_fn, _getRowAriaExpanded, getRowAriaExpanded_fn, _getTableRowPresentation, getTableRowPresentation_fn, _renderExpandedChildRow, renderExpandedChildRow_fn, _getRowExpansionLoadingKind, getRowExpansionLoadingKind_fn, _getRowExpansionState, getRowExpansionState_fn, _renderExpandedRowContent, renderExpandedRowContent_fn, _renderTableRow, renderTableRow_fn, _renderCheckbox, renderCheckbox_fn, _renderSkeletonCell, renderSkeletonCell_fn, _renderSkeletonRow, renderSkeletonRow_fn, _renderTableBody, renderTableBody_fn, _renderTableFoot, renderTableFoot_fn, _renderTable, renderTable_fn, _renderErrorState, renderErrorState_fn, _renderEmptyState, renderEmptyState_fn, _renderFooter, renderFooter_fn, _renderHeadline, renderHeadline_fn, _handleSearch, handleSearch_fn, _handleSearchClear, handleSearchClear_fn, _handleSort, handleSort_fn, _handlePageChange, handlePageChange_fn, _handlePageSizeChange, handlePageSizeChange_fn, _handleColumnVisibility, handleColumnVisibility_fn, _handleSelectAll, handleSelectAll_fn, _handleRowSelect, handleRowSelect_fn, _handleExpandToggle, handleExpandToggle_fn, _handleExpandAll, handleExpandAll_fn, _emitExpandChange, emitExpandChange_fn, _resolveExpandedContent, resolveExpandedContent_fn, _setRowExpanded, setRowExpanded_fn, _selectAllInternal, selectAllInternal_fn, _clearSelectionInternal, clearSelectionInternal_fn, _emitSelectionChange, emitSelectionChange_fn, _initializeScrollTracking, initializeScrollTracking_fn, _updateVerticalScrollState, updateVerticalScrollState_fn, _updateHorizontalScrollState, updateHorizontalScrollState_fn;
 import { localized, msg } from "@lit/localize";
 import { property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
@@ -22,9 +22,17 @@ import {
   gdsCustomElement,
   html
 } from "../../utils/helpers/custom-element-scoping.js";
+import {
+  withLayoutChildProps,
+  withMarginProps,
+  withPaddingProps,
+  withSizeXProps
+} from "../../utils/mixins/declarative-layout-mixins.js";
 import * as Table from "./table.imports.js";
 import * as Types from "./table.types.js";
-let GdsTable = class extends GdsElement {
+let GdsTable = class extends withSizeXProps(
+  withMarginProps(withPaddingProps(withLayoutChildProps(GdsElement)))
+) {
   constructor() {
     super(...arguments);
     __privateAdd(this, _isResponsiveStacked);
@@ -45,6 +53,7 @@ let GdsTable = class extends GdsElement {
     __privateAdd(this, _clearAllExpansionLoadingStates);
     __privateAdd(this, _scheduleExpansionContentReveal);
     __privateAdd(this, _isCacheValid);
+    __privateAdd(this, _getControlledColumnSort);
     __privateAdd(this, _loadData);
     /**
      * Returns the column keys for the rightmost sticky-left and leftmost sticky-right
@@ -250,14 +259,23 @@ let GdsTable = class extends GdsElement {
   }
   _onColumnsChange() {
     __privateSet(this, _cache, {});
+    const controlledSort = __privateMethod(this, _getControlledColumnSort, getControlledColumnSort_fn).call(this);
+    const previousSortColumn = this._view.sortColumn;
+    const previousSortDirection = this._view.sortDirection;
     this._view = {
       ...this._view,
-      page: Number(this.page ?? 1),
+      page: controlledSort ? 1 : Number(this.page ?? 1),
       rows: Number(this.rows ?? 10),
+      sortColumn: controlledSort?.column ?? this._view.sortColumn,
+      sortDirection: controlledSort?.direction ?? this._view.sortDirection,
       visibleColumns: new Set(
         this.columns.filter((col) => col.visible !== false).map((col) => col.key)
       )
     };
+    const sortChanged = !!controlledSort && (controlledSort.column !== previousSortColumn || controlledSort.direction !== previousSortDirection);
+    if (sortChanged) {
+      void __privateMethod(this, _loadData, loadData_fn).call(this);
+    }
   }
   connectedCallback() {
     super.connectedCallback();
@@ -458,6 +476,18 @@ _isCacheValid = new WeakSet();
 isCacheValid_fn = function(entry) {
   return Date.now() - entry.timestamp < __privateGet(this, _cacheDuration);
 };
+_getControlledColumnSort = new WeakSet();
+getControlledColumnSort_fn = function() {
+  const controlledColumn = this.columns.find(
+    (column) => column.sorting === "asc" || column.sorting === "desc"
+  );
+  if (!controlledColumn?.sorting)
+    return null;
+  return {
+    column: controlledColumn.key,
+    direction: controlledColumn.sorting
+  };
+};
 _loadData = new WeakSet();
 loadData_fn = async function() {
   if (!this.data)

package/components/table/table.styles.js

@@ -4,6 +4,7 @@ const TableStyles = css`
   /* Host & Container */
   :host {
     display: block;
+    min-width: 0;
     font: var(--gds-sys-text-detail-s-book);
     color: var(--gds-sys-color-content-neutral-01);
     text-align: left;
@@ -180,6 +181,7 @@ const TableStyles = css`
   }
 
   .table-card {
+    min-width: 0;
     outline-color: transparent;
     outline-offset: var(--gds-sys-space-4xs);
     outline-style: solid;

package/components/table/table.types.d.ts

@@ -18,6 +18,12 @@ export interface Column {
     label: string;
     /** Enables click-to-sort for the column header. */
     sortable?: boolean;
+    /**
+     * Optional controlled sort state for this column.
+     * When set on a column, the table syncs its internal sort state to match.
+     * Use with external state (for example URL query params) for programmatic sorting.
+     */
+    sorting?: 'asc' | 'desc';
     /** Vertical alignment for cell content. */
     align?: 'start' | 'center' | 'stretch' | 'end';
     /** Horizontal justification for cell content. */