@govtechsg/sgds-web-component 3.28.1-rc.0 → 3.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@govtechsg/sgds-web-component",
-  "version": "3.28.1-rc.0",
+  "version": "3.29.0",
   "description": "",
   "main": "./index.umd.js",
   "module": "./index.js",

package/react/base/button.cjs.js

@@ -1,6 +1,6 @@
 "use client";
 //#region src/base/button.css
-var css_248z = require("lit").css`:host{--btn-font-weight:var(--sgds-font-weight-regular);--btn-color:var(--sgds-color-fixed-light);--btn-bg:var(--sgds-primary-surface-default);--btn-hover-bg:var(--sgds-primary-surface-emphasis);--btn-border-radius:var(--sgds-border-radius-md);--btn-opacity:var(--sgds-opacity-100,1)}:host([variant=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=primary][tone=brand]){--btn-bg:var(--sgds-primary-surface-default);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline]){--btn-border-width:var(--sgds-border-width-1)}:host([variant=outline][tone=brand]){--btn-border-color:var(--sgds-primary-border-color-default);--btn-bg:var(--sgds-bg-transparent);--btn-color:var(--sgds-primary-color-default);--btn-hover-bg:var(--sgds-primary-bg-translucent)}:host([variant=ghost][tone=brand]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default)}:host([variant=primary][tone=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline][tone=danger]){--btn-border-color:var(--sgds-danger-border-color-default);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-danger-surface-translucent);--btn-color:var(--sgds-danger-color-default)}:host([variant=ghost][tone=danger]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-danger-surface-translucent);--btn-color:var(--sgds-danger-color-default)}:host([variant=primary][tone=fixed-light]){--btn-bg:var(--sgds-surface-fixed-light);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark,hsla(0,0%,5%,.2)) 0%,var(--sgds-bg-translucent-fixed-dark,hsla(0,0%,5%,.2)) 100%),var(--sgds-surface-fixed-light,#fff);--btn-color:var(--sgds-color-fixed-dark)}:host([variant=outline][tone=fixed-light]){--btn-border-color:var(--sgds-border-color-fixed-light);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark) 0%,var(--sgds-bg-translucent-fixed-dark) 100%),var(--sgds-bg-transparent);--btn-color:var(--sgds-color-fixed-light)}:host([variant=ghost][tone=fixed-light]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark) 0%,var(--sgds-bg-translucent-fixed-dark) 100%),var(--sgds-bg-transparent);--btn-color:var(--sgds-color-fixed-light)}:host([variant=primary][tone=neutral]){--btn-bg:var(--sgds-surface-inverse);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-inverse) 0%,var(--sgds-bg-translucent-inverse) 100%),var(--sgds-surface-inverse);--btn-color:var(--sgds-color-inverse)}:host([variant=outline][tone=neutral]){--btn-border-color:var(--sgds-border-color-emphasis);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-inverse) 0%,var(--sgds-bg-translucent-inverse) 100%),var(--sgds-bg-translucent-subtle);--btn-color:var(--sgds-color-default)}:host([variant=ghost][tone=neutral]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-bg-translucent-subtle);--btn-color:var(--sgds-color-default)}:host([variant=ghost]) .btn,:host([variant=outline]) .btn,:host([variant=primary]) .btn{color:var(--btn-color)}:host([variant=outline]) .btn{border:var(--btn-border-width) solid var(--btn-border-color)}:host([size=lg]) .btn{font-size:var(--sgds-font-size-label-lg);height:var(--sgds-dimension-56);line-height:var(--sgds-line-height-md);min-width:var(--sgds-dimension-112);padding:var(--sgds-padding-none) var(--sgds-padding-xl)}:host([size=sm]) .btn{font-size:var(--sgds-font-size-label-sm);height:var(--sgds-dimension-40);line-height:var(--sgds-line-height-2-xs);min-width:var(--sgds-dimension-80);padding:var(--sgds-padding-none) var(--sgds-padding-md)}:host([size=xs]) .btn{font-size:var(--sgds-font-size-label-xs);height:var(--sgds-dimension-32);line-height:var(--sgds-line-height-3-xs);min-width:var(--sgds-dimension-64);padding:var(--sgds-padding-none) var(--sgds-padding-sm)}.btn{align-items:center;background-color:var(--btn-bg);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--btn-border-radius);color:var(--sgds-color-fixed-light);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-label-md);font-weight:var(--btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-xs);min-width:var(--sgds-dimension-96);opacity:var(--btn-opacity);padding:var(--sgds-padding-none) var(--sgds-padding-lg);text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;user-select:none;vertical-align:middle;white-space:nowrap;width:inherit}.btn.active,.btn:hover{background:var(--btn-hover-bg)}.btn:focus-visible{background:var(--btn-hover-bg);border-color:transparent;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.btn.disabled,.btn:disabled{color:var(--btn-color);cursor:not-allowed;opacity:var(--sgds-opacity-40)}.btn.loading{cursor:default}.btn slot::slotted(*){color:var(--btn-color)}`;
+var css_248z = require("lit").css`:host{--btn-font-weight:var(--sgds-font-weight-regular);--btn-color:var(--sgds-color-fixed-light);--btn-bg:var(--sgds-primary-surface-default);--btn-hover-bg:var(--sgds-primary-surface-emphasis);--btn-border-radius:var(--sgds-border-radius-md);--btn-opacity:var(--sgds-opacity-100,1)}:host([variant=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=primary][tone=brand]){--btn-bg:var(--sgds-primary-surface-default);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline]){--btn-border-width:var(--sgds-border-width-1)}:host([variant=outline][tone=brand]){--btn-border-color:var(--sgds-primary-border-color-default);--btn-bg:var(--sgds-bg-transparent);--btn-color:var(--sgds-primary-color-default);--btn-hover-bg:var(--sgds-primary-bg-translucent)}:host([variant=ghost][tone=brand]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default)}:host([variant=primary][tone=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline][tone=danger]){--btn-border-color:var(--sgds-danger-border-color-default);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-danger-surface-translucent);--btn-color:var(--sgds-danger-color-default)}:host([variant=ghost][tone=danger]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-danger-surface-translucent);--btn-color:var(--sgds-danger-color-default)}:host([variant=primary][tone=fixed-light]){--btn-bg:var(--sgds-surface-fixed-light);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark,hsla(0,0%,5%,.2)) 0%,var(--sgds-bg-translucent-fixed-dark,hsla(0,0%,5%,.2)) 100%),var(--sgds-surface-fixed-light,#fff);--btn-color:var(--sgds-color-fixed-dark)}:host([variant=outline][tone=fixed-light]){--btn-border-color:var(--sgds-border-color-fixed-light);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark) 0%,var(--sgds-bg-translucent-fixed-dark) 100%),var(--sgds-bg-transparent);--btn-color:var(--sgds-color-fixed-light)}:host([variant=ghost][tone=fixed-light]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark) 0%,var(--sgds-bg-translucent-fixed-dark) 100%),var(--sgds-bg-transparent);--btn-color:var(--sgds-color-fixed-light)}:host([variant=primary][tone=neutral]){--btn-bg:var(--sgds-surface-inverse);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-inverse) 0%,var(--sgds-bg-translucent-inverse) 100%),var(--sgds-surface-inverse);--btn-color:var(--sgds-color-inverse)}:host([variant=outline][tone=neutral]){--btn-border-color:var(--sgds-border-color-emphasis);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-inverse) 0%,var(--sgds-bg-translucent-inverse) 100%),var(--sgds-bg-translucent-subtle);--btn-color:var(--sgds-color-default)}:host([variant=ghost][tone=neutral]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-bg-translucent-subtle);--btn-color:var(--sgds-color-default)}:host([variant=ghost]) .btn,:host([variant=outline]) .btn,:host([variant=primary]) .btn{color:var(--btn-color)}:host([variant=outline]) .btn{border:var(--btn-border-width) solid var(--btn-border-color)}:host([size=lg]) .btn{font-size:var(--sgds-font-size-label-lg);height:var(--sgds-dimension-56);line-height:var(--sgds-line-height-md);min-width:var(--sgds-dimension-112);padding:var(--sgds-padding-none) var(--sgds-padding-xl)}:host([size=sm]) .btn{font-size:var(--sgds-font-size-label-sm);height:var(--sgds-dimension-40);line-height:var(--sgds-line-height-2-xs);min-width:var(--sgds-dimension-80);padding:var(--sgds-padding-none) var(--sgds-padding-md)}:host([size=xs]) .btn{font-size:var(--sgds-font-size-label-xs);height:var(--sgds-dimension-32);line-height:var(--sgds-line-height-3-xs);min-width:var(--sgds-dimension-64);padding:var(--sgds-padding-none) var(--sgds-padding-sm)}.btn{align-items:center;background-color:var(--btn-bg);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--btn-border-radius);color:var(--sgds-color-fixed-light);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-label-md);font-weight:var(--btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-xs);min-width:var(--sgds-dimension-96);opacity:var(--btn-opacity);padding:var(--sgds-padding-none) var(--sgds-padding-lg);position:relative;text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;user-select:none;vertical-align:middle;white-space:nowrap;width:inherit}.btn.active,.btn:hover{background:var(--btn-hover-bg)}.btn:focus-visible{background:var(--btn-hover-bg);border-color:transparent;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host(:not([disabled])) .btn:active:after{background-color:var(--sgds-bg-translucent);border-radius:inherit;content:"";inset:0;position:absolute}.btn.disabled,.btn:disabled{color:var(--btn-color);cursor:not-allowed;opacity:var(--sgds-opacity-40)}.btn.loading{cursor:default}.btn slot::slotted(*){color:var(--btn-color)}`;
 //#endregion
 exports.default = css_248z;
 

package/react/base/button.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.cjs.js","names":[],"sources":["../../../src/base/button.css"],"sourcesContent":[":host {\n  --btn-font-weight: var(--sgds-font-weight-regular);\n  --btn-color: var(--sgds-color-fixed-light);\n  --btn-bg: var(--sgds-primary-surface-default);\n  --btn-hover-bg: var(--sgds-primary-surface-emphasis);\n  --btn-border-radius: var(--sgds-border-radius-md);\n  --btn-opacity: var(--sgds-opacity-100, 1);\n}\n/* deprecated in v3.5.6 */\n:host([variant=\"danger\"]) {\n  --btn-bg: var(--sgds-danger-surface-default);\n  --btn-hover-bg: var(--sgds-danger-surface-emphasis);\n  --btn-color: var(--sgds-color-fixed-light);\n}\n\n:host([variant=\"primary\"][tone=\"brand\"]) {\n  --btn-bg: var(--sgds-primary-surface-default);\n  --btn-color: var(--sgds-color-fixed-light);\n}\n\n:host([variant=\"outline\"]) {\n  --btn-border-width: var(--sgds-border-width-1);\n}\n\n:host([variant=\"outline\"][tone=\"brand\"]) {\n  --btn-border-color: var(--sgds-primary-border-color-default);\n  --btn-bg: var(--sgds-bg-transparent);\n  --btn-color: var(--sgds-primary-color-default);\n  --btn-hover-bg: var(--sgds-primary-bg-translucent);\n}\n\n:host([variant=\"ghost\"][tone=\"brand\"]) {\n  --btn-bg: var(--sgds-bg-transparent);\n  --btn-hover-bg: var(--sgds-primary-surface-translucent);\n  --btn-color: var(--sgds-primary-color-default);\n}\n\n:host([variant=\"primary\"][tone=\"danger\"]) {\n  --btn-bg: var(--sgds-danger-surface-default);\n  --btn-hover-bg: var(--sgds-danger-surface-emphasis);\n  --btn-color: var(--sgds-color-fixed-light);\n}\n:host([variant=\"outline\"][tone=\"danger\"]) {\n  --btn-border-color: var(--sgds-danger-border-color-default);\n  --btn-bg: var(--sgds-bg-transparent);\n  --btn-hover-bg: var(--sgds-danger-surface-translucent);\n  --btn-color: var(--sgds-danger-color-default);\n}\n:host([variant=\"ghost\"][tone=\"danger\"]) {\n  --btn-bg: var(--sgds-bg-transparent);\n  --btn-hover-bg: var(--sgds-danger-surface-translucent);\n  --btn-color: var(--sgds-danger-color-default);\n}\n\n:host([variant=\"primary\"][tone=\"fixed-light\"]) {\n  --btn-bg: var(--sgds-surface-fixed-light);\n  --btn-hover-bg: linear-gradient(\n      0deg,\n      var(--sgds-bg-translucent-fixed-dark, rgba(14, 14, 14, 0.2)) 0%,\n      var(--sgds-bg-translucent-fixed-dark, rgba(14, 14, 14, 0.2)) 100%\n    ),\n    var(--sgds-surface-fixed-light, #fff);\n  --btn-color: var(--sgds-color-fixed-dark);\n}\n:host([variant=\"outline\"][tone=\"fixed-light\"]) {\n  --btn-border-color: var(--sgds-border-color-fixed-light);\n  --btn-bg: var(--sgds-bg-transparent);\n  --btn-hover-bg: linear-gradient(\n      0deg,\n      var(--sgds-bg-translucent-fixed-dark) 0%,\n      var(--sgds-bg-translucent-fixed-dark) 100%\n    ),\n    var(--sgds-bg-transparent);\n  --btn-color: var(--sgds-color-fixed-light);\n}\n:host([variant=\"ghost\"][tone=\"fixed-light\"]) {\n  --btn-bg: var(--sgds-bg-transparent);\n  --btn-hover-bg: linear-gradient(\n      0deg,\n      var(--sgds-bg-translucent-fixed-dark) 0%,\n      var(--sgds-bg-translucent-fixed-dark) 100%\n    ),\n    var(--sgds-bg-transparent);\n  --btn-color: var(--sgds-color-fixed-light);\n}\n\n:host([variant=\"primary\"][tone=\"neutral\"]) {\n  --btn-bg: var(--sgds-surface-inverse);\n  --btn-hover-bg: linear-gradient(0deg, var(--sgds-bg-translucent-inverse) 0%, var(--sgds-bg-translucent-inverse) 100%),\n    var(--sgds-surface-inverse);\n  --btn-color: var(--sgds-color-inverse);\n}\n:host([variant=\"outline\"][tone=\"neutral\"]) {\n  --btn-border-color: var(--sgds-border-color-emphasis);\n  --btn-bg: var(--sgds-bg-transparent);\n  --btn-hover-bg: linear-gradient(0deg, var(--sgds-bg-translucent-inverse) 0%, var(--sgds-bg-translucent-inverse) 100%),\n    var(--sgds-bg-translucent-subtle);\n  --btn-color: var(--sgds-color-default);\n}\n:host([variant=\"ghost\"][tone=\"neutral\"]) {\n  --btn-bg: var(--sgds-bg-transparent);\n  --btn-hover-bg: var(--sgds-bg-translucent-subtle);\n  --btn-color: var(--sgds-color-default);\n}\n\n:host([variant=\"primary\"]) .btn,\n:host([variant=\"outline\"]) .btn,\n:host([variant=\"ghost\"]) .btn {\n  color: var(--btn-color);\n}\n\n:host([variant=\"outline\"]) .btn {\n  border: var(--btn-border-width) solid var(--btn-border-color);\n}\n\n:host([size=\"lg\"]) .btn {\n  font-size: var(--sgds-font-size-label-lg);\n  line-height: var(--sgds-line-height-md);\n  padding: var(--sgds-padding-none) var(--sgds-padding-xl);\n  min-width: var(--sgds-dimension-112);\n  height: var(--sgds-dimension-56);\n}\n\n:host([size=\"sm\"]) .btn {\n  font-size: var(--sgds-font-size-label-sm);\n  line-height: var(--sgds-line-height-2-xs);\n  padding: var(--sgds-padding-none) var(--sgds-padding-md);\n  min-width: var(--sgds-dimension-80);\n  height: var(--sgds-dimension-40);\n}\n:host([size=\"xs\"]) .btn {\n  font-size: var(--sgds-font-size-label-xs);\n  line-height: var(--sgds-line-height-3-xs);\n  padding: var(--sgds-padding-none) var(--sgds-padding-sm);\n  min-width: var(--sgds-dimension-64);\n  height: var(--sgds-dimension-32);\n}\n\n.btn {\n  background-color: var(--btn-bg);\n  border: var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);\n  border-radius: var(--btn-border-radius);\n  color: var(--sgds-color-fixed-light);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--sgds-gap-2-xs);\n  font-size: var(--sgds-font-size-label-md);\n  font-weight: var(--btn-font-weight);\n  line-height: var(--sgds-line-height-xs);\n  padding: var(--sgds-padding-none) var(--sgds-padding-lg);\n  min-width: var(--sgds-dimension-96);\n  width: inherit;\n  height: var(--sgds-dimension-48);\n  white-space: nowrap;\n  text-align: center;\n  text-decoration: none;\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,\n    box-shadow 0.15s ease-in-out;\n  user-select: none;\n  vertical-align: middle;\n  opacity: var(--btn-opacity);\n}\n\n\n.btn:hover,\n.btn.active {\n  background: var(--btn-hover-bg);\n}\n\n.btn:focus-visible {\n  background: var(--btn-hover-bg);\n  border-color: transparent;\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.btn.disabled,\n.btn:disabled {\n  opacity: var(--sgds-opacity-40);\n  cursor: not-allowed;\n  color: var(--btn-color);\n}\n.btn.loading {\n  cursor: default;\n}\n\n.btn slot::slotted(*) {\n  color: var(--btn-color);\n}\n"],"mappings":""}
+{"version":3,"file":"button.cjs.js","names":[],"sources":["../../../src/base/button.css"],"sourcesContent":[":host {\n  --btn-font-weight: var(--sgds-font-weight-regular);\n  --btn-color: var(--sgds-color-fixed-light);\n  --btn-bg: var(--sgds-primary-surface-default);\n  --btn-hover-bg: var(--sgds-primary-surface-emphasis);\n  --btn-border-radius: var(--sgds-border-radius-md);\n  --btn-opacity: var(--sgds-opacity-100, 1);\n}\n/* deprecated in v3.5.6 */\n:host([variant=\"danger\"]) {\n  --btn-bg: var(--sgds-danger-surface-default);\n  --btn-hover-bg: var(--sgds-danger-surface-emphasis);\n  --btn-color: var(--sgds-color-fixed-light);\n}\n\n:host([variant=\"primary\"][tone=\"brand\"]) {\n  --btn-bg: var(--sgds-primary-surface-default);\n  --btn-color: var(--sgds-color-fixed-light);\n}\n\n:host([variant=\"outline\"]) {\n  --btn-border-width: var(--sgds-border-width-1);\n}\n\n:host([variant=\"outline\"][tone=\"brand\"]) {\n  --btn-border-color: var(--sgds-primary-border-color-default);\n  --btn-bg: var(--sgds-bg-transparent);\n  --btn-color: var(--sgds-primary-color-default);\n  --btn-hover-bg: var(--sgds-primary-bg-translucent);\n}\n\n:host([variant=\"ghost\"][tone=\"brand\"]) {\n  --btn-bg: var(--sgds-bg-transparent);\n  --btn-hover-bg: var(--sgds-primary-surface-translucent);\n  --btn-color: var(--sgds-primary-color-default);\n}\n\n:host([variant=\"primary\"][tone=\"danger\"]) {\n  --btn-bg: var(--sgds-danger-surface-default);\n  --btn-hover-bg: var(--sgds-danger-surface-emphasis);\n  --btn-color: var(--sgds-color-fixed-light);\n}\n:host([variant=\"outline\"][tone=\"danger\"]) {\n  --btn-border-color: var(--sgds-danger-border-color-default);\n  --btn-bg: var(--sgds-bg-transparent);\n  --btn-hover-bg: var(--sgds-danger-surface-translucent);\n  --btn-color: var(--sgds-danger-color-default);\n}\n:host([variant=\"ghost\"][tone=\"danger\"]) {\n  --btn-bg: var(--sgds-bg-transparent);\n  --btn-hover-bg: var(--sgds-danger-surface-translucent);\n  --btn-color: var(--sgds-danger-color-default);\n}\n\n:host([variant=\"primary\"][tone=\"fixed-light\"]) {\n  --btn-bg: var(--sgds-surface-fixed-light);\n  --btn-hover-bg: linear-gradient(\n      0deg,\n      var(--sgds-bg-translucent-fixed-dark, rgba(14, 14, 14, 0.2)) 0%,\n      var(--sgds-bg-translucent-fixed-dark, rgba(14, 14, 14, 0.2)) 100%\n    ),\n    var(--sgds-surface-fixed-light, #fff);\n  --btn-color: var(--sgds-color-fixed-dark);\n}\n:host([variant=\"outline\"][tone=\"fixed-light\"]) {\n  --btn-border-color: var(--sgds-border-color-fixed-light);\n  --btn-bg: var(--sgds-bg-transparent);\n  --btn-hover-bg: linear-gradient(\n      0deg,\n      var(--sgds-bg-translucent-fixed-dark) 0%,\n      var(--sgds-bg-translucent-fixed-dark) 100%\n    ),\n    var(--sgds-bg-transparent);\n  --btn-color: var(--sgds-color-fixed-light);\n}\n:host([variant=\"ghost\"][tone=\"fixed-light\"]) {\n  --btn-bg: var(--sgds-bg-transparent);\n  --btn-hover-bg: linear-gradient(\n      0deg,\n      var(--sgds-bg-translucent-fixed-dark) 0%,\n      var(--sgds-bg-translucent-fixed-dark) 100%\n    ),\n    var(--sgds-bg-transparent);\n  --btn-color: var(--sgds-color-fixed-light);\n}\n\n:host([variant=\"primary\"][tone=\"neutral\"]) {\n  --btn-bg: var(--sgds-surface-inverse);\n  --btn-hover-bg: linear-gradient(0deg, var(--sgds-bg-translucent-inverse) 0%, var(--sgds-bg-translucent-inverse) 100%),\n    var(--sgds-surface-inverse);\n  --btn-color: var(--sgds-color-inverse);\n}\n:host([variant=\"outline\"][tone=\"neutral\"]) {\n  --btn-border-color: var(--sgds-border-color-emphasis);\n  --btn-bg: var(--sgds-bg-transparent);\n  --btn-hover-bg: linear-gradient(0deg, var(--sgds-bg-translucent-inverse) 0%, var(--sgds-bg-translucent-inverse) 100%),\n    var(--sgds-bg-translucent-subtle);\n  --btn-color: var(--sgds-color-default);\n}\n:host([variant=\"ghost\"][tone=\"neutral\"]) {\n  --btn-bg: var(--sgds-bg-transparent);\n  --btn-hover-bg: var(--sgds-bg-translucent-subtle);\n  --btn-color: var(--sgds-color-default);\n}\n\n:host([variant=\"primary\"]) .btn,\n:host([variant=\"outline\"]) .btn,\n:host([variant=\"ghost\"]) .btn {\n  color: var(--btn-color);\n}\n\n:host([variant=\"outline\"]) .btn {\n  border: var(--btn-border-width) solid var(--btn-border-color);\n}\n\n:host([size=\"lg\"]) .btn {\n  font-size: var(--sgds-font-size-label-lg);\n  line-height: var(--sgds-line-height-md);\n  padding: var(--sgds-padding-none) var(--sgds-padding-xl);\n  min-width: var(--sgds-dimension-112);\n  height: var(--sgds-dimension-56);\n}\n\n:host([size=\"sm\"]) .btn {\n  font-size: var(--sgds-font-size-label-sm);\n  line-height: var(--sgds-line-height-2-xs);\n  padding: var(--sgds-padding-none) var(--sgds-padding-md);\n  min-width: var(--sgds-dimension-80);\n  height: var(--sgds-dimension-40);\n}\n:host([size=\"xs\"]) .btn {\n  font-size: var(--sgds-font-size-label-xs);\n  line-height: var(--sgds-line-height-3-xs);\n  padding: var(--sgds-padding-none) var(--sgds-padding-sm);\n  min-width: var(--sgds-dimension-64);\n  height: var(--sgds-dimension-32);\n}\n\n.btn {\n  position: relative;\n  background-color: var(--btn-bg);\n  border: var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);\n  border-radius: var(--btn-border-radius);\n  color: var(--sgds-color-fixed-light);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--sgds-gap-2-xs);\n  font-size: var(--sgds-font-size-label-md);\n  font-weight: var(--btn-font-weight);\n  line-height: var(--sgds-line-height-xs);\n  padding: var(--sgds-padding-none) var(--sgds-padding-lg);\n  min-width: var(--sgds-dimension-96);\n  width: inherit;\n  height: var(--sgds-dimension-48);\n  white-space: nowrap;\n  text-align: center;\n  text-decoration: none;\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,\n    box-shadow 0.15s ease-in-out;\n  user-select: none;\n  vertical-align: middle;\n  opacity: var(--btn-opacity);\n}\n\n\n.btn:hover,\n.btn.active {\n  background: var(--btn-hover-bg);\n}\n\n.btn:focus-visible {\n  background: var(--btn-hover-bg);\n  border-color: transparent;\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n:host(:not([disabled])) .btn:active::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background-color: var(--sgds-bg-translucent);\n  border-radius: inherit;\n}\n\n.btn.disabled,\n.btn:disabled {\n  opacity: var(--sgds-opacity-40);\n  cursor: not-allowed;\n  color: var(--btn-color);\n}\n.btn.loading {\n  cursor: default;\n}\n\n.btn slot::slotted(*) {\n  color: var(--btn-color);\n}\n"],"mappings":""}

