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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@govtechsg/sgds-web-component",
-  "version": "3.28.1-rc.0",
+  "version": "3.29.1-rc.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/base/dropdown-list-element.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-list-element.cjs.js","names":["DropdownElement","query","state","property"],"sources":["../../../src/base/dropdown-list-element.ts"],"sourcesContent":["import { property, query, state } from \"lit/decorators.js\";\nimport { DropdownElement } from \"./dropdown-element\";\nimport { SgdsDropdownItem } from \"../components\";\nimport { PropertyValueMap } from \"lit\";\n\nconst TAB = \"Tab\";\nconst ARROW_DOWN = \"ArrowDown\";\nconst ARROW_UP = \"ArrowUp\";\nconst ENTER = \"Enter\";\nconst ESCAPE = \"Escape\";\n\n/**\n * @event sgds-select - Emitted when a dropdown item is selected. `event.detail.item` is the clicked `SgdsDropdownItem` element.\n */\nexport class DropdownListElement extends DropdownElement {\n  static styles = DropdownElement.styles;\n\n  /**@internal */\n  @query(\"ul.dropdown-menu\")\n  private menu: HTMLUListElement;\n\n  /** @internal */\n  @state()\n  nextDropdownItemNo = 0;\n\n  /** @internal */\n  @state()\n  prevDropdownItemNo = -1;\n\n  @property({ type: Boolean, reflect: true })\n  hidden = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", this._resetMenu);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener(\"sgds-hide\", this._resetMenu);\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    this.addEventListener(\"keydown\", this._handleKeyboardMenuItemsEvent);\n  }\n\n  protected handleSelectSlot(e: KeyboardEvent | MouseEvent) {\n    const items = this._getActiveMenuItems();\n\n    const selectedItem = items.find(item => e.composedPath().includes(item));\n    if (!selectedItem) return;\n\n    const currentItemNo = items.indexOf(selectedItem);\n    this.nextDropdownItemNo = currentItemNo + 1;\n    this.prevDropdownItemNo = currentItemNo <= 0 ? items.length - 1 : currentItemNo - 1;\n\n    /** Emitted event from SgdsDropdown element when a slot item is selected */\n    if (!selectedItem.disabled) {\n      this.emit(\"sgds-select\", { detail: { item: selectedItem } });\n      if (this.close !== \"outside\") {\n        this.hideMenu(); // <-- Use new API\n      }\n    }\n  }\n\n  private _resetMenu() {\n    this.nextDropdownItemNo = 0;\n    this.prevDropdownItemNo = -1;\n    // reset the tabindex\n    const items = this._getMenuItems();\n    items.forEach(item => {\n      const dropdownItem = item?.shadowRoot?.querySelector(\".dropdown-item\") as HTMLAnchorElement;\n      dropdownItem && dropdownItem.removeAttribute(\"tabindex\");\n    });\n  }\n  protected _handleKeyboardMenuItemsEvent(e: KeyboardEvent) {\n    if (this.readonly) return;\n    const menuItems = this._getActiveMenuItems();\n    if (menuItems.length === 0) return;\n\n    switch (e.key) {\n      case ARROW_DOWN:\n        e.preventDefault();\n        this._setMenuItem(this.nextDropdownItemNo);\n        break;\n      case ARROW_UP:\n        e.preventDefault();\n        this._setMenuItem(this.prevDropdownItemNo);\n        break;\n      case TAB:\n        if (!this.menuIsOpen) return;\n        e.preventDefault();\n        if (e.shiftKey) {\n          this._setMenuItem(this.prevDropdownItemNo);\n        } else {\n          this._setMenuItem(this.nextDropdownItemNo);\n        }\n        break;\n      case ESCAPE:\n        if (this.menuIsOpen) {\n          e.preventDefault();\n          this.hideMenu();\n        }\n        break;\n      case ENTER: {\n        const target = menuItems.find(item => e.composedPath().includes(item));\n        if (target) {\n          this.handleSelectSlot(e);\n        }\n        break;\n      }\n      default:\n        break;\n    }\n  }\n\n  private _getMenuItems(): SgdsDropdownItem[] {\n    const defaultSlot = this.shadowRoot.querySelector(\"slot#default\");\n    // for case when default slot is used e.g. dropdown, mainnavdropdown\n    if (defaultSlot) {\n      const defaultSlotItems = (this.shadowRoot.querySelector(\"slot#default\") as HTMLSlotElement)\n        ?.assignedElements({\n          flatten: true\n        })\n        .filter(\n          el =>\n            el.getAttribute(\"role\") === \"menuitem\" && !el.classList.contains(\"empty-menu\") && !el.hasAttribute(\"hidden\")\n        ) as SgdsDropdownItem[];\n      return defaultSlotItems;\n    }\n    // for case when there is no slot e.g. combobox\n    if (this.menu?.hasChildNodes()) {\n      const menuItems = Array.from(this.menu.children);\n      return [...menuItems] as SgdsDropdownItem[];\n    }\n\n    return [];\n  }\n\n  private _getActiveMenuItems(): SgdsDropdownItem[] {\n    return this._getMenuItems().filter(item => !item.disabled && !item.hidden && !item.readonly);\n  }\n  private _setMenuItem(currentItemIdx: number) {\n    const items = this._getActiveMenuItems();\n    if (items.length === 0) return;\n\n    // Use modulo for looping\n    const idx = ((currentItemIdx % items.length) + items.length) % items.length;\n    const activeItem = items[idx];\n    this.emit(\"i-sgds-option-focus\", { detail: { option: activeItem } });\n    this.nextDropdownItemNo = (idx + 1) % items.length;\n    this.prevDropdownItemNo = (idx - 1 + items.length) % items.length;\n\n    items.forEach(item => {\n      const dropdownItem = item.shadowRoot.querySelector(\".dropdown-item\") as HTMLAnchorElement;\n      dropdownItem.setAttribute(\"tabindex\", item === activeItem ? \"0\" : \"-1\");\n      if (item === activeItem) dropdownItem.focus();\n    });\n  }\n}\n\nexport interface IDropdownListElement {\n  item: SgdsDropdownItem;\n}\n"],"mappings":"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"}
+{"version":3,"file":"dropdown-list-element.cjs.js","names":["DropdownElement","query","state","property"],"sources":["../../../src/base/dropdown-list-element.ts"],"sourcesContent":["import { property, query, state } from \"lit/decorators.js\";\nimport { DropdownElement } from \"./dropdown-element\";\nimport { SgdsDropdownItem } from \"../components\";\nimport { PropertyValueMap } from \"lit\";\n\nconst TAB = \"Tab\";\nconst ARROW_DOWN = \"ArrowDown\";\nconst ARROW_UP = \"ArrowUp\";\nconst ENTER = \"Enter\";\nconst ESCAPE = \"Escape\";\n\n/**\n * @event sgds-select - Emitted when a dropdown item is selected. `event.detail.item` is the clicked `SgdsDropdownItem` element.\n */\nexport class DropdownListElement extends DropdownElement {\n  static styles = DropdownElement.styles;\n\n  /**@internal */\n  @query(\"ul.dropdown-menu\")\n  private menu: HTMLUListElement;\n\n  /** @internal */\n  @state()\n  nextDropdownItemNo = 0;\n\n  /** @internal */\n  @state()\n  prevDropdownItemNo = -1;\n\n  @property({ type: Boolean, reflect: true })\n  hidden = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", this._resetMenu);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener(\"sgds-hide\", this._resetMenu);\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    this.addEventListener(\"keydown\", this._handleKeyboardMenuItemsEvent);\n  }\n\n  protected handleSelectSlot(e: KeyboardEvent | MouseEvent) {\n    const items = this._getActiveMenuItems();\n\n    const selectedItem = items.find(item => e.composedPath().includes(item));\n    if (!selectedItem) return;\n\n    const currentItemNo = items.indexOf(selectedItem);\n    this.nextDropdownItemNo = currentItemNo + 1;\n    this.prevDropdownItemNo = currentItemNo <= 0 ? items.length - 1 : currentItemNo - 1;\n\n    /** Emitted event from SgdsDropdown element when a slot item is selected */\n    if (!selectedItem.disabled) {\n      this.emit(\"sgds-select\", { detail: { item: selectedItem } });\n      if (this.close !== \"outside\") {\n        this.hideMenu(); // <-- Use new API\n      }\n    }\n  }\n\n  private _resetMenu() {\n    this.nextDropdownItemNo = 0;\n    this.prevDropdownItemNo = -1;\n    // reset the tabindex\n    const items = this._getMenuItems();\n    items.forEach(item => {\n      const dropdownItem = item?.shadowRoot?.querySelector(\".dropdown-item\") as HTMLAnchorElement;\n      dropdownItem && dropdownItem.removeAttribute(\"tabindex\");\n    });\n  }\n  protected _handleKeyboardMenuItemsEvent(e: KeyboardEvent) {\n    if (this.readonly) return;\n    const menuItems = this._getActiveMenuItems();\n    if (menuItems.length === 0) return;\n\n    switch (e.key) {\n      case ARROW_DOWN:\n        e.preventDefault();\n        this._setMenuItem(this.nextDropdownItemNo);\n        break;\n      case ARROW_UP:\n        e.preventDefault();\n        this._setMenuItem(this.prevDropdownItemNo);\n        break;\n      case TAB:\n        if (!this.menuIsOpen) return;\n        e.preventDefault();\n        if (e.shiftKey) {\n          this._setMenuItem(this.prevDropdownItemNo);\n        } else {\n          this._setMenuItem(this.nextDropdownItemNo);\n        }\n        break;\n      case ESCAPE:\n        if (this.menuIsOpen) {\n          e.preventDefault();\n          this.hideMenu();\n        }\n        break;\n      case ENTER: {\n        const target = menuItems.find(item => e.composedPath().includes(item));\n        if (target) {\n          this.handleSelectSlot(e);\n        }\n        break;\n      }\n      default:\n        break;\n    }\n  }\n\n  protected _getMenuItems(): SgdsDropdownItem[] {\n    const defaultSlot = this.shadowRoot.querySelector(\"slot#default\");\n    // for case when default slot is used e.g. dropdown, mainnavdropdown\n    if (defaultSlot) {\n      const defaultSlotItems = (this.shadowRoot.querySelector(\"slot#default\") as HTMLSlotElement)\n        ?.assignedElements({\n          flatten: true\n        })\n        .filter(\n          el =>\n            el.getAttribute(\"role\") === \"menuitem\" && !el.classList.contains(\"empty-menu\") && !el.hasAttribute(\"hidden\")\n        ) as SgdsDropdownItem[];\n      return defaultSlotItems;\n    }\n    // for case when there is no slot e.g. combobox\n    if (this.menu?.hasChildNodes()) {\n      const menuItems = Array.from(this.menu.children);\n      return [...menuItems] as SgdsDropdownItem[];\n    }\n\n    return [];\n  }\n\n  protected _getActiveMenuItems(): SgdsDropdownItem[] {\n    return this._getMenuItems().filter(item => !item.disabled && !item.hidden && !item.readonly);\n  }\n  protected _setMenuItem(currentItemIdx: number) {\n    const items = this._getActiveMenuItems();\n    if (items.length === 0) return;\n\n    // Use modulo for looping\n    const idx = ((currentItemIdx % items.length) + items.length) % items.length;\n    const activeItem = items[idx];\n    this.emit(\"i-sgds-option-focus\", { detail: { option: activeItem } });\n    this.nextDropdownItemNo = (idx + 1) % items.length;\n    this.prevDropdownItemNo = (idx - 1 + items.length) % items.length;\n\n    items.forEach(item => {\n      const dropdownItem = item.shadowRoot.querySelector(\".dropdown-item\") as HTMLAnchorElement;\n      dropdownItem.setAttribute(\"tabindex\", item === activeItem ? \"0\" : \"-1\");\n      if (item === activeItem) dropdownItem.focus();\n    });\n  }\n}\n\nexport interface IDropdownListElement {\n  item: SgdsDropdownItem;\n}\n"],"mappings":"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"}

