@govtechsg/sgds-web-component 3.30.1-rc.0 → 3.30.1-rc.10

package/react/components/Subnav/subnav.cjs.js

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/Subnav/subnav.css
-var css_248z = require("lit").css`:host{display:block;position:relative;z-index:var(--sgds-z-index-sticky)}nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);position:relative;width:100%}.subnav{flex-direction:column;flex-wrap:nowrap}.header-container,.subnav{align-items:flex-start;display:flex}.header-container{gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);width:100%}slot[name=header]::slotted(*){--sgds-margin-xs:var(--sgds-margin-none);flex:1 1 auto;margin-bottom:var(--sgds-margin-xs,--sgds-margin-none);padding-top:var(--sgds-padding-none)}.subnav-toggler{cursor:pointer;transition:transform .2s ease-in-out}.subnav-toggler:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.subnav:not(.collapsed) .subnav-toggler{transform:rotate(-180deg)}.subnav-nav-group{display:flex;flex:1 1 0}.subnav-nav,.subnav-nav-group{align-items:flex-start;flex-direction:column;width:100%}.subnav-nav{display:none;overflow-y:auto;transition:transform .2s ease-in-out}.subnav-nav ::slotted(*){width:100%}.subnav-actions{bottom:0;display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);position:sticky;width:100%}.no-actions{display:none}slot[name=actions]::slotted(*){width:100%}@media screen and (max-width:1023px){.subnav.sgds-container{max-width:inherit}}@media screen and (min-width:512px){.subnav-actions{flex-direction:row}}@media screen and (min-width:768px){nav{border-bottom:var(--sgds-border-width-0)}.subnav{flex-direction:row}.subnav.collapsed{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.header-container{padding:var(--sgds-padding-lg) var(--sgds-padding-2-xl)}.subnav-nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);left:0;position:absolute;top:100%}.subnav-actions{align-items:center;flex-direction:row;padding:var(--sgds-padding-sm) var(--sgds-padding-2-xl) var(--sgds-padding-sm) var(--sgds-padding-none);position:inherit}}@media screen and (min-width:1024px){nav{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);position:inherit}.subnav{flex-wrap:wrap;gap:var(--sgds-gap-xl);row-gap:var(--sgds-gap-none)}.subnav.collapsed{border-bottom:var(--sgds-border-width-0)}.header-container{flex:1;padding:var(--sgds-padding-none);width:auto}slot[name=header]::slotted(*){padding-top:var(--sgds-padding-lg);white-space:nowrap}.subnav-nav-group{align-items:center;flex:inherit;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-xl);justify-content:space-between;row-gap:var(--sgds-gap-none);width:auto}.subnav-nav{align-items:center;background-color:inherit;border-bottom:var(--sgds-border-width-0);display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-lg);overflow-y:inherit;position:inherit;row-gap:0;transition:none;width:auto}.subnav-nav ::slotted(*){width:inherit}.subnav-toggler{display:none}.subnav-actions{padding:var(--sgds-padding-sm) var(--sgds-padding-none);width:auto}slot[name=actions]::slotted(*){width:inherit}}`;
+var css_248z = require("lit").css`:host{display:block;position:relative;z-index:var(--sgds-z-index-sticky)}nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);position:relative;width:100%}.subnav{flex-direction:column;flex-wrap:nowrap}.header-container,.subnav{align-items:flex-start;display:flex}.header-container{gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);width:100%}.header-content{flex:1 1 auto}.subnav-toggler{cursor:pointer;transition:transform .2s ease-in-out}.subnav-toggler:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.subnav:not(.collapsed) .subnav-toggler{transform:rotate(-180deg)}.subnav-nav-group{display:flex;flex:1 1 0}.subnav-nav,.subnav-nav-group{align-items:flex-start;flex-direction:column;width:100%}.subnav-nav{display:none;overflow-y:auto;transition:transform .2s ease-in-out}.subnav-nav ::slotted(*){width:100%}.subnav-actions{bottom:0;display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);position:sticky;width:100%}.no-actions{display:none}slot[name=actions]::slotted(*){width:100%}@media screen and (max-width:1023px){.subnav.sgds-container{max-width:inherit}}@media screen and (min-width:512px){.subnav-actions{flex-direction:row}}@media screen and (min-width:768px){nav{border-bottom:var(--sgds-border-width-0)}.subnav{flex-direction:row}.subnav.collapsed{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.header-container{padding:var(--sgds-padding-lg) var(--sgds-padding-2-xl)}.subnav-nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);left:0;position:absolute;top:100%}.subnav-actions{align-items:center;flex-direction:row;padding:var(--sgds-padding-sm) var(--sgds-padding-2-xl) var(--sgds-padding-sm) var(--sgds-padding-none);position:inherit}}@media screen and (min-width:1024px){nav{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);position:inherit}.subnav{flex-wrap:wrap;gap:var(--sgds-gap-xl);row-gap:var(--sgds-gap-none)}.subnav.collapsed{border-bottom:var(--sgds-border-width-0)}.header-container{flex:1;padding:var(--sgds-padding-none);width:auto}.header-content{padding-top:var(--sgds-padding-lg);white-space:nowrap}.subnav-nav-group{align-items:center;flex:inherit;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-xl);justify-content:space-between;row-gap:var(--sgds-gap-none);width:auto}.subnav-nav{align-items:center;background-color:inherit;border-bottom:var(--sgds-border-width-0);display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-lg);overflow-y:inherit;position:inherit;row-gap:0;transition:none;width:auto}.subnav-nav ::slotted(*){width:inherit}.subnav-toggler{display:none}.subnav-actions{padding:var(--sgds-padding-sm) var(--sgds-padding-none);width:auto}slot[name=actions]::slotted(*){width:inherit}}`;
 //#endregion
 exports.default = css_248z;
 

package/react/components/Subnav/subnav.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"subnav.cjs.js","names":[],"sources":["../../../../src/components/Subnav/subnav.css"],"sourcesContent":[":host {\n  display: block;\n  position: relative;\n  z-index: var(--sgds-z-index-sticky);\n}\n\nnav {\n  background-color: var(--sgds-surface-raised);\n  border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n  width: 100%;\n  position: relative;\n}\n\n.subnav {\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.header-container {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--sgds-gap-md);\n  width: 100%;\n  padding: var(--sgds-padding-md) var(--sgds-padding-lg);\n}\n\nslot[name=\"header\"]::slotted(*) {\n  --sgds-margin-xs: var(--sgds-margin-none);\n  flex: 1 1 auto;\n  margin-bottom: var(--sgds-margin-xs, --sgds-margin-none);\n  padding-top: var(--sgds-padding-none);\n}\n\n.subnav-toggler {\n  cursor: pointer;\n  transition: transform 0.2s ease-in-out;\n}\n\n.subnav-toggler:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.subnav:not(.collapsed) .subnav-toggler {\n  transform: rotate(-180deg);\n}\n\n.subnav-nav-group {\n  display: flex;\n  flex: 1 1 0;\n  flex-direction: column;\n  width: 100%;\n  align-items: flex-start;\n}\n\n.subnav-nav {\n  display: none;\n  flex-direction: column;\n  align-items: flex-start;\n  width: 100%;\n  transition: transform 0.2s ease-in-out;\n  overflow-y: auto;\n}\n\n.subnav-nav ::slotted(*) {\n  width: 100%;\n}\n\n.subnav-actions {\n  display: flex;\n  flex-direction: column;\n  gap: var(--sgds-gap-md);\n  padding: var(--sgds-padding-md) var(--sgds-padding-lg);\n  position: sticky;\n  bottom: 0;\n  width: 100%;\n}\n\n.no-actions {\n  display: none;\n}\n\nslot[name=\"actions\"]::slotted(*) {\n  width: 100%;\n}\n\n@media screen and (max-width: 1023px) {\n  .subnav.sgds-container {\n    max-width: inherit;\n  }\n}\n\n@media screen and (min-width: 512px) {\n  .subnav-actions {\n    flex-direction: row;\n  }\n}\n\n@media screen and (min-width: 768px) {\n  nav {\n    border-bottom: var(--sgds-border-width-0);\n  }\n\n  .subnav {\n    flex-direction: row;\n  }\n\n  .subnav.collapsed {\n    border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n  }\n\n  .header-container {\n    padding: var(--sgds-padding-lg) var(--sgds-padding-2-xl);\n  }\n\n  .subnav-nav {\n    position: absolute;\n    top: 100%;\n    left: 0px;\n    background-color: var(--sgds-surface-raised);\n    border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n  }\n\n  .subnav-actions {\n    flex-direction: row;\n    align-items: center;\n    padding: var(--sgds-padding-sm) var(--sgds-padding-2-xl) var(--sgds-padding-sm) var(--sgds-padding-none);\n    position: inherit;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  nav {\n    position: inherit;\n    border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n  }\n\n  .subnav {\n    flex-wrap: wrap;\n    gap: var(--sgds-gap-xl);\n    row-gap: var(--sgds-gap-none);\n  }\n\n  .subnav.collapsed {\n    border-bottom: var(--sgds-border-width-0);\n  }\n\n  .header-container {\n    padding: var(--sgds-padding-none);\n    width: auto;\n    flex: 1;\n  }\n\n  slot[name=\"header\"]::slotted(*) {\n    padding-top: var(--sgds-padding-lg);\n    white-space: nowrap;\n  }\n\n  .subnav-nav-group {\n    flex-wrap: wrap;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    gap: var(--sgds-gap-xl);\n    row-gap: var(--sgds-gap-none);\n    flex: inherit;\n    width: auto;\n  }\n\n  .subnav-nav {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--sgds-gap-lg);\n    row-gap: 0;\n    align-items: center;\n    flex-direction: row;\n    overflow-y: inherit;\n    transition: none;\n    position: inherit;\n    background-color: inherit;\n    border-bottom: var(--sgds-border-width-0);\n    width: auto;\n  }\n\n  .subnav-nav ::slotted(*) {\n    width: inherit;\n  }\n\n  .subnav-toggler {\n    display: none;\n  }\n\n  .subnav-actions {\n    padding: var(--sgds-padding-sm) var(--sgds-padding-none);\n    width: auto;\n  }\n\n  slot[name=\"actions\"]::slotted(*) {\n    width: inherit;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"subnav.cjs.js","names":[],"sources":["../../../../src/components/Subnav/subnav.css"],"sourcesContent":[":host {\n  display: block;\n  position: relative;\n  z-index: var(--sgds-z-index-sticky);\n}\n\nnav {\n  background-color: var(--sgds-surface-raised);\n  border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n  width: 100%;\n  position: relative;\n}\n\n.subnav {\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.header-container {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--sgds-gap-md);\n  width: 100%;\n  padding: var(--sgds-padding-md) var(--sgds-padding-lg);\n}\n\n.header-content {\n  flex: 1 1 auto;\n}\n\n.subnav-toggler {\n  cursor: pointer;\n  transition: transform 0.2s ease-in-out;\n}\n\n.subnav-toggler:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.subnav:not(.collapsed) .subnav-toggler {\n  transform: rotate(-180deg);\n}\n\n.subnav-nav-group {\n  display: flex;\n  flex: 1 1 0;\n  flex-direction: column;\n  width: 100%;\n  align-items: flex-start;\n}\n\n.subnav-nav {\n  display: none;\n  flex-direction: column;\n  align-items: flex-start;\n  width: 100%;\n  transition: transform 0.2s ease-in-out;\n  overflow-y: auto;\n}\n\n.subnav-nav ::slotted(*) {\n  width: 100%;\n}\n\n.subnav-actions {\n  display: flex;\n  flex-direction: column;\n  gap: var(--sgds-gap-md);\n  padding: var(--sgds-padding-md) var(--sgds-padding-lg);\n  position: sticky;\n  bottom: 0;\n  width: 100%;\n}\n\n.no-actions {\n  display: none;\n}\n\nslot[name=\"actions\"]::slotted(*) {\n  width: 100%;\n}\n\n@media screen and (max-width: 1023px) {\n  .subnav.sgds-container {\n    max-width: inherit;\n  }\n}\n\n@media screen and (min-width: 512px) {\n  .subnav-actions {\n    flex-direction: row;\n  }\n}\n\n@media screen and (min-width: 768px) {\n  nav {\n    border-bottom: var(--sgds-border-width-0);\n  }\n\n  .subnav {\n    flex-direction: row;\n  }\n\n  .subnav.collapsed {\n    border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n  }\n\n  .header-container {\n    padding: var(--sgds-padding-lg) var(--sgds-padding-2-xl);\n  }\n\n  .subnav-nav {\n    position: absolute;\n    top: 100%;\n    left: 0px;\n    background-color: var(--sgds-surface-raised);\n    border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n  }\n\n  .subnav-actions {\n    flex-direction: row;\n    align-items: center;\n    padding: var(--sgds-padding-sm) var(--sgds-padding-2-xl) var(--sgds-padding-sm) var(--sgds-padding-none);\n    position: inherit;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  nav {\n    position: inherit;\n    border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n  }\n\n  .subnav {\n    flex-wrap: wrap;\n    gap: var(--sgds-gap-xl);\n    row-gap: var(--sgds-gap-none);\n  }\n\n  .subnav.collapsed {\n    border-bottom: var(--sgds-border-width-0);\n  }\n\n  .header-container {\n    padding: var(--sgds-padding-none);\n    width: auto;\n    flex: 1;\n  }\n\n  .header-content {\n    padding-top: var(--sgds-padding-lg);\n    white-space: nowrap;\n  }\n\n  .subnav-nav-group {\n    flex-wrap: wrap;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    gap: var(--sgds-gap-xl);\n    row-gap: var(--sgds-gap-none);\n    flex: inherit;\n    width: auto;\n  }\n\n  .subnav-nav {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--sgds-gap-lg);\n    row-gap: 0;\n    align-items: center;\n    flex-direction: row;\n    overflow-y: inherit;\n    transition: none;\n    position: inherit;\n    background-color: inherit;\n    border-bottom: var(--sgds-border-width-0);\n    width: auto;\n  }\n\n  .subnav-nav ::slotted(*) {\n    width: inherit;\n  }\n\n  .subnav-toggler {\n    display: none;\n  }\n\n  .subnav-actions {\n    padding: var(--sgds-padding-sm) var(--sgds-padding-none);\n    width: auto;\n  }\n\n  slot[name=\"actions\"]::slotted(*) {\n    width: inherit;\n  }\n}\n"],"mappings":""}