package/react/base/button.js

@@ -1,7 +1,7 @@
 "use client";
 import { css } from "lit";
 //#region src/base/button.css
-var css_248z = css`:host{--btn-font-weight:var(--sgds-font-weight-regular);--btn-color:var(--sgds-color-fixed-light);--btn-bg:var(--sgds-primary-surface-default);--btn-hover-bg:var(--sgds-primary-surface-emphasis);--btn-border-radius:var(--sgds-border-radius-md);--btn-opacity:var(--sgds-opacity-100,1)}:host([variant=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=primary][tone=brand]){--btn-bg:var(--sgds-primary-surface-default);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline]){--btn-border-width:var(--sgds-border-width-1)}:host([variant=outline][tone=brand]){--btn-border-color:var(--sgds-primary-border-color-default);--btn-bg:var(--sgds-bg-transparent);--btn-color:var(--sgds-primary-color-default);--btn-hover-bg:var(--sgds-primary-bg-translucent)}:host([variant=ghost][tone=brand]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default)}:host([variant=primary][tone=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline][tone=danger]){--btn-border-color:var(--sgds-danger-border-color-default);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-danger-surface-translucent);--btn-color:var(--sgds-danger-color-default)}:host([variant=ghost][tone=danger]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-danger-surface-translucent);--btn-color:var(--sgds-danger-color-default)}:host([variant=primary][tone=fixed-light]){--btn-bg:var(--sgds-surface-fixed-light);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark,hsla(0,0%,5%,.2)) 0%,var(--sgds-bg-translucent-fixed-dark,hsla(0,0%,5%,.2)) 100%),var(--sgds-surface-fixed-light,#fff);--btn-color:var(--sgds-color-fixed-dark)}:host([variant=outline][tone=fixed-light]){--btn-border-color:var(--sgds-border-color-fixed-light);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark) 0%,var(--sgds-bg-translucent-fixed-dark) 100%),var(--sgds-bg-transparent);--btn-color:var(--sgds-color-fixed-light)}:host([variant=ghost][tone=fixed-light]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark) 0%,var(--sgds-bg-translucent-fixed-dark) 100%),var(--sgds-bg-transparent);--btn-color:var(--sgds-color-fixed-light)}:host([variant=primary][tone=neutral]){--btn-bg:var(--sgds-surface-inverse);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-inverse) 0%,var(--sgds-bg-translucent-inverse) 100%),var(--sgds-surface-inverse);--btn-color:var(--sgds-color-inverse)}:host([variant=outline][tone=neutral]){--btn-border-color:var(--sgds-border-color-emphasis);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-inverse) 0%,var(--sgds-bg-translucent-inverse) 100%),var(--sgds-bg-translucent-subtle);--btn-color:var(--sgds-color-default)}:host([variant=ghost][tone=neutral]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-bg-translucent-subtle);--btn-color:var(--sgds-color-default)}:host([variant=ghost]) .btn,:host([variant=outline]) .btn,:host([variant=primary]) .btn{color:var(--btn-color)}:host([variant=outline]) .btn{border:var(--btn-border-width) solid var(--btn-border-color)}:host([size=lg]) .btn{font-size:var(--sgds-font-size-label-lg);height:var(--sgds-dimension-56);line-height:var(--sgds-line-height-md);min-width:var(--sgds-dimension-112);padding:var(--sgds-padding-none) var(--sgds-padding-xl)}:host([size=sm]) .btn{font-size:var(--sgds-font-size-label-sm);height:var(--sgds-dimension-40);line-height:var(--sgds-line-height-2-xs);min-width:var(--sgds-dimension-80);padding:var(--sgds-padding-none) var(--sgds-padding-md)}:host([size=xs]) .btn{font-size:var(--sgds-font-size-label-xs);height:var(--sgds-dimension-32);line-height:var(--sgds-line-height-3-xs);min-width:var(--sgds-dimension-64);padding:var(--sgds-padding-none) var(--sgds-padding-sm)}.btn{align-items:center;background-color:var(--btn-bg);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--btn-border-radius);color:var(--sgds-color-fixed-light);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-label-md);font-weight:var(--btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-xs);min-width:var(--sgds-dimension-96);opacity:var(--btn-opacity);padding:var(--sgds-padding-none) var(--sgds-padding-lg);text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;user-select:none;vertical-align:middle;white-space:nowrap;width:inherit}.btn.active,.btn:hover{background:var(--btn-hover-bg)}.btn:focus-visible{background:var(--btn-hover-bg);border-color:transparent;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.btn.disabled,.btn:disabled{color:var(--btn-color);cursor:not-allowed;opacity:var(--sgds-opacity-40)}.btn.loading{cursor:default}.btn slot::slotted(*){color:var(--btn-color)}`;
+var css_248z = css`:host{--btn-font-weight:var(--sgds-font-weight-regular);--btn-color:var(--sgds-color-fixed-light);--btn-bg:var(--sgds-primary-surface-default);--btn-hover-bg:var(--sgds-primary-surface-emphasis);--btn-border-radius:var(--sgds-border-radius-md);--btn-opacity:var(--sgds-opacity-100,1)}:host([variant=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=primary][tone=brand]){--btn-bg:var(--sgds-primary-surface-default);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline]){--btn-border-width:var(--sgds-border-width-1)}:host([variant=outline][tone=brand]){--btn-border-color:var(--sgds-primary-border-color-default);--btn-bg:var(--sgds-bg-transparent);--btn-color:var(--sgds-primary-color-default);--btn-hover-bg:var(--sgds-primary-bg-translucent)}:host([variant=ghost][tone=brand]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default)}:host([variant=primary][tone=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline][tone=danger]){--btn-border-color:var(--sgds-danger-border-color-default);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-danger-surface-translucent);--btn-color:var(--sgds-danger-color-default)}:host([variant=ghost][tone=danger]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-danger-surface-translucent);--btn-color:var(--sgds-danger-color-default)}:host([variant=primary][tone=fixed-light]){--btn-bg:var(--sgds-surface-fixed-light);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark,hsla(0,0%,5%,.2)) 0%,var(--sgds-bg-translucent-fixed-dark,hsla(0,0%,5%,.2)) 100%),var(--sgds-surface-fixed-light,#fff);--btn-color:var(--sgds-color-fixed-dark)}:host([variant=outline][tone=fixed-light]){--btn-border-color:var(--sgds-border-color-fixed-light);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark) 0%,var(--sgds-bg-translucent-fixed-dark) 100%),var(--sgds-bg-transparent);--btn-color:var(--sgds-color-fixed-light)}:host([variant=ghost][tone=fixed-light]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark) 0%,var(--sgds-bg-translucent-fixed-dark) 100%),var(--sgds-bg-transparent);--btn-color:var(--sgds-color-fixed-light)}:host([variant=primary][tone=neutral]){--btn-bg:var(--sgds-surface-inverse);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-inverse) 0%,var(--sgds-bg-translucent-inverse) 100%),var(--sgds-surface-inverse);--btn-color:var(--sgds-color-inverse)}:host([variant=outline][tone=neutral]){--btn-border-color:var(--sgds-border-color-emphasis);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-inverse) 0%,var(--sgds-bg-translucent-inverse) 100%),var(--sgds-bg-translucent-subtle);--btn-color:var(--sgds-color-default)}:host([variant=ghost][tone=neutral]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-bg-translucent-subtle);--btn-color:var(--sgds-color-default)}:host([variant=ghost]) .btn,:host([variant=outline]) .btn,:host([variant=primary]) .btn{color:var(--btn-color)}:host([variant=outline]) .btn{border:var(--btn-border-width) solid var(--btn-border-color)}:host([size=lg]) .btn{font-size:var(--sgds-font-size-label-lg);height:var(--sgds-dimension-56);line-height:var(--sgds-line-height-md);min-width:var(--sgds-dimension-112);padding:var(--sgds-padding-none) var(--sgds-padding-xl)}:host([size=sm]) .btn{font-size:var(--sgds-font-size-label-sm);height:var(--sgds-dimension-40);line-height:var(--sgds-line-height-2-xs);min-width:var(--sgds-dimension-80);padding:var(--sgds-padding-none) var(--sgds-padding-md)}:host([size=xs]) .btn{font-size:var(--sgds-font-size-label-xs);height:var(--sgds-dimension-32);line-height:var(--sgds-line-height-3-xs);min-width:var(--sgds-dimension-64);padding:var(--sgds-padding-none) var(--sgds-padding-sm)}.btn{align-items:center;background-color:var(--btn-bg);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--btn-border-radius);color:var(--sgds-color-fixed-light);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-label-md);font-weight:var(--btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-xs);min-width:var(--sgds-dimension-96);opacity:var(--btn-opacity);padding:var(--sgds-padding-none) var(--sgds-padding-lg);position:relative;text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;user-select:none;vertical-align:middle;white-space:nowrap;width:inherit}.btn.active,.btn:hover{background:var(--btn-hover-bg)}.btn:focus-visible{background:var(--btn-hover-bg);border-color:transparent;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host(:not([disabled])) .btn:active:after{background-color:var(--sgds-bg-translucent);border-radius:inherit;content:"";inset:0;position:absolute}.btn.disabled,.btn:disabled{color:var(--btn-color);cursor:not-allowed;opacity:var(--sgds-opacity-40)}.btn.loading{cursor:default}.btn slot::slotted(*){color:var(--btn-color)}`;
 //#endregion
 export { css_248z as default };
 

