@tet/tet-components 1.3.7-testing → 1.3.8-staging

package/dist/collection/components/basic/buttons/tet-tabs/tet-tab-header/tet-tab-header.js

@@ -398,14 +398,14 @@ export class TetTabHeader {
         return {};
     }
     render() {
-        return (h(Host, { key: '67623ae5343f1f7d9bbef8443ec474b88535595c' }, h("div", { key: '1f5d6f429324aaed20dd24b849da3d04039ed8ff', class: {
+        return (h(Host, { key: '253787a643afdcb85447757f71119e13df9de586' }, h("div", { key: '8609f08656a318afb6b9bb738a8a025e70b58626', class: {
                 'tabs': true,
                 'tabs--segmented': this.segmented,
                 [this.position]: true,
                 [this.theme]: true,
                 [this.sizing]: true,
                 'no-underline': this.hideHeaderUnderline
-            }, onMouseDown: this.onContainerMouseDown, style: this.getStyle(), ref: (ref) => (this.tabElement = ref) }, h("slot", { key: 'b70575bec4290c0ce2b4d52f118eb5f6e777797c', ref: (slot) => (this.tabContainer = slot) }))));
+            }, onMouseDown: this.onContainerMouseDown, style: this.getStyle(), ref: (ref) => (this.tabElement = ref) }, h("slot", { key: '17952e5095c052492091d0b9965ecdf1c34c36d7', ref: (slot) => (this.tabContainer = slot) }))));
     }
     static get is() { return "tet-tab-header"; }
     static get encapsulation() { return "shadow"; }
@@ -425,8 +425,8 @@ export class TetTabHeader {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'classic' | 'blue' | 'dark' | 'square' | 'netflix' | 'dark-gray'",
-                    "resolved": "\"blue\" | \"classic\" | \"dark\" | \"dark-gray\" | \"netflix\" | \"square\"",
+                    "original": "'light' | 'classic' | 'blue' | 'dark' | 'square' | 'netflix' | 'dark-gray'",
+                    "resolved": "\"blue\" | \"classic\" | \"dark\" | \"dark-gray\" | \"light\" | \"netflix\" | \"square\"",
                     "references": {}
                 },
                 "required": false,

package/dist/collection/components/basic/loaders/tet-spinner/tet-spinner.css

@@ -7,16 +7,16 @@
   * @prop --spinner-indicator-size: The width of the indicator element of the spinner.
   * @prop --spinner-progress: The current progress of the `determinate` spinner `type`.
   */
