scb-wc-test 0.1.82 → 0.1.83

package/index.js

@@ -55,7 +55,7 @@ import { ScbSwitch as ro } from "./scb-switch/scb-switch.js";
 import { ScbPrimaryTab as eo } from "./scb-tabs/scb-primary-tab.js";
 import { ScbSecondaryTab as co } from "./scb-tabs/scb-secondary-tab.js";
 import { ScbTabs as mo } from "./scb-tabs/scb-tabs.js";
-import { ScbTextField2 as bo } from "./scb-textfield/scb-textfield.js";
+import { ScbTextField as bo } from "./scb-textfield/scb-textfield.js";
 import { ScbTocItem as fo } from "./scb-toc/scb-toc-item.js";
 import { ScbToc as io } from "./scb-toc/scb-toc.js";
 import { ScbTooltip as uo } from "./scb-tooltip/scb-tooltip.js";
@@ -118,7 +118,7 @@ export {
   Hr as ScbSubMenu,
   ro as ScbSwitch,
   mo as ScbTabs,
-  bo as ScbTextField2,
+  bo as ScbTextField,
   io as ScbToc,
   fo as ScbTocItem,
   uo as ScbTooltip,

package/mvc/components/scb-textfield/scb-textfield.js

@@ -169,4 +169,4 @@ import{_ as h}from"../../vendor/preload-helper.js";import{i as p,x as c,a as u,n
       .scb-textfield.has-error-icon {
         padding-right: 44px; /* Adjust as needed for icon size and spacing */
       }
-    `];s([a({type:String,reflect:!0})],i.prototype,"type",2);s([a({type:String})],i.prototype,"label",2);s([a({type:String,attribute:"supporting-text"})],i.prototype,"supportingText",2);s([a({type:String,attribute:"error-text"})],i.prototype,"errorText",2);s([a({type:String,attribute:"leading-icon"})],i.prototype,"leadingIcon",2);s([a({type:String})],i.prototype,"name",2);s([a({type:String})],i.prototype,"pattern",2);s([a({type:String,attribute:"value"})],i.prototype,"value",2);s([a({type:String})],i.prototype,"underLabel",2);s([a({type:Boolean,reflect:!0})],i.prototype,"error",2);s([a({type:Boolean,reflect:!0})],i.prototype,"disabled",2);s([a({type:Boolean,reflect:!0})],i.prototype,"required",2);i=s([b("scb-textfield")],i);export{i as ScbTextField2};
+    `];s([a({type:String,reflect:!0})],i.prototype,"type",2);s([a({type:String})],i.prototype,"label",2);s([a({type:String,attribute:"supporting-text"})],i.prototype,"supportingText",2);s([a({type:String,attribute:"error-text"})],i.prototype,"errorText",2);s([a({type:String,attribute:"leading-icon"})],i.prototype,"leadingIcon",2);s([a({type:String})],i.prototype,"name",2);s([a({type:String})],i.prototype,"pattern",2);s([a({type:String,attribute:"value"})],i.prototype,"value",2);s([a({type:String})],i.prototype,"underLabel",2);s([a({type:Boolean,reflect:!0})],i.prototype,"error",2);s([a({type:Boolean,reflect:!0})],i.prototype,"disabled",2);s([a({type:Boolean,reflect:!0})],i.prototype,"required",2);i=s([b("scb-textfield")],i);export{i as ScbTextField};

package/mvc/components/scb-toc/scb-toc-item.js

@@ -1,4 +1,4 @@
-import{a as p,n as d,i as h,x as l,t as b}from"../../vendor/vendor.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-divider/scb-divider.js";import"../../vendor/preload-helper.js";import"../../vendor/vendor-material.js";import"../scb-tooltip/scb-tooltip.js";import"../scb-button/scb-button.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var s=customElements.define.bind(customElements);customElements.define=function(o,t,i){try{customElements.get(o)||s(o,t,i)}catch(n){var a=String(n||"");if(a.indexOf("already been used")===-1&&a.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();var u=Object.defineProperty,m=Object.getOwnPropertyDescriptor,c=(e,s,o,t)=>{for(var i=t>1?void 0:t?m(s,o):s,a=e.length-1,n;a>=0;a--)(n=e[a])&&(i=(t?n(s,o,i):n(i))||i);return t&&i&&u(s,o,i),i};let r=class extends h{constructor(){super(...arguments),this.expanded=!1,this.label="",this.supportingText="",this.itemHref="#",this.divider=!0,this._unique=crypto.randomUUID(),this._slotHasContent=!1,this._onSlotChange=()=>{const e=this.renderRoot.querySelector("slot");this._slotHasContent=!!e&&e.assignedNodes().length>0,this.requestUpdate(),this._updateTabbable()},this.toggleAccordion=()=>{const e=this.closest("scb-toc");e?.hasAttribute("detached")||e.querySelectorAll("scb-toc-item").forEach(t=>{t!==this&&t.expanded&&(t.expanded=!1,this.toggleBottom(t),t.dispatchEvent(new CustomEvent("expanded-changed",{detail:{expanded:!1},bubbles:!0,composed:!0})))});const s=this.expanded;this.expanded=!this.expanded,this.toggleBottom(this),s!==this.expanded&&this.dispatchEvent(new CustomEvent("expanded-changed",{detail:{expanded:this.expanded},bubbles:!0,composed:!0}))}}connectedCallback(){super.connectedCallback(),this.addEventListener("slotchange",this._onSlotChange)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("slotchange",this._onSlotChange)}updated(e){e.has("expanded")&&this._updateTabbable()}_updateTabbable(){if(typeof window>"u")return;const e=this.renderRoot.querySelector("slot");if(!e)return;e.assignedElements({flatten:!0}).forEach(o=>{o.matches("a,button,input,select,textarea,[tabindex]")&&(this.expanded?o.removeAttribute("tabindex"):o.setAttribute("tabindex","-1")),o.querySelectorAll?.("a,button,input,select,textarea,[tabindex]").forEach(t=>{const i=t;this.expanded?i.removeAttribute("tabindex"):i.setAttribute("tabindex","-1")})})}toggleBottom(e){const s=e.renderRoot.querySelector(".scb-toc-item-bottom");s&&(e.expanded?(s.style.maxHeight=`${s.scrollHeight}px`,setTimeout(()=>s.style.maxHeight="unset",160)):(s.style.maxHeight=`${s.scrollHeight}px`,requestAnimationFrame(()=>s.style.maxHeight="0")))}_onKeyDown(e){const s=this.closest("scb-toc"),t=Array.from(s?.querySelectorAll("scb-toc-item")||[]).map(n=>n.renderRoot.querySelector(".scb-toc-item")).filter(n=>!!n),i=e.currentTarget,a=t.indexOf(i);switch(e.key){case"Enter":case" ":e.preventDefault(),this.toggleAccordion();break;case"ArrowDown":e.preventDefault(),a<t.length-1&&t[a+1].focus();break;case"ArrowUp":e.preventDefault(),a>0&&t[a-1].focus();break;case"Home":e.preventDefault(),t.length&&t[0].focus();break;case"End":e.preventDefault(),t.length&&t[t.length-1].focus();break}}render(){const e=`bottom-${this._unique}`;return l`
+import{a as p,n as d,i as h,x as l,t as b}from"../../vendor/vendor.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-divider/scb-divider.js";import"../../vendor/vendor-material.js";import"../../vendor/preload-helper.js";import"../scb-tooltip/scb-tooltip.js";import"../scb-button/scb-button.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var s=customElements.define.bind(customElements);customElements.define=function(i,t,o){try{customElements.get(i)||s(i,t,o)}catch(n){var a=String(n||"");if(a.indexOf("already been used")===-1&&a.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();var u=Object.defineProperty,m=Object.getOwnPropertyDescriptor,c=(e,s,i,t)=>{for(var o=t>1?void 0:t?m(s,i):s,a=e.length-1,n;a>=0;a--)(n=e[a])&&(o=(t?n(s,i,o):n(o))||o);return t&&o&&u(s,i,o),o};let r=class extends h{constructor(){super(...arguments),this.expanded=!1,this.label="",this.supportingText="",this.itemHref="#",this.divider=!0,this._unique=crypto.randomUUID(),this._slotHasContent=!1,this._onSlotChange=()=>{const e=this.renderRoot.querySelector("slot");this._slotHasContent=!!e&&e.assignedNodes().length>0,this.requestUpdate(),this._updateTabbable()},this.toggleAccordion=()=>{const e=this.closest("scb-toc");e?.hasAttribute("detached")||e.querySelectorAll("scb-toc-item").forEach(t=>{t!==this&&t.expanded&&(t.expanded=!1,this.toggleBottom(t),t.dispatchEvent(new CustomEvent("expanded-changed",{detail:{expanded:!1},bubbles:!0,composed:!0})))});const s=this.expanded;this.expanded=!this.expanded,this.toggleBottom(this),s!==this.expanded&&this.dispatchEvent(new CustomEvent("expanded-changed",{detail:{expanded:this.expanded},bubbles:!0,composed:!0}))}}connectedCallback(){super.connectedCallback(),this.addEventListener("slotchange",this._onSlotChange)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("slotchange",this._onSlotChange)}updated(e){e.has("expanded")&&this._updateTabbable()}_updateTabbable(){if(typeof window>"u")return;const e=this.renderRoot.querySelector("slot");if(!e)return;e.assignedElements({flatten:!0}).forEach(i=>{i.matches("a,button,input,select,textarea,[tabindex]")&&(this.expanded?i.removeAttribute("tabindex"):i.setAttribute("tabindex","-1")),i.querySelectorAll?.("a,button,input,select,textarea,[tabindex]").forEach(t=>{const o=t;this.expanded?o.removeAttribute("tabindex"):o.setAttribute("tabindex","-1")})})}toggleBottom(e){const s=e.renderRoot.querySelector(".scb-toc-item-bottom");s&&(e.expanded?(s.style.maxHeight=`${s.scrollHeight}px`,setTimeout(()=>s.style.maxHeight="unset",160)):(s.style.maxHeight=`${s.scrollHeight}px`,requestAnimationFrame(()=>s.style.maxHeight="0")))}_onKeyDown(e){const s=this.closest("scb-toc"),t=Array.from(s?.querySelectorAll("scb-toc-item")||[]).map(n=>n.renderRoot.querySelector(".scb-toc-item")).filter(n=>!!n),o=e.currentTarget,a=t.indexOf(o);switch(e.key){case"Enter":case" ":e.preventDefault(),this.toggleAccordion();break;case"ArrowDown":e.preventDefault(),a<t.length-1&&t[a+1].focus();break;case"ArrowUp":e.preventDefault(),a>0&&t[a-1].focus();break;case"Home":e.preventDefault(),t.length&&t[0].focus();break;case"End":e.preventDefault(),t.length&&t[t.length-1].focus();break}}render(){const e=`bottom-${this._unique}`,s=`toc-label-${this._unique}`;return l`
       <div
         class="scb-toc-item"
         role="listitem"
@@ -7,17 +7,20 @@ import{a as p,n as d,i as h,x as l,t as b}from"../../vendor/vendor.js";import"..
       >
         <div class="scb-toc-item-top">
           <div>
-            <a class="toc-item-label" href=${this.itemHref}>${this.label}</a>
+            <div class="toc-item-label-wrapper">
+              <a id=${s} class="toc-item-label" href=${this.itemHref}>${this.label}</a>
+              <md-focus-ring for=${s} inward></md-focus-ring>
+            </div>
             <div class="supporting-text">${this.supportingText}</div>
           </div>
           ${this._slotHasContent?l`
-            <scb-icon-button 
-              icon=${this.expanded?"keyboard_arrow_up":"keyboard_arrow_down"}
-              ariaLabel=${this.expanded?"Collapse section":"Expand section"}
-              @click=${this.toggleAccordion}
-              @keydown=${this._onKeyDown} 
-            ></scb-icon-button>
-          `:""}
+                <scb-icon-button
+                  icon=${this.expanded?"keyboard_arrow_up":"keyboard_arrow_down"}
+                  ariaLabel=${this.expanded?"Collapse section":"Expand section"}
+                  @click=${this.toggleAccordion}
+                  @keydown=${this._onKeyDown}
+                ></scb-icon-button>
+              `:""}
         </div>
         <div
           id=${e}
@@ -28,12 +31,17 @@ import{a as p,n as d,i as h,x as l,t as b}from"../../vendor/vendor.js";import"..
         ${this.divider?l`<scb-divider></scb-divider>`:""}
       </div>
     `}};r.styles=[p`
-      .scb-toc-item-top{ 
-        padding: var(--spacing-5) var(--spacing-3); 
+      .scb-toc-item-top {
+        padding: var(--spacing-5) var(--spacing-3);
         display: flex;
         gap: var(--spacing-5);
         flex-direction: row;
       }
+      .toc-item-label-wrapper {
+        position: relative;
+        display: block;
+        width: fit-content;
+      }
       .toc-item-label {
         display: block;
         width: fit-content;
@@ -46,23 +54,30 @@ import{a as p,n as d,i as h,x as l,t as b}from"../../vendor/vendor.js";import"..
         text-decoration-thickness: 1px;
         text-underline-offset: .1578em;
         margin-bottom: var(--spacing-3);
-        &:hover{
-            color: var(--md-sys-color-on-surface);
-            text-decoration-thickness: 2px;
-        }
-        &:focus{
-            color: var(--md-sys-color-on-surface);
-            outline-color: var(--md-sys-color-primary);
-        }
       }
-      scb-icon-button{
+      .toc-item-label:hover {
+        color: var(--md-sys-color-on-surface);
+        text-decoration-thickness: 2px;
+      }
+      .toc-item-label:focus {
+        color: var(--md-sys-color-on-surface);
+        outline: none;
+
+      }
+      .toc-item-label-wrapper md-focus-ring {
+        position: absolute;
+        pointer-events: none;
+        border-radius: var(--md-sys-shape-corner-small);
+        --md-focus-ring-inward-offset: -7px;
+      }
+      scb-icon-button {
         margin-left: auto;
       }
-      scb-divider{
+      scb-divider {
         margin: var(--spacing-0) var(--spacing-3);
       }
-      .scb-toc-item-bottom { 
-        font-size: var(--md-sys-typescale-body-medium-size); 
+      .scb-toc-item-bottom {
+        font-size: var(--md-sys-typescale-body-medium-size);
         line-height: var(--md-sys-typescale-body-medium-line-height); /* 150% */
         letter-spacing: var(--md-sys-typescale-body-medium-tracking);
       }
@@ -78,7 +93,7 @@ import{a as p,n as d,i as h,x as l,t as b}from"../../vendor/vendor.js";import"..
         padding: var(--spacing-0) var(--spacing-5) var(--spacing-5) var(--spacing-9);
         max-height: 100%;
       }
-      .scb-toc-item{
+      .scb-toc-item {
         color: var(--md-sys-color-on-surface);
       }
     `];c([d({type:Boolean})],r.prototype,"expanded",2);c([d({type:String,reflect:!0})],r.prototype,"label",2);c([d({type:String,attribute:"supporting-text"})],r.prototype,"supportingText",2);c([d({type:String,attribute:"item-href"})],r.prototype,"itemHref",2);c([d({type:Boolean,attribute:"divider"})],r.prototype,"divider",2);r=c([b("scb-toc-item")],r);

