q2-tecton-elements 1.10.5 → 1.10.8

package/dist/collection/components/q2-textarea/styles.css

@@ -1,343 +1,295 @@
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 *:active {
-    outline: none;
+  outline: none;
 }
 
 *:focus {
-    outline: none;
-    box-shadow: var(--const-global-focus);
+  outline: none;
+  box-shadow: var(--const-global-focus);
 }
 
 :host {
-    box-shadow: none !important;
+  box-shadow: none !important;
 }
 
 ::-moz-focus-inner {
-    border: none;
+  border: none;
 }
 
 input,
 textarea,
 button {
-    font-family: inherit;
-    font-size: inherit;
+  font-family: inherit;
+  font-size: 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;
+  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;
+  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;
+  display: none;
 }
 
 :host([hidden]) {
-    display: none;
+  display: none;
 }
 
 .invisible {
-    visibility: hidden;
+  visibility: hidden;
 }
 
-
 :host {
-    display: block;
-    margin-top: var(--tct-textarea-margin-top, var(--app-scale-6x, 30px));
-    margin-bottom: var(--tct-textarea-margin-bottom, var(--app-scale-6x, 30px));
-    font-size: var(--tct-textarea-font-size, var(--app-font-size, inherit));
+  display: block;
+  margin-top: var(--tct-textarea-margin-top, var(--app-scale-6x, 30px));
+  margin-bottom: var(--tct-textarea-margin-bottom, var(--app-scale-6x, 30px));
+  font-size: var(--tct-textarea-font-size, var(--app-font-size, inherit));
 }
 
 :host([hidden]) {
-    display: none;
+  display: none;
 }
 
 label {
-    display: block;
-    padding-left: var(--tct-textarea-label-padding-left, 0);
-    padding-right: var(--tct-textarea-label-padding-right, 0);
-    margin-top: var(--tct-textarea-label-margin-top, 0);
-    margin-bottom: var(
-        --tct-textarea-label-margin-bottom,
-        var(--tct-scale-1x, var(--app-scale-1x, 5px))
-    );
-    color: var(--tct-textarea-label-font-color, inherit);
-    font-size: var(--tct-textarea-label-font-size, inherit);
-    font-weight: var(--tct-textarea-label-font-weight, 600);
-    text-transform: var(--tct-textarea-label-text-transform, none);
-    letter-spacing: var(--tct-textarea-label-letter-spacing, normal);
-    transition: color var(--tct-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)));
+  display: block;
+  padding-left: var(--tct-textarea-label-padding-left, 0);
+  padding-right: var(--tct-textarea-label-padding-right, 0);
+  margin-top: var(--tct-textarea-label-margin-top, 0);
+  margin-bottom: var(--tct-textarea-label-margin-bottom, var(--tct-scale-1x, var(--app-scale-1x, 5px)));
+  color: var(--tct-textarea-label-font-color, inherit);
+  font-size: var(--tct-textarea-label-font-size, inherit);
+  font-weight: var(--tct-textarea-label-font-weight, 600);
+  text-transform: var(--tct-textarea-label-text-transform, none);
+  letter-spacing: var(--tct-textarea-label-letter-spacing, normal);
+  transition: color var(--tct-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)));
 }
 
 .optional-tag {
-    margin-left: var(
-        --tct-textarea-label-optional-margin-left,
-        var(--tct-scale-1x, var(--app-scale-1x, 5px))
-    );
-    color: var(
-        --tct-textarea-label-optional-font-color,
-        var(--tct-a11y-color, var(--t-a11y-gray-color, #767676))
-    );
-    font-size: var(--tct-textarea-label-optional-font-size, 12px);
-    font-weight: var(--tct-textarea-label-optional-font-weight, 400);
+  margin-left: var(--tct-textarea-label-optional-margin-left, var(--tct-scale-1x, var(--app-scale-1x, 5px)));
+  color: var(--tct-textarea-label-optional-font-color, var(--tct-a11y-color, var(--t-a11y-gray-color, #767676)));
+  font-size: var(--tct-textarea-label-optional-font-size, 12px);
+  font-weight: var(--tct-textarea-label-optional-font-weight, 400);
 }
 
 .input-container {
-    min-height: var(--comp-textarea-min-height, var(--tct-textarea-min-height));
-    height: 100%;
-    --comp-textarea-border-top-left-radius: var(
-        --tct-textarea-border-top-left-radius,
-        var(--tct-border-radius-1, var(--app-border-radius-1, 3px))
-    );
-    --comp-textarea-border-top-right-radius: var(
-        --tct-textarea-border-top-right-radius,
-        var(--tct-border-radius-1, var(--app-border-radius-1, 3px))
-    );
-    --comp-textarea-border-bottom-right-radius: var(
-        --tct-textarea-border-bottom-right-radius,
-        var(--tct-border-radius-1, var(--app-border-radius-1, 3px))
-    );
-    --comp-textarea-border-bottom-left-radius: var(
-        --tct-textarea-border-bottom-left-radius,
-        var(--tct-border-radius-1, var(--app-border-radius-1, 3px))
-    );
-    --comp-textarea-border-radius: var(--comp-textarea-border-top-left-radius)
-        var(--comp-textarea-border-top-right-radius) var(--comp-textarea-border-bottom-right-radius)
-        var(--comp-textarea-border-bottom-left-radius);
-    --comp-textarea-border-width: var(--tct-textarea-border-top-width, 1px)
-        var(--tct-textarea-border-right-width, 1px) var(--tct-textarea-border-bottom-width, 1px)
-        var(--tct-textarea-border-left-width, 1px);
-    --comp-textarea-focus-border-width: var(--tct-textarea-focus-border-top-width, 1px)
-        var(--tct-textarea-focus-border-right-width, 1px)
-        var(--tct-textarea-focus-border-bottom-width, 1px)
-        var(--tct-textarea-focus-border-left-width, 1px);
-    --comp-textarea-icon-clearance: 34px;
+  min-height: var(--comp-textarea-min-height, var(--tct-textarea-min-height));
+  height: 100%;
+  --comp-textarea-border-top-left-radius: var(
+      --tct-textarea-border-top-left-radius,
+      var(--tct-border-radius-1, var(--app-border-radius-1, 3px))
+  );
+  --comp-textarea-border-top-right-radius: var(
+      --tct-textarea-border-top-right-radius,
+      var(--tct-border-radius-1, var(--app-border-radius-1, 3px))
+  );
+  --comp-textarea-border-bottom-right-radius: var(
+      --tct-textarea-border-bottom-right-radius,
+      var(--tct-border-radius-1, var(--app-border-radius-1, 3px))
+  );
+  --comp-textarea-border-bottom-left-radius: var(
+      --tct-textarea-border-bottom-left-radius,
+      var(--tct-border-radius-1, var(--app-border-radius-1, 3px))
+  );
+  --comp-textarea-border-radius: var(--comp-textarea-border-top-left-radius)
+      var(--comp-textarea-border-top-right-radius) var(--comp-textarea-border-bottom-right-radius)
+      var(--comp-textarea-border-bottom-left-radius);
+  --comp-textarea-border-width: var(--tct-textarea-border-top-width, 1px)
+      var(--tct-textarea-border-right-width, 1px) var(--tct-textarea-border-bottom-width, 1px)
+      var(--tct-textarea-border-left-width, 1px);
+  --comp-textarea-focus-border-width: var(--tct-textarea-focus-border-top-width, 1px)
+      var(--tct-textarea-focus-border-right-width, 1px)
+      var(--tct-textarea-focus-border-bottom-width, 1px)
+      var(--tct-textarea-focus-border-left-width, 1px);
+  --comp-textarea-icon-clearance: 34px;
 }
 
 .content-container {
-    --comp-textarea-min-height: 44px;
-    --comp-textarea-min-width: 150px;
-    position: relative;
-    display: inline-block;
-    min-height: var(--comp-textarea-min-height, var(--tct-textarea-min-height, 44px));
-    min-width: var(--comp-textarea-min-width, var(--tct-textarea-min-width, 150px));
+  --comp-textarea-min-height: 44px;
+  --comp-textarea-min-width: 150px;
+  position: relative;
+  display: inline-block;
+  min-height: var(--comp-textarea-min-height, var(--tct-textarea-min-height, 44px));
+  min-width: var(--comp-textarea-min-width, var(--tct-textarea-min-width, 150px));
 }
 
 :host(:not([cols])) .content-container {
-    width: 100%;
+  width: 100%;
 }
 
 textarea {
-    resize: none;
-    height: 100%;
-    -webkit-appearance: none;
-    appearance: none;
-    display: block;
-    box-sizing: border-box;
-    min-height: var(--comp-textarea-min-height, var(--tct-textarea-min-height));
-    padding: var(--tct-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)))
-        var(--tct-textarea-horizontal-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)));
-    background-color: var(
-        --tct-textarea-bg,
-        var(--t-input-bg, var(--tct-gray-14, var(--app-gray-14, #f2f2f2)))
-    );
-    color: var(--tct-textarea-font-color, var(--t-input-font-color, inherit));
-    border-width: var(--comp-textarea-border-width);
-    border-style: solid;
-    border-color: var(
-        --tct-textarea-border-color,
-        var(--t-input-border, var(--tct-gray-11, var(--app-gray-11, #cccccc)))
-    );
-    border-radius: var(--comp-textarea-border-radius);
-    box-shadow: var(--tct-textarea-box-shadow, none);
-    scrollbar-width: thin;
-    scrollbar-color: var(--t-a11y-gray-color) transparent;
-    transition: border-width
-            var(--tct-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))),
-        border-color var(--tct-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))),
-        box-shadow var(--tct-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)));
+  resize: none;
+  height: 100%;
+  -webkit-appearance: none;
+  appearance: none;
+  display: block;
+  box-sizing: border-box;
+  min-height: var(--comp-textarea-min-height, var(--tct-textarea-min-height));
+  padding: var(--tct-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px))) var(--tct-textarea-horizontal-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)));
+  background-color: var(--tct-textarea-bg, var(--t-input-bg, var(--tct-gray-14, var(--app-gray-14, #f2f2f2))));
+  color: var(--tct-textarea-font-color, var(--t-input-font-color, inherit));
+  border-width: var(--comp-textarea-border-width);
+  border-style: solid;
+  border-color: var(--tct-textarea-border-color, var(--t-input-border, var(--tct-gray-11, var(--app-gray-11, #cccccc))));
+  border-radius: var(--comp-textarea-border-radius);
+  box-shadow: var(--tct-textarea-box-shadow, none);
+  scrollbar-width: thin;
+  scrollbar-color: var(--t-a11y-gray-color) transparent;
+  transition: border-width var(--tct-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))), border-color var(--tct-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))), box-shadow var(--tct-textarea-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease)));
 }
 
 textarea::-webkit-scrollbar {
-    width: var(--app-scale-1x);
-    height: var(--app-scale-1x);
-    margin: var(--app-scale-1x);
+  width: var(--app-scale-1x);
+  height: var(--app-scale-1x);
+  margin: var(--app-scale-1x);
 }
 
 textarea::-webkit-scrollbar-thumb {
-    background: var(--t-a11y-gray-color);
-    border-radius: 2px;
+  background: var(--t-a11y-gray-color);
+  border-radius: 2px;
 }
 
 textarea::-webkit-scrollbar-track {
-    background: transparent;
+  background: transparent;
 }
 
 textarea:not([cols]) {
-    width: 100%;
+  width: 100%;
 }
 
 textarea:focus {
-    border-width: var(--comp-textarea-focus-border-width, 1px);
-    border-color: var(
-        --tct-textarea-focus-border-color,
-        var(--t-input-focus, var(--tct-gray-9, var(--app-gray-9, #999999)))
-    );
-    box-shadow: var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff)),
-        var(--tct-textarea-focus-box-shadow, 0 0 transparent);
+  border-width: var(--comp-textarea-focus-border-width, 1px);
+  border-color: var(--tct-textarea-focus-border-color, var(--t-input-focus, var(--tct-gray-9, var(--app-gray-9, #999999))));
+  box-shadow: var(--tct-global-focus, var(--const-global-focus, 0 0 0 2px #33b4ff)), var(--tct-textarea-focus-box-shadow, 0 0 transparent);
 }
 
 textarea::placeholder {
-    color: var(
-        --tct-textarea-placeholder-font-color,
-        var(
-            --t-input-placeholder-font-color,
-            var(--tct-gray-7, var(--app-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))
-        )
-    );
+  color: var(--tct-textarea-placeholder-font-color, var(--t-input-placeholder-font-color, var(--tct-gray-7, var(--app-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))));
 }
 
 q2-icon {
-    margin-top: calc(var(--tct-textarea-border-top-width, 1px) / 2);
-    margin-bottom: calc(var(--tct-textarea-border-bottom-width, 1px) / 2);
-    pointer-events: none;
-    position: absolute;
-    top: var(--tct-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)));
-    color: var(
-        --tct-textarea-icon-stroke-primary,
-        var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999)))
-    );
-    right: 0;
-    margin-right: var(--tct-scale-2x, var(--app-scale-2x, 10px));
-    --tct-icon-stroke-primary: var(
-        --tct-textarea-icon-stroke-primary,
-        var(--tct-gray-9, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999))))
-    );
-    --t-icon-stroke-primary: var(
-        --tct-textarea-icon-stroke-primary,
-        var(--tct-gray-9, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999))))
-    );
+  margin-top: calc(var(--tct-textarea-border-top-width, 1px) / 2);
+  margin-bottom: calc(var(--tct-textarea-border-bottom-width, 1px) / 2);
+  pointer-events: none;
+  position: absolute;
+  top: var(--tct-textarea-vertical-padding, var(--tct-scale-2x, var(--app-scale-2x, 10px)));
+  color: var(--tct-textarea-icon-stroke-primary, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999))));
+  right: 0;
+  margin-right: var(--tct-scale-2x, var(--app-scale-2x, 10px));
+  --tct-icon-stroke-primary: var(
+      --tct-textarea-icon-stroke-primary,
+      var(--tct-gray-9, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999))))
+  );
+  --t-icon-stroke-primary: var(
+      --tct-textarea-icon-stroke-primary,
+      var(--tct-gray-9, var(--app-gray-9, var(--tct-gray, var(--app-gray, #999999))))
+  );
 }
 
 .icon-error {
-    color: var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));
-    --tct-icon-stroke-primary: var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));
-    --t-icon-stroke-primary: var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));
+  color: var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));
+  --tct-icon-stroke-primary: var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));
+  --t-icon-stroke-primary: var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));
 }
 
 .messages-container {
-    height: 0px;
-    overflow: hidden;
-    background-color: var(
-        --tct-message-bg,
-        var(--tct-gray-14, var(--app-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))
-    );
-    box-shadow: var(
-        --tct-textarea-message-box-shadow,
-        var(--tct-box-shadow-1, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3)))
-    );
-    transition: height
-        var(--tct-textarea-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease)));
-    margin-top: 2px;
-    z-index: 1;
-    position: absolute;
-    width: 100%;
-    color: var(--tct-textarea-messages-font-color, inherit);
+  height: 0px;
+  overflow: hidden;
+  background-color: var(--tct-message-bg, var(--tct-gray-14, var(--app-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))));
+  box-shadow: var(--tct-textarea-message-box-shadow, var(--tct-box-shadow-1, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))));
+  transition: height var(--tct-textarea-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease)));
+  margin-top: 2px;
+  z-index: 1;
+  position: absolute;
+  width: 100%;
+  color: var(--tct-textarea-messages-font-color, inherit);
 }
 
 :host([disabled]) .input-container {
-    cursor: not-allowed;
-    opacity: var(
-        --tct-textarea-disabled-opacity,
-        var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))
-    );
+  cursor: not-allowed;
+  opacity: var(--tct-textarea-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));
 }
 
 textarea[disabled] {
-    cursor: not-allowed;
+  cursor: not-allowed;
 }
 
 .has-error textarea {
-    padding-right: var(--comp-textarea-icon-clearance);
+  padding-right: var(--comp-textarea-icon-clearance);
 }
 
 .has-error label {
-    color: var(
-        --tct-textarea-error-label-font-color,
-        var(--tct-textarea-label-font-color, inherit)
-    );
+  color: var(--tct-textarea-error-label-font-color, var(--tct-textarea-label-font-color, inherit));
 }
 
 .has-error textarea:not(:focus) {
-    border-color: var(--tct-textarea-error-border-color, var(--const-stoplight-alert, #c30000));
+  border-color: var(--tct-textarea-error-border-color, var(--const-stoplight-alert, #c30000));
 }
 
 .max-length {
-    color: var(--tct-textarea-max-length-color, var(--t-textA, rgba(77, 77, 77, 0.77)));
-    font-size: var(
-        --tct-textarea-max-length-font-size,
-        var(--tct-font-size-small, var(--app-font-size-small, 12px))
-    );
-    position: absolute;
-    right: 0;
+  color: var(--tct-textarea-max-length-color, var(--t-textA, rgba(77, 77, 77, 0.77)));
+  font-size: var(--tct-textarea-max-length-font-size, var(--tct-font-size-small, var(--app-font-size-small, 12px)));
+  position: absolute;
+  right: 0;
 }
 
 .btn-resize {
-    --tct-textarea-resize-icon-padding: calc(
-        calc(
-                var(--tct-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px)) -
-                    var(--tct-textarea-resize-icon-size, 12px)
-            ) / 2
-    );
-    width: var(--tct-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px));
-    height: var(--tct-textarea-resize-btn-height, var(--tct-btn-icon-height, 44px));
-    background: var(--tct-textarea-resize-btn-background, transparent);
-    stroke: var(--tct-textarea-resize-color, var(--t-textA, rgba(77, 77, 77, 0.77)));
-    border: 0;
-    position: absolute;
-    right: calc(var(--tct-textarea-resize-icon-padding) * -1 + 2px);
-    bottom: calc(var(--tct-textarea-resize-icon-padding) * -1 + 2px);
-    display: block;
-    padding: var(--tct-textarea-resize-icon-padding);
-    font-size: 0;
+  --tct-textarea-resize-icon-padding: calc(
+      calc(
+              var(--tct-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px)) -
+                  var(--tct-textarea-resize-icon-size, 12px)
+          ) / 2
+  );
+  width: var(--tct-textarea-resize-btn-width, var(--tct-btn-icon-width, 44px));
+  height: var(--tct-textarea-resize-btn-height, var(--tct-btn-icon-height, 44px));
+  background: var(--tct-textarea-resize-btn-background, transparent);
+  stroke: var(--tct-textarea-resize-color, var(--t-textA, rgba(77, 77, 77, 0.77)));
+  border: 0;
+  position: absolute;
+  right: calc(var(--tct-textarea-resize-icon-padding) * -1 + 2px);
+  bottom: calc(var(--tct-textarea-resize-icon-padding) * -1 + 2px);
+  display: block;
+  padding: var(--tct-textarea-resize-icon-padding);
+  font-size: 0;
 }
+
 .btn-resize:focus {
-    outline: none;
-    box-shadow: none;
+  outline: none;
+  box-shadow: none;
 }
 
-:host([resize='both']) .btn-resize {
-    cursor: se-resize;
+:host([resize=both]) .btn-resize {
+  cursor: se-resize;
 }
 
-:host([resize='vertical']) .btn-resize {
-    cursor: s-resize;
+:host([resize=vertical]) .btn-resize {
+  cursor: s-resize;
 }
 
-:host([resize='horizontal']) .btn-resize {
-    cursor: e-resize;
-}
+:host([resize=horizontal]) .btn-resize {
+  cursor: e-resize;
+}

package/dist/collection/components/tecton-tab-pane/index.js

@@ -41,7 +41,7 @@ export class TectonTabPane {
   }
   ///////// View Methods /////////
   render() {
-    return (h("div", { id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-expanded": `${!!this.selected}`, "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` },
+    return (h("div", { id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` },
       this.selected && this.provided !== undefined && !this.provided && (h("div", null,
         h("slot", { name: "loading-wrapper" }),
         h("iframe", { hidden: true, name: this.moduleId, scrolling: "no", src: this.showForm && this.authPayload.length ? '' : this.url || '', "data-module-id": this.moduleId, style: this.minHeight ? { minHeight: this.minHeight } : null, onLoad: this.onIFrameLoad, title: this.iframeTitle, allow: "geolocation; camera" }),
@@ -54,7 +54,7 @@ export class TectonTabPane {
   static get is() { return "tecton-tab-pane"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
-    "$": ["styles.css"]
+    "$": ["styles.scss"]
   }; }
   static get styleUrls() { return {
     "$": ["styles.css"]