package/react/base/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../../../src/base/button.css"],"sourcesContent":[":host {\n  --btn-font-weight: var(--sgds-font-weight-regular);\n  --btn-color: var(--sgds-color-fixed-light);\n  --btn-bg: var(--sgds-primary-surface-default);\n  --btn-hover-bg: var(--sgds-primary-surface-emphasis);\n  --btn-border-radius: var(--sgds-border-radius-md);\n  --btn-opacity: var(--sgds-opacity-100, 1);\n}\n/* deprecated in v3.5.6 */\n:host([variant=\"danger\"]) {\n  --btn-bg: var(--sgds-danger-surface-default);\n  --btn-hover-bg: var(--sgds-danger-surface-emphasis);\n  --btn-color: var(--sgds-color-fixed-light);\n}\n\n:host([variant=\"primary\"][tone=\"brand\"]) {\n  --btn-bg: var(--sgds-primary-surface-default);\n  --btn-color: var(--sgds-color-fixed-light);\n}\n\n:host([variant=\"outline\"]) {\n  --btn-border-width: var(--sgds-border-width-1);\n}\n\n:host([variant=\"outline\"][tone=\"brand\"]) {\n  --btn-border-color: var(--sgds-primary-border-color-default);\n  --btn-bg: var(--sgds-bg-transparent);\n  --btn-color: var(--sgds-primary-color-default);\n  --btn-hover-bg: var(--sgds-primary-bg-translucent);\n}\n\n:host([variant=\"ghost\"][tone=\"brand\"]) {\n  --btn-bg: var(--sgds-bg-transparent);\n  --btn-hover-bg: var(--sgds-primary-surface-translucent);\n  --btn-color: var(--sgds-primary-color-default);\n}\n\n:host([variant=\"primary\"][tone=\"danger\"]) {\n  --btn-bg: var(--sgds-danger-surface-default);\n  --btn-hover-bg: var(--sgds-danger-surface-emphasis);\n  --btn-color: var(--sgds-color-fixed-light);\n}\n:host([variant=\"outline\"][tone=\"danger\"]) {\n  --btn-border-color: var(--sgds-danger-border-color-default);\n  --btn-bg: var(--sgds-bg-transparent);\n  --btn-hover-bg: var(--sgds-danger-surface-translucent);\n  --btn-color: var(--sgds-danger-color-default);\n}\n:host([variant=\"ghost\"][tone=\"danger\"]) {\n  --btn-bg: var(--sgds-bg-transparent);\n  --btn-hover-bg: var(--sgds-danger-surface-translucent);\n  --btn-color: var(--sgds-danger-color-default);\n}\n\n:host([variant=\"primary\"][tone=\"fixed-light\"]) {\n  --btn-bg: var(--sgds-surface-fixed-light);\n  --btn-hover-bg: linear-gradient(\n      0deg,\n      var(--sgds-bg-translucent-fixed-dark, rgba(14, 14, 14, 0.2)) 0%,\n      var(--sgds-bg-translucent-fixed-dark, rgba(14, 14, 14, 0.2)) 100%\n    ),\n    var(--sgds-surface-fixed-light, #fff);\n  --btn-color: var(--sgds-color-fixed-dark);\n}\n:host([variant=\"outline\"][tone=\"fixed-light\"]) {\n  --btn-border-color: var(--sgds-border-color-fixed-light);\n  --btn-bg: var(--sgds-bg-transparent);\n  --btn-hover-bg: linear-gradient(\n      0deg,\n      var(--sgds-bg-translucent-fixed-dark) 0%,\n      var(--sgds-bg-translucent-fixed-dark) 100%\n    ),\n    var(--sgds-bg-transparent);\n  --btn-color: var(--sgds-color-fixed-light);\n}\n:host([variant=\"ghost\"][tone=\"fixed-light\"]) {\n  --btn-bg: var(--sgds-bg-transparent);\n  --btn-hover-bg: linear-gradient(\n      0deg,\n      var(--sgds-bg-translucent-fixed-dark) 0%,\n      var(--sgds-bg-translucent-fixed-dark) 100%\n    ),\n    var(--sgds-bg-transparent);\n  --btn-color: var(--sgds-color-fixed-light);\n}\n\n:host([variant=\"primary\"][tone=\"neutral\"]) {\n  --btn-bg: var(--sgds-surface-inverse);\n  --btn-hover-bg: linear-gradient(0deg, var(--sgds-bg-translucent-inverse) 0%, var(--sgds-bg-translucent-inverse) 100%),\n    var(--sgds-surface-inverse);\n  --btn-color: var(--sgds-color-inverse);\n}\n:host([variant=\"outline\"][tone=\"neutral\"]) {\n  --btn-border-color: var(--sgds-border-color-emphasis);\n  --btn-bg: var(--sgds-bg-transparent);\n  --btn-hover-bg: linear-gradient(0deg, var(--sgds-bg-translucent-inverse) 0%, var(--sgds-bg-translucent-inverse) 100%),\n    var(--sgds-bg-translucent-subtle);\n  --btn-color: var(--sgds-color-default);\n}\n:host([variant=\"ghost\"][tone=\"neutral\"]) {\n  --btn-bg: var(--sgds-bg-transparent);\n  --btn-hover-bg: var(--sgds-bg-translucent-subtle);\n  --btn-color: var(--sgds-color-default);\n}\n\n:host([variant=\"primary\"]) .btn,\n:host([variant=\"outline\"]) .btn,\n:host([variant=\"ghost\"]) .btn {\n  color: var(--btn-color);\n}\n\n:host([variant=\"outline\"]) .btn {\n  border: var(--btn-border-width) solid var(--btn-border-color);\n}\n\n:host([size=\"lg\"]) .btn {\n  font-size: var(--sgds-font-size-label-lg);\n  line-height: var(--sgds-line-height-md);\n  padding: var(--sgds-padding-none) var(--sgds-padding-xl);\n  min-width: var(--sgds-dimension-112);\n  height: var(--sgds-dimension-56);\n}\n\n:host([size=\"sm\"]) .btn {\n  font-size: var(--sgds-font-size-label-sm);\n  line-height: var(--sgds-line-height-2-xs);\n  padding: var(--sgds-padding-none) var(--sgds-padding-md);\n  min-width: var(--sgds-dimension-80);\n  height: var(--sgds-dimension-40);\n}\n:host([size=\"xs\"]) .btn {\n  font-size: var(--sgds-font-size-label-xs);\n  line-height: var(--sgds-line-height-3-xs);\n  padding: var(--sgds-padding-none) var(--sgds-padding-sm);\n  min-width: var(--sgds-dimension-64);\n  height: var(--sgds-dimension-32);\n}\n\n.btn {\n  background-color: var(--btn-bg);\n  border: var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);\n  border-radius: var(--btn-border-radius);\n  color: var(--sgds-color-fixed-light);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--sgds-gap-2-xs);\n  font-size: var(--sgds-font-size-label-md);\n  font-weight: var(--btn-font-weight);\n  line-height: var(--sgds-line-height-xs);\n  padding: var(--sgds-padding-none) var(--sgds-padding-lg);\n  min-width: var(--sgds-dimension-96);\n  width: inherit;\n  height: var(--sgds-dimension-48);\n  white-space: nowrap;\n  text-align: center;\n  text-decoration: none;\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,\n    box-shadow 0.15s ease-in-out;\n  user-select: none;\n  vertical-align: middle;\n  opacity: var(--btn-opacity);\n}\n\n\n.btn:hover,\n.btn.active {\n  background: var(--btn-hover-bg);\n}\n\n.btn:focus-visible {\n  background: var(--btn-hover-bg);\n  border-color: transparent;\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.btn.disabled,\n.btn:disabled {\n  opacity: var(--sgds-opacity-40);\n  cursor: not-allowed;\n  color: var(--btn-color);\n}\n.btn.loading {\n  cursor: default;\n}\n\n.btn slot::slotted(*) {\n  color: var(--btn-color);\n}\n"],"mappings":""}
+{"version":3,"file":"button.js","names":[],"sources":["../../../src/base/button.css"],"sourcesContent":[":host {\n  --btn-font-weight: var(--sgds-font-weight-regular);\n  --btn-color: var(--sgds-color-fixed-light);\n  --btn-bg: var(--sgds-primary-surface-default);\n  --btn-hover-bg: var(--sgds-primary-surface-emphasis);\n  --btn-border-radius: var(--sgds-border-radius-md);\n  --btn-opacity: var(--sgds-opacity-100, 1);\n}\n/* deprecated in v3.5.6 */\n:host([variant=\"danger\"]) {\n  --btn-bg: var(--sgds-danger-surface-default);\n  --btn-hover-bg: var(--sgds-danger-surface-emphasis);\n  --btn-color: var(--sgds-color-fixed-light);\n}\n\n:host([variant=\"primary\"][tone=\"brand\"]) {\n  --btn-bg: var(--sgds-primary-surface-default);\n  --btn-color: var(--sgds-color-fixed-light);\n}\n\n:host([variant=\"outline\"]) {\n  --btn-border-width: var(--sgds-border-width-1);\n}\n\n:host([variant=\"outline\"][tone=\"brand\"]) {\n  --btn-border-color: var(--sgds-primary-border-color-default);\n  --btn-bg: var(--sgds-bg-transparent);\n  --btn-color: var(--sgds-primary-color-default);\n  --btn-hover-bg: var(--sgds-primary-bg-translucent);\n}\n\n:host([variant=\"ghost\"][tone=\"brand\"]) {\n  --btn-bg: var(--sgds-bg-transparent);\n  --btn-hover-bg: var(--sgds-primary-surface-translucent);\n  --btn-color: var(--sgds-primary-color-default);\n}\n\n:host([variant=\"primary\"][tone=\"danger\"]) {\n  --btn-bg: var(--sgds-danger-surface-default);\n  --btn-hover-bg: var(--sgds-danger-surface-emphasis);\n  --btn-color: var(--sgds-color-fixed-light);\n}\n:host([variant=\"outline\"][tone=\"danger\"]) {\n  --btn-border-color: var(--sgds-danger-border-color-default);\n  --btn-bg: var(--sgds-bg-transparent);\n  --btn-hover-bg: var(--sgds-danger-surface-translucent);\n  --btn-color: var(--sgds-danger-color-default);\n}\n:host([variant=\"ghost\"][tone=\"danger\"]) {\n  --btn-bg: var(--sgds-bg-transparent);\n  --btn-hover-bg: var(--sgds-danger-surface-translucent);\n  --btn-color: var(--sgds-danger-color-default);\n}\n\n:host([variant=\"primary\"][tone=\"fixed-light\"]) {\n  --btn-bg: var(--sgds-surface-fixed-light);\n  --btn-hover-bg: linear-gradient(\n      0deg,\n      var(--sgds-bg-translucent-fixed-dark, rgba(14, 14, 14, 0.2)) 0%,\n      var(--sgds-bg-translucent-fixed-dark, rgba(14, 14, 14, 0.2)) 100%\n    ),\n    var(--sgds-surface-fixed-light, #fff);\n  --btn-color: var(--sgds-color-fixed-dark);\n}\n:host([variant=\"outline\"][tone=\"fixed-light\"]) {\n  --btn-border-color: var(--sgds-border-color-fixed-light);\n  --btn-bg: var(--sgds-bg-transparent);\n  --btn-hover-bg: linear-gradient(\n      0deg,\n      var(--sgds-bg-translucent-fixed-dark) 0%,\n      var(--sgds-bg-translucent-fixed-dark) 100%\n    ),\n    var(--sgds-bg-transparent);\n  --btn-color: var(--sgds-color-fixed-light);\n}\n:host([variant=\"ghost\"][tone=\"fixed-light\"]) {\n  --btn-bg: var(--sgds-bg-transparent);\n  --btn-hover-bg: linear-gradient(\n      0deg,\n      var(--sgds-bg-translucent-fixed-dark) 0%,\n      var(--sgds-bg-translucent-fixed-dark) 100%\n    ),\n    var(--sgds-bg-transparent);\n  --btn-color: var(--sgds-color-fixed-light);\n}\n\n:host([variant=\"primary\"][tone=\"neutral\"]) {\n  --btn-bg: var(--sgds-surface-inverse);\n  --btn-hover-bg: linear-gradient(0deg, var(--sgds-bg-translucent-inverse) 0%, var(--sgds-bg-translucent-inverse) 100%),\n    var(--sgds-surface-inverse);\n  --btn-color: var(--sgds-color-inverse);\n}\n:host([variant=\"outline\"][tone=\"neutral\"]) {\n  --btn-border-color: var(--sgds-border-color-emphasis);\n  --btn-bg: var(--sgds-bg-transparent);\n  --btn-hover-bg: linear-gradient(0deg, var(--sgds-bg-translucent-inverse) 0%, var(--sgds-bg-translucent-inverse) 100%),\n    var(--sgds-bg-translucent-subtle);\n  --btn-color: var(--sgds-color-default);\n}\n:host([variant=\"ghost\"][tone=\"neutral\"]) {\n  --btn-bg: var(--sgds-bg-transparent);\n  --btn-hover-bg: var(--sgds-bg-translucent-subtle);\n  --btn-color: var(--sgds-color-default);\n}\n\n:host([variant=\"primary\"]) .btn,\n:host([variant=\"outline\"]) .btn,\n:host([variant=\"ghost\"]) .btn {\n  color: var(--btn-color);\n}\n\n:host([variant=\"outline\"]) .btn {\n  border: var(--btn-border-width) solid var(--btn-border-color);\n}\n\n:host([size=\"lg\"]) .btn {\n  font-size: var(--sgds-font-size-label-lg);\n  line-height: var(--sgds-line-height-md);\n  padding: var(--sgds-padding-none) var(--sgds-padding-xl);\n  min-width: var(--sgds-dimension-112);\n  height: var(--sgds-dimension-56);\n}\n\n:host([size=\"sm\"]) .btn {\n  font-size: var(--sgds-font-size-label-sm);\n  line-height: var(--sgds-line-height-2-xs);\n  padding: var(--sgds-padding-none) var(--sgds-padding-md);\n  min-width: var(--sgds-dimension-80);\n  height: var(--sgds-dimension-40);\n}\n:host([size=\"xs\"]) .btn {\n  font-size: var(--sgds-font-size-label-xs);\n  line-height: var(--sgds-line-height-3-xs);\n  padding: var(--sgds-padding-none) var(--sgds-padding-sm);\n  min-width: var(--sgds-dimension-64);\n  height: var(--sgds-dimension-32);\n}\n\n.btn {\n  position: relative;\n  background-color: var(--btn-bg);\n  border: var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);\n  border-radius: var(--btn-border-radius);\n  color: var(--sgds-color-fixed-light);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--sgds-gap-2-xs);\n  font-size: var(--sgds-font-size-label-md);\n  font-weight: var(--btn-font-weight);\n  line-height: var(--sgds-line-height-xs);\n  padding: var(--sgds-padding-none) var(--sgds-padding-lg);\n  min-width: var(--sgds-dimension-96);\n  width: inherit;\n  height: var(--sgds-dimension-48);\n  white-space: nowrap;\n  text-align: center;\n  text-decoration: none;\n  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,\n    box-shadow 0.15s ease-in-out;\n  user-select: none;\n  vertical-align: middle;\n  opacity: var(--btn-opacity);\n}\n\n\n.btn:hover,\n.btn.active {\n  background: var(--btn-hover-bg);\n}\n\n.btn:focus-visible {\n  background: var(--btn-hover-bg);\n  border-color: transparent;\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n:host(:not([disabled])) .btn:active::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background-color: var(--sgds-bg-translucent);\n  border-radius: inherit;\n}\n\n.btn.disabled,\n.btn:disabled {\n  opacity: var(--sgds-opacity-40);\n  cursor: not-allowed;\n  color: var(--btn-color);\n}\n.btn.loading {\n  cursor: default;\n}\n\n.btn slot::slotted(*) {\n  color: var(--btn-color);\n}\n"],"mappings":""}

package/react/components/Alert/alert.cjs.js

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/Alert/alert.css
-var css_248z = require("lit").css`:host([variant=success]) .alert{background-color:var(--sgds-success-surface-default)}:host([variant=warning]) .alert{--sgds-alert-color:var(--sgds-color-fixed-dark);background-color:var(--sgds-warning-surface-default)}:host([variant=danger]) .alert{background-color:var(--sgds-danger-surface-default)}:host([variant=neutral]) .alert{background-color:var(--sgds-neutral-surface-emphasis)}:host([variant=success][outlined]) .alert{background-color:var(--sgds-success-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-success-border-color-muted)}:host([variant=warning][outlined]) .alert{background-color:var(--sgds-warning-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-warning-border-color-muted)}:host([variant=danger][outlined]) .alert{background-color:var(--sgds-danger-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-danger-border-color-muted)}:host([variant=neutral][outlined]) .alert{background-color:var(--sgds-neutral-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-muted)}:host([outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-primary-color-fixed-dark)}:host([variant=success][outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-success-color-fixed-dark)}:host([variant=warning][outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-warning-color-fixed-light)}:host([variant=danger][outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-danger-color-fixed-dark)}:host([variant=neutral][outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-color-fixed-dark)}.alert{--sgds-alert-color:var(--sgds-color-fixed-light);background-color:var(--sgds-primary-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-md);color:var(--sgds-alert-color);display:flex;flex-direction:row;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-lg);position:relative}.alert.outlined{--sgds-alert-color:var(--sgds-color-fixed-dark);background-color:var(--sgds-primary-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-primary-border-color-muted)}.alert-content{align-items:flex-start;display:flex;flex:1 0 0;flex-direction:column;gap:var(--sgds-gap-md);padding-right:var(--sgds-padding-2-xl)}.alert-content__upper{display:flex;flex-direction:column;gap:var(--sgds-gap-2-xs)}.alert-title{font-size:var(--sgds-font-size-subtitle-sm);font-style:normal;font-weight:var(--sgds-font-weight-semibold);line-height:var(--sgds-line-height-2-xs)}.alert-content__description{display:inline;font-size:var(--sgds-font-size-label-sm);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-2-xs)}.alert-content__description::slotted(*){font-size:var(--sgds-font-size-label-sm);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-2-xs)}.alert-content__description::slotted(a),.alert-content__description::slotted(a:hover){color:inherit!important}.alert-content__description::slotted(a:focus-visible){outline:var(--sgds-outline-focus)!important;outline-offset:var(--sgds-outline-offset-focus)!important}.alert sgds-close-button{position:absolute;right:14px;top:14px}`;
+var css_248z = require("lit").css`:host([variant=success]) .alert{background-color:var(--sgds-success-surface-default)}:host([variant=warning]) .alert{--sgds-alert-color:var(--sgds-color-fixed-dark);background-color:var(--sgds-warning-surface-default)}:host([variant=danger]) .alert{background-color:var(--sgds-danger-surface-default)}:host([variant=neutral]) .alert{background-color:var(--sgds-neutral-surface-emphasis)}:host([variant=success][outlined]) .alert{background-color:var(--sgds-success-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-success-border-color-muted)}:host([variant=warning][outlined]) .alert{background-color:var(--sgds-warning-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-warning-border-color-muted)}:host([variant=danger][outlined]) .alert{background-color:var(--sgds-danger-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-danger-border-color-muted)}:host([variant=neutral][outlined]) .alert{background-color:var(--sgds-neutral-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-muted)}:host([outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-primary-color-default)}:host([variant=success][outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-success-color-default)}:host([variant=warning][outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-warning-color-fixed-light)}:host([variant=danger][outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-danger-color-default)}:host([variant=neutral][outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-body-color-default)}.alert{--sgds-alert-color:var(--sgds-color-fixed-light);background-color:var(--sgds-primary-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-md);color:var(--sgds-alert-color);display:flex;flex-direction:row;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-lg);position:relative}:host([outlined]) .alert{--sgds-alert-color:var(--sgds-body-color-default);background-color:var(--sgds-primary-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-primary-border-color-muted)}.alert-content{align-items:flex-start;display:flex;flex:1 0 0;flex-direction:column;gap:var(--sgds-gap-md);padding-right:var(--sgds-padding-2-xl)}.alert-content__upper{display:flex;flex-direction:column;gap:var(--sgds-gap-2-xs)}.alert-title{font-size:var(--sgds-font-size-subtitle-sm);font-style:normal;font-weight:var(--sgds-font-weight-semibold);line-height:var(--sgds-line-height-2-xs)}.alert-content__description{display:inline;font-size:var(--sgds-font-size-label-sm);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-2-xs)}.alert-content__description::slotted(*){font-size:var(--sgds-font-size-label-sm);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-2-xs)}.alert-content__description::slotted(a),.alert-content__description::slotted(a:hover){color:inherit!important}.alert-content__description::slotted(a:focus-visible){outline:var(--sgds-outline-focus)!important;outline-offset:var(--sgds-outline-offset-focus)!important}.alert sgds-close-button{position:absolute;right:14px;top:14px}`;
 //#endregion
 exports.default = css_248z;
 

package/react/components/Alert/alert.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.cjs.js","names":[],"sources":["../../../../src/components/Alert/alert.css"],"sourcesContent":[":host([variant=\"success\"]) .alert {\n  background-color: var(--sgds-success-surface-default);\n}\n\n:host([variant=\"warning\"]) .alert {\n  --sgds-alert-color: var(--sgds-color-fixed-dark);\n  background-color: var(--sgds-warning-surface-default);\n}\n\n:host([variant=\"danger\"]) .alert {\n  background-color: var(--sgds-danger-surface-default);\n}\n\n:host([variant=\"neutral\"]) .alert {\n  background-color: var(--sgds-neutral-surface-emphasis);\n}\n\n:host([variant=\"success\"][outlined]) .alert {\n  background-color: var(--sgds-success-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-success-border-color-muted);\n}\n\n:host([variant=\"warning\"][outlined]) .alert {\n  background-color: var(--sgds-warning-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-warning-border-color-muted);\n}\n\n:host([variant=\"danger\"][outlined]) .alert {\n  background-color: var(--sgds-danger-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-danger-border-color-muted);\n}\n\n:host([variant=\"neutral\"][outlined]) .alert {\n  background-color: var(--sgds-neutral-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-muted);\n}\n\n:host([outlined]) .alert-icon__outlined::slotted(*) {\n  color: var(--sgds-primary-color-fixed-dark);\n}\n\n:host([variant=\"success\"][outlined]) .alert-icon__outlined::slotted(*) {\n  color: var(--sgds-success-color-fixed-dark);\n}\n\n:host([variant=\"warning\"][outlined]) .alert-icon__outlined::slotted(*) {\n  color: var(--sgds-warning-color-fixed-light);\n}\n\n:host([variant=\"danger\"][outlined]) .alert-icon__outlined::slotted(*) {\n  color: var(--sgds-danger-color-fixed-dark);\n}\n\n:host([variant=\"neutral\"][outlined]) .alert-icon__outlined::slotted(*) {\n  color: var(--sgds-color-fixed-dark);\n}\n\n.alert {\n  --sgds-alert-color: var(--sgds-color-fixed-light);\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  gap: var(--sgds-gap-sm);\n  background-color: var(--sgds-primary-surface-default);\n  border: var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);\n  border-radius: var(--sgds-border-radius-md);\n  color: var(--sgds-alert-color);\n  padding: var(--sgds-padding-lg);\n}\n\n.alert.outlined {\n  --sgds-alert-color: var(--sgds-color-fixed-dark);\n  background-color: var(--sgds-primary-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-primary-border-color-muted);\n}\n\n.alert-content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--sgds-gap-md);\n  flex: 1 0 0;\n  padding-right: var(--sgds-padding-2-xl);\n}\n.alert-content__upper {\n  display: flex;\n  flex-direction: column;\n  gap: var(--sgds-gap-2-xs);\n}\n\n.alert-title {\n  font-weight: var(--sgds-font-weight-semibold);\n  font-size: var(--sgds-font-size-subtitle-sm);\n  font-style: normal;\n  font-weight: var(--sgds-font-weight-semibold);\n  line-height: var(--sgds-line-height-2-xs); /* 125% */\n}\n.alert-content__description {\n  display: inline;\n  font-size: var(--sgds-font-size-label-sm);\n  font-weight: var(--sgds-font-weight-regular);\n  line-height: var(--sgds-line-height-2-xs);\n}\n\n.alert-content__description::slotted(*) {\n  font-size: var(--sgds-font-size-label-sm);\n  font-weight: var(--sgds-font-weight-regular);\n  line-height: var(--sgds-line-height-2-xs);\n}\n\n.alert-content__description::slotted(a),\n.alert-content__description::slotted(a:hover) {\n  color: inherit !important;\n}\n\n.alert-content__description::slotted(a:focus-visible) {\n  outline: var(--sgds-outline-focus) !important;\n  outline-offset: var(--sgds-outline-offset-focus) !important;\n}\n\n.alert sgds-close-button {\n  position: absolute;\n  right: 14px;\n  top: 14px;\n}\n"],"mappings":""}
+{"version":3,"file":"alert.cjs.js","names":[],"sources":["../../../../src/components/Alert/alert.css"],"sourcesContent":[":host([variant=\"success\"]) .alert {\n  background-color: var(--sgds-success-surface-default);\n}\n\n:host([variant=\"warning\"]) .alert {\n  --sgds-alert-color: var(--sgds-color-fixed-dark);\n  background-color: var(--sgds-warning-surface-default);\n}\n\n:host([variant=\"danger\"]) .alert {\n  background-color: var(--sgds-danger-surface-default);\n}\n\n:host([variant=\"neutral\"]) .alert {\n  background-color: var(--sgds-neutral-surface-emphasis);\n}\n\n:host([variant=\"success\"][outlined]) .alert {\n  background-color: var(--sgds-success-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-success-border-color-muted);\n}\n\n:host([variant=\"warning\"][outlined]) .alert {\n  background-color: var(--sgds-warning-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-warning-border-color-muted);\n}\n\n:host([variant=\"danger\"][outlined]) .alert {\n  background-color: var(--sgds-danger-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-danger-border-color-muted);\n}\n\n:host([variant=\"neutral\"][outlined]) .alert {\n  background-color: var(--sgds-neutral-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-muted);\n}\n\n:host([outlined]) .alert-icon__outlined::slotted(*) {\n  color: var(--sgds-primary-color-default);\n}\n\n:host([variant=\"success\"][outlined]) .alert-icon__outlined::slotted(*) {\n  color: var(--sgds-success-color-default);\n}\n\n:host([variant=\"warning\"][outlined]) .alert-icon__outlined::slotted(*) {\n  color: var(--sgds-warning-color-fixed-light);\n}\n\n:host([variant=\"danger\"][outlined]) .alert-icon__outlined::slotted(*) {\n  color: var(--sgds-danger-color-default);\n}\n\n:host([variant=\"neutral\"][outlined]) .alert-icon__outlined::slotted(*) {\n  color: var(--sgds-body-color-default);\n}\n\n.alert {\n  --sgds-alert-color: var(--sgds-color-fixed-light);\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  gap: var(--sgds-gap-sm);\n  background-color: var(--sgds-primary-surface-default);\n  border: var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);\n  border-radius: var(--sgds-border-radius-md);\n  color: var(--sgds-alert-color);\n  padding: var(--sgds-padding-lg);\n}\n\n:host([outlined]) .alert {\n  --sgds-alert-color: var(--sgds-body-color-default);\n  background-color: var(--sgds-primary-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-primary-border-color-muted);\n}\n\n.alert-content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--sgds-gap-md);\n  flex: 1 0 0;\n  padding-right: var(--sgds-padding-2-xl);\n}\n.alert-content__upper {\n  display: flex;\n  flex-direction: column;\n  gap: var(--sgds-gap-2-xs);\n}\n\n.alert-title {\n  font-weight: var(--sgds-font-weight-semibold);\n  font-size: var(--sgds-font-size-subtitle-sm);\n  font-style: normal;\n  font-weight: var(--sgds-font-weight-semibold);\n  line-height: var(--sgds-line-height-2-xs); /* 125% */\n}\n.alert-content__description {\n  display: inline;\n  font-size: var(--sgds-font-size-label-sm);\n  font-weight: var(--sgds-font-weight-regular);\n  line-height: var(--sgds-line-height-2-xs);\n}\n\n.alert-content__description::slotted(*) {\n  font-size: var(--sgds-font-size-label-sm);\n  font-weight: var(--sgds-font-weight-regular);\n  line-height: var(--sgds-line-height-2-xs);\n}\n\n.alert-content__description::slotted(a),\n.alert-content__description::slotted(a:hover) {\n  color: inherit !important;\n}\n\n.alert-content__description::slotted(a:focus-visible) {\n  outline: var(--sgds-outline-focus) !important;\n  outline-offset: var(--sgds-outline-offset-focus) !important;\n}\n\n.alert sgds-close-button {\n  position: absolute;\n  right: 14px;\n  top: 14px;\n}\n"],"mappings":""}