package/react/components/Subnav/subnav.js

@@ -1,7 +1,7 @@
 "use client";
 import { css } from "lit";
 //#region src/components/Subnav/subnav.css
-var css_248z = css`:host{display:block;position:relative;z-index:var(--sgds-z-index-sticky)}nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);position:relative;width:100%}.subnav{flex-direction:column;flex-wrap:nowrap}.header-container,.subnav{align-items:flex-start;display:flex}.header-container{gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);width:100%}slot[name=header]::slotted(*){--sgds-margin-xs:var(--sgds-margin-none);flex:1 1 auto;margin-bottom:var(--sgds-margin-xs,--sgds-margin-none);padding-top:var(--sgds-padding-none)}.subnav-toggler{cursor:pointer;transition:transform .2s ease-in-out}.subnav-toggler:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.subnav:not(.collapsed) .subnav-toggler{transform:rotate(-180deg)}.subnav-nav-group{display:flex;flex:1 1 0}.subnav-nav,.subnav-nav-group{align-items:flex-start;flex-direction:column;width:100%}.subnav-nav{display:none;overflow-y:auto;transition:transform .2s ease-in-out}.subnav-nav ::slotted(*){width:100%}.subnav-actions{bottom:0;display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);position:sticky;width:100%}.no-actions{display:none}slot[name=actions]::slotted(*){width:100%}@media screen and (max-width:1023px){.subnav.sgds-container{max-width:inherit}}@media screen and (min-width:512px){.subnav-actions{flex-direction:row}}@media screen and (min-width:768px){nav{border-bottom:var(--sgds-border-width-0)}.subnav{flex-direction:row}.subnav.collapsed{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.header-container{padding:var(--sgds-padding-lg) var(--sgds-padding-2-xl)}.subnav-nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);left:0;position:absolute;top:100%}.subnav-actions{align-items:center;flex-direction:row;padding:var(--sgds-padding-sm) var(--sgds-padding-2-xl) var(--sgds-padding-sm) var(--sgds-padding-none);position:inherit}}@media screen and (min-width:1024px){nav{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);position:inherit}.subnav{flex-wrap:wrap;gap:var(--sgds-gap-xl);row-gap:var(--sgds-gap-none)}.subnav.collapsed{border-bottom:var(--sgds-border-width-0)}.header-container{flex:1;padding:var(--sgds-padding-none);width:auto}slot[name=header]::slotted(*){padding-top:var(--sgds-padding-lg);white-space:nowrap}.subnav-nav-group{align-items:center;flex:inherit;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-xl);justify-content:space-between;row-gap:var(--sgds-gap-none);width:auto}.subnav-nav{align-items:center;background-color:inherit;border-bottom:var(--sgds-border-width-0);display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-lg);overflow-y:inherit;position:inherit;row-gap:0;transition:none;width:auto}.subnav-nav ::slotted(*){width:inherit}.subnav-toggler{display:none}.subnav-actions{padding:var(--sgds-padding-sm) var(--sgds-padding-none);width:auto}slot[name=actions]::slotted(*){width:inherit}}`;
+var css_248z = css`:host{display:block;position:relative;z-index:var(--sgds-z-index-sticky)}nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);position:relative;width:100%}.subnav{flex-direction:column;flex-wrap:nowrap}.header-container,.subnav{align-items:flex-start;display:flex}.header-container{gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);width:100%}.header-content{flex:1 1 auto}.subnav-toggler{cursor:pointer;transition:transform .2s ease-in-out}.subnav-toggler:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.subnav:not(.collapsed) .subnav-toggler{transform:rotate(-180deg)}.subnav-nav-group{display:flex;flex:1 1 0}.subnav-nav,.subnav-nav-group{align-items:flex-start;flex-direction:column;width:100%}.subnav-nav{display:none;overflow-y:auto;transition:transform .2s ease-in-out}.subnav-nav ::slotted(*){width:100%}.subnav-actions{bottom:0;display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);position:sticky;width:100%}.no-actions{display:none}slot[name=actions]::slotted(*){width:100%}@media screen and (max-width:1023px){.subnav.sgds-container{max-width:inherit}}@media screen and (min-width:512px){.subnav-actions{flex-direction:row}}@media screen and (min-width:768px){nav{border-bottom:var(--sgds-border-width-0)}.subnav{flex-direction:row}.subnav.collapsed{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.header-container{padding:var(--sgds-padding-lg) var(--sgds-padding-2-xl)}.subnav-nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);left:0;position:absolute;top:100%}.subnav-actions{align-items:center;flex-direction:row;padding:var(--sgds-padding-sm) var(--sgds-padding-2-xl) var(--sgds-padding-sm) var(--sgds-padding-none);position:inherit}}@media screen and (min-width:1024px){nav{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);position:inherit}.subnav{flex-wrap:wrap;gap:var(--sgds-gap-xl);row-gap:var(--sgds-gap-none)}.subnav.collapsed{border-bottom:var(--sgds-border-width-0)}.header-container{flex:1;padding:var(--sgds-padding-none);width:auto}.header-content{padding-top:var(--sgds-padding-lg);white-space:nowrap}.subnav-nav-group{align-items:center;flex:inherit;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-xl);justify-content:space-between;row-gap:var(--sgds-gap-none);width:auto}.subnav-nav{align-items:center;background-color:inherit;border-bottom:var(--sgds-border-width-0);display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-lg);overflow-y:inherit;position:inherit;row-gap:0;transition:none;width:auto}.subnav-nav ::slotted(*){width:inherit}.subnav-toggler{display:none}.subnav-actions{padding:var(--sgds-padding-sm) var(--sgds-padding-none);width:auto}slot[name=actions]::slotted(*){width:inherit}}`;
 //#endregion
 export { css_248z as default };
 

package/react/components/Subnav/subnav.js.map

