@sebgroup/green-core 2.12.1 → 2.12.2-rc.20251027145036658

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/components/button/button.trans.styles.scss.js +1 -1
  2. package/components/calendar/calendar.trans.styles.scss.js +1 -1
  3. package/components/context-menu/context-menu.trans.styles.scss.js +1 -1
  4. package/components/datepicker/datepicker.trans.styles.scss.js +1 -1
  5. package/components/dropdown/dropdown.styles.js +6 -0
  6. package/components/formatted-text/date/date-time-formatter.js +1 -3
  7. package/components/grouped-list/grouped-list.trans.styles.scss.js +1 -1
  8. package/components/popover/popover.trans.styles.scss.js +1 -1
  9. package/components/segmented-control/segment/segment.trans.styles.scss.js +1 -1
  10. package/components/segmented-control/segmented-control.trans.styles.css.js +1 -1
  11. package/components/theme/chlorophyll-tokens.scss.js +1 -1
  12. package/gds-element.js +1 -1
  13. package/generated/react/index.d.ts +1 -1
  14. package/generated/react/index.js +1 -1
  15. package/package.json +1 -1
  16. package/primitives/field-base/field-base.trans.styles.scss.js +1 -1
  17. package/primitives/listbox/listbox.trans.styles.scss.js +1 -1
  18. package/primitives/listbox/option.trans.styles.scss.js +1 -1
  19. package/primitives/menu/menu-heading.trans.styles.scss.js +1 -1
  20. package/utils/helpers/custom-element-scoping.js +1 -1
  21. package/utils/helpers/id.d.ts +0 -3
  22. package/utils/helpers/id.js +6 -1