package/react/components/Alert/alert.js

@@ -1,7 +1,7 @@
 "use client";
 import { css } from "lit";
 //#region src/components/Alert/alert.css
-var css_248z = css`:host([variant=success]) .alert{background-color:var(--sgds-success-surface-default)}:host([variant=warning]) .alert{--sgds-alert-color:var(--sgds-color-fixed-dark);background-color:var(--sgds-warning-surface-default)}:host([variant=danger]) .alert{background-color:var(--sgds-danger-surface-default)}:host([variant=neutral]) .alert{background-color:var(--sgds-neutral-surface-emphasis)}:host([variant=success][outlined]) .alert{background-color:var(--sgds-success-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-success-border-color-muted)}:host([variant=warning][outlined]) .alert{background-color:var(--sgds-warning-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-warning-border-color-muted)}:host([variant=danger][outlined]) .alert{background-color:var(--sgds-danger-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-danger-border-color-muted)}:host([variant=neutral][outlined]) .alert{background-color:var(--sgds-neutral-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-muted)}:host([outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-primary-color-fixed-dark)}:host([variant=success][outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-success-color-fixed-dark)}:host([variant=warning][outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-warning-color-fixed-light)}:host([variant=danger][outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-danger-color-fixed-dark)}:host([variant=neutral][outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-color-fixed-dark)}.alert{--sgds-alert-color:var(--sgds-color-fixed-light);background-color:var(--sgds-primary-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-md);color:var(--sgds-alert-color);display:flex;flex-direction:row;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-lg);position:relative}.alert.outlined{--sgds-alert-color:var(--sgds-color-fixed-dark);background-color:var(--sgds-primary-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-primary-border-color-muted)}.alert-content{align-items:flex-start;display:flex;flex:1 0 0;flex-direction:column;gap:var(--sgds-gap-md);padding-right:var(--sgds-padding-2-xl)}.alert-content__upper{display:flex;flex-direction:column;gap:var(--sgds-gap-2-xs)}.alert-title{font-size:var(--sgds-font-size-subtitle-sm);font-style:normal;font-weight:var(--sgds-font-weight-semibold);line-height:var(--sgds-line-height-2-xs)}.alert-content__description{display:inline;font-size:var(--sgds-font-size-label-sm);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-2-xs)}.alert-content__description::slotted(*){font-size:var(--sgds-font-size-label-sm);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-2-xs)}.alert-content__description::slotted(a),.alert-content__description::slotted(a:hover){color:inherit!important}.alert-content__description::slotted(a:focus-visible){outline:var(--sgds-outline-focus)!important;outline-offset:var(--sgds-outline-offset-focus)!important}.alert sgds-close-button{position:absolute;right:14px;top:14px}`;
+var css_248z = css`:host([variant=success]) .alert{background-color:var(--sgds-success-surface-default)}:host([variant=warning]) .alert{--sgds-alert-color:var(--sgds-color-fixed-dark);background-color:var(--sgds-warning-surface-default)}:host([variant=danger]) .alert{background-color:var(--sgds-danger-surface-default)}:host([variant=neutral]) .alert{background-color:var(--sgds-neutral-surface-emphasis)}:host([variant=success][outlined]) .alert{background-color:var(--sgds-success-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-success-border-color-muted)}:host([variant=warning][outlined]) .alert{background-color:var(--sgds-warning-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-warning-border-color-muted)}:host([variant=danger][outlined]) .alert{background-color:var(--sgds-danger-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-danger-border-color-muted)}:host([variant=neutral][outlined]) .alert{background-color:var(--sgds-neutral-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-muted)}:host([outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-primary-color-default)}:host([variant=success][outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-success-color-default)}:host([variant=warning][outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-warning-color-fixed-light)}:host([variant=danger][outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-danger-color-default)}:host([variant=neutral][outlined]) .alert-icon__outlined::slotted(*){color:var(--sgds-body-color-default)}.alert{--sgds-alert-color:var(--sgds-color-fixed-light);background-color:var(--sgds-primary-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-md);color:var(--sgds-alert-color);display:flex;flex-direction:row;gap:var(--sgds-gap-sm);padding:var(--sgds-padding-lg);position:relative}:host([outlined]) .alert{--sgds-alert-color:var(--sgds-body-color-default);background-color:var(--sgds-primary-surface-muted);border:var(--sgds-border-width-1) solid var(--sgds-primary-border-color-muted)}.alert-content{align-items:flex-start;display:flex;flex:1 0 0;flex-direction:column;gap:var(--sgds-gap-md);padding-right:var(--sgds-padding-2-xl)}.alert-content__upper{display:flex;flex-direction:column;gap:var(--sgds-gap-2-xs)}.alert-title{font-size:var(--sgds-font-size-subtitle-sm);font-style:normal;font-weight:var(--sgds-font-weight-semibold);line-height:var(--sgds-line-height-2-xs)}.alert-content__description{display:inline;font-size:var(--sgds-font-size-label-sm);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-2-xs)}.alert-content__description::slotted(*){font-size:var(--sgds-font-size-label-sm);font-weight:var(--sgds-font-weight-regular);line-height:var(--sgds-line-height-2-xs)}.alert-content__description::slotted(a),.alert-content__description::slotted(a:hover){color:inherit!important}.alert-content__description::slotted(a:focus-visible){outline:var(--sgds-outline-focus)!important;outline-offset:var(--sgds-outline-offset-focus)!important}.alert sgds-close-button{position:absolute;right:14px;top:14px}`;
 //#endregion
 export { css_248z as default };
 

package/react/components/Alert/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","names":[],"sources":["../../../../src/components/Alert/alert.css"],"sourcesContent":[":host([variant=\"success\"]) .alert {\n  background-color: var(--sgds-success-surface-default);\n}\n\n:host([variant=\"warning\"]) .alert {\n  --sgds-alert-color: var(--sgds-color-fixed-dark);\n  background-color: var(--sgds-warning-surface-default);\n}\n\n:host([variant=\"danger\"]) .alert {\n  background-color: var(--sgds-danger-surface-default);\n}\n\n:host([variant=\"neutral\"]) .alert {\n  background-color: var(--sgds-neutral-surface-emphasis);\n}\n\n:host([variant=\"success\"][outlined]) .alert {\n  background-color: var(--sgds-success-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-success-border-color-muted);\n}\n\n:host([variant=\"warning\"][outlined]) .alert {\n  background-color: var(--sgds-warning-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-warning-border-color-muted);\n}\n\n:host([variant=\"danger\"][outlined]) .alert {\n  background-color: var(--sgds-danger-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-danger-border-color-muted);\n}\n\n:host([variant=\"neutral\"][outlined]) .alert {\n  background-color: var(--sgds-neutral-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-muted);\n}\n\n:host([outlined]) .alert-icon__outlined::slotted(*) {\n  color: var(--sgds-primary-color-fixed-dark);\n}\n\n:host([variant=\"success\"][outlined]) .alert-icon__outlined::slotted(*) {\n  color: var(--sgds-success-color-fixed-dark);\n}\n\n:host([variant=\"warning\"][outlined]) .alert-icon__outlined::slotted(*) {\n  color: var(--sgds-warning-color-fixed-light);\n}\n\n:host([variant=\"danger\"][outlined]) .alert-icon__outlined::slotted(*) {\n  color: var(--sgds-danger-color-fixed-dark);\n}\n\n:host([variant=\"neutral\"][outlined]) .alert-icon__outlined::slotted(*) {\n  color: var(--sgds-color-fixed-dark);\n}\n\n.alert {\n  --sgds-alert-color: var(--sgds-color-fixed-light);\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  gap: var(--sgds-gap-sm);\n  background-color: var(--sgds-primary-surface-default);\n  border: var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);\n  border-radius: var(--sgds-border-radius-md);\n  color: var(--sgds-alert-color);\n  padding: var(--sgds-padding-lg);\n}\n\n.alert.outlined {\n  --sgds-alert-color: var(--sgds-color-fixed-dark);\n  background-color: var(--sgds-primary-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-primary-border-color-muted);\n}\n\n.alert-content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--sgds-gap-md);\n  flex: 1 0 0;\n  padding-right: var(--sgds-padding-2-xl);\n}\n.alert-content__upper {\n  display: flex;\n  flex-direction: column;\n  gap: var(--sgds-gap-2-xs);\n}\n\n.alert-title {\n  font-weight: var(--sgds-font-weight-semibold);\n  font-size: var(--sgds-font-size-subtitle-sm);\n  font-style: normal;\n  font-weight: var(--sgds-font-weight-semibold);\n  line-height: var(--sgds-line-height-2-xs); /* 125% */\n}\n.alert-content__description {\n  display: inline;\n  font-size: var(--sgds-font-size-label-sm);\n  font-weight: var(--sgds-font-weight-regular);\n  line-height: var(--sgds-line-height-2-xs);\n}\n\n.alert-content__description::slotted(*) {\n  font-size: var(--sgds-font-size-label-sm);\n  font-weight: var(--sgds-font-weight-regular);\n  line-height: var(--sgds-line-height-2-xs);\n}\n\n.alert-content__description::slotted(a),\n.alert-content__description::slotted(a:hover) {\n  color: inherit !important;\n}\n\n.alert-content__description::slotted(a:focus-visible) {\n  outline: var(--sgds-outline-focus) !important;\n  outline-offset: var(--sgds-outline-offset-focus) !important;\n}\n\n.alert sgds-close-button {\n  position: absolute;\n  right: 14px;\n  top: 14px;\n}\n"],"mappings":""}
+{"version":3,"file":"alert.js","names":[],"sources":["../../../../src/components/Alert/alert.css"],"sourcesContent":[":host([variant=\"success\"]) .alert {\n  background-color: var(--sgds-success-surface-default);\n}\n\n:host([variant=\"warning\"]) .alert {\n  --sgds-alert-color: var(--sgds-color-fixed-dark);\n  background-color: var(--sgds-warning-surface-default);\n}\n\n:host([variant=\"danger\"]) .alert {\n  background-color: var(--sgds-danger-surface-default);\n}\n\n:host([variant=\"neutral\"]) .alert {\n  background-color: var(--sgds-neutral-surface-emphasis);\n}\n\n:host([variant=\"success\"][outlined]) .alert {\n  background-color: var(--sgds-success-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-success-border-color-muted);\n}\n\n:host([variant=\"warning\"][outlined]) .alert {\n  background-color: var(--sgds-warning-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-warning-border-color-muted);\n}\n\n:host([variant=\"danger\"][outlined]) .alert {\n  background-color: var(--sgds-danger-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-danger-border-color-muted);\n}\n\n:host([variant=\"neutral\"][outlined]) .alert {\n  background-color: var(--sgds-neutral-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-neutral-border-color-muted);\n}\n\n:host([outlined]) .alert-icon__outlined::slotted(*) {\n  color: var(--sgds-primary-color-default);\n}\n\n:host([variant=\"success\"][outlined]) .alert-icon__outlined::slotted(*) {\n  color: var(--sgds-success-color-default);\n}\n\n:host([variant=\"warning\"][outlined]) .alert-icon__outlined::slotted(*) {\n  color: var(--sgds-warning-color-fixed-light);\n}\n\n:host([variant=\"danger\"][outlined]) .alert-icon__outlined::slotted(*) {\n  color: var(--sgds-danger-color-default);\n}\n\n:host([variant=\"neutral\"][outlined]) .alert-icon__outlined::slotted(*) {\n  color: var(--sgds-body-color-default);\n}\n\n.alert {\n  --sgds-alert-color: var(--sgds-color-fixed-light);\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  gap: var(--sgds-gap-sm);\n  background-color: var(--sgds-primary-surface-default);\n  border: var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);\n  border-radius: var(--sgds-border-radius-md);\n  color: var(--sgds-alert-color);\n  padding: var(--sgds-padding-lg);\n}\n\n:host([outlined]) .alert {\n  --sgds-alert-color: var(--sgds-body-color-default);\n  background-color: var(--sgds-primary-surface-muted);\n  border: var(--sgds-border-width-1) solid var(--sgds-primary-border-color-muted);\n}\n\n.alert-content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--sgds-gap-md);\n  flex: 1 0 0;\n  padding-right: var(--sgds-padding-2-xl);\n}\n.alert-content__upper {\n  display: flex;\n  flex-direction: column;\n  gap: var(--sgds-gap-2-xs);\n}\n\n.alert-title {\n  font-weight: var(--sgds-font-weight-semibold);\n  font-size: var(--sgds-font-size-subtitle-sm);\n  font-style: normal;\n  font-weight: var(--sgds-font-weight-semibold);\n  line-height: var(--sgds-line-height-2-xs); /* 125% */\n}\n.alert-content__description {\n  display: inline;\n  font-size: var(--sgds-font-size-label-sm);\n  font-weight: var(--sgds-font-weight-regular);\n  line-height: var(--sgds-line-height-2-xs);\n}\n\n.alert-content__description::slotted(*) {\n  font-size: var(--sgds-font-size-label-sm);\n  font-weight: var(--sgds-font-weight-regular);\n  line-height: var(--sgds-line-height-2-xs);\n}\n\n.alert-content__description::slotted(a),\n.alert-content__description::slotted(a:hover) {\n  color: inherit !important;\n}\n\n.alert-content__description::slotted(a:focus-visible) {\n  outline: var(--sgds-outline-focus) !important;\n  outline-offset: var(--sgds-outline-offset-focus) !important;\n}\n\n.alert sgds-close-button {\n  position: absolute;\n  right: 14px;\n  top: 14px;\n}\n"],"mappings":""}

package/react/components/Alert/sgds-alert.cjs.js

