@sebgroup/green-core 2.35.1 → 2.37.0

package/components/popover/popover.trans.styles.scss.js

@@ -1,2 +1,2 @@
-const styles = "/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\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@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(--text-primary-color);\n    border: 1px solid transparent;\n  }\n  header .close::part(_button):hover {\n    background-color: var(--grey-500);\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    --z-index: var(--sg-z-index-popover);\n    background-color: var(--sg-popover-background);\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: var(--z-index);\n    box-shadow: var(--sg-popover-box-shadow);\n    color: var(--text-primary-color);\n    overflow: hidden;\n    padding: 0;\n    padding-bottom: 0;\n    border: solid var(--sg-border-width) var(--sg-border-color);\n    --border-color: var(--text-primary-color);\n    --sg-border-color: var(--text-primary-color);\n    border-radius: var(--sg-border-radius);\n  }\n  @media (max-width: 35.98em) {\n    dialog.use-modal-in-mobile {\n      border-top: solid var(--sg-border-width) var(--sg-border-color);\n      --border-color: var(--sg-border-color);\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/segmented-control/segment/segment.trans.styles.scss.js

@@ -1,2 +1,2 @@
-const styles = "/* stylelint-disable max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/**\n * Calculate the contrast ratio between two colors.\n * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests\n */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\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@layer base, reset, transitional-styles;\n@layer transitional-styles {\n  @layer _base;\n  @layer _base {\n    :host {\n      border-right: 1px solid #333;\n      box-sizing: border-box;\n      display: flex;\n      transition: 0.2s;\n      z-index: 1;\n    }\n    :host(:last-child) {\n      border-right: 0;\n    }\n    button {\n      -webkit-appearance: none;\n         -moz-appearance: none;\n              appearance: none;\n      background: transparent;\n      border-width: 0;\n      color: var(--text-primary-color);\n      cursor: pointer;\n      flex-grow: 1;\n      flex-shrink: 0;\n      font-family: inherit;\n      font-size: inherit;\n      font-weight: 500;\n      min-width: 6.625rem;\n      overflow: hidden;\n      padding: 0 1rem;\n      text-align: center;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      width: 100%;\n      border-radius: 0;\n    }\n    @media (pointer: fine) {\n      button:hover {\n        background-color: var(--grey-400);\n      }\n    }\n    button[aria-current=true] {\n      background-color: #333;\n      color: #fff;\n    }\n    button:focus-visible {\n      outline: 2px solid #000;\n      outline-offset: -2px;\n    }\n    button:disabled,\n    button[aria-disabled=true],\n    button.disabled {\n      color: var(--text-disabled-color) !important;\n      border-color: var(--border-disabled-color) !important;\n      cursor: not-allowed;\n    }\n    button:disabled::-moz-placeholder, button[aria-disabled=true]::-moz-placeholder, button.disabled::-moz-placeholder {\n      color: var(--text-disabled-color);\n    }\n    button:disabled::placeholder,\n    button[aria-disabled=true]::placeholder,\n    button.disabled::placeholder {\n      color: var(--text-disabled-color);\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;\n  @layer _base {\n    :host {\n      border-right: 1px solid #333;\n      box-sizing: border-box;\n      display: flex;\n      transition: 0.2s;\n      z-index: 1;\n    }\n    :host(:last-child) {\n      border-right: 0;\n    }\n    button {\n      -webkit-appearance: none;\n         -moz-appearance: none;\n              appearance: none;\n      background: transparent;\n      border-width: 0;\n      color: var(--text-primary-color);\n      cursor: pointer;\n      flex-grow: 1;\n      flex-shrink: 0;\n      font-family: inherit;\n      font-size: inherit;\n      font-weight: 500;\n      min-width: 6.625rem;\n      overflow: hidden;\n      padding: 0 1rem;\n      text-align: center;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      width: 100%;\n      border-radius: 0;\n    }\n    @media (pointer: fine) {\n      button:hover {\n        background-color: var(--gds-sys-color-base-200);\n      }\n    }\n    button[aria-current=true] {\n      background-color: #333;\n      color: #fff;\n    }\n    button:focus-visible {\n      outline: 2px solid #000;\n      outline-offset: -2px;\n    }\n    button:disabled,\n    button[aria-disabled=true],\n    button.disabled {\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    button:disabled::-moz-placeholder, button[aria-disabled=true]::-moz-placeholder, button.disabled::-moz-placeholder {\n      color: var(--gds-sys-color-text-disabled);\n    }\n    button:disabled::placeholder,\n    button[aria-disabled=true]::placeholder,\n    button.disabled::placeholder {\n      color: var(--gds-sys-color-text-disabled);\n    }\n  }\n}";
 export default styles;