package/mvc/components/scb-toc/scb-toc.js

@@ -1,6 +1,13 @@
-import{a as c,i as a,x as _,t as d}from"../../vendor/vendor.js";import"./scb-toc-item.js";import"../scb-icon-button/scb-icon-button.js";import"../../vendor/preload-helper.js";import"../../vendor/vendor-material.js";import"../scb-tooltip/scb-tooltip.js";import"../scb-button/scb-button.js";import"../scb-divider/scb-divider.js";(function(){try{var r=typeof globalThis<"u"?globalThis:window;if(!r.__scb_ce_guard_installed__){r.__scb_ce_guard_installed__=!0;var s=customElements.define.bind(customElements);customElements.define=function(i,n,t){try{customElements.get(i)||s(i,n,t)}catch(o){var e=String(o||"");if(e.indexOf("already been used")===-1&&e.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var m=Object.getOwnPropertyDescriptor,u=(r,s,i,n)=>{for(var t=n>1?void 0:n?m(s,i):s,e=r.length-1,o;e>=0;e--)(o=r[e])&&(t=o(t)||t);return t};let l=class extends a{render(){return _`
-      <div role="list">
+import{a,n as d,i as p,x as _,t as f}from"../../vendor/vendor.js";import"./scb-toc-item.js";import"../scb-icon-button/scb-icon-button.js";import"../../vendor/preload-helper.js";import"../../vendor/vendor-material.js";import"../scb-tooltip/scb-tooltip.js";import"../scb-button/scb-button.js";import"../scb-divider/scb-divider.js";(function(){try{var c=typeof globalThis<"u"?globalThis:window;if(!c.__scb_ce_guard_installed__){c.__scb_ce_guard_installed__=!0;var r=customElements.define.bind(customElements);customElements.define=function(e,s,t){try{customElements.get(e)||r(e,s,t)}catch(i){var o=String(i||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw i}}}}catch{}})();var u=Object.defineProperty,m=Object.getOwnPropertyDescriptor,n=(c,r,e,s)=>{for(var t=s>1?void 0:s?m(r,e):r,o=c.length-1,i;o>=0;o--)(i=c[o])&&(t=(s?i(r,e,t):i(t))||t);return s&&t&&u(r,e,t),t};let l=class extends p{constructor(){super(...arguments),this.detached=!1}render(){return _`
+      <div class="scb-toc-list" role="list">
         <slot></slot>
       </div>
-    `}};l.styles=[c`
-    `];l=u([d("scb-toc")],l);
+    `}};l.styles=[a`
+      :host {
+        display: block;
+      }
+
+      .scb-toc-list {
+        display: block;
+      }
+    `];n([d({type:Boolean,reflect:!0})],l.prototype,"detached",2);l=n([f("scb-toc")],l);

package/mvc/components/scb-tooltip/scb-tooltip.js

@@ -1,215 +1,196 @@
-import{a as h,n,i as d,x as c,E as f,t as u}from"../../vendor/vendor.js";import"../scb-button/scb-button.js";import"../../vendor/vendor-material.js";import"../../vendor/preload-helper.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var i=customElements.define.bind(customElements);customElements.define=function(s,e,a){try{customElements.get(s)||i(s,e,a)}catch(p){var l=String(p||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw p}}}}catch{}})();var b=Object.defineProperty,y=Object.getOwnPropertyDescriptor,r=(t,i,s,e)=>{for(var a=e>1?void 0:e?y(i,s):i,l=t.length-1,p;l>=0;l--)(p=t[l])&&(a=(e?p(i,s,a):p(a))||a);return e&&a&&b(i,s,a),a};let o=class extends d{constructor(){super(...arguments),this.variant="plain",this.arrow=null,this.supportingtext="",this.label="",this.trigger="hover",this.position="top",this.open=!1,this.delay=1,this.offset=0,this._hoverActive=!1,this._clickActive=!1,this._hideTimeout=null,this.handleEventElement=t=>{const e=t.currentTarget.parentElement.shadowRoot?.querySelector(".scb-tooltip");e&&(t.type==="mouseenter"?(this._hoverActive=!0,this.openTooltip(e)):t.type==="mouseleave"?(this._hoverActive=!1,this._clickActive||(this.closeTooltip(e),this.addHidden(e))):t.type==="click"&&(this._clickActive=!this._clickActive,this._clickActive?this.openTooltip(e):this._hoverActive||(this.closeTooltip(e),this.addHidden(e))))}}render(){const t=this.arrow?c`<svg class="scb-tooltip-arrow" xmlns="http://www.w3.org/2000/svg" width="13" height="6" viewBox="0 0 13 6" fill="none">
-          <path d="M6.5 6L0.5 0H12.5L6.5 6Z" fill="var(--md-sys-color-inverse-surface, #0F0865)" />
-          </svg>`:f;return this.variant==="rich"?c`
-            <div class="scb-tooltip hidden" role="tooltip" aria-label=${this.label||this.supportingtext}>  
-              <div class="scb-tooltip-text-container">
-                  <label class="scb-tooltip-label">${this.label}</label>
-                  <span class="scb-tooltip-supporting-text">${this.supportingtext}</span>
-                </div>
-                <div class="scb-tooltip-button-container">
-                  <slot name="scb-tooltip-button"></slot>
-                </div>
+import{a as F,n as p,i as I,x as T,E as V,t as j}from"../../vendor/vendor.js";import"../scb-button/scb-button.js";import"../../vendor/vendor-material.js";import"../../vendor/preload-helper.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(o,r,i){try{customElements.get(o)||e(o,r,i)}catch(d){var h=String(d||"");if(h.indexOf("already been used")===-1&&h.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var q=Object.defineProperty,X=Object.getOwnPropertyDescriptor,c=(t,e,o,r)=>{for(var i=r>1?void 0:r?X(e,o):e,h=t.length-1,d;h>=0;h--)(d=t[h])&&(i=(r?d(e,o,i):d(i))||i);return r&&i&&q(e,o,i),i};let Y=0,l=class extends I{constructor(){super(...arguments),this.variant="plain",this.arrow=null,this.supportingtext="",this.label="",this.trigger="hover",this.position="top",this.open=!1,this.delay=1,this.offset=0,this._hoverActive=!1,this._clickActive=!1,this._hideTimeout=null,this._triggerEl=null,this._originalPosition="top",this._tooltipId=`scb-tooltip-${++Y}`,this._onTriggerMouseEnter=()=>{this._hoverActive=!0,this.open=!0},this._onTriggerMouseLeave=()=>{this._hoverActive=!1,this._clickActive||(this.open=!1)},this._onTriggerFocus=()=>{this._hoverActive=!0,this.open=!0},this._onTriggerBlur=()=>{this._hoverActive=!1,this._clickActive||(this.open=!1)},this._onTriggerClick=()=>{this._clickActive=!this._clickActive,this._clickActive?this.open=!0:this._hoverActive||(this.open=!1)}}firstUpdated(){if(this._originalPosition=this.position,this._updateDelayCss(),this._updateTriggerElement(),this.open){const t=this._getTooltipElement();t&&this._showTooltip(t)}}updated(t){if(t.has("trigger")&&this._updateTriggerElement(),t.has("delay")&&this._updateDelayCss(),t.has("open")){const e=this._getTooltipElement();if(!e)return;this.open?this._showTooltip(e):this._hideTooltip(e)}}disconnectedCallback(){super.disconnectedCallback(),this._detachTriggerListeners(),this._hideTimeout!==null&&(window.clearTimeout(this._hideTimeout),this._hideTimeout=null)}_getTooltipElement(){return this.renderRoot.querySelector(".scb-tooltip")}_updateDelayCss(){const t=Number.isFinite(this.delay)?this.delay:1;this.style.setProperty("--delay",`${t}s`)}_findTriggerElement(){const t=this.querySelector("[scb-tooltip-button]:not([slot])");return t||(Array.from(this.children).find(o=>o.nodeType===Node.ELEMENT_NODE)??null)}_updateTriggerElement(){const t=this._triggerEl;t&&(this._detachTriggerListeners(),t.removeAttribute("aria-describedby"));const e=this._findTriggerElement();this._triggerEl=e,e&&(e.setAttribute("aria-describedby",this._tooltipId),(this.trigger==="click"||this.trigger==="hover-click")&&e.addEventListener("click",this._onTriggerClick),(this.trigger==="hover"||this.trigger==="hover-click")&&(e.addEventListener("mouseenter",this._onTriggerMouseEnter),e.addEventListener("mouseleave",this._onTriggerMouseLeave),e.addEventListener("focus",this._onTriggerFocus),e.addEventListener("blur",this._onTriggerBlur)))}_detachTriggerListeners(){const t=this._triggerEl;t&&(t.removeEventListener("click",this._onTriggerClick),t.removeEventListener("mouseenter",this._onTriggerMouseEnter),t.removeEventListener("mouseleave",this._onTriggerMouseLeave),t.removeEventListener("focus",this._onTriggerFocus),t.removeEventListener("blur",this._onTriggerBlur))}_showTooltip(t){this._hideTimeout!==null&&(window.clearTimeout(this._hideTimeout),this._hideTimeout=null);const e=this._triggerEl;this._resetPosition(),t.classList.remove("hidden"),t.setAttribute("aria-hidden","false"),requestAnimationFrame(()=>{e&&this._positionTooltip(t,e),t.setAttribute("open","")})}_hideTooltip(t){t.removeAttribute("open"),t.setAttribute("aria-hidden","true"),this._scheduleHidden(t)}_scheduleHidden(t){const e=(Number.isFinite(this.delay)?this.delay:1)*1e3;if(e<=0){t.classList.add("hidden");return}this._hideTimeout=window.setTimeout(()=>{t.classList.add("hidden"),this._hideTimeout=null},e)}_resetPosition(){this.position=this._originalPosition}_positionTooltip(t,e){const o=e.getBoundingClientRect(),r=t.getBoundingClientRect(),i=this.getBoundingClientRect(),u=(this.offset??0)+8,v=8,_=v,y=window.innerHeight-v,w=v,x=window.innerWidth-v,M=s=>s>=_&&s+r.height<=y,O=s=>s>=w&&s+r.width<=x,E=(s,n,a,f)=>{let g=0;s<a&&(g+=a-s);const b=s+n;return b>f&&(g+=b-f),g},$=s=>{let n=0,a=0;switch(s){case"top":n=o.top-i.top-r.height-u,a=o.left-i.left+(o.width-r.width)/2;break;case"bottom":n=o.bottom-i.top+u,a=o.left-i.left+(o.width-r.width)/2;break;case"left":a=o.left-i.left-r.width-u,n=o.top-i.top+(o.height-r.height)/2;break;case"right":a=o.right-i.left+u,n=o.top-i.top+(o.height-r.height)/2;break}const f=n+i.top,g=a+i.left,b=E(f,r.height,_,y),R=E(g,r.width,w,x);return{pos:s,top:n,left:a,fitsV:M(f),fitsH:O(g),totalOverflow:b+R}},L=this.position==="top"||this.position==="bottom",k=this.position,P=this._getOppositePosition(k),A=[k,P,L?"left":"top",L?"right":"bottom"].map($);let m=A.find(s=>s.fitsV&&s.fitsH)??A.reduce((s,n)=>n.totalOverflow<s.totalOverflow?n:s);const C=(s,n,a)=>Math.min(Math.max(s,n),a),S=_-i.top,B=y-r.height-i.top,D=w-i.left,z=x-r.width-i.left,H=C(m.top,S,B),N=C(m.left,D,z);t.style.top=`${H}px`,t.style.left=`${N}px`,this.position!==m.pos&&(this.position=m.pos)}_getOppositePosition(t){switch(t){case"top":return"bottom";case"bottom":return"top";case"left":return"right";case"right":return"left"}}_onDefaultSlotChange(){this._updateTriggerElement()}render(){const t=this.arrow?T`<svg
+          class="scb-tooltip-arrow"
+          xmlns="http://www.w3.org/2000/svg"
+          width="13"
+          height="6"
+          viewBox="0 0 13 6"
+          fill="none"
+        >
+          <path
+            d="M6.5 6L0.5 0H12.5L6.5 6Z"
+            fill="var(--md-sys-color-inverse-surface, #0F0865)"
+          />
+        </svg>`:V,e=this.label||this.supportingtext;return this.variant==="rich"?T`
+        <div
+          id=${this._tooltipId}
+          class="scb-tooltip hidden"
+          role="tooltip"
+          aria-label=${e}
+          aria-hidden="true"
+        >
+          <div class="scb-tooltip-text-container">
+            <label class="scb-tooltip-label">${this.label}</label>
+            <span class="scb-tooltip-supporting-text">
+              ${this.supportingtext}
+            </span>
           </div>
-          <slot> </slot>  
-          `:c` 
-            <div class="scb-tooltip hidden">  
-              <div class="scb-tooltip-container">       
-                <span class="scb-tooltip-supporting-text">${this.supportingtext}</span> 
-              </div>
-              ${t} 
-          </div>  
-          <slot> </slot>  
-          `}firstUpdated(){this.setAnchorName(),this.setDelay(),this.setPosition(),this.setVariant(),this.setOffset(),this.handleEventlistnerClick(),this.handleEventlistnerHover()}setVariant(){this.hasAttribute("variant")&&this.style.setProperty("--variant",this.variant)}setAnchorName(){const t=Array.from({length:15},()=>"abcdefghijklmnopqrstuvwxyz"[Math.floor(Math.random()*26)]).join("");this.style.setProperty("--anchorname","--"+t)}setDelay(){this.hasAttribute("delay")&&this.style.setProperty("--delay",this.delay+"s")}setPosition(){this.hasAttribute("position")&&(this.style.setProperty("--position",this.position),this.style.setProperty("--oposition",this.position))}setDefaultPosition(){if(this.hasAttribute("position")){let t=getComputedStyle(this).getPropertyValue("--oposition");if(getComputedStyle(this).getPropertyValue("--position")!==t){this.style.setProperty("--position",t),this.setAttribute("position",t);return}}}setOffset(){let t=getComputedStyle(this).getPropertyValue("--position");this.hasAttribute("offset")&&this.hasAttribute("position")&&(t==="top"?this.style.setProperty("--offset","-"+(this.offset+8)+"px"):this.style.setProperty("--offset",this.offset+8+"px"))}handleEventlistnerClick(){const t=this.children[0];t&&t.hasAttribute("scb-tooltip-button")&&(this.getAttribute("trigger")==="click"||this.getAttribute("trigger")==="hover-click")&&t.addEventListener("click",this.handleEventElement)}handleEventlistnerHover(){const t=this.children[0];t&&t.hasAttribute("scb-tooltip-button")&&(this.getAttribute("trigger")==="hover"||this.getAttribute("trigger")==="hover-click")&&(t.addEventListener("mouseenter",this.handleEventElement),t.addEventListener("mouseleave",this.handleEventElement))}addHidden(t){const s=(parseFloat(getComputedStyle(this).getPropertyValue("--delay"))||1)*1e3;this._hideTimeout=window.setTimeout(()=>{t.classList.add("hidden"),this._hideTimeout=null},s)}openTooltip(t){this.setDefaultPosition(),this.adjustTooltipPosition(t),t.classList.remove("hidden"),this._hideTimeout&&(clearTimeout(this._hideTimeout),this._hideTimeout=null)}closeTooltip(t){t.removeAttribute("open"),t.setAttribute("aria-hidden","true")}adjustTooltipPosition(t){t&&(this.closeTooltip(t),setTimeout(()=>{const i=t.getBoundingClientRect();i.right>window.innerWidth&&(this.style.setProperty("--position","left"),this.setAttribute("position","left")),i.left<0&&(this.style.setProperty("--position","right"),this.setAttribute("position","right")),i.top<0&&(this.style.setProperty("--position","bottom"),this.setAttribute("position","bottom")),i.bottom>window.innerHeight&&(this.style.setProperty("--position","top"),this.setAttribute("position","top")),this.setOffset(),t.setAttribute("open",""),t.setAttribute("aria-hidden","false")},10))}};o.styles=[h`
-  --anchorname: randomString;
-  --position: top;
-  --variant: plain;
-  --oposition: top;
-  --delay: 1s;
-  --offset: 0px;
-
-:host {
-  position: relative;
-  display: inline-block;
-}
-
-:host {
-  .scb-tooltip {
-    position: absolute;
-    position-anchor: var(--anchorname);
-    position-area: var(--position);
-    min-width: 120px;
-    max-width: 300px;
-    transition: opacity var(--delay) ease-in-out;
-    z-index: 10;
-    opacity:0; 
+          <div class="scb-tooltip-button-container">
+            <slot name="scb-tooltip-button"></slot>
+          </div>
+        </div>
+        <slot @slotchange=${this._onDefaultSlotChange}></slot>
+      `:T`
+      <div
+        id=${this._tooltipId}
+        class="scb-tooltip hidden"
+        role="tooltip"
+        aria-label=${e}
+        aria-hidden="true"
+      >
+        <div class="scb-tooltip-container">
+          <span class="scb-tooltip-supporting-text">
+            ${this.supportingtext}
+          </span>
+        </div>
+        ${t}
+      </div>
+      <slot @slotchange=${this._onDefaultSlotChange}></slot>
+    `}};l.styles=F`
+    :host {
+      position: relative;
+      display: inline-block;
+      --delay: 1s;
+    }
 
-    .scb-tooltip-supporting-text {
-        font-family: var(--brand-font, Inter);
-        font-size:  var(--md-sys-typescale-body-small-size);
-        font-style: normal;
-        line-height: var(--md-sys-typescale-body-small-line-height); 
-        letter-spacing: var(--md-sys-typescale-body-small-tracking);
-      }
+    .scb-tooltip {
+      position: absolute;
+      min-width: 120px;
+      max-width: 300px;
+      opacity: 0;
+      visibility: hidden;
+      z-index: 10;
+      transition:
+        opacity var(--delay) ease-in-out,
+        visibility var(--delay) ease-in-out;
     }
 
-    .hidden{
+    .scb-tooltip[open] {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    .hidden {
       visibility: hidden;
     }
-}
 
-::slotted([scb-tooltip-button]) {
-    anchor-name: var(--anchorname);
-    display: inline-flex;
-  } 
+    .scb-tooltip-supporting-text {
+      font-family: var(--brand-font, Inter);
+      font-size: var(--md-sys-typescale-body-small-size);
+      font-style: normal;
+      line-height: var(--md-sys-typescale-body-small-line-height);
+      letter-spacing: var(--md-sys-typescale-body-small-tracking);
+    }
+
+    ::slotted([scb-tooltip-button]) {
+      display: inline-flex;
+    }
 
-/* Plain variant styles */
-  :host([variant="plain"]) .scb-tooltip { 
-    max-width: 184px;
-    transition: opacity var(--delay) ease-in-out;
-    opacity:0;
-    z-index: 10;
+    /* Plain variant */
 
-    .scb-tooltip-container {
+    :host([variant='plain']) .scb-tooltip {
+      max-width: 184px;
+    }
+
+    :host([variant='plain']) .scb-tooltip-container {
       display: inline-flex;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       background: var(--md-sys-color-inverse-surface);
-      border-radius: var(--md-sys-shape-corner-extra-small); 
-      min-height: 14px; 
-      width: 100%;         
-
-          .scb-tooltip-supporting-text {
-              padding: var(--spacing-2) var(--spacing-3);
-              color: var(--md-sys-color-inverse-on-surface);          
-          }
-        }
-        .scb-tooltip-arrow {
-          width: 12px;
-          height: 6px;
-          position: absolute;
-          left: 50%;
-          bottom: -5px;
-          transform: translateX(-50%) rotate(0deg);
-        }
-      }
-
-  /* Rich variant styles */
-:host([variant="rich"]) {
-  align-items: flex-start;
-  gap: var(--spacing-2);
-
-        .scb-tooltip {
-          background: var(--md-sys-color-surface-container, #EBF8FF);
-          box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.20), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 4px 5px 0 rgba(0, 0, 0, 0.14);
-          display: inline-flex;
-          padding-bottom: var(--spacing-3);
-          flex-direction: column;
-          align-items: flex-start;
-          gap: var(--spacing-3);
-          border-radius: var(--md-sys-shape-corner-medium);
-          min-width: 200px;
-          max-width: 300px;
-          opacity: 0;
-          z-index: 10;
-          transition: opacity var(--delay) ease-in-out;
-
-    .scb-tooltip-text-container {
-      display: flex;
-      min-width: 220px;
-      padding: var(--spacing-4) var(--spacing-5) var(--spacing-2) var(--spacing-5);
-      align-items: flex-start;
-      gap: var(--spacing-2);
-      flex-direction: column;               
-
-      .scb-tooltip-supporting-text {
-          color: var(--md-sys-color-on-surface-variant, rgba(11, 5, 68, 0.75));
-      }
-
-      .scb-tooltip-label {
-        font-family: var(--brand-font, Inter);
-        font-size:  var(--md-sys-typescale-title-small-size);
-        font-style: normal;
-        font-weight:  var(--weight-semibold);
-        line-height:  var(--md-sys-typescale-title-small-Line-Height);
-        letter-spacing: var(--md-sys-typescale-title-small-Tracking);
-      }
-    }   
-  }
-  
-  .scb-tooltip-button-container {
-    display: flex;
-    padding: 0 var(--spacing-3);
-    align-items: center;
-    gap: var(--spacing-3);
-    align-self: stretch;
-  }  
-} 
-
-  /* Postion styles */
-  :host([position="left"]) .scb-tooltip {
-    right: calc(anchor( left) + var(--offset));
-    align-self: center;
-  }
-   :host([position="right"]) .scb-tooltip {
-    left: calc(anchor(right) + var(--offset));
-    align-self: center;
-  }
-
-  :host([position="top"]) .scb-tooltip,
-  :host([position="bottom"]) .scb-tooltip {
-    transform: translateY(var(--offset));
-  }
-
-  /* Plain tooltip arrow postions */
-  :host([position="top"][arrow]) .scb-tooltip {§
-    .scb-tooltip-arrow {
-        left: 50%;
-        bottom: -6px;
-        transform: translateX(-50%) rotate(0deg);
+      border-radius: var(--md-sys-shape-corner-extra-small);
+      min-height: 14px;
+      width: 100%;
+    }
+
+    :host([variant='plain']) .scb-tooltip-supporting-text {
+      padding: var(--spacing-2) var(--spacing-3);
+      color: var(--md-sys-color-inverse-on-surface);
     }
-  }
 
-  :host([position="right"][arrow]) .scb-tooltip {      
     .scb-tooltip-arrow {
+      width: 12px;
+      height: 6px;
+      position: absolute;
+    }
+
+    :host([position='top']) .scb-tooltip-arrow {
+      left: 50%;
+      bottom: -6px;
+      transform: translateX(-50%) rotate(0deg);
+    }
+
+    :host([position='right']) .scb-tooltip-arrow {
       left: -9px;
       top: 50%;
       transform: translateY(-50%) rotate(90deg);
     }
-  }
 
-:host([position="bottom"][arrow]) .scb-tooltip {
-    .scb-tooltip-arrow {
+    :host([position='bottom']) .scb-tooltip-arrow {
       left: 50%;
       top: -6px;
       transform: translateX(-50%) rotate(180deg);
     }
-}
 
-:host([variant="plain"][position="left"]) .scb-tooltip {   
-  .scb-tooltip-arrow{
+    :host([position='left']) .scb-tooltip-arrow {
       left: 100%;
       top: 50%;
       transform: translateY(-50%) translateX(-3px) rotate(270deg);
-  }
-}
-
-:host([variant="plain"][arrow="false"]) .scb-tooltip {
-  .scb-tooltip-arrow {
-    display: none;
-  } 
-}
-
-/* tooltip open states */
-:host([variant="rich"]) .scb-tooltip[open],
-:host([variant="plain"]) .scb-tooltip[open]
-{
-  opacity:1;
-}
-
-:host([variant="plain"][open]) .scb-tooltip,
-:host([variant="rich"][open]) .scb-tooltip{
-  opacity:1;
-  visibility: visible;
-}
-  `];r([n({type:String,reflect:!0})],o.prototype,"variant",2);r([n({type:Boolean,reflect:!0})],o.prototype,"arrow",2);r([n({type:String,attribute:"supporting-text"})],o.prototype,"supportingtext",2);r([n({type:String})],o.prototype,"label",2);r([n({type:String,reflect:!0})],o.prototype,"trigger",2);r([n({type:String,reflect:!0})],o.prototype,"position",2);r([n({type:Boolean,reflect:!0})],o.prototype,"open",2);r([n({type:Number,reflect:!0})],o.prototype,"delay",2);r([n({type:Number,reflect:!0})],o.prototype,"offset",2);o=r([u("scb-tooltip")],o);
+    }
+
+    :host([variant='plain'][arrow='false']) .scb-tooltip-arrow {
+      display: none;
+    }
+
+    /* Rich variant */
+
+    :host([variant='rich']) {
+      align-items: flex-start;
+      gap: var(--spacing-2);
+    }
+
+    :host([variant='rich']) .scb-tooltip {
+      background: var(--md-sys-color-surface-container, #ebf8ff);
+      box-shadow:
+        0 2px 4px -1px rgba(0, 0, 0, 0.2),
+        0 1px 10px 0 rgba(0, 0, 0, 0.12),
+        0 4px 5px 0 rgba(0, 0, 0, 0.14);
+      display: inline-flex;
+      padding-bottom: var(--spacing-3);
+      flex-direction: column;
+      align-items: flex-start;
+      gap: var(--spacing-3);
+      border-radius: var(--md-sys-shape-corner-medium);
+      min-width: 200px;
+      max-width: 300px;
+    }
+
+    :host([variant='rich']) .scb-tooltip-text-container {
+      display: flex;
+      min-width: 220px;
+      padding: var(--spacing-4) var(--spacing-5) var(--spacing-2) var(--spacing-5);
+      align-items: flex-start;
+      gap: var(--spacing-2);
+      flex-direction: column;
+    }
+
+    :host([variant='rich']) .scb-tooltip-label {
+      font-family: var(--brand-font, Inter);
+      font-size: var(--md-sys-typescale-title-small-size);
+      font-style: normal;
+      font-weight: var(--weight-semibold);
+      line-height: var(--md-sys-typescale-title-small-Line-Height);
+      letter-spacing: var(--md-sys-typescale-title-small-Tracking);
+    }
+
+    :host([variant='rich']) .scb-tooltip-supporting-text {
+      color: var(--md-sys-color-on-surface-variant, rgba(11, 5, 68, 0.75));
+    }
+
+    :host([variant='rich']) .scb-tooltip-button-container {
+      display: flex;
+      padding: 0 var(--spacing-3);
+      align-items: center;
+      gap: var(--spacing-3);
+      align-self: stretch;
+    }
+  `;c([p({type:String,reflect:!0})],l.prototype,"variant",2);c([p({type:Boolean,reflect:!0})],l.prototype,"arrow",2);c([p({type:String,attribute:"supporting-text"})],l.prototype,"supportingtext",2);c([p({type:String})],l.prototype,"label",2);c([p({type:String,reflect:!0})],l.prototype,"trigger",2);c([p({type:String,reflect:!0})],l.prototype,"position",2);c([p({type:Boolean,reflect:!0})],l.prototype,"open",2);c([p({type:Number,reflect:!0})],l.prototype,"delay",2);c([p({type:Number,reflect:!0})],l.prototype,"offset",2);l=c([j("scb-tooltip")],l);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "scb-wc-test",
-    "version":  "0.1.82",
+    "version":  "0.1.83",
     "type":  "module",
     "main":  "index.js",
     "module":  "index.js",
@@ -308,5 +308,5 @@
                                   },
                     "./mvc/*":  "./mvc/*"
                 },
-    "buildHash":  "37CAAE84B349D9CD4B9BB7EE3F53B2CF2D153AFF2617FAAA179B2801305FCFBA"
+    "buildHash":  "7D654DFF5ACC59C07123D9AA1A68F02C4968BB29C6373A605F83B726FE403CDE"
 }

package/scb-textfield/scb-textfield.d.ts

@@ -4,7 +4,7 @@ declare global {
         __scb_md_icon_loaded?: boolean;
     }
 }
-export declare class ScbTextField2 extends LitElement {
+export declare class ScbTextField extends LitElement {
     type: 'number' | 'email' | 'password' | 'search' | 'tel' | 'text' | 'url' | 'textarea' | 'color' | 'date' | 'datetime-local' | 'file' | 'month' | 'time' | 'week';
     label: string;
     supportingText: string;
@@ -26,7 +26,7 @@ export declare class ScbTextField2 extends LitElement {
     render(): TemplateResult;
     /**
      Vi re-dispatchar inbyggda "input", "change" och "select" events med { bubbles: true, composed: true },
-     så att konsumenter kan lyssna på events direkt från <scb-text-field>. Vi kör också ett customevent onValueChanged.
+     så att konsumenter kan lyssna på events direkt från scb-text-field. Vi kör också ett customevent onValueChanged.
     */
     firstUpdated(changedProperties: Map<string, unknown>): void;
     updated(changed: PropertyValues): void;
@@ -38,3 +38,8 @@ export declare class ScbTextField2 extends LitElement {
     reportValidity(): boolean;
     private __ensureMdIconLoaded;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'scb-textfield': ScbTextField;
+    }
+}

package/scb-textfield/scb-textfield.js

@@ -55,7 +55,7 @@ let i = class extends h {
   }
   /**
    Vi re-dispatchar inbyggda "input", "change" och "select" events med { bubbles: true, composed: true },
-   så att konsumenter kan lyssna på events direkt från <scb-text-field>. Vi kör också ett customevent onValueChanged.
+   så att konsumenter kan lyssna på events direkt från scb-text-field. Vi kör också ett customevent onValueChanged.
   */
   firstUpdated(e) {
     var r;
@@ -291,5 +291,5 @@ i = s([
   u("scb-textfield")
 ], i);
 export {
-  i as ScbTextField2
+  i as ScbTextField
 };