q2-tecton-elements 1.70.2 → 1.71.0

package/dist/components/q2-surface.js

@@ -1,6 +1,6 @@
-import { proxyCustomElement as r, HTMLElement as a, createEvent as e, h as o, Host as t, transformTag as c } from "@stencil/core/internal/client";
+import { proxyCustomElement as r, HTMLElement as a, createEvent as e, h as t, Host as o, transformTag as c } from "@stencil/core/internal/client";
 
-const s =  r(class extends a {
+const n =  r(class extends a {
   constructor(r) {
     super(), !1 !== r && this.__registerHost(), this.__attachShadow(), this.tctClick = e(this, "tctClick", 7), 
     // #region Own Properties
@@ -51,7 +51,7 @@ const s =  r(class extends a {
      * @param animation The animation to play. Defaults to `'pulse'`.
      * @returns A Promise that resolves when the animation finishes or is cancelled.
      */
-  async animate(r = "pulse") {
+  async triggerAnimation(r = "pulse") {
     var a;
     return null === (a = this._cancelAnimation) || void 0 === a || a.call(this), new Promise((a => {
       const e = "q2-surface-animate-" + r, onEnd = () => {
@@ -68,22 +68,22 @@ const s =  r(class extends a {
   // #endregion
   // #region Render Methods
   render() {
-    return o(t, {
-      key: "235f94ccfb0eb7167079e8e25ee78d652999f8e8"
-    }, o("div", {
-      key: "b01d6e71bb4b8f1f583c63910d4b1eca757572dd",
+    return t(o, {
+      key: "992667ac1d625dff77a01d06d058865f99d8d190"
+    }, t("div", {
+      key: "d58162c346c58a2cc21a4334c08b6cc4a53ed2e0",
       class: "container",
       role: this.clickable ? "button" : void 0,
       tabIndex: this.clickable ? 0 : void 0
-    }, o("slot", {
-      key: "591dc9fcb51d6f238a6186f047661020be9ea800"
+    }, t("slot", {
+      key: "b70930390799484c71da93d1f801ecc681d168c6"
     })));
   }
   get hostElement() {
     return this;
   }
   static get style() {
-    return ':host{--comp-surface-bg:transparent;--comp-surface-hover-background:var(--tct-surface-hover-background, var(--t-base-hover, #f2f2f2));--comp-surface-border-color:var(--tct-surface-border-color, var(--t-gray-12, #d9d9d9));--comp-surface-animation-duration:var(--tct-surface-animation-duration, 1s);--comp-surface-gradient-direction:var(--tct-surface-background-gradient-direction, to right bottom);--comp-surface-radius:0px}*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none}::-moz-focus-inner{border:none}:host{display:block;transition:box-shadow var(--tct-surface-tween, var(--app-tween-1, 0.2s ease)), border-radius var(--tct-surface-tween, var(--app-tween-1, 0.2s ease)), background var(--tct-surface-tween, var(--app-tween-1, 0.2s ease)), padding var(--tct-surface-tween, var(--app-tween-1, 0.2s ease))}.container{display:block;background:transparent;border-radius:var(--comp-surface-radius);transition:background var(--tct-surface-tween, var(--app-tween-1, 0.2s ease)), border-radius var(--tct-surface-tween, var(--app-tween-1, 0.2s ease)), box-shadow var(--tct-surface-tween, var(--app-tween-1, 0.2s ease))}:host([elevation="1"]){box-shadow:var(--tct-surface-elevation-1-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))}:host([elevation="2"]){box-shadow:var(--tct-surface-elevation-2-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)))}:host([elevation="3"]){box-shadow:var(--tct-surface-elevation-3-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)))}:host([elevation="4"]){box-shadow:var(--tct-surface-elevation-4-box-shadow, var(--app-shadow-4, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)))}:host([elevation="5"]){box-shadow:var(--tct-surface-elevation-5-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)))}:host([radius="1"]){--comp-surface-radius:var(--tct-surface-border-radius-1, var(--app-border-radius-1, 4px));border-radius:var(--comp-surface-radius)}:host([radius="2"]){--comp-surface-radius:var(--tct-surface-border-radius-2, var(--app-border-radius-2, 8px));border-radius:var(--comp-surface-radius)}:host([radius="3"]){--comp-surface-radius:var(--tct-surface-border-radius-3, var(--app-border-radius-3, 12px));border-radius:var(--comp-surface-radius)}:host([radius="4"]){--comp-surface-radius:var(--tct-surface-border-radius-4, var(--app-border-radius-4, 16px));border-radius:var(--comp-surface-radius)}:host([radius="5"]){--comp-surface-radius:var(--tct-surface-border-radius-5, var(--app-border-radius-5, 24px));border-radius:var(--comp-surface-radius)}:host([background=default]){--comp-surface-bg:var(--tct-surface-background-default, var(--t-base, #ffffff));--comp-surface-hover-background:var(--tct-surface-hover-background, var(--t-base-hover, #f2f2f2))}:host([background=primary]){--comp-surface-bg:var(--tct-surface-background-primary, var(--t-primary, #6a4a9e));--comp-surface-hover-background:var(--tct-surface-primary-hover-background, var(--t-primary-l2, #7d5ab8));color:var(--tct-surface-primary-font-color, var(--t-primary-text, #ffffff))}:host([background=secondary]){--comp-surface-bg:var(--tct-surface-background-secondary, var(--t-secondary, #b3c2cc));--comp-surface-hover-background:var(--tct-surface-secondary-hover-background, var(--t-secondary-l2, #c2cfd8));color:var(--tct-surface-secondary-font-color, var(--t-secondary-text, #1a1a1a))}:host([background=tertiary]){--comp-surface-bg:var(--tct-surface-background-tertiary, var(--t-tertiary, #e8f5fc));--comp-surface-hover-background:var(--tct-surface-tertiary-hover-background, var(--t-tertiary-l2, #edf7fd));color:var(--tct-surface-tertiary-font-color, var(--t-tertiary-text, #1a1a1a))}:host([background]) .container{background:var(--comp-surface-bg)}:host([background-gradient]) .container{background:linear-gradient(in oklch var(--comp-surface-gradient-direction), color-mix(in oklab, var(--comp-surface-bg), white 40%), var(--comp-surface-bg))}:host([border]) .container{border:1px solid var(--comp-surface-border-color)}:host([border=primary]) .container{border-color:var(--tct-surface-primary-border-color, var(--t-primary, #6a4a9e))}:host([border=secondary]) .container{border-color:var(--tct-surface-secondary-border-color, var(--t-secondary, #b3c2cc))}:host([border=tertiary]) .container{border-color:var(--tct-surface-tertiary-border-color, var(--t-tertiary, #e8f5fc))}:host([border-gradient]){padding:2px}:host([border-gradient]) .container{border-radius:calc(var(--comp-surface-radius) - 2px)}:host([border-gradient])[border] .container{border:none}:host([border-gradient]:not([background])){--comp-surface-bg:var(--tct-surface-background-default, var(--t-base, #ffffff))}:host([border-gradient]:not([background])) .container{background:var(--comp-surface-bg)}:host([border-gradient]:not([border])),:host([border-gradient][border=default]){background:linear-gradient(in oklch var(--tct-surface-border-gradient-direction, var(--tct-surface-background-gradient-direction, to right bottom)), color-mix(in oklab, var(--tct-surface-border-color, var(--t-gray-12, #d9d9d9)), white 40%), var(--tct-surface-border-color, var(--t-gray-12, #d9d9d9)))}:host([border-gradient][border=primary]){background:linear-gradient(in oklch var(--tct-surface-border-gradient-direction, var(--tct-surface-background-gradient-direction, to right bottom)), color-mix(in oklab, var(--tct-surface-primary-border-color, var(--t-primary, #6a4a9e)), white 40%), var(--tct-surface-primary-border-color, var(--t-primary, #6a4a9e)))}:host([border-gradient][border=secondary]){background:linear-gradient(in oklch var(--tct-surface-border-gradient-direction, var(--tct-surface-background-gradient-direction, to right bottom)), color-mix(in oklab, var(--tct-surface-secondary-border-color, var(--t-secondary, #b3c2cc)), white 40%), var(--tct-surface-secondary-border-color, var(--t-secondary, #b3c2cc)))}:host([border-gradient][border=tertiary]){background:linear-gradient(in oklch var(--tct-surface-border-gradient-direction, var(--tct-surface-background-gradient-direction, to right bottom)), color-mix(in oklab, var(--tct-surface-tertiary-border-color, var(--t-tertiary, #e8f5fc)), white 40%), var(--tct-surface-tertiary-border-color, var(--t-tertiary, #e8f5fc)))}:host([inset=compact]) .container{padding:var(--tct-surface-inset-compact, var(--app-scale-1x, 5px))}:host([inset=normal]) .container{padding:var(--tct-surface-inset-normal, var(--app-scale-3x, 15px))}:host([inset=comfortable]) .container{padding:var(--tct-surface-inset-comfortable, var(--app-scale-5x, 25px))}:host([inset-x=none]) .container{padding-inline:0}:host([inset-x=compact]) .container{padding-inline:var(--tct-surface-inset-compact, var(--app-scale-1x, 5px))}:host([inset-x=normal]) .container{padding-inline:var(--tct-surface-inset-normal, var(--app-scale-3x, 15px))}:host([inset-x=comfortable]) .container{padding-inline:var(--tct-surface-inset-comfortable, var(--app-scale-5x, 25px))}:host([inset-y=none]) .container{padding-block:0}:host([inset-y=compact]) .container{padding-block:var(--tct-surface-inset-compact, var(--app-scale-1x, 5px))}:host([inset-y=normal]) .container{padding-block:var(--tct-surface-inset-normal, var(--app-scale-3x, 15px))}:host([inset-y=comfortable]) .container{padding-block:var(--tct-surface-inset-comfortable, var(--app-scale-5x, 25px))}:host([clickable]){cursor:pointer}:host([clickable]):hover .container{background:var(--comp-surface-hover-background)}:host([clickable])[elevation="0"]:hover .container,:host([clickable]):not([elevation]):hover .container{box-shadow:var(--tct-surface-elevation-hover-0-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))}:host([clickable])[elevation="1"]:hover .container{box-shadow:var(--tct-surface-elevation-hover-1-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)))}:host([clickable])[elevation="2"]:hover .container{box-shadow:var(--tct-surface-elevation-hover-2-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)))}:host([clickable])[elevation="3"]:hover .container{box-shadow:var(--tct-surface-elevation-hover-3-box-shadow, var(--app-shadow-4, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)))}:host([clickable])[elevation="4"]:hover .container{box-shadow:var(--tct-surface-elevation-hover-4-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)))}:host([clickable])[elevation="5"]:hover .container{box-shadow:var(--tct-surface-elevation-hover-5-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)))}:host([clickable]) .container:focus-visible{outline:none;box-shadow:var(--tct-surface-focus-visible-box-shadow, var(--const-double-focus-ring, 0 0 0 2px var(--t-base), 0 0 0 4px var(--const-focus-color), 0 0 0 6px var(--t-base)))}@keyframes q2-surface-bounce{from,20%,53%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0)}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0) scaleY(1.1)}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0) scaleY(1.05)}80%{transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0) scaleY(0.95)}90%{transform:translate3d(0, -4px, 0) scaleY(1.02)}}@keyframes q2-surface-flash{from,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes q2-surface-pulse{from{transform:scale3d(1, 1, 1)}50%{transform:scale3d(1.05, 1.05, 1.05)}to{transform:scale3d(1, 1, 1)}}@keyframes q2-surface-tada{from{transform:scale3d(1, 1, 1)}10%,20%{transform:scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -1deg)}30%,50%,70%,90%{transform:scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 1deg)}40%,60%,80%{transform:scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -1deg)}to{transform:scale3d(1, 1, 1)}}:host(.q2-surface-animate-bounce){animation:q2-surface-bounce var(--comp-surface-animation-duration) both;transform-origin:center bottom}:host(.q2-surface-animate-flash){animation:q2-surface-flash var(--comp-surface-animation-duration) both}:host(.q2-surface-animate-pulse){animation:q2-surface-pulse var(--comp-surface-animation-duration) both}:host(.q2-surface-animate-tada){animation:q2-surface-tada var(--comp-surface-animation-duration) both}';
+    return ':host{--comp-surface-bg:transparent;--comp-surface-hover-background:var(--tct-surface-default-hover-background, var(--t-base-primary1, #f2f2f2));--comp-surface-border-color:var(--tct-surface-default-border-color, var(--t-gray-12, #d9d9d9));--comp-surface-animation-duration:var(--tct-surface-animation-duration, 1s);--comp-surface-gradient-direction:var(--tct-surface-background-gradient-direction, to right bottom);--comp-surface-radius:0px}*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none}::-moz-focus-inner{border:none}:host{display:block;transition:box-shadow var(--tct-surface-tween, var(--app-tween-1, 0.2s ease)), border-radius var(--tct-surface-tween, var(--app-tween-1, 0.2s ease)), background var(--tct-surface-tween, var(--app-tween-1, 0.2s ease)), padding var(--tct-surface-tween, var(--app-tween-1, 0.2s ease))}.container{display:block;background:transparent;border-radius:var(--comp-surface-radius);transition:background var(--tct-surface-tween, var(--app-tween-1, 0.2s ease)), border-radius var(--tct-surface-tween, var(--app-tween-1, 0.2s ease)), box-shadow var(--tct-surface-tween, var(--app-tween-1, 0.2s ease))}:host([elevation="1"]){box-shadow:var(--tct-surface-elevation-1-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))}:host([elevation="2"]){box-shadow:var(--tct-surface-elevation-2-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)))}:host([elevation="3"]){box-shadow:var(--tct-surface-elevation-3-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)))}:host([elevation="4"]){box-shadow:var(--tct-surface-elevation-4-box-shadow, var(--app-shadow-4, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)))}:host([elevation="5"]){box-shadow:var(--tct-surface-elevation-5-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)))}:host([radius="1"]){--comp-surface-radius:var(--tct-surface-border-radius-1, var(--app-border-radius-1, 4px));border-radius:var(--comp-surface-radius)}:host([radius="2"]){--comp-surface-radius:var(--tct-surface-border-radius-2, var(--app-border-radius-2, 8px));border-radius:var(--comp-surface-radius)}:host([radius="3"]){--comp-surface-radius:var(--tct-surface-border-radius-3, var(--app-border-radius-3, 12px));border-radius:var(--comp-surface-radius)}:host([radius="4"]){--comp-surface-radius:var(--tct-surface-border-radius-4, var(--app-border-radius-4, 16px));border-radius:var(--comp-surface-radius)}:host([radius="5"]){--comp-surface-radius:var(--tct-surface-border-radius-5, var(--app-border-radius-5, 24px));border-radius:var(--comp-surface-radius)}:host([background=default]),:host([clickable]:not([clickable=false]):not([background])){--comp-surface-bg:var(--tct-surface-default-background, var(--t-base, #ffffff));--comp-surface-hover-background:var(--tct-surface-default-hover-background, var(--t-base-primary1, #f2f2f2));--comp-surface-active-background:var(--tct-surface-default-active-background, var(--t-base-primary2, #e6e6e6))}:host([background=primary]){--comp-surface-bg:var(--tct-surface-primary-background, var(--t-primary, #6a4a9e));--comp-surface-hover-background:var(--tct-surface-primary-hover-background, var(--t-primary-d2, #533978));--comp-surface-active-background:var(--tct-surface-primary-active-background, var(--t-primary-d3, #3d2a58));color:var(--tct-surface-primary-font-color, var(--t-primary-text, #ffffff))}:host([background=secondary]){--comp-surface-bg:var(--tct-surface-secondary-background, var(--t-secondary, #b3c2cc));--comp-surface-hover-background:var(--tct-surface-secondary-hover-background, var(--t-secondary-d2, #8fa1ac));--comp-surface-active-background:var(--tct-surface-secondary-active-background, var(--t-secondary-d3, #6b7d88));color:var(--tct-surface-secondary-font-color, var(--t-secondary-text, #1a1a1a))}:host([background=tertiary]){--comp-surface-bg:var(--tct-surface-tertiary-background, var(--t-tertiary, #e8f5fc));--comp-surface-hover-background:var(--tct-surface-tertiary-hover-background, var(--t-tertiary-d2, #b8dcef));--comp-surface-active-background:var(--tct-surface-tertiary-active-background, var(--t-tertiary-d3, #88c4e2));color:var(--tct-surface-tertiary-font-color, var(--t-tertiary-text, #1a1a1a))}:host([background=gray]){--comp-surface-bg:var(--tct-surface-gray-background, var(--t-base-gray1, #f4f4f4));--comp-surface-hover-background:var(--tct-surface-gray-hover-background, var(--t-base-primary1, #f2f2f2));--comp-surface-active-background:var(--tct-surface-gray-active-background, var(--t-base-primary2, #e6e6e6))}:host([background]) .container,:host([clickable]:not([clickable=false]):not([background])) .container{background:var(--comp-surface-bg)}:host([background-gradient]) .container{background:linear-gradient(in oklch var(--comp-surface-gradient-direction), color-mix(in oklab, var(--comp-surface-bg), white 40%), var(--comp-surface-bg))}:host([border]) .container{border:1px solid var(--comp-surface-border-color)}:host([border=primary]) .container{border-color:var(--tct-surface-primary-border-color, var(--t-primary, #6a4a9e))}:host([border=secondary]) .container{border-color:var(--tct-surface-secondary-border-color, var(--t-secondary, #b3c2cc))}:host([border=tertiary]) .container{border-color:var(--tct-surface-tertiary-border-color, var(--t-tertiary, #e8f5fc))}:host([border=gray]) .container{border-color:var(--tct-surface-gray-border-color, var(--t-gray-8, #808080))}:host([border-gradient]){padding:2px}:host([border-gradient]) .container{border-radius:calc(var(--comp-surface-radius) - 2px)}:host([border-gradient])[border] .container{border:none}:host([border-gradient]:not([background])){--comp-surface-bg:var(--tct-surface-default-background, var(--t-base, #ffffff))}:host([border-gradient]:not([background])) .container{background:var(--comp-surface-bg)}:host([border-gradient]:not([border])),:host([border-gradient][border=default]){background:linear-gradient(in oklch var(--tct-surface-border-gradient-direction, var(--tct-surface-background-gradient-direction, to right bottom)), color-mix(in oklab, var(--tct-surface-default-border-color, var(--t-gray-12, #d9d9d9)), white 40%), var(--tct-surface-default-border-color, var(--t-gray-12, #d9d9d9)))}:host([border-gradient][border=primary]){background:linear-gradient(in oklch var(--tct-surface-border-gradient-direction, var(--tct-surface-background-gradient-direction, to right bottom)), color-mix(in oklab, var(--tct-surface-primary-border-color, var(--t-primary, #6a4a9e)), white 40%), var(--tct-surface-primary-border-color, var(--t-primary, #6a4a9e)))}:host([border-gradient][border=secondary]){background:linear-gradient(in oklch var(--tct-surface-border-gradient-direction, var(--tct-surface-background-gradient-direction, to right bottom)), color-mix(in oklab, var(--tct-surface-secondary-border-color, var(--t-secondary, #b3c2cc)), white 40%), var(--tct-surface-secondary-border-color, var(--t-secondary, #b3c2cc)))}:host([border-gradient][border=tertiary]){background:linear-gradient(in oklch var(--tct-surface-border-gradient-direction, var(--tct-surface-background-gradient-direction, to right bottom)), color-mix(in oklab, var(--tct-surface-tertiary-border-color, var(--t-tertiary, #e8f5fc)), white 40%), var(--tct-surface-tertiary-border-color, var(--t-tertiary, #e8f5fc)))}:host([border-gradient][border=gray]){background:linear-gradient(in oklch var(--tct-surface-border-gradient-direction, var(--tct-surface-background-gradient-direction, to right bottom)), color-mix(in oklab, var(--tct-surface-gray-border-color, var(--t-gray-8, #808080)), white 40%), var(--tct-surface-gray-border-color, var(--t-gray-8, #808080)))}:host([inset=compact]) .container{padding:var(--tct-surface-inset-compact, var(--app-scale-1x, 5px))}:host([inset=normal]) .container{padding:var(--tct-surface-inset-normal, var(--app-scale-3x, 15px))}:host([inset=comfortable]) .container{padding:var(--tct-surface-inset-comfortable, var(--app-scale-5x, 25px))}:host([inset-x=none]) .container{padding-inline:0}:host([inset-x=compact]) .container{padding-inline:var(--tct-surface-inset-compact, var(--app-scale-1x, 5px))}:host([inset-x=normal]) .container{padding-inline:var(--tct-surface-inset-normal, var(--app-scale-3x, 15px))}:host([inset-x=comfortable]) .container{padding-inline:var(--tct-surface-inset-comfortable, var(--app-scale-5x, 25px))}:host([inset-y=none]) .container{padding-block:0}:host([inset-y=compact]) .container{padding-block:var(--tct-surface-inset-compact, var(--app-scale-1x, 5px))}:host([inset-y=normal]) .container{padding-block:var(--tct-surface-inset-normal, var(--app-scale-3x, 15px))}:host([inset-y=comfortable]) .container{padding-block:var(--tct-surface-inset-comfortable, var(--app-scale-5x, 25px))}:host([clickable]:not([clickable=false])){cursor:pointer}:host([clickable]:not([clickable=false])) .container:hover{background:var(--comp-surface-hover-background)}:host([clickable]:not([clickable=false])) .container:active{background:var(--comp-surface-active-background, var(--comp-surface-hover-background))}:host([clickable]:not([clickable=false]))[elevation="0"]:hover .container,:host([clickable]:not([clickable=false])):not([elevation]):hover .container{box-shadow:var(--tct-surface-elevation-hover-0-box-shadow, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))}:host([clickable]:not([clickable=false]))[elevation="1"]:hover .container{box-shadow:var(--tct-surface-elevation-hover-1-box-shadow, var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14)))}:host([clickable]:not([clickable=false]))[elevation="2"]:hover .container{box-shadow:var(--tct-surface-elevation-hover-2-box-shadow, var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14)))}:host([clickable]:not([clickable=false]))[elevation="3"]:hover .container{box-shadow:var(--tct-surface-elevation-hover-3-box-shadow, var(--app-shadow-4, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 14px 28px rgba(0, 0, 0, 0.14)))}:host([clickable]:not([clickable=false]))[elevation="4"]:hover .container{box-shadow:var(--tct-surface-elevation-hover-4-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)))}:host([clickable]:not([clickable=false]))[elevation="5"]:hover .container{box-shadow:var(--tct-surface-elevation-hover-5-box-shadow, var(--app-shadow-5, 0px 0px 8px rgba(0, 0, 0, 0.12), 0px 32px 64px rgba(0, 0, 0, 0.14)))}:host([clickable]:not([clickable=false])) .container:focus-visible{outline:none;box-shadow:var(--tct-surface-focus-visible-box-shadow, var(--const-double-focus-ring, 0 0 0 2px var(--t-base), 0 0 0 4px var(--const-focus-color), 0 0 0 6px var(--t-base)))}@keyframes q2-surface-bounce{from,20%,53%,to{animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0)}40%,43%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -30px, 0) scaleY(1.1)}70%{animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);transform:translate3d(0, -15px, 0) scaleY(1.05)}80%{transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);transform:translate3d(0, 0, 0) scaleY(0.95)}90%{transform:translate3d(0, -4px, 0) scaleY(1.02)}}@keyframes q2-surface-flash{from,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes q2-surface-pulse{from{transform:scale3d(1, 1, 1)}50%{transform:scale3d(1.05, 1.05, 1.05)}to{transform:scale3d(1, 1, 1)}}@keyframes q2-surface-tada{from{transform:scale3d(1, 1, 1)}10%,20%{transform:scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -1deg)}30%,50%,70%,90%{transform:scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, 1deg)}40%,60%,80%{transform:scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -1deg)}to{transform:scale3d(1, 1, 1)}}:host(.q2-surface-animate-bounce){animation:q2-surface-bounce var(--comp-surface-animation-duration) both;transform-origin:center bottom}:host(.q2-surface-animate-flash){animation:q2-surface-flash var(--comp-surface-animation-duration) both}:host(.q2-surface-animate-pulse){animation:q2-surface-pulse var(--comp-surface-animation-duration) both}:host(.q2-surface-animate-tada){animation:q2-surface-tada var(--comp-surface-animation-duration) both}::slotted(:is(h1,h2,h3,h4):first-child){margin-top:0 !important}::slotted(:is(q2-action-group):last-child){margin-bottom:0 !important}';
   }
 }, [ 257, "q2-surface", {
   background: [ 513 ],
@@ -96,14 +96,14 @@ const s =  r(class extends a {
   insetX: [ 513, "inset-x" ],
   insetY: [ 513, "inset-y" ],
   radius: [ 514 ],
-  animate: [ 64 ]
+  triggerAnimation: [ 64 ]
 }, [ [ 0, "click", "onClick" ], [ 0, "keydown", "onKeydown" ] ] ]);
 
-const n = s, defineCustomElement = function() {
+const s = n, defineCustomElement = function() {
   if ("undefined" == typeof customElements) return;
   [ "q2-surface" ].forEach((r => {
-    if ("q2-surface" === r) customElements.get(c(r)) || customElements.define(c(r), s);
+    if ("q2-surface" === r) customElements.get(c(r)) || customElements.define(c(r), n);
   }));
 };
 
-export { n as Q2Surface, defineCustomElement }
+export { s as Q2Surface, defineCustomElement }

package/dist/components/q2-tab-container.js

@@ -4,7 +4,7 @@ import { c as n, l as s, o as c, i as l } from "./index2.js";
 
 import { m as b } from "./mirror-emit.js";
 
-import { h as d, f as h } from "./component.js";
+import { h, f as d } from "./component.js";
 
 import { d as v } from "./q2-badge2.js";
 
@@ -14,7 +14,7 @@ import { d as g } from "./q2-icon2.js";
 
 import { d as u } from "./q2-loading2.js";
 
-const f =  t(class extends a {
+const m =  t(class extends a {
   constructor(t) {
     super(), !1 !== t && this.__registerHost(), this.__attachShadow(), this.change = e(this, "change", 7), 
     this.settled = e(this, "settled", 7), this.tctChange = e(this, "tctChange", 7), 
@@ -23,13 +23,27 @@ const f =  t(class extends a {
     this.scheduledAfterRender = [], 
     // #endregion
     // #region State Properties
-    this.hasLeft = !1, this.hasRight = !1, this.scrollEnabled = !1, this.showScrollLeft = !1, 
-    this.showScrollRight = !1, 
+    this.hasLeft = !1, this.hasRight = !1, this.isNarrowViewport = !1, this.scrollEnabled = !1, 
+    this.showScrollBack = !1, this.showScrollForward = !1, 
     /** Controls visibility of tab list in a print view. Tab content will still be visible even if `noPrint` is true. */
-    this.noPrint = !1, this.checkScrollState = () => {
-      if (!this.listElement) return;
-      const {scrollLeft: t, scrollWidth: a, clientWidth: e} = this.listElement;
-      this.scrollEnabled = a > e, this.showScrollLeft = t > 0, this.showScrollRight = a > Math.ceil(t) + e;
+    this.noPrint = !1, 
+    /**
+         * The orientation of the tab strip.
+         * - `horizontal` (default) — tabs run left-to-right above the panel content.
+         * - `vertical` — tabs stack top-to-bottom beside the panel content.
+         *
+         * @info
+         * Vertical orientation is intended for wider layouts (e.g. admin consoles).
+         * At viewports narrower than 768px, the component falls back to horizontal.
+         */
+    this.orientation = "horizontal", this.checkScrollState = () => {
+      if (this.listElement) if ("vertical" === this.computedOrientation) {
+        const {scrollTop: t, scrollHeight: a, clientHeight: e} = this.listElement;
+        this.scrollEnabled = a > e, this.showScrollBack = t > 0, this.showScrollForward = a > Math.ceil(t) + e;
+      } else {
+        const {scrollLeft: t, scrollWidth: a, clientWidth: e} = this.listElement;
+        this.scrollEnabled = a > e, this.showScrollBack = t > 0, this.showScrollForward = a > Math.ceil(t) + e;
+      }
     }, this.moveToAdjacentTab = (t, a) => {
       const e = this.tabs.map((({value: t}) => t)).indexOf(t);
       let i;
@@ -52,22 +66,39 @@ const f =  t(class extends a {
       e !== i && this.moveToTab(i, !0);
     }, this.moveToTab = (t, a = !0) => {
       const e = this.tabs[t].value, i = this.listElement.querySelector(`[data-value="${e}"]`);
-      a && i.focus({
+      if (a && i.focus({
         preventScroll: !0
-      });
-      const r = i.offsetLeft - this.listElement.clientWidth / 2;
-      this.listElement.scrollTo({
-        left: r,
-        behavior: "smooth"
-      });
+      }), "vertical" === this.computedOrientation) {
+        const t = i.offsetTop - this.listElement.clientHeight / 2;
+        this.listElement.scrollTo({
+          top: t,
+          behavior: "smooth"
+        });
+      } else {
+        const t = i.offsetLeft - this.listElement.clientWidth / 2;
+        this.listElement.scrollTo({
+          left: t,
+          behavior: "smooth"
+        });
+      }
     }, this.onScrollBtnClick = t => {
-      const {scrollLeft: a, scrollWidth: e, clientWidth: i} = this.listElement, r = Math.floor(i / 2);
-      let o = 0;
-      o = "left" === t ? -Math.min(r, Math.abs(a)) : Math.min(r, Math.abs(e - a - i)), 
-      this.listElement.scrollBy({
-        left: o,
-        behavior: "smooth"
-      });
+      if ("vertical" === this.computedOrientation) {
+        const {scrollTop: a, scrollHeight: e, clientHeight: i} = this.listElement, r = Math.floor(i / 2);
+        let o = 0;
+        o = "back" === t ? -Math.min(r, Math.abs(a)) : Math.min(r, Math.abs(e - a - i)), 
+        this.listElement.scrollBy({
+          top: o,
+          behavior: "smooth"
+        });
+      } else {
+        const {scrollLeft: a, scrollWidth: e, clientWidth: i} = this.listElement, r = Math.floor(i / 2);
+        let o = 0;
+        o = "back" === t ? -Math.min(r, Math.abs(a)) : Math.min(r, Math.abs(e - a - i)), 
+        this.listElement.scrollBy({
+          left: o,
+          behavior: "smooth"
+        });
+      }
     }, this.onSlotChange = () => {
       this.checkScrollState();
     }, this.onTabClick = t => {
@@ -78,11 +109,23 @@ const f =  t(class extends a {
     }, this.onTabKeyDown = t => {
       const a = t.target.dataset.value;
       switch (t.key) {
+       case "ArrowDown":
+        if ("vertical" !== this.computedOrientation) break;
+        t.preventDefault(), this.moveToAdjacentTab(a, "next");
+        break;
+
        case "ArrowRight":
+        if ("horizontal" !== this.computedOrientation) break;
         t.preventDefault(), this.moveToAdjacentTab(a, "next");
         break;
 
+       case "ArrowUp":
+        if ("vertical" !== this.computedOrientation) break;
+        t.preventDefault(), this.moveToAdjacentTab(a, "prev");
+        break;
+
        case "ArrowLeft":
+        if ("horizontal" !== this.computedOrientation) break;
         t.preventDefault(), this.moveToAdjacentTab(a, "prev");
         break;
 
@@ -127,21 +170,26 @@ const f =  t(class extends a {
   disconnectedCallback() {
     var t, a;
     null === (t = this.resizeObserver) || void 0 === t || t.disconnect(), this.resizeObserver = null, 
-    null === (a = this.mutationObserver) || void 0 === a || a.disconnect(), this.mutationObserver = null;
+    null === (a = this.mutationObserver) || void 0 === a || a.disconnect(), this.mutationObserver = null, 
+    this.narrowViewportMedia && this.narrowViewportListener && this.narrowViewportMedia.removeEventListener("change", this.narrowViewportListener);
   }
   componentWillLoad() {
-    d(this.hostElement, [ "q2-tab-pane", "tecton-tab-pane" ]) || h(this.hostElement, [ "q2-tab-pane", "tecton-tab-pane" ]);
+    h(this.hostElement, [ "q2-tab-pane", "tecton-tab-pane" ]) || d(this.hostElement, [ "q2-tab-pane", "tecton-tab-pane" ]);
     const t = new MutationObserver((() => this.updateTabs()));
     t.observe(this.hostElement, {
       childList: !0,
       attributes: !0
     }), this.mutationObserver = t, this.resizeObserver = new ResizeObserver((() => this.checkScrollState())), 
-    this.updateTabs();
+    "undefined" != typeof window && (this.narrowViewportMedia = window.matchMedia("(max-width: 767px)"), 
+    this.isNarrowViewport = this.narrowViewportMedia.matches), this.updateTabs();
   }
   componentDidLoad() {
     var t;
     null === (t = this.resizeObserver) || void 0 === t || t.observe(this.listElement), 
-    this.checkScrollState(), c(this.hostElement), this.scheduledAfterRender.push((() => this.determineTabMove()));
+    this.checkScrollState(), c(this.hostElement), this.scheduledAfterRender.push((() => this.determineTabMove())), 
+    this.narrowViewportMedia && (this.narrowViewportListener = t => {
+      this.isNarrowViewport = t.matches;
+    }, this.narrowViewportMedia.addEventListener("change", this.narrowViewportListener));
   }
   componentDidRender() {
     this.scheduledAfterRender.forEach((t => t())), this.scheduledAfterRender = [], this.settled.emit();
@@ -185,6 +233,9 @@ const f =  t(class extends a {
   }
   // #endregion
   // #region Local Methods
+  get computedOrientation() {
+    return this.isNarrowViewport ? "horizontal" : this.orientation;
+  }
   get selectedTabValue() {
     return this.value || "";
   }
@@ -234,50 +285,52 @@ const f =  t(class extends a {
     }));
   }
   render() {
+    const t = "vertical" === this.computedOrientation;
     return i(r, {
-      key: "cfaf872008ad8687316955a725e7475d326b5ec2"
+      key: "710b889bd81a28f6ba7c0deb43abe49a269baec4"
     }, i("div", {
-      key: "8a61a84ecd4d1869fe53829ca908e99ec80b11be",
+      key: "444efee6412d2440c99bd1e9b123fe385f2453a5",
       class: "tab-container"
     }, this.scrollEnabled && i(r, {
-      key: "a77950455f6f6f9138d1174fa4db38bcde498cb5"
+      key: "56c9916fb99dd3434a8305721d03e85c0f5fb370"
     }, i("div", {
-      key: "b195f6a34a9ed2ecbdf1bacd2d51a76f0861574e",
+      key: "c506eb6690b60194b50171ad5139cc65b4fabedd",
       class: "gradient-left",
-      hidden: !this.showScrollLeft
+      hidden: !this.showScrollBack
     }), i("div", {
-      key: "f625095c68ad1bedd07d34149d28c27f12b2954d",
+      key: "7af01eb18190e0af6fb80364fb73dcf6145d979d",
       class: "gradient-right",
-      hidden: !this.showScrollRight
+      hidden: !this.showScrollForward
     }), i("q2-btn", {
-      key: "96c26c6447708d2fcf102e53e984f9a71bc2d9b1",
+      key: "8cb5f49e48c119d32b196e3ecc7e8a018acc7aa0",
       class: "btn-left",
-      hidden: !this.showScrollLeft,
-      onTctClick: () => this.onScrollBtnClick("left")
+      hidden: !this.showScrollBack,
+      onTctClick: () => this.onScrollBtnClick("back")
     }, i("q2-icon", {
-      key: "feec85bd6bbbfeb99c520b6118c90190130d8dca",
-      type: "chevron-left",
-      label: "scroll left"
+      key: "65f3caea2251c7ce96861718df064f230ec6e02e",
+      type: t ? "chevron-up" : "chevron-left",
+      label: t ? "scroll up" : "scroll left"
     })), i("q2-btn", {
-      key: "8dc406d9e144e0d025e14d8a2e30f6010febafd6",
+      key: "07b833fe0e6b3030255374e4dd323fc99379a293",
       class: "btn-right",
-      hidden: !this.showScrollRight,
-      onTctClick: () => this.onScrollBtnClick("right")
+      hidden: !this.showScrollForward,
+      onTctClick: () => this.onScrollBtnClick("forward")
     }, i("q2-icon", {
-      key: "3a35b2d74d9f62f3934b667b2ceacf0e31ffb6f4",
-      type: "chevron-right",
-      label: "scroll right"
+      key: "e446b55822239e657ab10c50694a9756ec8b030b",
+      type: t ? "chevron-down" : "chevron-right",
+      label: t ? "scroll down" : "scroll right"
     }))), i("ul", {
-      key: "8ba591207287d3aa2d20e70ec72c03a755879ab0",
+      key: "20d4f371b80b2515b762e80b88574938783e9252",
       onScroll: this.checkScrollState,
       ref: t => this.listElement = t,
       class: this.noPrint ? "no-print" : null,
-      role: "tablist"
+      role: "tablist",
+      "aria-orientation": this.computedOrientation
     }, this.tabs.map(((t, a) => this.renderTab(t, a))))), i("div", {
-      key: "83ab595967887ca3d2a584f85519f23e101d02ff",
+      key: "9eaba5d408629dc548a9c57428b801293f642172",
       class: "tab-content"
     }, i("slot", {
-      key: "6458a9e54b310f85129497478757111501fcb06f",
+      key: "811737fa0e22c994299c9164a6401209e6ecf418",
       onSlotchange: () => this.onSlotChange()
     })));
   }
@@ -295,19 +348,21 @@ const f =  t(class extends a {
     };
   }
   static get style() {
-    return "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:block;position:relative}button{cursor:pointer;margin:0}.tab-container{position:relative}ul{--comp-container-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-1, var(--app-scale-1x, 5px)) 0;padding:var(--tct-tab-container-padding, var(--t-tab-container-padding, var(--comp-container-padding)));margin:var(--tct-tab-container-margin, var(--t-tab-container-margin, 0));display:flex;gap:var(--tct-tab-gap, var(--t-tab-gap, var(--tct-scale-1, var(--app-scale-1x, 5px))));list-style:none;border-bottom-width:var(--tct-tab-container-border-width, 1px);border-bottom-style:var(--tct-tab-container-border-style, solid);border-bottom-color:var(--tct-tab-container-border-color, var(--t-tab-container-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));overflow-x:auto;align-items:center;scrollbar-width:none;scrollbar-color:transparent}ul::-webkit-scrollbar{width:0;height:0}ul::-webkit-scrollbar-thumb{background:transparent}ul::-webkit-scrollbar-track{background:transparent}@media print{ul.no-print{display:none}}li{flex:0 0 auto}li button{background:var(--tct-tab-inactive-background, var(--tct-tab-inactive-bg-color, var(--t-tab-inactive-bg-color, transparent)));border-width:var(--tct-tab-inactive-border-width, var(--t-tab-inactive-border-width, 0 0 3px 0));border-color:var(--tct-tab-inactive-border-color, var(--t-tab-inactive-border-color, transparent));border-style:var(--tct-tab-inactive-border-style, var(--t-tab-inactive-border-style, solid));border-radius:var(--tct-tab-border-radius, var(--t-tab-border-radius, 0));width:var(--tct-tab-width, var(--t-tab-width, 100%));text-align:var(--tct-tab-text-align, var(--t-tab-text-align, center));text-decoration:var(--tct-tab-text-decoration, var(--t-tab-text-decoration, none));padding:var(--tct-tab-padding, var(--t-tab-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))));color:var(--tct-tab-inactive-color, var(--t-tab-inactive-color, inherit));font-size:var(--tct-tab-font-size, var(--t-tab-font-size, 17px));line-height:var(--tct-tab-line-height, 20px);display:block;transition:background var(--t-tween-ease-inout) var(--t-tween-time-in-xxs), color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs), border-color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs)}:host([type=section]) li button{--comp-tab-section-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px));font-size:var(--tct-tab-section-font-size, 14px);line-height:var(--tct-tab-section-line-height, 18px);padding:var(--tct-tab-section-padding, var(--t-tab-section-padding, var(--comp-tab-section-padding)))}li button:focus-visible{box-shadow:var(--tct-tab-focus-visible-box-shadow, var(--const-double-focus-ring))}li button:hover{color:var(--tct-tab-hover-color, var(--t-tab-hover-color, var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e))));background:var(--tct-tab-hover-background, var(--tct-tab-hover-bg-color, var(--t-tab-hover-bg-color, inherit)));width:var(--tct-tab-hover-width, var(--t-tab-hover-width, 100%))}li button[aria-selected=true]{color:var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e));border-color:var(--tct-tab-active-border-color, var(--t-tab-active-border-color, currentcolor));border-style:var(--tct-tab-active-border-style, var(--t-tab-active-border-style, solid));width:var(--tct-tab-active-width, var(--t-tab-active-width, 100%));background:var(--tct-tab-active-background, var(--tct-tab-active-bg-color, var(--t-tab-active-bg-color, inherit)));text-decoration:var(--tct-tab-active-text-decoration, none)}:host([color=alt]) li button{color:var(--tct-tab-alt-inactive-color, var(--t-tab-alt-inactive-color, inherit))}:host([color=alt]) li button:hover,:host([color=alt]) li button[aria-selected=true]{color:var(--tct-tab-alt-active-color, var(--t-tab-alt-active-color, inherit))}@media screen and (max-width: 767px){li button{--comp-tab-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px));font-size:inherit;padding:var(--tct-tab-padding, var(--t-tab-padding, var(--comp-tab-padding)))}}.tab-content{--comp-tab-content-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) 0;padding:var(--tct-tab-container-content-padding, var(--tct-tab-content-padding, var(--t-tab-content-padding, var(--comp-tab-content-padding))));background:var(--tct-tab-container-content-backgrond, none)}.tab-content:focus{outline:none;box-shadow:none}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:44px}.gradient-left{background-image:linear-gradient(to left, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-background:transparent;--tct-btn-icon-width:22px;--tct-icon-stroke-primary:var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));position:absolute;top:calc(50% - 22px);z-index:2}.btn-left q2-icon,.btn-right q2-icon{--tct-icon-stroke-width:3}.btn-left{left:0}.btn-right{right:0}.tab-pane-badge{display:flex;justify-content:space-between;align-items:center}.tab-pane-badge q2-badge{margin-left:5px;margin-right:5px}";
+    return '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{display:block;position:relative}button{cursor:pointer;margin:0}.tab-container{position:relative}ul{--comp-container-padding:var(--tct-scale-1, var(--app-scale-1x, 5px)) var(--tct-scale-1, var(--app-scale-1x, 5px)) 0;padding:var(--tct-tab-container-padding, var(--t-tab-container-padding, var(--comp-container-padding)));margin:var(--tct-tab-container-margin, var(--t-tab-container-margin, 0));display:flex;gap:var(--tct-tab-gap, var(--t-tab-gap, var(--tct-scale-1, var(--app-scale-1x, 5px))));list-style:none;border-bottom-width:var(--tct-tab-container-border-width, 1px);border-bottom-style:var(--tct-tab-container-border-style, solid);border-bottom-color:var(--tct-tab-container-border-color, var(--t-tab-container-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));overflow-x:auto;align-items:center;scrollbar-width:none;scrollbar-color:transparent}ul::-webkit-scrollbar{width:0;height:0}ul::-webkit-scrollbar-thumb{background:transparent}ul::-webkit-scrollbar-track{background:transparent}@media print{ul.no-print{display:none}}li{flex:0 0 auto}li button{background:var(--tct-tab-inactive-background, var(--tct-tab-inactive-bg-color, var(--t-tab-inactive-bg-color, transparent)));border-width:var(--tct-tab-inactive-border-width, var(--t-tab-inactive-border-width, 0 0 3px 0));border-color:var(--tct-tab-inactive-border-color, var(--t-tab-inactive-border-color, transparent));border-style:var(--tct-tab-inactive-border-style, var(--t-tab-inactive-border-style, solid));border-radius:var(--tct-tab-border-radius, var(--t-tab-border-radius, 0));width:var(--tct-tab-width, var(--t-tab-width, 100%));text-align:var(--tct-tab-text-align, var(--t-tab-text-align, center));text-decoration:var(--tct-tab-text-decoration, var(--t-tab-text-decoration, none));padding:var(--tct-tab-padding, var(--t-tab-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))));color:var(--tct-tab-inactive-color, var(--t-tab-inactive-color, inherit));font-size:var(--tct-tab-font-size, var(--t-tab-font-size, var(--const-px-17, 17px)));line-height:var(--tct-tab-line-height, var(--const-px-20, 20px));display:block;transition:background var(--t-tween-ease-inout) var(--t-tween-time-in-xxs), color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs), border-color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs)}:host([type=section]) li button{--comp-tab-section-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px));font-size:var(--tct-tab-section-font-size, var(--const-px-14, 14px));line-height:var(--tct-tab-section-line-height, var(--const-px-18, 18px));padding:var(--tct-tab-section-padding, var(--t-tab-section-padding, var(--comp-tab-section-padding)))}li button:focus-visible{box-shadow:var(--tct-tab-focus-visible-box-shadow, var(--const-double-focus-ring))}li button:hover{color:var(--tct-tab-hover-color, var(--t-tab-hover-color, var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e))));background:var(--tct-tab-hover-background, var(--tct-tab-hover-bg-color, var(--t-tab-hover-bg-color, inherit)));width:var(--tct-tab-hover-width, var(--t-tab-hover-width, 100%))}li button[aria-selected=true]{color:var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e));border-color:var(--tct-tab-active-border-color, var(--t-tab-active-border-color, currentcolor));border-style:var(--tct-tab-active-border-style, var(--t-tab-active-border-style, solid));width:var(--tct-tab-active-width, var(--t-tab-active-width, 100%));background:var(--tct-tab-active-background, var(--tct-tab-active-bg-color, var(--t-tab-active-bg-color, inherit)));text-decoration:var(--tct-tab-active-text-decoration, none)}:host([color=alt]) li button{color:var(--tct-tab-alt-inactive-color, var(--t-tab-alt-inactive-color, inherit))}:host([color=alt]) li button:hover,:host([color=alt]) li button[aria-selected=true]{color:var(--tct-tab-alt-active-color, var(--t-tab-alt-active-color, inherit))}@media screen and (max-width: 767px){li button{--comp-tab-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) var(--tct-scale-1, var(--app-scale-1x, 5px));font-size:inherit;padding:var(--tct-tab-padding, var(--t-tab-padding, var(--comp-tab-padding)))}}.tab-content{--comp-tab-content-padding:var(--tct-scale-2, var(--app-scale-2x, 10px)) 0;padding:var(--tct-tab-container-content-padding, var(--tct-tab-content-padding, var(--t-tab-content-padding, var(--comp-tab-content-padding))));background:var(--tct-tab-container-content-background, none)}.tab-content:focus{outline:none;box-shadow:none}.gradient-left,.gradient-right{z-index:1;position:absolute;top:0;height:100%;width:44px}.gradient-left{background-image:linear-gradient(to left, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);left:0}.gradient-right{background-image:linear-gradient(to right, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%);right:0}.btn-left,.btn-right{--tct-icon-size:18px;--tct-btn-icon-hover-background:transparent;--tct-btn-icon-width:22px;--tct-icon-stroke-primary:var(--tct-stepper-scroll-arrow-color, var(--t-stepper-scroll-arrow-color, var(--t-text, #4d4d4d)));position:absolute;top:calc(50% - 22px);z-index:2}.btn-left q2-icon,.btn-right q2-icon{--tct-icon-stroke-width:3}.btn-left{left:0}.btn-right{right:0}.tab-pane-badge{display:flex;justify-content:space-between;align-items:center}.tab-pane-badge q2-badge{margin-left:5px;margin-right:5px}@media screen and (min-width: 768px){:host([orientation=vertical]){display:flex;flex-direction:row;align-items:stretch}:host([orientation=vertical]) .tab-container{width:var(--tct-tab-container-width, 200px);flex-shrink:0}:host([orientation=vertical]) .tab-content{--comp-vertical-tab-content-padding:0 var(--tct-scale-2, var(--app-scale-2x, 10px));flex:1 1 auto;min-width:0;padding:var(--tct-vertical-tab-container-content-padding, var(--tct-vertical-tab-content-padding, var(--t-vertical-tab-content-padding, var(--comp-vertical-tab-content-padding))))}:host([orientation=vertical]) ul{padding:var(--tct-vertical-tab-container-padding, 0);flex-direction:column;align-items:stretch;overflow-y:auto;overflow-x:visible;border-bottom-width:0;border-right-width:var(--tct-tab-container-border-width, 1px);border-right-style:var(--tct-tab-container-border-style, solid);border-right-color:var(--tct-tab-container-border-color, var(--t-tab-container-border-color, var(--tct-gray-11, var(--t-gray-11, var(--tct-gray-l1, var(--app-gray-l1, #cccccc))))));height:100%}:host([orientation=vertical]) li{border-left-width:var(--tct-tab-active-indicator-width, 3px);border-left-style:solid;border-left-color:transparent;transition:border-color var(--t-tween-ease-inout) var(--t-tween-time-in-xxs)}:host([orientation=vertical]) li:has(button[aria-selected=true]){color:var(--tct-tab-active-color, var(--t-tab-active-color, #2e2e2e));border-left-color:var(--tct-tab-active-border-color, var(--t-tab-active-border-color, currentcolor))}:host([orientation=vertical]) li button{border-width:0;text-align:start;border-radius:var(--tct-vertical-tab-border-radius, 0)}:host([orientation=vertical]) .tab-pane-badge{justify-content:flex-start;gap:var(--tct-tab-badge-gap, var(--tct-scale-1, var(--app-scale-1x, 5px)))}:host([orientation=vertical]) .gradient-left{right:0;width:100%;height:44px;background-image:linear-gradient(to top, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%)}:host([orientation=vertical]) .gradient-right{bottom:0;top:auto;left:0;width:100%;height:44px;background-image:linear-gradient(to bottom, var(--t-base-a0), var(--t-base-a2) 10%, var(--t-base) 100%)}:host([orientation=vertical]) .btn-left{top:0;left:50%;transform:translateX(-50%)}:host([orientation=vertical]) .btn-right{bottom:0;top:auto;left:50%;right:auto;transform:translateX(-50%)}:host([orientation=vertical][color=alt]) li:has(button[aria-selected=true]){color:var(--tct-tab-alt-active-color, var(--t-tab-alt-active-color, inherit))}}';
   }
 }, [ 257, "q2-tab-container", {
   color: [ 513 ],
   name: [ 513 ],
   noPrint: [ 516, "no-print" ],
+  orientation: [ 513 ],
   type: [ 513 ],
   value: [ 1537 ],
   hasLeft: [ 32 ],
   hasRight: [ 32 ],
+  isNarrowViewport: [ 32 ],
   scrollEnabled: [ 32 ],
-  showScrollLeft: [ 32 ],
-  showScrollRight: [ 32 ],
+  showScrollBack: [ 32 ],
+  showScrollForward: [ 32 ],
   tabs: [ 32 ],
   selectTab: [ 64 ]
 }, [ [ 0, "badge", "onBadge" ], [ 0, "change", "defaultChangeHandler" ], [ 0, "focus", "onFocus" ], [ 9, "resize", "onResize" ] ], {
@@ -319,12 +374,12 @@ const f =  t(class extends a {
   } ]
 } ]);
 
-const m = f, defineCustomElement = function() {
+const f = m, defineCustomElement = function() {
   if ("undefined" == typeof customElements) return;
   [ "q2-tab-container", "q2-badge", "q2-btn", "q2-icon", "q2-loading" ].forEach((t => {
     switch (t) {
      case "q2-tab-container":
-      customElements.get(o(t)) || customElements.define(o(t), f);
+      customElements.get(o(t)) || customElements.define(o(t), m);
       break;
 
      case "q2-badge":
@@ -345,4 +400,4 @@ const m = f, defineCustomElement = function() {
   }));
 };
 
-export { m as Q2TabContainer, defineCustomElement }
+export { f as Q2TabContainer, defineCustomElement }

package/dist/components/q2-tab-pane.js

@@ -2,7 +2,7 @@ import { proxyCustomElement as e, HTMLElement as t, createEvent as n, h as i, tr
 
 import { b as o } from "./component.js";
 
-const s =  e(class extends t {
+const r =  e(class extends t {
   constructor(e) {
     super(), !1 !== e && this.__registerHost(), this.__attachShadow(), this.badge = n(this, "badge", 7);
   }
@@ -20,7 +20,7 @@ const s =  e(class extends t {
   // #region Render Methods
   render() {
     return i("div", {
-      key: "19abb08e46c23ce0be03d7d07a1bbe4c22e99786",
+      key: "1957cbeca0ca1f0b5f840701286ebeb6b69565ce",
       id: `tab-pane-${this.guid}-${this.index}`,
       class: "tab-pane" + (this.selected ? "" : " hidden"),
       role: "tabpanel",
@@ -28,7 +28,7 @@ const s =  e(class extends t {
       "aria-hidden": "" + !this.selected,
       "aria-labelledby": `tab-${this.guid}-${this.index}`
     }, i("slot", {
-      key: "42a7a3ac8fe64661ba2027c0c967fcfe3b4d20e7"
+      key: "6772ac75d219ebc30209907468a9fb801cd5db0d"
     }));
   }
   get hostElement() {
@@ -51,7 +51,7 @@ const s =  e(class extends t {
     };
   }
   static get style() {
-    return "*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}.tab-pane[aria-hidden=true]{display:none}.tab-pane:focus{outline:none;box-shadow:none}";
+    return '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}.tab-pane[aria-hidden=true]{display:none}.tab-pane:focus{outline:none;box-shadow:none}';
   }
 }, [ 257, "q2-tab-pane", {
   badgeCount: [ 514, "badge-count" ],
@@ -79,11 +79,11 @@ const s =  e(class extends t {
   } ]
 } ]);
 
-const r = s, defineCustomElement = function() {
+const s = r, defineCustomElement = function() {
   if ("undefined" == typeof customElements) return;
   [ "q2-tab-pane" ].forEach((e => {
-    if ("q2-tab-pane" === e) customElements.get(a(e)) || customElements.define(a(e), s);
+    if ("q2-tab-pane" === e) customElements.get(a(e)) || customElements.define(a(e), r);
   }));
 };
 
-export { r as Q2TabPane, defineCustomElement }
+export { s as Q2TabPane, defineCustomElement }