package/components/segmented-control/segmented-control.trans.styles.css.js

@@ -1,2 +1,2 @@
-const styles = "@layer base, reset, transitional-styles;\n\n@layer transitional-styles {\n  @layer _base, _overrides;\n\n  @layer _base {\n    :host {\n      background-color: #fff;\n      border: 1px solid #333;\n      border-radius: 4px;\n      box-sizing: border-box;\n      contain: layout;\n      display: inline-flex;\n      height: 3rem;\n      max-width: 100%;\n      overflow: hidden;\n    }\n\n    :host([size='small']) {\n      height: 2.5rem;\n    }\n\n    #track {\n      box-sizing: border-box;\n      display: flex;\n      flex-grow: 0;\n      flex-shrink: 1;\n      scroll-snap-type: inline mandatory;\n      overscroll-behavior-x: contain;\n      scroll-behavior: smooth;\n      overflow-x: scroll;\n      position: relative;\n      width: 100%;\n      scrollbar-width: none;\n    }\n\n    #track::-webkit-scrollbar {\n      display: none;\n    }\n\n    #btn-prev,\n    #btn-next {\n      align-items: center;\n      -webkit-appearance: none;\n         -moz-appearance: none;\n              appearance: none;\n      aspect-ratio: 1;\n      background-color: #fff;\n      border-width: 0;\n      color: #333;\n      cursor: pointer;\n      display: flex;\n      font-size: 1rem;\n      height: 100%;\n      justify-content: center;\n      width: 2.5rem;\n      z-index: 2;\n      position: absolute;\n      transition: 0.2s;\n\n      @media (pointer: fine) {\n        &:hover {\n          background-color: var(--grey-400);\n        }\n      }\n    }\n\n    #btn-prev {\n      border-right: 1px solid #333;\n    }\n    #btn-next {\n      border-left: 1px solid #333;\n      right: 0;\n    }\n\n    #btn-prev[aria-hidden='true'],\n    #btn-next[aria-hidden='true'] {\n      opacity: 0;\n      width: 0;\n      margin: 0;\n      padding: 0;\n    }\n\n    :host([size='small']) #btn-prev,\n    :host([size='small']) #btn-next {\n      width: 2rem;\n    }\n\n    ::slotted(*) {\n      flex-grow: 1;\n      flex-shrink: 0;\n      z-index: 1;\n      scroll-margin: 0 2.5rem;\n      scroll-snap-align: start;\n    }\n\n    #indicator {\n      display: none;\n    }\n  }\n\n  /* @layer _overrides {\n  } */\n}\n";
+const styles = "@layer base, reset, transitional-styles;\n\n@layer transitional-styles {\n  @layer _base, _overrides;\n\n  @layer _base {\n    :host {\n      background-color: #fff;\n      border: 1px solid #333;\n      border-radius: 4px;\n      box-sizing: border-box;\n      contain: layout;\n      display: inline-flex;\n      height: 3rem;\n      max-width: 100%;\n      overflow: hidden;\n    }\n\n    :host([size='small']) {\n      height: 2.5rem;\n    }\n\n    #track {\n      box-sizing: border-box;\n      display: flex;\n      flex-grow: 0;\n      flex-shrink: 1;\n      scroll-snap-type: inline mandatory;\n      overscroll-behavior-x: contain;\n      scroll-behavior: smooth;\n      overflow-x: scroll;\n      position: relative;\n      width: 100%;\n      scrollbar-width: none;\n    }\n\n    #track::-webkit-scrollbar {\n      display: none;\n    }\n\n    #btn-prev,\n    #btn-next {\n      align-items: center;\n      -webkit-appearance: none;\n         -moz-appearance: none;\n              appearance: none;\n      aspect-ratio: 1;\n      background-color: #fff;\n      border-width: 0;\n      color: #333;\n      cursor: pointer;\n      display: flex;\n      font-size: 1rem;\n      height: 100%;\n      justify-content: center;\n      width: 2.5rem;\n      z-index: 2;\n      position: absolute;\n      transition: 0.2s;\n\n      @media (pointer: fine) {\n        &:hover {\n          background-color: var(--gds-sys-color-base-200);\n        }\n      }\n    }\n\n    #btn-prev {\n      border-right: 1px solid #333;\n    }\n    #btn-next {\n      border-left: 1px solid #333;\n      right: 0;\n    }\n\n    #btn-prev[aria-hidden='true'],\n    #btn-next[aria-hidden='true'] {\n      opacity: 0;\n      width: 0;\n      margin: 0;\n      padding: 0;\n    }\n\n    :host([size='small']) #btn-prev,\n    :host([size='small']) #btn-next {\n      width: 2rem;\n    }\n\n    ::slotted(*) {\n      flex-grow: 1;\n      flex-shrink: 0;\n      z-index: 1;\n      scroll-margin: 0 2.5rem;\n      scroll-snap-align: start;\n    }\n\n    #indicator {\n      display: none;\n    }\n  }\n\n  /* @layer _overrides {\n  } */\n}\n";
 export default styles;

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