@@ -1 +1 @@
-{"version":3,"file":"subnav.js","names":[],"sources":["../../../../src/components/Subnav/subnav.css"],"sourcesContent":[":host {\n  display: block;\n  position: relative;\n  z-index: var(--sgds-z-index-sticky);\n}\n\nnav {\n  background-color: var(--sgds-surface-raised);\n  border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n  width: 100%;\n  position: relative;\n}\n\n.subnav {\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.header-container {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--sgds-gap-md);\n  width: 100%;\n  padding: var(--sgds-padding-md) var(--sgds-padding-lg);\n}\n\nslot[name=\"header\"]::slotted(*) {\n  --sgds-margin-xs: var(--sgds-margin-none);\n  flex: 1 1 auto;\n  margin-bottom: var(--sgds-margin-xs, --sgds-margin-none);\n  padding-top: var(--sgds-padding-none);\n}\n\n.subnav-toggler {\n  cursor: pointer;\n  transition: transform 0.2s ease-in-out;\n}\n\n.subnav-toggler:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.subnav:not(.collapsed) .subnav-toggler {\n  transform: rotate(-180deg);\n}\n\n.subnav-nav-group {\n  display: flex;\n  flex: 1 1 0;\n  flex-direction: column;\n  width: 100%;\n  align-items: flex-start;\n}\n\n.subnav-nav {\n  display: none;\n  flex-direction: column;\n  align-items: flex-start;\n  width: 100%;\n  transition: transform 0.2s ease-in-out;\n  overflow-y: auto;\n}\n\n.subnav-nav ::slotted(*) {\n  width: 100%;\n}\n\n.subnav-actions {\n  display: flex;\n  flex-direction: column;\n  gap: var(--sgds-gap-md);\n  padding: var(--sgds-padding-md) var(--sgds-padding-lg);\n  position: sticky;\n  bottom: 0;\n  width: 100%;\n}\n\n.no-actions {\n  display: none;\n}\n\nslot[name=\"actions\"]::slotted(*) {\n  width: 100%;\n}\n\n@media screen and (max-width: 1023px) {\n  .subnav.sgds-container {\n    max-width: inherit;\n  }\n}\n\n@media screen and (min-width: 512px) {\n  .subnav-actions {\n    flex-direction: row;\n  }\n}\n\n@media screen and (min-width: 768px) {\n  nav {\n    border-bottom: var(--sgds-border-width-0);\n  }\n\n  .subnav {\n    flex-direction: row;\n  }\n\n  .subnav.collapsed {\n    border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n  }\n\n  .header-container {\n    padding: var(--sgds-padding-lg) var(--sgds-padding-2-xl);\n  }\n\n  .subnav-nav {\n    position: absolute;\n    top: 100%;\n    left: 0px;\n    background-color: var(--sgds-surface-raised);\n    border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n  }\n\n  .subnav-actions {\n    flex-direction: row;\n    align-items: center;\n    padding: var(--sgds-padding-sm) var(--sgds-padding-2-xl) var(--sgds-padding-sm) var(--sgds-padding-none);\n    position: inherit;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  nav {\n    position: inherit;\n    border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n  }\n\n  .subnav {\n    flex-wrap: wrap;\n    gap: var(--sgds-gap-xl);\n    row-gap: var(--sgds-gap-none);\n  }\n\n  .subnav.collapsed {\n    border-bottom: var(--sgds-border-width-0);\n  }\n\n  .header-container {\n    padding: var(--sgds-padding-none);\n    width: auto;\n    flex: 1;\n  }\n\n  slot[name=\"header\"]::slotted(*) {\n    padding-top: var(--sgds-padding-lg);\n    white-space: nowrap;\n  }\n\n  .subnav-nav-group {\n    flex-wrap: wrap;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    gap: var(--sgds-gap-xl);\n    row-gap: var(--sgds-gap-none);\n    flex: inherit;\n    width: auto;\n  }\n\n  .subnav-nav {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--sgds-gap-lg);\n    row-gap: 0;\n    align-items: center;\n    flex-direction: row;\n    overflow-y: inherit;\n    transition: none;\n    position: inherit;\n    background-color: inherit;\n    border-bottom: var(--sgds-border-width-0);\n    width: auto;\n  }\n\n  .subnav-nav ::slotted(*) {\n    width: inherit;\n  }\n\n  .subnav-toggler {\n    display: none;\n  }\n\n  .subnav-actions {\n    padding: var(--sgds-padding-sm) var(--sgds-padding-none);\n    width: auto;\n  }\n\n  slot[name=\"actions\"]::slotted(*) {\n    width: inherit;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"subnav.js","names":[],"sources":["../../../../src/components/Subnav/subnav.css"],"sourcesContent":[":host {\n  display: block;\n  position: relative;\n  z-index: var(--sgds-z-index-sticky);\n}\n\nnav {\n  background-color: var(--sgds-surface-raised);\n  border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n  width: 100%;\n  position: relative;\n}\n\n.subnav {\n  display: flex;\n  flex-wrap: nowrap;\n  flex-direction: column;\n  align-items: flex-start;\n}\n\n.header-container {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--sgds-gap-md);\n  width: 100%;\n  padding: var(--sgds-padding-md) var(--sgds-padding-lg);\n}\n\n.header-content {\n  flex: 1 1 auto;\n}\n\n.subnav-toggler {\n  cursor: pointer;\n  transition: transform 0.2s ease-in-out;\n}\n\n.subnav-toggler:focus-visible {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.subnav:not(.collapsed) .subnav-toggler {\n  transform: rotate(-180deg);\n}\n\n.subnav-nav-group {\n  display: flex;\n  flex: 1 1 0;\n  flex-direction: column;\n  width: 100%;\n  align-items: flex-start;\n}\n\n.subnav-nav {\n  display: none;\n  flex-direction: column;\n  align-items: flex-start;\n  width: 100%;\n  transition: transform 0.2s ease-in-out;\n  overflow-y: auto;\n}\n\n.subnav-nav ::slotted(*) {\n  width: 100%;\n}\n\n.subnav-actions {\n  display: flex;\n  flex-direction: column;\n  gap: var(--sgds-gap-md);\n  padding: var(--sgds-padding-md) var(--sgds-padding-lg);\n  position: sticky;\n  bottom: 0;\n  width: 100%;\n}\n\n.no-actions {\n  display: none;\n}\n\nslot[name=\"actions\"]::slotted(*) {\n  width: 100%;\n}\n\n@media screen and (max-width: 1023px) {\n  .subnav.sgds-container {\n    max-width: inherit;\n  }\n}\n\n@media screen and (min-width: 512px) {\n  .subnav-actions {\n    flex-direction: row;\n  }\n}\n\n@media screen and (min-width: 768px) {\n  nav {\n    border-bottom: var(--sgds-border-width-0);\n  }\n\n  .subnav {\n    flex-direction: row;\n  }\n\n  .subnav.collapsed {\n    border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n  }\n\n  .header-container {\n    padding: var(--sgds-padding-lg) var(--sgds-padding-2-xl);\n  }\n\n  .subnav-nav {\n    position: absolute;\n    top: 100%;\n    left: 0px;\n    background-color: var(--sgds-surface-raised);\n    border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n  }\n\n  .subnav-actions {\n    flex-direction: row;\n    align-items: center;\n    padding: var(--sgds-padding-sm) var(--sgds-padding-2-xl) var(--sgds-padding-sm) var(--sgds-padding-none);\n    position: inherit;\n  }\n}\n\n@media screen and (min-width: 1024px) {\n  nav {\n    position: inherit;\n    border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n  }\n\n  .subnav {\n    flex-wrap: wrap;\n    gap: var(--sgds-gap-xl);\n    row-gap: var(--sgds-gap-none);\n  }\n\n  .subnav.collapsed {\n    border-bottom: var(--sgds-border-width-0);\n  }\n\n  .header-container {\n    padding: var(--sgds-padding-none);\n    width: auto;\n    flex: 1;\n  }\n\n  .header-content {\n    padding-top: var(--sgds-padding-lg);\n    white-space: nowrap;\n  }\n\n  .subnav-nav-group {\n    flex-wrap: wrap;\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n    gap: var(--sgds-gap-xl);\n    row-gap: var(--sgds-gap-none);\n    flex: inherit;\n    width: auto;\n  }\n\n  .subnav-nav {\n    display: flex;\n    flex-wrap: wrap;\n    gap: var(--sgds-gap-lg);\n    row-gap: 0;\n    align-items: center;\n    flex-direction: row;\n    overflow-y: inherit;\n    transition: none;\n    position: inherit;\n    background-color: inherit;\n    border-bottom: var(--sgds-border-width-0);\n    width: auto;\n  }\n\n  .subnav-nav ::slotted(*) {\n    width: inherit;\n  }\n\n  .subnav-toggler {\n    display: none;\n  }\n\n  .subnav-actions {\n    padding: var(--sgds-padding-sm) var(--sgds-padding-none);\n    width: auto;\n  }\n\n  slot[name=\"actions\"]::slotted(*) {\n    width: inherit;\n  }\n}\n"],"mappings":""}

package/react/components/Table/table-cell.cjs.js

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/Table/table-cell.css
-var css_248z = require("lit").css`:host{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:table-cell;vertical-align:middle}.table-cell{align-items:center;display:flex;min-height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md)}`;
+var css_248z = require("lit").css`:host{display:table-cell}.table-cell{align-items:center;border-bottom:var(--table-cell-border-bottom,var(--sgds-border-width-1) solid var(--sgds-border-color-muted));display:flex;min-height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md);vertical-align:middle}`;
 //#endregion
 exports.default = css_248z;
 

package/react/components/Table/table-cell.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-cell.cjs.js","names":[],"sources":["../../../../src/components/Table/table-cell.css"],"sourcesContent":[":host {\n  display: table-cell;\n  vertical-align: middle;\n  border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n}\n\n.table-cell {\n  display: flex;\n  align-items: center;\n  min-height: var(--sgds-dimension-56);\n  padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n}\n"],"mappings":""}
+{"version":3,"file":"table-cell.cjs.js","names":[],"sources":["../../../../src/components/Table/table-cell.css"],"sourcesContent":[":host {\n  display: table-cell;\n}\n\n.table-cell {\n  display: flex;\n  align-items: center;\n  vertical-align: middle;\n  min-height: var(--sgds-dimension-56);\n  padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n  border-bottom: var(--table-cell-border-bottom, var(--sgds-border-width-1) solid var(--sgds-border-color-muted));\n}\n"],"mappings":""}

package/react/components/Table/table-cell.js

@@ -1,7 +1,7 @@
 "use client";
 import { css } from "lit";
 //#region src/components/Table/table-cell.css
-var css_248z = css`:host{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:table-cell;vertical-align:middle}.table-cell{align-items:center;display:flex;min-height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md)}`;
+var css_248z = css`:host{display:table-cell}.table-cell{align-items:center;border-bottom:var(--table-cell-border-bottom,var(--sgds-border-width-1) solid var(--sgds-border-color-muted));display:flex;min-height:var(--sgds-dimension-56);padding:var(--sgds-padding-sm) var(--sgds-padding-md);vertical-align:middle}`;
 //#endregion
 export { css_248z as default };
 

package/react/components/Table/table-cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-cell.js","names":[],"sources":["../../../../src/components/Table/table-cell.css"],"sourcesContent":[":host {\n  display: table-cell;\n  vertical-align: middle;\n  border-bottom: var(--sgds-border-width-1) solid var(--sgds-border-color-muted);\n}\n\n.table-cell {\n  display: flex;\n  align-items: center;\n  min-height: var(--sgds-dimension-56);\n  padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n}\n"],"mappings":""}
+{"version":3,"file":"table-cell.js","names":[],"sources":["../../../../src/components/Table/table-cell.css"],"sourcesContent":[":host {\n  display: table-cell;\n}\n\n.table-cell {\n  display: flex;\n  align-items: center;\n  vertical-align: middle;\n  min-height: var(--sgds-dimension-56);\n  padding: var(--sgds-padding-sm) var(--sgds-padding-md);\n  border-bottom: var(--table-cell-border-bottom, var(--sgds-border-width-1) solid var(--sgds-border-color-muted));\n}\n"],"mappings":""}

package/react/components/Table/table-row.cjs.js

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/Table/table-row.css
-var css_248z = require("lit").css`:host{display:table-row;width:100%}:host([tableBorder]:last-of-type) .table-row::slotted(*){border-bottom:0}`;
+var css_248z = require("lit").css`:host{display:table-row;width:100%}:host([tableBorder]:last-of-type) .table-row::slotted(*){--table-cell-border-bottom:0}`;
 //#endregion
 exports.default = css_248z;
 

package/react/components/Table/table-row.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-row.cjs.js","names":[],"sources":["../../../../src/components/Table/table-row.css"],"sourcesContent":[":host {\n  display: table-row;\n  width: 100%;\n}\n\n:host([tableBorder]:last-of-type) .table-row::slotted(*) {\n  border-bottom: 0;\n}\n"],"mappings":""}
+{"version":3,"file":"table-row.cjs.js","names":[],"sources":["../../../../src/components/Table/table-row.css"],"sourcesContent":[":host {\n  display: table-row;\n  width: 100%;\n}\n\n:host([tableBorder]:last-of-type) .table-row::slotted(*) {\n  --table-cell-border-bottom: 0;\n}\n"],"mappings":""}

package/react/components/Table/table-row.js

@@ -1,7 +1,7 @@
 "use client";
 import { css } from "lit";
 //#region src/components/Table/table-row.css
-var css_248z = css`:host{display:table-row;width:100%}:host([tableBorder]:last-of-type) .table-row::slotted(*){border-bottom:0}`;
+var css_248z = css`:host{display:table-row;width:100%}:host([tableBorder]:last-of-type) .table-row::slotted(*){--table-cell-border-bottom:0}`;
 //#endregion
 export { css_248z as default };
 

package/react/components/Table/table-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"table-row.js","names":[],"sources":["../../../../src/components/Table/table-row.css"],"sourcesContent":[":host {\n  display: table-row;\n  width: 100%;\n}\n\n:host([tableBorder]:last-of-type) .table-row::slotted(*) {\n  border-bottom: 0;\n}\n"],"mappings":""}
+{"version":3,"file":"table-row.js","names":[],"sources":["../../../../src/components/Table/table-row.css"],"sourcesContent":[":host {\n  display: table-row;\n  width: 100%;\n}\n\n:host([tableBorder]:last-of-type) .table-row::slotted(*) {\n  --table-cell-border-bottom: 0;\n}\n"],"mappings":""}

package/react/components/Textarea/sgds-textarea.cjs.js

@@ -131,8 +131,12 @@ var SgdsTextarea = class extends require_validatorMixin.SgdsFormValidatorMixin(r
 		this.setInvalid(false);
 	}
 	/** @internal */