@@ -70,7 +70,7 @@ var SgdsAlert = class extends require_sgds_element.default {
             ${this.dismissible ? lit_static_html_js.html`<sgds-close-button
                   aria-label="close the alert"
                   @click=${this.close}
-                  tone=${this.outlined || this.variant === "warning" ? "fixed-dark" : "fixed-light"}
+                  tone="default"
                 ></sgds-close-button>` : lit.nothing}
           </div>
         ` : lit.nothing;

package/react/components/Alert/sgds-alert.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-alert.cjs.js","names":["SgdsElement","alertStyle","SgdsCloseButton","SgdsIcon","classMap","nothing","property","watch"],"sources":["../../../../src/components/Alert/sgds-alert.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport alertStyle from \"./alert.css\";\n\nexport type AlertVariant = \"info\" | \"success\" | \"danger\" | \"warning\" | \"neutral\";\n/**\n * @summary Alerts provide short, timely, and relevant information for your users. It can be a simple text message or customised HTML content with paragraphs, headings and links.\n *\n * @slot default - The alert's main content.\n * @slot icon - An icon to show in the alert. Pass in sgds-icon size=\"md\" elements.\n * @slot action - An action button or link to show in the alert.\n *\n * @event sgds-show - Emitted when the alert appears.\n * @event sgds-hide - Emitted after the alert closes.\n *\n */\nexport class SgdsAlert extends SgdsElement {\n  static styles = [...SgdsElement.styles, alertStyle];\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton,\n    \"sgds-icon\": SgdsIcon\n  };\n  /** Controls the appearance of the alert  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /** Enables a close button that allows the user to dismiss the alert. */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** The alert's theme variant. */\n  @property({ type: String, reflect: true }) variant: AlertVariant = \"info\";\n\n  /** Controls the alert visual between a lighter outline and a solid darker variant. */\n  @property({ type: Boolean, reflect: true }) outlined = false;\n\n  /** The title of the alert. Only text is allowed */\n  @property({ type: String, reflect: true }) title = \"\";\n\n  /** Closes the alert  */\n  public close() {\n    this.show = false;\n  }\n  /**@internal */\n  @watch(\"show\")\n  _handleShowChange() {\n    this.show ? this.emit(\"sgds-show\") : this.emit(\"sgds-hide\");\n  }\n\n  render() {\n    return (this.dismissible && this.show) || !this.dismissible\n      ? html`\n          <div\n            class=\"${classMap({\n              alert: true,\n              show: this.show,\n              [`alert-dismissible`]: this.dismissible,\n              outlined: this.outlined\n            })}\"\n            role=\"alert\"\n            aria-hidden=${this.show ? \"false\" : \"true\"}\n          >\n            <slot name=\"icon\" class=${classMap({ \"alert-icon__outlined\": this.outlined })}></slot>\n            <div class=\"alert-content\">\n              <div class=\"alert-content__upper\">\n                ${this.title ? html`<div class=\"alert-title\">${this.title}</div>` : nothing}\n                <slot class=\"alert-content__description\"></slot>\n              </div>\n              <slot class=\"alert-content__action\" name=\"action\"></slot>\n            </div>\n            ${this.dismissible\n              ? html`<sgds-close-button\n                  aria-label=\"close the alert\"\n                  @click=${this.close}\n                  tone=${this.outlined || this.variant === \"warning\" ? \"fixed-dark\" : \"fixed-light\"}\n                ></sgds-close-button>`\n              : nothing}\n          </div>\n        `\n      : nothing;\n  }\n}\n\nexport default SgdsAlert;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAsBA,IAAa,YAAb,cAA+BA,qBAAAA,QAAY;;;EAQU,KAAA,OAAA;EAGO,KAAA,cAAA;EAGS,KAAA,UAAA;EAGZ,KAAA,WAAA;EAGJ,KAAA,QAAA;;;EAnBnC,KAAA,SAAA,CAAC,GAAGA,qBAAAA,QAAY,QAAQC,cAAAA,OAAU;;;EAE5B,KAAA,eAAA;GACpB,qBAAqBC,0BAAAA;GACrB,aAAaC,kBAAAA;EACf;;;CAiBA,QAAe;EACb,KAAK,OAAO;CACd;;CAEA,oBACoB;EAClB,KAAK,OAAO,KAAK,KAAK,WAAW,IAAI,KAAK,KAAK,WAAW;CAC5D;CAEA,SAAS;EACP,OAAQ,KAAK,eAAe,KAAK,QAAS,CAAC,KAAK,cAC5C,mBAAA,IAAI;;sBAESC,GAAAA,4BAAAA,SAAAA,CAAS;GAChB,OAAO;GACP,MAAM,KAAK;IACV,sBAAsB,KAAK;GAC5B,UAAU,KAAK;EACjB,CAAC,EAAE;;0BAEW,KAAK,OAAO,UAAU,OAAO;;uCAEjBA,GAAAA,4BAAAA,SAAAA,CAAS,EAAE,wBAAwB,KAAK,SAAS,CAAC,EAAE;;;kBAGxE,KAAK,QAAQ,mBAAA,IAAI,4BAA4B,KAAK,MAAM,UAAUC,IAAAA,QAAQ;;;;;cAK9E,KAAK,cACH,mBAAA,IAAI;;2BAEO,KAAK,MAAM;yBACb,KAAK,YAAY,KAAK,YAAY,YAAY,eAAe,cAAc;yCAEpFA,IAAAA,QAAQ;;YAGhBA,IAAAA;CACN;AACF;AAxDGC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,QAAA,KAAA,CAAA;AAGzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,eAAA,KAAA,CAAA;AAGzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,WAAA,KAAA,CAAA;AAGxCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,YAAA,KAAA,CAAA;AAGzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,SAAA,KAAA,CAAA;AAOxCC,iBAAAA,QAAAA,CAAAA,cAAAA,MAAM,MAAM,CAAA,GAAA,UAAA,WAAA,qBAAA,IAAA"}
+{"version":3,"file":"sgds-alert.cjs.js","names":["SgdsElement","alertStyle","SgdsCloseButton","SgdsIcon","classMap","nothing","property","watch"],"sources":["../../../../src/components/Alert/sgds-alert.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport alertStyle from \"./alert.css\";\n\nexport type AlertVariant = \"info\" | \"success\" | \"danger\" | \"warning\" | \"neutral\";\n/**\n * @summary Alerts provide short, timely, and relevant information for your users. It can be a simple text message or customised HTML content with paragraphs, headings and links.\n *\n * @slot default - The alert's main content.\n * @slot icon - An icon to show in the alert. Pass in sgds-icon size=\"md\" elements.\n * @slot action - An action button or link to show in the alert.\n *\n * @event sgds-show - Emitted when the alert appears.\n * @event sgds-hide - Emitted after the alert closes.\n *\n */\nexport class SgdsAlert extends SgdsElement {\n  static styles = [...SgdsElement.styles, alertStyle];\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton,\n    \"sgds-icon\": SgdsIcon\n  };\n  /** Controls the appearance of the alert  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /** Enables a close button that allows the user to dismiss the alert. */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** The alert's theme variant. */\n  @property({ type: String, reflect: true }) variant: AlertVariant = \"info\";\n\n  /** Controls the alert visual between a lighter outline and a solid darker variant. */\n  @property({ type: Boolean, reflect: true }) outlined = false;\n\n  /** The title of the alert. Only text is allowed */\n  @property({ type: String, reflect: true }) title = \"\";\n\n  /** Closes the alert  */\n  public close() {\n    this.show = false;\n  }\n  /**@internal */\n  @watch(\"show\")\n  _handleShowChange() {\n    this.show ? this.emit(\"sgds-show\") : this.emit(\"sgds-hide\");\n  }\n\n  render() {\n    return (this.dismissible && this.show) || !this.dismissible\n      ? html`\n          <div\n            class=\"${classMap({\n              alert: true,\n              show: this.show,\n              [`alert-dismissible`]: this.dismissible,\n              outlined: this.outlined\n            })}\"\n            role=\"alert\"\n            aria-hidden=${this.show ? \"false\" : \"true\"}\n          >\n            <slot name=\"icon\" class=${classMap({ \"alert-icon__outlined\": this.outlined })}></slot>\n            <div class=\"alert-content\">\n              <div class=\"alert-content__upper\">\n                ${this.title ? html`<div class=\"alert-title\">${this.title}</div>` : nothing}\n                <slot class=\"alert-content__description\"></slot>\n              </div>\n              <slot class=\"alert-content__action\" name=\"action\"></slot>\n            </div>\n            ${this.dismissible\n              ? html`<sgds-close-button\n                  aria-label=\"close the alert\"\n                  @click=${this.close}\n                  tone=\"default\"\n                ></sgds-close-button>`\n              : nothing}\n          </div>\n        `\n      : nothing;\n  }\n}\n\nexport default SgdsAlert;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAsBA,IAAa,YAAb,cAA+BA,qBAAAA,QAAY;;;EAQU,KAAA,OAAA;EAGO,KAAA,cAAA;EAGS,KAAA,UAAA;EAGZ,KAAA,WAAA;EAGJ,KAAA,QAAA;;;EAnBnC,KAAA,SAAA,CAAC,GAAGA,qBAAAA,QAAY,QAAQC,cAAAA,OAAU;;;EAE5B,KAAA,eAAA;GACpB,qBAAqBC,0BAAAA;GACrB,aAAaC,kBAAAA;EACf;;;CAiBA,QAAe;EACb,KAAK,OAAO;CACd;;CAEA,oBACoB;EAClB,KAAK,OAAO,KAAK,KAAK,WAAW,IAAI,KAAK,KAAK,WAAW;CAC5D;CAEA,SAAS;EACP,OAAQ,KAAK,eAAe,KAAK,QAAS,CAAC,KAAK,cAC5C,mBAAA,IAAI;;sBAESC,GAAAA,4BAAAA,SAAAA,CAAS;GAChB,OAAO;GACP,MAAM,KAAK;IACV,sBAAsB,KAAK;GAC5B,UAAU,KAAK;EACjB,CAAC,EAAE;;0BAEW,KAAK,OAAO,UAAU,OAAO;;uCAEjBA,GAAAA,4BAAAA,SAAAA,CAAS,EAAE,wBAAwB,KAAK,SAAS,CAAC,EAAE;;;kBAGxE,KAAK,QAAQ,mBAAA,IAAI,4BAA4B,KAAK,MAAM,UAAUC,IAAAA,QAAQ;;;;;cAK9E,KAAK,cACH,mBAAA,IAAI;;2BAEO,KAAK,MAAM;;yCAGtBA,IAAAA,QAAQ;;YAGhBA,IAAAA;CACN;AACF;AAxDGC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,QAAA,KAAA,CAAA;AAGzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,eAAA,KAAA,CAAA;AAGzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,WAAA,KAAA,CAAA;AAGxCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,YAAA,KAAA,CAAA;AAGzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,SAAA,KAAA,CAAA;AAOxCC,iBAAAA,QAAAA,CAAAA,cAAAA,MAAM,MAAM,CAAA,GAAA,UAAA,WAAA,qBAAA,IAAA"}

package/react/components/Alert/sgds-alert.js

@@ -70,7 +70,7 @@ var SgdsAlert = class extends SgdsElement {
             ${this.dismissible ? html$1`<sgds-close-button
                   aria-label="close the alert"
                   @click=${this.close}
-                  tone=${this.outlined || this.variant === "warning" ? "fixed-dark" : "fixed-light"}
+                  tone="default"
                 ></sgds-close-button>` : nothing}
           </div>
         ` : nothing;

package/react/components/Alert/sgds-alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-alert.js","names":["alertStyle"],"sources":["../../../../src/components/Alert/sgds-alert.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport alertStyle from \"./alert.css\";\n\nexport type AlertVariant = \"info\" | \"success\" | \"danger\" | \"warning\" | \"neutral\";\n/**\n * @summary Alerts provide short, timely, and relevant information for your users. It can be a simple text message or customised HTML content with paragraphs, headings and links.\n *\n * @slot default - The alert's main content.\n * @slot icon - An icon to show in the alert. Pass in sgds-icon size=\"md\" elements.\n * @slot action - An action button or link to show in the alert.\n *\n * @event sgds-show - Emitted when the alert appears.\n * @event sgds-hide - Emitted after the alert closes.\n *\n */\nexport class SgdsAlert extends SgdsElement {\n  static styles = [...SgdsElement.styles, alertStyle];\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton,\n    \"sgds-icon\": SgdsIcon\n  };\n  /** Controls the appearance of the alert  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /** Enables a close button that allows the user to dismiss the alert. */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** The alert's theme variant. */\n  @property({ type: String, reflect: true }) variant: AlertVariant = \"info\";\n\n  /** Controls the alert visual between a lighter outline and a solid darker variant. */\n  @property({ type: Boolean, reflect: true }) outlined = false;\n\n  /** The title of the alert. Only text is allowed */\n  @property({ type: String, reflect: true }) title = \"\";\n\n  /** Closes the alert  */\n  public close() {\n    this.show = false;\n  }\n  /**@internal */\n  @watch(\"show\")\n  _handleShowChange() {\n    this.show ? this.emit(\"sgds-show\") : this.emit(\"sgds-hide\");\n  }\n\n  render() {\n    return (this.dismissible && this.show) || !this.dismissible\n      ? html`\n          <div\n            class=\"${classMap({\n              alert: true,\n              show: this.show,\n              [`alert-dismissible`]: this.dismissible,\n              outlined: this.outlined\n            })}\"\n            role=\"alert\"\n            aria-hidden=${this.show ? \"false\" : \"true\"}\n          >\n            <slot name=\"icon\" class=${classMap({ \"alert-icon__outlined\": this.outlined })}></slot>\n            <div class=\"alert-content\">\n              <div class=\"alert-content__upper\">\n                ${this.title ? html`<div class=\"alert-title\">${this.title}</div>` : nothing}\n                <slot class=\"alert-content__description\"></slot>\n              </div>\n              <slot class=\"alert-content__action\" name=\"action\"></slot>\n            </div>\n            ${this.dismissible\n              ? html`<sgds-close-button\n                  aria-label=\"close the alert\"\n                  @click=${this.close}\n                  tone=${this.outlined || this.variant === \"warning\" ? \"fixed-dark\" : \"fixed-light\"}\n                ></sgds-close-button>`\n              : nothing}\n          </div>\n        `\n      : nothing;\n  }\n}\n\nexport default SgdsAlert;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAsBA,IAAa,YAAb,cAA+B,YAAY;;;EAQU,KAAA,OAAA;EAGO,KAAA,cAAA;EAGS,KAAA,UAAA;EAGZ,KAAA,WAAA;EAGJ,KAAA,QAAA;;;EAnBnC,KAAA,SAAA,CAAC,GAAG,YAAY,QAAQA,QAAU;;;EAE5B,KAAA,eAAA;GACpB,qBAAqB;GACrB,aAAa;EACf;;;CAiBA,QAAe;EACb,KAAK,OAAO;CACd;;CAEA,oBACoB;EAClB,KAAK,OAAO,KAAK,KAAK,WAAW,IAAI,KAAK,KAAK,WAAW;CAC5D;CAEA,SAAS;EACP,OAAQ,KAAK,eAAe,KAAK,QAAS,CAAC,KAAK,cAC5C,MAAI;;qBAES,SAAS;GAChB,OAAO;GACP,MAAM,KAAK;IACV,sBAAsB,KAAK;GAC5B,UAAU,KAAK;EACjB,CAAC,EAAE;;0BAEW,KAAK,OAAO,UAAU,OAAO;;sCAEjB,SAAS,EAAE,wBAAwB,KAAK,SAAS,CAAC,EAAE;;;kBAGxE,KAAK,QAAQ,MAAI,4BAA4B,KAAK,MAAM,UAAU,QAAQ;;;;;cAK9E,KAAK,cACH,MAAI;;2BAEO,KAAK,MAAM;yBACb,KAAK,YAAY,KAAK,YAAY,YAAY,eAAe,cAAc;yCAEpF,QAAQ;;YAGhB;CACN;AACF;AAxDG,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,QAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,eAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,WAAA,KAAA,CAAA;AAGxC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,YAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,SAAA,KAAA,CAAA;AAOxC,WAAA,CAAA,MAAM,MAAM,CAAA,GAAA,UAAA,WAAA,qBAAA,IAAA"}
+{"version":3,"file":"sgds-alert.js","names":["alertStyle"],"sources":["../../../../src/components/Alert/sgds-alert.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsCloseButton from \"../CloseButton/sgds-close-button\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport alertStyle from \"./alert.css\";\n\nexport type AlertVariant = \"info\" | \"success\" | \"danger\" | \"warning\" | \"neutral\";\n/**\n * @summary Alerts provide short, timely, and relevant information for your users. It can be a simple text message or customised HTML content with paragraphs, headings and links.\n *\n * @slot default - The alert's main content.\n * @slot icon - An icon to show in the alert. Pass in sgds-icon size=\"md\" elements.\n * @slot action - An action button or link to show in the alert.\n *\n * @event sgds-show - Emitted when the alert appears.\n * @event sgds-hide - Emitted after the alert closes.\n *\n */\nexport class SgdsAlert extends SgdsElement {\n  static styles = [...SgdsElement.styles, alertStyle];\n  /**@internal */\n  static dependencies = {\n    \"sgds-close-button\": SgdsCloseButton,\n    \"sgds-icon\": SgdsIcon\n  };\n  /** Controls the appearance of the alert  */\n  @property({ type: Boolean, reflect: true }) show = false;\n\n  /** Enables a close button that allows the user to dismiss the alert. */\n  @property({ type: Boolean, reflect: true }) dismissible = false;\n\n  /** The alert's theme variant. */\n  @property({ type: String, reflect: true }) variant: AlertVariant = \"info\";\n\n  /** Controls the alert visual between a lighter outline and a solid darker variant. */\n  @property({ type: Boolean, reflect: true }) outlined = false;\n\n  /** The title of the alert. Only text is allowed */\n  @property({ type: String, reflect: true }) title = \"\";\n\n  /** Closes the alert  */\n  public close() {\n    this.show = false;\n  }\n  /**@internal */\n  @watch(\"show\")\n  _handleShowChange() {\n    this.show ? this.emit(\"sgds-show\") : this.emit(\"sgds-hide\");\n  }\n\n  render() {\n    return (this.dismissible && this.show) || !this.dismissible\n      ? html`\n          <div\n            class=\"${classMap({\n              alert: true,\n              show: this.show,\n              [`alert-dismissible`]: this.dismissible,\n              outlined: this.outlined\n            })}\"\n            role=\"alert\"\n            aria-hidden=${this.show ? \"false\" : \"true\"}\n          >\n            <slot name=\"icon\" class=${classMap({ \"alert-icon__outlined\": this.outlined })}></slot>\n            <div class=\"alert-content\">\n              <div class=\"alert-content__upper\">\n                ${this.title ? html`<div class=\"alert-title\">${this.title}</div>` : nothing}\n                <slot class=\"alert-content__description\"></slot>\n              </div>\n              <slot class=\"alert-content__action\" name=\"action\"></slot>\n            </div>\n            ${this.dismissible\n              ? html`<sgds-close-button\n                  aria-label=\"close the alert\"\n                  @click=${this.close}\n                  tone=\"default\"\n                ></sgds-close-button>`\n              : nothing}\n          </div>\n        `\n      : nothing;\n  }\n}\n\nexport default SgdsAlert;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAsBA,IAAa,YAAb,cAA+B,YAAY;;;EAQU,KAAA,OAAA;EAGO,KAAA,cAAA;EAGS,KAAA,UAAA;EAGZ,KAAA,WAAA;EAGJ,KAAA,QAAA;;;EAnBnC,KAAA,SAAA,CAAC,GAAG,YAAY,QAAQA,QAAU;;;EAE5B,KAAA,eAAA;GACpB,qBAAqB;GACrB,aAAa;EACf;;;CAiBA,QAAe;EACb,KAAK,OAAO;CACd;;CAEA,oBACoB;EAClB,KAAK,OAAO,KAAK,KAAK,WAAW,IAAI,KAAK,KAAK,WAAW;CAC5D;CAEA,SAAS;EACP,OAAQ,KAAK,eAAe,KAAK,QAAS,CAAC,KAAK,cAC5C,MAAI;;qBAES,SAAS;GAChB,OAAO;GACP,MAAM,KAAK;IACV,sBAAsB,KAAK;GAC5B,UAAU,KAAK;EACjB,CAAC,EAAE;;0BAEW,KAAK,OAAO,UAAU,OAAO;;sCAEjB,SAAS,EAAE,wBAAwB,KAAK,SAAS,CAAC,EAAE;;;kBAGxE,KAAK,QAAQ,MAAI,4BAA4B,KAAK,MAAM,UAAU,QAAQ;;;;;cAK9E,KAAK,cACH,MAAI;;2BAEO,KAAK,MAAM;;yCAGtB,QAAQ;;YAGhB;CACN;AACF;AAxDG,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,QAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,eAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,WAAA,KAAA,CAAA;AAGxC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,YAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,UAAA,WAAA,SAAA,KAAA,CAAA;AAOxC,WAAA,CAAA,MAAM,MAAM,CAAA,GAAA,UAAA,WAAA,qBAAA,IAAA"}

package/react/components/Appnav/sgds-appnav.cjs.js

@@ -116,7 +116,7 @@ var SgdsAppnav = class extends require_nav_element.default {
 			xxl: 1440
 		}[this.expand]);
 		return lit.html`
-      <nav>
+      <nav aria-label="App navigation">
         <div class="navbar ${this._expandClass()}">
           <slot name="start" class=${(0, lit_directives_class_map_js.classMap)({ "slot-empty": !this.hasStartSlot })}></slot>
           <a class="navbar-brand" href=${require_safeUrl.sanitizeHref(this.brandHref) ?? ""} aria-label="brand-link">

package/react/components/Appnav/sgds-appnav.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-appnav.cjs.js","names":["NavElement","HasSlotController","appnavStyle","classMap","sanitizeHref","nothing","provide","AppnavBreakpointContext","state","AppnavExpandedContext","property"],"sources":["../../../../src/components/Appnav/sgds-appnav.ts"],"sourcesContent":["import { provide } from \"@lit/context\";\nimport { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport NavElement from \"../../base/nav-element\";\nimport { sanitizeHref } from \"../../utils/safeUrl\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { AppnavBreakpointContext, AppnavExpandedContext } from \"./appnav-context\";\nimport appnavStyle from \"./appnav.css\";\n\nexport type AppnavTone = \"brand\" | \"gradient-1\" | \"gradient-2\" | \"gradient-3\" | \"gradient-4\";\n\ninterface DefaultSlotItem {\n  label: string;\n  element: HTMLElement;\n}\n\n/**\n * @summary `SgdsAppnav` is a application navigation bar for operational apps. Accepts icon-buttons and profile in a fluid layout with collapse/expand behavior.\n *\n * @storyOrder 1\n *\n * @event sgds-show - Emitted on show. Only for collapsed menu.\n * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.\n * @event sgds-hide - Emitted on hide. Only for collapsed menu.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.\n *\n * @slot default - Elements in this slot collapse into the mobile menu as text items. Accepts sgds-icon-button and other elements. Uses ariaLabel as menu item text.\n * @slot start - Elements in this slot will be positioned to the left of the brand.\n * @slot brand - Brand slot of SgdsAppnav. Pass in brand logo img here\n * @slot profile - Profile slot. sgds-appnav-profile goes here. Positioned to the right of the toggler.\n *\n */\nexport class SgdsAppnav extends NavElement {\n  static styles = [...NavElement.styles, appnavStyle];\n\n  @provide({ context: AppnavBreakpointContext })\n  @state()\n  private _breakpointReached = false;\n\n  @provide({ context: AppnavExpandedContext })\n  @state()\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  private _expanded = false;\n\n  /** Sets the visual tone of the navigation bar */\n  @property({ type: String, reflect: true })\n  tone: AppnavTone = \"brand\";\n\n  /** Used only for SSR to indicate the presence of the `start` slot. */\n  @property({ type: Boolean }) hasStartSlot = false;\n\n  private readonly hasSlotController = new HasSlotController(this, \"start\");\n\n  /** @internal Whether the default slot has assigned elements */\n  @state()\n  private _hasDefaultSlotItems = false;\n\n  /** @internal Whether the profile slot has assigned elements */\n  @state()\n  private _hasProfileSlotItems = false;\n\n  /** @internal Stored default slot items for mobile menu rendering */\n  @state()\n  private _defaultSlotItems: DefaultSlotItem[] = [];\n\n  updated() {\n    if (!this.hasStartSlot) this.hasStartSlot = this.hasSlotController.test(\"start\");\n    this._expanded = this.expanded;\n  }\n\n  protected _onBreakpointReached(reached: boolean): void {\n    this._breakpointReached = reached;\n  }\n\n  protected _isBreakpointReached(): boolean {\n    return this._breakpointReached;\n  }\n\n  private _handleTogglerKeydown(e: KeyboardEvent) {\n    if (e.key === \"Tab\" && !e.shiftKey && this.expanded) {\n      e.preventDefault();\n      const firstItem = this.shadowRoot?.querySelector(\".appnav-menu-item\") as HTMLElement | null;\n      firstItem?.focus();\n    }\n  }\n\n  private _handleMenuItemKeydown(e: KeyboardEvent, index: number) {\n    if (e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      this._handleMobileItemClick(this._defaultSlotItems[index]);\n    } else if (e.key === \"Tab\" && e.shiftKey && index === 0) {\n      e.preventDefault();\n      this.header?.focus();\n    }\n  }\n\n  private _handleDefaultSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true }) as HTMLElement[];\n    this._hasDefaultSlotItems = childElements.length > 0;\n    this._defaultSlotItems = childElements\n      .filter(el => typeof el.tagName !== \"undefined\")\n      .map(el => {\n        const label = el.getAttribute(\"ariaLabel\") || el.getAttribute(\"aria-label\") || el.textContent?.trim() || \"\";\n        if (!label) {\n          console.warn(\n            `[sgds-appnav] Slotted element <${el.tagName.toLowerCase()}> has no ariaLabel, aria-label, or textContent. It will render as a blank item in the mobile menu. Add an ariaLabel for accessibility and mobile display.`,\n            el\n          );\n        }\n        return { label, element: el };\n      });\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  private _handleMobileItemClick(item: DefaultSlotItem) {\n    item.element.click();\n    this.hide();\n  }\n\n  private _renderAppnavToggler() {\n    return html`<sgds-icon-button\n      name=\"three-dots-vertical\"\n      variant=\"ghost\"\n      size=\"sm\"\n      tone=\"fixed-light\"\n      class=\"navbar-toggler\"\n      @click=${this._handleSummaryClick}\n      @keydown=${this._handleTogglerKeydown}\n      aria-controls=\"${this.collapseId}\"\n      aria-expanded=\"${this.expanded}\"\n      .ariaLabel=${\"Toggle navigation\"}\n    ></sgds-icon-button>`;\n  }\n\n  private _handleProfileSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    this._hasProfileSlotItems = childElements.length > 0;\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n      el.setAttribute(\"tone\", this.tone);\n    });\n  }\n\n  render() {\n    this.breakpointReached =\n      window.innerWidth <\n      (this.expand === \"always\"\n        ? -1\n        : this.expand === \"never\"\n        ? Infinity\n        : { sm: 512, md: 768, lg: 1024, xl: 1280, xxl: 1440 }[this.expand]);\n\n    return html`\n      <nav>\n        <div class=\"navbar ${this._expandClass()}\">\n          <slot name=\"start\" class=${classMap({ \"slot-empty\": !this.hasStartSlot })}></slot>\n          <a class=\"navbar-brand\" href=${sanitizeHref(this.brandHref) ?? \"\"} aria-label=\"brand-link\">\n            <slot name=\"brand\"></slot>\n          </a>\n          <div class=\"navbar-body navbar-collapse\" id=${this.collapseId}>\n            <div class=\"navbar-nav navbar-nav-scroll\">\n              <slot\n                class=${classMap({ \"slot-desktop-only\": this.breakpointReached })}\n                @slotchange=${this._handleDefaultSlotChange}\n              ></slot>\n              ${this.breakpointReached\n                ? this._defaultSlotItems.map(\n                    (item, index) => html`<a\n                      class=\"appnav-menu-item\"\n                      role=\"button\"\n                      tabindex=\"0\"\n                      @click=${() => this._handleMobileItemClick(item)}\n                      @keydown=${(e: KeyboardEvent) => this._handleMenuItemKeydown(e, index)}\n                      >${item.label}</a\n                    >`\n                  )\n                : nothing}\n            </div>\n          </div>\n          <div\n            class=\"navbar-end ${this._hasProfileSlotItems || (this._hasDefaultSlotItems && this.breakpointReached)\n              ? \"\"\n              : \"slot-empty\"}\"\n          >\n            ${this._hasDefaultSlotItems && this.breakpointReached ? this._renderAppnavToggler() : nothing}\n            <slot name=\"profile\" @slotchange=${this._handleProfileSlotChange}></slot>\n          </div>\n        </div>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsAppnav;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-appnav.cjs.js","names":["NavElement","HasSlotController","appnavStyle","classMap","sanitizeHref","nothing","provide","AppnavBreakpointContext","state","AppnavExpandedContext","property"],"sources":["../../../../src/components/Appnav/sgds-appnav.ts"],"sourcesContent":["import { provide } from \"@lit/context\";\nimport { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport NavElement from \"../../base/nav-element\";\nimport { sanitizeHref } from \"../../utils/safeUrl\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { AppnavBreakpointContext, AppnavExpandedContext } from \"./appnav-context\";\nimport appnavStyle from \"./appnav.css\";\n\nexport type AppnavTone = \"brand\" | \"gradient-1\" | \"gradient-2\" | \"gradient-3\" | \"gradient-4\";\n\ninterface DefaultSlotItem {\n  label: string;\n  element: HTMLElement;\n}\n\n/**\n * @summary `SgdsAppnav` is a application navigation bar for operational apps. Accepts icon-buttons and profile in a fluid layout with collapse/expand behavior.\n *\n * @storyOrder 1\n *\n * @event sgds-show - Emitted on show. Only for collapsed menu.\n * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.\n * @event sgds-hide - Emitted on hide. Only for collapsed menu.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.\n *\n * @slot default - Elements in this slot collapse into the mobile menu as text items. Accepts sgds-icon-button and other elements. Uses ariaLabel as menu item text.\n * @slot start - Elements in this slot will be positioned to the left of the brand.\n * @slot brand - Brand slot of SgdsAppnav. Pass in brand logo img here\n * @slot profile - Profile slot. sgds-appnav-profile goes here. Positioned to the right of the toggler.\n *\n */\nexport class SgdsAppnav extends NavElement {\n  static styles = [...NavElement.styles, appnavStyle];\n\n  @provide({ context: AppnavBreakpointContext })\n  @state()\n  private _breakpointReached = false;\n\n  @provide({ context: AppnavExpandedContext })\n  @state()\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  private _expanded = false;\n\n  /** Sets the visual tone of the navigation bar */\n  @property({ type: String, reflect: true })\n  tone: AppnavTone = \"brand\";\n\n  /** Used only for SSR to indicate the presence of the `start` slot. */\n  @property({ type: Boolean }) hasStartSlot = false;\n\n  private readonly hasSlotController = new HasSlotController(this, \"start\");\n\n  /** @internal Whether the default slot has assigned elements */\n  @state()\n  private _hasDefaultSlotItems = false;\n\n  /** @internal Whether the profile slot has assigned elements */\n  @state()\n  private _hasProfileSlotItems = false;\n\n  /** @internal Stored default slot items for mobile menu rendering */\n  @state()\n  private _defaultSlotItems: DefaultSlotItem[] = [];\n\n  updated() {\n    if (!this.hasStartSlot) this.hasStartSlot = this.hasSlotController.test(\"start\");\n    this._expanded = this.expanded;\n  }\n\n  protected _onBreakpointReached(reached: boolean): void {\n    this._breakpointReached = reached;\n  }\n\n  protected _isBreakpointReached(): boolean {\n    return this._breakpointReached;\n  }\n\n  private _handleTogglerKeydown(e: KeyboardEvent) {\n    if (e.key === \"Tab\" && !e.shiftKey && this.expanded) {\n      e.preventDefault();\n      const firstItem = this.shadowRoot?.querySelector(\".appnav-menu-item\") as HTMLElement | null;\n      firstItem?.focus();\n    }\n  }\n\n  private _handleMenuItemKeydown(e: KeyboardEvent, index: number) {\n    if (e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      this._handleMobileItemClick(this._defaultSlotItems[index]);\n    } else if (e.key === \"Tab\" && e.shiftKey && index === 0) {\n      e.preventDefault();\n      this.header?.focus();\n    }\n  }\n\n  private _handleDefaultSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true }) as HTMLElement[];\n    this._hasDefaultSlotItems = childElements.length > 0;\n    this._defaultSlotItems = childElements\n      .filter(el => typeof el.tagName !== \"undefined\")\n      .map(el => {\n        const label = el.getAttribute(\"ariaLabel\") || el.getAttribute(\"aria-label\") || el.textContent?.trim() || \"\";\n        if (!label) {\n          console.warn(\n            `[sgds-appnav] Slotted element <${el.tagName.toLowerCase()}> has no ariaLabel, aria-label, or textContent. It will render as a blank item in the mobile menu. Add an ariaLabel for accessibility and mobile display.`,\n            el\n          );\n        }\n        return { label, element: el };\n      });\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  private _handleMobileItemClick(item: DefaultSlotItem) {\n    item.element.click();\n    this.hide();\n  }\n\n  private _renderAppnavToggler() {\n    return html`<sgds-icon-button\n      name=\"three-dots-vertical\"\n      variant=\"ghost\"\n      size=\"sm\"\n      tone=\"fixed-light\"\n      class=\"navbar-toggler\"\n      @click=${this._handleSummaryClick}\n      @keydown=${this._handleTogglerKeydown}\n      aria-controls=\"${this.collapseId}\"\n      aria-expanded=\"${this.expanded}\"\n      .ariaLabel=${\"Toggle navigation\"}\n    ></sgds-icon-button>`;\n  }\n\n  private _handleProfileSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    this._hasProfileSlotItems = childElements.length > 0;\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n      el.setAttribute(\"tone\", this.tone);\n    });\n  }\n\n  render() {\n    this.breakpointReached =\n      window.innerWidth <\n      (this.expand === \"always\"\n        ? -1\n        : this.expand === \"never\"\n        ? Infinity\n        : { sm: 512, md: 768, lg: 1024, xl: 1280, xxl: 1440 }[this.expand]);\n\n    return html`\n      <nav aria-label=\"App navigation\">\n        <div class=\"navbar ${this._expandClass()}\">\n          <slot name=\"start\" class=${classMap({ \"slot-empty\": !this.hasStartSlot })}></slot>\n          <a class=\"navbar-brand\" href=${sanitizeHref(this.brandHref) ?? \"\"} aria-label=\"brand-link\">\n            <slot name=\"brand\"></slot>\n          </a>\n          <div class=\"navbar-body navbar-collapse\" id=${this.collapseId}>\n            <div class=\"navbar-nav navbar-nav-scroll\">\n              <slot\n                class=${classMap({ \"slot-desktop-only\": this.breakpointReached })}\n                @slotchange=${this._handleDefaultSlotChange}\n              ></slot>\n              ${this.breakpointReached\n                ? this._defaultSlotItems.map(\n                    (item, index) => html`<a\n                      class=\"appnav-menu-item\"\n                      role=\"button\"\n                      tabindex=\"0\"\n                      @click=${() => this._handleMobileItemClick(item)}\n                      @keydown=${(e: KeyboardEvent) => this._handleMenuItemKeydown(e, index)}\n                      >${item.label}</a\n                    >`\n                  )\n                : nothing}\n            </div>\n          </div>\n          <div\n            class=\"navbar-end ${this._hasProfileSlotItems || (this._hasDefaultSlotItems && this.breakpointReached)\n              ? \"\"\n              : \"slot-empty\"}\"\n          >\n            ${this._hasDefaultSlotItems && this.breakpointReached ? this._renderAppnavToggler() : nothing}\n            <slot name=\"profile\" @slotchange=${this._handleProfileSlotChange}></slot>\n          </div>\n        </div>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsAppnav;\n"],"mappings":"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"}

