@sebgroup/green-core 1.0.0-beta.9 → 1.0.0

package/transitional-styles.js

@@ -1,6 +1,5 @@
 // libs/core/src/primitives/listbox/listbox.trans.styles.scss
-var listbox_trans_styles_default = `
-/**
+var listbox_trans_styles_default = `/**
  * Calculate the luminance for a color.
  * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
  */
@@ -13,6 +12,10 @@ var listbox_trans_styles_default = `
 /* stylelint-disable */
 /* stylelint-enable */
 /* stylelint-disable */
+/**
+* @deprecated
+* Use \`add-focus\` instead
+*/
 /** add background color, color and border-color to element when it has focus-visible i.e. tab focus */
 :host {
   padding-left: 0;
@@ -21,6 +24,7 @@ var listbox_trans_styles_default = `
   display: flex;
   flex-direction: column;
   list-style: none;
+  overflow-y: auto;
 }
 :host > li {
   padding-bottom: 0.5rem;
@@ -38,8 +42,7 @@ var listbox_trans_styles_default = `
 }`;
 
 // libs/core/src/primitives/listbox/option.trans.styles.scss
-var option_trans_styles_default = `
-/**
+var option_trans_styles_default = `/**
  * Calculate the luminance for a color.
  * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
  */
@@ -52,6 +55,10 @@ var option_trans_styles_default = `
 /* stylelint-disable */
 /* stylelint-enable */
 /* stylelint-disable */
+/**
+* @deprecated
+* Use \`add-focus\` instead
+*/
 /** add background color, color and border-color to element when it has focus-visible i.e. tab focus */
 button,
 input[type=button],
@@ -82,7 +89,6 @@ input:where([type=button], [type=submit], [type=reset]),
   border-radius: var(--sg-border-radius);
   border: solid var(--sg-border-width) var(--sg-border-color);
   font-weight: 500;
-  transition: box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);
   min-height: 2.75rem;
   align-items: center;
   display: inline-flex;
@@ -94,20 +100,6 @@ button:where(:not(.link,
 [aria-haspopup=listbox],
 [aria-haspopup=menu],
 [role=switch],
-.gds-filter-chip)):focus,
-input:where([type=button], [type=submit], [type=reset]):focus,
-.button:focus {
-  border-color: rgb(0, 122, 199);
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(65, 176, 238);
-  outline-color: transparent;
-  outline-style: solid;
-}
-button:where(:not(.link,
-.close,
-.sg-table-sort,
-[aria-haspopup=listbox],
-[aria-haspopup=menu],
-[role=switch],
 .gds-filter-chip)):focus:not(:focus-visible),
 input:where([type=button], [type=submit], [type=reset]):focus:not(:focus-visible),
 .button:focus:not(:focus-visible) {
@@ -120,15 +112,23 @@ button:where(:not(.link,
 [aria-haspopup=listbox],
 [aria-haspopup=menu],
 [role=switch],
+.gds-filter-chip)):focus, button:where(:not(.link,
+.close,
+.sg-table-sort,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
 .gds-filter-chip)):focus-visible,
+input:where([type=button], [type=submit], [type=reset]):focus,
 input:where([type=button], [type=submit], [type=reset]):focus-visible,
+.button:focus,
 .button:focus-visible {
-  border-color: rgb(0, 122, 199) !important;
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(65, 176, 238);
-  outline-color: transparent;
+  outline-color: var(--gds-sys-color-focus-outline);
   outline-style: solid;
+  outline-width: 0.125rem;
+  outline-offset: 0.125rem;
 }
-@media (max-width: 575.98px) {
+@media (max-width: 35.98em) {
   button:where(:not(.link,
   .close,
   .sg-table-sort,
@@ -207,8 +207,7 @@ button[type=button]:where(:not(.primary,
 [aria-haspopup=listbox],
 [aria-haspopup=menu])),
 button[type=reset]:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)) {
-  transition: box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;
   background: transparent;
   border-color: rgb(0, 122, 199);
   color: rgb(0, 122, 199);
@@ -224,36 +223,6 @@ button:where(:not(.primary,
 [aria-haspopup=listbox],
 [aria-haspopup=menu],
 [role=switch],
-.gds-filter-chip)):focus,
-a.button:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus,
-button.secondary:focus,
-a.button.secondary:focus,
-input:is([type=button], [type=reset]):focus,
-button[type=button]:where(:not(.primary,
-.tertiary,
-.ghost,
-.danger,
-.close,
-.link,
-.icon,
-[aria-haspopup=listbox],
-[aria-haspopup=menu])):focus,
-button[type=reset]:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus {
-  border-color: rgb(0, 122, 199);
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(65, 176, 238);
-  outline-color: transparent;
-  outline-style: solid;
-}
-button:where(:not(.primary,
-.tertiary,
-.ghost,
-.danger,
-.close,
-.sg-table-sort,
-.link,
-[aria-haspopup=listbox],
-[aria-haspopup=menu],
-[role=switch],
 .gds-filter-chip)):focus:not(:focus-visible),
 a.button:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus:not(:focus-visible),
 button.secondary:focus:not(:focus-visible),
@@ -282,10 +251,24 @@ button:where(:not(.primary,
 [aria-haspopup=listbox],
 [aria-haspopup=menu],
 [role=switch],
+.gds-filter-chip)):focus, button:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
 .gds-filter-chip)):focus-visible,
+a.button:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus,
 a.button:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus-visible,
+button.secondary:focus,
 button.secondary:focus-visible,
+a.button.secondary:focus,
 a.button.secondary:focus-visible,
+input:is([type=button], [type=reset]):focus,
 input:is([type=button], [type=reset]):focus-visible,
 button[type=button]:where(:not(.primary,
 .tertiary,
@@ -295,12 +278,22 @@ button[type=button]:where(:not(.primary,
 .link,
 .icon,
 [aria-haspopup=listbox],
+[aria-haspopup=menu])):focus,
+button[type=button]:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.link,
+.icon,
+[aria-haspopup=listbox],
 [aria-haspopup=menu])):focus-visible,
+button[type=reset]:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus,
 button[type=reset]:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus-visible {
-  border-color: rgb(0, 122, 199) !important;
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(65, 176, 238);
-  outline-color: transparent;
+  outline-color: var(--gds-sys-color-focus-outline);
   outline-style: solid;
+  outline-width: 0.125rem;
+  outline-offset: 0.125rem;
 }
 button:where(:not(.primary,
 .tertiary,
@@ -627,8 +620,7 @@ button:where(:not(.primary,
 a.button:where(:not(.primary, .secondary, .ghost, .close, .link)),
 button.tertiary,
 a.button.tertiary {
-  transition: box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;
   background: transparent;
   border-color: transparent;
   color: rgb(0, 122, 199);
@@ -644,14 +636,12 @@ button:where(:not(.primary,
 [aria-haspopup=listbox],
 [aria-haspopup=menu],
 [role=switch],
-.gds-filter-chip)):focus,
-a.button:where(:not(.primary, .secondary, .ghost, .close, .link)):focus,
-button.tertiary:focus,
-a.button.tertiary:focus {
-  border-color: rgb(0, 122, 199);
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(65, 176, 238);
-  outline-color: transparent;
-  outline-style: solid;
+.gds-filter-chip)):focus:not(:focus-visible),
+a.button:where(:not(.primary, .secondary, .ghost, .close, .link)):focus:not(:focus-visible),
+button.tertiary:focus:not(:focus-visible),
+a.button.tertiary:focus:not(:focus-visible) {
+  box-shadow: none;
+  outline: 0;
 }
 button:where(:not(.primary,
 .secondary,
@@ -663,14 +653,7 @@ button:where(:not(.primary,
 [aria-haspopup=listbox],
 [aria-haspopup=menu],
 [role=switch],
-.gds-filter-chip)):focus:not(:focus-visible),
-a.button:where(:not(.primary, .secondary, .ghost, .close, .link)):focus:not(:focus-visible),
-button.tertiary:focus:not(:focus-visible),
-a.button.tertiary:focus:not(:focus-visible) {
-  box-shadow: none;
-  outline: 0;
-}
-button:where(:not(.primary,
+.gds-filter-chip)):focus, button:where(:not(.primary,
 .secondary,
 .ghost,
 .danger,
@@ -681,13 +664,16 @@ button:where(:not(.primary,
 [aria-haspopup=menu],
 [role=switch],
 .gds-filter-chip)):focus-visible,
+a.button:where(:not(.primary, .secondary, .ghost, .close, .link)):focus,
 a.button:where(:not(.primary, .secondary, .ghost, .close, .link)):focus-visible,
+button.tertiary:focus,
 button.tertiary:focus-visible,
+a.button.tertiary:focus,
 a.button.tertiary:focus-visible {
-  border-color: rgb(0, 122, 199) !important;
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(65, 176, 238);
-  outline-color: transparent;
+  outline-color: var(--gds-sys-color-focus-outline);
   outline-style: solid;
+  outline-width: 0.125rem;
+  outline-offset: 0.125rem;
 }
 button:where(:not(.primary,
 .secondary,
@@ -878,7 +864,7 @@ button[type=submit]:not(.secondary,
 .gds-filter-chip),
 input[type=submit]:not(.secondary, .ghost, .danger, .close, .link),
 a.button.primary {
-  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;
   background: rgb(0, 122, 199);
   border-color: rgb(0, 122, 199);
   color: #fff;
@@ -1034,7 +1020,7 @@ a.button.primary[aria-disabled=true]::placeholder {
 
 button.ghost,
 .button.ghost {
-  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;
   border-color: rgb(51, 51, 51);
   color: rgb(51, 51, 51);
   --color: rgb(51, 51, 51);
@@ -1162,8 +1148,7 @@ input[type=submit].danger:not(.secondary, .ghost, .close, .link) {
   border-color: rgb(187, 0, 12);
   color: #fff;
   --color: #fff;
-  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-  transition: box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;
 }
 button.primary.danger:not(:disabled, .disabled, [aria-disabled]):hover,
 .button.primary.danger:not(:disabled, .disabled, [aria-disabled]):hover,
@@ -1209,23 +1194,24 @@ input[type=submit].danger:not(.secondary, .ghost, .close, .link).active:hover,
 input[type=submit].danger:not(.secondary, .ghost, .close, .link):active:hover {
   opacity: 0.9;
 }
-button.primary.danger:focus,
-.button.primary.danger:focus,
-button[type=submit].danger:not(.secondary, .ghost, .close, .link):focus,
-input[type=submit].danger:not(.secondary, .ghost, .close, .link):focus {
-  border-color: rgb(187, 0, 12);
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(187, 0, 12);
-  outline-color: transparent;
-  outline-style: solid;
+button.primary.danger:focus:not(:focus-visible),
+.button.primary.danger:focus:not(:focus-visible),
+button[type=submit].danger:not(.secondary, .ghost, .close, .link):focus:not(:focus-visible),
+input[type=submit].danger:not(.secondary, .ghost, .close, .link):focus:not(:focus-visible) {
+  box-shadow: none;
+  outline: 0;
 }
-button.primary.danger:focus,
+button.primary.danger:focus, button.primary.danger:focus-visible,
 .button.primary.danger:focus,
+.button.primary.danger:focus-visible,
 button[type=submit].danger:not(.secondary, .ghost, .close, .link):focus,
-input[type=submit].danger:not(.secondary, .ghost, .close, .link):focus {
-  border-color: rgb(187, 0, 12) !important;
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(187, 0, 12);
-  outline-color: transparent;
+button[type=submit].danger:not(.secondary, .ghost, .close, .link):focus-visible,
+input[type=submit].danger:not(.secondary, .ghost, .close, .link):focus,
+input[type=submit].danger:not(.secondary, .ghost, .close, .link):focus-visible {
+  outline-color: var(--gds-sys-color-focus-outline);
   outline-style: solid;
+  outline-width: 0.125rem;
+  outline-offset: 0.125rem;
 }
 button.primary.danger:disabled, button.primary.danger.disabled, button.primary.danger[aria-disabled=true],
 .button.primary.danger:disabled,
@@ -1280,8 +1266,7 @@ button[type=reset].danger:where(:not(.primary, .tertiary, .ghost, .danger, .clos
   color: rgb(187, 0, 12);
   --color: rgb(187, 0, 12);
   border-color: transparent;
-  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-  transition: box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;
 }
 button.danger:where(:not(.primary,
 .tertiary,
@@ -1497,11 +1482,11 @@ button.danger:where(:not(.primary,
 .link,
 [aria-haspopup=listbox],
 [aria-haspopup=menu],
-[role=switch])):focus,
-a.button.danger:where(:not(.primary, .tertiary, .ghost, .close, .link)):focus,
-button.secondary.danger:focus,
-a.button.secondary.danger:focus,
-input.danger:is([type=button], [type=reset]):focus,
+[role=switch])):focus:not(:focus-visible),
+a.button.danger:where(:not(.primary, .tertiary, .ghost, .close, .link)):focus:not(:focus-visible),
+button.secondary.danger:focus:not(:focus-visible),
+a.button.secondary.danger:focus:not(:focus-visible),
+input.danger:is([type=button], [type=reset]):focus:not(:focus-visible),
 button[type=button].danger:where(:not(.primary,
 .tertiary,
 .ghost,
@@ -1509,12 +1494,10 @@ button[type=button].danger:where(:not(.primary,
 .close,
 .link,
 .gds-filter-chip [aria-haspopup=listbox],
-[aria-haspopup=menu])):focus,
-button[type=reset].danger:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus {
-  border-color: #b6000c;
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(187, 0, 12);
-  outline-color: transparent;
-  outline-style: solid;
+[aria-haspopup=menu])):focus:not(:focus-visible),
+button[type=reset].danger:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus:not(:focus-visible) {
+  box-shadow: none;
+  outline: 0;
 }
 button.danger:where(:not(.primary,
 .tertiary,
@@ -1524,11 +1507,23 @@ button.danger:where(:not(.primary,
 .link,
 [aria-haspopup=listbox],
 [aria-haspopup=menu],
-[role=switch])):focus,
+[role=switch])):focus, button.danger:where(:not(.primary,
+.tertiary,
+.ghost,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch])):focus-visible,
 a.button.danger:where(:not(.primary, .tertiary, .ghost, .close, .link)):focus,
+a.button.danger:where(:not(.primary, .tertiary, .ghost, .close, .link)):focus-visible,
 button.secondary.danger:focus,
+button.secondary.danger:focus-visible,
 a.button.secondary.danger:focus,
+a.button.secondary.danger:focus-visible,
 input.danger:is([type=button], [type=reset]):focus,
+input.danger:is([type=button], [type=reset]):focus-visible,
 button[type=button].danger:where(:not(.primary,
 .tertiary,
 .ghost,
@@ -1537,11 +1532,20 @@ button[type=button].danger:where(:not(.primary,
 .link,
 .gds-filter-chip [aria-haspopup=listbox],
 [aria-haspopup=menu])):focus,
-button[type=reset].danger:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus {
-  border-color: #b6000c !important;
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(187, 0, 12);
-  outline-color: transparent;
+button[type=button].danger:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.link,
+.gds-filter-chip [aria-haspopup=listbox],
+[aria-haspopup=menu])):focus-visible,
+button[type=reset].danger:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus,
+button[type=reset].danger:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus-visible {
+  outline-color: var(--gds-sys-color-focus-outline);
   outline-style: solid;
+  outline-width: 0.125rem;
+  outline-offset: 0.125rem;
 }
 
 button.danger:where(:not(.primary,
@@ -1559,8 +1563,7 @@ a.button.tertiary.danger {
   color: rgb(187, 0, 12);
   --color: rgb(187, 0, 12);
   border-color: transparent;
-  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-  transition: box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;
 }
 button.danger:where(:not(.primary,
 .secondary,
@@ -1686,14 +1689,12 @@ button.danger:where(:not(.primary,
 .link,
 [aria-haspopup=listbox],
 [aria-haspopup=menu],
-[role=switch])):focus,
-a.button.danger:where(:not(.primary, .secondary, .ghost, .close, .link)):focus,
-button.tertiary.danger:focus,
-a.button.tertiary.danger:focus {
-  border-color: #b6000c;
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(187, 0, 12);
-  outline-color: transparent;
-  outline-style: solid;
+[role=switch])):focus:not(:focus-visible),
+a.button.danger:where(:not(.primary, .secondary, .ghost, .close, .link)):focus:not(:focus-visible),
+button.tertiary.danger:focus:not(:focus-visible),
+a.button.tertiary.danger:focus:not(:focus-visible) {
+  box-shadow: none;
+  outline: 0;
 }
 button.danger:where(:not(.primary,
 .secondary,
@@ -1703,14 +1704,25 @@ button.danger:where(:not(.primary,
 .link,
 [aria-haspopup=listbox],
 [aria-haspopup=menu],
-[role=switch])):focus,
+[role=switch])):focus, button.danger:where(:not(.primary,
+.secondary,
+.ghost,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch])):focus-visible,
 a.button.danger:where(:not(.primary, .secondary, .ghost, .close, .link)):focus,
+a.button.danger:where(:not(.primary, .secondary, .ghost, .close, .link)):focus-visible,
 button.tertiary.danger:focus,
-a.button.tertiary.danger:focus {
-  border-color: #b6000c !important;
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(187, 0, 12);
-  outline-color: transparent;
+button.tertiary.danger:focus-visible,
+a.button.tertiary.danger:focus,
+a.button.tertiary.danger:focus-visible {
+  outline-color: var(--gds-sys-color-focus-outline);
   outline-style: solid;
+  outline-width: 0.125rem;
+  outline-offset: 0.125rem;
 }
 
 :host {
@@ -1718,11 +1730,12 @@ a.button.tertiary.danger:focus {
   padding-right: 0.75rem;
   padding-bottom: 0.75rem;
   padding-top: 0.75rem;
-  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;
   line-height: 1.25;
   cursor: pointer;
   display: flex;
   gap: 0.75rem;
+  user-select: none;
 }
 :host:not(:disabled, .disabled, [aria-disabled]):hover {
   background-color: #199be3;
@@ -1739,16 +1752,15 @@ a.button.tertiary.danger:focus {
   border-color: rgb(0, 122, 199);
 }
 :host.active.sg-highlighted {
-  background: hsl(var(--sg-hsl-blue-1));
+  background: var(--gds-ref-pallet-base800);
 }
 
 :host(:hover) {
-  background-color: #199be3;
-  color: #fff;
+  background-color: var(--gds-ref-pallet-base300);
 }
 
 :host(:focus) {
-  background: hsl(var(--sg-hsl-blue-1));
+  background: var(--gds-ref-pallet-base800);
   color: #fff;
   outline: 2px solid;
 }
@@ -1758,7 +1770,7 @@ a.button.tertiary.danger:focus {
 }
 
 :host([highlighted]) {
-  background: hsl(var(--sg-hsl-blue-1));
+  background: var(--gds-ref-pallet-base800);
   color: #fff;
 }
 
@@ -1796,8 +1808,7 @@ function register() {
 }
 
 // libs/core/src/primitives/popover/popover.trans.styles.scss
-var popover_trans_styles_default = `
-/* stylelint-disable max-nesting-depth */
+var popover_trans_styles_default = `/* stylelint-disable max-nesting-depth */
 /* stylelint-enable max-nesting-depth */
 /**
  * Calculate the luminance for a color.
@@ -1810,6 +1821,10 @@ var popover_trans_styles_default = `
 /* stylelint-disable */
 /* stylelint-enable */
 /* stylelint-disable */
+/**
+* @deprecated
+* Use \`add-focus\` instead
+*/
 /** add background color, color and border-color to element when it has focus-visible i.e. tab focus */
 button,
 input[type=button],
@@ -1840,7 +1855,6 @@ input:where([type=button], [type=submit], [type=reset]),
   border-radius: var(--sg-border-radius);
   border: solid var(--sg-border-width) var(--sg-border-color);
   font-weight: 500;
-  transition: box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);
   min-height: 2.75rem;
   align-items: center;
   display: inline-flex;