package/components/button/button.trans.styles.scss.js CHANGED
@@ -1,2 +1,2 @@
1
- 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 */\ni.sg-icon {\n font-size: 0;\n width: 1rem;\n height: 1rem;\n display: inline-block;\n}\ni.sg-icon::before {\n content: \"\";\n display: inline-block;\n background: var(--color);\n width: 100%;\n height: 100%;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n}\ni.sg-icon.sg-icon-calendar::before {\n -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-calendar-range::before {\n -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-ellipsis::before {\n -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-grip-vertical::before {\n -webkit-mask-image: url(\"data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-next::before {\n background: none;\n border-bottom: 2px solid;\n border-left: 2px solid;\n content: \"\";\n display: block;\n height: 12px;\n margin-left: -10px;\n margin-top: 2px;\n transform: translate(75%) rotate(-135deg) scaleZ(-1);\n transition: transform 0.3s ease-in;\n width: 12px;\n}\ni.sg-icon.sg-icon-previous::before {\n background: none;\n border-bottom: 2px solid;\n border-left: 2px solid;\n content: \"\";\n display: block;\n height: 12px;\n margin-left: -4px;\n margin-top: 2px;\n transform: translate(75%) rotate(45deg) scaleZ(-1);\n transition: transform 0.3s ease-in;\n width: 12px;\n}\ni.sg-icon.sg-icon-ellipsis::before {\n margin-right: -2px;\n}\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: var(--sg-border-radius);\n border: solid var(--sg-border-width) var(--sg-border-color);\n font-weight: 500;\n min-height: 2.75rem;\n align-items: center;\n display: inline-flex;\n justify-content: center;\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: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 @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 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 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 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n background: rgb(0, 122, 199);\n border-color: rgb(0, 122, 199);\n color: #fff;\n --color: #fff;\n }\n :host(:not([variant=ghost])) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n color: rgb(255, 255, 255);\n --background: rgb(25.4035777564, 154.8940067842, 227.221994169);\n --color: rgb(255, 255, 255);\n border-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\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-color: rgb(0, 122, 199);\n color: rgb(255, 255, 255);\n --background: rgb(0, 122, 199);\n --color: rgb(255, 255, 255);\n border-color: rgb(0, 122, 199);\n }\n :host(:not([variant=ghost])) .button:focus-visible {\n background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n color: rgb(255, 255, 255);\n --background: rgb(25.4035777564, 154.8940067842, 227.221994169);\n --color: rgb(255, 255, 255);\n border-color: rgb(25.4035777564, 154.8940067842, 227.221994169) !important;\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(--form-control-primary-bg-disabled) !important;\n color: var(--text-primary-disabled-color) !important;\n border-color: var(--border-primary-disabled-color) !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(--text-disabled-color);\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(--text-disabled-color);\n }\n :host([rank*=secondary]) .button {\n transition: border 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n background: transparent;\n border-color: rgb(0, 122, 199);\n color: rgb(0, 122, 199);\n --color: rgb(0, 122, 199);\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:not(:disabled, .disabled, [aria-disabled]):hover {\n background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n color: rgb(255, 255, 255);\n --background: rgb(25.4035777564, 154.8940067842, 227.221994169);\n --color: rgb(255, 255, 255);\n border-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\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-color: rgb(0, 122, 199);\n color: rgb(255, 255, 255);\n --background: rgb(0, 122, 199);\n --color: rgb(255, 255, 255);\n border-color: rgb(0, 122, 199);\n }\n :host([rank*=secondary]) .button:disabled, :host([rank*=secondary]) .button.disabled, :host([rank*=secondary]) .button[aria-disabled=true] {\n background: var(--sg-form-control-bg-disabled) !important;\n color: var(--text-disabled-color) !important;\n border-color: var(--border-disabled-color) !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(--text-disabled-color);\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(--text-disabled-color);\n }\n :host([rank*=tertiary]) .button {\n transition: border 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n background: transparent;\n border-color: transparent;\n color: rgb(0, 122, 199);\n --color: rgb(0, 122, 199);\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:not(:disabled, .disabled, [aria-disabled]):hover {\n background-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\n color: rgb(255, 255, 255);\n --background: rgb(25.4035777564, 154.8940067842, 227.221994169);\n --color: rgb(255, 255, 255);\n border-color: rgb(25.4035777564, 154.8940067842, 227.221994169);\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-color: rgb(0, 122, 199);\n color: rgb(255, 255, 255);\n --background: rgb(0, 122, 199);\n --color: rgb(255, 255, 255);\n border-color: rgb(0, 122, 199);\n }\n :host([rank*=tertiary]) .button:disabled, :host([rank*=tertiary]) .button.disabled, :host([rank*=tertiary]) .button[aria-disabled=true] {\n background: var(--sg-form-control-bg-disabled) !important;\n color: var(--text-disabled-color) !important;\n border-color: var(--border-disabled-color) !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(--text-disabled-color);\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(--text-disabled-color);\n }\n /* stylelint-disable */\n :host([variant=negative]:not([rank=secondary], [rank=tertiary])) .button,\n :host([variant=negative][rank=primary]) .button {\n background: rgb(187, 0, 12);\n border-color: rgb(187, 0, 12);\n color: #fff;\n --color: #fff;\n transition: border 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\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-color: rgb(216, 26, 26);\n color: rgb(255, 255, 255);\n --background: rgb(216, 26, 26);\n --color: rgb(255, 255, 255);\n border-color: rgb(216, 26, 26);\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-color: rgb(187, 0, 12);\n color: rgb(255, 255, 255);\n --background: rgb(187, 0, 12);\n --color: rgb(255, 255, 255);\n border-color: rgb(187, 0, 12);\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(--form-control-primary-bg-disabled) !important;\n color: var(--text-primary-disabled-color) !important;\n border-color: var(--border-primary-disabled-color) !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(--text-disabled-color);\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(--text-disabled-color);\n }\n /* stylelint-enable */\n :host([variant=negative][rank=secondary]) .button,\n :host([variant=negative][rank=tertiary]) .button {\n color: rgb(187, 0, 12);\n --color: rgb(187, 0, 12);\n border-color: transparent;\n transition: border 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\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-color: rgb(216, 26, 26);\n color: rgb(255, 255, 255);\n --background: rgb(216, 26, 26);\n --color: rgb(255, 255, 255);\n border-color: rgb(216, 26, 26);\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-color: rgb(187, 0, 12);\n color: rgb(255, 255, 255);\n --background: rgb(187, 0, 12);\n --color: rgb(255, 255, 255);\n border-color: rgb(187, 0, 12);\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: rgb(187, 0, 12);\n }\n :host([variant=ghost]) .button {\n transition: border 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;\n border-color: rgb(51, 51, 51);\n color: rgb(51, 51, 51);\n --color: rgb(51, 51, 51);\n }\n :host([variant=ghost]) .button:not(:disabled, .disabled, [aria-disabled]):hover {\n background-color: rgb(51, 51, 51);\n color: rgb(255, 255, 255);\n --background: rgb(51, 51, 51);\n --color: rgb(255, 255, 255);\n border-color: rgb(51, 51, 51);\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-color: rgb(51, 51, 51);\n color: rgb(255, 255, 255);\n --background: rgb(51, 51, 51);\n --color: rgb(255, 255, 255);\n border-color: rgb(51, 51, 51);\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:focus-visible {\n background-color: rgb(51, 51, 51);\n color: rgb(255, 255, 255);\n --background: rgb(51, 51, 51);\n --color: rgb(255, 255, 255);\n border-color: rgb(51, 51, 51) !important;\n }\n :host([variant=ghost]) .button:disabled, :host([variant=ghost]) .button.disabled, :host([variant=ghost]) .button[aria-disabled=true] {\n color: var(--text-disabled-color) !important;\n border-color: var(--border-disabled-color) !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(--text-disabled-color);\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(--text-disabled-color);\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(--grey-500);\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}";
1
+ 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 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: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 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 {\n transition: border var(--gds-sys-transition);\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: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 {\n transition: border var(--gds-sys-transition);\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: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 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: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: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}";
2
2
  export default styles;
package/components/calendar/calendar.trans.styles.scss.js CHANGED
@@ -1,2 +1,2 @@
1
- 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/* medium */\n/* regular */\n/* regular */\n/* regular */\n/* hover */\n/* focus */\n/* selected */\n/* highlighted */\n/* active */\n/* disabled */\n/* today */\n/* weekend */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n @layer _base {\n :host {\n display: flex;\n justify-content: center;\n }\n @media (max-width: 35.98em) {\n :host {\n flex-wrap: wrap;\n overflow-y: auto;\n }\n }\n :host table {\n border-spacing: 0;\n }\n :host th,\n :host td {\n box-sizing: border-box;\n height: 2.75rem;\n text-align: center;\n width: 2.75rem;\n }\n :host thead {\n /* days */\n }\n :host thead th {\n background: var(--sg-bg-level-2);\n border-bottom: solid 1px var(--sg-grey-300);\n font-weight: 400;\n top: 0;\n }\n @media (max-width: 35.98em) {\n :host thead th {\n position: sticky;\n }\n }\n :host tbody {\n /* week numbers */\n /* dates */\n }\n :host tbody th {\n font-weight: 400;\n }\n :host tbody td {\n border: solid 1px transparent;\n font-weight: 500;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n /* weekend */\n /* today */\n /* hover */\n /* focus */\n /* selected */\n /* highlighted */\n /* active (pressed) */\n /* disabled */\n }\n :host tbody td.sg-date-holiday:not(.disabled) {\n background: var(--sg-bg-level-2);\n color: hsl(var(--sg-hsl-red-2));\n }\n :host tbody td.today {\n background: transparent;\n border-radius: 4px;\n box-shadow: inset 0 0 0 2px var(--grey-1000);\n color: var(--grey-1000);\n }\n :host tbody td:hover:not(.disabled) {\n background: var(--grey-500);\n border: solid 1px var(--sg-bg-level-2);\n border-radius: 4px;\n color: var(--gds-sys-color-font);\n cursor: pointer;\n }\n :host tbody td:focus-visible:focus:not(:focus-visible) {\n box-shadow: none;\n outline: 0;\n }\n :host tbody td:focus-visible:focus, :host tbody td:focus-visible:focus-visible {\n outline-color: var(--gds-sys-color-focus-outline);\n outline-style: solid;\n outline-width: 0.125rem;\n outline-offset: 0.125rem;\n }\n :host tbody td:focus-visible:not(.disabled) {\n border: solid 1px var(--sg-bg-level-2);\n border-radius: 4px;\n cursor: pointer;\n position: relative;\n z-index: 0;\n }\n :host tbody td[aria-selected=true] {\n background: var(--grey-1000);\n border: solid 1px var(--sg-bg-level-2);\n border-radius: 4px;\n color: hsl(var(--sg-hsl-white));\n }\n :host tbody td[tabindex=\"0\"] {\n border-radius: 4px;\n }\n :host tbody td:hover:active:not(.disabled) {\n background: var(--grey-1000);\n border: solid 1px var(--sg-bg-level-2);\n border-radius: 4px;\n color: hsl(var(--sg-hsl-white));\n }\n :host tbody td.disabled {\n background: hsl(var(--sg-hsl-disabled-background));\n border: solid 1px var(--sg-bg-level-2);\n border-radius: 4px;\n color: hsl(var(--sg-hsl-disabled-color));\n cursor: not-allowed;\n font-weight: 400;\n }\n :host tbody td.disabled.sg-date-holiday {\n color: hsla(var(--sg-hsl-red-2), 0.25);\n }\n :host tbody td.disabled .number,\n :host tbody td.disabled .indicator-dot {\n --_color: hsl(var(--sg-hsl-disabled-color)) !important;\n }\n :host tbody td.custom-date {\n position: relative;\n }\n :host tbody .number {\n color: var(--_color, \"currentColor\");\n }\n :host tbody .indicator-dot {\n display: block;\n width: 0.375rem;\n height: 0.375rem;\n top: 1.5rem;\n border-radius: 50%;\n margin: auto;\n position: absolute;\n inset-block-end: 0.125rem;\n inset-inline: 0;\n background-color: var(--_color);\n }\n :host table {\n flex-grow: 1;\n width: 100%;\n }\n :host table td {\n width: 3rem;\n height: 3rem;\n }\n }\n @layer _modifiers {\n .week-number {\n border-right: solid 1px var(--gds-ref-pallet-base300);\n font-weight: 400;\n pointer-events: none;\n }\n }\n}";
1
+ const styles = "/* stylelint-disable max-nesting-depth */\n/**\n * Assert that a map is in ascending order\n * @mixin assert-ascending\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Assert that the first breakpoint in a map starts at zero\n * @mixin assert-starts-at-zero\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Check if a value is important\n * @function is-important\n * @param {Boolean} $important - Whether the value is important\n * @return {String} - \"!important\" if true, otherwise an empty string\n */\n/**\n * Replace a substring in a string\n * @function str-replace\n * @param {String} $string - The original string\n * @param {String} $search - The substring to replace\n * @param {String} $replace - The replacement string\n * @return {String} - The updated string\n */\n/**\n * Convert a map to its negative variant\n * @function negativify-map\n * @param {Map} $map - The map to convert\n * @return {Map} - The negative variant of the map\n */\n/**\n * Generate utility classes\n * @mixin generate-utility\n * @param {Map} $utility - Utility map\n * @param {String} $infix - Infix for class names\n * @param {Boolean} $is-rfs-media-query - Whether to use RFS media query\n */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * @function luminance\n * @param {Color} $color - The color to calculate luminance for\n * @return {Number} - The luminance value\n */\n/**\n * Calculate the contrast ratio between two colors.\n * @function color-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @return {Number} - The contrast ratio\n */\n/**\n * Remove the unit of a length\n * @function strip-unit\n * @param {Number} $number - Number to remove unit from\n * @return {Number} - Unitless number\n */\n/**\n * Validate font size\n * @function validate-font-size\n * @param {Number} $size - Font size to validate\n * @return {Number} - Validated font size in pixels\n */\n/**\n * Get ratio for WCAG level\n * @function get-ratio\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @return {Number} - Ratio value\n */\n/**\n * Determine if a color is light or dark\n * @function light-or-dark\n * @param {Color} $color - The color to check\n * @return {String} - \"light\" or \"dark\"\n */\n/**\n * Get the most legible color (black or white) for a given background color\n * @function most-legible-color\n * @param {Color} $color - The background color\n * @return {Color} - The most legible color\n */\n/**\n * Get the desired color combination for foreground and background colors\n * @function desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n * @return {List} - List containing background and foreground colors\n */\n/**\n * @mixin desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n */\n/**\n * Get an accessible color for a given foreground and background color\n * @function a11y-color\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @param {Number} $maxOffset - Maximum offset\n * @param {Boolean} $darkMode - Is dark mode\n * @param {Number} $ratio - Contrast ratio\n * @return {Color} - Accessible color\n */\n/**\n * Get the maximum contrast color\n * @function max-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Color} $max - Maximum contrast color\n * @return {Color} - Maximum contrast color\n */\n/**\n * Get the RGB values of a color as a string\n * @function stripped-rgb\n * @param {Color} $color - The color\n * @return {String} - RGB values as a string\n */\n/**\n * Get the HSL values of a color as a string\n * @function stripped-hsl\n * @param {Color} $color - The color\n * @return {String} - HSL values as a string\n */\n/**\n * Convert a map of colors to a map of HSL values\n * @function hsl-map\n * @param {Map} $colors - Map of colors\n * @return {Map} - Map of HSL values\n */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\n/**\n * Breakpoint viewport sizes and media queries.\n *\n * Breakpoints are defined as a map of (name: minimum width), order from small to large:\n *\n * (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n *\n * The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n */\n/**\n * Name of the next breakpoint, or null for the last breakpoint.\n *\n * >> breakpoint-next(sm)\n * md\n * >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * md\n * >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n * md\n */\n/**\n * Minimum breakpoint width. Null for the smallest (first) breakpoint.\n *\n * >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * 576px\n */\n/**\n * Maximum breakpoint width.\n * The maximum value is reduced by 0.02px to work around the limitations of\n * `min-` and `max-` prefixes and viewports with fractional widths.\n * See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n * Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n * See https://bugs.webkit.org/show_bug.cgi?id=178261\n *\n * >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * 767.98px\n */\n/**\n * Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n * Useful for making responsive utilities.\n *\n * >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * \"\" (Returns a blank string)\n * >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * \"-sm\"\n */\n/**\n * Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n * Makes the @content apply to the given breakpoint and wider.\n */\n/**\n * Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n * Makes the @content apply to the given breakpoint and narrower.\n */\n/**\n * Media that spans multiple breakpoint widths.\n * Makes the @content apply between the min and max breakpoints\n */\n/**\n * Media between the breakpoint's minimum and maximum widths.\n * No minimum for the smallest breakpoint, and no maximum for the largest one.\n * Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\n */\n/* medium */\n/* regular */\n/* regular */\n/* regular */\n/* hover */\n/* focus */\n/* selected */\n/* highlighted */\n/* active */\n/* disabled */\n/* today */\n/* weekend */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n @layer _base {\n :host {\n display: flex;\n justify-content: center;\n }\n @media (max-width: 35.98em) {\n :host {\n flex-wrap: wrap;\n overflow-y: auto;\n }\n }\n :host table {\n border-spacing: 0;\n }\n :host th,\n :host td {\n box-sizing: border-box;\n height: 2.75rem;\n text-align: center;\n width: 2.75rem;\n }\n :host thead {\n /* days */\n }\n :host thead th {\n background: var(--gds-sys-color-background-primary);\n border-bottom: solid 1px var(--gds-sys-color-base-300);\n font-weight: 400;\n top: 0;\n }\n @media (max-width: 35.98em) {\n :host thead th {\n position: sticky;\n }\n }\n :host tbody {\n /* week numbers */\n /* dates */\n }\n :host tbody th {\n font-weight: 400;\n }\n :host tbody td {\n border: solid 1px transparent;\n font-weight: 500;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n /* weekend */\n /* today */\n /* hover */\n /* focus */\n /* selected */\n /* highlighted */\n /* active (pressed) */\n /* disabled */\n }\n :host tbody td.sg-date-holiday:not(.disabled) {\n background: var(--gds-sys-color-background-primary);\n color: var(--gds-sys-color-text-error);\n }\n :host tbody td.today {\n background: transparent;\n border-radius: 4px;\n box-shadow: inset 0 0 0 2px var(--gds-sys-color-base-800);\n color: var(--gds-sys-color-base-800);\n }\n :host tbody td:hover:not(.disabled) {\n background: var(--gds-sys-color-base-300);\n border: solid 1px var(--gds-sys-color-background-primary);\n border-radius: 4px;\n color: var(--gds-sys-color-text-primary);\n cursor: pointer;\n }\n :host tbody td:focus-visible:focus:not(:focus-visible) {\n box-shadow: none;\n outline: 0;\n }\n :host tbody td:focus-visible:focus, :host tbody td:focus-visible:focus-visible {\n outline-color: var(--gds-sys-color-focus-outline);\n outline-style: solid;\n outline-width: 0.125rem;\n outline-offset: 0.125rem;\n }\n :host tbody td:focus-visible:not(.disabled) {\n border: solid 1px var(--gds-sys-color-background-primary);\n border-radius: 4px;\n cursor: pointer;\n position: relative;\n z-index: 0;\n }\n :host tbody td[aria-selected=true] {\n background: var(--gds-sys-color-base-800);\n border: solid 1px var(--gds-sys-color-background-primary);\n border-radius: 4px;\n color: var(--gds-sys-color-text-inverted);\n }\n :host tbody td[tabindex=\"0\"] {\n border-radius: 4px;\n }\n :host tbody td:hover:active:not(.disabled) {\n background: var(--gds-sys-color-base-800);\n border: solid 1px var(--gds-sys-color-background-primary);\n border-radius: 4px;\n color: var(--gds-sys-color-text-inverted);\n }\n :host tbody td.disabled {\n background: var(--gds-sys-color-base-200);\n border: solid 1px var(--gds-sys-color-background-primary);\n border-radius: 4px;\n color: var(--gds-sys-color-text-disabled);\n cursor: not-allowed;\n font-weight: 400;\n }\n :host tbody td.disabled.sg-date-holiday {\n color: var(--gds-sys-color-text-error);\n }\n :host tbody td.disabled .number,\n :host tbody td.disabled .indicator-dot {\n --_color: var(--gds-sys-color-text-disabled) !important;\n }\n :host tbody td.custom-date {\n position: relative;\n }\n :host tbody .number {\n color: var(--_color, \"currentColor\");\n }\n :host tbody .indicator-dot {\n display: block;\n width: 0.375rem;\n height: 0.375rem;\n top: 1.5rem;\n border-radius: 50%;\n margin: auto;\n position: absolute;\n inset-block-end: 0.125rem;\n inset-inline: 0;\n background-color: var(--_color);\n }\n :host table {\n flex-grow: 1;\n width: 100%;\n }\n :host table td {\n width: 3rem;\n height: 3rem;\n }\n }\n @layer _modifiers {\n .week-number {\n border-right: solid 1px var(--gds-sys-color-base-300);\n font-weight: 400;\n pointer-events: none;\n }\n }\n}";
2
2
  export default styles;
package/components/context-menu/context-menu.trans.styles.scss.js CHANGED
@@ -1,2 +1,2 @@
1
- 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 */\ni.sg-icon {\n font-size: 0;\n width: 1rem;\n height: 1rem;\n display: inline-block;\n}\ni.sg-icon::before {\n content: \"\";\n display: inline-block;\n background: var(--color);\n width: 100%;\n height: 100%;\n -webkit-mask-repeat: no-repeat;\n mask-repeat: no-repeat;\n}\ni.sg-icon.sg-icon-calendar::before {\n -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 248h80v-56H48v56zm0 48v64h80v-64H48zm128 0v64h96v-64h-96zm144 0v64h80v-64h-80zm80-104h-80v56h80v-56zm0 216h-80v56h64c8.8 0 16-7.2 16-16v-40zm-128 0h-96v56h96v-56zm-144 0H48v40c0 8.8 7.16 16 16 16h64v-56zm144-216h-96v56h96v-56z '/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-calendar-range::before {\n -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M96 288c0-17.7 14.3-32 32-32s32 14.3 32 32-14.3 32-32 32-32-14.3-32-32zm224 64c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32zm-128-64c0-13.3 10.7-24 24-24h112c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24zm40 72c13.3 0 24 10.7 24 24s-10.7 24-24 24H120c-13.3 0-24-10.7-24-24s10.7-24 24-24h112zM152 64h144V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40h40c35.3 0 64 28.65 64 64v320c0 35.3-28.7 64-64 64H64c-35.35 0-64-28.7-64-64V128c0-35.35 28.65-64 64-64h40V24c0-13.25 10.7-24 24-24s24 10.75 24 24v40zM48 448c0 8.8 7.16 16 16 16h320c8.8 0 16-7.2 16-16V192H48v256z'/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-ellipsis::before {\n -webkit-mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3C!--! Font Awesome Pro 6.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc.--%3E%3Cpath d='M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z'/%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-grip-vertical::before {\n -webkit-mask-image: url(\"data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E\");\n mask-image: url(\"data:image/svg+xml, %3Csvg height='1em' viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z' /%3E%3C/svg%3E\");\n}\ni.sg-icon.sg-icon-next::before {\n background: none;\n border-bottom: 2px solid;\n border-left: 2px solid;\n content: \"\";\n display: block;\n height: 12px;\n margin-left: -10px;\n margin-top: 2px;\n transform: translate(75%) rotate(-135deg) scaleZ(-1);\n transition: transform 0.3s ease-in;\n width: 12px;\n}\ni.sg-icon.sg-icon-previous::before {\n background: none;\n border-bottom: 2px solid;\n border-left: 2px solid;\n content: \"\";\n display: block;\n height: 12px;\n margin-left: -4px;\n margin-top: 2px;\n transform: translate(75%) rotate(45deg) scaleZ(-1);\n transition: transform 0.3s ease-in;\n width: 12px;\n}\ni.sg-icon.sg-icon-ellipsis::before {\n margin-right: -2px;\n}\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: var(--sg-border-radius);\n border: solid var(--sg-border-width) var(--sg-border-color);\n font-weight: 500;\n min-height: 2.75rem;\n align-items: center;\n display: inline-flex;\n justify-content: center;\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 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 @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 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 .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 0.3s cubic-bezier(0.23, 1, 0.32, 1);\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-ref-pallet-base800);\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-ref-pallet-base300);\n }\n }\n}";
1
+ 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 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 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 .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}";
2
2
  export default styles;
package/components/datepicker/datepicker.trans.styles.scss.js CHANGED
@@ -1,2 +1,2 @@
1
- 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: flex;\n flex-direction: column;\n width: 100%;\n contain: layout;\n isolation: isolate;\n gap: var(--gds-sys-space-xs);\n }\n [role=spinbutton] {\n display: inline-block;\n }\n [role=spinbutton]:focus {\n background: color-mix(in srgb, var(--gds-sys-color-blue) 50%, transparent);\n outline: none;\n }\n [role=spinbutton]::-moz-selection {\n background: transparent;\n }\n [role=spinbutton]::selection {\n background: transparent;\n }\n}";
1
+ 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: flex;\n flex-direction: column;\n width: 100%;\n contain: layout;\n isolation: isolate;\n gap: var(--gds-sys-space-xs);\n }\n [role=spinbutton] {\n display: inline-block;\n }\n [role=spinbutton]:focus {\n background: color-mix(in srgb, var(--gds-sys-color-blue) 50%, transparent);\n outline: none;\n }\n [role=spinbutton]::-moz-selection {\n background: transparent;\n }\n [role=spinbutton]::selection {\n background: transparent;\n }\n}";
2
2
  export default styles;