package/react/components/Appnav/sgds-appnav.js

@@ -116,7 +116,7 @@ var SgdsAppnav = class extends NavElement {
 			xxl: 1440
 		}[this.expand]);
 		return html`
-      <nav>
+      <nav aria-label="App navigation">
         <div class="navbar ${this._expandClass()}">
           <slot name="start" class=${classMap({ "slot-empty": !this.hasStartSlot })}></slot>
           <a class="navbar-brand" href=${sanitizeHref(this.brandHref) ?? ""} aria-label="brand-link">

package/react/components/Appnav/sgds-appnav.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-appnav.js","names":["appnavStyle"],"sources":["../../../../src/components/Appnav/sgds-appnav.ts"],"sourcesContent":["import { provide } from \"@lit/context\";\nimport { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport NavElement from \"../../base/nav-element\";\nimport { sanitizeHref } from \"../../utils/safeUrl\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { AppnavBreakpointContext, AppnavExpandedContext } from \"./appnav-context\";\nimport appnavStyle from \"./appnav.css\";\n\nexport type AppnavTone = \"brand\" | \"gradient-1\" | \"gradient-2\" | \"gradient-3\" | \"gradient-4\";\n\ninterface DefaultSlotItem {\n  label: string;\n  element: HTMLElement;\n}\n\n/**\n * @summary `SgdsAppnav` is a application navigation bar for operational apps. Accepts icon-buttons and profile in a fluid layout with collapse/expand behavior.\n *\n * @storyOrder 1\n *\n * @event sgds-show - Emitted on show. Only for collapsed menu.\n * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.\n * @event sgds-hide - Emitted on hide. Only for collapsed menu.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.\n *\n * @slot default - Elements in this slot collapse into the mobile menu as text items. Accepts sgds-icon-button and other elements. Uses ariaLabel as menu item text.\n * @slot start - Elements in this slot will be positioned to the left of the brand.\n * @slot brand - Brand slot of SgdsAppnav. Pass in brand logo img here\n * @slot profile - Profile slot. sgds-appnav-profile goes here. Positioned to the right of the toggler.\n *\n */\nexport class SgdsAppnav extends NavElement {\n  static styles = [...NavElement.styles, appnavStyle];\n\n  @provide({ context: AppnavBreakpointContext })\n  @state()\n  private _breakpointReached = false;\n\n  @provide({ context: AppnavExpandedContext })\n  @state()\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  private _expanded = false;\n\n  /** Sets the visual tone of the navigation bar */\n  @property({ type: String, reflect: true })\n  tone: AppnavTone = \"brand\";\n\n  /** Used only for SSR to indicate the presence of the `start` slot. */\n  @property({ type: Boolean }) hasStartSlot = false;\n\n  private readonly hasSlotController = new HasSlotController(this, \"start\");\n\n  /** @internal Whether the default slot has assigned elements */\n  @state()\n  private _hasDefaultSlotItems = false;\n\n  /** @internal Whether the profile slot has assigned elements */\n  @state()\n  private _hasProfileSlotItems = false;\n\n  /** @internal Stored default slot items for mobile menu rendering */\n  @state()\n  private _defaultSlotItems: DefaultSlotItem[] = [];\n\n  updated() {\n    if (!this.hasStartSlot) this.hasStartSlot = this.hasSlotController.test(\"start\");\n    this._expanded = this.expanded;\n  }\n\n  protected _onBreakpointReached(reached: boolean): void {\n    this._breakpointReached = reached;\n  }\n\n  protected _isBreakpointReached(): boolean {\n    return this._breakpointReached;\n  }\n\n  private _handleTogglerKeydown(e: KeyboardEvent) {\n    if (e.key === \"Tab\" && !e.shiftKey && this.expanded) {\n      e.preventDefault();\n      const firstItem = this.shadowRoot?.querySelector(\".appnav-menu-item\") as HTMLElement | null;\n      firstItem?.focus();\n    }\n  }\n\n  private _handleMenuItemKeydown(e: KeyboardEvent, index: number) {\n    if (e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      this._handleMobileItemClick(this._defaultSlotItems[index]);\n    } else if (e.key === \"Tab\" && e.shiftKey && index === 0) {\n      e.preventDefault();\n      this.header?.focus();\n    }\n  }\n\n  private _handleDefaultSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true }) as HTMLElement[];\n    this._hasDefaultSlotItems = childElements.length > 0;\n    this._defaultSlotItems = childElements\n      .filter(el => typeof el.tagName !== \"undefined\")\n      .map(el => {\n        const label = el.getAttribute(\"ariaLabel\") || el.getAttribute(\"aria-label\") || el.textContent?.trim() || \"\";\n        if (!label) {\n          console.warn(\n            `[sgds-appnav] Slotted element <${el.tagName.toLowerCase()}> has no ariaLabel, aria-label, or textContent. It will render as a blank item in the mobile menu. Add an ariaLabel for accessibility and mobile display.`,\n            el\n          );\n        }\n        return { label, element: el };\n      });\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  private _handleMobileItemClick(item: DefaultSlotItem) {\n    item.element.click();\n    this.hide();\n  }\n\n  private _renderAppnavToggler() {\n    return html`<sgds-icon-button\n      name=\"three-dots-vertical\"\n      variant=\"ghost\"\n      size=\"sm\"\n      tone=\"fixed-light\"\n      class=\"navbar-toggler\"\n      @click=${this._handleSummaryClick}\n      @keydown=${this._handleTogglerKeydown}\n      aria-controls=\"${this.collapseId}\"\n      aria-expanded=\"${this.expanded}\"\n      .ariaLabel=${\"Toggle navigation\"}\n    ></sgds-icon-button>`;\n  }\n\n  private _handleProfileSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    this._hasProfileSlotItems = childElements.length > 0;\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n      el.setAttribute(\"tone\", this.tone);\n    });\n  }\n\n  render() {\n    this.breakpointReached =\n      window.innerWidth <\n      (this.expand === \"always\"\n        ? -1\n        : this.expand === \"never\"\n        ? Infinity\n        : { sm: 512, md: 768, lg: 1024, xl: 1280, xxl: 1440 }[this.expand]);\n\n    return html`\n      <nav>\n        <div class=\"navbar ${this._expandClass()}\">\n          <slot name=\"start\" class=${classMap({ \"slot-empty\": !this.hasStartSlot })}></slot>\n          <a class=\"navbar-brand\" href=${sanitizeHref(this.brandHref) ?? \"\"} aria-label=\"brand-link\">\n            <slot name=\"brand\"></slot>\n          </a>\n          <div class=\"navbar-body navbar-collapse\" id=${this.collapseId}>\n            <div class=\"navbar-nav navbar-nav-scroll\">\n              <slot\n                class=${classMap({ \"slot-desktop-only\": this.breakpointReached })}\n                @slotchange=${this._handleDefaultSlotChange}\n              ></slot>\n              ${this.breakpointReached\n                ? this._defaultSlotItems.map(\n                    (item, index) => html`<a\n                      class=\"appnav-menu-item\"\n                      role=\"button\"\n                      tabindex=\"0\"\n                      @click=${() => this._handleMobileItemClick(item)}\n                      @keydown=${(e: KeyboardEvent) => this._handleMenuItemKeydown(e, index)}\n                      >${item.label}</a\n                    >`\n                  )\n                : nothing}\n            </div>\n          </div>\n          <div\n            class=\"navbar-end ${this._hasProfileSlotItems || (this._hasDefaultSlotItems && this.breakpointReached)\n              ? \"\"\n              : \"slot-empty\"}\"\n          >\n            ${this._hasDefaultSlotItems && this.breakpointReached ? this._renderAppnavToggler() : nothing}\n            <slot name=\"profile\" @slotchange=${this._handleProfileSlotChange}></slot>\n          </div>\n        </div>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsAppnav;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,IAAa,aAAb,cAAgC,WAAW;;;EAKZ,KAAA,qBAAA;EAKT,KAAA,YAAA;EAID,KAAA,OAAA;EAGyB,KAAA,eAAA;EAEP,KAAA,oBAAA,IAAI,kBAAkB,MAAM,OAAO;EAIzC,KAAA,uBAAA;EAIA,KAAA,uBAAA;EAIgB,KAAA,oBAAA,CAAC;;;EA9BhC,KAAA,SAAA,CAAC,GAAG,WAAW,QAAQA,QAAW;;CAgClD,UAAU;EACR,IAAI,CAAC,KAAK,cAAc,KAAK,eAAe,KAAK,kBAAkB,KAAK,OAAO;EAC/E,KAAK,YAAY,KAAK;CACxB;CAEA,qBAA+B,SAAwB;EACrD,KAAK,qBAAqB;CAC5B;CAEA,uBAA0C;EACxC,OAAO,KAAK;CACd;CAEA,sBAA8B,GAAkB;EAC9C,IAAI,EAAE,QAAQ,SAAS,CAAC,EAAE,YAAY,KAAK,UAAU;GACnD,EAAE,eAAe;GAEjB,CADkB,KAAK,YAAY,cAAc,mBAAmB,EAAA,EACzD,MAAM;EACnB;CACF;CAEA,uBAA+B,GAAkB,OAAe;EAC9D,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;GACtC,EAAE,eAAe;GACjB,KAAK,uBAAuB,KAAK,kBAAkB,MAAM;EAC3D,OAAO,IAAI,EAAE,QAAQ,SAAS,EAAE,YAAY,UAAU,GAAG;GACvD,EAAE,eAAe;GACjB,KAAK,QAAQ,MAAM;EACrB;CACF;CAEA,yBAAiC,GAAU;EACzC,MAAM,gBAAiB,EAAE,OAA2B,iBAAiB,EAAE,SAAS,KAAK,CAAC;EACtF,KAAK,uBAAuB,cAAc,SAAS;EACnD,KAAK,oBAAoB,cACtB,QAAO,OAAM,OAAO,GAAG,YAAY,WAAW,CAAC,CAC/C,KAAI,OAAM;GACT,MAAM,QAAQ,GAAG,aAAa,WAAW,KAAK,GAAG,aAAa,YAAY,KAAK,GAAG,aAAa,KAAK,KAAK;GACzG,IAAI,CAAC,OACH,QAAQ,KACN,kCAAkC,GAAG,QAAQ,YAAY,EAAE,4JAC3D,EACF;GAEF,OAAO;IAAE;IAAO,SAAS;GAAG;EAC9B,CAAC;EACH,cAAc,SAAQ,OAAM;GAC1B,GAAG,aAAa,UAAU,KAAK,MAAM;EACvC,CAAC;CACH;CAEA,uBAA+B,MAAuB;EACpD,KAAK,QAAQ,MAAM;EACnB,KAAK,KAAK;CACZ;CAEA,uBAA+B;EAC7B,OAAO,IAAI;;;;;;eAMA,KAAK,oBAAoB;iBACvB,KAAK,sBAAsB;uBACrB,KAAK,WAAW;uBAChB,KAAK,SAAS;mBAClB,oBAAoB;;CAErC;CAEA,yBAAiC,GAAU;EACzC,MAAM,gBAAiB,EAAE,OAA2B,iBAAiB,EAAE,SAAS,KAAK,CAAC;EACtF,KAAK,uBAAuB,cAAc,SAAS;EACnD,cAAc,SAAQ,OAAM;GAC1B,GAAG,aAAa,UAAU,KAAK,MAAM;GACrC,GAAG,aAAa,QAAQ,KAAK,IAAI;EACnC,CAAC;CACH;CAEA,SAAS;EACP,KAAK,oBACH,OAAO,cACN,KAAK,WAAW,WACb,KACA,KAAK,WAAW,UAChB,WACA;GAAE,IAAI;GAAK,IAAI;GAAK,IAAI;GAAM,IAAI;GAAM,KAAK;EAAK,EAAE,KAAK;EAE/D,OAAO,IAAI;;6BAEc,KAAK,aAAa,EAAE;qCACZ,SAAS,EAAE,cAAc,CAAC,KAAK,aAAa,CAAC,EAAE;yCAC3C,aAAa,KAAK,SAAS,KAAK,GAAG;;;wDAGpB,KAAK,WAAW;;;wBAGhD,SAAS,EAAE,qBAAqB,KAAK,kBAAkB,CAAC,EAAE;8BACpD,KAAK,yBAAyB;;gBAE5C,KAAK,oBACH,KAAK,kBAAkB,KACpB,MAAM,UAAU,IAAI;;;;qCAIJ,KAAK,uBAAuB,IAAI,EAAE;kCACrC,MAAqB,KAAK,uBAAuB,GAAG,KAAK,EAAE;yBACpE,KAAK,MAAM;sBAElB,IACA,QAAQ;;;;gCAIM,KAAK,wBAAyB,KAAK,wBAAwB,KAAK,oBAChF,KACA,aAAa;;cAEf,KAAK,wBAAwB,KAAK,oBAAoB,KAAK,qBAAqB,IAAI,QAAQ;+CAC3D,KAAK,yBAAyB;;;;;CAK3E;AACF;AA9JG,WAAA,CAAA,QAAQ,EAAE,SAAS,wBAAwB,CAAC,GAC5C,MAAM,CAAA,GAAA,WAAA,WAAA,sBAAA,KAAA,CAAA;AAGN,WAAA,CAAA,QAAQ,EAAE,SAAS,sBAAsB,CAAC,GAC1C,MAAM,CAAA,GAAA,WAAA,WAAA,aAAA,KAAA,CAAA;AAKN,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,WAAA,WAAA,QAAA,KAAA,CAAA;AAIxC,WAAA,CAAA,SAAS,EAAE,MAAM,QAAQ,CAAC,CAAA,GAAA,WAAA,WAAA,gBAAA,KAAA,CAAA;AAK1B,WAAA,CAAA,MAAM,CAAA,GAAA,WAAA,WAAA,wBAAA,KAAA,CAAA;AAIN,WAAA,CAAA,MAAM,CAAA,GAAA,WAAA,WAAA,wBAAA,KAAA,CAAA;AAIN,WAAA,CAAA,MAAM,CAAA,GAAA,WAAA,WAAA,qBAAA,KAAA,CAAA"}
+{"version":3,"file":"sgds-appnav.js","names":["appnavStyle"],"sources":["../../../../src/components/Appnav/sgds-appnav.ts"],"sourcesContent":["import { provide } from \"@lit/context\";\nimport { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport NavElement from \"../../base/nav-element\";\nimport { sanitizeHref } from \"../../utils/safeUrl\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { AppnavBreakpointContext, AppnavExpandedContext } from \"./appnav-context\";\nimport appnavStyle from \"./appnav.css\";\n\nexport type AppnavTone = \"brand\" | \"gradient-1\" | \"gradient-2\" | \"gradient-3\" | \"gradient-4\";\n\ninterface DefaultSlotItem {\n  label: string;\n  element: HTMLElement;\n}\n\n/**\n * @summary `SgdsAppnav` is a application navigation bar for operational apps. Accepts icon-buttons and profile in a fluid layout with collapse/expand behavior.\n *\n * @storyOrder 1\n *\n * @event sgds-show - Emitted on show. Only for collapsed menu.\n * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.\n * @event sgds-hide - Emitted on hide. Only for collapsed menu.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.\n *\n * @slot default - Elements in this slot collapse into the mobile menu as text items. Accepts sgds-icon-button and other elements. Uses ariaLabel as menu item text.\n * @slot start - Elements in this slot will be positioned to the left of the brand.\n * @slot brand - Brand slot of SgdsAppnav. Pass in brand logo img here\n * @slot profile - Profile slot. sgds-appnav-profile goes here. Positioned to the right of the toggler.\n *\n */\nexport class SgdsAppnav extends NavElement {\n  static styles = [...NavElement.styles, appnavStyle];\n\n  @provide({ context: AppnavBreakpointContext })\n  @state()\n  private _breakpointReached = false;\n\n  @provide({ context: AppnavExpandedContext })\n  @state()\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  private _expanded = false;\n\n  /** Sets the visual tone of the navigation bar */\n  @property({ type: String, reflect: true })\n  tone: AppnavTone = \"brand\";\n\n  /** Used only for SSR to indicate the presence of the `start` slot. */\n  @property({ type: Boolean }) hasStartSlot = false;\n\n  private readonly hasSlotController = new HasSlotController(this, \"start\");\n\n  /** @internal Whether the default slot has assigned elements */\n  @state()\n  private _hasDefaultSlotItems = false;\n\n  /** @internal Whether the profile slot has assigned elements */\n  @state()\n  private _hasProfileSlotItems = false;\n\n  /** @internal Stored default slot items for mobile menu rendering */\n  @state()\n  private _defaultSlotItems: DefaultSlotItem[] = [];\n\n  updated() {\n    if (!this.hasStartSlot) this.hasStartSlot = this.hasSlotController.test(\"start\");\n    this._expanded = this.expanded;\n  }\n\n  protected _onBreakpointReached(reached: boolean): void {\n    this._breakpointReached = reached;\n  }\n\n  protected _isBreakpointReached(): boolean {\n    return this._breakpointReached;\n  }\n\n  private _handleTogglerKeydown(e: KeyboardEvent) {\n    if (e.key === \"Tab\" && !e.shiftKey && this.expanded) {\n      e.preventDefault();\n      const firstItem = this.shadowRoot?.querySelector(\".appnav-menu-item\") as HTMLElement | null;\n      firstItem?.focus();\n    }\n  }\n\n  private _handleMenuItemKeydown(e: KeyboardEvent, index: number) {\n    if (e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      this._handleMobileItemClick(this._defaultSlotItems[index]);\n    } else if (e.key === \"Tab\" && e.shiftKey && index === 0) {\n      e.preventDefault();\n      this.header?.focus();\n    }\n  }\n\n  private _handleDefaultSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true }) as HTMLElement[];\n    this._hasDefaultSlotItems = childElements.length > 0;\n    this._defaultSlotItems = childElements\n      .filter(el => typeof el.tagName !== \"undefined\")\n      .map(el => {\n        const label = el.getAttribute(\"ariaLabel\") || el.getAttribute(\"aria-label\") || el.textContent?.trim() || \"\";\n        if (!label) {\n          console.warn(\n            `[sgds-appnav] Slotted element <${el.tagName.toLowerCase()}> has no ariaLabel, aria-label, or textContent. It will render as a blank item in the mobile menu. Add an ariaLabel for accessibility and mobile display.`,\n            el\n          );\n        }\n        return { label, element: el };\n      });\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  private _handleMobileItemClick(item: DefaultSlotItem) {\n    item.element.click();\n    this.hide();\n  }\n\n  private _renderAppnavToggler() {\n    return html`<sgds-icon-button\n      name=\"three-dots-vertical\"\n      variant=\"ghost\"\n      size=\"sm\"\n      tone=\"fixed-light\"\n      class=\"navbar-toggler\"\n      @click=${this._handleSummaryClick}\n      @keydown=${this._handleTogglerKeydown}\n      aria-controls=\"${this.collapseId}\"\n      aria-expanded=\"${this.expanded}\"\n      .ariaLabel=${\"Toggle navigation\"}\n    ></sgds-icon-button>`;\n  }\n\n  private _handleProfileSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    this._hasProfileSlotItems = childElements.length > 0;\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n      el.setAttribute(\"tone\", this.tone);\n    });\n  }\n\n  render() {\n    this.breakpointReached =\n      window.innerWidth <\n      (this.expand === \"always\"\n        ? -1\n        : this.expand === \"never\"\n        ? Infinity\n        : { sm: 512, md: 768, lg: 1024, xl: 1280, xxl: 1440 }[this.expand]);\n\n    return html`\n      <nav aria-label=\"App navigation\">\n        <div class=\"navbar ${this._expandClass()}\">\n          <slot name=\"start\" class=${classMap({ \"slot-empty\": !this.hasStartSlot })}></slot>\n          <a class=\"navbar-brand\" href=${sanitizeHref(this.brandHref) ?? \"\"} aria-label=\"brand-link\">\n            <slot name=\"brand\"></slot>\n          </a>\n          <div class=\"navbar-body navbar-collapse\" id=${this.collapseId}>\n            <div class=\"navbar-nav navbar-nav-scroll\">\n              <slot\n                class=${classMap({ \"slot-desktop-only\": this.breakpointReached })}\n                @slotchange=${this._handleDefaultSlotChange}\n              ></slot>\n              ${this.breakpointReached\n                ? this._defaultSlotItems.map(\n                    (item, index) => html`<a\n                      class=\"appnav-menu-item\"\n                      role=\"button\"\n                      tabindex=\"0\"\n                      @click=${() => this._handleMobileItemClick(item)}\n                      @keydown=${(e: KeyboardEvent) => this._handleMenuItemKeydown(e, index)}\n                      >${item.label}</a\n                    >`\n                  )\n                : nothing}\n            </div>\n          </div>\n          <div\n            class=\"navbar-end ${this._hasProfileSlotItems || (this._hasDefaultSlotItems && this.breakpointReached)\n              ? \"\"\n              : \"slot-empty\"}\"\n          >\n            ${this._hasDefaultSlotItems && this.breakpointReached ? this._renderAppnavToggler() : nothing}\n            <slot name=\"profile\" @slotchange=${this._handleProfileSlotChange}></slot>\n          </div>\n        </div>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsAppnav;\n"],"mappings":"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"}