-  --spinner-primary-color: rgb(0, 96, 245);
-  --spinner-secondary-color: rgba(0, 96, 245, 0.05);
+  --spinner-primary-color: var(--tc-blue-40);
+  --spinner-secondary-color: var(--tc-grey-00);
   --spinner-size: 1.5rem;
   --spinner-indicator-size: 0.23rem;
   --spinner-progress: 0;
 }
 
 .dark-theme {
-  --spinner-primary-color: rgb(31, 208, 214);
-  --spinner-secondary-color: rgba(31, 208, 214, 0.05);
+  --spinner-primary-color: var(--tc-blue-40-dark);
+  --spinner-secondary-color: var(--tc-grey-00-dark);
 }
 
 .size--medium {

package/dist/collection/components/basic/loaders/tet-spinner/tet-spinner.js

@@ -47,13 +47,13 @@ export class TetSpinner {
         this.setForeignObjectAttributes();
     }
     render() {
-        return (h("div", { key: '6e95705c5d6dac191ec872a6bca2fb324061543a', ref: element => (this.spinner = element), class: {
+        return (h("div", { key: '8d8076262a60d0711e24660b81e2d6378f0d8820', ref: element => (this.spinner = element), class: {
                 spinner: true,
                 [`${this.theme}-theme`]: true,
                 [`size--${this.size}`]: true,
                 [`spinner--${this.type}`]: true,
-            } }, h("svg", { key: '873e3bf0b88a071bccdfb8acf5506ba10f729e29', viewBox: "0 0 40 40" }, h("clipPath", { key: 'f950e8a0fc327839560ed3ee4f9b2af3ef33381e', id: "clip" }, h("path", { key: 'b2521d8f653568922fd3b8183246472dfddbc5eb', d: `M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457
-              0 40 8.9543 40 20ZM6 20C6 27.732 12.268 34 20 34C27.732 34 34 27.732 34 20C34 12.268 27.732 6 20 6C12.268 6 6 12.268 6 20Z` })), h("foreignObject", { key: 'e5d84ec058bcef401b670c34f5ff62024c7b48cb' }, h("div", { key: '43b0199efd12f508eaf1f32843b1f7fdcbe94948', class: "spinner__gradient" })))));
+            } }, h("svg", { key: '6847aaf2784b76d457fef661d0bbf66ff29928c1', viewBox: "0 0 40 40" }, h("clipPath", { key: '032fcadda676bbcb42d7e4a72ea7ee8298f7c090', id: "clip" }, h("path", { key: 'c29d091ee4d0c72f452c4ef5d06a11dd558d2b89', d: `M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457
+              0 40 8.9543 40 20ZM6 20C6 27.732 12.268 34 20 34C27.732 34 34 27.732 34 20C34 12.268 27.732 6 20 6C12.268 6 6 12.268 6 20Z` })), h("foreignObject", { key: 'b6279c450d0c2e77263d5f20df8bc27352a917ea' }, h("div", { key: '7a71f81c00fe8ad9e12d5e14f4ef78a03fa7e583', class: "spinner__gradient" })))));
     }
     static get is() { return "tet-spinner"; }
     static get encapsulation() { return "shadow"; }
@@ -73,8 +73,8 @@ export class TetSpinner {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'classic' | 'dark'",
-                    "resolved": "\"classic\" | \"dark\"",
+                    "original": "'classic' | 'light' | 'dark'",
+                    "resolved": "\"classic\" | \"dark\" | \"light\"",
                     "references": {}
                 },
                 "required": false,

package/dist/collection/components/basic/steppers/tet-stepper-v2/test/tet-stepper-v2.spec.js

@@ -10,7 +10,20 @@ describe('tet-stepper-v2', () => {
         expect(page.root).toEqualHtml(`
       <tet-stepper-v2>
         <mock:shadow-root>
-          <ol class="stepper"></ol>
+          <ol class="stepper light"></ol>
+        </mock:shadow-root>
+      </tet-stepper-v2>
+    `);
+    });
+    it('renders an empty stepper with dark theme', async () => {
+        const page = await newSpecPage({
+            components: [TetStepperV2],
+            html: `<tet-stepper-v2 theme="dark"></tet-stepper-v2>`,
+        });
+        expect(page.root).toEqualHtml(`
+      <tet-stepper-v2 theme="dark">
+        <mock:shadow-root>
+          <ol class="stepper dark"></ol>
         </mock:shadow-root>
       </tet-stepper-v2>
     `);

package/dist/collection/components/basic/steppers/tet-stepper-v2/tet-stepper-v2.css

@@ -361,12 +361,12 @@
    * @prop --stepper-step-title-color:        The color of step title text
    * @prop --stepper-step-width-mobile:       The step width in mobile mode
    */
-  --stepper-step-active-color: rgb(0, 96, 245);
-  --stepper-step-non-active-color: rgb(192, 197, 206);
-  --stepper-step-attention-color: rgb(255, 182, 26);
-  --stepper-step-white-color: rgb(255, 255, 255);
-  --stepper-step-description-color: rgb(67, 75, 86);
-  --stepper-step-title-color: rgb(10, 11, 13);
+  --stepper-step-active-color: var(--tc-blue-40);
+  --stepper-step-non-active-color: var(--tc-border-tertiary);
+  --stepper-step-attention-color: var(--tc-blue-40);
+  --stepper-step-white-color: var(--tc-layer-primary);
+  --stepper-step-description-color: var(--tc-text-secondary);
+  --stepper-step-title-color: var(--tc-text-primary);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -382,6 +382,14 @@
   list-style: none;
   flex-direction: column;
 }
+.stepper.dark {
+  --stepper-step-active-color: var(--tc-blue-40-dark);
+  --stepper-step-non-active-color: var(--tc-border-tertiary-dark);
+  --stepper-step-attention-color: var(--tc-blue-40-dark);
+  --stepper-step-white-color: var(--tc-layer-primary-dark);
+  --stepper-step-description-color: var(--tc-text-secondary-dark);
+  --stepper-step-title-color: var(--tc-text-primary-dark);
+}
 @media only screen and (min-width: 63.9375rem) {
   .stepper {
     flex-direction: row;

package/dist/collection/components/basic/steppers/tet-stepper-v2/tet-stepper-v2.js

@@ -33,9 +33,13 @@ export class TetStepperV2 {
             return isLastStep ? h("div", { class: { 'stepper-line': true, active } }) : null;
         };
         this.stepperData = [];
+        this.theme = 'light';
     }
     render() {
-        return (h(Host, { key: '8389ae41c8b859d16bb5057462d29805b3cf8381' }, h("ol", { key: '7ced6d3b2a3dd5e815662edd7785519dade65b9c', class: "stepper" }, this.stepperData.map(this.renderStep.bind(this)))));
+        return (h(Host, { key: 'ed9180254d4d95a9d201a828599257de601a6366' }, h("ol", { key: '993cffbb2ccf660601a3a5a19f770927ac96bcf5', class: {
+                'stepper': true,
+                [this.theme]: true,
+            } }, this.stepperData.map(this.renderStep.bind(this)))));
     }
     static get is() { return "tet-stepper-v2"; }
     static get encapsulation() { return "shadow"; }
@@ -72,6 +76,24 @@ export class TetStepperV2 {
                     "text": "An array of data to show in the stepper"
                 },
                 "defaultValue": "[]"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The theme of the component."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'light'"
             }
         };
     }