package/react/base/dropdown-list-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-list-element.js","names":[],"sources":["../../../src/base/dropdown-list-element.ts"],"sourcesContent":["import { property, query, state } from \"lit/decorators.js\";\nimport { DropdownElement } from \"./dropdown-element\";\nimport { SgdsDropdownItem } from \"../components\";\nimport { PropertyValueMap } from \"lit\";\n\nconst TAB = \"Tab\";\nconst ARROW_DOWN = \"ArrowDown\";\nconst ARROW_UP = \"ArrowUp\";\nconst ENTER = \"Enter\";\nconst ESCAPE = \"Escape\";\n\n/**\n * @event sgds-select - Emitted when a dropdown item is selected. `event.detail.item` is the clicked `SgdsDropdownItem` element.\n */\nexport class DropdownListElement extends DropdownElement {\n  static styles = DropdownElement.styles;\n\n  /**@internal */\n  @query(\"ul.dropdown-menu\")\n  private menu: HTMLUListElement;\n\n  /** @internal */\n  @state()\n  nextDropdownItemNo = 0;\n\n  /** @internal */\n  @state()\n  prevDropdownItemNo = -1;\n\n  @property({ type: Boolean, reflect: true })\n  hidden = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", this._resetMenu);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener(\"sgds-hide\", this._resetMenu);\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    this.addEventListener(\"keydown\", this._handleKeyboardMenuItemsEvent);\n  }\n\n  protected handleSelectSlot(e: KeyboardEvent | MouseEvent) {\n    const items = this._getActiveMenuItems();\n\n    const selectedItem = items.find(item => e.composedPath().includes(item));\n    if (!selectedItem) return;\n\n    const currentItemNo = items.indexOf(selectedItem);\n    this.nextDropdownItemNo = currentItemNo + 1;\n    this.prevDropdownItemNo = currentItemNo <= 0 ? items.length - 1 : currentItemNo - 1;\n\n    /** Emitted event from SgdsDropdown element when a slot item is selected */\n    if (!selectedItem.disabled) {\n      this.emit(\"sgds-select\", { detail: { item: selectedItem } });\n      if (this.close !== \"outside\") {\n        this.hideMenu(); // <-- Use new API\n      }\n    }\n  }\n\n  private _resetMenu() {\n    this.nextDropdownItemNo = 0;\n    this.prevDropdownItemNo = -1;\n    // reset the tabindex\n    const items = this._getMenuItems();\n    items.forEach(item => {\n      const dropdownItem = item?.shadowRoot?.querySelector(\".dropdown-item\") as HTMLAnchorElement;\n      dropdownItem && dropdownItem.removeAttribute(\"tabindex\");\n    });\n  }\n  protected _handleKeyboardMenuItemsEvent(e: KeyboardEvent) {\n    if (this.readonly) return;\n    const menuItems = this._getActiveMenuItems();\n    if (menuItems.length === 0) return;\n\n    switch (e.key) {\n      case ARROW_DOWN:\n        e.preventDefault();\n        this._setMenuItem(this.nextDropdownItemNo);\n        break;\n      case ARROW_UP:\n        e.preventDefault();\n        this._setMenuItem(this.prevDropdownItemNo);\n        break;\n      case TAB:\n        if (!this.menuIsOpen) return;\n        e.preventDefault();\n        if (e.shiftKey) {\n          this._setMenuItem(this.prevDropdownItemNo);\n        } else {\n          this._setMenuItem(this.nextDropdownItemNo);\n        }\n        break;\n      case ESCAPE:\n        if (this.menuIsOpen) {\n          e.preventDefault();\n          this.hideMenu();\n        }\n        break;\n      case ENTER: {\n        const target = menuItems.find(item => e.composedPath().includes(item));\n        if (target) {\n          this.handleSelectSlot(e);\n        }\n        break;\n      }\n      default:\n        break;\n    }\n  }\n\n  private _getMenuItems(): SgdsDropdownItem[] {\n    const defaultSlot = this.shadowRoot.querySelector(\"slot#default\");\n    // for case when default slot is used e.g. dropdown, mainnavdropdown\n    if (defaultSlot) {\n      const defaultSlotItems = (this.shadowRoot.querySelector(\"slot#default\") as HTMLSlotElement)\n        ?.assignedElements({\n          flatten: true\n        })\n        .filter(\n          el =>\n            el.getAttribute(\"role\") === \"menuitem\" && !el.classList.contains(\"empty-menu\") && !el.hasAttribute(\"hidden\")\n        ) as SgdsDropdownItem[];\n      return defaultSlotItems;\n    }\n    // for case when there is no slot e.g. combobox\n    if (this.menu?.hasChildNodes()) {\n      const menuItems = Array.from(this.menu.children);\n      return [...menuItems] as SgdsDropdownItem[];\n    }\n\n    return [];\n  }\n\n  private _getActiveMenuItems(): SgdsDropdownItem[] {\n    return this._getMenuItems().filter(item => !item.disabled && !item.hidden && !item.readonly);\n  }\n  private _setMenuItem(currentItemIdx: number) {\n    const items = this._getActiveMenuItems();\n    if (items.length === 0) return;\n\n    // Use modulo for looping\n    const idx = ((currentItemIdx % items.length) + items.length) % items.length;\n    const activeItem = items[idx];\n    this.emit(\"i-sgds-option-focus\", { detail: { option: activeItem } });\n    this.nextDropdownItemNo = (idx + 1) % items.length;\n    this.prevDropdownItemNo = (idx - 1 + items.length) % items.length;\n\n    items.forEach(item => {\n      const dropdownItem = item.shadowRoot.querySelector(\".dropdown-item\") as HTMLAnchorElement;\n      dropdownItem.setAttribute(\"tabindex\", item === activeItem ? \"0\" : \"-1\");\n      if (item === activeItem) dropdownItem.focus();\n    });\n  }\n}\n\nexport interface IDropdownListElement {\n  item: SgdsDropdownItem;\n}\n"],"mappings":"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"}
+{"version":3,"file":"dropdown-list-element.js","names":[],"sources":["../../../src/base/dropdown-list-element.ts"],"sourcesContent":["import { property, query, state } from \"lit/decorators.js\";\nimport { DropdownElement } from \"./dropdown-element\";\nimport { SgdsDropdownItem } from \"../components\";\nimport { PropertyValueMap } from \"lit\";\n\nconst TAB = \"Tab\";\nconst ARROW_DOWN = \"ArrowDown\";\nconst ARROW_UP = \"ArrowUp\";\nconst ENTER = \"Enter\";\nconst ESCAPE = \"Escape\";\n\n/**\n * @event sgds-select - Emitted when a dropdown item is selected. `event.detail.item` is the clicked `SgdsDropdownItem` element.\n */\nexport class DropdownListElement extends DropdownElement {\n  static styles = DropdownElement.styles;\n\n  /**@internal */\n  @query(\"ul.dropdown-menu\")\n  private menu: HTMLUListElement;\n\n  /** @internal */\n  @state()\n  nextDropdownItemNo = 0;\n\n  /** @internal */\n  @state()\n  prevDropdownItemNo = -1;\n\n  @property({ type: Boolean, reflect: true })\n  hidden = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", this._resetMenu);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener(\"sgds-hide\", this._resetMenu);\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    this.addEventListener(\"keydown\", this._handleKeyboardMenuItemsEvent);\n  }\n\n  protected handleSelectSlot(e: KeyboardEvent | MouseEvent) {\n    const items = this._getActiveMenuItems();\n\n    const selectedItem = items.find(item => e.composedPath().includes(item));\n    if (!selectedItem) return;\n\n    const currentItemNo = items.indexOf(selectedItem);\n    this.nextDropdownItemNo = currentItemNo + 1;\n    this.prevDropdownItemNo = currentItemNo <= 0 ? items.length - 1 : currentItemNo - 1;\n\n    /** Emitted event from SgdsDropdown element when a slot item is selected */\n    if (!selectedItem.disabled) {\n      this.emit(\"sgds-select\", { detail: { item: selectedItem } });\n      if (this.close !== \"outside\") {\n        this.hideMenu(); // <-- Use new API\n      }\n    }\n  }\n\n  private _resetMenu() {\n    this.nextDropdownItemNo = 0;\n    this.prevDropdownItemNo = -1;\n    // reset the tabindex\n    const items = this._getMenuItems();\n    items.forEach(item => {\n      const dropdownItem = item?.shadowRoot?.querySelector(\".dropdown-item\") as HTMLAnchorElement;\n      dropdownItem && dropdownItem.removeAttribute(\"tabindex\");\n    });\n  }\n  protected _handleKeyboardMenuItemsEvent(e: KeyboardEvent) {\n    if (this.readonly) return;\n    const menuItems = this._getActiveMenuItems();\n    if (menuItems.length === 0) return;\n\n    switch (e.key) {\n      case ARROW_DOWN:\n        e.preventDefault();\n        this._setMenuItem(this.nextDropdownItemNo);\n        break;\n      case ARROW_UP:\n        e.preventDefault();\n        this._setMenuItem(this.prevDropdownItemNo);\n        break;\n      case TAB:\n        if (!this.menuIsOpen) return;\n        e.preventDefault();\n        if (e.shiftKey) {\n          this._setMenuItem(this.prevDropdownItemNo);\n        } else {\n          this._setMenuItem(this.nextDropdownItemNo);\n        }\n        break;\n      case ESCAPE:\n        if (this.menuIsOpen) {\n          e.preventDefault();\n          this.hideMenu();\n        }\n        break;\n      case ENTER: {\n        const target = menuItems.find(item => e.composedPath().includes(item));\n        if (target) {\n          this.handleSelectSlot(e);\n        }\n        break;\n      }\n      default:\n        break;\n    }\n  }\n\n  protected _getMenuItems(): SgdsDropdownItem[] {\n    const defaultSlot = this.shadowRoot.querySelector(\"slot#default\");\n    // for case when default slot is used e.g. dropdown, mainnavdropdown\n    if (defaultSlot) {\n      const defaultSlotItems = (this.shadowRoot.querySelector(\"slot#default\") as HTMLSlotElement)\n        ?.assignedElements({\n          flatten: true\n        })\n        .filter(\n          el =>\n            el.getAttribute(\"role\") === \"menuitem\" && !el.classList.contains(\"empty-menu\") && !el.hasAttribute(\"hidden\")\n        ) as SgdsDropdownItem[];\n      return defaultSlotItems;\n    }\n    // for case when there is no slot e.g. combobox\n    if (this.menu?.hasChildNodes()) {\n      const menuItems = Array.from(this.menu.children);\n      return [...menuItems] as SgdsDropdownItem[];\n    }\n\n    return [];\n  }\n\n  protected _getActiveMenuItems(): SgdsDropdownItem[] {\n    return this._getMenuItems().filter(item => !item.disabled && !item.hidden && !item.readonly);\n  }\n  protected _setMenuItem(currentItemIdx: number) {\n    const items = this._getActiveMenuItems();\n    if (items.length === 0) return;\n\n    // Use modulo for looping\n    const idx = ((currentItemIdx % items.length) + items.length) % items.length;\n    const activeItem = items[idx];\n    this.emit(\"i-sgds-option-focus\", { detail: { option: activeItem } });\n    this.nextDropdownItemNo = (idx + 1) % items.length;\n    this.prevDropdownItemNo = (idx - 1 + items.length) % items.length;\n\n    items.forEach(item => {\n      const dropdownItem = item.shadowRoot.querySelector(\".dropdown-item\") as HTMLAnchorElement;\n      dropdownItem.setAttribute(\"tabindex\", item === activeItem ? \"0\" : \"-1\");\n      if (item === activeItem) dropdownItem.focus();\n    });\n  }\n}\n\nexport interface IDropdownListElement {\n  item: SgdsDropdownItem;\n}\n"],"mappings":";;;;;AAKA,MAAM,MAAM;AACZ,MAAM,aAAa;AACnB,MAAM,WAAW;AACjB,MAAM,QAAQ;AACd,MAAM,SAAS;;;;AAKf,IAAa,sBAAb,cAAyC,gBAAgB;;;EASlC,KAAA,qBAAA;EAIA,KAAA,qBAAA;EAGZ,KAAA,SAAA;;;EAfO,KAAA,SAAA,gBAAgB;;CAiBhC,oBAAoB;EAClB,MAAM,kBAAkB;EACxB,KAAK,iBAAiB,aAAa,KAAK,UAAU;CACpD;CAEA,uBAAuB;EACrB,MAAM,qBAAqB;EAC3B,KAAK,oBAAoB,aAAa,KAAK,UAAU;CACvD;CAEA,aAAa,mBAA2C;EACtD,MAAM,aAAa,iBAAiB;EACpC,KAAK,iBAAiB,WAAW,KAAK,6BAA6B;CACrE;CAEA,iBAA2B,GAA+B;EACxD,MAAM,QAAQ,KAAK,oBAAoB;EAEvC,MAAM,eAAe,MAAM,MAAK,SAAQ,EAAE,aAAa,CAAC,CAAC,SAAS,IAAI,CAAC;EACvE,IAAI,CAAC,cAAc;EAEnB,MAAM,gBAAgB,MAAM,QAAQ,YAAY;EAChD,KAAK,qBAAqB,gBAAgB;EAC1C,KAAK,qBAAqB,iBAAiB,IAAI,MAAM,SAAS,IAAI,gBAAgB;;EAGlF,IAAI,CAAC,aAAa,UAAU;GAC1B,KAAK,KAAK,eAAe,EAAE,QAAQ,EAAE,MAAM,aAAa,EAAE,CAAC;GAC3D,IAAI,KAAK,UAAU,WACjB,KAAK,SAAS;EAElB;CACF;CAEA,aAAqB;EACnB,KAAK,qBAAqB;EAC1B,KAAK,qBAAqB;EAG1B,KADmB,cACf,CAAC,CAAC,SAAQ,SAAQ;GACpB,MAAM,eAAe,MAAM,YAAY,cAAc,gBAAgB;GACrE,gBAAgB,aAAa,gBAAgB,UAAU;EACzD,CAAC;CACH;CACA,8BAAwC,GAAkB;EACxD,IAAI,KAAK,UAAU;EACnB,MAAM,YAAY,KAAK,oBAAoB;EAC3C,IAAI,UAAU,WAAW,GAAG;EAE5B,QAAQ,EAAE,KAAV;GACE,KAAK;IACH,EAAE,eAAe;IACjB,KAAK,aAAa,KAAK,kBAAkB;IACzC;GACF,KAAK;IACH,EAAE,eAAe;IACjB,KAAK,aAAa,KAAK,kBAAkB;IACzC;GACF,KAAK;IACH,IAAI,CAAC,KAAK,YAAY;IACtB,EAAE,eAAe;IACjB,IAAI,EAAE,UACJ,KAAK,aAAa,KAAK,kBAAkB;SAEzC,KAAK,aAAa,KAAK,kBAAkB;IAE3C;GACF,KAAK;IACH,IAAI,KAAK,YAAY;KACnB,EAAE,eAAe;KACjB,KAAK,SAAS;IAChB;IACA;GACF,KAAK,OAEH,IADe,UAAU,MAAK,SAAQ,EAAE,aAAa,CAAC,CAAC,SAAS,IAAI,CAC3D,GACP,KAAK,iBAAiB,CAAC;EAM7B;CACF;CAEA,gBAA8C;EAG5C,IAFoB,KAAK,WAAW,cAAc,cAEpC,GASZ,OAR0B,KAAK,WAAW,cAAc,cAAc,CAAC,EACnE,iBAAiB,EACjB,SAAS,KACX,CAAC,CAAC,CACD,QACC,OACE,GAAG,aAAa,MAAM,MAAM,cAAc,CAAC,GAAG,UAAU,SAAS,YAAY,KAAK,CAAC,GAAG,aAAa,QAAQ,CAC/G;EAIJ,IAAI,KAAK,MAAM,cAAc,GAE3B,OAAO,CAAC,GADU,MAAM,KAAK,KAAK,KAAK,QACpB,CAAC;EAGtB,OAAO,CAAC;CACV;CAEA,sBAAoD;EAClD,OAAO,KAAK,cAAc,CAAC,CAAC,QAAO,SAAQ,CAAC,KAAK,YAAY,CAAC,KAAK,UAAU,CAAC,KAAK,QAAQ;CAC7F;CACA,aAAuB,gBAAwB;EAC7C,MAAM,QAAQ,KAAK,oBAAoB;EACvC,IAAI,MAAM,WAAW,GAAG;EAGxB,MAAM,OAAQ,iBAAiB,MAAM,SAAU,MAAM,UAAU,MAAM;EACrE,MAAM,aAAa,MAAM;EACzB,KAAK,KAAK,uBAAuB,EAAE,QAAQ,EAAE,QAAQ,WAAW,EAAE,CAAC;EACnE,KAAK,sBAAsB,MAAM,KAAK,MAAM;EAC5C,KAAK,sBAAsB,MAAM,IAAI,MAAM,UAAU,MAAM;EAE3D,MAAM,SAAQ,SAAQ;GACpB,MAAM,eAAe,KAAK,WAAW,cAAc,gBAAgB;GACnE,aAAa,aAAa,YAAY,SAAS,aAAa,MAAM,IAAI;GACtE,IAAI,SAAS,YAAY,aAAa,MAAM;EAC9C,CAAC;CACH;AACF;AA9IG,WAAA,CAAA,MAAM,kBAAkB,CAAA,GAAA,oBAAA,WAAA,QAAA,KAAA,CAAA;AAIxB,WAAA,CAAA,MAAM,CAAA,GAAA,oBAAA,WAAA,sBAAA,KAAA,CAAA;AAIN,WAAA,CAAA,MAAM,CAAA,GAAA,oBAAA,WAAA,sBAAA,KAAA,CAAA;AAGN,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,oBAAA,WAAA,UAAA,KAAA,CAAA"}