package/react/components/Breadcrumb/sgds-breadcrumb.cjs.js

@@ -63,11 +63,11 @@ var SgdsBreadcrumb = class extends require_sgds_element.default {
 	}
 	render() {
 		return lit_static_html_js.html`
-      <div aria-label=${(0, lit_directives_if_defined_js.ifDefined)(this.ariaLabel)}>
+      <nav aria-label=${(0, lit_directives_if_defined_js.ifDefined)(this.ariaLabel)}>
         <div class="breadcrumb">
           <slot @slotchange=${this._handleSlotChange}></slot>
         </div>
-      </div>
+      </nav>
     `;
 	}
 };

package/react/components/Breadcrumb/sgds-breadcrumb.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-breadcrumb.cjs.js","names":["SgdsElement","breadcrumbStyle","SgdsOverflowMenu","ifDefined","property","query"],"sources":["../../../../src/components/Breadcrumb/sgds-breadcrumb.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsOverflowMenu from \"../OverflowMenu/sgds-overflow-menu\";\nimport breadcrumbStyle from \"./breadcrumb.css\";\nimport type SgdsBreadcrumbItem from \"./sgds-breadcrumb-item\";\n/**\n * @summary Breadcrumbs help users to navigate and understand where they are on the current website or service.\n *\n * @slot default - The slot to pass in custom elements of `SgdsBreadcrumbItems`.\n *\n */\nexport class SgdsBreadcrumb extends SgdsElement {\n  static styles = [...SgdsElement.styles, breadcrumbStyle];\n  static dependencies = {\n    \"sgds-overflow-menu\": SgdsOverflowMenu\n  };\n  /** The aria-label of nav element within breadcrumb component. */\n  @property({ type: String }) ariaLabel = \"breadcrumb\";\n\n  /**@internal */\n  @query(\"slot\") defaultSlot: HTMLSlotElement;\n  /**\n   * creates `<sgds-breadcrumb-item>\n   *            <sgds-overflow-menu>\n   *              <sgds-dropdown-item></sgds-dropdown-item>\n   *               ...\n   *            </sgds-overflow-menu>\n   *          <sgds-breadcrumb-item>`\n   */\n  private _replaceExcessItemsWithDropdown(items: SgdsBreadcrumbItem[]) {\n    const breadcrumbItem = document.createElement(\"sgds-breadcrumb-item\");\n    const overflowMenu = document.createElement(\"sgds-overflow-menu\");\n    overflowMenu.setAttribute(\"aria-haspopup\", \"menu\");\n    overflowMenu.setAttribute(\"size\", \"sm\");\n    const mapItems = items.filter((item, index) => {\n      if (index > 0 && index < items.length - 2) {\n        const clonedAnchor = item.querySelector(\"a\");\n        const clonedAnchorNode = clonedAnchor.cloneNode(true);\n        const dropdownItem = document.createElement(\"sgds-dropdown-item\");\n        dropdownItem.appendChild(clonedAnchorNode);\n        overflowMenu.appendChild(dropdownItem);\n        return;\n      } else {\n        return item;\n      }\n    });\n    breadcrumbItem.classList.add(\"overflow-menu\");\n    breadcrumbItem.appendChild(overflowMenu);\n    mapItems.splice(1, 0, breadcrumbItem);\n\n    this.defaultSlot.replaceWith(...mapItems);\n  }\n\n  private _handleSlotChange(e: Event) {\n    const items = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(\n        (item: SgdsBreadcrumbItem) => item.tagName.toLowerCase() === \"sgds-breadcrumb-item\"\n      ) as SgdsBreadcrumbItem[];\n    items.forEach((item, index) => {\n      if (index === items.length - 1) {\n        item.setAttribute(\"aria-current\", \"page\");\n        item.active = true;\n      } else {\n        item.removeAttribute(\"aria-current\");\n      }\n    });\n\n    if (items.length >= 5) {\n      this._replaceExcessItemsWithDropdown(items);\n    }\n  }\n\n  render() {\n    return html`\n      <div aria-label=${ifDefined(this.ariaLabel)}>\n        <div class=\"breadcrumb\">\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsBreadcrumb;\n"],"mappings":";;;;;;;;;;;;;;;AAaA,IAAa,iBAAb,cAAoCA,qBAAAA,QAAY;;;EAMN,KAAA,YAAA;;;EALxB,KAAA,SAAA,CAAC,GAAGA,qBAAAA,QAAY,QAAQC,mBAAAA,OAAe;;;EACjC,KAAA,eAAA,EACpB,sBAAsBC,2BAAAA,iBACxB;;;;;;;;;;CAcA,gCAAwC,OAA6B;EACnE,MAAM,iBAAiB,SAAS,cAAc,sBAAsB;EACpE,MAAM,eAAe,SAAS,cAAc,oBAAoB;EAChE,aAAa,aAAa,iBAAiB,MAAM;EACjD,aAAa,aAAa,QAAQ,IAAI;EACtC,MAAM,WAAW,MAAM,QAAQ,MAAM,UAAU;GAC7C,IAAI,QAAQ,KAAK,QAAQ,MAAM,SAAS,GAAG;IAEzC,MAAM,mBADe,KAAK,cAAc,GACJ,CAAC,CAAC,UAAU,IAAI;IACpD,MAAM,eAAe,SAAS,cAAc,oBAAoB;IAChE,aAAa,YAAY,gBAAgB;IACzC,aAAa,YAAY,YAAY;IACrC;GACF,OACE,OAAO;EAEX,CAAC;EACD,eAAe,UAAU,IAAI,eAAe;EAC5C,eAAe,YAAY,YAAY;EACvC,SAAS,OAAO,GAAG,GAAG,cAAc;EAEpC,KAAK,YAAY,YAAY,GAAG,QAAQ;CAC1C;CAEA,kBAA0B,GAAU;EAClC,MAAM,QAAS,EAAE,OACd,iBAAiB,EAAE,SAAS,KAAK,CAAC,CAAC,CACnC,QACE,SAA6B,KAAK,QAAQ,YAAY,MAAM,sBAC/D;EACF,MAAM,SAAS,MAAM,UAAU;GAC7B,IAAI,UAAU,MAAM,SAAS,GAAG;IAC9B,KAAK,aAAa,gBAAgB,MAAM;IACxC,KAAK,SAAS;GAChB,OACE,KAAK,gBAAgB,cAAc;EAEvC,CAAC;EAED,IAAI,MAAM,UAAU,GAClB,KAAK,gCAAgC,KAAK;CAE9C;CAEA,SAAS;EACP,OAAO,mBAAA,IAAI;yBACSC,GAAAA,6BAAAA,UAAAA,CAAU,KAAK,SAAS,EAAE;;8BAEpB,KAAK,kBAAkB;;;;CAInD;AACF;AAjEGC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,eAAA,WAAA,aAAA,KAAA,CAAA;AAGzBC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,MAAAA,CAAM,MAAM,CAAA,GAAA,eAAA,WAAA,eAAA,KAAA,CAAA"}
+{"version":3,"file":"sgds-breadcrumb.cjs.js","names":["SgdsElement","breadcrumbStyle","SgdsOverflowMenu","ifDefined","property","query"],"sources":["../../../../src/components/Breadcrumb/sgds-breadcrumb.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsOverflowMenu from \"../OverflowMenu/sgds-overflow-menu\";\nimport breadcrumbStyle from \"./breadcrumb.css\";\nimport type SgdsBreadcrumbItem from \"./sgds-breadcrumb-item\";\n/**\n * @summary Breadcrumbs help users to navigate and understand where they are on the current website or service.\n *\n * @slot default - The slot to pass in custom elements of `SgdsBreadcrumbItems`.\n *\n */\nexport class SgdsBreadcrumb extends SgdsElement {\n  static styles = [...SgdsElement.styles, breadcrumbStyle];\n  static dependencies = {\n    \"sgds-overflow-menu\": SgdsOverflowMenu\n  };\n  /** The aria-label of nav element within breadcrumb component. */\n  @property({ type: String }) ariaLabel = \"breadcrumb\";\n\n  /**@internal */\n  @query(\"slot\") defaultSlot: HTMLSlotElement;\n  /**\n   * creates `<sgds-breadcrumb-item>\n   *            <sgds-overflow-menu>\n   *              <sgds-dropdown-item></sgds-dropdown-item>\n   *               ...\n   *            </sgds-overflow-menu>\n   *          <sgds-breadcrumb-item>`\n   */\n  private _replaceExcessItemsWithDropdown(items: SgdsBreadcrumbItem[]) {\n    const breadcrumbItem = document.createElement(\"sgds-breadcrumb-item\");\n    const overflowMenu = document.createElement(\"sgds-overflow-menu\");\n    overflowMenu.setAttribute(\"aria-haspopup\", \"menu\");\n    overflowMenu.setAttribute(\"size\", \"sm\");\n    const mapItems = items.filter((item, index) => {\n      if (index > 0 && index < items.length - 2) {\n        const clonedAnchor = item.querySelector(\"a\");\n        const clonedAnchorNode = clonedAnchor.cloneNode(true);\n        const dropdownItem = document.createElement(\"sgds-dropdown-item\");\n        dropdownItem.appendChild(clonedAnchorNode);\n        overflowMenu.appendChild(dropdownItem);\n        return;\n      } else {\n        return item;\n      }\n    });\n    breadcrumbItem.classList.add(\"overflow-menu\");\n    breadcrumbItem.appendChild(overflowMenu);\n    mapItems.splice(1, 0, breadcrumbItem);\n\n    this.defaultSlot.replaceWith(...mapItems);\n  }\n\n  private _handleSlotChange(e: Event) {\n    const items = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(\n        (item: SgdsBreadcrumbItem) => item.tagName.toLowerCase() === \"sgds-breadcrumb-item\"\n      ) as SgdsBreadcrumbItem[];\n    items.forEach((item, index) => {\n      if (index === items.length - 1) {\n        item.setAttribute(\"aria-current\", \"page\");\n        item.active = true;\n      } else {\n        item.removeAttribute(\"aria-current\");\n      }\n    });\n\n    if (items.length >= 5) {\n      this._replaceExcessItemsWithDropdown(items);\n    }\n  }\n\n  render() {\n    return html`\n      <nav aria-label=${ifDefined(this.ariaLabel)}>\n        <div class=\"breadcrumb\">\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsBreadcrumb;\n"],"mappings":";;;;;;;;;;;;;;;AAaA,IAAa,iBAAb,cAAoCA,qBAAAA,QAAY;;;EAMN,KAAA,YAAA;;;EALxB,KAAA,SAAA,CAAC,GAAGA,qBAAAA,QAAY,QAAQC,mBAAAA,OAAe;;;EACjC,KAAA,eAAA,EACpB,sBAAsBC,2BAAAA,iBACxB;;;;;;;;;;CAcA,gCAAwC,OAA6B;EACnE,MAAM,iBAAiB,SAAS,cAAc,sBAAsB;EACpE,MAAM,eAAe,SAAS,cAAc,oBAAoB;EAChE,aAAa,aAAa,iBAAiB,MAAM;EACjD,aAAa,aAAa,QAAQ,IAAI;EACtC,MAAM,WAAW,MAAM,QAAQ,MAAM,UAAU;GAC7C,IAAI,QAAQ,KAAK,QAAQ,MAAM,SAAS,GAAG;IAEzC,MAAM,mBADe,KAAK,cAAc,GACJ,CAAC,CAAC,UAAU,IAAI;IACpD,MAAM,eAAe,SAAS,cAAc,oBAAoB;IAChE,aAAa,YAAY,gBAAgB;IACzC,aAAa,YAAY,YAAY;IACrC;GACF,OACE,OAAO;EAEX,CAAC;EACD,eAAe,UAAU,IAAI,eAAe;EAC5C,eAAe,YAAY,YAAY;EACvC,SAAS,OAAO,GAAG,GAAG,cAAc;EAEpC,KAAK,YAAY,YAAY,GAAG,QAAQ;CAC1C;CAEA,kBAA0B,GAAU;EAClC,MAAM,QAAS,EAAE,OACd,iBAAiB,EAAE,SAAS,KAAK,CAAC,CAAC,CACnC,QACE,SAA6B,KAAK,QAAQ,YAAY,MAAM,sBAC/D;EACF,MAAM,SAAS,MAAM,UAAU;GAC7B,IAAI,UAAU,MAAM,SAAS,GAAG;IAC9B,KAAK,aAAa,gBAAgB,MAAM;IACxC,KAAK,SAAS;GAChB,OACE,KAAK,gBAAgB,cAAc;EAEvC,CAAC;EAED,IAAI,MAAM,UAAU,GAClB,KAAK,gCAAgC,KAAK;CAE9C;CAEA,SAAS;EACP,OAAO,mBAAA,IAAI;yBACSC,GAAAA,6BAAAA,UAAAA,CAAU,KAAK,SAAS,EAAE;;8BAEpB,KAAK,kBAAkB;;;;CAInD;AACF;AAjEGC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,eAAA,WAAA,aAAA,KAAA,CAAA;AAGzBC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,MAAAA,CAAM,MAAM,CAAA,GAAA,eAAA,WAAA,eAAA,KAAA,CAAA"}