@@ -1852,20 +1866,6 @@ button:where(:not(.link,
 [aria-haspopup=listbox],
 [aria-haspopup=menu],
 [role=switch],
-.gds-filter-chip)):focus,
-input:where([type=button], [type=submit], [type=reset]):focus,
-.button:focus {
-  border-color: rgb(0, 122, 199);
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(65, 176, 238);
-  outline-color: transparent;
-  outline-style: solid;
-}
-button:where(:not(.link,
-.close,
-.sg-table-sort,
-[aria-haspopup=listbox],
-[aria-haspopup=menu],
-[role=switch],
 .gds-filter-chip)):focus:not(:focus-visible),
 input:where([type=button], [type=submit], [type=reset]):focus:not(:focus-visible),
 .button:focus:not(:focus-visible) {
@@ -1878,15 +1878,23 @@ button:where(:not(.link,
 [aria-haspopup=listbox],
 [aria-haspopup=menu],
 [role=switch],
+.gds-filter-chip)):focus, button:where(:not(.link,
+.close,
+.sg-table-sort,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
 .gds-filter-chip)):focus-visible,
+input:where([type=button], [type=submit], [type=reset]):focus,
 input:where([type=button], [type=submit], [type=reset]):focus-visible,
+.button:focus,
 .button:focus-visible {
-  border-color: rgb(0, 122, 199) !important;
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(65, 176, 238);
-  outline-color: transparent;
+  outline-color: var(--gds-sys-color-focus-outline);
   outline-style: solid;
+  outline-width: 0.125rem;
+  outline-offset: 0.125rem;
 }
-@media (max-width: 575.98px) {
+@media (max-width: 35.98em) {
   button:where(:not(.link,
   .close,
   .sg-table-sort,
@@ -1965,8 +1973,7 @@ button[type=button]:where(:not(.primary,
 [aria-haspopup=listbox],
 [aria-haspopup=menu])),
 button[type=reset]:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)) {
-  transition: box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;
   background: transparent;
   border-color: rgb(0, 122, 199);
   color: rgb(0, 122, 199);
@@ -1982,36 +1989,6 @@ button:where(:not(.primary,
 [aria-haspopup=listbox],
 [aria-haspopup=menu],
 [role=switch],
-.gds-filter-chip)):focus,
-a.button:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus,
-button.secondary:focus,
-a.button.secondary:focus,
-input:is([type=button], [type=reset]):focus,
-button[type=button]:where(:not(.primary,
-.tertiary,
-.ghost,
-.danger,
-.close,
-.link,
-.icon,
-[aria-haspopup=listbox],
-[aria-haspopup=menu])):focus,
-button[type=reset]:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus {
-  border-color: rgb(0, 122, 199);
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(65, 176, 238);
-  outline-color: transparent;
-  outline-style: solid;
-}
-button:where(:not(.primary,
-.tertiary,
-.ghost,
-.danger,
-.close,
-.sg-table-sort,
-.link,
-[aria-haspopup=listbox],
-[aria-haspopup=menu],
-[role=switch],
 .gds-filter-chip)):focus:not(:focus-visible),
 a.button:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus:not(:focus-visible),
 button.secondary:focus:not(:focus-visible),
@@ -2040,10 +2017,24 @@ button:where(:not(.primary,
 [aria-haspopup=listbox],
 [aria-haspopup=menu],
 [role=switch],
+.gds-filter-chip)):focus, button:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
 .gds-filter-chip)):focus-visible,
+a.button:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus,
 a.button:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus-visible,
+button.secondary:focus,
 button.secondary:focus-visible,
+a.button.secondary:focus,
 a.button.secondary:focus-visible,
+input:is([type=button], [type=reset]):focus,
 input:is([type=button], [type=reset]):focus-visible,
 button[type=button]:where(:not(.primary,
 .tertiary,
@@ -2053,12 +2044,22 @@ button[type=button]:where(:not(.primary,
 .link,
 .icon,
 [aria-haspopup=listbox],
+[aria-haspopup=menu])):focus,
+button[type=button]:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.link,
+.icon,
+[aria-haspopup=listbox],
 [aria-haspopup=menu])):focus-visible,
+button[type=reset]:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus,
 button[type=reset]:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus-visible {
-  border-color: rgb(0, 122, 199) !important;
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(65, 176, 238);
-  outline-color: transparent;
+  outline-color: var(--gds-sys-color-focus-outline);
   outline-style: solid;
+  outline-width: 0.125rem;
+  outline-offset: 0.125rem;
 }
 button:where(:not(.primary,
 .tertiary,
@@ -2385,8 +2386,7 @@ button:where(:not(.primary,
 a.button:where(:not(.primary, .secondary, .ghost, .close, .link)),
 button.tertiary,
 a.button.tertiary {
-  transition: box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;
   background: transparent;
   border-color: transparent;
   color: rgb(0, 122, 199);
@@ -2402,14 +2402,12 @@ button:where(:not(.primary,
 [aria-haspopup=listbox],
 [aria-haspopup=menu],
 [role=switch],
-.gds-filter-chip)):focus,
-a.button:where(:not(.primary, .secondary, .ghost, .close, .link)):focus,
-button.tertiary:focus,
-a.button.tertiary:focus {
-  border-color: rgb(0, 122, 199);
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(65, 176, 238);
-  outline-color: transparent;
-  outline-style: solid;
+.gds-filter-chip)):focus:not(:focus-visible),
+a.button:where(:not(.primary, .secondary, .ghost, .close, .link)):focus:not(:focus-visible),
+button.tertiary:focus:not(:focus-visible),
+a.button.tertiary:focus:not(:focus-visible) {
+  box-shadow: none;
+  outline: 0;
 }
 button:where(:not(.primary,
 .secondary,
@@ -2421,14 +2419,7 @@ button:where(:not(.primary,
 [aria-haspopup=listbox],
 [aria-haspopup=menu],
 [role=switch],
-.gds-filter-chip)):focus:not(:focus-visible),
-a.button:where(:not(.primary, .secondary, .ghost, .close, .link)):focus:not(:focus-visible),
-button.tertiary:focus:not(:focus-visible),
-a.button.tertiary:focus:not(:focus-visible) {
-  box-shadow: none;
-  outline: 0;
-}
-button:where(:not(.primary,
+.gds-filter-chip)):focus, button:where(:not(.primary,
 .secondary,
 .ghost,
 .danger,
@@ -2439,13 +2430,16 @@ button:where(:not(.primary,
 [aria-haspopup=menu],
 [role=switch],
 .gds-filter-chip)):focus-visible,
+a.button:where(:not(.primary, .secondary, .ghost, .close, .link)):focus,
 a.button:where(:not(.primary, .secondary, .ghost, .close, .link)):focus-visible,
+button.tertiary:focus,
 button.tertiary:focus-visible,
+a.button.tertiary:focus,
 a.button.tertiary:focus-visible {
-  border-color: rgb(0, 122, 199) !important;
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(65, 176, 238);
-  outline-color: transparent;
+  outline-color: var(--gds-sys-color-focus-outline);
   outline-style: solid;
+  outline-width: 0.125rem;
+  outline-offset: 0.125rem;
 }
 button:where(:not(.primary,
 .secondary,
@@ -2636,7 +2630,7 @@ button[type=submit]:not(.secondary,
 .gds-filter-chip),
 input[type=submit]:not(.secondary, .ghost, .danger, .close, .link),
 a.button.primary {
-  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;
   background: rgb(0, 122, 199);
   border-color: rgb(0, 122, 199);
   color: #fff;
@@ -2792,7 +2786,7 @@ a.button.primary[aria-disabled=true]::placeholder {
 
 button.ghost,
 .button.ghost {
-  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;
   border-color: rgb(51, 51, 51);
   color: rgb(51, 51, 51);
   --color: rgb(51, 51, 51);
@@ -2920,8 +2914,7 @@ input[type=submit].danger:not(.secondary, .ghost, .close, .link) {
   border-color: rgb(187, 0, 12);
   color: #fff;
   --color: #fff;
-  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-  transition: box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;
 }
 button.primary.danger:not(:disabled, .disabled, [aria-disabled]):hover,
 .button.primary.danger:not(:disabled, .disabled, [aria-disabled]):hover,
@@ -2967,23 +2960,24 @@ input[type=submit].danger:not(.secondary, .ghost, .close, .link).active:hover,
 input[type=submit].danger:not(.secondary, .ghost, .close, .link):active:hover {
   opacity: 0.9;
 }
-button.primary.danger:focus,
-.button.primary.danger:focus,
-button[type=submit].danger:not(.secondary, .ghost, .close, .link):focus,
-input[type=submit].danger:not(.secondary, .ghost, .close, .link):focus {
-  border-color: rgb(187, 0, 12);
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(187, 0, 12);
-  outline-color: transparent;
-  outline-style: solid;
+button.primary.danger:focus:not(:focus-visible),
+.button.primary.danger:focus:not(:focus-visible),
+button[type=submit].danger:not(.secondary, .ghost, .close, .link):focus:not(:focus-visible),
+input[type=submit].danger:not(.secondary, .ghost, .close, .link):focus:not(:focus-visible) {
+  box-shadow: none;
+  outline: 0;
 }
-button.primary.danger:focus,
+button.primary.danger:focus, button.primary.danger:focus-visible,
 .button.primary.danger:focus,
+.button.primary.danger:focus-visible,
 button[type=submit].danger:not(.secondary, .ghost, .close, .link):focus,
-input[type=submit].danger:not(.secondary, .ghost, .close, .link):focus {
-  border-color: rgb(187, 0, 12) !important;
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(187, 0, 12);
-  outline-color: transparent;
+button[type=submit].danger:not(.secondary, .ghost, .close, .link):focus-visible,
+input[type=submit].danger:not(.secondary, .ghost, .close, .link):focus,
+input[type=submit].danger:not(.secondary, .ghost, .close, .link):focus-visible {
+  outline-color: var(--gds-sys-color-focus-outline);
   outline-style: solid;
+  outline-width: 0.125rem;
+  outline-offset: 0.125rem;
 }
 button.primary.danger:disabled, button.primary.danger.disabled, button.primary.danger[aria-disabled=true],
 .button.primary.danger:disabled,
@@ -3038,8 +3032,7 @@ button[type=reset].danger:where(:not(.primary, .tertiary, .ghost, .danger, .clos
   color: rgb(187, 0, 12);
   --color: rgb(187, 0, 12);
   border-color: transparent;
-  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-  transition: box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;
 }
 button.danger:where(:not(.primary,
 .tertiary,
@@ -3255,11 +3248,11 @@ button.danger:where(:not(.primary,
 .link,
 [aria-haspopup=listbox],
 [aria-haspopup=menu],
-[role=switch])):focus,
-a.button.danger:where(:not(.primary, .tertiary, .ghost, .close, .link)):focus,
-button.secondary.danger:focus,
-a.button.secondary.danger:focus,
-input.danger:is([type=button], [type=reset]):focus,
+[role=switch])):focus:not(:focus-visible),
+a.button.danger:where(:not(.primary, .tertiary, .ghost, .close, .link)):focus:not(:focus-visible),
+button.secondary.danger:focus:not(:focus-visible),
+a.button.secondary.danger:focus:not(:focus-visible),
+input.danger:is([type=button], [type=reset]):focus:not(:focus-visible),
 button[type=button].danger:where(:not(.primary,
 .tertiary,
 .ghost,
@@ -3267,12 +3260,10 @@ button[type=button].danger:where(:not(.primary,
 .close,
 .link,
 .gds-filter-chip [aria-haspopup=listbox],
-[aria-haspopup=menu])):focus,
-button[type=reset].danger:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus {
-  border-color: #b6000c;
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(187, 0, 12);
-  outline-color: transparent;
-  outline-style: solid;
+[aria-haspopup=menu])):focus:not(:focus-visible),
+button[type=reset].danger:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus:not(:focus-visible) {
+  box-shadow: none;
+  outline: 0;
 }
 button.danger:where(:not(.primary,
 .tertiary,
@@ -3282,11 +3273,23 @@ button.danger:where(:not(.primary,
 .link,
 [aria-haspopup=listbox],
 [aria-haspopup=menu],
-[role=switch])):focus,
+[role=switch])):focus, button.danger:where(:not(.primary,
+.tertiary,
+.ghost,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch])):focus-visible,
 a.button.danger:where(:not(.primary, .tertiary, .ghost, .close, .link)):focus,
+a.button.danger:where(:not(.primary, .tertiary, .ghost, .close, .link)):focus-visible,
 button.secondary.danger:focus,
+button.secondary.danger:focus-visible,
 a.button.secondary.danger:focus,
+a.button.secondary.danger:focus-visible,
 input.danger:is([type=button], [type=reset]):focus,
+input.danger:is([type=button], [type=reset]):focus-visible,
 button[type=button].danger:where(:not(.primary,
 .tertiary,
 .ghost,
@@ -3295,11 +3298,20 @@ button[type=button].danger:where(:not(.primary,
 .link,
 .gds-filter-chip [aria-haspopup=listbox],
 [aria-haspopup=menu])):focus,
-button[type=reset].danger:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus {
-  border-color: #b6000c !important;
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(187, 0, 12);
-  outline-color: transparent;
-  outline-style: solid;
+button[type=button].danger:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.link,
+.gds-filter-chip [aria-haspopup=listbox],
+[aria-haspopup=menu])):focus-visible,
+button[type=reset].danger:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus,
+button[type=reset].danger:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus-visible {
+  outline-color: var(--gds-sys-color-focus-outline);
+  outline-style: solid;
+  outline-width: 0.125rem;
+  outline-offset: 0.125rem;
 }
 
 button.danger:where(:not(.primary,
@@ -3317,8 +3329,7 @@ a.button.tertiary.danger {
   color: rgb(187, 0, 12);
   --color: rgb(187, 0, 12);
   border-color: transparent;
-  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-  transition: box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;
 }
 button.danger:where(:not(.primary,
 .secondary,
@@ -3444,14 +3455,12 @@ button.danger:where(:not(.primary,
 .link,
 [aria-haspopup=listbox],
 [aria-haspopup=menu],
-[role=switch])):focus,
-a.button.danger:where(:not(.primary, .secondary, .ghost, .close, .link)):focus,
-button.tertiary.danger:focus,
-a.button.tertiary.danger:focus {
-  border-color: #b6000c;
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(187, 0, 12);
-  outline-color: transparent;
-  outline-style: solid;
+[role=switch])):focus:not(:focus-visible),
+a.button.danger:where(:not(.primary, .secondary, .ghost, .close, .link)):focus:not(:focus-visible),
+button.tertiary.danger:focus:not(:focus-visible),
+a.button.tertiary.danger:focus:not(:focus-visible) {
+  box-shadow: none;
+  outline: 0;
 }
 button.danger:where(:not(.primary,
 .secondary,
@@ -3461,17 +3470,130 @@ button.danger:where(:not(.primary,
 .link,
 [aria-haspopup=listbox],
 [aria-haspopup=menu],
-[role=switch])):focus,
+[role=switch])):focus, button.danger:where(:not(.primary,
+.secondary,
+.ghost,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch])):focus-visible,
 a.button.danger:where(:not(.primary, .secondary, .ghost, .close, .link)):focus,
+a.button.danger:where(:not(.primary, .secondary, .ghost, .close, .link)):focus-visible,
 button.tertiary.danger:focus,
-a.button.tertiary.danger:focus {
-  border-color: #b6000c !important;
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(187, 0, 12);
-  outline-color: transparent;
+button.tertiary.danger:focus-visible,
+a.button.tertiary.danger:focus,
+a.button.tertiary.danger:focus-visible {
+  outline-color: var(--gds-sys-color-focus-outline);
   outline-style: solid;
+  outline-width: 0.125rem;
+  outline-offset: 0.125rem;
 }
 
-:host {
+.close {
+  /* smartphones, touchscreens */
+  font-size: 0;
+  background: hsla(var(--background-hsl), 0);
+  border: 0;
+  border-radius: 50%;
+  content: "";
+  cursor: pointer;
+  display: flex;
+  font-family: inherit;
+  height: 2rem;
+  position: relative;
+  width: 2rem;
+}
+@media (hover: none) and (pointer: coarse) {
+  .close:not(:disabled):not(.disabled) {
+    padding: 0.375rem;
+    height: 2.75rem;
+    width: 2.75rem;
+  }
+  .close:not(:disabled):not(.disabled) > i {
+    background: var(--gds-ref-pallet-base200);
+    height: 2rem;
+    width: 2rem;
+    border-radius: 50%;
+    position: relative;
+  }
+  .close:not(:disabled):not(.disabled) > div::after, .close:not(:disabled):not(.disabled) > div::before {
+    height: 0.789375rem;
+    width: 0.130625rem;
+    top: 0.625rem;
+  }
+}
+.close:focus:not(:focus-visible) {
+  box-shadow: none;
+  outline: 0;
+}
+.close:focus, .close:focus-visible i {
+  outline-color: var(--gds-sys-color-focus-outline);
+  outline-style: solid;
+  outline-width: 0.125rem;
+  outline-offset: 0.125rem;
+}
+.close > i {
+  border-radius: var(--gds-sys-shape-corner-round);
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.close > i::after, .close > i::before {
+  background: var(--gds-sys-color-font);
+  content: "";
+  display: block;
+  height: 0.789375rem;
+  width: 0.130625rem;
+  border-radius: 0.5px;
+  left: calc(50% - 0.0625rem);
+  position: absolute;
+  top: 0.625rem;
+}
+.close > i::after {
+  transform: rotateZ(45deg);
+}
+.close > i::before {
+  transform: rotateZ(-45deg);
+}
+.close > svg path {
+  fill: var(--gds-sys-color-font);
+}
+@media (min-width: 48em) {
+  .close:not(:disabled, .disabled):hover > i {
+    background: var(--gds-ref-pallet-base300);
+  }
+  .close:not(:disabled, .disabled):hover:active > i {
+    background: var(--gds-ref-pallet-base500);
+  }
+}
+
+:host([open]) dialog {
+  opacity: 1;
+  transform: translate3d(0, 0, 0);
+  visibility: visible;
+}
+
+header {
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  padding: 0.5rem 0.75rem;
+}
+@media (min-width: 36em) {
+  header {
+    display: none;
+  }
+}
+
+header h2 {
+  flex-grow: 1;
+  font-weight: 500;
+  line-height: 1.5;
+  margin: 0;
+}
+
+dialog {
   --z-index: var(--sg-z-index-popover);
   max-height: calc(100% - 1rem);
   background-color: var(--sg-popover-background);
@@ -3482,10 +3604,13 @@ a.button.tertiary.danger:focus {
   position: fixed;
   visibility: hidden;
   z-index: var(--z-index);
+  border-width: 0;
   overflow: hidden;
+  padding: 0;
+  right: 0;
 }
-@media (max-width: 575.98px) {
-  :host {
+@media (max-width: 35.98em) {
+  dialog {
     border-top: solid var(--sg-border-width) var(--sg-border-color);
     --border-color: var(--sg-border-color);
     padding-bottom: 0.5rem;
@@ -3493,17 +3618,16 @@ a.button.tertiary.danger:focus {
     bottom: 0;
     box-shadow: 0 -0.25rem 1rem rgba(0, 0, 0, 0.1);
     left: 0;
-    transform: translate3d(0, 100%, 0);
     transition: all 300ms ease-in-out;
     width: 100%;
   }
 }
-@media (min-width: 576px) {
-  :host {
+@media (min-width: 36em) {
+  dialog {
     padding-bottom: 0;
     border: solid var(--sg-border-width) var(--sg-border-color);
-    --border-color: var(--sg-popover-border-color);
-    --sg-border-color: var(--sg-popover-border-color);
+    --border-color: var(--gds-ref-pallet-base800);
+    --sg-border-color: var(--gds-ref-pallet-base800);
     border-radius: var(--sg-border-radius);
     max-height: 400px;
     box-shadow: var(--sg-popover-box-shadow);
@@ -3511,30 +3635,45 @@ a.button.tertiary.danger:focus {
     position: absolute;
   }
 }
-:host > [role=listbox] {
+dialog > [role=listbox] {
   width: 100%;
   overflow-y: auto;
 }
-:host.active {
+dialog.active {
   opacity: 1;
-  transform: translate3d(0, 0, 0);
   visibility: visible;
 }
-:host .close {
+dialog .close {
   margin: 0.25rem;
   flex-shrink: 0;
   align-self: flex-end;
 }
-@media (min-width: 576px) {
-  :host .close {
+@media (min-width: 36em) {
+  dialog .close {
     display: none;
   }
 }
+@media (max-width: 35.98em) {
+  dialog {
+    border-radius: 1rem;
+  }
+}
+@media (min-width: 36em) {
+  dialog {
+    inset: auto;
+    position: fixed;
+  }
+}
 
-:host([open]) {
-  opacity: 1;
-  transform: translate3d(0, 0, 0);
-  visibility: visible;
+dialog::backdrop {
+  background-color: rgba(0, 0, 0, 0.2);
+  display: block;
+  position: fixed;
+}
+@media (min-width: 36em) {
+  dialog::backdrop {
+    opacity: 0;
+  }
 }`;
 
 // libs/core/src/primitives/popover/popover.trans.styles.ts
@@ -3543,8 +3682,7 @@ function register2() {
 }
 
 // libs/core/src/components/dropdown/dropdown.trans.styles.scss
-var dropdown_trans_styles_default = `
-/**
+var dropdown_trans_styles_default = `/**
  * Calculate the luminance for a color.
  * See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
  */
@@ -3557,6 +3695,10 @@ var dropdown_trans_styles_default = `
 /* stylelint-disable */
 /* stylelint-enable */
 /* stylelint-disable */
+/**
+* @deprecated
+* Use \`add-focus\` instead
+*/
 /** add background color, color and border-color to element when it has focus-visible i.e. tab focus */
 button,
 input[type=button],
@@ -3587,7 +3729,6 @@ input:where([type=button], [type=submit], [type=reset]),
   border-radius: var(--sg-border-radius);
   border: solid var(--sg-border-width) var(--sg-border-color);
   font-weight: 500;
-  transition: box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);
   min-height: 2.75rem;
   align-items: center;
   display: inline-flex;
@@ -3599,20 +3740,6 @@ button:where(:not(.link,
 [aria-haspopup=listbox],
 [aria-haspopup=menu],
 [role=switch],
-.gds-filter-chip)):focus,
-input:where([type=button], [type=submit], [type=reset]):focus,
-.button:focus {
-  border-color: rgb(0, 122, 199);
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(65, 176, 238);
-  outline-color: transparent;
-  outline-style: solid;
-}
-button:where(:not(.link,
-.close,
-.sg-table-sort,
-[aria-haspopup=listbox],
-[aria-haspopup=menu],
-[role=switch],
 .gds-filter-chip)):focus:not(:focus-visible),
 input:where([type=button], [type=submit], [type=reset]):focus:not(:focus-visible),
 .button:focus:not(:focus-visible) {
@@ -3625,15 +3752,23 @@ button:where(:not(.link,
 [aria-haspopup=listbox],
 [aria-haspopup=menu],
 [role=switch],
+.gds-filter-chip)):focus, button:where(:not(.link,
+.close,
+.sg-table-sort,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
 .gds-filter-chip)):focus-visible,
+input:where([type=button], [type=submit], [type=reset]):focus,
 input:where([type=button], [type=submit], [type=reset]):focus-visible,
+.button:focus,
 .button:focus-visible {
-  border-color: rgb(0, 122, 199) !important;
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(65, 176, 238);
-  outline-color: transparent;
+  outline-color: var(--gds-sys-color-focus-outline);
   outline-style: solid;
+  outline-width: 0.125rem;
+  outline-offset: 0.125rem;
 }
-@media (max-width: 575.98px) {
+@media (max-width: 35.98em) {
   button:where(:not(.link,
   .close,
   .sg-table-sort,
@@ -3712,8 +3847,7 @@ button[type=button]:where(:not(.primary,
 [aria-haspopup=listbox],
 [aria-haspopup=menu])),
 button[type=reset]:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)) {
-  transition: box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;
   background: transparent;
   border-color: rgb(0, 122, 199);
   color: rgb(0, 122, 199);
@@ -3729,36 +3863,6 @@ button:where(:not(.primary,
 [aria-haspopup=listbox],
 [aria-haspopup=menu],
 [role=switch],
-.gds-filter-chip)):focus,
-a.button:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus,
-button.secondary:focus,
-a.button.secondary:focus,
-input:is([type=button], [type=reset]):focus,
-button[type=button]:where(:not(.primary,
-.tertiary,
-.ghost,
-.danger,
-.close,
-.link,
-.icon,
-[aria-haspopup=listbox],
-[aria-haspopup=menu])):focus,
-button[type=reset]:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus {
-  border-color: rgb(0, 122, 199);
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(65, 176, 238);
-  outline-color: transparent;
-  outline-style: solid;
-}
-button:where(:not(.primary,
-.tertiary,
-.ghost,
-.danger,
-.close,
-.sg-table-sort,
-.link,
-[aria-haspopup=listbox],
-[aria-haspopup=menu],
-[role=switch],
 .gds-filter-chip)):focus:not(:focus-visible),
 a.button:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus:not(:focus-visible),
 button.secondary:focus:not(:focus-visible),
@@ -3787,10 +3891,24 @@ button:where(:not(.primary,
 [aria-haspopup=listbox],
 [aria-haspopup=menu],
 [role=switch],
+.gds-filter-chip)):focus, button:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch],
 .gds-filter-chip)):focus-visible,
+a.button:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus,
 a.button:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus-visible,
+button.secondary:focus,
 button.secondary:focus-visible,
+a.button.secondary:focus,
 a.button.secondary:focus-visible,
+input:is([type=button], [type=reset]):focus,
 input:is([type=button], [type=reset]):focus-visible,
 button[type=button]:where(:not(.primary,
 .tertiary,
@@ -3800,12 +3918,22 @@ button[type=button]:where(:not(.primary,
 .link,
 .icon,
 [aria-haspopup=listbox],
+[aria-haspopup=menu])):focus,
+button[type=button]:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.link,
+.icon,
+[aria-haspopup=listbox],
 [aria-haspopup=menu])):focus-visible,
+button[type=reset]:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus,
 button[type=reset]:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus-visible {
-  border-color: rgb(0, 122, 199) !important;
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(65, 176, 238);
-  outline-color: transparent;
+  outline-color: var(--gds-sys-color-focus-outline);
   outline-style: solid;
+  outline-width: 0.125rem;
+  outline-offset: 0.125rem;
 }
 button:where(:not(.primary,
 .tertiary,
@@ -4132,8 +4260,7 @@ button:where(:not(.primary,
 a.button:where(:not(.primary, .secondary, .ghost, .close, .link)),
 button.tertiary,
 a.button.tertiary {
-  transition: box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;
   background: transparent;
   border-color: transparent;
   color: rgb(0, 122, 199);
@@ -4149,14 +4276,12 @@ button:where(:not(.primary,
 [aria-haspopup=listbox],
 [aria-haspopup=menu],
 [role=switch],
-.gds-filter-chip)):focus,
-a.button:where(:not(.primary, .secondary, .ghost, .close, .link)):focus,
-button.tertiary:focus,
-a.button.tertiary:focus {
-  border-color: rgb(0, 122, 199);
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(65, 176, 238);
-  outline-color: transparent;
-  outline-style: solid;
+.gds-filter-chip)):focus:not(:focus-visible),
+a.button:where(:not(.primary, .secondary, .ghost, .close, .link)):focus:not(:focus-visible),
+button.tertiary:focus:not(:focus-visible),
+a.button.tertiary:focus:not(:focus-visible) {
+  box-shadow: none;
+  outline: 0;
 }
 button:where(:not(.primary,
 .secondary,
@@ -4168,14 +4293,7 @@ button:where(:not(.primary,
 [aria-haspopup=listbox],
 [aria-haspopup=menu],
 [role=switch],
-.gds-filter-chip)):focus:not(:focus-visible),
-a.button:where(:not(.primary, .secondary, .ghost, .close, .link)):focus:not(:focus-visible),
-button.tertiary:focus:not(:focus-visible),
-a.button.tertiary:focus:not(:focus-visible) {
-  box-shadow: none;
-  outline: 0;
-}
-button:where(:not(.primary,
+.gds-filter-chip)):focus, button:where(:not(.primary,
 .secondary,
 .ghost,
 .danger,
@@ -4186,13 +4304,16 @@ button:where(:not(.primary,
 [aria-haspopup=menu],
 [role=switch],
 .gds-filter-chip)):focus-visible,
+a.button:where(:not(.primary, .secondary, .ghost, .close, .link)):focus,
 a.button:where(:not(.primary, .secondary, .ghost, .close, .link)):focus-visible,
+button.tertiary:focus,
 button.tertiary:focus-visible,
+a.button.tertiary:focus,
 a.button.tertiary:focus-visible {
-  border-color: rgb(0, 122, 199) !important;
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(65, 176, 238);
-  outline-color: transparent;
+  outline-color: var(--gds-sys-color-focus-outline);
   outline-style: solid;
+  outline-width: 0.125rem;
+  outline-offset: 0.125rem;
 }
 button:where(:not(.primary,
 .secondary,
@@ -4383,7 +4504,7 @@ button[type=submit]:not(.secondary,
 .gds-filter-chip),
 input[type=submit]:not(.secondary, .ghost, .danger, .close, .link),
 a.button.primary {
-  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;
   background: rgb(0, 122, 199);
   border-color: rgb(0, 122, 199);
   color: #fff;
@@ -4539,7 +4660,7 @@ a.button.primary[aria-disabled=true]::placeholder {
 
 button.ghost,
 .button.ghost {
-  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;
   border-color: rgb(51, 51, 51);
   color: rgb(51, 51, 51);
   --color: rgb(51, 51, 51);
@@ -4667,8 +4788,7 @@ input[type=submit].danger:not(.secondary, .ghost, .close, .link) {
   border-color: rgb(187, 0, 12);
   color: #fff;
   --color: #fff;
-  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-  transition: box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;
 }
 button.primary.danger:not(:disabled, .disabled, [aria-disabled]):hover,
 .button.primary.danger:not(:disabled, .disabled, [aria-disabled]):hover,
@@ -4714,23 +4834,24 @@ input[type=submit].danger:not(.secondary, .ghost, .close, .link).active:hover,
 input[type=submit].danger:not(.secondary, .ghost, .close, .link):active:hover {
   opacity: 0.9;
 }
-button.primary.danger:focus,
-.button.primary.danger:focus,
-button[type=submit].danger:not(.secondary, .ghost, .close, .link):focus,
-input[type=submit].danger:not(.secondary, .ghost, .close, .link):focus {
-  border-color: rgb(187, 0, 12);
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(187, 0, 12);
-  outline-color: transparent;
-  outline-style: solid;
+button.primary.danger:focus:not(:focus-visible),
+.button.primary.danger:focus:not(:focus-visible),
+button[type=submit].danger:not(.secondary, .ghost, .close, .link):focus:not(:focus-visible),
+input[type=submit].danger:not(.secondary, .ghost, .close, .link):focus:not(:focus-visible) {
+  box-shadow: none;
+  outline: 0;
 }
-button.primary.danger:focus,
+button.primary.danger:focus, button.primary.danger:focus-visible,
 .button.primary.danger:focus,
+.button.primary.danger:focus-visible,
 button[type=submit].danger:not(.secondary, .ghost, .close, .link):focus,
-input[type=submit].danger:not(.secondary, .ghost, .close, .link):focus {
-  border-color: rgb(187, 0, 12) !important;
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(187, 0, 12);
-  outline-color: transparent;
+button[type=submit].danger:not(.secondary, .ghost, .close, .link):focus-visible,
+input[type=submit].danger:not(.secondary, .ghost, .close, .link):focus,
+input[type=submit].danger:not(.secondary, .ghost, .close, .link):focus-visible {
+  outline-color: var(--gds-sys-color-focus-outline);
   outline-style: solid;
+  outline-width: 0.125rem;
+  outline-offset: 0.125rem;
 }
 button.primary.danger:disabled, button.primary.danger.disabled, button.primary.danger[aria-disabled=true],
 .button.primary.danger:disabled,
@@ -4785,8 +4906,7 @@ button[type=reset].danger:where(:not(.primary, .tertiary, .ghost, .danger, .clos
   color: rgb(187, 0, 12);
   --color: rgb(187, 0, 12);
   border-color: transparent;
-  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-  transition: box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;
 }
 button.danger:where(:not(.primary,
 .tertiary,
@@ -5002,11 +5122,11 @@ button.danger:where(:not(.primary,
 .link,
 [aria-haspopup=listbox],
 [aria-haspopup=menu],
-[role=switch])):focus,
-a.button.danger:where(:not(.primary, .tertiary, .ghost, .close, .link)):focus,
-button.secondary.danger:focus,
-a.button.secondary.danger:focus,
-input.danger:is([type=button], [type=reset]):focus,
+[role=switch])):focus:not(:focus-visible),
+a.button.danger:where(:not(.primary, .tertiary, .ghost, .close, .link)):focus:not(:focus-visible),
+button.secondary.danger:focus:not(:focus-visible),
+a.button.secondary.danger:focus:not(:focus-visible),
+input.danger:is([type=button], [type=reset]):focus:not(:focus-visible),
 button[type=button].danger:where(:not(.primary,
 .tertiary,
 .ghost,
@@ -5014,12 +5134,10 @@ button[type=button].danger:where(:not(.primary,
 .close,
 .link,
 .gds-filter-chip [aria-haspopup=listbox],
-[aria-haspopup=menu])):focus,
-button[type=reset].danger:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus {
-  border-color: #b6000c;
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(187, 0, 12);
-  outline-color: transparent;
-  outline-style: solid;
+[aria-haspopup=menu])):focus:not(:focus-visible),
+button[type=reset].danger:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus:not(:focus-visible) {
+  box-shadow: none;
+  outline: 0;
 }
 button.danger:where(:not(.primary,
 .tertiary,
@@ -5029,11 +5147,23 @@ button.danger:where(:not(.primary,
 .link,
 [aria-haspopup=listbox],
 [aria-haspopup=menu],
-[role=switch])):focus,
+[role=switch])):focus, button.danger:where(:not(.primary,
+.tertiary,
+.ghost,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch])):focus-visible,
 a.button.danger:where(:not(.primary, .tertiary, .ghost, .close, .link)):focus,
+a.button.danger:where(:not(.primary, .tertiary, .ghost, .close, .link)):focus-visible,
 button.secondary.danger:focus,
+button.secondary.danger:focus-visible,
 a.button.secondary.danger:focus,
+a.button.secondary.danger:focus-visible,
 input.danger:is([type=button], [type=reset]):focus,
+input.danger:is([type=button], [type=reset]):focus-visible,
 button[type=button].danger:where(:not(.primary,
 .tertiary,
 .ghost,
@@ -5042,11 +5172,20 @@ button[type=button].danger:where(:not(.primary,
 .link,
 .gds-filter-chip [aria-haspopup=listbox],
 [aria-haspopup=menu])):focus,
-button[type=reset].danger:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus {
-  border-color: #b6000c !important;
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(187, 0, 12);
-  outline-color: transparent;
+button[type=button].danger:where(:not(.primary,
+.tertiary,
+.ghost,
+.danger,
+.close,
+.link,
+.gds-filter-chip [aria-haspopup=listbox],
+[aria-haspopup=menu])):focus-visible,
+button[type=reset].danger:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus,
+button[type=reset].danger:where(:not(.primary, .tertiary, .ghost, .danger, .close, .link)):focus-visible {
+  outline-color: var(--gds-sys-color-focus-outline);
   outline-style: solid;
+  outline-width: 0.125rem;
+  outline-offset: 0.125rem;
 }
 
 button.danger:where(:not(.primary,
@@ -5064,8 +5203,7 @@ a.button.tertiary.danger {
   color: rgb(187, 0, 12);
   --color: rgb(187, 0, 12);
   border-color: transparent;
-  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-  transition: box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;
 }
 button.danger:where(:not(.primary,
 .secondary,
@@ -5191,14 +5329,12 @@ button.danger:where(:not(.primary,
 .link,
 [aria-haspopup=listbox],
 [aria-haspopup=menu],
-[role=switch])):focus,
-a.button.danger:where(:not(.primary, .secondary, .ghost, .close, .link)):focus,
-button.tertiary.danger:focus,
-a.button.tertiary.danger:focus {
-  border-color: #b6000c;
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(187, 0, 12);
-  outline-color: transparent;
-  outline-style: solid;
+[role=switch])):focus:not(:focus-visible),
+a.button.danger:where(:not(.primary, .secondary, .ghost, .close, .link)):focus:not(:focus-visible),
+button.tertiary.danger:focus:not(:focus-visible),
+a.button.tertiary.danger:focus:not(:focus-visible) {
+  box-shadow: none;
+  outline: 0;
 }
 button.danger:where(:not(.primary,
 .secondary,
@@ -5208,14 +5344,25 @@ button.danger:where(:not(.primary,
 .link,
 [aria-haspopup=listbox],
 [aria-haspopup=menu],
-[role=switch])):focus,
+[role=switch])):focus, button.danger:where(:not(.primary,
+.secondary,
+.ghost,
+.close,
+.sg-table-sort,
+.link,
+[aria-haspopup=listbox],
+[aria-haspopup=menu],
+[role=switch])):focus-visible,
 a.button.danger:where(:not(.primary, .secondary, .ghost, .close, .link)):focus,
+a.button.danger:where(:not(.primary, .secondary, .ghost, .close, .link)):focus-visible,
 button.tertiary.danger:focus,
-a.button.tertiary.danger:focus {
-  border-color: #b6000c !important;
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(187, 0, 12);
-  outline-color: transparent;
+button.tertiary.danger:focus-visible,
+a.button.tertiary.danger:focus,
+a.button.tertiary.danger:focus-visible {
+  outline-color: var(--gds-sys-color-focus-outline);
   outline-style: solid;
+  outline-width: 0.125rem;
+  outline-offset: 0.125rem;
 }
 
 /* rules for groups of checkboxes and radio buttons*/
@@ -5240,7 +5387,6 @@ input[type=week] {
   border-radius: var(--sg-border-radius);
   border: solid var(--sg-border-width) var(--sg-border-color);
   --border-color: var(--sg-border-color);
-  transition: box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);
   background-color: var(--sg-form-control-bg);
   color: var(--sg-text-primary);
   min-height: 2.75rem;
@@ -5248,25 +5394,6 @@ input[type=week] {
   align-items: center;
   justify-content: center;
 }
-input:not([type]):focus,
-input[type=date]:focus,
-input[type=datetime]:focus,
-input[type=datetime-local]:focus,
-input[type=email]:focus,
-input[type=month]:focus,
-input[type=number]:focus,
-input[type=password]:focus,
-input[type=search]:focus,
-input[type=tel]:focus,
-input[type=text]:focus,
-input[type=time]:focus,
-input[type=url]:focus,
-input[type=week]:focus {
-  border-color: rgb(0, 122, 199);
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(65, 176, 238);
-  outline-color: transparent;
-  outline-style: solid;
-}
 input:not([type]):focus:not(:focus-visible),
 input[type=date]:focus:not(:focus-visible),
 input[type=datetime]:focus:not(:focus-visible),
@@ -5284,24 +5411,37 @@ input[type=week]:focus:not(:focus-visible) {
   box-shadow: none;
   outline: 0;
 }
-input:not([type]):focus-visible,
+input:not([type]):focus, input:not([type]):focus-visible,
+input[type=date]:focus,
 input[type=date]:focus-visible,
+input[type=datetime]:focus,
 input[type=datetime]:focus-visible,
+input[type=datetime-local]:focus,
 input[type=datetime-local]:focus-visible,
+input[type=email]:focus,
 input[type=email]:focus-visible,
+input[type=month]:focus,
 input[type=month]:focus-visible,
+input[type=number]:focus,
 input[type=number]:focus-visible,
+input[type=password]:focus,
 input[type=password]:focus-visible,
+input[type=search]:focus,
 input[type=search]:focus-visible,
+input[type=tel]:focus,
 input[type=tel]:focus-visible,
+input[type=text]:focus,
 input[type=text]:focus-visible,
+input[type=time]:focus,
 input[type=time]:focus-visible,
+input[type=url]:focus,
 input[type=url]:focus-visible,
+input[type=week]:focus,
 input[type=week]:focus-visible {
-  border-color: rgb(0, 122, 199) !important;
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(65, 176, 238);
-  outline-color: transparent;
+  outline-color: var(--gds-sys-color-focus-outline);
   outline-style: solid;
+  outline-width: 0.125rem;
+  outline-offset: 0.125rem;
 }
 input:not([type]).small,
 input[type=date].small,
@@ -5436,12 +5576,12 @@ input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner
 }
 
 :host {
-  display: inline-block;
+  display: block;
 }
 
 :host(:invalid) button + .form-info {
   position: relative;
-  transition: 200ms ease-in-out;
+  transition: all 200ms ease-in-out, outline-offset 0s, outline-width 0s;
   color: var(--intent-danger-background);
   opacity: 1;
 }
@@ -5472,6 +5612,7 @@ input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner
 
 input[type=text] {
   border-radius: 0;
+  font-size: 1rem;
   line-height: 1;
   margin: -1px;
   min-height: auto;
@@ -5491,13 +5632,11 @@ button {
   border-radius: var(--sg-border-radius);
   border: solid var(--sg-border-width) var(--sg-border-color);
   font-weight: 500;
-  transition: box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);
   min-height: 2.75rem;
   align-items: center;
   display: inline-flex;
   justify-content: center;
-  transition: box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1), outline-offset 0s, outline-width 0s;
   background: transparent;
   border-color: rgb(0, 122, 199);
   color: rgb(0, 122, 199);
@@ -5513,9 +5652,8 @@ button {
   padding-top: 0.75rem;
   border-radius: var(--sg-border-radius);
   border: solid var(--sg-border-width) var(--sg-border-color);
-  --border-color: var(--sg-border-color);
-  transition: box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1);
-  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
+  --border-color: var(--gds-ref-pallet-base600);
+  --sg-border-color: var(--gds-ref-pallet-base600);
   background: var(--sg-form-control-bg);
   color: var(--text-primary-color);
   min-height: 2.75rem;
@@ -5530,23 +5668,17 @@ button {
   margin-top: 0.5rem;
   width: 100%;
 }
-button:focus {
-  border-color: rgb(0, 122, 199);
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(65, 176, 238);
-  outline-color: transparent;
-  outline-style: solid;
-}
 button:focus:not(:focus-visible) {
   box-shadow: none;
   outline: 0;
 }
-button:focus-visible {
-  border-color: rgb(0, 122, 199) !important;
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(65, 176, 238);
-  outline-color: transparent;
+button:focus, button:focus-visible {
+  outline-color: var(--gds-sys-color-focus-outline);
   outline-style: solid;
+  outline-width: 0.125rem;
+  outline-offset: 0.125rem;
 }
-@media (max-width: 575.98px) {
+@media (max-width: 35.98em) {
   button {
     min-width: 100%;
   }
@@ -5567,21 +5699,15 @@ button.large {
   font-size: 1.5rem;
   line-height: 2rem;
 }
-button:focus {
-  border-color: rgb(0, 122, 199);
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(65, 176, 238);
-  outline-color: transparent;
-  outline-style: solid;
-}
 button:focus:not(:focus-visible) {
   box-shadow: none;
   outline: 0;
 }
-button:focus-visible {
-  border-color: rgb(0, 122, 199) !important;
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(65, 176, 238);
-  outline-color: transparent;
+button:focus, button:focus-visible {
+  outline-color: var(--gds-sys-color-focus-outline);
   outline-style: solid;
+  outline-width: 0.125rem;
+  outline-offset: 0.125rem;
 }
 button:not(:disabled, .disabled, [aria-disabled]):hover {
   background-color: #199be3;
@@ -5605,30 +5731,24 @@ button:disabled, button.disabled, button[aria-disabled=true] {
 button:disabled::placeholder, button.disabled::placeholder, button[aria-disabled=true]::placeholder {
   color: var(--text-disabled-color);
 }
-button:focus {
-  border-color: rgb(0, 122, 199);
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(65, 176, 238);
-  outline-color: transparent;
-  outline-style: solid;
-}
-button:focus {
-  border-color: rgb(0, 122, 199) !important;
-  box-shadow: 0 0 0.25rem 0.0625rem rgb(65, 176, 238);
-  outline-color: transparent;
+button:focus, button:focus {
+  outline-color: var(--gds-sys-color-focus-outline);
   outline-style: solid;
+  outline-width: 0.125rem;
+  outline-offset: 0.125rem;
 }
-button:not(:disabled, .disabled, [aria-disabled]):hover {
-  background-color: #199be3;
-  color: rgb(255, 255, 255);
-  --background: #199be3;
-  --color: rgb(255, 255, 255);
-  border-color: #199be3;
-}
-@media (max-width: 575.98px) {
+@media (max-width: 35.98em) {
   button {
     min-width: 100%;
   }
 }
+button:not(:disabled, .disabled, [aria-disabled]):hover {
+  --background: var(--gds-ref-pallet-base200);
+  --color: var(--gds-ref-pallet-base800);
+  background-color: var(--gds-ref-pallet-base200);
+  color: var(--gds-ref-pallet-base800);
+  border-color: var(--gds-ref-pallet-base800);
+}
 button > span {
   white-space: nowrap;
   overflow: hidden;
@@ -5637,8 +5757,8 @@ button > span {
 button::after {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
-  border-bottom: solid 2px rgb(0, 122, 199);
-  border-left: solid 2px rgb(0, 122, 199);
+  border-bottom: solid 2px var(--gds-ref-pallet-base800);
+  border-left: solid 2px var(--gds-ref-pallet-base800);
   content: "";
   display: block;
   height: 0.75rem;
@@ -5669,21 +5789,55 @@ function register3() {
   TransitionalStyles.instance.register("gds-dropdown", dropdown_trans_styles_default.toString());
 }
 
+// libs/core/src/utils/helpers/custom-element-scoping.ts
+import { html as litHtml } from "lit";
+import { customElement } from "lit/decorators.js";
+var VER_SUFFIX = "-b7215a";
+var elementLookupTable = /* @__PURE__ */ new Map();
+var templateCache = /* @__PURE__ */ new WeakMap();
+function applyElementScoping(strings, ...values) {
+  let modstrings = templateCache.get(strings);
+  if (!modstrings) {
+    modstrings = replaceTags(strings);
+    modstrings.raw = replaceTags(strings.raw);
+    templateCache.set(strings, modstrings);
+  }
+  return [modstrings, ...values];
+}
+var replaceTags = (inStr) => inStr.map((s) => {
+  for (const [key, value] of elementLookupTable.entries()) {
+    s = s.split(key).join(value);
+  }
+  return s;
+});
+function htmlTemplateTagFactory(extendedTag) {
+  return (strings, ...values) => {
+    if (globalThis.GDS_DISABLE_VERSIONED_ELEMENTS) {
+      return extendedTag(strings, ...values);
+    }
+    const [modstrings, ...modvalues] = applyElementScoping(strings, ...values);
+    return extendedTag(modstrings, ...modvalues);
+  };
+}
+var html = htmlTemplateTagFactory(litHtml);
+
 // libs/core/src/utils/helpers/transitional-styles.ts
 var registerTransitionalStyles = () => {
   register3();
   register();
   register2();
 };
-var TransitionalStyles = class {
+var TransitionalStyles = class _TransitionalStyles {
   constructor() {
     this.sheets = /* @__PURE__ */ new Map();
     this.elements = /* @__PURE__ */ new Map();
   }
   static get instance() {
-    if (!globalThis.__gdsTransitionalStyles)
-      globalThis.__gdsTransitionalStyles = new TransitionalStyles();
-    return globalThis.__gdsTransitionalStyles;
+    if (!globalThis.__gdsTransitionalStyles?.[VER_SUFFIX])
+      globalThis.__gdsTransitionalStyles = {
+        [VER_SUFFIX]: new _TransitionalStyles()
+      };
+    return globalThis.__gdsTransitionalStyles[VER_SUFFIX];
   }
   apply(element, styleKey) {
     const sheet = this.sheets.get(styleKey);