-	_handleValueChange() {
-		this.updateComplete.then(() => this._setTextareaHeight());
+	async _handleValueChange() {
+		this._mixinSetFormValue();
+		await this.updateComplete;
+		this._setTextareaHeight();
+		if (this._mixinShouldSkipSgdsValidation()) return;
+		this._mixinValidate(this.input);
 	}
 	_renderHintText() {
 		const hintTextTemplate = lit_static_html_js.html` <div id="${this._controlId}Help" class="form-text">${this.hintText}</div> `;

package/react/components/Textarea/sgds-textarea.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-textarea.cjs.js","names":["SgdsFormValidatorMixin","FormControlElement","formTextControlStyles","textareaStyle","classMap","ifDefined","live","nothing","query","property","defaultValue","state","watch"],"sources":["../../../../src/components/Textarea/sgds-textarea.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property, query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { html } from \"lit/static-html.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport textareaStyle from \"./textarea.css\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\n\n/**\n * @summary Text areas allow for the collection of input longer than a single line.\n *\n * @slot invalidIcon - The slot for invalid icon\n *\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n * @event sgds-focus - Emitted when textarea is in focus.\n * @event sgds-blur - Emitted when textarea loses focus.\n * @event sgds-invalid - Emitted when the textarea's invalid state is set to true.\n * @event sgds-valid - Emitted when the textarea's invalid state is set to false.\n */\nexport class SgdsTextarea extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formTextControlStyles, textareaStyle];\n  /**@internal */\n  @query(\"textarea.form-control-group\") textarea: HTMLTextAreaElement;\n  /**@internal */\n  private resizeObserver: ResizeObserver;\n  /**The textarea's name attribute */\n  @property({ type: String, reflect: true }) name: string;\n  /**The textarea's value attribute. */\n  @property({ type: String, reflect: true }) value = \"\";\n  /**Sets the minimum length of the textarea */\n  @property({ type: Number, reflect: true }) minlength: number;\n  /**Sets the maximum length of the textarea. When maxlength is defined, a word count appears on bottom right of the input*/\n  @property({ type: Number, reflect: true }) maxlength: number;\n  /**Enables spell checking on the textarea */\n  @property({ type: Boolean, reflect: true }) spellcheck = false;\n  /** The number of rows to display by default. */\n  @property({ type: Number }) rows = 4;\n  /**The textarea's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"Placeholder\";\n  /** Custom feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n  /**Autofocus the textarea */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n  /** Makes the textarea readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n  /** Controls how the textarea can be resized. */\n  @property({ type: String, reflect: true }) resize: \"none\" | \"vertical\" | \"auto\" = \"vertical\";\n  /** The native textarea's inputmode attribute. It hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard. */\n  @property({ type: String, reflect: true }) inputmode:\n    | \"none\"\n    | \"text\"\n    | \"decimal\"\n    | \"numeric\"\n    | \"tel\"\n    | \"search\"\n    | \"email\"\n    | \"url\";\n  /** The native textarea's autocorrect attribute. */\n  @property({ type: Boolean, reflect: true }) autocorrect: boolean;\n  /** @internal Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue()\n  defaultValue = \"\";\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /** Makes the textarea as a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the textarea. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /** The textarea's hint text */\n  @property({ reflect: true }) hintText = \"\";\n\n  @state() private _isTouched = false;\n\n  /** Sets focus on the textarea. */\n  public focus(options?: FocusOptions) {\n    this.textarea.focus(options);\n  }\n  /** Sets blur on the textarea. */\n  public blur() {\n    this.textarea.blur();\n  }\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n\n  /** Selects all the text in the textarea. */\n  public select() {\n    this.textarea.select();\n  }\n  private _handleInvalid(e: Event) {\n    e.preventDefault();\n    this.invalid = true;\n  }\n\n  protected _handleChange(e: Event) {\n    this.value = this.input.value;\n    this.emit(\"sgds-change\");\n    super._mixinHandleChange(e);\n  }\n  private _handleInputChange(e: Event) {\n    this.value = this.input.value;\n    this.emit(\"sgds-input\");\n    super._mixinHandleInputChange(e);\n  }\n\n  private _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  private _handleBlur() {\n    const sgdsBlur = this.emit(\"sgds-blur\", { cancelable: true });\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (sgdsBlur.defaultPrevented) return;\n\n    this.setInvalid(!this._mixinCheckValidity());\n    this._isTouched = true;\n  }\n\n  /** @internal */\n  @watch(\"rows\", { waitUntilFirstUpdate: true })\n  _handleRowsChange() {\n    this._setTextareaHeight();\n  }\n\n  private _setTextareaHeight() {\n    if (this.resize === \"auto\") {\n      this.textarea.style.height = \"auto\";\n      this.textarea.style.height = `${this.textarea.scrollHeight}px`;\n    } else {\n      (this.textarea.style.height as string | undefined) = undefined;\n    }\n  }\n  /** @internal */\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.setInvalid(!this._mixinCheckValidity());\n    }\n  }\n\n  /** @internal */\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n\n  /** @internal */\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    this.updateComplete.then(() => this._setTextareaHeight());\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  private _wordCount() {\n    return html`\n      <div\n        class=\"form-text word-count ${classMap({\n          \"invalid-feedback\": this.invalid && this.hasFeedback\n        })}\"\n      >\n        ${this.value.length}/${this.maxlength}\n      </div>\n    `;\n  }\n  render() {\n    return html`\n      <div\n        class=\"form-control-container m-width-256 ${classMap({\n          disabled: this.disabled\n        })}\"\n      >\n        <label for=${this._controlId} class=\"form-label\">${this.label}</label>\n        <textarea\n          class=${classMap({\n            \"form-control-group\": true,\n            // \"form-control\": true,\n            \"is-invalid\": this.hasFeedback && this.invalid,\n            \"textarea-resize-none\": this.resize === \"none\",\n            \"textarea-resize-vertical\": this.resize === \"vertical\",\n            \"textarea-resize-auto\": this.resize === \"auto\",\n            readonly: this.readonly,\n            disabled: this.disabled\n          })}\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          rows=${ifDefined(this.rows)}\n          placeholder=${ifDefined(this.placeholder)}\n          minlength=${ifDefined(this.minlength)}\n          maxlength=${ifDefined(this.maxlength)}\n          .value=${live(this.value)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          spellcheck=${ifDefined(this.spellcheck)}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          ?autofocus=${this.autofocus}\n          autocorrect=${ifDefined(this.autocorrect)}\n          inputmode=${ifDefined(this.inputmode)}\n          @input=${(e: Event) => this._handleInputChange(e)}\n          @change=${(e: Event) => this._handleChange(e)}\n          @invalid=${(e: Event) => this._handleInvalid(e)}\n          @focus=${this._handleFocus}\n          @blur=${this._handleBlur}\n        ></textarea>\n        <div class=\"textarea-info-container\">\n          ${this.invalid && this.hasFeedback\n            ? html`\n                <div class=\"invalid-feedback-container\">\n                  <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n                  <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n                    ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n                  </div>\n                </div>\n              `\n            : html`${this._renderHintText()}`}\n          ${this.maxlength > 0 ? this._wordCount() : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTextarea;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-textarea.cjs.js","names":["SgdsFormValidatorMixin","FormControlElement","formTextControlStyles","textareaStyle","classMap","ifDefined","live","nothing","query","property","defaultValue","state","watch"],"sources":["../../../../src/components/Textarea/sgds-textarea.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property, query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { html } from \"lit/static-html.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport textareaStyle from \"./textarea.css\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\n\n/**\n * @summary Text areas allow for the collection of input longer than a single line.\n *\n * @slot invalidIcon - The slot for invalid icon\n *\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n * @event sgds-focus - Emitted when textarea is in focus.\n * @event sgds-blur - Emitted when textarea loses focus.\n * @event sgds-invalid - Emitted when the textarea's invalid state is set to true.\n * @event sgds-valid - Emitted when the textarea's invalid state is set to false.\n */\nexport class SgdsTextarea extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formTextControlStyles, textareaStyle];\n  /**@internal */\n  @query(\"textarea.form-control-group\") textarea: HTMLTextAreaElement;\n  /**@internal */\n  private resizeObserver: ResizeObserver;\n  /**The textarea's name attribute */\n  @property({ type: String, reflect: true }) name: string;\n  /**The textarea's value attribute. */\n  @property({ type: String, reflect: true }) value = \"\";\n  /**Sets the minimum length of the textarea */\n  @property({ type: Number, reflect: true }) minlength: number;\n  /**Sets the maximum length of the textarea. When maxlength is defined, a word count appears on bottom right of the input*/\n  @property({ type: Number, reflect: true }) maxlength: number;\n  /**Enables spell checking on the textarea */\n  @property({ type: Boolean, reflect: true }) spellcheck = false;\n  /** The number of rows to display by default. */\n  @property({ type: Number }) rows = 4;\n  /**The textarea's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"Placeholder\";\n  /** Custom feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n  /**Autofocus the textarea */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n  /** Makes the textarea readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n  /** Controls how the textarea can be resized. */\n  @property({ type: String, reflect: true }) resize: \"none\" | \"vertical\" | \"auto\" = \"vertical\";\n  /** The native textarea's inputmode attribute. It hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard. */\n  @property({ type: String, reflect: true }) inputmode:\n    | \"none\"\n    | \"text\"\n    | \"decimal\"\n    | \"numeric\"\n    | \"tel\"\n    | \"search\"\n    | \"email\"\n    | \"url\";\n  /** The native textarea's autocorrect attribute. */\n  @property({ type: Boolean, reflect: true }) autocorrect: boolean;\n  /** @internal Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue()\n  defaultValue = \"\";\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /** Makes the textarea as a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the textarea. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /** The textarea's hint text */\n  @property({ reflect: true }) hintText = \"\";\n\n  @state() private _isTouched = false;\n\n  /** Sets focus on the textarea. */\n  public focus(options?: FocusOptions) {\n    this.textarea.focus(options);\n  }\n  /** Sets blur on the textarea. */\n  public blur() {\n    this.textarea.blur();\n  }\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n\n  /** Selects all the text in the textarea. */\n  public select() {\n    this.textarea.select();\n  }\n  private _handleInvalid(e: Event) {\n    e.preventDefault();\n    this.invalid = true;\n  }\n\n  protected _handleChange(e: Event) {\n    this.value = this.input.value;\n    this.emit(\"sgds-change\");\n    super._mixinHandleChange(e);\n  }\n  private _handleInputChange(e: Event) {\n    this.value = this.input.value;\n    this.emit(\"sgds-input\");\n    super._mixinHandleInputChange(e);\n  }\n\n  private _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  private _handleBlur() {\n    const sgdsBlur = this.emit(\"sgds-blur\", { cancelable: true });\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (sgdsBlur.defaultPrevented) return;\n\n    this.setInvalid(!this._mixinCheckValidity());\n    this._isTouched = true;\n  }\n\n  /** @internal */\n  @watch(\"rows\", { waitUntilFirstUpdate: true })\n  _handleRowsChange() {\n    this._setTextareaHeight();\n  }\n\n  private _setTextareaHeight() {\n    if (this.resize === \"auto\") {\n      this.textarea.style.height = \"auto\";\n      this.textarea.style.height = `${this.textarea.scrollHeight}px`;\n    } else {\n      (this.textarea.style.height as string | undefined) = undefined;\n    }\n  }\n  /** @internal */\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.setInvalid(!this._mixinCheckValidity());\n    }\n  }\n\n  /** @internal */\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n\n  /** @internal */\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValueChange() {\n    this._mixinSetFormValue();\n    await this.updateComplete;\n    this._setTextareaHeight();\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    this._mixinValidate(this.input);\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  private _wordCount() {\n    return html`\n      <div\n        class=\"form-text word-count ${classMap({\n          \"invalid-feedback\": this.invalid && this.hasFeedback\n        })}\"\n      >\n        ${this.value.length}/${this.maxlength}\n      </div>\n    `;\n  }\n  render() {\n    return html`\n      <div\n        class=\"form-control-container m-width-256 ${classMap({\n          disabled: this.disabled\n        })}\"\n      >\n        <label for=${this._controlId} class=\"form-label\">${this.label}</label>\n        <textarea\n          class=${classMap({\n            \"form-control-group\": true,\n            // \"form-control\": true,\n            \"is-invalid\": this.hasFeedback && this.invalid,\n            \"textarea-resize-none\": this.resize === \"none\",\n            \"textarea-resize-vertical\": this.resize === \"vertical\",\n            \"textarea-resize-auto\": this.resize === \"auto\",\n            readonly: this.readonly,\n            disabled: this.disabled\n          })}\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          rows=${ifDefined(this.rows)}\n          placeholder=${ifDefined(this.placeholder)}\n          minlength=${ifDefined(this.minlength)}\n          maxlength=${ifDefined(this.maxlength)}\n          .value=${live(this.value)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          spellcheck=${ifDefined(this.spellcheck)}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          ?autofocus=${this.autofocus}\n          autocorrect=${ifDefined(this.autocorrect)}\n          inputmode=${ifDefined(this.inputmode)}\n          @input=${(e: Event) => this._handleInputChange(e)}\n          @change=${(e: Event) => this._handleChange(e)}\n          @invalid=${(e: Event) => this._handleInvalid(e)}\n          @focus=${this._handleFocus}\n          @blur=${this._handleBlur}\n        ></textarea>\n        <div class=\"textarea-info-container\">\n          ${this.invalid && this.hasFeedback\n            ? html`\n                <div class=\"invalid-feedback-container\">\n                  <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n                  <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n                    ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n                  </div>\n                </div>\n              `\n            : html`${this._renderHintText()}`}\n          ${this.maxlength > 0 ? this._wordCount() : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTextarea;\n"],"mappings":"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"}

package/react/components/Textarea/sgds-textarea.js

@@ -131,8 +131,12 @@ var SgdsTextarea = class extends SgdsFormValidatorMixin(FormControlElement) {
 		this.setInvalid(false);
 	}
 	/** @internal */
-	_handleValueChange() {
-		this.updateComplete.then(() => this._setTextareaHeight());
+	async _handleValueChange() {
+		this._mixinSetFormValue();
+		await this.updateComplete;
+		this._setTextareaHeight();
+		if (this._mixinShouldSkipSgdsValidation()) return;
+		this._mixinValidate(this.input);
 	}
 	_renderHintText() {
 		const hintTextTemplate = html$1` <div id="${this._controlId}Help" class="form-text">${this.hintText}</div> `;

package/react/components/Textarea/sgds-textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-textarea.js","names":["formTextControlStyles","textareaStyle"],"sources":["../../../../src/components/Textarea/sgds-textarea.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property, query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { html } from \"lit/static-html.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport textareaStyle from \"./textarea.css\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\n\n/**\n * @summary Text areas allow for the collection of input longer than a single line.\n *\n * @slot invalidIcon - The slot for invalid icon\n *\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n * @event sgds-focus - Emitted when textarea is in focus.\n * @event sgds-blur - Emitted when textarea loses focus.\n * @event sgds-invalid - Emitted when the textarea's invalid state is set to true.\n * @event sgds-valid - Emitted when the textarea's invalid state is set to false.\n */\nexport class SgdsTextarea extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formTextControlStyles, textareaStyle];\n  /**@internal */\n  @query(\"textarea.form-control-group\") textarea: HTMLTextAreaElement;\n  /**@internal */\n  private resizeObserver: ResizeObserver;\n  /**The textarea's name attribute */\n  @property({ type: String, reflect: true }) name: string;\n  /**The textarea's value attribute. */\n  @property({ type: String, reflect: true }) value = \"\";\n  /**Sets the minimum length of the textarea */\n  @property({ type: Number, reflect: true }) minlength: number;\n  /**Sets the maximum length of the textarea. When maxlength is defined, a word count appears on bottom right of the input*/\n  @property({ type: Number, reflect: true }) maxlength: number;\n  /**Enables spell checking on the textarea */\n  @property({ type: Boolean, reflect: true }) spellcheck = false;\n  /** The number of rows to display by default. */\n  @property({ type: Number }) rows = 4;\n  /**The textarea's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"Placeholder\";\n  /** Custom feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n  /**Autofocus the textarea */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n  /** Makes the textarea readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n  /** Controls how the textarea can be resized. */\n  @property({ type: String, reflect: true }) resize: \"none\" | \"vertical\" | \"auto\" = \"vertical\";\n  /** The native textarea's inputmode attribute. It hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard. */\n  @property({ type: String, reflect: true }) inputmode:\n    | \"none\"\n    | \"text\"\n    | \"decimal\"\n    | \"numeric\"\n    | \"tel\"\n    | \"search\"\n    | \"email\"\n    | \"url\";\n  /** The native textarea's autocorrect attribute. */\n  @property({ type: Boolean, reflect: true }) autocorrect: boolean;\n  /** @internal Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue()\n  defaultValue = \"\";\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /** Makes the textarea as a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the textarea. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /** The textarea's hint text */\n  @property({ reflect: true }) hintText = \"\";\n\n  @state() private _isTouched = false;\n\n  /** Sets focus on the textarea. */\n  public focus(options?: FocusOptions) {\n    this.textarea.focus(options);\n  }\n  /** Sets blur on the textarea. */\n  public blur() {\n    this.textarea.blur();\n  }\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n\n  /** Selects all the text in the textarea. */\n  public select() {\n    this.textarea.select();\n  }\n  private _handleInvalid(e: Event) {\n    e.preventDefault();\n    this.invalid = true;\n  }\n\n  protected _handleChange(e: Event) {\n    this.value = this.input.value;\n    this.emit(\"sgds-change\");\n    super._mixinHandleChange(e);\n  }\n  private _handleInputChange(e: Event) {\n    this.value = this.input.value;\n    this.emit(\"sgds-input\");\n    super._mixinHandleInputChange(e);\n  }\n\n  private _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  private _handleBlur() {\n    const sgdsBlur = this.emit(\"sgds-blur\", { cancelable: true });\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (sgdsBlur.defaultPrevented) return;\n\n    this.setInvalid(!this._mixinCheckValidity());\n    this._isTouched = true;\n  }\n\n  /** @internal */\n  @watch(\"rows\", { waitUntilFirstUpdate: true })\n  _handleRowsChange() {\n    this._setTextareaHeight();\n  }\n\n  private _setTextareaHeight() {\n    if (this.resize === \"auto\") {\n      this.textarea.style.height = \"auto\";\n      this.textarea.style.height = `${this.textarea.scrollHeight}px`;\n    } else {\n      (this.textarea.style.height as string | undefined) = undefined;\n    }\n  }\n  /** @internal */\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.setInvalid(!this._mixinCheckValidity());\n    }\n  }\n\n  /** @internal */\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n\n  /** @internal */\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    this.updateComplete.then(() => this._setTextareaHeight());\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  private _wordCount() {\n    return html`\n      <div\n        class=\"form-text word-count ${classMap({\n          \"invalid-feedback\": this.invalid && this.hasFeedback\n        })}\"\n      >\n        ${this.value.length}/${this.maxlength}\n      </div>\n    `;\n  }\n  render() {\n    return html`\n      <div\n        class=\"form-control-container m-width-256 ${classMap({\n          disabled: this.disabled\n        })}\"\n      >\n        <label for=${this._controlId} class=\"form-label\">${this.label}</label>\n        <textarea\n          class=${classMap({\n            \"form-control-group\": true,\n            // \"form-control\": true,\n            \"is-invalid\": this.hasFeedback && this.invalid,\n            \"textarea-resize-none\": this.resize === \"none\",\n            \"textarea-resize-vertical\": this.resize === \"vertical\",\n            \"textarea-resize-auto\": this.resize === \"auto\",\n            readonly: this.readonly,\n            disabled: this.disabled\n          })}\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          rows=${ifDefined(this.rows)}\n          placeholder=${ifDefined(this.placeholder)}\n          minlength=${ifDefined(this.minlength)}\n          maxlength=${ifDefined(this.maxlength)}\n          .value=${live(this.value)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          spellcheck=${ifDefined(this.spellcheck)}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          ?autofocus=${this.autofocus}\n          autocorrect=${ifDefined(this.autocorrect)}\n          inputmode=${ifDefined(this.inputmode)}\n          @input=${(e: Event) => this._handleInputChange(e)}\n          @change=${(e: Event) => this._handleChange(e)}\n          @invalid=${(e: Event) => this._handleInvalid(e)}\n          @focus=${this._handleFocus}\n          @blur=${this._handleBlur}\n        ></textarea>\n        <div class=\"textarea-info-container\">\n          ${this.invalid && this.hasFeedback\n            ? html`\n                <div class=\"invalid-feedback-container\">\n                  <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n                  <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n                    ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n                  </div>\n                </div>\n              `\n            : html`${this._renderHintText()}`}\n          ${this.maxlength > 0 ? this._wordCount() : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTextarea;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-textarea.js","names":["formTextControlStyles","textareaStyle"],"sources":["../../../../src/components/Textarea/sgds-textarea.ts"],"sourcesContent":["import { nothing } from \"lit\";\nimport { property, query, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport { html } from \"lit/static-html.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport textareaStyle from \"./textarea.css\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\n\n/**\n * @summary Text areas allow for the collection of input longer than a single line.\n *\n * @slot invalidIcon - The slot for invalid icon\n *\n * @event sgds-change - Emitted when an alteration to the control's value is committed by the user.\n * @event sgds-input - Emitted when the control receives input and its value changes.\n * @event sgds-focus - Emitted when textarea is in focus.\n * @event sgds-blur - Emitted when textarea loses focus.\n * @event sgds-invalid - Emitted when the textarea's invalid state is set to true.\n * @event sgds-valid - Emitted when the textarea's invalid state is set to false.\n */\nexport class SgdsTextarea extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formTextControlStyles, textareaStyle];\n  /**@internal */\n  @query(\"textarea.form-control-group\") textarea: HTMLTextAreaElement;\n  /**@internal */\n  private resizeObserver: ResizeObserver;\n  /**The textarea's name attribute */\n  @property({ type: String, reflect: true }) name: string;\n  /**The textarea's value attribute. */\n  @property({ type: String, reflect: true }) value = \"\";\n  /**Sets the minimum length of the textarea */\n  @property({ type: Number, reflect: true }) minlength: number;\n  /**Sets the maximum length of the textarea. When maxlength is defined, a word count appears on bottom right of the input*/\n  @property({ type: Number, reflect: true }) maxlength: number;\n  /**Enables spell checking on the textarea */\n  @property({ type: Boolean, reflect: true }) spellcheck = false;\n  /** The number of rows to display by default. */\n  @property({ type: Number }) rows = 4;\n  /**The textarea's placeholder text. */\n  @property({ type: String, reflect: true }) placeholder = \"Placeholder\";\n  /** Custom feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n  /**Autofocus the textarea */\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n  /** Makes the textarea readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n  /** Controls how the textarea can be resized. */\n  @property({ type: String, reflect: true }) resize: \"none\" | \"vertical\" | \"auto\" = \"vertical\";\n  /** The native textarea's inputmode attribute. It hints at the type of data that might be entered by the user while editing the element or its contents. This allows a browser to display an appropriate virtual keyboard. */\n  @property({ type: String, reflect: true }) inputmode:\n    | \"none\"\n    | \"text\"\n    | \"decimal\"\n    | \"numeric\"\n    | \"tel\"\n    | \"search\"\n    | \"email\"\n    | \"url\";\n  /** The native textarea's autocorrect attribute. */\n  @property({ type: Boolean, reflect: true }) autocorrect: boolean;\n  /** @internal Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue()\n  defaultValue = \"\";\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /** Makes the textarea as a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Disables native and sgds validation for the textarea. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  /** The textarea's hint text */\n  @property({ reflect: true }) hintText = \"\";\n\n  @state() private _isTouched = false;\n\n  /** Sets focus on the textarea. */\n  public focus(options?: FocusOptions) {\n    this.textarea.focus(options);\n  }\n  /** Sets blur on the textarea. */\n  public blur() {\n    this.textarea.blur();\n  }\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n\n  /** Selects all the text in the textarea. */\n  public select() {\n    this.textarea.select();\n  }\n  private _handleInvalid(e: Event) {\n    e.preventDefault();\n    this.invalid = true;\n  }\n\n  protected _handleChange(e: Event) {\n    this.value = this.input.value;\n    this.emit(\"sgds-change\");\n    super._mixinHandleChange(e);\n  }\n  private _handleInputChange(e: Event) {\n    this.value = this.input.value;\n    this.emit(\"sgds-input\");\n    super._mixinHandleInputChange(e);\n  }\n\n  private _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  private _handleBlur() {\n    const sgdsBlur = this.emit(\"sgds-blur\", { cancelable: true });\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (sgdsBlur.defaultPrevented) return;\n\n    this.setInvalid(!this._mixinCheckValidity());\n    this._isTouched = true;\n  }\n\n  /** @internal */\n  @watch(\"rows\", { waitUntilFirstUpdate: true })\n  _handleRowsChange() {\n    this._setTextareaHeight();\n  }\n\n  private _setTextareaHeight() {\n    if (this.resize === \"auto\") {\n      this.textarea.style.height = \"auto\";\n      this.textarea.style.height = `${this.textarea.scrollHeight}px`;\n    } else {\n      (this.textarea.style.height as string | undefined) = undefined;\n    }\n  }\n  /** @internal */\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    if (this._isTouched) {\n      this.setInvalid(!this._mixinCheckValidity());\n    }\n  }\n\n  /** @internal */\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n\n  /** @internal */\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValueChange() {\n    this._mixinSetFormValue();\n    await this.updateComplete;\n    this._setTextareaHeight();\n    if (this._mixinShouldSkipSgdsValidation()) return;\n    this._mixinValidate(this.input);\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div id=\"${this._controlId}Help\" class=\"form-text\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  private _wordCount() {\n    return html`\n      <div\n        class=\"form-text word-count ${classMap({\n          \"invalid-feedback\": this.invalid && this.hasFeedback\n        })}\"\n      >\n        ${this.value.length}/${this.maxlength}\n      </div>\n    `;\n  }\n  render() {\n    return html`\n      <div\n        class=\"form-control-container m-width-256 ${classMap({\n          disabled: this.disabled\n        })}\"\n      >\n        <label for=${this._controlId} class=\"form-label\">${this.label}</label>\n        <textarea\n          class=${classMap({\n            \"form-control-group\": true,\n            // \"form-control\": true,\n            \"is-invalid\": this.hasFeedback && this.invalid,\n            \"textarea-resize-none\": this.resize === \"none\",\n            \"textarea-resize-vertical\": this.resize === \"vertical\",\n            \"textarea-resize-auto\": this.resize === \"auto\",\n            readonly: this.readonly,\n            disabled: this.disabled\n          })}\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          rows=${ifDefined(this.rows)}\n          placeholder=${ifDefined(this.placeholder)}\n          minlength=${ifDefined(this.minlength)}\n          maxlength=${ifDefined(this.maxlength)}\n          .value=${live(this.value)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          spellcheck=${ifDefined(this.spellcheck)}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          ?autofocus=${this.autofocus}\n          autocorrect=${ifDefined(this.autocorrect)}\n          inputmode=${ifDefined(this.inputmode)}\n          @input=${(e: Event) => this._handleInputChange(e)}\n          @change=${(e: Event) => this._handleChange(e)}\n          @invalid=${(e: Event) => this._handleInvalid(e)}\n          @focus=${this._handleFocus}\n          @blur=${this._handleBlur}\n        ></textarea>\n        <div class=\"textarea-info-container\">\n          ${this.invalid && this.hasFeedback\n            ? html`\n                <div class=\"invalid-feedback-container\">\n                  <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n                  <div id=\"${this._controlId}-invalid\" class=\"invalid-feedback\">\n                    ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n                  </div>\n                </div>\n              `\n            : html`${this._renderHintText()}`}\n          ${this.maxlength > 0 ? this._wordCount() : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsTextarea;\n"],"mappings":"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"}

package/react/utils/ssr-nonce-patch.cjs.js

@@ -1,31 +1 @@
 "use client";
-//#region src/utils/ssr-nonce-patch.ts
-/**
-* Patches @lit-labs/ssr's LitElementRenderer.renderShadow() to respect
-* globalThis.litNonce for CSP nonce injection.
-*
-* Uses globalThis.require (Node.js CJS require) for SYNCHRONOUS module
-* resolution. This ensures the patch is applied at module evaluation time —
-* before any SSR rendering starts, including on the first request.
-*/
-if (typeof window === "undefined") try {
-	const mod = (typeof require !== "undefined" ? require : new Function("id", "return import(id)"))("@lit-labs/ssr/lib/lit-element-renderer.js");
-	const LitElementRenderer = mod.LitElementRenderer || mod.default?.LitElementRenderer;
-	if (LitElementRenderer && !LitElementRenderer._sgdsNoncePatched) {
-		LitElementRenderer._sgdsNoncePatched = true;
-		const originalRenderShadow = LitElementRenderer.prototype.renderShadow;
-		LitElementRenderer.prototype.renderShadow = function(renderInfo) {
-			const result = originalRenderShadow.call(this, renderInfo);
-			if (!result) return result;
-			const nonce = globalThis["litNonce"];
-			if (!nonce) return result;
-			return result.map((item) => {
-				if (typeof item === "string" && item === "<style>") return `<style nonce="${nonce}">`;
-				return item;
-			});
-		};
-	}
-} catch {}
-//#endregion
-
-//# sourceMappingURL=ssr-nonce-patch.cjs.js.map

package/react/utils/ssr-nonce-patch.js

@@ -1,32 +1,38 @@
-"use client";
-import { __require } from "../_virtual/_rolldown/runtime.js";
-//#region src/utils/ssr-nonce-patch.ts
 /**
-* Patches @lit-labs/ssr's LitElementRenderer.renderShadow() to respect
-* globalThis.litNonce for CSP nonce injection.
-*
-* Uses globalThis.require (Node.js CJS require) for SYNCHRONOUS module
-* resolution. This ensures the patch is applied at module evaluation time —
-* before any SSR rendering starts, including on the first request.
-*/
-if (typeof window === "undefined") try {
-	const mod = (typeof __require !== "undefined" ? __require : new Function("id", "return import(id)"))("@lit-labs/ssr/lib/lit-element-renderer.js");
-	const LitElementRenderer = mod.LitElementRenderer || mod.default?.LitElementRenderer;
-	if (LitElementRenderer && !LitElementRenderer._sgdsNoncePatched) {
-		LitElementRenderer._sgdsNoncePatched = true;
-		const originalRenderShadow = LitElementRenderer.prototype.renderShadow;
-		LitElementRenderer.prototype.renderShadow = function(renderInfo) {
-			const result = originalRenderShadow.call(this, renderInfo);
-			if (!result) return result;
-			const nonce = globalThis["litNonce"];
-			if (!nonce) return result;
-			return result.map((item) => {
-				if (typeof item === "string" && item === "<style>") return `<style nonce="${nonce}">`;
-				return item;
-			});
-		};
-	}
-} catch {}
-//#endregion
+ * Patches @lit-labs/ssr's LitElementRenderer.renderShadow() to respect
+ * globalThis.litNonce for CSP nonce injection.
+ *
+ * This file is NOT processed by Rolldown — it's copied as-is to lib/.
+ * The bare require() is preserved so webpack resolves it within its own
+ * module system, ensuring we patch the SAME LitElementRenderer instance
+ * that @lit-labs/ssr-react uses during rendering.
+ */
+if (typeof window === "undefined") {
+  try {
+    var mod = require("@lit-labs/ssr/lib/lit-element-renderer.js");
+    var LitElementRenderer = mod.LitElementRenderer || (mod.default && mod.default.LitElementRenderer);
 
-//# sourceMappingURL=ssr-nonce-patch.js.map
+    if (LitElementRenderer && !LitElementRenderer._sgdsNoncePatched) {
+      LitElementRenderer._sgdsNoncePatched = true;
+
+      var originalRenderShadow = LitElementRenderer.prototype.renderShadow;
+
+      LitElementRenderer.prototype.renderShadow = function (renderInfo) {
+        var result = originalRenderShadow.call(this, renderInfo);
+        if (!result) return result;
+
+        var nonce = globalThis.litNonce;
+        if (!nonce) return result;
+
+        return result.map(function (item) {
+          if (typeof item === "string" && item === "<style>") {
+            return '<style nonce="' + nonce + '">';
+          }
+          return item;
+        });
+      };
+    }
+  } catch (e) {
+    // @lit-labs/ssr not available — nonce injection disabled
+  }
+}

package/react/utils/validatorMixin.cjs.js

@@ -84,9 +84,8 @@ const SgdsFormValidatorMixin = (superClass) => {
 			if (this._mixinShouldSkipSgdsValidation()) return;
 			this.inputValidationController.validateInput(input);
 		}
-		_mixinSetFormValue() {
-			const value = this.value;
-			this._internals.setFormValue(value);
+		_mixinSetFormValue(value) {
+			this._internals.setFormValue(value !== void 0 ? value : this.value);
 		}
 		_mixinCheckValidity() {
 			if (this._mixinShouldSkipSgdsValidation()) return true;

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

@@ -1 +1 @@
-{"version":3,"file":"validatorMixin.cjs.js","names":["InputValidationController","queryAsync"],"sources":["../../../src/utils/validatorMixin.ts"],"sourcesContent":["import { LitElement, PropertyValueMap } from \"lit\";\nimport { queryAsync } from \"lit/decorators.js\";\nimport { SgdsInput } from \"../components\";\nimport { InputValidationController } from \"./inputValidationController\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Constructor<T> = new (...args: any[]) => T;\n\n/**\n * @summary The FormValidationMixin used by the form components\n * @param superClass\n * @returns\n */\nexport const SgdsFormValidatorMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n  class ToBeValidatedElement extends superClass {\n    static formAssociated = true;\n    inputValidationController: InputValidationController;\n    input: HTMLInputElement | SgdsInput | HTMLTextAreaElement;\n    private _isTouched = false;\n    private _internals: ElementInternals;\n    @queryAsync(\"sgds-input\") sgdsInput: Promise<SgdsInput>;\n    @queryAsync(\"sgds-datepicker-input\") sgdsDatepickerInput: Promise<SgdsInput>;\n\n    // TypeScript requires mixin constructors to have rest parameter of type any[]\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    constructor(...args: any[]) {\n      super(...args);\n      this._internals = this.attachInternals();\n    }\n\n    connectedCallback(): void {\n      super.connectedCallback();\n\n      /** Idempotency guarantee — always create so reset can clear validity even with noValidate */\n      this.inputValidationController ??= new InputValidationController(this);\n    }\n    async firstUpdated(changedProperties: PropertyValueMap<this>) {\n      super.firstUpdated(changedProperties);\n\n      /* Either input or sgds-input. For example, quantity-toggle uses sgds-input */\n      this.input =\n        this.shadowRoot.querySelector(\"input\") ||\n        (await this.sgdsInput) ||\n        this.shadowRoot.querySelector(\"textarea\") ||\n        (await this.sgdsDatepickerInput);\n\n      this._mixinSetFormValue();\n\n      if (this._mixinShouldSkipSgdsValidation()) return;\n\n      this._mixinValidate(this.input);\n    }\n\n    /**\n     * Native lifecycle of Form-Associated Custom Element Callbacks\n     */\n    formResetCallback() {\n      if (this._mixinResetFormControl) {\n        this._mixinResetFormControl();\n      } else {\n        this.value = this.defaultValue;\n        this._mixinResetValidity(this.input);\n      }\n      this._mixinSetFormValue();\n    }\n    /**\n     *\n     * Methods use by classes using this mixin\n     */\n\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run change handler\n     */\n    _mixinHandleChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleChange(e);\n    }\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run input handler\n     */\n    _mixinHandleInputChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleInput(e);\n    }\n    /**\n     * During form resetting,\n     * 1. ValidityState is reset (always, regardless of noValidate)\n     * 2. invalid reactive prop is updated after the reset (always)\n     * 3. Reset touched state to false for a pristine form (always)\n     * 4. Revalidates the ValidityState (but do not update invalid prop)\n     * to prepare for the next validity check (skipped when noValidate)\n     */\n    _mixinResetValidity(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      this.inputValidationController.resetValidity();\n      this.inputValidationController.updateInvalidState();\n      this._isTouched ? (this._isTouched = false) : null;\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.validateInput(input);\n    }\n\n    _mixinValidate(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.validateInput(input);\n    }\n    _mixinSetFormValue() {\n      const value = this.value as string | FormData | File;\n      this._internals.setFormValue(value);\n    }\n    _mixinCheckValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.checkValidity();\n    }\n    _mixinReportValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.reportValidity();\n    }\n    _mixinGetValidity(): ValidityState {\n      return this._internals.validity;\n    }\n    _mixinGetValidationMessage(): string {\n      return this._internals.validationMessage;\n    }\n    _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      return this.inputValidationController.setValidity(flags, message, anchor);\n    }\n    // Only check for noValidate prop\n    _mixinShouldSkipSgdsValidation() {\n      const form = this.closest(\"form\");\n\n      return form?.noValidate || this.noValidate;\n    }\n\n    /** DECLARED INSTANCE METHODS AND PROPERTIES*/\n\n    /**\n     * Resets a form control to its initial state\n     */\n    declare _mixinResetFormControl: () => void;\n    declare value: string;\n    declare defaultValue: string;\n    declare defaultChecked: boolean;\n    declare noValidate: boolean;\n  }\n\n  return ToBeValidatedElement as Constructor<ToBeValidatedElementInterface> & T;\n};\n\nexport declare class ToBeValidatedElementInterface {\n  inputValidationController: InputValidationController;\n  input: HTMLInputElement;\n  _mixinHandleChange(e: Event): void;\n  _mixinHandleInputChange(e: Event): void;\n  _mixinResetValidity(input: HTMLInputElement | SgdsInput): void;\n  _mixinValidate(input: HTMLInputElement | SgdsInput): void;\n  _mixinSetFormValue(): void;\n  _mixinCheckValidity(): boolean;\n  _mixinReportValidity(): boolean;\n  _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;\n  _mixinGetValidity(): ValidityState;\n  _mixinGetValidationMessage(): string;\n  _mixinShouldSkipSgdsValidation(): boolean;\n}\n"],"mappings":";;;;;;;;;;AAaA,MAAa,0BAA6D,eAAkB;CAC1F,MAAM,6BAA6B,WAAW;;GACpB,KAAA,iBAAA;;EAUxB,YAAY,GAAG,MAAa;GAC1B,MAAM,GAAG,IAAI;GARM,KAAA,aAAA;GASnB,KAAK,aAAa,KAAK,gBAAgB;EACzC;EAEA,oBAA0B;GACxB,MAAM,kBAAkB;;GAGxB,KAAK,8BAA8B,IAAIA,kCAAAA,0BAA0B,IAAI;EACvE;EACA,MAAM,aAAa,mBAA2C;GAC5D,MAAM,aAAa,iBAAiB;GAGpC,KAAK,QACH,KAAK,WAAW,cAAc,OAAO,KACpC,MAAM,KAAK,aACZ,KAAK,WAAW,cAAc,UAAU,KACvC,MAAM,KAAK;GAEd,KAAK,mBAAmB;GAExB,IAAI,KAAK,+BAA+B,GAAG;GAE3C,KAAK,eAAe,KAAK,KAAK;EAChC;;;;EAKA,oBAAoB;GAClB,IAAI,KAAK,wBACP,KAAK,uBAAuB;QACvB;IACL,KAAK,QAAQ,KAAK;IAClB,KAAK,oBAAoB,KAAK,KAAK;GACrC;GACA,KAAK,mBAAmB;EAC1B;;;;;;;;;;EAWA,mBAAmB,GAAgB;GACjC,KAAK,mBAAmB;GACxB,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,aAAa,CAAC;EAC/C;;;;;;EAMA,wBAAwB,GAAgB;GACtC,KAAK,mBAAmB;GACxB,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,YAAY,CAAC;EAC9C;;;;;;;;;EASA,oBAAoB,OAA2D;GAC7E,KAAK,0BAA0B,cAAc;GAC7C,KAAK,0BAA0B,mBAAmB;GAClD,KAAwB,eAAa;GACrC,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,cAAc,KAAK;EACpD;EAEA,eAAe,OAA2D;GACxE,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,cAAc,KAAK;EACpD;EACA,qBAAqB;GACnB,MAAM,QAAQ,KAAK;GACnB,KAAK,WAAW,aAAa,KAAK;EACpC;EACA,sBAA+B;GAC7B,IAAI,KAAK,+BAA+B,GAAG,OAAO;GAClD,OAAO,KAAK,0BAA0B,cAAc;EACtD;EACA,uBAAgC;GAC9B,IAAI,KAAK,+BAA+B,GAAG,OAAO;GAClD,OAAO,KAAK,0BAA0B,eAAe;EACvD;EACA,oBAAmC;GACjC,OAAO,KAAK,WAAW;EACzB;EACA,6BAAqC;GACnC,OAAO,KAAK,WAAW;EACzB;EACA,kBAAkB,OAA4B,SAAkB,QAA4B;GAC1F,IAAI,KAAK,+BAA+B,GAAG;GAC3C,OAAO,KAAK,0BAA0B,YAAY,OAAO,SAAS,MAAM;EAC1E;EAEA,iCAAiC;GAG/B,OAFa,KAAK,QAAQ,MAEhB,CAAC,EAAE,cAAc,KAAK;EAClC;CAYF;CAjIGC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,WAAAA,CAAW,YAAY,CAAA,GAAA,qBAAA,WAAA,aAAA,KAAA,CAAA;CACvBA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,WAAAA,CAAW,uBAAuB,CAAA,GAAA,qBAAA,WAAA,uBAAA,KAAA,CAAA;CAkIrC,OAAO;AACT"}
+{"version":3,"file":"validatorMixin.cjs.js","names":["InputValidationController","queryAsync"],"sources":["../../../src/utils/validatorMixin.ts"],"sourcesContent":["import { LitElement, PropertyValueMap } from \"lit\";\nimport { queryAsync } from \"lit/decorators.js\";\nimport { SgdsInput } from \"../components\";\nimport { InputValidationController } from \"./inputValidationController\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Constructor<T> = new (...args: any[]) => T;\n\n/**\n * @summary The FormValidationMixin used by the form components\n * @param superClass\n * @returns\n */\nexport const SgdsFormValidatorMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n  class ToBeValidatedElement extends superClass {\n    static formAssociated = true;\n    inputValidationController: InputValidationController;\n    input: HTMLInputElement | SgdsInput | HTMLTextAreaElement;\n    private _isTouched = false;\n    private _internals: ElementInternals;\n    @queryAsync(\"sgds-input\") sgdsInput: Promise<SgdsInput>;\n    @queryAsync(\"sgds-datepicker-input\") sgdsDatepickerInput: Promise<SgdsInput>;\n\n    // TypeScript requires mixin constructors to have rest parameter of type any[]\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    constructor(...args: any[]) {\n      super(...args);\n      this._internals = this.attachInternals();\n    }\n\n    connectedCallback(): void {\n      super.connectedCallback();\n\n      /** Idempotency guarantee — always create so reset can clear validity even with noValidate */\n      this.inputValidationController ??= new InputValidationController(this);\n    }\n    async firstUpdated(changedProperties: PropertyValueMap<this>) {\n      super.firstUpdated(changedProperties);\n\n      /* Either input or sgds-input. For example, quantity-toggle uses sgds-input */\n      this.input =\n        this.shadowRoot.querySelector(\"input\") ||\n        (await this.sgdsInput) ||\n        this.shadowRoot.querySelector(\"textarea\") ||\n        (await this.sgdsDatepickerInput);\n\n      this._mixinSetFormValue();\n\n      if (this._mixinShouldSkipSgdsValidation()) return;\n\n      this._mixinValidate(this.input);\n    }\n\n    /**\n     * Native lifecycle of Form-Associated Custom Element Callbacks\n     */\n    formResetCallback() {\n      if (this._mixinResetFormControl) {\n        this._mixinResetFormControl();\n      } else {\n        this.value = this.defaultValue;\n        this._mixinResetValidity(this.input);\n      }\n      this._mixinSetFormValue();\n    }\n    /**\n     *\n     * Methods use by classes using this mixin\n     */\n\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run change handler\n     */\n    _mixinHandleChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleChange(e);\n    }\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run input handler\n     */\n    _mixinHandleInputChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleInput(e);\n    }\n    /**\n     * During form resetting,\n     * 1. ValidityState is reset (always, regardless of noValidate)\n     * 2. invalid reactive prop is updated after the reset (always)\n     * 3. Reset touched state to false for a pristine form (always)\n     * 4. Revalidates the ValidityState (but do not update invalid prop)\n     * to prepare for the next validity check (skipped when noValidate)\n     */\n    _mixinResetValidity(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      this.inputValidationController.resetValidity();\n      this.inputValidationController.updateInvalidState();\n      this._isTouched ? (this._isTouched = false) : null;\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.validateInput(input);\n    }\n\n    _mixinValidate(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.validateInput(input);\n    }\n    _mixinSetFormValue(value?: string | FormData | File | null) {\n      this._internals.setFormValue(value !== undefined ? value : (this.value as string | FormData | File));\n    }\n    _mixinCheckValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.checkValidity();\n    }\n    _mixinReportValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.reportValidity();\n    }\n    _mixinGetValidity(): ValidityState {\n      return this._internals.validity;\n    }\n    _mixinGetValidationMessage(): string {\n      return this._internals.validationMessage;\n    }\n    _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      return this.inputValidationController.setValidity(flags, message, anchor);\n    }\n    // Only check for noValidate prop\n    _mixinShouldSkipSgdsValidation() {\n      const form = this.closest(\"form\");\n\n      return form?.noValidate || this.noValidate;\n    }\n\n    /** DECLARED INSTANCE METHODS AND PROPERTIES*/\n\n    /**\n     * Resets a form control to its initial state\n     */\n    declare _mixinResetFormControl: () => void;\n    declare value: string;\n    declare defaultValue: string;\n    declare defaultChecked: boolean;\n    declare noValidate: boolean;\n  }\n\n  return ToBeValidatedElement as Constructor<ToBeValidatedElementInterface> & T;\n};\n\nexport declare class ToBeValidatedElementInterface {\n  inputValidationController: InputValidationController;\n  input: HTMLInputElement;\n  _mixinHandleChange(e: Event): void;\n  _mixinHandleInputChange(e: Event): void;\n  _mixinResetValidity(input: HTMLInputElement | SgdsInput): void;\n  _mixinValidate(input: HTMLInputElement | SgdsInput): void;\n  _mixinSetFormValue(value?: string | FormData | File | null): void;\n  _mixinCheckValidity(): boolean;\n  _mixinReportValidity(): boolean;\n  _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;\n  _mixinGetValidity(): ValidityState;\n  _mixinGetValidationMessage(): string;\n  _mixinShouldSkipSgdsValidation(): boolean;\n}\n"],"mappings":";;;;;;;;;;AAaA,MAAa,0BAA6D,eAAkB;CAC1F,MAAM,6BAA6B,WAAW;;GACpB,KAAA,iBAAA;;EAUxB,YAAY,GAAG,MAAa;GAC1B,MAAM,GAAG,IAAI;GARM,KAAA,aAAA;GASnB,KAAK,aAAa,KAAK,gBAAgB;EACzC;EAEA,oBAA0B;GACxB,MAAM,kBAAkB;;GAGxB,KAAK,8BAA8B,IAAIA,kCAAAA,0BAA0B,IAAI;EACvE;EACA,MAAM,aAAa,mBAA2C;GAC5D,MAAM,aAAa,iBAAiB;GAGpC,KAAK,QACH,KAAK,WAAW,cAAc,OAAO,KACpC,MAAM,KAAK,aACZ,KAAK,WAAW,cAAc,UAAU,KACvC,MAAM,KAAK;GAEd,KAAK,mBAAmB;GAExB,IAAI,KAAK,+BAA+B,GAAG;GAE3C,KAAK,eAAe,KAAK,KAAK;EAChC;;;;EAKA,oBAAoB;GAClB,IAAI,KAAK,wBACP,KAAK,uBAAuB;QACvB;IACL,KAAK,QAAQ,KAAK;IAClB,KAAK,oBAAoB,KAAK,KAAK;GACrC;GACA,KAAK,mBAAmB;EAC1B;;;;;;;;;;EAWA,mBAAmB,GAAgB;GACjC,KAAK,mBAAmB;GACxB,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,aAAa,CAAC;EAC/C;;;;;;EAMA,wBAAwB,GAAgB;GACtC,KAAK,mBAAmB;GACxB,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,YAAY,CAAC;EAC9C;;;;;;;;;EASA,oBAAoB,OAA2D;GAC7E,KAAK,0BAA0B,cAAc;GAC7C,KAAK,0BAA0B,mBAAmB;GAClD,KAAwB,eAAa;GACrC,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,cAAc,KAAK;EACpD;EAEA,eAAe,OAA2D;GACxE,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,cAAc,KAAK;EACpD;EACA,mBAAmB,OAAyC;GAC1D,KAAK,WAAW,aAAa,UAAU,KAAA,IAAY,QAAS,KAAK,KAAkC;EACrG;EACA,sBAA+B;GAC7B,IAAI,KAAK,+BAA+B,GAAG,OAAO;GAClD,OAAO,KAAK,0BAA0B,cAAc;EACtD;EACA,uBAAgC;GAC9B,IAAI,KAAK,+BAA+B,GAAG,OAAO;GAClD,OAAO,KAAK,0BAA0B,eAAe;EACvD;EACA,oBAAmC;GACjC,OAAO,KAAK,WAAW;EACzB;EACA,6BAAqC;GACnC,OAAO,KAAK,WAAW;EACzB;EACA,kBAAkB,OAA4B,SAAkB,QAA4B;GAC1F,IAAI,KAAK,+BAA+B,GAAG;GAC3C,OAAO,KAAK,0BAA0B,YAAY,OAAO,SAAS,MAAM;EAC1E;EAEA,iCAAiC;GAG/B,OAFa,KAAK,QAAQ,MAEhB,CAAC,EAAE,cAAc,KAAK;EAClC;CAYF;CAhIGC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,WAAAA,CAAW,YAAY,CAAA,GAAA,qBAAA,WAAA,aAAA,KAAA,CAAA;CACvBA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,WAAAA,CAAW,uBAAuB,CAAA,GAAA,qBAAA,WAAA,uBAAA,KAAA,CAAA;CAiIrC,OAAO;AACT"}

package/react/utils/validatorMixin.js

@@ -84,9 +84,8 @@ const SgdsFormValidatorMixin = (superClass) => {
 			if (this._mixinShouldSkipSgdsValidation()) return;
 			this.inputValidationController.validateInput(input);
 		}
-		_mixinSetFormValue() {
-			const value = this.value;
-			this._internals.setFormValue(value);
+		_mixinSetFormValue(value) {
+			this._internals.setFormValue(value !== void 0 ? value : this.value);
 		}
 		_mixinCheckValidity() {
 			if (this._mixinShouldSkipSgdsValidation()) return true;

package/react/utils/validatorMixin.js.map

@@ -1 +1 @@
-{"version":3,"file":"validatorMixin.js","names":[],"sources":["../../../src/utils/validatorMixin.ts"],"sourcesContent":["import { LitElement, PropertyValueMap } from \"lit\";\nimport { queryAsync } from \"lit/decorators.js\";\nimport { SgdsInput } from \"../components\";\nimport { InputValidationController } from \"./inputValidationController\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Constructor<T> = new (...args: any[]) => T;\n\n/**\n * @summary The FormValidationMixin used by the form components\n * @param superClass\n * @returns\n */\nexport const SgdsFormValidatorMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n  class ToBeValidatedElement extends superClass {\n    static formAssociated = true;\n    inputValidationController: InputValidationController;\n    input: HTMLInputElement | SgdsInput | HTMLTextAreaElement;\n    private _isTouched = false;\n    private _internals: ElementInternals;\n    @queryAsync(\"sgds-input\") sgdsInput: Promise<SgdsInput>;\n    @queryAsync(\"sgds-datepicker-input\") sgdsDatepickerInput: Promise<SgdsInput>;\n\n    // TypeScript requires mixin constructors to have rest parameter of type any[]\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    constructor(...args: any[]) {\n      super(...args);\n      this._internals = this.attachInternals();\n    }\n\n    connectedCallback(): void {\n      super.connectedCallback();\n\n      /** Idempotency guarantee — always create so reset can clear validity even with noValidate */\n      this.inputValidationController ??= new InputValidationController(this);\n    }\n    async firstUpdated(changedProperties: PropertyValueMap<this>) {\n      super.firstUpdated(changedProperties);\n\n      /* Either input or sgds-input. For example, quantity-toggle uses sgds-input */\n      this.input =\n        this.shadowRoot.querySelector(\"input\") ||\n        (await this.sgdsInput) ||\n        this.shadowRoot.querySelector(\"textarea\") ||\n        (await this.sgdsDatepickerInput);\n\n      this._mixinSetFormValue();\n\n      if (this._mixinShouldSkipSgdsValidation()) return;\n\n      this._mixinValidate(this.input);\n    }\n\n    /**\n     * Native lifecycle of Form-Associated Custom Element Callbacks\n     */\n    formResetCallback() {\n      if (this._mixinResetFormControl) {\n        this._mixinResetFormControl();\n      } else {\n        this.value = this.defaultValue;\n        this._mixinResetValidity(this.input);\n      }\n      this._mixinSetFormValue();\n    }\n    /**\n     *\n     * Methods use by classes using this mixin\n     */\n\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run change handler\n     */\n    _mixinHandleChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleChange(e);\n    }\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run input handler\n     */\n    _mixinHandleInputChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleInput(e);\n    }\n    /**\n     * During form resetting,\n     * 1. ValidityState is reset (always, regardless of noValidate)\n     * 2. invalid reactive prop is updated after the reset (always)\n     * 3. Reset touched state to false for a pristine form (always)\n     * 4. Revalidates the ValidityState (but do not update invalid prop)\n     * to prepare for the next validity check (skipped when noValidate)\n     */\n    _mixinResetValidity(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      this.inputValidationController.resetValidity();\n      this.inputValidationController.updateInvalidState();\n      this._isTouched ? (this._isTouched = false) : null;\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.validateInput(input);\n    }\n\n    _mixinValidate(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.validateInput(input);\n    }\n    _mixinSetFormValue() {\n      const value = this.value as string | FormData | File;\n      this._internals.setFormValue(value);\n    }\n    _mixinCheckValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.checkValidity();\n    }\n    _mixinReportValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.reportValidity();\n    }\n    _mixinGetValidity(): ValidityState {\n      return this._internals.validity;\n    }\n    _mixinGetValidationMessage(): string {\n      return this._internals.validationMessage;\n    }\n    _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      return this.inputValidationController.setValidity(flags, message, anchor);\n    }\n    // Only check for noValidate prop\n    _mixinShouldSkipSgdsValidation() {\n      const form = this.closest(\"form\");\n\n      return form?.noValidate || this.noValidate;\n    }\n\n    /** DECLARED INSTANCE METHODS AND PROPERTIES*/\n\n    /**\n     * Resets a form control to its initial state\n     */\n    declare _mixinResetFormControl: () => void;\n    declare value: string;\n    declare defaultValue: string;\n    declare defaultChecked: boolean;\n    declare noValidate: boolean;\n  }\n\n  return ToBeValidatedElement as Constructor<ToBeValidatedElementInterface> & T;\n};\n\nexport declare class ToBeValidatedElementInterface {\n  inputValidationController: InputValidationController;\n  input: HTMLInputElement;\n  _mixinHandleChange(e: Event): void;\n  _mixinHandleInputChange(e: Event): void;\n  _mixinResetValidity(input: HTMLInputElement | SgdsInput): void;\n  _mixinValidate(input: HTMLInputElement | SgdsInput): void;\n  _mixinSetFormValue(): void;\n  _mixinCheckValidity(): boolean;\n  _mixinReportValidity(): boolean;\n  _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;\n  _mixinGetValidity(): ValidityState;\n  _mixinGetValidationMessage(): string;\n  _mixinShouldSkipSgdsValidation(): boolean;\n}\n"],"mappings":";;;;;;;;;;AAaA,MAAa,0BAA6D,eAAkB;CAC1F,MAAM,6BAA6B,WAAW;;GACpB,KAAA,iBAAA;;EAUxB,YAAY,GAAG,MAAa;GAC1B,MAAM,GAAG,IAAI;GARM,KAAA,aAAA;GASnB,KAAK,aAAa,KAAK,gBAAgB;EACzC;EAEA,oBAA0B;GACxB,MAAM,kBAAkB;;GAGxB,KAAK,8BAA8B,IAAI,0BAA0B,IAAI;EACvE;EACA,MAAM,aAAa,mBAA2C;GAC5D,MAAM,aAAa,iBAAiB;GAGpC,KAAK,QACH,KAAK,WAAW,cAAc,OAAO,KACpC,MAAM,KAAK,aACZ,KAAK,WAAW,cAAc,UAAU,KACvC,MAAM,KAAK;GAEd,KAAK,mBAAmB;GAExB,IAAI,KAAK,+BAA+B,GAAG;GAE3C,KAAK,eAAe,KAAK,KAAK;EAChC;;;;EAKA,oBAAoB;GAClB,IAAI,KAAK,wBACP,KAAK,uBAAuB;QACvB;IACL,KAAK,QAAQ,KAAK;IAClB,KAAK,oBAAoB,KAAK,KAAK;GACrC;GACA,KAAK,mBAAmB;EAC1B;;;;;;;;;;EAWA,mBAAmB,GAAgB;GACjC,KAAK,mBAAmB;GACxB,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,aAAa,CAAC;EAC/C;;;;;;EAMA,wBAAwB,GAAgB;GACtC,KAAK,mBAAmB;GACxB,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,YAAY,CAAC;EAC9C;;;;;;;;;EASA,oBAAoB,OAA2D;GAC7E,KAAK,0BAA0B,cAAc;GAC7C,KAAK,0BAA0B,mBAAmB;GAClD,KAAwB,eAAa;GACrC,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,cAAc,KAAK;EACpD;EAEA,eAAe,OAA2D;GACxE,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,cAAc,KAAK;EACpD;EACA,qBAAqB;GACnB,MAAM,QAAQ,KAAK;GACnB,KAAK,WAAW,aAAa,KAAK;EACpC;EACA,sBAA+B;GAC7B,IAAI,KAAK,+BAA+B,GAAG,OAAO;GAClD,OAAO,KAAK,0BAA0B,cAAc;EACtD;EACA,uBAAgC;GAC9B,IAAI,KAAK,+BAA+B,GAAG,OAAO;GAClD,OAAO,KAAK,0BAA0B,eAAe;EACvD;EACA,oBAAmC;GACjC,OAAO,KAAK,WAAW;EACzB;EACA,6BAAqC;GACnC,OAAO,KAAK,WAAW;EACzB;EACA,kBAAkB,OAA4B,SAAkB,QAA4B;GAC1F,IAAI,KAAK,+BAA+B,GAAG;GAC3C,OAAO,KAAK,0BAA0B,YAAY,OAAO,SAAS,MAAM;EAC1E;EAEA,iCAAiC;GAG/B,OAFa,KAAK,QAAQ,MAEhB,CAAC,EAAE,cAAc,KAAK;EAClC;CAYF;CAjIG,WAAA,CAAA,WAAW,YAAY,CAAA,GAAA,qBAAA,WAAA,aAAA,KAAA,CAAA;CACvB,WAAA,CAAA,WAAW,uBAAuB,CAAA,GAAA,qBAAA,WAAA,uBAAA,KAAA,CAAA;CAkIrC,OAAO;AACT"}
+{"version":3,"file":"validatorMixin.js","names":[],"sources":["../../../src/utils/validatorMixin.ts"],"sourcesContent":["import { LitElement, PropertyValueMap } from \"lit\";\nimport { queryAsync } from \"lit/decorators.js\";\nimport { SgdsInput } from \"../components\";\nimport { InputValidationController } from \"./inputValidationController\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype Constructor<T> = new (...args: any[]) => T;\n\n/**\n * @summary The FormValidationMixin used by the form components\n * @param superClass\n * @returns\n */\nexport const SgdsFormValidatorMixin = <T extends Constructor<LitElement>>(superClass: T) => {\n  class ToBeValidatedElement extends superClass {\n    static formAssociated = true;\n    inputValidationController: InputValidationController;\n    input: HTMLInputElement | SgdsInput | HTMLTextAreaElement;\n    private _isTouched = false;\n    private _internals: ElementInternals;\n    @queryAsync(\"sgds-input\") sgdsInput: Promise<SgdsInput>;\n    @queryAsync(\"sgds-datepicker-input\") sgdsDatepickerInput: Promise<SgdsInput>;\n\n    // TypeScript requires mixin constructors to have rest parameter of type any[]\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    constructor(...args: any[]) {\n      super(...args);\n      this._internals = this.attachInternals();\n    }\n\n    connectedCallback(): void {\n      super.connectedCallback();\n\n      /** Idempotency guarantee — always create so reset can clear validity even with noValidate */\n      this.inputValidationController ??= new InputValidationController(this);\n    }\n    async firstUpdated(changedProperties: PropertyValueMap<this>) {\n      super.firstUpdated(changedProperties);\n\n      /* Either input or sgds-input. For example, quantity-toggle uses sgds-input */\n      this.input =\n        this.shadowRoot.querySelector(\"input\") ||\n        (await this.sgdsInput) ||\n        this.shadowRoot.querySelector(\"textarea\") ||\n        (await this.sgdsDatepickerInput);\n\n      this._mixinSetFormValue();\n\n      if (this._mixinShouldSkipSgdsValidation()) return;\n\n      this._mixinValidate(this.input);\n    }\n\n    /**\n     * Native lifecycle of Form-Associated Custom Element Callbacks\n     */\n    formResetCallback() {\n      if (this._mixinResetFormControl) {\n        this._mixinResetFormControl();\n      } else {\n        this.value = this.defaultValue;\n        this._mixinResetValidity(this.input);\n      }\n      this._mixinSetFormValue();\n    }\n    /**\n     *\n     * Methods use by classes using this mixin\n     */\n\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run change handler\n     */\n    _mixinHandleChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleChange(e);\n    }\n    /**\n     * OnChange of form component\n     * 1. Make value of control accessible via FormData\n     * 2. Run input handler\n     */\n    _mixinHandleInputChange(e: Event): void {\n      this._mixinSetFormValue();\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.handleInput(e);\n    }\n    /**\n     * During form resetting,\n     * 1. ValidityState is reset (always, regardless of noValidate)\n     * 2. invalid reactive prop is updated after the reset (always)\n     * 3. Reset touched state to false for a pristine form (always)\n     * 4. Revalidates the ValidityState (but do not update invalid prop)\n     * to prepare for the next validity check (skipped when noValidate)\n     */\n    _mixinResetValidity(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      this.inputValidationController.resetValidity();\n      this.inputValidationController.updateInvalidState();\n      this._isTouched ? (this._isTouched = false) : null;\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.validateInput(input);\n    }\n\n    _mixinValidate(input: HTMLInputElement | SgdsInput | HTMLTextAreaElement) {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      this.inputValidationController.validateInput(input);\n    }\n    _mixinSetFormValue(value?: string | FormData | File | null) {\n      this._internals.setFormValue(value !== undefined ? value : (this.value as string | FormData | File));\n    }\n    _mixinCheckValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.checkValidity();\n    }\n    _mixinReportValidity(): boolean {\n      if (this._mixinShouldSkipSgdsValidation()) return true;\n      return this.inputValidationController.reportValidity();\n    }\n    _mixinGetValidity(): ValidityState {\n      return this._internals.validity;\n    }\n    _mixinGetValidationMessage(): string {\n      return this._internals.validationMessage;\n    }\n    _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void {\n      if (this._mixinShouldSkipSgdsValidation()) return;\n      return this.inputValidationController.setValidity(flags, message, anchor);\n    }\n    // Only check for noValidate prop\n    _mixinShouldSkipSgdsValidation() {\n      const form = this.closest(\"form\");\n\n      return form?.noValidate || this.noValidate;\n    }\n\n    /** DECLARED INSTANCE METHODS AND PROPERTIES*/\n\n    /**\n     * Resets a form control to its initial state\n     */\n    declare _mixinResetFormControl: () => void;\n    declare value: string;\n    declare defaultValue: string;\n    declare defaultChecked: boolean;\n    declare noValidate: boolean;\n  }\n\n  return ToBeValidatedElement as Constructor<ToBeValidatedElementInterface> & T;\n};\n\nexport declare class ToBeValidatedElementInterface {\n  inputValidationController: InputValidationController;\n  input: HTMLInputElement;\n  _mixinHandleChange(e: Event): void;\n  _mixinHandleInputChange(e: Event): void;\n  _mixinResetValidity(input: HTMLInputElement | SgdsInput): void;\n  _mixinValidate(input: HTMLInputElement | SgdsInput): void;\n  _mixinSetFormValue(value?: string | FormData | File | null): void;\n  _mixinCheckValidity(): boolean;\n  _mixinReportValidity(): boolean;\n  _mixinSetValidity(flags?: ValidityStateFlags, message?: string, anchor?: HTMLElement): void;\n  _mixinGetValidity(): ValidityState;\n  _mixinGetValidationMessage(): string;\n  _mixinShouldSkipSgdsValidation(): boolean;\n}\n"],"mappings":";;;;;;;;;;AAaA,MAAa,0BAA6D,eAAkB;CAC1F,MAAM,6BAA6B,WAAW;;GACpB,KAAA,iBAAA;;EAUxB,YAAY,GAAG,MAAa;GAC1B,MAAM,GAAG,IAAI;GARM,KAAA,aAAA;GASnB,KAAK,aAAa,KAAK,gBAAgB;EACzC;EAEA,oBAA0B;GACxB,MAAM,kBAAkB;;GAGxB,KAAK,8BAA8B,IAAI,0BAA0B,IAAI;EACvE;EACA,MAAM,aAAa,mBAA2C;GAC5D,MAAM,aAAa,iBAAiB;GAGpC,KAAK,QACH,KAAK,WAAW,cAAc,OAAO,KACpC,MAAM,KAAK,aACZ,KAAK,WAAW,cAAc,UAAU,KACvC,MAAM,KAAK;GAEd,KAAK,mBAAmB;GAExB,IAAI,KAAK,+BAA+B,GAAG;GAE3C,KAAK,eAAe,KAAK,KAAK;EAChC;;;;EAKA,oBAAoB;GAClB,IAAI,KAAK,wBACP,KAAK,uBAAuB;QACvB;IACL,KAAK,QAAQ,KAAK;IAClB,KAAK,oBAAoB,KAAK,KAAK;GACrC;GACA,KAAK,mBAAmB;EAC1B;;;;;;;;;;EAWA,mBAAmB,GAAgB;GACjC,KAAK,mBAAmB;GACxB,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,aAAa,CAAC;EAC/C;;;;;;EAMA,wBAAwB,GAAgB;GACtC,KAAK,mBAAmB;GACxB,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,YAAY,CAAC;EAC9C;;;;;;;;;EASA,oBAAoB,OAA2D;GAC7E,KAAK,0BAA0B,cAAc;GAC7C,KAAK,0BAA0B,mBAAmB;GAClD,KAAwB,eAAa;GACrC,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,cAAc,KAAK;EACpD;EAEA,eAAe,OAA2D;GACxE,IAAI,KAAK,+BAA+B,GAAG;GAC3C,KAAK,0BAA0B,cAAc,KAAK;EACpD;EACA,mBAAmB,OAAyC;GAC1D,KAAK,WAAW,aAAa,UAAU,KAAA,IAAY,QAAS,KAAK,KAAkC;EACrG;EACA,sBAA+B;GAC7B,IAAI,KAAK,+BAA+B,GAAG,OAAO;GAClD,OAAO,KAAK,0BAA0B,cAAc;EACtD;EACA,uBAAgC;GAC9B,IAAI,KAAK,+BAA+B,GAAG,OAAO;GAClD,OAAO,KAAK,0BAA0B,eAAe;EACvD;EACA,oBAAmC;GACjC,OAAO,KAAK,WAAW;EACzB;EACA,6BAAqC;GACnC,OAAO,KAAK,WAAW;EACzB;EACA,kBAAkB,OAA4B,SAAkB,QAA4B;GAC1F,IAAI,KAAK,+BAA+B,GAAG;GAC3C,OAAO,KAAK,0BAA0B,YAAY,OAAO,SAAS,MAAM;EAC1E;EAEA,iCAAiC;GAG/B,OAFa,KAAK,QAAQ,MAEhB,CAAC,EAAE,cAAc,KAAK;EAClC;CAYF;CAhIG,WAAA,CAAA,WAAW,YAAY,CAAA,GAAA,qBAAA,WAAA,aAAA,KAAA,CAAA;CACvB,WAAA,CAAA,WAAW,uBAAuB,CAAA,GAAA,qBAAA,WAAA,uBAAA,KAAA,CAAA;CAiIrC,OAAO;AACT"}

package/types/react.d.ts

@@ -375,7 +375,7 @@ export interface SgdsCheckboxGroupProps extends SgdsBaseProps {
 // ── Checkbox ─────────────────────────────────────────────────────────────
 
 export interface SgdsCheckboxProps extends SgdsBaseProps {
-  /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. */
+  /** Value submitted in FormData when the checkbox is checked. Defaults to `"on"` when not set, matching native checkbox behaviour. When unchecked, the key is absent from FormData. */
   value?: string;
   /** Draws the checkbox in a checked state. */
   checked?: boolean;

package/utils/ssr-nonce-patch.d.ts

@@ -1,8 +1,9 @@
 /**
- * Patches @lit-labs/ssr's LitElementRenderer.renderShadow() to respect
- * globalThis.litNonce for CSP nonce injection.
+ * Placeholder — the actual ssr-nonce-patch is in ssr-nonce-patch.raw.js
+ * which is copied to lib/ by frankBuild.js, bypassing Rolldown.
+ * This preserves bare require() for webpack's module system.
  *
- * Uses globalThis.require (Node.js CJS require) for SYNCHRONOUS module
- * resolution. This ensures the patch is applied at module evaluation time —
- * before any SSR rendering starts, including on the first request.
+ * The export below prevents Rolldown from tree-shaking this module
+ * when imported from _ssr-init.ts.
  */
+export declare const _ssrNoncePatchLoaded = true;