@govtechsg/sgds-web-component 3.0.0-rc.0 → 3.0.0-rc.2

package/react/index.cjs.js

@@ -22,36 +22,38 @@ var index$f = require('./drawer/index.cjs.js');
 var index$g = require('./dropdown-item/index.cjs.js');
 var index$h = require('./dropdown/index.cjs.js');
 var index$i = require('./file-upload/index.cjs.js');
-var index$j = require('./footer/index.cjs.js');
-var index$k = require('./icon-button/index.cjs.js');
-var index$l = require('./icon-list/index.cjs.js');
-var index$m = require('./input/index.cjs.js');
-var index$n = require('./link/index.cjs.js');
-var index$o = require('./mainnav-dropdown/index.cjs.js');
-var index$p = require('./mainnav-item/index.cjs.js');
-var index$q = require('./mainnav/index.cjs.js');
-var index$r = require('./masthead/index.cjs.js');
-var index$s = require('./modal/index.cjs.js');
-var index$t = require('./pagination/index.cjs.js');
-var index$u = require('./progress-bar/index.cjs.js');
-var index$v = require('./quantity-toggle/index.cjs.js');
-var index$w = require('./radio-group/index.cjs.js');
-var index$x = require('./radio/index.cjs.js');
-var index$y = require('./sidenav-item/index.cjs.js');
-var index$z = require('./sidenav-link/index.cjs.js');
-var index$A = require('./sidenav/index.cjs.js');
-var index$B = require('./skeleton/index.cjs.js');
-var index$C = require('./spinner/index.cjs.js');
-var index$D = require('./stepper/index.cjs.js');
-var index$E = require('./switch/index.cjs.js');
-var index$F = require('./tab-group/index.cjs.js');
-var index$G = require('./tab-panel/index.cjs.js');
-var index$H = require('./tab/index.cjs.js');
-var index$I = require('./table/index.cjs.js');
-var index$J = require('./textarea/index.cjs.js');
-var index$K = require('./toast-container/index.cjs.js');
-var index$L = require('./toast/index.cjs.js');
-var index$M = require('./tooltip/index.cjs.js');
+var index$j = require('./footer-item/index.cjs.js');
+var index$k = require('./footer/index.cjs.js');
+var index$l = require('./icon/index.cjs.js');
+var index$m = require('./icon-button/index.cjs.js');
+var index$n = require('./icon-list/index.cjs.js');
+var index$o = require('./input/index.cjs.js');
+var index$p = require('./link/index.cjs.js');
+var index$q = require('./mainnav-dropdown/index.cjs.js');
+var index$r = require('./mainnav-item/index.cjs.js');
+var index$s = require('./mainnav/index.cjs.js');
+var index$t = require('./masthead/index.cjs.js');
+var index$u = require('./modal/index.cjs.js');
+var index$v = require('./pagination/index.cjs.js');
+var index$w = require('./progress-bar/index.cjs.js');
+var index$x = require('./quantity-toggle/index.cjs.js');
+var index$y = require('./radio-group/index.cjs.js');
+var index$z = require('./radio/index.cjs.js');
+var index$A = require('./sidenav-item/index.cjs.js');
+var index$B = require('./sidenav-link/index.cjs.js');
+var index$C = require('./sidenav/index.cjs.js');
+var index$D = require('./skeleton/index.cjs.js');
+var index$E = require('./spinner/index.cjs.js');
+var index$F = require('./stepper/index.cjs.js');
+var index$G = require('./switch/index.cjs.js');
+var index$H = require('./tab-group/index.cjs.js');
+var index$I = require('./tab-panel/index.cjs.js');
+var index$J = require('./tab/index.cjs.js');
+var index$K = require('./table/index.cjs.js');
+var index$L = require('./textarea/index.cjs.js');
+var index$M = require('./toast-container/index.cjs.js');
+var index$N = require('./toast/index.cjs.js');
+var index$O = require('./tooltip/index.cjs.js');
 
 
 
@@ -74,34 +76,36 @@ exports.SgdsDrawer = index$f["default"];
 exports.SgdsDropdownItem = index$g["default"];
 exports.SgdsDropdown = index$h["default"];
 exports.SgdsFileUpload = index$i["default"];
-exports.SgdsFooter = index$j["default"];
-exports.SgdsIconButton = index$k["default"];
-exports.SgdsIconList = index$l["default"];
-exports.SgdsInput = index$m["default"];
-exports.SgdsLink = index$n["default"];
-exports.SgdsMainnavDropdown = index$o["default"];
-exports.SgdsMainnavItem = index$p["default"];
-exports.SgdsMainnav = index$q["default"];
-exports.SgdsMasthead = index$r["default"];
-exports.SgdsModal = index$s["default"];
-exports.SgdsPagination = index$t["default"];
-exports.SgdsProgressBar = index$u["default"];
-exports.SgdsQuantityToggle = index$v["default"];
-exports.SgdsRadioGroup = index$w["default"];
-exports.SgdsRadio = index$x["default"];
-exports.SgdsSidenavItem = index$y["default"];
-exports.SgdsSidenavLink = index$z["default"];
-exports.SgdsSidenav = index$A["default"];
-exports.SgdsSkeleton = index$B["default"];
-exports.SgdsSpinner = index$C["default"];
-exports.SgdsStepper = index$D["default"];
-exports.SgdsSwitch = index$E["default"];
-exports.SgdsTabGroup = index$F["default"];
-exports.SgdsTabPanel = index$G["default"];
-exports.SgdsTab = index$H["default"];
-exports.SgdsTable = index$I["default"];
-exports.SgdsTextarea = index$J["default"];
-exports.SgdsToastContainer = index$K["default"];
-exports.SgdsToast = index$L["default"];
-exports.SgdsTooltip = index$M["default"];
+exports.SgdsFooterItem = index$j["default"];
+exports.SgdsFooter = index$k["default"];
+exports.SgdsIcon = index$l["default"];
+exports.SgdsIconButton = index$m["default"];
+exports.SgdsIconList = index$n["default"];
+exports.SgdsInput = index$o["default"];
+exports.SgdsLink = index$p["default"];
+exports.SgdsMainnavDropdown = index$q["default"];
+exports.SgdsMainnavItem = index$r["default"];
+exports.SgdsMainnav = index$s["default"];
+exports.SgdsMasthead = index$t["default"];
+exports.SgdsModal = index$u["default"];
+exports.SgdsPagination = index$v["default"];
+exports.SgdsProgressBar = index$w["default"];
+exports.SgdsQuantityToggle = index$x["default"];
+exports.SgdsRadioGroup = index$y["default"];
+exports.SgdsRadio = index$z["default"];
+exports.SgdsSidenavItem = index$A["default"];
+exports.SgdsSidenavLink = index$B["default"];
+exports.SgdsSidenav = index$C["default"];
+exports.SgdsSkeleton = index$D["default"];
+exports.SgdsSpinner = index$E["default"];
+exports.SgdsStepper = index$F["default"];
+exports.SgdsSwitch = index$G["default"];
+exports.SgdsTabGroup = index$H["default"];
+exports.SgdsTabPanel = index$I["default"];
+exports.SgdsTab = index$J["default"];
+exports.SgdsTable = index$K["default"];
+exports.SgdsTextarea = index$L["default"];
+exports.SgdsToastContainer = index$M["default"];
+exports.SgdsToast = index$N["default"];
+exports.SgdsTooltip = index$O["default"];
 //# sourceMappingURL=index.cjs.js.map