package/components/dropdown/dropdown.styles.js CHANGED
@@ -11,6 +11,12 @@ const style = css`
11
11
 
12
12
  #field::part(_base) {
13
13
  cursor: pointer;
14
+ block-size: auto;
15
+ }
16
+
17
+ #clear-btn {
18
+ margin-top: calc(-1 * var(--gds-sys-space-xs));
19
+ margin-bottom: calc(-1 * var(--gds-sys-space-xs));
14
20
  }
15
21
 
16
22
  button#trigger {
package/components/formatted-text/date/date-time-formatter.js CHANGED
@@ -12,9 +12,7 @@ const dateTimeFormats = {
12
12
  dateLong: (value, locale) => new Intl.DateTimeFormat(locale, { dateStyle: "long" }).format(
13
13
  convertValueToDate(value)
14
14
  ),
15
- dateLongWithWeekday: (value, locale) => new Intl.DateTimeFormat(locale, { dateStyle: "full" }).format(
16
- convertValueToDate(value)
17
- ),
15
+ dateLongWithWeekday: (value, locale) => new Intl.DateTimeFormat(locale, { dateStyle: "full" }).format(convertValueToDate(value)).replace(",", ""),
18
16
  dateShort: (value, locale) => {
19
17
  const formatter = new Intl.DateTimeFormat(locale, { dateStyle: "medium" });
20
18
  if (locale?.toLowerCase() === "sv-se") {
package/components/grouped-list/grouped-list.trans.styles.scss.js CHANGED
@@ -1,2 +1,2 @@
1
- const styles = "@layer base, reset, transitional-styles;\n@layer transitional-styles {\n @layer _base, _overrides;\n :host {\n display: block;\n list-style: none;\n }\n @layer _base {\n .gds-list-heading {\n background-color: var(--gds-ref-pallet-base200, #e9e9e9);\n font-size: 0.875rem;\n font-weight: 500;\n padding: 0.5rem 1rem;\n }\n ::slotted([gds-element=gds-list-item]) {\n all: revert;\n border-bottom: 1px solid var(--gds-ref-pallet-base200, #e9e9e9);\n display: flex;\n gap: 0.25rem;\n justify-content: space-between;\n padding: 1rem;\n }\n }\n}";
1
+ const styles = "@layer base, reset, transitional-styles;\n@layer transitional-styles {\n @layer _base, _overrides;\n :host {\n display: block;\n list-style: none;\n }\n @layer _base {\n .gds-list-heading {\n background-color: var(--gds-sys-color-base-200, #e9e9e9);\n font-size: 0.875rem;\n font-weight: 500;\n padding: 0.5rem 1rem;\n }\n ::slotted([gds-element=gds-list-item]) {\n all: revert;\n border-bottom: 1px solid var(--gds-sys-color-base-200, #e9e9e9);\n display: flex;\n gap: 0.25rem;\n justify-content: space-between;\n padding: 1rem;\n }\n }\n}";
2
2
  export default styles;
package/components/popover/popover.trans.styles.scss.js CHANGED
@@ -1,2 +1,2 @@
1
- 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}";
1
+ 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}";
2
2
  export default styles;
package/components/segmented-control/segment/segment.trans.styles.scss.js CHANGED
@@ -1,2 +1,2 @@
1
- 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}";
1
+ 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}";
2
2
  export default styles;
package/components/segmented-control/segmented-control.trans.styles.css.js CHANGED
@@ -1,2 +1,2 @@
1
- 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";
1
+ 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";
2
2
  export default styles;
package/components/theme/chlorophyll-tokens.scss.js CHANGED
@@ -1,2 +1,2 @@
1
- const styles = "/**\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 max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\n/* stylelint-disable */\n/* stylelint-enable */\n/* stylelint-disable */\n/* Mixin for adding themes,\nThemes such as dark-mode, high-contrast mode etc.\nValues for light mode are used by default.\n*/\n/* mixin for generating css variables from map with optional prefix */\n/**\n * Do not edit directly, this file was auto-generated.\n */\n/**\n * Do not edit directly, this file was auto-generated.\n */\n:host {\n display: contents;\n --gds-sys-shape-corner-none: 0;\n --gds-sys-shape-corner-small: 0.125rem;\n --gds-sys-shape-corner-medium: 0.25rem;\n --gds-sys-shape-corner-round: 50%;\n --gds-comp-checkbox-container-height: 1rem;\n --gds-comp-checkbox-container-width: 1rem;\n --gds-comp-checkbox-container-color: var(--gds-sys-color-background-primary);\n --gds-comp-checkbox-container-color-disabled: var(--gds-sys-color-base-300);\n --gds-comp-checkbox-border-color: var(--gds-sys-color-base-900);\n --gds-comp-checkbox-border-radius: var(--gds-sys-shape-corner-small);\n --gds-comp-checkbox-hover-border-color: var(--gds-sys-color-base-600);\n --gds-comp-checkbox-container-color-selected: var(--gds-sys-color-base-900);\n --gds-comp-checkbox-border-color-selected: var(--gds-sys-color-text-inverted);\n --gds-comp-checkbox-border-color-focus: var(--gds-sys-color-dark-blue-2);\n}\n\n:host([color-scheme=light]) {\n --gds-ref-color-white: #ffffff;\n --gds-ref-color-black: #000000;\n --gds-ref-pallet-base000: hsl(0 0% 100%);\n --gds-ref-pallet-base100: hsl(0, 0%, 97%);\n --gds-ref-pallet-base200: hsl(0, 0%, 91%);\n --gds-ref-pallet-base300: hsl(0, 0%, 87%);\n --gds-ref-pallet-base400: hsl(0, 0%, 81%);\n --gds-ref-pallet-base500: hsl(0, 0%, 68%);\n --gds-ref-pallet-base600: hsl(0, 0%, 53%);\n --gds-ref-pallet-base700: hsl(0, 0%, 29%);\n --gds-ref-pallet-base800: hsl(0, 0%, 20%);\n --gds-ref-pallet-base900: hsl(0, 0%, 10%);\n --gds-ref-pallet-base1000: hsl(0 0% 0%);\n --gds-sys-color-blue: #41b0ee;\n --gds-sys-color-blue-dark-1: #0092e1;\n --gds-sys-color-blue-dark-2: #007ac7;\n --gds-sys-color-surface: var(--gds-ref-pallet-base000);\n --gds-sys-color-base: var(--gds-ref-pallet-base800);\n --gds-sys-color-font: var(--gds-ref-pallet-base800);\n --gds-sys-color-base-container: var(--gds-ref-pallet-base500);\n --gds-sys-color-focus-outline: var(--gds-ref-pallet-base1000);\n --gds-sys-color-blue: #41b0ee;\n --gds-sys-color-dark-blue-1: #41b0ee;\n --gds-sys-color-dark-blue-2: #007ac7;\n --gds-sys-color-green: #60cd18;\n --gds-sys-color-dark-green-1: #45b400;\n --gds-sys-color-dark-green-2: #308800;\n --gds-sys-color-yellow: #ffc500;\n --gds-sys-color-dark-yellow-1: #ffb400;\n --gds-sys-color-dark-yellow-2: #f8a000;\n --gds-sys-color-text-primary: #333333;\n --gds-sys-color-text-secondary: #ababab;\n --gds-sys-color-text-white: #ffffff;\n --gds-sys-color-text-black: #333333;\n --gds-sys-color-text-inverted: #ffffff;\n --gds-sys-color-text-link: #0062bc;\n --gds-sys-color-text-error: #9f000a;\n --gds-sys-color-text-disabled: #adadad;\n --gds-sys-color-red: #f03529;\n --gds-sys-color-dark-red-1: #d81a1a;\n --gds-sys-color-dark-red-2: #bb000c;\n --gds-sys-color-purple: #673ab6;\n --gds-sys-color-dark-purple-1: #4f2c99;\n --gds-sys-color-dark-purple-2: #3f2587;\n --gds-sys-color-white: #ffffff;\n --gds-sys-color-black: #000000;\n --gds-sys-color-background-primary: #ffffff;\n --gds-sys-color-background-secondary: #eeeeee;\n --gds-sys-color-base-100: #f8f8f8;\n --gds-sys-color-base-200: #e9e9e9;\n --gds-sys-color-base-300: #dedede;\n --gds-sys-color-base-400: #cecece;\n --gds-sys-color-base-500: #adadad;\n --gds-sys-color-base-600: #868686;\n --gds-sys-color-base-700: #494949;\n --gds-sys-color-base-800: #333333;\n --gds-sys-color-base-900: #1a1a1a;\n --gds-sys-color-hover-10: rgba(255, 255, 255, 0.1);\n --gds-sys-color-hover-20: rgba(255, 255, 255, 0.2);\n --heading-primary-color: rgb(0, 0, 0);\n --text-primary-color: rgb(51, 51, 51);\n --text-secondary-color: rgb(134, 134, 134);\n --text-disabled-color: var(--gds-sys-color-base-600);\n --text-primary-disabled-color: var(--gds-sys-color-base-600);\n --border-color: rgba(0, 0, 0, 0.17);\n --border-secondary-color: rgba(0, 0, 0, 0.1);\n --border-disabled-color: var(--gds-sys-color-base-500);\n --border-primary-disabled-color: var(--gds-sys-color-base-500);\n --border-color-invalid: rgb(159, 0, 10);\n --border-color-valid: rgb(55, 157, 0);\n --checkbox-checkmark-disabled-color: rgb(255, 255, 255);\n --form-control-primary-bg-disabled: var(--gds-sys-color-base-200);\n --link-color-dark: rgb(51, 51, 51);\n --link-color-dark-visited: rgb(73, 73, 73);\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-primary-background: rgb(0, 122, 199);\n --intent-primary-color: #fff;\n --intent-primary-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-secondary-background: rgb(222, 222, 222);\n --intent-secondary-color: black;\n --intent-secondary-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-info-background: rgb(0, 122, 199);\n --intent-info-color: #fff;\n --intent-info-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-success-background: rgb(48.4503158901, 133.9460147801, 2.3496939396);\n --intent-success-color: #fff;\n --intent-success-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-warning-background: rgb(255, 197, 0);\n --intent-warning-color: black;\n --intent-warning-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-danger-background: rgb(159, 0, 10);\n --intent-danger-color: #fff;\n --intent-danger-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-light-background: rgb(238, 238, 238);\n --intent-light-color: black;\n --intent-light-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-dark-background: rgb(51, 51, 51);\n --intent-dark-color: #fff;\n --intent-dark-fadable-color: 255, 255, 255;\n --grey-1100: rgb(26, 26, 26);\n --grey-1000: rgb(51, 51, 51);\n --grey-900: rgb(73, 73, 73);\n --grey-800: rgb(134, 134, 134);\n --grey-700: rgb(173, 173, 173);\n --grey-600: rgb(206, 206, 206);\n --grey-500: rgb(222, 222, 222);\n --grey-400: rgb(233, 233, 233);\n --grey-300: rgb(238, 238, 238);\n --grey-200: rgb(248, 248, 248);\n --grey-100: rgb(255, 255, 255);\n color: var(--text-primary-color);\n --gds-sys-outline-color: #333333;\n --gds-comp-chips-fr-color: #333333;\n --gds-comp-chips-bg-color: #ffffff;\n --gds-comp-chips-br-color: #333333;\n --gds-comp-chips-fr-color-hover: #ffffff;\n --gds-comp-chips-bg-color-hover: #494949;\n --gds-comp-chips-br-color-hover: #494949;\n --gds-comp-chips-bg-color-active: #333333;\n --gds-comp-chips-bg-color-action: #333333;\n /* generate css variables */\n --sg-z-index-datepicker: 995;\n --sg-z-index-dropdown-backdrop: 990;\n --sg-z-index-dropdown: 2000;\n --sg-z-index-sticky: 1020;\n --sg-z-index-fixed: 1030;\n --sg-z-index-modal-backdrop: 1040;\n --sg-z-index-modal: 1050;\n --sg-z-index-popover: 1060;\n --sg-z-index-tooltip: 1070;\n --sg-text-primary: #333333;\n --sg-text-secondary: #333333;\n --sg-form-control-bg: #fff;\n --sg-form-control-bg-disabled: #eeeeee;\n --sg-border-color: var(--gds-sys-color-base-600);\n --sg-border-width: 1px;\n --sg-border-width-50: 0.5px;\n --sg-border-radius: 0.25rem;\n --sg-hsl-contrast: 0deg, 0%, 0%;\n --sg-hsl-light: 0deg, 0%, 97.2549019608%;\n --sg-hsl-light-contrast: 0deg, 0%, 0%;\n --sg-hsl-dark: 0deg, 0%, 10.1960784314%;\n --sg-hsl-dark-contrast: 0deg, 0%, 100%;\n --sg-hsl-black: 0deg, 0%, 0%;\n --sg-hsl-white: 0deg, 0%, 100%;\n --sg-hsl-blue-0: 201.5028901734deg, 83.5748792271%, 59.4117647059%;\n --sg-hsl-blue-1: 201.0666666667deg, 100%, 44.1176470588%;\n --sg-hsl-blue-2: 203.216080402deg, 100%, 39.0196078431%;\n --sg-hsl-green-0: 96.1325966851deg, 79.03930131%, 44.9019607843%;\n --sg-hsl-green-1: 97deg, 100%, 35.2941176471%;\n --sg-hsl-green-2: 98.8235294118deg, 100%, 26.6666666667%;\n --sg-hsl-yellow-0: 46.3529411765deg, 100%, 50%;\n --sg-hsl-yellow-1: 42.3529411765deg, 100%, 50%;\n --sg-hsl-yellow-2: 38.7096774194deg, 100%, 48.6274509804%;\n --sg-hsl-red-0: 3.6180904523deg, 86.8995633188%, 55.0980392157%;\n --sg-hsl-red-1: 0deg, 78.5123966942%, 47.4509803922%;\n --sg-hsl-red-2: 356.1497326203deg, 100%, 36.6666666667%;\n --sg-hsl-purple-0: 261.7741935484deg, 51.6666666667%, 47.0588235294%;\n --sg-hsl-purple-1: 259.2660550459deg, 55.3299492386%, 38.6274509804%;\n --sg-hsl-purple-2: 255.9183673469deg, 56.976744186%, 33.7254901961%;\n --sg-grey-100: #f8f8f8;\n --sg-grey-200: #e9e9e9;\n --sg-grey-300: #dedede;\n --sg-grey-400: #cecece;\n --sg-grey-500: #adadad;\n --sg-grey-600: #868686;\n --sg-grey-700: #494949;\n --sg-grey-800: #333333;\n --sg-grey-900: #1a1a1a;\n --sg-intent-neutral-hsl: 0deg, 0%, 91.3725490196%;\n --sg-intent-neutral-hsl-contrast: 0deg, 0%, 0%;\n --sg-intent-info-hsl: 203.216080402deg, 100%, 39.0196078431%;\n --sg-intent-info-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-success-hsl: 98.8235294118deg, 100%, 26.6666666667%;\n --sg-intent-success-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-warning-hsl: 46.3529411765deg, 100%, 50%;\n --sg-intent-warning-hsl-contrast: 0deg, 0%, 0%;\n --sg-intent-critical-hsl: 0deg, 78.5123966942%, 47.4509803922%;\n --sg-intent-critical-hsl-contrast: 0deg, 0%, 100%;\n --sg-hsl-disabled-background: 0deg, 0%, 97.2549019608%;\n --sg-hsl-disabled-color: 0deg, 0%, 67.8431372549%;\n --sg-bg-level-0: #eeeeee;\n --sg-bg-level-1: #fff;\n --sg-bg-level-2: #fff;\n --sg-bg-level-3: #fff;\n --sg-table-header-background: #1a1a1a;\n --sg-table-header-color: #fff;\n --sg-table-cell-padding-x: 0.5rem;\n --sg-table-cell-padding-y: 0.6875rem;\n --sg-table-border-width: 1px;\n --sg-table-border-color: var(--gds-sys-color-base-600);\n --sg-table-sort-icon-color: var(--gds-sys-color-base-600);\n --sg-table-sort-icon-color-active: #fff;\n --sg-skeleton-loader-highlight-color: #dedede;\n --sg-skeleton-loader-background-color: #f8f8f8;\n --sg-modal-background: #fff;\n --sg-modal-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-modal-backdrop-background: rgba(0, 0, 0, 0.5);\n --sg-popover-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-popover-background: #fff;\n --sg-popover-border-color: #007ac7;\n --sg-card-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-card-background: #fff;\n --sg-card-heading-color: #333333;\n --sg-card-color: #333333;\n --sg-card-border: solid 1px #fff;\n --sg-card-border-radius: 4px;\n --gds-sys-color-blue: #41b0ee;\n --gds-sys-color-dark-blue-1: #0092e1;\n --gds-sys-color-dark-blue-2: #007ac7;\n --gds-sys-color-green: #60cd18;\n --gds-sys-color-dark-green-1: #45b400;\n --gds-sys-color-dark-green-2: #308800;\n --gds-sys-color-yellow: #ffc500;\n --gds-sys-color-dark-yellow-1: #ffb400;\n --gds-sys-color-dark-yellow-2: #f8a000;\n --gds-sys-color-text-primary: #333333;\n --gds-sys-color-text-secondary: #ababab;\n --gds-sys-color-text-white: #ffffff;\n --gds-sys-color-text-black: #333333;\n --gds-sys-color-text-inverted: #ffffff;\n --gds-sys-color-text-link: #0062bc;\n --gds-sys-color-text-error: #9f000a;\n --gds-sys-color-text-disabled: #adadad;\n --gds-sys-color-red: #f03529;\n --gds-sys-color-dark-red-1: #d81a1a;\n --gds-sys-color-dark-red-2: #bb000c;\n --gds-sys-color-purple: #673ab6;\n --gds-sys-color-dark-purple-1: #4f2c99;\n --gds-sys-color-dark-purple-2: #3f2587;\n --gds-sys-color-white: #ffffff;\n --gds-sys-color-black: #000000;\n --gds-sys-color-background-primary: #ffffff;\n --gds-sys-color-background-secondary: #eeeeee;\n --gds-sys-color-base-100: #f8f8f8;\n --gds-sys-color-base-200: #e9e9e9;\n --gds-sys-color-base-300: #dedede;\n --gds-sys-color-base-400: #cecece;\n --gds-sys-color-base-500: #adadad;\n --gds-sys-color-base-600: #868686;\n --gds-sys-color-base-700: #494949;\n --gds-sys-color-base-800: #333333;\n --gds-sys-color-base-900: #1a1a1a;\n --gds-sys-color-hover-10: rgba(255, 255, 255, 0.1);\n --gds-sys-color-hover-20: rgba(255, 255, 255, 0.2);\n}\n\n/* force dark mode */\n:host([color-scheme=dark]) {\n --heading-primary-color: rgb(255, 255, 255);\n --text-primary-color: rgba(255, 255, 255, 0.9);\n --text-secondary-color: rgba(255, 255, 255, 0.6);\n --text-disabled-color: rgba(255, 255, 255, 0.07);\n --text-primary-disabled-color: rgba(255, 255, 255, 0.07);\n --border-color: rgb(51, 51, 51);\n --border-secondary-color: rgb(51, 51, 51);\n --border-disabled-color: rgb(44, 44, 44);\n --border-primary-disabled-color: rgb(44, 44, 44);\n --border-color-invalid: rgb(255, 89, 79);\n --border-color-valid: rgb(48, 136, 0);\n --checkbox-checkmark-disabled-color: rgb(51, 51, 51);\n --link-color-dark: rgb(179, 179, 179);\n --link-color-dark-visited: rgb(171, 171, 171);\n --form-control-primary-bg-disabled: rgba(255, 255, 255, 0.02);\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-primary-background: rgb(44, 156, 217);\n --intent-primary-color: #000;\n --intent-primary-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-secondary-background: rgb(51, 51, 51);\n --intent-secondary-color: #fff;\n --intent-secondary-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-info-background: rgb(44, 156, 217);\n --intent-info-color: #000;\n --intent-info-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-success-background: rgb(48, 136, 0);\n --intent-success-color: #000;\n --intent-success-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-warning-background: rgb(255, 225, 130);\n --intent-warning-color: #000;\n --intent-warning-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-danger-background: rgb(255, 89, 79);\n --intent-danger-color: #000;\n --intent-danger-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-light-background: rgb(39, 39, 39);\n --intent-light-color: #fff;\n --intent-light-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-dark-background: rgb(171, 171, 171);\n --intent-dark-color: #000;\n --intent-dark-fadable-color: 0, 0, 0;\n --grey-100: rgb(18, 18, 18);\n --grey-200: rgb(34, 34, 34);\n --grey-300: rgb(39, 39, 39);\n --grey-400: rgb(44, 44, 44);\n --grey-500: rgb(51, 51, 51);\n --grey-600: rgb(60, 60, 60);\n --grey-700: rgb(67, 67, 67);\n --grey-800: rgb(73, 73, 73);\n --grey-900: rgb(117, 117, 117);\n --grey-1000: rgb(171, 171, 171);\n --grey-1100: rgb(179, 179, 179);\n color: var(--text-primary-color);\n --gds-sys-outline-color: hsla(0, 0%, 87%, 0.2);\n --gds-comp-chips-fr-color: #dedede;\n --gds-comp-chips-bg-color: #2c2c2c;\n --gds-comp-chips-br-color: #2c2c2c;\n --gds-comp-chips-fr-color-hover: #dedede;\n --gds-comp-chips-bg-color-hover: #2c2c2c;\n --gds-comp-chips-br-color-hover: hsla(0, 0%, 87%, 0.2);\n --gds-comp-chips-bg-color-active: #222222;\n --gds-comp-chips-bg-color-action: #2c2c2c;\n --gds-sys-color-focus-outline: white;\n --gds-sys-color-font: var(--gds-sys-color-base-300);\n /* generate css variables */\n --sg-z-index-datepicker: 995;\n --sg-z-index-dropdown-backdrop: 990;\n --sg-z-index-dropdown: 2000;\n --sg-z-index-sticky: 1020;\n --sg-z-index-fixed: 1030;\n --sg-z-index-modal-backdrop: 1040;\n --sg-z-index-modal: 1050;\n --sg-z-index-popover: 1060;\n --sg-z-index-tooltip: 1070;\n --sg-text-primary: #dedede;\n --sg-text-secondary: #ababab;\n --sg-form-control-bg: rgba(0, 0, 0, 0.1);\n --sg-form-control-bg-disabled: rgba(255, 255, 255, 0.02);\n --sg-border-color: #ababab;\n --sg-border-width: 1px;\n --sg-border-width-50: 0.5px;\n --sg-border-radius: 0.25rem;\n --sg-hsl-contrast: 0deg, 0%, 100%;\n --sg-hsl-light: 0deg, 0%, 87.0588235294%;\n --sg-hsl-light-contrast: 0deg, 0%, 0%;\n --sg-hsl-dark: 0deg, 0%, 7.0588235294%;\n --sg-hsl-dark-contrast: 0deg, 0%, 100%;\n --sg-hsl-black: 0deg, 0%, 0%;\n --sg-hsl-white: 0deg, 0%, 100%;\n --sg-hsl-blue-0: 201.5028901734deg, 83.5748792271%, 59.4117647059%;\n --sg-hsl-blue-1: 201.0666666667deg, 100%, 44.1176470588%;\n --sg-hsl-blue-2: 203.216080402deg, 100%, 39.0196078431%;\n --sg-hsl-green-0: 96.1325966851deg, 79.03930131%, 44.9019607843%;\n --sg-hsl-green-1: 97deg, 100%, 35.2941176471%;\n --sg-hsl-green-2: 98.8235294118deg, 100%, 26.6666666667%;\n --sg-hsl-yellow-0: 46.3529411765deg, 100%, 50%;\n --sg-hsl-yellow-1: 42.3529411765deg, 100%, 50%;\n --sg-hsl-yellow-2: 38.7096774194deg, 100%, 48.6274509804%;\n --sg-hsl-red-0: 3.6180904523deg, 86.8995633188%, 55.0980392157%;\n --sg-hsl-red-1: 0deg, 78.5123966942%, 47.4509803922%;\n --sg-hsl-red-2: 356.1497326203deg, 100%, 36.6666666667%;\n --sg-hsl-purple-0: 261.7741935484deg, 51.6666666667%, 47.0588235294%;\n --sg-hsl-purple-1: 259.2660550459deg, 55.3299492386%, 38.6274509804%;\n --sg-hsl-purple-2: 255.9183673469deg, 56.976744186%, 33.7254901961%;\n --sg-grey-100: #dedede;\n --sg-grey-200: #ababab;\n --sg-grey-300: #757575;\n --sg-grey-400: #494949;\n --sg-grey-500: #333333;\n --sg-grey-600: #2c2c2c;\n --sg-grey-700: #272727;\n --sg-grey-800: #222222;\n --sg-grey-900: #121212;\n --sg-intent-neutral-hsl: 0deg, 0%, 20%;\n --sg-intent-neutral-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-info-hsl: 203.216080402deg, 100%, 39.0196078431%;\n --sg-intent-info-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-success-hsl: 98.8235294118deg, 100%, 26.6666666667%;\n --sg-intent-success-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-warning-hsl: 46.3529411765deg, 100%, 50%;\n --sg-intent-warning-hsl-contrast: 0deg, 0%, 0%;\n --sg-intent-critical-hsl: 0deg, 78.5123966942%, 47.4509803922%;\n --sg-intent-critical-hsl-contrast: 0deg, 0%, 100%;\n --sg-hsl-disabled-background: 0deg, 0%, 20%;\n --sg-hsl-disabled-color: 0deg, 0%, 45.8823529412%;\n --sg-bg-level-0: #121212;\n --sg-bg-level-1: #222222;\n --sg-bg-level-2: #272727;\n --sg-bg-level-3: #2c2c2c;\n --sg-table-header-background: #121212;\n --sg-table-header-color: #fff;\n --sg-table-cell-padding-x: 0.5rem;\n --sg-table-cell-padding-y: 0.6875rem;\n --sg-table-border-width: 1px;\n --sg-table-border-color: #ababab;\n --sg-table-sort-icon-color: #ababab;\n --sg-table-sort-icon-color-active: #fff;\n --sg-skeleton-loader-highlight-color: #494949;\n --sg-skeleton-loader-background-color: #2c2c2c;\n --sg-modal-background: #272727;\n --sg-modal-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-modal-backdrop-background: rgba(0, 0, 0, 0.5);\n --sg-popover-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-popover-background: #222222;\n --sg-popover-border-color: #007ac7;\n --sg-card-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-card-background: #222222;\n --sg-card-heading-color: #dedede;\n --sg-card-color: #dedede;\n --sg-card-border: solid 1px #222222;\n --sg-card-border-radius: 4px;\n --gds-sys-color-blue: #58b8ee;\n --gds-sys-color-dark-blue-1: #00adff;\n --gds-sys-color-dark-blue-2: #2c9cd9;\n --gds-sys-color-green: #60cd18;\n --gds-sys-color-dark-green-1: #75b44a;\n --gds-sys-color-dark-green-2: #308800;\n --gds-sys-color-yellow: #ffe182;\n --gds-sys-color-dark-yellow-1: #f0be47;\n --gds-sys-color-dark-yellow-2: #ebab39;\n --gds-sys-color-text-primary: #dedede;\n --gds-sys-color-text-secondary: #ababab;\n --gds-sys-color-text-white: #ffffff;\n --gds-sys-color-text-black: #333333;\n --gds-sys-color-text-inverted: #333333;\n --gds-sys-color-text-link: #2c9cd9;\n --gds-sys-color-text-error: #ff594f;\n --gds-sys-color-text-disabled: #464646;\n --gds-sys-color-red: #f7706d;\n --gds-sys-color-dark-red-1: #c82a29;\n --gds-sys-color-dark-red-2: #9e2120;\n --gds-sys-color-purple: #ad91dc;\n --gds-sys-color-dark-purple-1: #7e52cc;\n --gds-sys-color-dark-purple-2: #4a328f;\n --gds-sys-color-white: #ffffff;\n --gds-sys-color-black: #000000;\n --gds-sys-color-background-primary: #222222;\n --gds-sys-color-background-secondary: #1a1a1a;\n --gds-sys-color-base-100: #121212;\n --gds-sys-color-base-200: #222222;\n --gds-sys-color-base-300: #272727;\n --gds-sys-color-base-400: #2c2c2c;\n --gds-sys-color-base-500: #333333;\n --gds-sys-color-base-600: #494949;\n --gds-sys-color-base-700: #757575;\n --gds-sys-color-base-800: #ababab;\n --gds-sys-color-base-900: #dedede;\n --gds-sys-color-hover-10: rgba(0, 0, 0, 0.1);\n --gds-sys-color-hover-20: rgba(0, 0, 0, 0.2);\n}\n\n/* use preferred color scheme */\n@media (prefers-color-scheme: dark) {\n :host,\n :host([color-scheme=auto]) {\n --heading-primary-color: rgb(255, 255, 255);\n --text-primary-color: rgba(255, 255, 255, 0.9);\n --text-secondary-color: rgba(255, 255, 255, 0.6);\n --text-disabled-color: rgba(255, 255, 255, 0.07);\n --text-primary-disabled-color: rgba(255, 255, 255, 0.07);\n --border-color: rgb(51, 51, 51);\n --border-secondary-color: rgb(51, 51, 51);\n --border-disabled-color: rgb(44, 44, 44);\n --border-primary-disabled-color: rgb(44, 44, 44);\n --border-color-invalid: rgb(255, 89, 79);\n --border-color-valid: rgb(48, 136, 0);\n --checkbox-checkmark-disabled-color: rgb(51, 51, 51);\n --link-color-dark: rgb(179, 179, 179);\n --link-color-dark-visited: rgb(171, 171, 171);\n --form-control-primary-bg-disabled: rgba(255, 255, 255, 0.02);\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-primary-background: rgb(44, 156, 217);\n --intent-primary-color: #000;\n --intent-primary-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-secondary-background: rgb(51, 51, 51);\n --intent-secondary-color: #fff;\n --intent-secondary-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-info-background: rgb(44, 156, 217);\n --intent-info-color: #000;\n --intent-info-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-success-background: rgb(48, 136, 0);\n --intent-success-color: #000;\n --intent-success-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-warning-background: rgb(255, 225, 130);\n --intent-warning-color: #000;\n --intent-warning-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-danger-background: rgb(255, 89, 79);\n --intent-danger-color: #000;\n --intent-danger-fadable-color: 0, 0, 0;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-light-background: rgb(39, 39, 39);\n --intent-light-color: #fff;\n --intent-light-fadable-color: 255, 255, 255;\n /* try and adjust colors to get desired color combination,\n in this case adjust background to go with white foreground */\n --intent-dark-background: rgb(171, 171, 171);\n --intent-dark-color: #000;\n --intent-dark-fadable-color: 0, 0, 0;\n --grey-100: rgb(18, 18, 18);\n --grey-200: rgb(34, 34, 34);\n --grey-300: rgb(39, 39, 39);\n --grey-400: rgb(44, 44, 44);\n --grey-500: rgb(51, 51, 51);\n --grey-600: rgb(60, 60, 60);\n --grey-700: rgb(67, 67, 67);\n --grey-800: rgb(73, 73, 73);\n --grey-900: rgb(117, 117, 117);\n --grey-1000: rgb(171, 171, 171);\n --grey-1100: rgb(179, 179, 179);\n color: var(--text-primary-color);\n --gds-sys-outline-color: hsla(0, 0%, 87%, 0.2);\n --gds-comp-chips-fr-color: #dedede;\n --gds-comp-chips-bg-color: #2c2c2c;\n --gds-comp-chips-br-color: #2c2c2c;\n --gds-comp-chips-fr-color-hover: #dedede;\n --gds-comp-chips-bg-color-hover: #2c2c2c;\n --gds-comp-chips-br-color-hover: hsla(0, 0%, 87%, 0.2);\n --gds-comp-chips-bg-color-active: #222222;\n --gds-comp-chips-bg-color-action: #2c2c2c;\n --gds-sys-color-focus-outline: white;\n --gds-sys-color-font: var(--gds-sys-color-base-300);\n /* generate css variables */\n --sg-z-index-datepicker: 995;\n --sg-z-index-dropdown-backdrop: 990;\n --sg-z-index-dropdown: 2000;\n --sg-z-index-sticky: 1020;\n --sg-z-index-fixed: 1030;\n --sg-z-index-modal-backdrop: 1040;\n --sg-z-index-modal: 1050;\n --sg-z-index-popover: 1060;\n --sg-z-index-tooltip: 1070;\n --sg-text-primary: #dedede;\n --sg-text-secondary: #ababab;\n --sg-form-control-bg: rgba(0, 0, 0, 0.1);\n --sg-form-control-bg-disabled: rgba(255, 255, 255, 0.02);\n --sg-border-color: #ababab;\n --sg-border-width: 1px;\n --sg-border-width-50: 0.5px;\n --sg-border-radius: 0.25rem;\n --sg-hsl-contrast: 0deg, 0%, 100%;\n --sg-hsl-light: 0deg, 0%, 87.0588235294%;\n --sg-hsl-light-contrast: 0deg, 0%, 0%;\n --sg-hsl-dark: 0deg, 0%, 7.0588235294%;\n --sg-hsl-dark-contrast: 0deg, 0%, 100%;\n --sg-hsl-black: 0deg, 0%, 0%;\n --sg-hsl-white: 0deg, 0%, 100%;\n --sg-hsl-blue-0: 201.5028901734deg, 83.5748792271%, 59.4117647059%;\n --sg-hsl-blue-1: 201.0666666667deg, 100%, 44.1176470588%;\n --sg-hsl-blue-2: 203.216080402deg, 100%, 39.0196078431%;\n --sg-hsl-green-0: 96.1325966851deg, 79.03930131%, 44.9019607843%;\n --sg-hsl-green-1: 97deg, 100%, 35.2941176471%;\n --sg-hsl-green-2: 98.8235294118deg, 100%, 26.6666666667%;\n --sg-hsl-yellow-0: 46.3529411765deg, 100%, 50%;\n --sg-hsl-yellow-1: 42.3529411765deg, 100%, 50%;\n --sg-hsl-yellow-2: 38.7096774194deg, 100%, 48.6274509804%;\n --sg-hsl-red-0: 3.6180904523deg, 86.8995633188%, 55.0980392157%;\n --sg-hsl-red-1: 0deg, 78.5123966942%, 47.4509803922%;\n --sg-hsl-red-2: 356.1497326203deg, 100%, 36.6666666667%;\n --sg-hsl-purple-0: 261.7741935484deg, 51.6666666667%, 47.0588235294%;\n --sg-hsl-purple-1: 259.2660550459deg, 55.3299492386%, 38.6274509804%;\n --sg-hsl-purple-2: 255.9183673469deg, 56.976744186%, 33.7254901961%;\n --sg-grey-100: #dedede;\n --sg-grey-200: #ababab;\n --sg-grey-300: #757575;\n --sg-grey-400: #494949;\n --sg-grey-500: #333333;\n --sg-grey-600: #2c2c2c;\n --sg-grey-700: #272727;\n --sg-grey-800: #222222;\n --sg-grey-900: #121212;\n --sg-intent-neutral-hsl: 0deg, 0%, 20%;\n --sg-intent-neutral-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-info-hsl: 203.216080402deg, 100%, 39.0196078431%;\n --sg-intent-info-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-success-hsl: 98.8235294118deg, 100%, 26.6666666667%;\n --sg-intent-success-hsl-contrast: 0deg, 0%, 100%;\n --sg-intent-warning-hsl: 46.3529411765deg, 100%, 50%;\n --sg-intent-warning-hsl-contrast: 0deg, 0%, 0%;\n --sg-intent-critical-hsl: 0deg, 78.5123966942%, 47.4509803922%;\n --sg-intent-critical-hsl-contrast: 0deg, 0%, 100%;\n --sg-hsl-disabled-background: 0deg, 0%, 20%;\n --sg-hsl-disabled-color: 0deg, 0%, 45.8823529412%;\n --sg-bg-level-0: #121212;\n --sg-bg-level-1: #222222;\n --sg-bg-level-2: #272727;\n --sg-bg-level-3: #2c2c2c;\n --sg-table-header-background: #121212;\n --sg-table-header-color: #fff;\n --sg-table-cell-padding-x: 0.5rem;\n --sg-table-cell-padding-y: 0.6875rem;\n --sg-table-border-width: 1px;\n --sg-table-border-color: #ababab;\n --sg-table-sort-icon-color: #ababab;\n --sg-table-sort-icon-color-active: #fff;\n --sg-skeleton-loader-highlight-color: #494949;\n --sg-skeleton-loader-background-color: #2c2c2c;\n --sg-modal-background: #272727;\n --sg-modal-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-modal-backdrop-background: rgba(0, 0, 0, 0.5);\n --sg-popover-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-popover-background: #222222;\n --sg-popover-border-color: #007ac7;\n --sg-card-box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.15);\n --sg-card-background: #222222;\n --sg-card-heading-color: #dedede;\n --sg-card-color: #dedede;\n --sg-card-border: solid 1px #222222;\n --sg-card-border-radius: 4px;\n }\n}";
1
+ const styles = "/**\n * Do not edit directly\n * Generated on Thu, 06 Feb 2025 18:59:50 GMT\n */\n/**\n * Do not edit directly\n * Generated on Thu, 06 Feb 2025 18:59:50 GMT\n */\n:host {\n display: contents;\n --gds-sys-shape-corner-none: 0;\n --gds-sys-shape-corner-small: 0.125rem;\n --gds-sys-shape-corner-medium: 0.25rem;\n --gds-sys-shape-corner-round: 50%;\n}\n\n:host([color-scheme=light]) {\n --gds-sys-color-blue: #41b0ee;\n --gds-sys-color-dark-blue-1: #0092e1;\n --gds-sys-color-dark-blue-2: #007ac7;\n --gds-sys-color-green: #60cd18;\n --gds-sys-color-dark-green-1: #45b400;\n --gds-sys-color-dark-green-2: #308800;\n --gds-sys-color-yellow: #ffc500;\n --gds-sys-color-dark-yellow-1: #ffb400;\n --gds-sys-color-dark-yellow-2: #f8a000;\n --gds-sys-color-text-primary: #333333;\n --gds-sys-color-text-secondary: #ababab;\n --gds-sys-color-text-white: #ffffff;\n --gds-sys-color-text-black: #333333;\n --gds-sys-color-text-inverted: #ffffff;\n --gds-sys-color-text-link: #0062bc;\n --gds-sys-color-text-error: #9f000a;\n --gds-sys-color-text-disabled: #adadad;\n --gds-sys-color-red: #f03529;\n --gds-sys-color-dark-red-1: #d81a1a;\n --gds-sys-color-dark-red-2: #bb000c;\n --gds-sys-color-purple: #673ab6;\n --gds-sys-color-dark-purple-1: #4f2C99;\n --gds-sys-color-dark-purple-2: #3f2587;\n --gds-sys-color-white: #ffffff;\n --gds-sys-color-black: #000000;\n --gds-sys-color-background-primary: #ffffff;\n --gds-sys-color-background-secondary: #eeeeee;\n --gds-sys-color-base-100: #f8f8f8;\n --gds-sys-color-base-200: #e9e9e9;\n --gds-sys-color-base-300: #dedede;\n --gds-sys-color-base-400: #cecece;\n --gds-sys-color-base-500: #adadad;\n --gds-sys-color-base-600: #868686;\n --gds-sys-color-base-700: #494949;\n --gds-sys-color-base-800: #333333;\n --gds-sys-color-base-900: #1a1a1a;\n --gds-sys-color-hover-10: rgba(255, 255, 255, 0.1);\n --gds-sys-color-hover-20: rgba(255, 255, 255, 0.2);\n}\n\n/* force dark mode */\n:host([color-scheme=dark]) {\n --gds-sys-color-blue: #58b8ee;\n --gds-sys-color-dark-blue-1: #58b8ee;\n --gds-sys-color-dark-blue-2: #2c9cd9;\n --gds-sys-color-green: #60cd18;\n --gds-sys-color-dark-green-1: #75b44a;\n --gds-sys-color-dark-green-2: #308800;\n --gds-sys-color-yellow: #ffe182;\n --gds-sys-color-dark-yellow-1: #f0be47;\n --gds-sys-color-dark-yellow-2: #ebab39;\n --gds-sys-color-text-primary: #dedede;\n --gds-sys-color-text-secondary: #ababab;\n --gds-sys-color-text-white: #ffffff;\n --gds-sys-color-text-black: #333333;\n --gds-sys-color-text-inverted: #333333;\n --gds-sys-color-text-link: #2c9cd9;\n --gds-sys-color-text-error: #ff594f;\n --gds-sys-color-text-disabled: #464646;\n --gds-sys-color-red: #f7706d;\n --gds-sys-color-dark-red-1: #c82a29;\n --gds-sys-color-dark-red-2: #9e2120;\n --gds-sys-color-purple: #ad91dc;\n --gds-sys-color-dark-purple-1: #7e52cc;\n --gds-sys-color-dark-purple-2: #4a328f;\n --gds-sys-color-white: #ffffff;\n --gds-sys-color-black: #000000;\n --gds-sys-color-background-primary: #222222;\n --gds-sys-color-background-secondary: #1a1a1a;\n --gds-sys-color-base-100: #121212;\n --gds-sys-color-base-200: #222222;\n --gds-sys-color-base-300: #272727;\n --gds-sys-color-base-400: #2c2c2c;\n --gds-sys-color-base-500: #333333;\n --gds-sys-color-base-600: #494949;\n --gds-sys-color-base-700: #757575;\n --gds-sys-color-base-800: #ababab;\n --gds-sys-color-base-900: #dedede;\n --gds-sys-color-hover-10: rgba(0, 0, 0, 0.1);\n --gds-sys-color-hover-20: rgba(0, 0, 0, 0.2);\n}\n\n/* use preferred color scheme */\n@media (prefers-color-scheme: dark) {\n :host,\n :host([color-scheme=auto]) {\n --gds-sys-color-blue: #58b8ee;\n --gds-sys-color-dark-blue-1: #58b8ee;\n --gds-sys-color-dark-blue-2: #2c9cd9;\n --gds-sys-color-green: #60cd18;\n --gds-sys-color-dark-green-1: #75b44a;\n --gds-sys-color-dark-green-2: #308800;\n --gds-sys-color-yellow: #ffe182;\n --gds-sys-color-dark-yellow-1: #f0be47;\n --gds-sys-color-dark-yellow-2: #ebab39;\n --gds-sys-color-text-primary: #dedede;\n --gds-sys-color-text-secondary: #ababab;\n --gds-sys-color-text-white: #ffffff;\n --gds-sys-color-text-black: #333333;\n --gds-sys-color-text-inverted: #333333;\n --gds-sys-color-text-link: #2c9cd9;\n --gds-sys-color-text-error: #ff594f;\n --gds-sys-color-text-disabled: #464646;\n --gds-sys-color-red: #f7706d;\n --gds-sys-color-dark-red-1: #c82a29;\n --gds-sys-color-dark-red-2: #9e2120;\n --gds-sys-color-purple: #ad91dc;\n --gds-sys-color-dark-purple-1: #7e52cc;\n --gds-sys-color-dark-purple-2: #4a328f;\n --gds-sys-color-white: #ffffff;\n --gds-sys-color-black: #000000;\n --gds-sys-color-background-primary: #222222;\n --gds-sys-color-background-secondary: #1a1a1a;\n --gds-sys-color-base-100: #121212;\n --gds-sys-color-base-200: #222222;\n --gds-sys-color-base-300: #272727;\n --gds-sys-color-base-400: #2c2c2c;\n --gds-sys-color-base-500: #333333;\n --gds-sys-color-base-600: #494949;\n --gds-sys-color-base-700: #757575;\n --gds-sys-color-base-800: #ababab;\n --gds-sys-color-base-900: #dedede;\n --gds-sys-color-hover-10: rgba(0, 0, 0, 0.1);\n --gds-sys-color-hover-20: rgba(0, 0, 0, 0.2);\n }\n}";
2
2
  export default styles;
package/gds-element.js CHANGED
@@ -14,7 +14,7 @@ class GdsElement extends LitElement {
14
14
  /**
15
15
  * The semantic version of this element. Can be used for troubleshooting to verify the version being used.
16
16
  */
17
- this.semanticVersion = "2.12.1";
17
+ this.semanticVersion = "2.12.2-rc.20251027145036658";
18
18
  this._isUsingTransitionalStyles = false;
19
19
  this._dynamicStylesController = new DynamicStylesController(this);
20
20
  }
package/generated/react/index.d.ts CHANGED
@@ -11,9 +11,9 @@ export * from './coachmark/index.js';
11
11
  export * from './context-menu/index.js';
12
12
  export * from './datepicker/index.js';
13
13
  export * from './details/index.js';
14
- export * from './dialog/index.js';
15
14
  export * from './div/index.js';
16
15
  export * from './divider/index.js';
16
+ export * from './dialog/index.js';
17
17
  export * from './dropdown/index.js';
18
18
  export * from './fab/index.js';
19
19
  export * from './filter-chips/index.js';
package/generated/react/index.js CHANGED
@@ -11,9 +11,9 @@ export * from "./coachmark/index.js";
11
11
  export * from "./context-menu/index.js";
12
12
  export * from "./datepicker/index.js";
13
13
  export * from "./details/index.js";
14
- export * from "./dialog/index.js";
15
14
  export * from "./div/index.js";
16
15
  export * from "./divider/index.js";
16
+ export * from "./dialog/index.js";
17
17
  export * from "./dropdown/index.js";
18
18
  export * from "./fab/index.js";
19
19
  export * from "./filter-chips/index.js";
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@sebgroup/green-core",
3
3
  "description": "A carefully crafted set of Web Components, laying the foundation of the Green Design System.",
4
- "version": "2.12.1",
4
+ "version": "2.12.2-rc.20251027145036658",
5
5
  "main": "index.js",
6
6
  "module": "index.js",
7
7
  "type": "module",
package/primitives/field-base/field-base.trans.styles.scss.js CHANGED
@@ -1,2 +1,2 @@
1
- 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 .field {\n border-radius: var(--sg-border-radius);\n border: solid var(--sg-border-width) var(--sg-border-color);\n --border-color: var(--sg-border-color);\n align-items: stretch;\n gap: var(--gds-sys-space-xs);\n background-color: var(--gds-sys-color-background-primary);\n box-sizing: border-box;\n color: var(--gds-sys-color-text-primary);\n cursor: text;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: calc(var(--gds-sys-space-xs) - 1px) var(--gds-sys-space-xs) calc(var(--gds-sys-space-xs) - 1px) var(--gds-sys-space-m);\n min-block-size: 44px;\n }\n .field:focus:not(:focus-visible) {\n box-shadow: none;\n outline: 0;\n }\n .field:focus, .field:focus-within {\n outline-color: var(--gds-sys-color-focus-outline);\n outline-style: solid;\n outline-width: 0.125rem;\n outline-offset: 0.125rem;\n }\n .field:hover {\n background-color: var(--grey-200);\n }\n .field.small {\n font-size: 0.875rem;\n min-height: 2rem;\n }\n .field.multiline {\n align-items: flex-start;\n padding: calc(var(--gds-sys-space-s) - 1px) var(--gds-sys-space-s) calc(var(--gds-sys-space-s) - 1px) var(--gds-sys-space-m);\n height: -moz-max-content;\n height: max-content;\n }\n .field.action-slot-occupied:not(.trail-slot-occupied) {\n padding-right: var(--gds-sys-space-xs);\n }\n .field.lead-slot-occupied {\n padding-left: var(--gds-sys-space-xs);\n }\n .field.trail-slot-occupied {\n padding: calc(var(--gds-sys-space-xs) - 1px) var(--gds-sys-space-m);\n }\n .field slot[name=action]::slotted(*) {\n margin: -3px 0 -3px -3px;\n }\n .field:focus-within {\n outline-color: currentColor;\n }\n .field.invalid {\n border-color: var(--gds-sys-color-border-negative-01);\n color: var(--gds-sys-color-content-negative-01);\n border-bottom-width: 2px;\n }\n .field.disabled {\n background: var(--gds-sys-color-l3-disabled-01);\n color: var(--gds-sys-color-content-disabled-01);\n border-color: transparent;\n pointer-events: none;\n }\n .main-slot-wrap {\n display: flex;\n flex: 1;\n }\n slot:not([name])::slotted(*) {\n color: currentColor;\n }\n slot[name=lead]::slotted([gds-element^=gds-icon-]) {\n align-items: center;\n justify-content: center;\n display: flex;\n min-width: var(--gds-sys-space-l);\n }\n}";
1
+ const styles = "/* stylelint-disable max-nesting-depth */\n/**\n * Assert that a map is in ascending order\n * @mixin assert-ascending\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Assert that the first breakpoint in a map starts at zero\n * @mixin assert-starts-at-zero\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Check if a value is important\n * @function is-important\n * @param {Boolean} $important - Whether the value is important\n * @return {String} - \"!important\" if true, otherwise an empty string\n */\n/**\n * Replace a substring in a string\n * @function str-replace\n * @param {String} $string - The original string\n * @param {String} $search - The substring to replace\n * @param {String} $replace - The replacement string\n * @return {String} - The updated string\n */\n/**\n * Convert a map to its negative variant\n * @function negativify-map\n * @param {Map} $map - The map to convert\n * @return {Map} - The negative variant of the map\n */\n/**\n * Generate utility classes\n * @mixin generate-utility\n * @param {Map} $utility - Utility map\n * @param {String} $infix - Infix for class names\n * @param {Boolean} $is-rfs-media-query - Whether to use RFS media query\n */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * @function luminance\n * @param {Color} $color - The color to calculate luminance for\n * @return {Number} - The luminance value\n */\n/**\n * Calculate the contrast ratio between two colors.\n * @function color-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @return {Number} - The contrast ratio\n */\n/**\n * Remove the unit of a length\n * @function strip-unit\n * @param {Number} $number - Number to remove unit from\n * @return {Number} - Unitless number\n */\n/**\n * Validate font size\n * @function validate-font-size\n * @param {Number} $size - Font size to validate\n * @return {Number} - Validated font size in pixels\n */\n/**\n * Get ratio for WCAG level\n * @function get-ratio\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @return {Number} - Ratio value\n */\n/**\n * Determine if a color is light or dark\n * @function light-or-dark\n * @param {Color} $color - The color to check\n * @return {String} - \"light\" or \"dark\"\n */\n/**\n * Get the most legible color (black or white) for a given background color\n * @function most-legible-color\n * @param {Color} $color - The background color\n * @return {Color} - The most legible color\n */\n/**\n * Get the desired color combination for foreground and background colors\n * @function desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n * @return {List} - List containing background and foreground colors\n */\n/**\n * @mixin desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n */\n/**\n * Get an accessible color for a given foreground and background color\n * @function a11y-color\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @param {Number} $maxOffset - Maximum offset\n * @param {Boolean} $darkMode - Is dark mode\n * @param {Number} $ratio - Contrast ratio\n * @return {Color} - Accessible color\n */\n/**\n * Get the maximum contrast color\n * @function max-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Color} $max - Maximum contrast color\n * @return {Color} - Maximum contrast color\n */\n/**\n * Get the RGB values of a color as a string\n * @function stripped-rgb\n * @param {Color} $color - The color\n * @return {String} - RGB values as a string\n */\n/**\n * Get the HSL values of a color as a string\n * @function stripped-hsl\n * @param {Color} $color - The color\n * @return {String} - HSL values as a string\n */\n/**\n * Convert a map of colors to a map of HSL values\n * @function hsl-map\n * @param {Map} $colors - Map of colors\n * @return {Map} - Map of HSL values\n */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\n/**\n * Breakpoint viewport sizes and media queries.\n *\n * Breakpoints are defined as a map of (name: minimum width), order from small to large:\n *\n * (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n *\n * The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n */\n/**\n * Name of the next breakpoint, or null for the last breakpoint.\n *\n * >> breakpoint-next(sm)\n * md\n * >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * md\n * >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n * md\n */\n/**\n * Minimum breakpoint width. Null for the smallest (first) breakpoint.\n *\n * >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * 576px\n */\n/**\n * Maximum breakpoint width.\n * The maximum value is reduced by 0.02px to work around the limitations of\n * `min-` and `max-` prefixes and viewports with fractional widths.\n * See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n * Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n * See https://bugs.webkit.org/show_bug.cgi?id=178261\n *\n * >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * 767.98px\n */\n/**\n * Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n * Useful for making responsive utilities.\n *\n * >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * \"\" (Returns a blank string)\n * >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * \"-sm\"\n */\n/**\n * Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n * Makes the @content apply to the given breakpoint and wider.\n */\n/**\n * Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n * Makes the @content apply to the given breakpoint and narrower.\n */\n/**\n * Media that spans multiple breakpoint widths.\n * Makes the @content apply between the min and max breakpoints\n */\n/**\n * Media between the breakpoint's minimum and maximum widths.\n * No minimum for the smallest breakpoint, and no maximum for the largest one.\n * Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\n */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n .field {\n border-radius: 0.25rem;\n border: solid 1px var(--gds-sys-color-base-600);\n --border-color: var(--gds-sys-color-base-600);\n align-items: stretch;\n gap: var(--gds-sys-space-xs);\n background-color: var(--gds-sys-color-background-primary);\n box-sizing: border-box;\n color: var(--gds-sys-color-text-primary);\n cursor: text;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: calc(var(--gds-sys-space-xs) - 1px) var(--gds-sys-space-xs) calc(var(--gds-sys-space-xs) - 1px) var(--gds-sys-space-m);\n min-block-size: 44px;\n }\n .field:focus:not(:focus-visible) {\n box-shadow: none;\n outline: 0;\n }\n .field:focus, .field:focus-within {\n outline-color: var(--gds-sys-color-focus-outline);\n outline-style: solid;\n outline-width: 0.125rem;\n outline-offset: 0.125rem;\n }\n .field:hover {\n background-color: var(--grey-200);\n }\n .field.small {\n font-size: 0.875rem;\n min-height: 2rem;\n }\n .field.multiline {\n align-items: flex-start;\n padding: calc(var(--gds-sys-space-s) - 1px) var(--gds-sys-space-s) calc(var(--gds-sys-space-s) - 1px) var(--gds-sys-space-m);\n height: -moz-max-content;\n height: max-content;\n }\n .field.action-slot-occupied:not(.trail-slot-occupied) {\n padding-right: var(--gds-sys-space-xs);\n }\n .field.lead-slot-occupied {\n padding-left: var(--gds-sys-space-xs);\n }\n .field.trail-slot-occupied {\n padding: calc(var(--gds-sys-space-xs) - 1px) var(--gds-sys-space-m);\n }\n .field slot[name=action]::slotted(*) {\n margin: -3px 0 -3px -3px;\n }\n .field:focus-within {\n outline-color: currentColor;\n }\n .field.invalid {\n border-color: var(--gds-sys-color-border-negative-01);\n color: var(--gds-sys-color-content-negative-01);\n border-bottom-width: 2px;\n }\n .field.disabled {\n background: var(--gds-sys-color-l3-disabled-01);\n color: var(--gds-sys-color-content-disabled-01);\n border-color: transparent;\n pointer-events: none;\n }\n .main-slot-wrap {\n display: flex;\n flex: 1;\n }\n slot:not([name])::slotted(*) {\n color: currentColor;\n }\n slot[name=lead]::slotted([gds-element^=gds-icon-]) {\n align-items: center;\n justify-content: center;\n display: flex;\n min-width: var(--gds-sys-space-l);\n }\n}";
2
2
  export default styles;
package/primitives/listbox/listbox.trans.styles.scss.js CHANGED
@@ -1,2 +1,2 @@
1
- const styles = "/**\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 max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\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/** \n * @deprecated in favor of Grouped list component\n */\n/** \n * @deprecated in favor of Grouped list component\n */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n :host {\n padding-left: 0;\n margin-bottom: 0;\n margin-top: 0;\n display: flex;\n flex-direction: column;\n list-style: none;\n overflow-y: auto;\n }\n :host > li {\n padding-bottom: 0.5rem;\n padding-top: 0.5rem;\n border: 0;\n display: block;\n position: relative;\n }\n :host > li::before {\n font-weight: 500;\n display: inline-block;\n left: 0;\n position: absolute;\n text-align: center;\n }\n}";
1
+ const styles = "/* stylelint-disable max-nesting-depth */\n/**\n * Assert that a map is in ascending order\n * @mixin assert-ascending\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Assert that the first breakpoint in a map starts at zero\n * @mixin assert-starts-at-zero\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Check if a value is important\n * @function is-important\n * @param {Boolean} $important - Whether the value is important\n * @return {String} - \"!important\" if true, otherwise an empty string\n */\n/**\n * Replace a substring in a string\n * @function str-replace\n * @param {String} $string - The original string\n * @param {String} $search - The substring to replace\n * @param {String} $replace - The replacement string\n * @return {String} - The updated string\n */\n/**\n * Convert a map to its negative variant\n * @function negativify-map\n * @param {Map} $map - The map to convert\n * @return {Map} - The negative variant of the map\n */\n/**\n * Generate utility classes\n * @mixin generate-utility\n * @param {Map} $utility - Utility map\n * @param {String} $infix - Infix for class names\n * @param {Boolean} $is-rfs-media-query - Whether to use RFS media query\n */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * @function luminance\n * @param {Color} $color - The color to calculate luminance for\n * @return {Number} - The luminance value\n */\n/**\n * Calculate the contrast ratio between two colors.\n * @function color-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @return {Number} - The contrast ratio\n */\n/**\n * Remove the unit of a length\n * @function strip-unit\n * @param {Number} $number - Number to remove unit from\n * @return {Number} - Unitless number\n */\n/**\n * Validate font size\n * @function validate-font-size\n * @param {Number} $size - Font size to validate\n * @return {Number} - Validated font size in pixels\n */\n/**\n * Get ratio for WCAG level\n * @function get-ratio\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @return {Number} - Ratio value\n */\n/**\n * Determine if a color is light or dark\n * @function light-or-dark\n * @param {Color} $color - The color to check\n * @return {String} - \"light\" or \"dark\"\n */\n/**\n * Get the most legible color (black or white) for a given background color\n * @function most-legible-color\n * @param {Color} $color - The background color\n * @return {Color} - The most legible color\n */\n/**\n * Get the desired color combination for foreground and background colors\n * @function desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n * @return {List} - List containing background and foreground colors\n */\n/**\n * @mixin desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n */\n/**\n * Get an accessible color for a given foreground and background color\n * @function a11y-color\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @param {Number} $maxOffset - Maximum offset\n * @param {Boolean} $darkMode - Is dark mode\n * @param {Number} $ratio - Contrast ratio\n * @return {Color} - Accessible color\n */\n/**\n * Get the maximum contrast color\n * @function max-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Color} $max - Maximum contrast color\n * @return {Color} - Maximum contrast color\n */\n/**\n * Get the RGB values of a color as a string\n * @function stripped-rgb\n * @param {Color} $color - The color\n * @return {String} - RGB values as a string\n */\n/**\n * Get the HSL values of a color as a string\n * @function stripped-hsl\n * @param {Color} $color - The color\n * @return {String} - HSL values as a string\n */\n/**\n * Convert a map of colors to a map of HSL values\n * @function hsl-map\n * @param {Map} $colors - Map of colors\n * @return {Map} - Map of HSL values\n */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\n/**\n * Breakpoint viewport sizes and media queries.\n *\n * Breakpoints are defined as a map of (name: minimum width), order from small to large:\n *\n * (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n *\n * The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n */\n/**\n * Name of the next breakpoint, or null for the last breakpoint.\n *\n * >> breakpoint-next(sm)\n * md\n * >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * md\n * >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n * md\n */\n/**\n * Minimum breakpoint width. Null for the smallest (first) breakpoint.\n *\n * >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * 576px\n */\n/**\n * Maximum breakpoint width.\n * The maximum value is reduced by 0.02px to work around the limitations of\n * `min-` and `max-` prefixes and viewports with fractional widths.\n * See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n * Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n * See https://bugs.webkit.org/show_bug.cgi?id=178261\n *\n * >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * 767.98px\n */\n/**\n * Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n * Useful for making responsive utilities.\n *\n * >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * \"\" (Returns a blank string)\n * >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * \"-sm\"\n */\n/**\n * Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n * Makes the @content apply to the given breakpoint and wider.\n */\n/**\n * Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n * Makes the @content apply to the given breakpoint and narrower.\n */\n/**\n * Media that spans multiple breakpoint widths.\n * Makes the @content apply between the min and max breakpoints\n */\n/**\n * Media between the breakpoint's minimum and maximum widths.\n * No minimum for the smallest breakpoint, and no maximum for the largest one.\n * Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\n */\n/** \n * @deprecated in favor of Grouped list component\n */\n/** \n * @deprecated in favor of Grouped list component\n */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n :host {\n padding-left: 0;\n margin-bottom: 0;\n margin-top: 0;\n display: flex;\n flex-direction: column;\n list-style: none;\n overflow-y: auto;\n }\n :host > li {\n padding-bottom: 0.5rem;\n padding-top: 0.5rem;\n border: 0;\n display: block;\n position: relative;\n }\n :host > li::before {\n font-weight: 500;\n display: inline-block;\n left: 0;\n position: absolute;\n text-align: center;\n }\n}";
2
2
  export default styles;
package/primitives/listbox/option.trans.styles.scss.js CHANGED
@@ -1,2 +1,2 @@
1
- const styles = "/**\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 max-nesting-depth */\n/* stylelint-enable max-nesting-depth */\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 .item {\n padding-left: 1rem;\n padding-right: 1rem;\n padding-bottom: 0.75rem;\n padding-top: 0.75rem;\n line-height: 1.25;\n cursor: pointer;\n display: flex;\n gap: 0.75rem;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n }\n .item:hover, .item:focus-visible {\n background-color: var(--grey-400);\n }\n .item:active {\n background-color: var(--grey-400);\n }\n .item:focus {\n outline-color: #000;\n outline-offset: -0.25rem;\n }\n .item.active.sg-highlighted, .item[aria-selected=true] {\n background: var(--grey-1000);\n color: #fff;\n }\n :host(:hover) .item,\n :host(:focus-visible) .item {\n background-color: var(--grey-400);\n }\n :host(:active) .item {\n background-color: var(--grey-500);\n }\n :host(:focus-visible) {\n outline-color: #000;\n outline-offset: -0.25rem;\n }\n :host([inert]) {\n display: none;\n }\n :host([highlighted]) .item {\n background: var(--grey-1000);\n color: #fff;\n }\n}";
1
+ const styles = "/* stylelint-disable max-nesting-depth */\n/**\n * Assert that a map is in ascending order\n * @mixin assert-ascending\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Assert that the first breakpoint in a map starts at zero\n * @mixin assert-starts-at-zero\n * @param {Map} $map - The map to check\n * @param {String} $map-name - The name of the map\n */\n/**\n * Check if a value is important\n * @function is-important\n * @param {Boolean} $important - Whether the value is important\n * @return {String} - \"!important\" if true, otherwise an empty string\n */\n/**\n * Replace a substring in a string\n * @function str-replace\n * @param {String} $string - The original string\n * @param {String} $search - The substring to replace\n * @param {String} $replace - The replacement string\n * @return {String} - The updated string\n */\n/**\n * Convert a map to its negative variant\n * @function negativify-map\n * @param {Map} $map - The map to convert\n * @return {Map} - The negative variant of the map\n */\n/**\n * Generate utility classes\n * @mixin generate-utility\n * @param {Map} $utility - Utility map\n * @param {String} $infix - Infix for class names\n * @param {Boolean} $is-rfs-media-query - Whether to use RFS media query\n */\n/* stylelint-enable max-nesting-depth */\n/**\n * Calculate the luminance for a color.\n * @function luminance\n * @param {Color} $color - The color to calculate luminance for\n * @return {Number} - The luminance value\n */\n/**\n * Calculate the contrast ratio between two colors.\n * @function color-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @return {Number} - The contrast ratio\n */\n/**\n * Remove the unit of a length\n * @function strip-unit\n * @param {Number} $number - Number to remove unit from\n * @return {Number} - Unitless number\n */\n/**\n * Validate font size\n * @function validate-font-size\n * @param {Number} $size - Font size to validate\n * @return {Number} - Validated font size in pixels\n */\n/**\n * Get ratio for WCAG level\n * @function get-ratio\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @return {Number} - Ratio value\n */\n/**\n * Determine if a color is light or dark\n * @function light-or-dark\n * @param {Color} $color - The color to check\n * @return {String} - \"light\" or \"dark\"\n */\n/**\n * Get the most legible color (black or white) for a given background color\n * @function most-legible-color\n * @param {Color} $color - The background color\n * @return {Color} - The most legible color\n */\n/**\n * Get the desired color combination for foreground and background colors\n * @function desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n * @return {List} - List containing background and foreground colors\n */\n/**\n * @mixin desired-color-combination\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Number} $offsetThreshold - Offset threshold\n * @param {Number} $ratio - Contrast ratio\n */\n/**\n * Get an accessible color for a given foreground and background color\n * @function a11y-color\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {String} $level - WCAG level\n * @param {Number} $size - Font size\n * @param {Boolean} $bold - Is bold\n * @param {Boolean} $graphic - Is graphic\n * @param {Number} $maxOffset - Maximum offset\n * @param {Boolean} $darkMode - Is dark mode\n * @param {Number} $ratio - Contrast ratio\n * @return {Color} - Accessible color\n */\n/**\n * Get the maximum contrast color\n * @function max-contrast\n * @param {Color} $fg - Foreground color\n * @param {Color} $bg - Background color\n * @param {Color} $max - Maximum contrast color\n * @return {Color} - Maximum contrast color\n */\n/**\n * Get the RGB values of a color as a string\n * @function stripped-rgb\n * @param {Color} $color - The color\n * @return {String} - RGB values as a string\n */\n/**\n * Get the HSL values of a color as a string\n * @function stripped-hsl\n * @param {Color} $color - The color\n * @return {String} - HSL values as a string\n */\n/**\n * Convert a map of colors to a map of HSL values\n * @function hsl-map\n * @param {Map} $colors - Map of colors\n * @return {Map} - Map of HSL values\n */\n/**\n* @deprecated\n* Use `add-focus` instead\n*/\n/** add background color, color and border-color to element when it has focus-visible i.e. tab focus */\n/**\n * Breakpoint viewport sizes and media queries.\n *\n * Breakpoints are defined as a map of (name: minimum width), order from small to large:\n *\n * (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)\n *\n * The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.\n */\n/**\n * Name of the next breakpoint, or null for the last breakpoint.\n *\n * >> breakpoint-next(sm)\n * md\n * >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * md\n * >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))\n * md\n */\n/**\n * Minimum breakpoint width. Null for the smallest (first) breakpoint.\n *\n * >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * 576px\n */\n/**\n * Maximum breakpoint width.\n * The maximum value is reduced by 0.02px to work around the limitations of\n * `min-` and `max-` prefixes and viewports with fractional widths.\n * See https://www.w3.org/TR/mediaqueries-4/#mq-min-max\n * Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.\n * See https://bugs.webkit.org/show_bug.cgi?id=178261\n *\n * >> breakpoint-max(md, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * 767.98px\n */\n/**\n * Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.\n * Useful for making responsive utilities.\n *\n * >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * \"\" (Returns a blank string)\n * >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))\n * \"-sm\"\n */\n/**\n * Media of at least the minimum breakpoint width. No query for the smallest breakpoint.\n * Makes the @content apply to the given breakpoint and wider.\n */\n/**\n * Media of at most the maximum breakpoint width. No query for the largest breakpoint.\n * Makes the @content apply to the given breakpoint and narrower.\n */\n/**\n * Media that spans multiple breakpoint widths.\n * Makes the @content apply between the min and max breakpoints\n */\n/**\n * Media between the breakpoint's minimum and maximum widths.\n * No minimum for the smallest breakpoint, and no maximum for the largest one.\n * Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.\n */\n@layer base, reset, transitional-styles;\n@layer transitional-styles {\n .item {\n padding-left: 1rem;\n padding-right: 1rem;\n padding-bottom: 0.75rem;\n padding-top: 0.75rem;\n line-height: 1.25;\n cursor: pointer;\n display: flex;\n gap: 0.75rem;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n }\n .item:hover, .item:focus-visible {\n background-color: var(--gds-sys-color-base-200);\n }\n .item:active {\n background-color: var(--gds-sys-color-base-200);\n }\n .item:focus {\n outline-color: #000;\n outline-offset: -0.25rem;\n }\n .item.active.sg-highlighted, .item[aria-selected=true] {\n background: var(--gds-sys-color-base-800);\n color: #fff;\n }\n :host(:hover) div,\n :host(:focus-visible) div {\n background-color: var(--gds-sys-color-base-200);\n }\n :host(:active) div {\n background-color: var(--gds-sys-color-base-300);\n }\n :host(:focus-visible) {\n outline-color: #000;\n outline-offset: -0.25rem;\n }\n :host([inert]) {\n display: none;\n }\n :host([highlighted]) .item {\n background: var(--gds-sys-color-base-800);\n color: #fff;\n }\n}";
2
2
  export default styles;
package/primitives/menu/menu-heading.trans.styles.scss.js CHANGED
@@ -1,2 +1,2 @@
1
- const styles = "@layer base, reset, transitional-styles;\n@layer transitional-styles {\n :host {\n background-color: var(--gds-ref-pallet-base300);\n color: var(--gds-ref-pallet-base800);\n display: flex;\n font-size: 0.875rem;\n font-weight: 500;\n padding: 0.75rem 1rem;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n }\n :host([aria-hidden=true]) {\n display: none;\n }\n}";
1
+ const styles = "@layer base, reset, transitional-styles;\n@layer transitional-styles {\n :host {\n background-color: var(--gds-sys-color-base-300);\n color: var(--gds-sys-color-base-800);\n display: flex;\n font-size: 0.875rem;\n font-weight: 500;\n padding: 0.75rem 1rem;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n }\n :host([aria-hidden=true]) {\n display: none;\n }\n}";
2
2
  export default styles;
package/utils/helpers/custom-element-scoping.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import "../../chunks/chunk.QU3DSPNU.js";
2
2
  import { html as litHtml } from "lit";
3
- const VER_SUFFIX = "-cf4a40";
3
+ const VER_SUFFIX = "-b4ed80";
4
4
  class ScopedElementRegistry {
5
5
  static get instance() {
6
6
  if (!globalThis.__gdsElementLookupTable?.[VER_SUFFIX])
package/utils/helpers/id.d.ts CHANGED
@@ -1,4 +1 @@
1
- /**
2
- * Generate a random id with `gds-` prefix
3
- */
4
1
  export declare const randomId: () => string;
package/utils/helpers/id.js CHANGED
@@ -1,5 +1,10 @@
1
1
  import "../../chunks/chunk.QU3DSPNU.js";
2
- const randomId = () => "gds-" + Math.random().toString(36).substring(2, 9);
2
+ const randomId = () => {
3
+ const array = new Uint32Array(2);
4
+ window.crypto.getRandomValues(array);
5
+ const id = (array[0].toString(36) + array[1].toString(36)).substring(0, 7);
6
+ return "gds-" + id;
7
+ };
3
8
  export {
4
9
  randomId
5
10
  };