package/react/combo-box/index.cjs.js

@@ -20,6 +20,7 @@ var combo_box_default = (0, _lit_react.createComponent)({
 		onSgdsInvalid: "sgds-invalid",
 		onSgdsValid: "sgds-valid",
 		onSgdsScrollEnd: "sgds-scroll-end",
+		onSgdsCreateOption: "sgds-create-option",
 		onSgdsShow: "sgds-show",
 		onSgdsAfterShow: "sgds-after-show",
 		onSgdsHide: "sgds-hide",

package/react/combo-box/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","names":["register","Component","createComponent","React"],"sources":["../../../src/react/combo-box/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/ComboBox/sgds-combo-box\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-combo-box\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-combo-box\",\n  elementClass: Component,\n  events: {\n    onSgdsSelect: \"sgds-select\",\n    onSgdsChange: \"sgds-change\",\n    onSgdsInput: \"sgds-input\",\n    onSgdsFocus: \"sgds-focus\",\n    onSgdsBlur: \"sgds-blur\",\n    onSgdsInvalid: \"sgds-invalid\",\n    onSgdsValid: \"sgds-valid\",\n    onSgdsScrollEnd: \"sgds-scroll-end\",\n    onSgdsShow: \"sgds-show\",\n    onSgdsAfterShow: \"sgds-after-show\",\n    onSgdsHide: \"sgds-hide\",\n    onSgdsAfterHide: \"sgds-after-hide\"\n  }\n});\n"],"mappings":";;;;;;;;AAKAA,oBAAAA,SAAS,kBAAkBC,uBAAAA,YAAS;AAEpC,IAAA,qBAAA,GAAeC,WAAAA,gBAAAA,CAAgB;CACtBC;CACP,SAAS;CACT,cAAcF,uBAAAA;CACd,QAAQ;EACN,cAAc;EACd,cAAc;EACd,aAAa;EACb,aAAa;EACb,YAAY;EACZ,eAAe;EACf,aAAa;EACb,iBAAiB;EACjB,YAAY;EACZ,iBAAiB;EACjB,YAAY;EACZ,iBAAiB;CACnB;AACF,CAAC"}
+{"version":3,"file":"index.cjs.js","names":["register","Component","createComponent","React"],"sources":["../../../src/react/combo-box/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/ComboBox/sgds-combo-box\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-combo-box\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-combo-box\",\n  elementClass: Component,\n  events: {\n    onSgdsSelect: \"sgds-select\",\n    onSgdsChange: \"sgds-change\",\n    onSgdsInput: \"sgds-input\",\n    onSgdsFocus: \"sgds-focus\",\n    onSgdsBlur: \"sgds-blur\",\n    onSgdsInvalid: \"sgds-invalid\",\n    onSgdsValid: \"sgds-valid\",\n    onSgdsScrollEnd: \"sgds-scroll-end\",\n    onSgdsCreateOption: \"sgds-create-option\",\n    onSgdsShow: \"sgds-show\",\n    onSgdsAfterShow: \"sgds-after-show\",\n    onSgdsHide: \"sgds-hide\",\n    onSgdsAfterHide: \"sgds-after-hide\"\n  }\n});\n"],"mappings":";;;;;;;;AAKAA,oBAAAA,SAAS,kBAAkBC,uBAAAA,YAAS;AAEpC,IAAA,qBAAA,GAAeC,WAAAA,gBAAAA,CAAgB;CACtBC;CACP,SAAS;CACT,cAAcF,uBAAAA;CACd,QAAQ;EACN,cAAc;EACd,cAAc;EACd,aAAa;EACb,aAAa;EACb,YAAY;EACZ,eAAe;EACf,aAAa;EACb,iBAAiB;EACjB,oBAAoB;EACpB,YAAY;EACZ,iBAAiB;EACjB,YAAY;EACZ,iBAAiB;CACnB;AACF,CAAC"}