package/react/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/react/index.d.ts

@@ -17,7 +17,9 @@ export { default as SgdsDrawer } from './drawer';
 export { default as SgdsDropdownItem } from './dropdown-item';
 export { default as SgdsDropdown } from './dropdown';
 export { default as SgdsFileUpload } from './file-upload';
+export { default as SgdsFooterItem } from './footer-item';
 export { default as SgdsFooter } from './footer';
+export { default as SgdsIcon } from './icon';
 export { default as SgdsIconButton } from './icon-button';
 export { default as SgdsIconList } from './icon-list';
 export { default as SgdsInput } from './input';

package/react/index.js

@@ -18,7 +18,9 @@ export { default as SgdsDrawer } from './drawer/index.js';
 export { default as SgdsDropdownItem } from './dropdown-item/index.js';
 export { default as SgdsDropdown } from './dropdown/index.js';
 export { default as SgdsFileUpload } from './file-upload/index.js';
+export { default as SgdsFooterItem } from './footer-item/index.js';
 export { default as SgdsFooter } from './footer/index.js';
+export { default as SgdsIcon } from './icon/index.js';
 export { default as SgdsIconButton } from './icon-button/index.js';
 export { default as SgdsIconList } from './icon-list/index.js';
 export { default as SgdsInput } from './input/index.js';

package/react/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/react/input/index.cjs.js

@@ -36,7 +36,9 @@ var index = react.createComponent({
         onSgdsChange: "sgds-change",
         onSgdsInput: "sgds-input",
         onSgdsFocus: "sgds-focus",
-        onSgdsBlur: "sgds-blur"
+        onSgdsBlur: "sgds-blur",
+        onSgdsInvalid: "sgds-invalid",
+        onSgdsValid: "sgds-valid"
     }
 });
 

package/react/input/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../src/react/input/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit-labs/react\";\nimport Component from \"../../components/Input/sgds-input\";\n\ncustomElements.define(\"sgds-input\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-input\",\n  elementClass: Component,\n  events: {\n    onSgdsChange: \"sgds-change\",\n    onSgdsInput: \"sgds-input\",\n    onSgdsFocus: \"sgds-focus\",\n    onSgdsBlur: \"sgds-blur\"\n  }\n});\n"],"names":["Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,cAAc,CAAC,MAAM,CAAC,YAAY,EAAEA,mBAAS,CAAC,CAAC;AAE/C,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,YAAY;AACrB,IAAA,YAAY,EAAEF,mBAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,UAAU,EAAE,WAAW;AACxB,KAAA;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../src/react/input/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit-labs/react\";\nimport Component from \"../../components/Input/sgds-input\";\n\ncustomElements.define(\"sgds-input\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-input\",\n  elementClass: Component,\n  events: {\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  }\n});\n"],"names":["Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,cAAc,CAAC,MAAM,CAAC,YAAY,EAAEA,mBAAS,CAAC,CAAC;AAE/C,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,YAAY;AACrB,IAAA,YAAY,EAAEF,mBAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,aAAa,EAAE,cAAc;AAC7B,QAAA,WAAW,EAAE,YAAY;AAC1B,KAAA;AACF,CAAA,CAAC;;;;"}

package/react/input/index.d.ts

@@ -4,5 +4,7 @@ declare const _default: import("@lit-labs/react").ReactWebComponent<Component, {
     onSgdsInput: string;
     onSgdsFocus: string;
     onSgdsBlur: string;
+    onSgdsInvalid: string;
+    onSgdsValid: string;
 }>;
 export default _default;

package/react/input/index.js

@@ -12,7 +12,9 @@ var index = createComponent({
         onSgdsChange: "sgds-change",
         onSgdsInput: "sgds-input",
         onSgdsFocus: "sgds-focus",
-        onSgdsBlur: "sgds-blur"
+        onSgdsBlur: "sgds-blur",
+        onSgdsInvalid: "sgds-invalid",
+        onSgdsValid: "sgds-valid"
     }
 });
 

package/react/input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/input/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit-labs/react\";\nimport Component from \"../../components/Input/sgds-input\";\n\ncustomElements.define(\"sgds-input\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-input\",\n  elementClass: Component,\n  events: {\n    onSgdsChange: \"sgds-change\",\n    onSgdsInput: \"sgds-input\",\n    onSgdsFocus: \"sgds-focus\",\n    onSgdsBlur: \"sgds-blur\"\n  }\n});\n"],"names":["Component"],"mappings":";;;;;AAIA,cAAc,CAAC,MAAM,CAAC,YAAY,EAAEA,SAAS,CAAC,CAAC;AAE/C,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,YAAY;AACrB,IAAA,YAAY,EAAEA,SAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,UAAU,EAAE,WAAW;AACxB,KAAA;AACF,CAAA,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/input/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit-labs/react\";\nimport Component from \"../../components/Input/sgds-input\";\n\ncustomElements.define(\"sgds-input\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-input\",\n  elementClass: Component,\n  events: {\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  }\n});\n"],"names":["Component"],"mappings":";;;;;AAIA,cAAc,CAAC,MAAM,CAAC,YAAY,EAAEA,SAAS,CAAC,CAAC;AAE/C,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,YAAY;AACrB,IAAA,YAAY,EAAEA,SAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC3B,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,WAAW,EAAE,YAAY;AACzB,QAAA,UAAU,EAAE,WAAW;AACvB,QAAA,aAAa,EAAE,cAAc;AAC7B,QAAA,WAAW,EAAE,YAAY;AAC1B,KAAA;AACF,CAAA,CAAC;;;;"}