package/react/components/Breadcrumb/sgds-breadcrumb.js

@@ -63,11 +63,11 @@ var SgdsBreadcrumb = class extends SgdsElement {
 	}
 	render() {
 		return html`
-      <div aria-label=${ifDefined(this.ariaLabel)}>
+      <nav aria-label=${ifDefined(this.ariaLabel)}>
         <div class="breadcrumb">
           <slot @slotchange=${this._handleSlotChange}></slot>
         </div>
-      </div>
+      </nav>
     `;
 	}
 };

package/react/components/Breadcrumb/sgds-breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-breadcrumb.js","names":["breadcrumbStyle"],"sources":["../../../../src/components/Breadcrumb/sgds-breadcrumb.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsOverflowMenu from \"../OverflowMenu/sgds-overflow-menu\";\nimport breadcrumbStyle from \"./breadcrumb.css\";\nimport type SgdsBreadcrumbItem from \"./sgds-breadcrumb-item\";\n/**\n * @summary Breadcrumbs help users to navigate and understand where they are on the current website or service.\n *\n * @slot default - The slot to pass in custom elements of `SgdsBreadcrumbItems`.\n *\n */\nexport class SgdsBreadcrumb extends SgdsElement {\n  static styles = [...SgdsElement.styles, breadcrumbStyle];\n  static dependencies = {\n    \"sgds-overflow-menu\": SgdsOverflowMenu\n  };\n  /** The aria-label of nav element within breadcrumb component. */\n  @property({ type: String }) ariaLabel = \"breadcrumb\";\n\n  /**@internal */\n  @query(\"slot\") defaultSlot: HTMLSlotElement;\n  /**\n   * creates `<sgds-breadcrumb-item>\n   *            <sgds-overflow-menu>\n   *              <sgds-dropdown-item></sgds-dropdown-item>\n   *               ...\n   *            </sgds-overflow-menu>\n   *          <sgds-breadcrumb-item>`\n   */\n  private _replaceExcessItemsWithDropdown(items: SgdsBreadcrumbItem[]) {\n    const breadcrumbItem = document.createElement(\"sgds-breadcrumb-item\");\n    const overflowMenu = document.createElement(\"sgds-overflow-menu\");\n    overflowMenu.setAttribute(\"aria-haspopup\", \"menu\");\n    overflowMenu.setAttribute(\"size\", \"sm\");\n    const mapItems = items.filter((item, index) => {\n      if (index > 0 && index < items.length - 2) {\n        const clonedAnchor = item.querySelector(\"a\");\n        const clonedAnchorNode = clonedAnchor.cloneNode(true);\n        const dropdownItem = document.createElement(\"sgds-dropdown-item\");\n        dropdownItem.appendChild(clonedAnchorNode);\n        overflowMenu.appendChild(dropdownItem);\n        return;\n      } else {\n        return item;\n      }\n    });\n    breadcrumbItem.classList.add(\"overflow-menu\");\n    breadcrumbItem.appendChild(overflowMenu);\n    mapItems.splice(1, 0, breadcrumbItem);\n\n    this.defaultSlot.replaceWith(...mapItems);\n  }\n\n  private _handleSlotChange(e: Event) {\n    const items = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(\n        (item: SgdsBreadcrumbItem) => item.tagName.toLowerCase() === \"sgds-breadcrumb-item\"\n      ) as SgdsBreadcrumbItem[];\n    items.forEach((item, index) => {\n      if (index === items.length - 1) {\n        item.setAttribute(\"aria-current\", \"page\");\n        item.active = true;\n      } else {\n        item.removeAttribute(\"aria-current\");\n      }\n    });\n\n    if (items.length >= 5) {\n      this._replaceExcessItemsWithDropdown(items);\n    }\n  }\n\n  render() {\n    return html`\n      <div aria-label=${ifDefined(this.ariaLabel)}>\n        <div class=\"breadcrumb\">\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsBreadcrumb;\n"],"mappings":";;;;;;;;;;;;;;;AAaA,IAAa,iBAAb,cAAoC,YAAY;;;EAMN,KAAA,YAAA;;;EALxB,KAAA,SAAA,CAAC,GAAG,YAAY,QAAQA,QAAe;;;EACjC,KAAA,eAAA,EACpB,sBAAsB,iBACxB;;;;;;;;;;CAcA,gCAAwC,OAA6B;EACnE,MAAM,iBAAiB,SAAS,cAAc,sBAAsB;EACpE,MAAM,eAAe,SAAS,cAAc,oBAAoB;EAChE,aAAa,aAAa,iBAAiB,MAAM;EACjD,aAAa,aAAa,QAAQ,IAAI;EACtC,MAAM,WAAW,MAAM,QAAQ,MAAM,UAAU;GAC7C,IAAI,QAAQ,KAAK,QAAQ,MAAM,SAAS,GAAG;IAEzC,MAAM,mBADe,KAAK,cAAc,GACJ,CAAC,CAAC,UAAU,IAAI;IACpD,MAAM,eAAe,SAAS,cAAc,oBAAoB;IAChE,aAAa,YAAY,gBAAgB;IACzC,aAAa,YAAY,YAAY;IACrC;GACF,OACE,OAAO;EAEX,CAAC;EACD,eAAe,UAAU,IAAI,eAAe;EAC5C,eAAe,YAAY,YAAY;EACvC,SAAS,OAAO,GAAG,GAAG,cAAc;EAEpC,KAAK,YAAY,YAAY,GAAG,QAAQ;CAC1C;CAEA,kBAA0B,GAAU;EAClC,MAAM,QAAS,EAAE,OACd,iBAAiB,EAAE,SAAS,KAAK,CAAC,CAAC,CACnC,QACE,SAA6B,KAAK,QAAQ,YAAY,MAAM,sBAC/D;EACF,MAAM,SAAS,MAAM,UAAU;GAC7B,IAAI,UAAU,MAAM,SAAS,GAAG;IAC9B,KAAK,aAAa,gBAAgB,MAAM;IACxC,KAAK,SAAS;GAChB,OACE,KAAK,gBAAgB,cAAc;EAEvC,CAAC;EAED,IAAI,MAAM,UAAU,GAClB,KAAK,gCAAgC,KAAK;CAE9C;CAEA,SAAS;EACP,OAAO,IAAI;wBACS,UAAU,KAAK,SAAS,EAAE;;8BAEpB,KAAK,kBAAkB;;;;CAInD;AACF;AAjEG,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,eAAA,WAAA,aAAA,KAAA,CAAA;AAGzB,WAAA,CAAA,MAAM,MAAM,CAAA,GAAA,eAAA,WAAA,eAAA,KAAA,CAAA"}
+{"version":3,"file":"sgds-breadcrumb.js","names":["breadcrumbStyle"],"sources":["../../../../src/components/Breadcrumb/sgds-breadcrumb.ts"],"sourcesContent":["import { property, query } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { html } from \"lit/static-html.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsOverflowMenu from \"../OverflowMenu/sgds-overflow-menu\";\nimport breadcrumbStyle from \"./breadcrumb.css\";\nimport type SgdsBreadcrumbItem from \"./sgds-breadcrumb-item\";\n/**\n * @summary Breadcrumbs help users to navigate and understand where they are on the current website or service.\n *\n * @slot default - The slot to pass in custom elements of `SgdsBreadcrumbItems`.\n *\n */\nexport class SgdsBreadcrumb extends SgdsElement {\n  static styles = [...SgdsElement.styles, breadcrumbStyle];\n  static dependencies = {\n    \"sgds-overflow-menu\": SgdsOverflowMenu\n  };\n  /** The aria-label of nav element within breadcrumb component. */\n  @property({ type: String }) ariaLabel = \"breadcrumb\";\n\n  /**@internal */\n  @query(\"slot\") defaultSlot: HTMLSlotElement;\n  /**\n   * creates `<sgds-breadcrumb-item>\n   *            <sgds-overflow-menu>\n   *              <sgds-dropdown-item></sgds-dropdown-item>\n   *               ...\n   *            </sgds-overflow-menu>\n   *          <sgds-breadcrumb-item>`\n   */\n  private _replaceExcessItemsWithDropdown(items: SgdsBreadcrumbItem[]) {\n    const breadcrumbItem = document.createElement(\"sgds-breadcrumb-item\");\n    const overflowMenu = document.createElement(\"sgds-overflow-menu\");\n    overflowMenu.setAttribute(\"aria-haspopup\", \"menu\");\n    overflowMenu.setAttribute(\"size\", \"sm\");\n    const mapItems = items.filter((item, index) => {\n      if (index > 0 && index < items.length - 2) {\n        const clonedAnchor = item.querySelector(\"a\");\n        const clonedAnchorNode = clonedAnchor.cloneNode(true);\n        const dropdownItem = document.createElement(\"sgds-dropdown-item\");\n        dropdownItem.appendChild(clonedAnchorNode);\n        overflowMenu.appendChild(dropdownItem);\n        return;\n      } else {\n        return item;\n      }\n    });\n    breadcrumbItem.classList.add(\"overflow-menu\");\n    breadcrumbItem.appendChild(overflowMenu);\n    mapItems.splice(1, 0, breadcrumbItem);\n\n    this.defaultSlot.replaceWith(...mapItems);\n  }\n\n  private _handleSlotChange(e: Event) {\n    const items = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(\n        (item: SgdsBreadcrumbItem) => item.tagName.toLowerCase() === \"sgds-breadcrumb-item\"\n      ) as SgdsBreadcrumbItem[];\n    items.forEach((item, index) => {\n      if (index === items.length - 1) {\n        item.setAttribute(\"aria-current\", \"page\");\n        item.active = true;\n      } else {\n        item.removeAttribute(\"aria-current\");\n      }\n    });\n\n    if (items.length >= 5) {\n      this._replaceExcessItemsWithDropdown(items);\n    }\n  }\n\n  render() {\n    return html`\n      <nav aria-label=${ifDefined(this.ariaLabel)}>\n        <div class=\"breadcrumb\">\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsBreadcrumb;\n"],"mappings":";;;;;;;;;;;;;;;AAaA,IAAa,iBAAb,cAAoC,YAAY;;;EAMN,KAAA,YAAA;;;EALxB,KAAA,SAAA,CAAC,GAAG,YAAY,QAAQA,QAAe;;;EACjC,KAAA,eAAA,EACpB,sBAAsB,iBACxB;;;;;;;;;;CAcA,gCAAwC,OAA6B;EACnE,MAAM,iBAAiB,SAAS,cAAc,sBAAsB;EACpE,MAAM,eAAe,SAAS,cAAc,oBAAoB;EAChE,aAAa,aAAa,iBAAiB,MAAM;EACjD,aAAa,aAAa,QAAQ,IAAI;EACtC,MAAM,WAAW,MAAM,QAAQ,MAAM,UAAU;GAC7C,IAAI,QAAQ,KAAK,QAAQ,MAAM,SAAS,GAAG;IAEzC,MAAM,mBADe,KAAK,cAAc,GACJ,CAAC,CAAC,UAAU,IAAI;IACpD,MAAM,eAAe,SAAS,cAAc,oBAAoB;IAChE,aAAa,YAAY,gBAAgB;IACzC,aAAa,YAAY,YAAY;IACrC;GACF,OACE,OAAO;EAEX,CAAC;EACD,eAAe,UAAU,IAAI,eAAe;EAC5C,eAAe,YAAY,YAAY;EACvC,SAAS,OAAO,GAAG,GAAG,cAAc;EAEpC,KAAK,YAAY,YAAY,GAAG,QAAQ;CAC1C;CAEA,kBAA0B,GAAU;EAClC,MAAM,QAAS,EAAE,OACd,iBAAiB,EAAE,SAAS,KAAK,CAAC,CAAC,CACnC,QACE,SAA6B,KAAK,QAAQ,YAAY,MAAM,sBAC/D;EACF,MAAM,SAAS,MAAM,UAAU;GAC7B,IAAI,UAAU,MAAM,SAAS,GAAG;IAC9B,KAAK,aAAa,gBAAgB,MAAM;IACxC,KAAK,SAAS;GAChB,OACE,KAAK,gBAAgB,cAAc;EAEvC,CAAC;EAED,IAAI,MAAM,UAAU,GAClB,KAAK,gCAAgC,KAAK;CAE9C;CAEA,SAAS;EACP,OAAO,IAAI;wBACS,UAAU,KAAK,SAAS,EAAE;;8BAEpB,KAAK,kBAAkB;;;;CAInD;AACF;AAjEG,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,eAAA,WAAA,aAAA,KAAA,CAAA;AAGzB,WAAA,CAAA,MAAM,MAAM,CAAA,GAAA,eAAA,WAAA,eAAA,KAAA,CAAA"}

package/react/components/Button/sgds-button.cjs.js

@@ -99,7 +99,7 @@ var SgdsButton = class extends require_button_element.default {
                size=${(0, lit_directives_if_defined_js.ifDefined)(this._assignSpinnerSize(this.size))}
                tone=${(0, lit_directives_if_defined_js.ifDefined)(this._assignSpinnerTone(this.tone, this.variant))}
              ></sgds-spinner>` : lit_static_html_js.html`<slot name="leftIcon"></slot>
-               <span><slot></slot></span>
+               <span role="presentation"><slot></slot></span>
                <slot name="rightIcon"></slot>`}
       
       </${tag}>