q2-tecton-elements 1.69.1 → 1.70.0

package/dist/collection/components/q2-stepper-vertical/q2-stepper-vertical.js

@@ -1,6 +1,7 @@
 import { h, Fragment, } from "@stencil/core";
 import { loc, overrideFocus, isEventFromElement, createGuid } from "../../utils/index";
 import mirrorEmit from "../../utils/mirror-emit";
+import sanitizeHTMLString from "../../utils/sanitize-html-string";
 /**
  * @name Vertical Stepper
  * @category Display
@@ -38,6 +39,18 @@ export class Q2StepperVertical {
                 this.buildPaneList();
             });
         };
+        this.extractDetails = (pane) => {
+            const { status, disabled } = pane;
+            if (!pane.id)
+                pane.id = `step-${createGuid()}`;
+            return {
+                id: pane.id,
+                label: this.getPaneSlotOrProperty(pane, 'label'),
+                description: this.getPaneSlotOrProperty(pane, 'description'),
+                status,
+                disabled,
+            };
+        };
         this.onStepClick = (event, stepId) => {
             event.stopPropagation();
             const { currentStepId } = this;
@@ -155,18 +168,6 @@ export class Q2StepperVertical {
     get allRootPanes() {
         return Array.from(this.hostElement.querySelectorAll(':scope > q2-stepper-pane'));
     }
-    extractDetails(pane) {
-        const { label, description, status, disabled } = pane;
-        if (!pane.id)
-            pane.id = `step-${createGuid()}`;
-        return {
-            id: pane.id,
-            label,
-            description,
-            status,
-            disabled,
-        };
-    }
     focusStepBtn(stepId, forceFocus) {
         const stepBtn = this.hostElement.shadowRoot.querySelector(`button[id="${stepId}"]`);
         const isComponentActive = document.activeElement === this.hostElement;
@@ -176,6 +177,11 @@ export class Q2StepperVertical {
             stepBtn.focus();
         }
     }
+    getPaneSlotOrProperty(pane, slotName) {
+        var _a;
+        const slot = Array.from(pane.children).find(child => child.getAttribute('slot') === slotName);
+        return (_a = slot === null || slot === void 0 ? void 0 : slot.outerHTML) !== null && _a !== void 0 ? _a : (pane[slotName] ? loc(pane[slotName]) : undefined);
+    }
     getStepId(currentStepId, goTo) {
         const allEnabledStepBtns = Array.from(this.hostElement.shadowRoot.querySelectorAll('ul:not([aria-hidden="true"]) > li > button:not([aria-disabled="true"])'));
         const currentStepIndex = allEnabledStepBtns.findIndex(btn => btn.getAttribute('id') === currentStepId);
@@ -261,7 +267,7 @@ export class Q2StepperVertical {
             stepClasses.push(`status-${status}`);
         if (isPaneDisabled)
             stepClasses.push('pane-disabled');
-        return (h("li", { role: "presentation" }, h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelId, "aria-label": btnLabel, "aria-selected": `${isCurrentStep}`, id: id, "aria-disabled": isLocked ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => !isLocked && this.onStepKeyDown(ev, id), onClick: ev => !isPaneDisabled && !isLocked && this.onStepClick(ev, id) }, statusIcon && (h("div", { class: "step-child-icon" }, h("q2-icon", { type: statusIcon }))), label && (h("div", { class: "step-child-label", id: labelId }, loc(label))))));
+        return (h("li", { role: "presentation" }, h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelId, "aria-label": btnLabel, "aria-selected": `${isCurrentStep}`, id: id, "aria-disabled": isLocked ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => !isLocked && this.onStepKeyDown(ev, id), onClick: ev => !isPaneDisabled && !isLocked && this.onStepClick(ev, id) }, statusIcon && (h("div", { class: "step-child-icon" }, h("q2-icon", { type: statusIcon }))), label && (h("div", { class: "step-child-label", id: labelId, innerHTML: sanitizeHTMLString(label) })))));
     }
     renderSpacer(pane, stepLabel, isExpanded, isLastStep) {
         const shouldRender = (isLastStep && !!pane.children.length) || !isLastStep;
@@ -278,7 +284,7 @@ export class Q2StepperVertical {
         const isCurrentStep = id === currentStepId;
         const labelId = label && `label-${id}`;
         const isLocked = status === 'locked';
-        const stepLabel = label && loc(label);
+        const stepLabel = label;
         const descriptionId = label && description && `description-${id}`;
         const btnLabel = !label && loc('tecton.element.advancedStepper.number', [`${stepNumber}`, `${structuredPanes.length}`]);
         let statusIcon;
@@ -293,10 +299,10 @@ export class Q2StepperVertical {
             stepClasses.push('pane-disabled');
         const childIds = pane.children.map(child => child.id);
         const isExpanded = isCurrentStep || childIds.includes(currentStepId);
-        return (h("li", { role: "presentation" }, h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelId, "aria-describedBy": descriptionId, "aria-label": btnLabel, "aria-selected": `${isCurrentStep}`, "aria-expanded": !!pane.children.length ? `${isExpanded}` : null, id: id, "aria-disabled": isLocked ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => !isLocked && this.onStepKeyDown(ev, id), onClick: ev => !isPaneDisabled && !isLocked && this.onStepClick(ev, id) }, statusIcon ? (h("div", { class: "step-icon" }, h("q2-icon", { type: statusIcon }))) : (h("div", { class: "step-bubble" }, stepNumber)), label && (h("div", null, h("div", { class: "step-label", id: labelId }, stepLabel), description && (h("div", { class: "step-description", id: descriptionId }, loc(description)))))), this.renderSpacer(pane, stepLabel, isExpanded, isLastStep)));
+        return (h("li", { role: "presentation" }, h("button", { class: stepClasses.join(' '), type: "button", "aria-labelledby": labelId, "aria-describedBy": descriptionId, "aria-label": btnLabel, "aria-selected": `${isCurrentStep}`, "aria-expanded": !!pane.children.length ? `${isExpanded}` : null, id: id, "aria-disabled": isLocked ? 'true' : null, role: "tab", tabIndex: isCurrentStep ? 0 : -1, onKeyDown: ev => !isLocked && this.onStepKeyDown(ev, id), onClick: ev => !isPaneDisabled && !isLocked && this.onStepClick(ev, id) }, statusIcon ? (h("div", { class: "step-icon" }, h("q2-icon", { type: statusIcon }))) : (h("div", { class: "step-bubble" }, stepNumber)), label && (h("div", null, h("div", { class: "step-label", id: labelId, innerHTML: sanitizeHTMLString(stepLabel) }), description && (h("div", { class: "step-description", id: descriptionId, innerHTML: sanitizeHTMLString(description) }))))), this.renderSpacer(pane, stepLabel, isExpanded, isLastStep)));
     }
     render() {
-        return (h(Fragment, { key: 'f0e7532121d04664984f5a8c20c1dbd777e8df32' }, h("ul", { key: '3b30070fb196c16f3194199903799d4c1ee7e042', role: "tablist" }, this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))), h("div", { key: '453722ec203014925b5bf3a879e72947e114b5fb', role: "list" }, h("slot", { key: '6f1ae5614bcddacf4ecb6819370ac8c417e99228' }))));
+        return (h(Fragment, { key: '2771f649f3e5e8a37657d43678d83c67204ec466' }, h("ul", { key: 'f0909b76f95f6c3684a2cffa069d530be3d951ce', role: "tablist" }, this.structuredPanes.map((pane, index) => this.renderStepBtn(pane, index))), h("div", { key: '747eedecf0c9774439eb6ccf60528a521eb78685', role: "list" }, h("slot", { key: 'db02fc51b4811f510761365667516ce985c212d8' }))));
     }
     static get is() { return "q2-stepper-vertical"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-surface/q2-surface.css

@@ -0,0 +1,348 @@
+/**
+ * @prop --tct-surface-background-default: (<color>) Background color when background="default". Defaults to --t-base.
+ * @prop --tct-surface-background-primary: (<color>) Background color when background="primary". Defaults to --t-primary.
+ * @prop --tct-surface-background-secondary: (<color>) Background color when background="secondary". Defaults to --t-secondary.
+ * @prop --tct-surface-background-tertiary: (<color>) Background color when background="tertiary". Defaults to --t-tertiary.
+ * @prop --tct-surface-hover-background: (<color>) Hover background when clickable and no background is set. Defaults to --t-base-hover.
+ * @prop --tct-surface-primary-hover-background: (<color>) Hover background when clickable and background="primary". Defaults to --t-primary-l2.
+ * @prop --tct-surface-secondary-hover-background: (<color>) Hover background when clickable and background="secondary". Defaults to --t-secondary-l2.
+ * @prop --tct-surface-tertiary-hover-background: (<color>) Hover background when clickable and background="tertiary". Defaults to --t-tertiary-l2.
+ * @prop --tct-surface-primary-font-color: (<color>) Text color when background="primary". Defaults to --t-primary-text.
+ * @prop --tct-surface-secondary-font-color: (<color>) Text color when background="secondary". Defaults to --t-secondary-text.
+ * @prop --tct-surface-tertiary-font-color: (<color>) Text color when background="tertiary". Defaults to --t-tertiary-text.
+ * @prop --tct-surface-border-color: (<color>) Border color when border="default". Defaults to --t-gray-12.
+ * @prop --tct-surface-primary-border-color: (<color>) Border color when border="primary". Defaults to --t-primary.
+ * @prop --tct-surface-secondary-border-color: (<color>) Border color when border="secondary" . Defaults to --t-secondary.
+ * @prop --tct-surface-tertiary-border-color: (<color>) Border color when border="tertiary". Defaults to --t-tertiary.
+ * @prop --tct-surface-border-radius-1: (<length>) Corner radius at radius=1. Defaults to --app-border-radius-1 (4px).
+ * @prop --tct-surface-border-radius-2: (<length>) Corner radius at radius=2. Defaults to --app-border-radius-2 (8px).
+ * @prop --tct-surface-border-radius-3: (<length>) Corner radius at radius=3. Defaults to --app-border-radius-3 (12px).
+ * @prop --tct-surface-border-radius-4: (<length>) Corner radius at radius=4. Defaults to --app-border-radius-4 (16px).
+ * @prop --tct-surface-border-radius-5: (<length>) Corner radius at radius=5. Defaults to --app-border-radius-5 (24px).
+ * @prop --tct-surface-elevation-1-box-shadow: (*) Box shadow at elevation=1.
+ * @prop --tct-surface-elevation-2-box-shadow: (*) Box shadow at elevation=2.
+ * @prop --tct-surface-elevation-3-box-shadow: (*) Box shadow at elevation=3.
+ * @prop --tct-surface-elevation-4-box-shadow: (*) Box shadow at elevation=4.
+ * @prop --tct-surface-elevation-5-box-shadow: (*) Box shadow at elevation=5.
+ * @prop --tct-surface-elevation-hover-0-box-shadow: (*) Hover box shadow when clickable and elevation=0 or unset.
+ * @prop --tct-surface-elevation-hover-1-box-shadow: (*) Hover box shadow when clickable and elevation=1.
+ * @prop --tct-surface-elevation-hover-2-box-shadow: (*) Hover box shadow when clickable and elevation=2.
+ * @prop --tct-surface-elevation-hover-3-box-shadow: (*) Hover box shadow when clickable and elevation=3.
+ * @prop --tct-surface-elevation-hover-4-box-shadow: (*) Hover box shadow when clickable and elevation=4.
+ * @prop --tct-surface-elevation-hover-5-box-shadow: (*) Hover box shadow when clickable and elevation=5.
+ * @prop --tct-surface-inset-compact: (<length>) Padding when inset="compact". Defaults to --app-scale-1x (5px).
+ * @prop --tct-surface-inset-normal: (<length>) Padding when inset="normal". Defaults to --app-scale-3x (15px).
+ * @prop --tct-surface-inset-comfortable: (<length>) Padding when inset="comfortable". Defaults to --app-scale-5x (25px).
+ * @prop --tct-surface-background-gradient-direction: (<angle> | <side-or-corner>) Gradient direction for background-gradient. Defaults to "to right bottom".
+ * @prop --tct-surface-border-gradient-direction: (<angle> | <side-or-corner>) Gradient direction for border-gradient, overrides --tct-surface-background-gradient-direction. Defaults to "to right bottom".
+ * @prop --tct-surface-focus-visible-box-shadow: (*) Focus ring box-shadow when clickable.
+ * @prop --tct-surface-tween: (<time> <easing>) Transition timing for all animated properties.
+ * @prop --tct-surface-animation-duration: (<time>) Duration of animate() animations. Defaults to 1s.
+ */
+: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;
+}