package/react/combo-box/index.js

@@ -18,6 +18,7 @@ var combo_box_default = createComponent({
 		onSgdsInvalid: "sgds-invalid",
 		onSgdsValid: "sgds-valid",
 		onSgdsScrollEnd: "sgds-scroll-end",
+		onSgdsCreateOption: "sgds-create-option",
 		onSgdsShow: "sgds-show",
 		onSgdsAfterShow: "sgds-after-show",
 		onSgdsHide: "sgds-hide",

package/react/combo-box/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Component"],"sources":["../../../src/react/combo-box/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/ComboBox/sgds-combo-box\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-combo-box\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-combo-box\",\n  elementClass: Component,\n  events: {\n    onSgdsSelect: \"sgds-select\",\n    onSgdsChange: \"sgds-change\",\n    onSgdsInput: \"sgds-input\",\n    onSgdsFocus: \"sgds-focus\",\n    onSgdsBlur: \"sgds-blur\",\n    onSgdsInvalid: \"sgds-invalid\",\n    onSgdsValid: \"sgds-valid\",\n    onSgdsScrollEnd: \"sgds-scroll-end\",\n    onSgdsShow: \"sgds-show\",\n    onSgdsAfterShow: \"sgds-after-show\",\n    onSgdsHide: \"sgds-hide\",\n    onSgdsAfterHide: \"sgds-after-hide\"\n  }\n});\n"],"mappings":";;;;;;AAKA,SAAS,kBAAkBA,YAAS;AAEpC,IAAA,oBAAe,gBAAgB;CAC7B,OAAO;CACP,SAAS;CACT,cAAcA;CACd,QAAQ;EACN,cAAc;EACd,cAAc;EACd,aAAa;EACb,aAAa;EACb,YAAY;EACZ,eAAe;EACf,aAAa;EACb,iBAAiB;EACjB,YAAY;EACZ,iBAAiB;EACjB,YAAY;EACZ,iBAAiB;CACnB;AACF,CAAC"}
+{"version":3,"file":"index.js","names":["Component"],"sources":["../../../src/react/combo-box/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/ComboBox/sgds-combo-box\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-combo-box\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-combo-box\",\n  elementClass: Component,\n  events: {\n    onSgdsSelect: \"sgds-select\",\n    onSgdsChange: \"sgds-change\",\n    onSgdsInput: \"sgds-input\",\n    onSgdsFocus: \"sgds-focus\",\n    onSgdsBlur: \"sgds-blur\",\n    onSgdsInvalid: \"sgds-invalid\",\n    onSgdsValid: \"sgds-valid\",\n    onSgdsScrollEnd: \"sgds-scroll-end\",\n    onSgdsCreateOption: \"sgds-create-option\",\n    onSgdsShow: \"sgds-show\",\n    onSgdsAfterShow: \"sgds-after-show\",\n    onSgdsHide: \"sgds-hide\",\n    onSgdsAfterHide: \"sgds-after-hide\"\n  }\n});\n"],"mappings":";;;;;;AAKA,SAAS,kBAAkBA,YAAS;AAEpC,IAAA,oBAAe,gBAAgB;CAC7B,OAAO;CACP,SAAS;CACT,cAAcA;CACd,QAAQ;EACN,cAAc;EACd,cAAc;EACd,aAAa;EACb,aAAa;EACb,YAAY;EACZ,eAAe;EACf,aAAa;EACb,iBAAiB;EACjB,oBAAoB;EACpB,YAAY;EACZ,iBAAiB;EACjB,YAAY;EACZ,iBAAiB;CACnB;AACF,CAAC"}

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":"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"}
+{"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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"}