@@ -8,6 +8,7 @@ import * as Types from './table.types';
  *
  * @slot `header-lead` - Content displayed at the start of the table header (after search).
  * @slot `header-trail` - Content displayed at the end of the table header (before settings).
+ * @slot `footer` - Content displayed in the table footer area (before pagination).
  * @slot `error` - Custom error state content when data loading fails.
  * @slot `empty` - Custom empty state content when no data is available.
  * @slot `no-results` - Custom no results content when search returns empty.
@@ -15,7 +16,7 @@ import * as Types from './table.types';
  * @event gds-page-change - Fired when the active page changes. Detail: `{ page: number }`
  * @event gds-rows-change - Fired when the rows per page value changes. Detail: `{ rows: number }`
  * @event gds-sort-change - Fired when sorting changes. Detail: `{ sortColumn: string, sortDirection: 'asc' | 'desc' }`
- * @event gds-table-data-loaded - Fired when data is successfully loaded.
+ * @event gds-table-data-loaded - Fired when data is successfully loaded. Detail: `{ rows: T[], total: number, page: number, rowsPerPage: number, searchQuery: string, sortColumn?: string, sortDirection?: 'asc' | 'desc' }`
  * @event gds-table-data-error - Fired when data loading fails.
  * @event gds-table-selection - Fired when row selection changes.
  */
@@ -70,6 +71,10 @@ export declare class GdsTable<T extends Types.Row = Types.Row> extends GdsElemen
      * Enables row selection functionality.
      */
     selectable: boolean;
+    /**
+     * Disables select all checkbox in header.
+     */
+    disableSelectAll: boolean;
     /**
      * Transforms table layout for mobile screens.
      */
@@ -99,6 +104,19 @@ export declare class GdsTable<T extends Types.Row = Types.Row> extends GdsElemen
      * Disables data caching mechanism.
      */
     nocache: boolean;
+    /**
+     * Configures a table footer row (`<tfoot>`) at the bottom of the table.
+     * The footer row provides slot insertion points for each visible column,
+     * letting consumers render any aggregation (sum, average, count, etc.).
+     *
+     * Use `tfoot.label` to optionally show a label in the first cell (omitted by default).
+     * Use `tfoot.sticky` to pin the footer to the bottom of the scroll area.
+     *
+     * Slot naming convention: `tfoot:{columnKey}`
+     *
+     * Accepts: `{ label?: string, sticky?: boolean }` or omit to disable.
+     */
+    tfoot?: Types.Tfoot;
     /**
      * Key to trigger data reloading when changed. Setting this to a new value
      * forces the table to clear the cache and request new data from the data provider.
@@ -132,6 +150,17 @@ export declare class GdsTable<T extends Types.Row = Types.Row> extends GdsElemen
     private _selected;
     private _error;
     private _onDataChange;
+    /**
+     * Syncs the external `page` property to internal view state and reloads data.
+     * Without this, setting `.page` from outside (e.g. via attribute or binding)
+     * would update the Lit property but not trigger a data fetch.
+     */
+    private _onPageChange;
+    /**
+     * Syncs the external `rows` property to internal view state and reloads data.
+     * Resets to page 1 since changing page size invalidates the current position.
+     */
+    private _onRowsChange;
     private _onColumnsChange;
     connectedCallback(): void;
     render(): any;