q2-tecton-elements 1.71.4 → 1.73.0

package/dist/collection/components/q2-context/q2-context.js

@@ -58,9 +58,9 @@ export class Q2Context {
                     el.setAttribute('size', 'small');
                     console.warn('Q2-CONTEXT: action-group slot buttons must be size="small".');
                 }
-                if (!['neutral', 'workflow-escape'].includes(el.getAttribute('intent'))) {
+                if (!['neutral', 'escape', 'workflow-escape'].includes(el.getAttribute('intent'))) {
                     el.setAttribute('intent', 'neutral');
-                    console.warn('Q2-CONTEXT: action-group slot buttons must have intent="neutral" or intent="workflow-escape".');
+                    console.warn('Q2-CONTEXT: action-group slot buttons must have intent="neutral" or intent="escape".');
                 }
             }
         });
@@ -77,6 +77,7 @@ export class Q2Context {
                 return;
             }
             if (el.tagName === 'Q2-BTN') {
+                el.toggleAttribute('data-context-close-affordance', !!el.querySelector('q2-icon[type="close"]'));
                 if (!el.getAttribute('label'))
                     el.setAttribute('label', 'Dismiss');
                 if (!el.getAttribute('hide-label'))
@@ -129,7 +130,7 @@ export class Q2Context {
     // #endregion
     // #region Render Methods
     render() {
-        return (h("div", { key: 'e5721a07d072dc6fa3db22edfd50c5787946ff9a', class: "context-wrapper" }, h("q2-item", { key: 'f7591f8009e1f28d3e0fffb57dc280bd53a5cafe', class: "context-item" }, this.hasDecoratorSlotContent && (h("slot", { key: '74215ffc70d4a19a00c921869391843539f28a6a', name: "decorator", slot: "decorator" })), h("div", { key: 'c1f51789a6cdbe7a12a055da39e2a3747639aff3', class: "context-body", slot: "body" }, h("slot", { key: 'a3d4fc206925aa9f23bba1d785b2df9b74cef2a5', name: "header" }), h("slot", { key: '5e4bd0a3f595c52b1a8d60ff2a06b4333919719f', name: "description" })), this.hasAffordanceSlotContent && (h("slot", { key: '26891e4fd22716ff431df7c98814d3086fa7a48e', name: "affordance", slot: "action" }))), this.separator && (h("div", { key: '6f5102f66edfa4bdc043e4907d09e22d70218b7d', class: "separator", role: "separator" })), this.hasActionGroupSlotContent && (h("q2-action-group", { key: 'a01f3f19278f94ec67fa21a34a5f8d26823a1000', class: "action-group", orientation: "horizontal" }, h("slot", { key: '86051221e06ac1c4b68bf31228f68724e67474e0', name: "action-group" }))), this.hasFooterSlotContent && h("slot", { key: 'f12d517e123e1cc7ef3c85fb53e5d227a82f3132', name: "footer" })));
+        return (h("div", { key: '1ae74fbeea2008a88fc6da47ad45d812d38bfc13', class: "context-wrapper" }, h("q2-item", { key: '4cd13e58084df08ab7c2fc3f89b21bc468314b9c', class: "context-item" }, this.hasDecoratorSlotContent && (h("slot", { key: '0b81a0530f4c323f5fd0111c4ff9d7efec7eb65e', name: "decorator", slot: "decorator" })), h("div", { key: '1965e17a0e289032d1da7201f98e97b709c1b58b', class: "context-body", slot: "body" }, h("slot", { key: 'e52b10d0d494833b28f921d473a8272683973f2b', name: "header" }), h("slot", { key: 'a3e7fd3a2e1bccaa8b722759e2160c4eb7bd4569', name: "description" })), this.hasAffordanceSlotContent && (h("slot", { key: '49c2a3d91b1b74b51ed0f88b66bbad2fd9b7e140', name: "affordance", slot: "action" }))), this.separator && (h("div", { key: 'f3d2839c6cecd264df23f5755ea1fff3340c02f5', class: "separator", role: "separator" })), this.hasActionGroupSlotContent && (h("q2-action-group", { key: '31a30ac415fcbceaffb1afd535a28189f4e41c1d', class: "action-group", orientation: "horizontal" }, h("slot", { key: 'a27b6b16e5d009fad4e7ae408859273e2770bba2', name: "action-group" }))), this.hasFooterSlotContent && h("slot", { key: 'ca997aa3cac59a467af85f2492a221ba06ce30a7', name: "footer" })));
     }
     static get is() { return "q2-context"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-context/test/q2-context-test.vr.js

@@ -27,6 +27,15 @@ const VARIANTS = [
             <q2-btn slot="affordance" hide-label label="Dismiss"><q2-icon type="close"></q2-icon></q2-btn>
         </q2-context>`,
     },
+    {
+        name: 'with-non-close-affordance',
+        html: `<q2-context>
+            <q2-icon slot="decorator" type="lightbulb"></q2-icon>
+            <h4 slot="header">Application Status</h4>
+            <p slot="description">A brief description of what's happening.</p>
+            <q2-btn slot="affordance" hide-label label="Edit"><q2-icon type="pencil"></q2-icon></q2-btn>
+        </q2-context>`,
+    },
     {
         name: 'with-action-group',
         html: `<q2-context>
@@ -34,7 +43,7 @@ const VARIANTS = [
             <h4 slot="header">Application Status</h4>
             <p slot="description">A brief description of what's happening.</p>
             <q2-btn slot="action-group" intent="neutral" size="small">Confirm</q2-btn>
-            <q2-btn slot="action-group" intent="workflow-escape" size="small">Go Back</q2-btn>
+            <q2-btn slot="action-group" intent="escape" size="small">Go Back</q2-btn>
         </q2-context>`,
     },
     {
@@ -54,7 +63,7 @@ const VARIANTS = [
             <p slot="description">A brief description of what's happening.</p>
             <q2-btn slot="affordance" hide-label label="Dismiss"><q2-icon type="close"></q2-icon></q2-btn>
             <q2-btn slot="action-group" intent="neutral" size="small">Confirm</q2-btn>
-            <q2-btn slot="action-group" intent="workflow-escape" size="small">Go Back</q2-btn>
+            <q2-btn slot="action-group" intent="escape" size="small">Go Back</q2-btn>
             ${FOOTER_HTML}
         </q2-context>`,
     },
@@ -66,7 +75,7 @@ const VARIANTS = [
             <p slot="description">A brief description of what's happening.</p>
             <q2-btn slot="affordance" hide-label label="Dismiss"><q2-icon type="close"></q2-icon></q2-btn>
             <q2-btn slot="action-group" intent="neutral" size="small">Confirm</q2-btn>
-            <q2-btn slot="action-group" intent="workflow-escape" size="small">Go Back</q2-btn>
+            <q2-btn slot="action-group" intent="escape" size="small">Go Back</q2-btn>
             ${FOOTER_HTML}
         </q2-context>`,
     },
@@ -82,7 +91,8 @@ const VARIANTS = [
 const restingCase = (variant, theme) => {
     test(`q2-context--${variant.name}--resting — ${theme}`, async ({ page }) => {
         await setupPage(page, variant.html, { theme });
-        await expect(page).toHaveScreenshot(`q2-context--${variant.name}--resting--${theme}.png`);
+        const maxDiffPixels = variant.name === 'separator' && theme === 'glassmorphism' ? 3 : 0;
+        await expect(page).toHaveScreenshot(`q2-context--${variant.name}--resting--${theme}.png`, { maxDiffPixels });
     });
 };
 test.describe('q2-context — variants × themes', () => {

package/dist/collection/components/q2-currency/q2-currency.js

@@ -140,7 +140,7 @@ export class Q2Currency {
     // #region Render Methods
     render() {
         const { hasPlusMinusSign, plusMinusSign, currencyIsFront, currencySymbol, shouldSuperscriptSymbol, amountCore, fraction, shouldSuperscriptFraction, readableCurrency, currencyClasses, signDisplay, isNegativeAmount, } = this;
-        return (h(Host, { key: 'a576a3f4ca36965ccefcfb9abc1c81641a362c7e', "aria-label": readableCurrency }, h("div", { key: 'c581dde68e18c2650dd9e33d4e5e565b93507427', "test-id": "q2CurrencyInner", class: currencyClasses }, signDisplay === 'accounting' && isNegativeAmount && h("span", { key: 'fefb53c6e9f5db35c10bcc55ba5760da94b0ea68' }, '('), hasPlusMinusSign && h("span", { key: '2b36de58383ae1a7eaf3f6b6de861dc6fdb0815e' }, plusMinusSign), currencyIsFront && (h("span", { key: '3acafded5362df3cf2edba4864954c8030f55c55', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol)), h("span", { key: 'c9913f6c82c5b7ab79bee6dc67b79cbe27590c1f' }, amountCore), h("span", { key: '285450be0de2b04b4a5bb9d6545c36c6707d7827', class: shouldSuperscriptFraction ? 'superscript' : '' }, fraction), !currencyIsFront && (h("span", { key: '5c47212d26728d9eb8464c0deee67aff208faf31', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol)), signDisplay === 'accounting' && isNegativeAmount && h("span", { key: '590bb81a846efb52ff7364bb9b00e8a3526d3fc5' }, ')'))));
+        return (h(Host, { key: 'dc225537aa8381682126282c8dea3bf7bc2be7a6', "aria-label": readableCurrency }, h("div", { key: '31ca488c6a335c42b31c951d6ceb3439dc27ce86', "test-id": "q2CurrencyInner", class: currencyClasses }, signDisplay === 'accounting' && isNegativeAmount && h("span", { key: '90a699153c62af8aae0711bd499c05c1f61fb6ee' }, '('), hasPlusMinusSign && h("span", { key: '1dfb9e14cadced2f39554c686a118a875e217774' }, plusMinusSign), currencyIsFront && (h("span", { key: '8a96680d29c2c6bc22b5288f47a796ad9e249ea2', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol)), h("span", { key: '227f6cd00c1c78aecc6f81d1d8b14979c2cfe6f4' }, amountCore), h("span", { key: 'ab392edfa8d9937509999e8e2b9505a067187c3e', class: shouldSuperscriptFraction ? 'superscript' : '' }, fraction), !currencyIsFront && (h("span", { key: 'da99205474d1b0a56b99e5ec7e22f5e9de83eb7b', class: shouldSuperscriptSymbol ? 'superscript' : '' }, currencySymbol)), signDisplay === 'accounting' && isNegativeAmount && h("span", { key: '106370ac78e71e829b94b85989bbcab42c356eef' }, ')'))));
     }
     static get is() { return "q2-currency"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/q2-data-table/q2-data-table.css

@@ -111,6 +111,7 @@ button {
  * @prop --tct-data-table-header-font-size: (<length-percentage>) Controls the font size of data table header cells.
  * @prop --tct-data-table-header-font-weight: (<number>) Controls the font weight of data table header cells.
  * @prop --tct-data-table-header-sortable-icon-size: (<length>) Controls the size of the sort-indicator icon in sortable headers.
+ * @prop --tct-data-table-action-icon-size: (<length>) Controls the size of expandable-row and dropdown action icons.
  * @prop --tct-data-table-header-sorted-font-weight: (<number>) Controls the font weight applied to a sorted header column.
  * @prop --tct-data-table-sticky-header-background: (<color>) Controls the background color of the data table header when sticky.
  * @prop --tct-data-table-sticky-header-top?: (<length-percentage>) Controls the optional top offset of the sticky header.
@@ -209,7 +210,10 @@ thead {
 :host([sticky]:not([sticky=false])) thead {
   position: sticky;
   top: var(--tct-data-table-sticky-header-top, 0px);
+  z-index: 1;
+  border-color: transparent;
   background: var(--tct-data-table-sticky-header-background, var(--tct-table-background, var(--t-base, #ffffff)));
+  box-shadow: 0 var(--tct-data-table-sticky-header-border-bottom-width, 1px) 0 var(--tct-data-table-header-border-color, var(--tct-table-header-border-color, var(--t-gray-9, #999999)));
 }
 
 col.status-column {
@@ -425,11 +429,13 @@ td.clamped div {
   -webkit-box-orient: vertical;
 }
 td.expandable-row-control-column {
+  --tct-icon-size: var(--tct-data-table-action-icon-size, var(--const-px-18, 18px));
   --tct-btn-icon-hover-bg: transparent;
   padding: var(--tct-data-table-expandable-row-control-column-padding, var(--tct-table-expandable-row-control-column-padding, 0 5px));
   text-align: center;
 }
 td.dropdown-column {
+  --tct-icon-size: var(--tct-data-table-action-icon-size, var(--const-px-18, 18px));
   padding: var(--tct-data-table-dropdown-column-padding, var(--tct-table-dropdown-column-padding, 0 5px));
   text-align: center;
 }

package/dist/collection/components/q2-data-table/q2-data-table.js

@@ -290,7 +290,7 @@ export class Q2DataTable {
         };
         // tracks if the select-all checkbox should be visually updated as the `rows` are built
         let isAllSelected = true;
-        let isIndeterminate = false;
+        let hasSelectedRows = false;
         let hasStatusRows = false;
         const serializedRows = rows.map(({ id, cells, selected, expanded, disabled, selectAriaLabel, status }) => {
             const serializedCells = Object.entries(cells).reduce((accum, [cellKey, cellData]) => {
@@ -315,8 +315,8 @@ export class Q2DataTable {
             }, {});
             if (isAllSelected && !selected)
                 isAllSelected = false;
-            if (!isAllSelected && selected)
-                isIndeterminate = true;
+            if (!hasSelectedRows && selected)
+                hasSelectedRows = true;
             if (!hasStatusRows && status)
                 hasStatusRows = true;
             return {
@@ -335,7 +335,7 @@ export class Q2DataTable {
         this.hasRowData = !!rows.length;
         this.hasStatusRows = hasStatusRows;
         this.allRowsSelected = this.hasRowData && isAllSelected;
-        this.someRowsSelected = this.hasRowData && isIndeterminate;
+        this.someRowsSelected = this.hasRowData && hasSelectedRows && !isAllSelected;
         this.serializedRows = !!shouldAutoSort ? this.sortRows(serializedRows, sortedHeader) : serializedRows;
         this.checkSlots();
     }
@@ -419,7 +419,7 @@ export class Q2DataTable {
     // #region Render Methods
     render() {
         const { caption } = this;
-        return (h("div", { key: '9f2281aae60f873a2755db7ed67aaab73c79f499', class: "container" }, h("table", { key: '2d057320dad36ea04d1037546ef2b9a8135b0a08' }, caption && h("caption", { key: '2b4ae6daf2d2f3c75e1819166cf758b5ff5f3ab4', class: this.hideCaption ? 'sr' : undefined }, caption), this.renderTableColGroup(), this.renderTableHeader(), this.renderEmptyState(), this.renderTableRows())));
+        return (h("div", { key: '27c557740e997910e039e20af6d1e889583e798a', class: "container" }, h("table", { key: '54b876b023eab141fa8be8627e2b025590c0026d' }, caption && h("caption", { key: '6e0fdc0524ff1645b6ebd16ada5f86e5197cc475', class: this.hideCaption ? 'sr' : undefined }, caption), this.renderTableColGroup(), this.renderTableHeader(), this.renderEmptyState(), this.renderTableRows())));
     }
     renderCellContent(cell) {
         if (!cell)

package/dist/collection/components/q2-data-table/test/q2-data-table-test.vr.js

@@ -11,6 +11,13 @@ const ROWS_JSON = JSON.stringify([
     { id: 2, cells: { day: 'Tuesday', sales: 127, revenue: '$6,350' } },
     { id: 3, cells: { day: 'Wednesday', sales: 121, revenue: '$6,050' } },
 ]);
+const STICKY_ROWS_JSON = JSON.stringify([
+    { id: 1, cells: { day: 'Monday', sales: 93, revenue: '$4,650' } },
+    { id: 2, cells: { day: 'Tuesday', sales: 127, revenue: '$6,350' } },
+    { id: 3, cells: { day: 'Wednesday', sales: 121, revenue: '$6,050' } },
+    { id: 4, cells: { day: 'Thursday', sales: 140, revenue: '$7,000' } },
+    { id: 5, cells: { day: 'Friday', sales: 83, revenue: '$4,150' } },
+]);
 const buildHtml = (variant) => {
     var _a, _b;
     return `
@@ -26,6 +33,19 @@ const buildHtml = (variant) => {
     </script>
 `;
 };
+const buildStickyHtml = () => `
+    <div id="scroll-container" style="height: 180px; overflow: auto">
+        <q2-data-table id="dt" caption="Recent Sales" sticky>
+        </q2-data-table>
+    </div>
+    <script>
+        (function () {
+            var t = document.getElementById('dt');
+            t.headers = ${HEADERS_JSON};
+            t.rows = ${STICKY_ROWS_JSON};
+        })();
+    </script>
+`;
 const VARIANTS = [
     { name: 'default', attrs: '' },
     { name: 'bordered-true', attrs: 'bordered' },
@@ -38,12 +58,27 @@ const VARIANTS = [
     { name: 'clickable', attrs: 'clickable' },
     { name: 'clickable-hide-clickable', attrs: 'clickable hide-clickable' },
     { name: 'selectable-multiple-left', attrs: 'selectable select-mode="multiple"' },
+    {
+        name: 'selectable-multiple-indeterminate',
+        attrs: 'selectable select-mode="multiple"',
+        rowsJson: JSON.stringify([
+            { id: 1, cells: { day: 'Monday', sales: 93, revenue: '$4,650' }, selected: true },
+            { id: 2, cells: { day: 'Tuesday', sales: 127, revenue: '$6,350' } },
+            { id: 3, cells: { day: 'Wednesday', sales: 121, revenue: '$6,050' } },
+        ]),
+        waitForIndeterminate: true,
+    },
     { name: 'selectable-multiple-right', attrs: 'selectable select-mode="multiple" select-align="right"' },
     { name: 'selectable-single', attrs: 'selectable select-mode="single"' },
     { name: 'loading', attrs: 'loading' },
     { name: 'empty', attrs: '', emptyRows: true },
     { name: 'hide-caption', attrs: 'hide-caption' },
     { name: 'combo-stripe-border-shadow', attrs: 'striped bordered shadowed density="compact"' },
+    {
+        name: 'dropdown-action',
+        attrs: '',
+        slotContent: '<q2-dropdown slot="row-1-dropdown" type="icon" icon="options" label="More actions" hide-label><q2-option value="view">View details</q2-option></q2-dropdown>',
+    },
     {
         name: 'status-rows',
         attrs: '',
@@ -79,6 +114,12 @@ const SELECTABLE_MULTIPLE_LEFT_VARIANT = VARIANTS.find(v => v.name === 'selectab
 const restingCase = (variant, theme) => {
     test(`q2-data-table--${variant.name}--resting — ${theme}`, async ({ page }) => {
         await setupPage(page, buildHtml(variant), { theme, setupLoc: true });
+        if (variant.waitForIndeterminate) {
+            await page.locator('#dt').evaluate((table, rowsJson) => {
+                table.rows = JSON.parse(rowsJson);
+            }, variant.rowsJson);
+            await expect(page.locator('q2-data-table q2-checkbox[test-id="select-all-rows-control"]')).toHaveAttribute('indeterminate', '');
+        }
         await expect(page).toHaveScreenshot(`q2-data-table--${variant.name}--resting--${theme}.png`);
     });
 };
@@ -120,3 +161,14 @@ test.describe(`q2-data-table — scaled font size × themes`, () => {
         });
     }
 });
+test.describe('q2-data-table — sticky header × themes', () => {
+    for (const theme of THEMES) {
+        test(`q2-data-table--sticky-header--scrolled — ${theme}`, async ({ page }) => {
+            await setupPage(page, buildStickyHtml(), { theme, setupLoc: true });
+            await page.locator('#scroll-container').evaluate(element => {
+                element.scrollTop = 100;
+            });
+            await expect(page).toHaveScreenshot(`q2-data-table--sticky-header--scrolled--${theme}.png`);
+        });
+    }
+});

package/dist/collection/components/q2-date-calendar/q2-date-calendar.css

@@ -0,0 +1,393 @@
+* {
+  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;
+    }
+  }
+}
+/**
+ * @prop --tct-date-calendar-background: (<color>) Controls the calendar panel background and focused day background.
+ * @prop --tct-date-calendar-border-radius: (<length-percentage>) Controls the calendar panel corner radius.
+ * @prop --tct-date-calendar-box-shadow: (*) Controls the calendar panel shadow.
+ * @prop --tct-date-calendar-day-border-radius: (<length-percentage>) Controls day cell and focus ring corner radii.
+ * @prop --tct-date-calendar-day-disabled-font-color: (<color>) Controls disabled day text color.
+ * @prop --tct-date-calendar-day-focus-ring: (*) Controls the keyboard focus shadow around a day.
+ * @prop --tct-date-calendar-day-font-color: (<color>) Controls day text color.
+ * @prop --tct-date-calendar-day-font-size: (<length-percentage>) Controls day text size.
+ * @prop --tct-date-calendar-day-heading-font-color: (<color>) Controls weekday heading text color.
+ * @prop --tct-date-calendar-day-heading-font-size: (<length-percentage>) Controls weekday heading text size.
+ * @prop --tct-date-calendar-day-heading-font-weight: (<number>) Controls weekday heading font weight.
+ * @prop --tct-date-calendar-day-height: (<length-percentage>) Controls desktop day cell height.
+ * @prop --tct-date-calendar-day-hover-background: (<color>) Controls the background of hovered unselected days.
+ * @prop --tct-date-calendar-day-outside-font-color: (<color>) Controls text color for days outside the displayed month.
+ * @prop --tct-date-calendar-day-selected-background: (<color>) Controls selected day background.
+ * @prop --tct-date-calendar-day-selected-border-radius: (<length-percentage>) Controls selected day and range endpoint corner radii.
+ * @prop --tct-date-calendar-day-selected-font-color: (<color>) Controls selected day text color.
+ * @prop --tct-date-calendar-day-selected-font-weight: (<number>) Controls selected day font weight.
+ * @prop --tct-date-calendar-disclaimer-border-color: (<color>) Controls the divider above the disclaimer.
+ * @prop --tct-date-calendar-disclaimer-font-color: (<color>) Controls disclaimer text color.
+ * @prop --tct-date-calendar-disclaimer-font-size: (<length-percentage>) Controls disclaimer text size.
+ * @prop --tct-date-calendar-disclaimer-margin-top: (<length-percentage>) Controls space above the disclaimer divider.
+ * @prop --tct-date-calendar-disclaimer-padding-top: (<length-percentage>) Controls space between the disclaimer divider and text.
+ * @prop --tct-date-calendar-footer-action-gap: (<length-percentage>) Controls space between footer buttons.
+ * @prop --tct-date-calendar-footer-action-padding: (<length-percentage>+) Controls padding around footer buttons and their focus rings.
+ * @prop --tct-date-calendar-footer-border-color: (<color>) Controls the divider above the footer.
+ * @prop --tct-date-calendar-footer-font-color: (<color>) Controls footer summary text color.
+ * @prop --tct-date-calendar-footer-font-size: (<length-percentage>) Controls footer summary text size.
+ * @prop --tct-date-calendar-footer-font-weight: (<number>) Controls footer summary font weight.
+ * @prop --tct-date-calendar-footer-gap: (<length-percentage>) Controls space between footer summary and actions.
+ * @prop --tct-date-calendar-footer-margin-top: (<length-percentage>) Controls space above the footer divider.
+ * @prop --tct-date-calendar-footer-padding-top: (<length-percentage>) Controls space below the footer divider.
+ * @prop --tct-date-calendar-grid-gap: (<length-percentage>) Controls spacing between calendar rows and columns.
+ * @prop --tct-date-calendar-label-font-color: (<color>) Controls calendar label text color.
+ * @prop --tct-date-calendar-label-font-size: (<length-percentage>) Controls calendar label text size.
+ * @prop --tct-date-calendar-label-font-weight: (<number>) Controls calendar label font weight.
+ * @prop --tct-date-calendar-label-margin-bottom: (<length-percentage>) Controls space below the calendar label.
+ * @prop --tct-date-calendar-mobile-gutter: (<length-percentage>) Controls the inline gutter on each side of the mobile calendar.
+ * @prop --tct-date-calendar-mobile-max-width: (<length-percentage>) Controls the maximum mobile calendar width.
+ * @prop --tct-date-calendar-mobile-navigation-button-height: (<length-percentage>) Controls navigation button height on narrow screens.
+ * @prop --tct-date-calendar-month-font-color: (<color>) Controls month heading text color.
+ * @prop --tct-date-calendar-month-font-size: (<length-percentage>) Controls month heading text size.
+ * @prop --tct-date-calendar-month-font-weight: (<number>) Controls month heading font weight.
+ * @prop --tct-date-calendar-navigation-button-border-radius: (<length-percentage>) Controls navigation button and focus ring corner radii.
+ * @prop --tct-date-calendar-navigation-button-height: (<length-percentage>) Controls navigation button height.
+ * @prop --tct-date-calendar-navigation-button-width: (<length-percentage>) Controls navigation button width.
+ * @prop --tct-date-calendar-navigation-gap: (<length-percentage>) Controls space between navigation buttons.
+ * @prop --tct-date-calendar-navigation-icon-size: (<length-percentage>) Controls navigation icon size.
+ * @prop --tct-date-calendar-navigation-margin-bottom: (<length-percentage>) Controls space below navigation in a downward panel.
+ * @prop --tct-date-calendar-navigation-margin-top: (<length-percentage>) Controls space above navigation in an upward panel.
+ * @prop --tct-date-calendar-padding: (<length-percentage>+) Controls calendar panel padding outside action sheets.
+ * @prop --tct-date-calendar-range-background: (<color>) Controls selected range background.
+ * @prop --tct-date-calendar-range-disabled-background: (<color>) Controls unavailable dates within a selected range.
+ * @prop --tct-date-calendar-range-font-color: (<color>) Controls text color within a selected range.
+ * @prop --tct-date-calendar-today-color: (<color>) Controls today's text and inset outline color.
+ * @prop --tct-date-calendar-today-font-weight: (<number>) Controls today's font weight.
+ * @prop --tct-date-calendar-weekday-padding: (<length-percentage>+) Controls weekday heading padding.
+ * @prop --tct-date-calendar-width: (<length-percentage>) Controls standalone desktop calendar width.
+ */
+:host {
+  box-sizing: border-box;
+  display: block;
+}
+
+:host[hidden] {
+  display: none;
+}
+
+.cal-panel {
+  box-sizing: border-box;
+  width: var(--comp-date-calendar-width, var(--tct-date-calendar-width, 360px));
+  min-width: 0;
+  padding: var(--tct-date-calendar-padding, var(--app-scale-4x, 20px));
+  border-radius: var(--tct-date-calendar-border-radius, var(--app-border-radius-1, 4px));
+  background: var(--tct-date-calendar-background, var(--t-base, #ffffff));
+  box-shadow: var(--tct-date-calendar-box-shadow, var(--app-shadow-3));
+}
+
+.cal-panel.is-action-sheet {
+  width: 100%;
+  padding: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.calendar-label {
+  margin: 0 0 var(--tct-date-calendar-label-margin-bottom, var(--tct-scale-2, var(--app-scale-2x, 10px)));
+  color: var(--tct-date-calendar-label-font-color, var(--tct-text, var(--t-text, #4d4d4d)));
+  font-size: var(--tct-date-calendar-label-font-size, var(--tct-font-size, var(--app-font-size, var(--const-px-14, 14px))));
+  font-weight: var(--tct-date-calendar-label-font-weight, var(--tct-font-weight-semibold, 600));
+}
+
+.cal-nav {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  align-items: center;
+  margin-bottom: var(--tct-date-calendar-navigation-margin-bottom, var(--app-scale-3x, 15px));
+}
+
+.cal-nav-controls {
+  display: flex;
+  gap: var(--tct-date-calendar-navigation-gap, 2px);
+}
+
+.cal-nav-controls-left {
+  justify-self: start;
+}
+
+.cal-nav-controls-right {
+  justify-self: end;
+}
+
+.cal-panel.direction-up .cal-nav {
+  margin-top: var(--tct-date-calendar-navigation-margin-top, var(--app-scale-3x, 15px));
+  margin-bottom: 0;
+}
+
+.cal-nav-btn {
+  width: var(--tct-date-calendar-navigation-button-width, 40px);
+  height: var(--tct-date-calendar-navigation-button-height, 40px);
+  margin: 0;
+  --tct-btn-icon-width: var(--tct-date-calendar-navigation-button-width, 40px);
+  --tct-btn-icon-height: var(--tct-date-calendar-navigation-button-height, 40px);
+  --tct-btn-icon-size: var(--tct-date-calendar-navigation-icon-size, 22px);
+  --tct-btn-icon-border-radius: var(--tct-date-calendar-navigation-button-border-radius, var(--app-border-radius-1, 4px));
+}
+
+.cal-nav-btn q2-icon {
+  width: var(--tct-date-calendar-navigation-icon-size, 22px);
+  min-width: var(--tct-date-calendar-navigation-icon-size, 22px);
+  height: var(--tct-date-calendar-navigation-icon-size, 22px);
+}
+
+.cal-nav-title {
+  overflow: hidden;
+  color: var(--tct-date-calendar-month-font-color, var(--tct-text, var(--t-text, #4d4d4d)));
+  font-size: var(--tct-date-calendar-month-font-size, var(--const-px-15, 15px));
+  font-weight: var(--tct-date-calendar-month-font-weight, 700);
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cal-row {
+  display: grid;
+  grid-template-columns: repeat(7, 44px);
+  gap: var(--tct-date-calendar-grid-gap, 2px);
+  justify-content: center;
+}
+
+.cal-days {
+  display: flex;
+  flex-direction: column;
+  gap: var(--tct-date-calendar-grid-gap, 2px);
+}
+
+.cal-dow {
+  padding: var(--tct-date-calendar-weekday-padding, 6px 0 10px);
+  color: var(--tct-date-calendar-day-heading-font-color, var(--tct-gray-8, var(--t-gray-8, #747474)));
+  font-size: var(--tct-date-calendar-day-heading-font-size, var(--app-font-size-small, var(--const-px-12, 12px)));
+  font-weight: var(--tct-date-calendar-day-heading-font-weight, 600);
+  text-align: center;
+}
+
+[role=gridcell] {
+  min-width: 0;
+}
+
+.cal-day {
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  height: var(--tct-date-calendar-day-height, 44px);
+  padding: 0;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: var(--tct-date-calendar-day-border-radius, var(--app-border-radius-2, 8px));
+  background: transparent;
+  color: var(--tct-date-calendar-day-font-color, var(--t-gray-1, #0d0d0d));
+  cursor: pointer;
+  font: inherit;
+  font-size: var(--tct-date-calendar-day-font-size, var(--app-font-size, var(--const-px-14, 14px)));
+}
+.cal-day:hover:not(:disabled):not(.is-selected) {
+  background: var(--tct-date-calendar-day-hover-background, var(--t-gray-14, #f2f2f2));
+}
+.cal-day:focus-visible {
+  background: var(--tct-date-calendar-background, var(--t-base, #ffffff));
+  outline: 0;
+  box-shadow: var(--tct-date-calendar-day-focus-ring, var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc));
+}
+.cal-day.is-outside {
+  color: var(--tct-date-calendar-day-outside-font-color, var(--t-gray-8, #747474));
+}
+.cal-day:disabled {
+  color: var(--tct-date-calendar-day-disabled-font-color, var(--t-gray-11, #cccccc));
+  cursor: not-allowed;
+}
+.cal-day.is-today {
+  color: var(--tct-date-calendar-today-color, var(--t-primary, #6a4a9e));
+  font-weight: var(--tct-date-calendar-today-font-weight, 600);
+  box-shadow: inset 0 0 0 2px var(--tct-date-calendar-today-color, var(--t-primary, #6a4a9e));
+}
+.cal-day.is-selected {
+  border-radius: var(--tct-date-calendar-day-selected-border-radius, var(--app-border-radius-1, 4px));
+  background: var(--tct-date-calendar-day-selected-background, var(--t-primary, #6a4a9e));
+  color: var(--tct-date-calendar-day-selected-font-color, var(--t-primary-text, #ffffff));
+  font-weight: var(--tct-date-calendar-day-selected-font-weight, 700);
+  box-shadow: none;
+}
+.cal-day.in-range {
+  border-radius: 0;
+  background: var(--tct-date-calendar-range-background, var(--t-primary-t4, #eee8f5));
+  color: var(--tct-date-calendar-range-font-color, var(--t-primary, #6a4a9e));
+}
+.cal-day.in-range.is-disabled {
+  background: var(--tct-date-calendar-range-disabled-background, var(--const-stoplight-alert, #d20a0a));
+  color: var(--t-base, #ffffff);
+}
+.cal-day.range-start {
+  border-radius: var(--tct-date-calendar-day-selected-border-radius, var(--app-border-radius-1, 4px)) 0 0 var(--tct-date-calendar-day-selected-border-radius, var(--app-border-radius-1, 4px));
+}
+.cal-day.range-end {
+  border-radius: 0 var(--tct-date-calendar-day-selected-border-radius, var(--app-border-radius-1, 4px)) var(--tct-date-calendar-day-selected-border-radius, var(--app-border-radius-1, 4px)) 0;
+}
+.cal-day.range-start.range-end {
+  border-radius: var(--tct-date-calendar-day-selected-border-radius, var(--app-border-radius-1, 4px));
+}
+
+.calendar-disclaimer {
+  margin-top: var(--tct-date-calendar-disclaimer-margin-top, var(--app-scale-3x, 15px));
+  padding-top: var(--tct-date-calendar-disclaimer-padding-top, var(--app-scale-2x, 10px));
+  border-top: 1px solid var(--tct-date-calendar-disclaimer-border-color, var(--t-gray-13, #e6e6e6));
+  color: var(--tct-date-calendar-disclaimer-font-color, var(--t-text, #4d4d4d));
+  font-size: var(--tct-date-calendar-disclaimer-font-size, var(--app-font-size-small, var(--const-px-12, 12px)));
+}
+
+.cal-footer {
+  display: grid;
+  gap: var(--tct-date-calendar-footer-gap, var(--app-scale-2x, 10px));
+  margin-top: var(--tct-date-calendar-footer-margin-top, var(--app-scale-3x, 15px));
+  padding-top: var(--tct-date-calendar-footer-padding-top, var(--app-scale-3x, 15px));
+  border-top: 1px solid var(--tct-date-calendar-footer-border-color, var(--t-gray-13, #e6e6e6));
+}
+
+.cal-footer-summary {
+  display: grid;
+  color: var(--tct-date-calendar-footer-font-color, var(--t-primary, #6a4a9e));
+  font-size: var(--tct-date-calendar-footer-font-size, var(--app-font-size-small, var(--const-px-12, 12px)));
+  font-weight: var(--tct-date-calendar-footer-font-weight, 600);
+}
+.cal-footer-summary > * {
+  grid-area: 1/1;
+}
+.cal-footer-summary q2-message {
+  color: var(--t-text, #4d4d4d);
+}
+.cal-footer-summary > span {
+  display: flex;
+  align-items: center;
+}
+.cal-footer-summary q2-message.is-placeholder {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.cal-footer-actions {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--tct-date-calendar-footer-action-gap, var(--app-scale-1x, 5px));
+  padding: var(--tct-date-calendar-footer-action-padding, var(--app-scale-1x, 5px));
+}
+.cal-footer-actions q2-btn {
+  flex: 0 0 auto;
+  width: auto;
+}
+
+@media (max-width: 768px) {
+  :host {
+    max-width: none;
+  }
+  .cal-panel {
+    width: var(--comp-date-calendar-width, min(100%, 100vw - var(--tct-date-calendar-mobile-gutter, 24px) - var(--tct-date-calendar-mobile-gutter, 24px), var(--tct-date-calendar-mobile-max-width, 420px)));
+    min-width: 0;
+  }
+  .cal-row {
+    grid-template-columns: repeat(7, minmax(44px, 1fr));
+  }
+  .cal-day {
+    height: auto;
+    aspect-ratio: 1;
+  }
+}
+@media (max-width: 360px) {
+  .cal-nav-btn {
+    height: var(--tct-date-calendar-mobile-navigation-button-height, 32px);
+    --tct-btn-icon-height: var(--tct-date-calendar-mobile-navigation-button-height, 32px);
+  }
+}