package/react/internals/CloseButton/close-button.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}.btn-close{background-color:var(--sgds-default-bg-transparent);border:0;border:var(--sgds-border-width-1) solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-close-btn-border-radius);cursor:pointer;height:var(--sgds-dimension-32);padding:0;position:relative;width:var(--sgds-dimension-32)}.btn-close:before{background-color:currentColor;border-radius:var(--sgds-border-radius);box-sizing:content-box;color:var(--sgds-default-color);content:"";height:var(--sgds-icon-size-lg);left:50%;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5.614 5.614a.75.75 0 0 1 1.06 0l5.304 5.303 5.303-5.303a.75.75 0 0 1 1.06 1.06l-5.302 5.304 5.303 5.303a.75.75 0 0 1-1.06 1.06l-5.304-5.302-5.303 5.303a.75.75 0 0 1-1.061-1.06l5.303-5.304-5.303-5.303a.75.75 0 0 1 0-1.061Z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5.614 5.614a.75.75 0 0 1 1.06 0l5.304 5.303 5.303-5.303a.75.75 0 0 1 1.06 1.06l-5.302 5.304 5.303 5.303a.75.75 0 0 1-1.06 1.06l-5.304-5.302-5.303 5.303a.75.75 0 0 1-1.061-1.06l5.303-5.304-5.303-5.303a.75.75 0 0 1 0-1.061Z'/%3E%3C/svg%3E");mask-position:center;-webkit-mask-position:center;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--sgds-icon-size-lg)}.btn-close-light:before{color:var(--sgds-default-color-on-dark)}.btn-close-dark:before{color:var(--sgds-default-color-on-light)}.btn-close:hover{background-color:var(--sgds-default-bg-translucent)}.btn-close:focus,.btn-close:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn-close-sm{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.btn-close.btn-close-sm:before{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}`;
+var css_248z = lit.css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}.btn-close{background-color:var(--sgds-default-bg-transparent);border:0;border:var(--sgds-border-width-1) solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-close-btn-border-radius);cursor:pointer;height:var(--sgds-dimension-32);padding:0;position:relative;width:var(--sgds-dimension-32)}.btn-close:before{background-color:currentColor;border-radius:var(--sgds-border-radius);box-sizing:content-box;color:var(--sgds-default-color);content:"";height:var(--sgds-icon-size-md);left:50%;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5.614 5.614a.75.75 0 0 1 1.06 0l5.304 5.303 5.303-5.303a.75.75 0 0 1 1.06 1.06l-5.302 5.304 5.303 5.303a.75.75 0 0 1-1.06 1.06l-5.304-5.302-5.303 5.303a.75.75 0 0 1-1.061-1.06l5.303-5.304-5.303-5.303a.75.75 0 0 1 0-1.061Z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5.614 5.614a.75.75 0 0 1 1.06 0l5.304 5.303 5.303-5.303a.75.75 0 0 1 1.06 1.06l-5.302 5.304 5.303 5.303a.75.75 0 0 1-1.06 1.06l-5.304-5.302-5.303 5.303a.75.75 0 0 1-1.061-1.06l5.303-5.304-5.303-5.303a.75.75 0 0 1 0-1.061Z'/%3E%3C/svg%3E");mask-position:center;-webkit-mask-position:center;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--sgds-icon-size-md)}.btn-close-light:before{color:var(--sgds-default-color-on-dark)}.btn-close-dark:before{color:var(--sgds-default-color-on-light)}.btn-close:hover{background-color:var(--sgds-default-bg-translucent)}.btn-close:focus,.btn-close:focus-visible{background-color:var(--sgds-default-bg-translucent);box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn-close-sm{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.btn-close.btn-close-sm:before{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=close-button.cjs.js.map

package/react/internals/CloseButton/close-button.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}.btn-close{background-color:var(--sgds-default-bg-transparent);border:0;border:var(--sgds-border-width-1) solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-close-btn-border-radius);cursor:pointer;height:var(--sgds-dimension-32);padding:0;position:relative;width:var(--sgds-dimension-32)}.btn-close:before{background-color:currentColor;border-radius:var(--sgds-border-radius);box-sizing:content-box;color:var(--sgds-default-color);content:"";height:var(--sgds-icon-size-lg);left:50%;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5.614 5.614a.75.75 0 0 1 1.06 0l5.304 5.303 5.303-5.303a.75.75 0 0 1 1.06 1.06l-5.302 5.304 5.303 5.303a.75.75 0 0 1-1.06 1.06l-5.304-5.302-5.303 5.303a.75.75 0 0 1-1.061-1.06l5.303-5.304-5.303-5.303a.75.75 0 0 1 0-1.061Z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5.614 5.614a.75.75 0 0 1 1.06 0l5.304 5.303 5.303-5.303a.75.75 0 0 1 1.06 1.06l-5.302 5.304 5.303 5.303a.75.75 0 0 1-1.06 1.06l-5.304-5.302-5.303 5.303a.75.75 0 0 1-1.061-1.06l5.303-5.304-5.303-5.303a.75.75 0 0 1 0-1.061Z'/%3E%3C/svg%3E");mask-position:center;-webkit-mask-position:center;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--sgds-icon-size-lg)}.btn-close-light:before{color:var(--sgds-default-color-on-dark)}.btn-close-dark:before{color:var(--sgds-default-color-on-light)}.btn-close:hover{background-color:var(--sgds-default-bg-translucent)}.btn-close:focus,.btn-close:focus-visible{box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn-close-sm{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.btn-close.btn-close-sm:before{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}`;
+var css_248z = css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}.btn-close{background-color:var(--sgds-default-bg-transparent);border:0;border:var(--sgds-border-width-1) solid var(--sgds-default-border-color-transparent);border-radius:var(--sgds-close-btn-border-radius);cursor:pointer;height:var(--sgds-dimension-32);padding:0;position:relative;width:var(--sgds-dimension-32)}.btn-close:before{background-color:currentColor;border-radius:var(--sgds-border-radius);box-sizing:content-box;color:var(--sgds-default-color);content:"";height:var(--sgds-icon-size-md);left:50%;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5.614 5.614a.75.75 0 0 1 1.06 0l5.304 5.303 5.303-5.303a.75.75 0 0 1 1.06 1.06l-5.302 5.304 5.303 5.303a.75.75 0 0 1-1.06 1.06l-5.304-5.302-5.303 5.303a.75.75 0 0 1-1.061-1.06l5.303-5.304-5.303-5.303a.75.75 0 0 1 0-1.061Z'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M5.614 5.614a.75.75 0 0 1 1.06 0l5.304 5.303 5.303-5.303a.75.75 0 0 1 1.06 1.06l-5.302 5.304 5.303 5.303a.75.75 0 0 1-1.06 1.06l-5.304-5.302-5.303 5.303a.75.75 0 0 1-1.061-1.06l5.303-5.304-5.303-5.303a.75.75 0 0 1 0-1.061Z'/%3E%3C/svg%3E");mask-position:center;-webkit-mask-position:center;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--sgds-icon-size-md)}.btn-close-light:before{color:var(--sgds-default-color-on-dark)}.btn-close-dark:before{color:var(--sgds-default-color-on-light)}.btn-close:hover{background-color:var(--sgds-default-bg-translucent)}.btn-close:focus,.btn-close:focus-visible{background-color:var(--sgds-default-bg-translucent);box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn-close-sm{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.btn-close.btn-close-sm:before{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=close-button.js.map

package/react/internals/CloseButton/sgds-close-button.cjs.js

@@ -47,7 +47,7 @@ class SgdsCloseButton extends sgdsElement["default"] {
     `;
     }
 }
-SgdsCloseButton.styles = [closeButton["default"]];
+SgdsCloseButton.styles = [...sgdsElement["default"].styles, closeButton["default"]];
 tslib.__decorate([
     decorators_js.property({ type: String })
 ], SgdsCloseButton.prototype, "ariaLabel", void 0);

package/react/internals/CloseButton/sgds-close-button.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-close-button.cjs.js","sources":["../../../../src/internals/CloseButton/sgds-close-button.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { html } from \"lit\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport closeButtonStyles from \"./close-button.css\";\nimport { classMap } from \"lit/directives/class-map.js\";\n/**\n * @summary Close button for closing actions. Used in Modal, Drawer, Alert and Toast.\n *\n * @cssprop --sgds-close-btn-border-radius - The border radius of close button border\n *\n */\nexport class SgdsCloseButton extends SgdsElement {\n  static styles = [closeButtonStyles];\n\n  @property({ type: String }) ariaLabel = \"Close button\";\n\n  /** Specifies a large or small button */\n  @property({ type: String, reflect: true }) size: \"sm\" | \"md\" = \"md\";\n\n  @property({ type: String, reflect: true }) variant: \"default\" | \"dark\" | \"light\" = \"default\";\n\n  private _handleClick() {\n    this.removeEventListener(\"click\", this._clickHandler);\n    this.addEventListener(\"click\", this._clickHandler);\n  }\n\n  private _clickHandler = () => {\n    return;\n  };\n\n  render() {\n    return html`\n      <button\n        class=${classMap({\n          \"btn-close\": true,\n          [`btn-close-${this.size}`]: this.size,\n          \"btn-close-light\": this.variant === \"light\",\n          \"btn-close-dark\": this.variant === \"dark\"\n        })}\n        aria-label=${ifDefined(this.ariaLabel)}\n        @click=${this._handleClick}\n      ></button>\n    `;\n  }\n}\n\nexport default SgdsCloseButton;\n"],"names":["SgdsElement","html","classMap","ifDefined","closeButtonStyles","__decorate","property"],"mappings":";;;;;;;;;;;;;AAMA;;;;;AAKG;AACG,MAAO,eAAgB,SAAQA,sBAAW,CAAA;AAAhD,IAAA,WAAA,GAAA;;QAG8B,IAAS,CAAA,SAAA,GAAG,cAAc,CAAC;;QAGZ,IAAI,CAAA,IAAA,GAAgB,IAAI,CAAC;QAEzB,IAAO,CAAA,OAAA,GAAiC,SAAS,CAAC;QAOrF,IAAa,CAAA,aAAA,GAAG,MAAK;YAC3B,OAAO;AACT,SAAC,CAAC;KAgBH;IAvBS,YAAY,GAAA;QAClB,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACtD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;KACpD;IAMD,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;AAEC,cAAA,EAAAC,oBAAQ,CAAC;AACf,YAAA,WAAW,EAAE,IAAI;YACjB,CAAC,CAAA,UAAA,EAAa,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI;AACrC,YAAA,iBAAiB,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;AAC3C,YAAA,gBAAgB,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;SAC1C,CAAC,CAAA;AACW,mBAAA,EAAAC,sBAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;AAC7B,eAAA,EAAA,IAAI,CAAC,YAAY,CAAA;;KAE7B,CAAC;KACH;;AA/BM,eAAA,CAAA,MAAM,GAAG,CAACC,sBAAiB,CAAC,CAAC;AAERC,gBAAA,CAAA;AAA3B,IAAAC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAA4B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGZD,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA0B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEzBD,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAmD,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}
+{"version":3,"file":"sgds-close-button.cjs.js","sources":["../../../../src/internals/CloseButton/sgds-close-button.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { html } from \"lit\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport closeButtonStyles from \"./close-button.css\";\nimport { classMap } from \"lit/directives/class-map.js\";\n/**\n * @summary Close button for closing actions. Used in Modal, Drawer, Alert and Toast.\n *\n * @cssprop --sgds-close-btn-border-radius - The border radius of close button border\n *\n */\nexport class SgdsCloseButton extends SgdsElement {\n  static styles = [...SgdsElement.styles, closeButtonStyles];\n\n  @property({ type: String }) ariaLabel = \"Close button\";\n\n  /** Specifies a large or small button */\n  @property({ type: String, reflect: true }) size: \"sm\" | \"md\" = \"md\";\n\n  @property({ type: String, reflect: true }) variant: \"default\" | \"dark\" | \"light\" = \"default\";\n\n  private _handleClick() {\n    this.removeEventListener(\"click\", this._clickHandler);\n    this.addEventListener(\"click\", this._clickHandler);\n  }\n\n  private _clickHandler = () => {\n    return;\n  };\n\n  render() {\n    return html`\n      <button\n        class=${classMap({\n          \"btn-close\": true,\n          [`btn-close-${this.size}`]: this.size,\n          \"btn-close-light\": this.variant === \"light\",\n          \"btn-close-dark\": this.variant === \"dark\"\n        })}\n        aria-label=${ifDefined(this.ariaLabel)}\n        @click=${this._handleClick}\n      ></button>\n    `;\n  }\n}\n\nexport default SgdsCloseButton;\n"],"names":["SgdsElement","html","classMap","ifDefined","closeButtonStyles","__decorate","property"],"mappings":";;;;;;;;;;;;;AAMA;;;;;AAKG;AACG,MAAO,eAAgB,SAAQA,sBAAW,CAAA;AAAhD,IAAA,WAAA,GAAA;;QAG8B,IAAS,CAAA,SAAA,GAAG,cAAc,CAAC;;QAGZ,IAAI,CAAA,IAAA,GAAgB,IAAI,CAAC;QAEzB,IAAO,CAAA,OAAA,GAAiC,SAAS,CAAC;QAOrF,IAAa,CAAA,aAAA,GAAG,MAAK;YAC3B,OAAO;AACT,SAAC,CAAC;KAgBH;IAvBS,YAAY,GAAA;QAClB,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACtD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;KACpD;IAMD,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;AAEC,cAAA,EAAAC,oBAAQ,CAAC;AACf,YAAA,WAAW,EAAE,IAAI;YACjB,CAAC,CAAA,UAAA,EAAa,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI;AACrC,YAAA,iBAAiB,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;AAC3C,YAAA,gBAAgB,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;SAC1C,CAAC,CAAA;AACW,mBAAA,EAAAC,sBAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;AAC7B,eAAA,EAAA,IAAI,CAAC,YAAY,CAAA;;KAE7B,CAAC;KACH;;AA/BM,eAAM,CAAA,MAAA,GAAG,CAAC,GAAGH,sBAAW,CAAC,MAAM,EAAEI,sBAAiB,CAA5C,CAA8C;AAE/BC,gBAAA,CAAA;AAA3B,IAAAC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAA4B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGZD,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA0B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEzBD,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAmD,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}

package/react/internals/CloseButton/sgds-close-button.js

@@ -43,7 +43,7 @@ class SgdsCloseButton extends SgdsElement {
     `;
     }
 }
-SgdsCloseButton.styles = [css_248z];
+SgdsCloseButton.styles = [...SgdsElement.styles, css_248z];
 __decorate([
     property({ type: String })
 ], SgdsCloseButton.prototype, "ariaLabel", void 0);

package/react/internals/CloseButton/sgds-close-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-close-button.js","sources":["../../../../src/internals/CloseButton/sgds-close-button.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { html } from \"lit\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport closeButtonStyles from \"./close-button.css\";\nimport { classMap } from \"lit/directives/class-map.js\";\n/**\n * @summary Close button for closing actions. Used in Modal, Drawer, Alert and Toast.\n *\n * @cssprop --sgds-close-btn-border-radius - The border radius of close button border\n *\n */\nexport class SgdsCloseButton extends SgdsElement {\n  static styles = [closeButtonStyles];\n\n  @property({ type: String }) ariaLabel = \"Close button\";\n\n  /** Specifies a large or small button */\n  @property({ type: String, reflect: true }) size: \"sm\" | \"md\" = \"md\";\n\n  @property({ type: String, reflect: true }) variant: \"default\" | \"dark\" | \"light\" = \"default\";\n\n  private _handleClick() {\n    this.removeEventListener(\"click\", this._clickHandler);\n    this.addEventListener(\"click\", this._clickHandler);\n  }\n\n  private _clickHandler = () => {\n    return;\n  };\n\n  render() {\n    return html`\n      <button\n        class=${classMap({\n          \"btn-close\": true,\n          [`btn-close-${this.size}`]: this.size,\n          \"btn-close-light\": this.variant === \"light\",\n          \"btn-close-dark\": this.variant === \"dark\"\n        })}\n        aria-label=${ifDefined(this.ariaLabel)}\n        @click=${this._handleClick}\n      ></button>\n    `;\n  }\n}\n\nexport default SgdsCloseButton;\n"],"names":["closeButtonStyles"],"mappings":";;;;;;;;;AAMA;;;;;AAKG;AACG,MAAO,eAAgB,SAAQ,WAAW,CAAA;AAAhD,IAAA,WAAA,GAAA;;QAG8B,IAAS,CAAA,SAAA,GAAG,cAAc,CAAC;;QAGZ,IAAI,CAAA,IAAA,GAAgB,IAAI,CAAC;QAEzB,IAAO,CAAA,OAAA,GAAiC,SAAS,CAAC;QAOrF,IAAa,CAAA,aAAA,GAAG,MAAK;YAC3B,OAAO;AACT,SAAC,CAAC;KAgBH;IAvBS,YAAY,GAAA;QAClB,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACtD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;KACpD;IAMD,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEC,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,WAAW,EAAE,IAAI;YACjB,CAAC,CAAA,UAAA,EAAa,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI;AACrC,YAAA,iBAAiB,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;AAC3C,YAAA,gBAAgB,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;SAC1C,CAAC,CAAA;AACW,mBAAA,EAAA,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;AAC7B,eAAA,EAAA,IAAI,CAAC,YAAY,CAAA;;KAE7B,CAAC;KACH;;AA/BM,eAAA,CAAA,MAAM,GAAG,CAACA,QAAiB,CAAC,CAAC;AAER,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAA4B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGZ,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA0B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEzB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAmD,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-close-button.js","sources":["../../../../src/internals/CloseButton/sgds-close-button.ts"],"sourcesContent":["import { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { html } from \"lit\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport closeButtonStyles from \"./close-button.css\";\nimport { classMap } from \"lit/directives/class-map.js\";\n/**\n * @summary Close button for closing actions. Used in Modal, Drawer, Alert and Toast.\n *\n * @cssprop --sgds-close-btn-border-radius - The border radius of close button border\n *\n */\nexport class SgdsCloseButton extends SgdsElement {\n  static styles = [...SgdsElement.styles, closeButtonStyles];\n\n  @property({ type: String }) ariaLabel = \"Close button\";\n\n  /** Specifies a large or small button */\n  @property({ type: String, reflect: true }) size: \"sm\" | \"md\" = \"md\";\n\n  @property({ type: String, reflect: true }) variant: \"default\" | \"dark\" | \"light\" = \"default\";\n\n  private _handleClick() {\n    this.removeEventListener(\"click\", this._clickHandler);\n    this.addEventListener(\"click\", this._clickHandler);\n  }\n\n  private _clickHandler = () => {\n    return;\n  };\n\n  render() {\n    return html`\n      <button\n        class=${classMap({\n          \"btn-close\": true,\n          [`btn-close-${this.size}`]: this.size,\n          \"btn-close-light\": this.variant === \"light\",\n          \"btn-close-dark\": this.variant === \"dark\"\n        })}\n        aria-label=${ifDefined(this.ariaLabel)}\n        @click=${this._handleClick}\n      ></button>\n    `;\n  }\n}\n\nexport default SgdsCloseButton;\n"],"names":["closeButtonStyles"],"mappings":";;;;;;;;;AAMA;;;;;AAKG;AACG,MAAO,eAAgB,SAAQ,WAAW,CAAA;AAAhD,IAAA,WAAA,GAAA;;QAG8B,IAAS,CAAA,SAAA,GAAG,cAAc,CAAC;;QAGZ,IAAI,CAAA,IAAA,GAAgB,IAAI,CAAC;QAEzB,IAAO,CAAA,OAAA,GAAiC,SAAS,CAAC;QAOrF,IAAa,CAAA,aAAA,GAAG,MAAK;YAC3B,OAAO;AACT,SAAC,CAAC;KAgBH;IAvBS,YAAY,GAAA;QAClB,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACtD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;KACpD;IAMD,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEC,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,WAAW,EAAE,IAAI;YACjB,CAAC,CAAA,UAAA,EAAa,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI;AACrC,YAAA,iBAAiB,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;AAC3C,YAAA,gBAAgB,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;SAC1C,CAAC,CAAA;AACW,mBAAA,EAAA,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;AAC7B,eAAA,EAAA,IAAI,CAAC,YAAY,CAAA;;KAE7B,CAAC;KACH;;AA/BM,eAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAiB,CAA5C,CAA8C;AAE/B,UAAA,CAAA;AAA3B,IAAA,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAA4B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGZ,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAA0B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEzB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAmD,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/react/styles/form-hint.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-1)}`;
+var css_248z = lit.css`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-1)}.form-text.disabled{opacity:var(--sgds-opacity-50)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=form-hint.cjs.js.map

package/react/styles/form-hint.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-1)}`;
+var css_248z = css`.form-text{color:var(--sgds-form-color-subtle);font-size:var(--sgds-font-size-1)}.form-text.disabled{opacity:var(--sgds-opacity-50)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=form-hint.js.map

package/react/styles/form-label.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`.form-label{margin-bottom:0}.form-check-label,.form-label{color:var(--sgds-form-color)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`;
+var css_248z = lit.css`.form-label{color:var(--sgds-form-color);margin-bottom:0}.form-label.disabled{opacity:var(--sgds-opacity-50)}.form-check-label{color:var(--sgds-form-color)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=form-label.cjs.js.map

package/react/styles/form-label.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`.form-label{margin-bottom:0}.form-check-label,.form-label{color:var(--sgds-form-color)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`;
+var css_248z = css`.form-label{color:var(--sgds-form-color);margin-bottom:0}.form-label.disabled{opacity:var(--sgds-opacity-50)}.form-check-label{color:var(--sgds-form-color)}.form-check-input:disabled~.form-check-label,.form-check-input[disabled]~.form-check-label{cursor:not-allowed}`;
 
 export { css_248z as default };
 //# sourceMappingURL=form-label.js.map

package/react/utils/formSubmitController.cjs.js

@@ -0,0 +1,64 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * A controller to help with form submission
+ */
+class FormSubmitController {
+    constructor(host, options) {
+        (this.host = host).addController(this);
+        this.options = Object.assign({ form: (input) => {
+                return input.closest("form");
+            } }, options);
+    }
+    hostConnected() {
+        this.form = this.options.form(this.host);
+    }
+    hostDisconnected() {
+        if (this.form) {
+            this.form = undefined;
+        }
+    }
+    /**
+     * Creates a temporary native HTML button that can participate in form and invoke form submits and reset
+     * Button is removed once action is performed
+     */
+    doAction(type, invoker) {
+        if (this.form) {
+            const button = document.createElement("button");
+            button.type = type;
+            button.style.position = "absolute";
+            button.style.width = "0";
+            button.style.height = "0";
+            button.style.clipPath = "inset(50%)";
+            button.style.overflow = "hidden";
+            button.style.whiteSpace = "nowrap";
+            // Pass form attributes through to the temporary button
+            if (invoker) {
+                ["formaction", "formmethod", "formnovalidate", "formtarget"].forEach(attr => {
+                    if (invoker.hasAttribute(attr)) {
+                        button.setAttribute(attr, invoker.getAttribute(attr));
+                    }
+                });
+            }
+            this.form.append(button);
+            button.click();
+            button.remove();
+        }
+    }
+    /** Resets the form, restoring all the control to their default value */
+    reset(invoker) {
+        this.doAction("reset", invoker);
+    }
+    /** Submits the form, triggering validation and form data injection. */
+    submit(invoker) {
+        // Calling form.submit() bypasses the submit event and constraint validation. To prevent this, we can inject a
+        // native submit button into the form, "click" it, then remove it to simulate a standard form submission.
+        this.doAction("submit", invoker);
+    }
+}
+
+exports.FormSubmitController = FormSubmitController;
+//# sourceMappingURL=formSubmitController.cjs.js.map

package/react/utils/formSubmitController.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formSubmitController.cjs.js","sources":["../../../src/utils/formSubmitController.ts"],"sourcesContent":["import type SgdsButton from \"../components/Button/sgds-button\";\nimport type { ReactiveController, ReactiveControllerHost } from \"lit\";\nimport SgdsElement from \"../base/sgds-element\";\nimport { SgdsInput } from \"../components\";\n\n/**\n * A controller to help with form submission\n */\nexport class FormSubmitController implements ReactiveController {\n  host?: ReactiveControllerHost & Element;\n  form?: HTMLFormElement | null;\n  options: FormSubmitControllerOptions;\n\n  constructor(host: ReactiveControllerHost & Element, options?: Partial<FormSubmitControllerOptions>) {\n    (this.host = host).addController(this);\n    this.options = {\n      form: (input: HTMLInputElement) => {\n        return input.closest(\"form\");\n      },\n      ...options\n    };\n  }\n\n  hostConnected() {\n    this.form = this.options.form(this.host);\n  }\n\n  hostDisconnected() {\n    if (this.form) {\n      this.form = undefined;\n    }\n  }\n  /**\n   * Creates a temporary native HTML button that can participate in form and invoke form submits and reset\n   * Button is removed once action is performed\n   */\n  doAction(type: \"submit\" | \"reset\", invoker?: HTMLInputElement | SgdsButton) {\n    if (this.form) {\n      const button = document.createElement(\"button\");\n      button.type = type;\n      button.style.position = \"absolute\";\n      button.style.width = \"0\";\n      button.style.height = \"0\";\n      button.style.clipPath = \"inset(50%)\";\n      button.style.overflow = \"hidden\";\n      button.style.whiteSpace = \"nowrap\";\n\n      // Pass form attributes through to the temporary button\n      if (invoker) {\n        [\"formaction\", \"formmethod\", \"formnovalidate\", \"formtarget\"].forEach(attr => {\n          if (invoker.hasAttribute(attr)) {\n            button.setAttribute(attr, invoker.getAttribute(attr));\n          }\n        });\n      }\n\n      this.form.append(button);\n      button.click();\n      button.remove();\n    }\n  }\n\n  /** Resets the form, restoring all the control to their default value */\n  reset(invoker?: HTMLInputElement | SgdsButton) {\n    this.doAction(\"reset\", invoker);\n  }\n\n  /** Submits the form, triggering validation and form data injection. */\n  submit(invoker?: HTMLInputElement | SgdsButton) {\n    // Calling form.submit() bypasses the submit event and constraint validation. To prevent this, we can inject a\n    // native submit button into the form, \"click\" it, then remove it to simulate a standard form submission.\n    this.doAction(\"submit\", invoker);\n  }\n}\n\nexport interface FormSubmitControllerOptions {\n  /** A function that returns the form containing the form control. */\n  form: (input: unknown) => HTMLFormElement | null;\n}\n\nexport interface SgdsFormControl extends SgdsElement {\n  // Form attributes\n  name: string;\n  value: unknown;\n  disabled?: boolean;\n  defaultValue?: unknown;\n  defaultChecked?: boolean;\n  form?: HTMLFormElement;\n  valid?: boolean;\n  invalid?: boolean;\n\n  // Constraint validation attributes\n  pattern?: string;\n  min?: number | string | Date;\n  max?: number | string | Date;\n  step?: number | \"any\";\n  required?: boolean;\n  minlength?: number;\n  maxlength?: number;\n\n  input?: HTMLInputElement | SgdsInput;\n}\n"],"names":[],"mappings":";;;;;AAKA;;AAEG;MACU,oBAAoB,CAAA;IAK/B,WAAY,CAAA,IAAsC,EAAE,OAA8C,EAAA;QAChG,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;QACvC,IAAI,CAAC,OAAO,GACV,MAAA,CAAA,MAAA,CAAA,EAAA,IAAI,EAAE,CAAC,KAAuB,KAAI;AAChC,gBAAA,OAAO,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;aAC9B,EAAA,EACE,OAAO,CACX,CAAC;KACH;IAED,aAAa,GAAA;AACX,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC1C;IAED,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,YAAA,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;SACvB;KACF;AACD;;;AAGG;IACH,QAAQ,CAAC,IAAwB,EAAE,OAAuC,EAAA;AACxE,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;AAChD,YAAA,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC;AACnB,YAAA,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;AACnC,YAAA,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC;AACzB,YAAA,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;AAC1B,YAAA,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,YAAY,CAAC;AACrC,YAAA,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;AACjC,YAAA,MAAM,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;;YAGnC,IAAI,OAAO,EAAE;AACX,gBAAA,CAAC,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,YAAY,CAAC,CAAC,OAAO,CAAC,IAAI,IAAG;AAC1E,oBAAA,IAAI,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE;AAC9B,wBAAA,MAAM,CAAC,YAAY,CAAC,IAAI,EAAE,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC;qBACvD;AACH,iBAAC,CAAC,CAAC;aACJ;AAED,YAAA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;YACzB,MAAM,CAAC,KAAK,EAAE,CAAC;YACf,MAAM,CAAC,MAAM,EAAE,CAAC;SACjB;KACF;;AAGD,IAAA,KAAK,CAAC,OAAuC,EAAA;AAC3C,QAAA,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;KACjC;;AAGD,IAAA,MAAM,CAAC,OAAuC,EAAA;;;AAG5C,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;KAClC;AACF;;;;"}

package/react/utils/formSubmitController.js

@@ -0,0 +1,60 @@
+'use client';
+/**
+ * A controller to help with form submission
+ */
+class FormSubmitController {
+    constructor(host, options) {
+        (this.host = host).addController(this);
+        this.options = Object.assign({ form: (input) => {
+                return input.closest("form");
+            } }, options);
+    }
+    hostConnected() {
+        this.form = this.options.form(this.host);
+    }
+    hostDisconnected() {
+        if (this.form) {
+            this.form = undefined;
+        }
+    }
+    /**
+     * Creates a temporary native HTML button that can participate in form and invoke form submits and reset
+     * Button is removed once action is performed
+     */
+    doAction(type, invoker) {
+        if (this.form) {
+            const button = document.createElement("button");
+            button.type = type;
+            button.style.position = "absolute";
+            button.style.width = "0";
+            button.style.height = "0";
+            button.style.clipPath = "inset(50%)";
+            button.style.overflow = "hidden";
+            button.style.whiteSpace = "nowrap";
+            // Pass form attributes through to the temporary button
+            if (invoker) {
+                ["formaction", "formmethod", "formnovalidate", "formtarget"].forEach(attr => {
+                    if (invoker.hasAttribute(attr)) {
+                        button.setAttribute(attr, invoker.getAttribute(attr));
+                    }
+                });
+            }
+            this.form.append(button);
+            button.click();
+            button.remove();
+        }
+    }
+    /** Resets the form, restoring all the control to their default value */
+    reset(invoker) {
+        this.doAction("reset", invoker);
+    }
+    /** Submits the form, triggering validation and form data injection. */
+    submit(invoker) {
+        // Calling form.submit() bypasses the submit event and constraint validation. To prevent this, we can inject a
+        // native submit button into the form, "click" it, then remove it to simulate a standard form submission.
+        this.doAction("submit", invoker);
+    }
+}
+
+export { FormSubmitController };
+//# sourceMappingURL=formSubmitController.js.map

package/react/utils/formSubmitController.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formSubmitController.js","sources":["../../../src/utils/formSubmitController.ts"],"sourcesContent":["import type SgdsButton from \"../components/Button/sgds-button\";\nimport type { ReactiveController, ReactiveControllerHost } from \"lit\";\nimport SgdsElement from \"../base/sgds-element\";\nimport { SgdsInput } from \"../components\";\n\n/**\n * A controller to help with form submission\n */\nexport class FormSubmitController implements ReactiveController {\n  host?: ReactiveControllerHost & Element;\n  form?: HTMLFormElement | null;\n  options: FormSubmitControllerOptions;\n\n  constructor(host: ReactiveControllerHost & Element, options?: Partial<FormSubmitControllerOptions>) {\n    (this.host = host).addController(this);\n    this.options = {\n      form: (input: HTMLInputElement) => {\n        return input.closest(\"form\");\n      },\n      ...options\n    };\n  }\n\n  hostConnected() {\n    this.form = this.options.form(this.host);\n  }\n\n  hostDisconnected() {\n    if (this.form) {\n      this.form = undefined;\n    }\n  }\n  /**\n   * Creates a temporary native HTML button that can participate in form and invoke form submits and reset\n   * Button is removed once action is performed\n   */\n  doAction(type: \"submit\" | \"reset\", invoker?: HTMLInputElement | SgdsButton) {\n    if (this.form) {\n      const button = document.createElement(\"button\");\n      button.type = type;\n      button.style.position = \"absolute\";\n      button.style.width = \"0\";\n      button.style.height = \"0\";\n      button.style.clipPath = \"inset(50%)\";\n      button.style.overflow = \"hidden\";\n      button.style.whiteSpace = \"nowrap\";\n\n      // Pass form attributes through to the temporary button\n      if (invoker) {\n        [\"formaction\", \"formmethod\", \"formnovalidate\", \"formtarget\"].forEach(attr => {\n          if (invoker.hasAttribute(attr)) {\n            button.setAttribute(attr, invoker.getAttribute(attr));\n          }\n        });\n      }\n\n      this.form.append(button);\n      button.click();\n      button.remove();\n    }\n  }\n\n  /** Resets the form, restoring all the control to their default value */\n  reset(invoker?: HTMLInputElement | SgdsButton) {\n    this.doAction(\"reset\", invoker);\n  }\n\n  /** Submits the form, triggering validation and form data injection. */\n  submit(invoker?: HTMLInputElement | SgdsButton) {\n    // Calling form.submit() bypasses the submit event and constraint validation. To prevent this, we can inject a\n    // native submit button into the form, \"click\" it, then remove it to simulate a standard form submission.\n    this.doAction(\"submit\", invoker);\n  }\n}\n\nexport interface FormSubmitControllerOptions {\n  /** A function that returns the form containing the form control. */\n  form: (input: unknown) => HTMLFormElement | null;\n}\n\nexport interface SgdsFormControl extends SgdsElement {\n  // Form attributes\n  name: string;\n  value: unknown;\n  disabled?: boolean;\n  defaultValue?: unknown;\n  defaultChecked?: boolean;\n  form?: HTMLFormElement;\n  valid?: boolean;\n  invalid?: boolean;\n\n  // Constraint validation attributes\n  pattern?: string;\n  min?: number | string | Date;\n  max?: number | string | Date;\n  step?: number | \"any\";\n  required?: boolean;\n  minlength?: number;\n  maxlength?: number;\n\n  input?: HTMLInputElement | SgdsInput;\n}\n"],"names":[],"mappings":";AAKA;;AAEG;MACU,oBAAoB,CAAA;IAK/B,WAAY,CAAA,IAAsC,EAAE,OAA8C,EAAA;QAChG,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;QACvC,IAAI,CAAC,OAAO,GACV,MAAA,CAAA,MAAA,CAAA,EAAA,IAAI,EAAE,CAAC,KAAuB,KAAI;AAChC,gBAAA,OAAO,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;aAC9B,EAAA,EACE,OAAO,CACX,CAAC;KACH;IAED,aAAa,GAAA;AACX,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC1C;IAED,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,YAAA,IAAI,CAAC,IAAI,GAAG,SAAS,CAAC;SACvB;KACF;AACD;;;AAGG;IACH,QAAQ,CAAC,IAAwB,EAAE,OAAuC,EAAA;AACxE,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;AAChD,YAAA,MAAM,CAAC,IAAI,GAAG,IAAI,CAAC;AACnB,YAAA,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;AACnC,YAAA,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC;AACzB,YAAA,MAAM,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC;AAC1B,YAAA,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,YAAY,CAAC;AACrC,YAAA,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;AACjC,YAAA,MAAM,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC;;YAGnC,IAAI,OAAO,EAAE;AACX,gBAAA,CAAC,YAAY,EAAE,YAAY,EAAE,gBAAgB,EAAE,YAAY,CAAC,CAAC,OAAO,CAAC,IAAI,IAAG;AAC1E,oBAAA,IAAI,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE;AAC9B,wBAAA,MAAM,CAAC,YAAY,CAAC,IAAI,EAAE,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC;qBACvD;AACH,iBAAC,CAAC,CAAC;aACJ;AAED,YAAA,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;YACzB,MAAM,CAAC,KAAK,EAAE,CAAC;YACf,MAAM,CAAC,MAAM,EAAE,CAAC;SACjB;KACF;;AAGD,IAAA,KAAK,CAAC,OAAuC,EAAA;AAC3C,QAAA,IAAI,CAAC,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;KACjC;;AAGD,IAAA,MAAM,CAAC,OAAuC,EAAA;;;AAG5C,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;KAClC;AACF;;;;"}