@limetech/lime-elements 37.1.0-next.62 → 37.1.0-next.64

package/dist/collection/components/switch/switch.css

@@ -801,10 +801,6 @@
   --mdc-switch-disabled-selected-handle-color: rgb(var(--contrast-1000));
   --mdc-switch-disabled-unselected-handle-color: rgb(var(--contrast-1000));
 }
-:host(limel-switch) limel-helper-line {
-  display: flex;
-  flex-basis: 100%;
-}
 
 .mdc-switch {
   margin-right: 0.5rem;
@@ -867,17 +863,58 @@ label.disabled {
   opacity: 1;
 }
 
-limel-helper-line {
-  opacity: 0;
+/**
+ * Note! This file is exported to `dist/scss/` in the published
+ * node module, for consumer projects to import.
+ * That means this file cannot import from any file that isn't
+ * also exported, keeping the same relative path.
+ *
+ * Or, just don't import anything, that works too.
+ */
+/**
+ * This mixin will mask out the content that is close to
+ * the edges of a scrollable area.
+ * - If the scrollable content has `overflow-y`, use `vertically`
+ * as an argument for `$direction`.
+ - If the scrollable content has `overflow-x`, use `horizontally`
+ * as an argument for `$direction`.
+ *
+ * For the visual effect to work smoothly, we need to make sure that
+ * the size of the fade-out edge effect is the same as the
+ * internal paddings of the scrollable area. Otherwise, content of a
+ * scrollable area that does not have a padding will fade out before
+ * any scrolling has been done.
+ * This is why this mixin already adds paddings, which automatically
+ * default to the size of the fade-out effect.
+ * This size defaults to `1rem`, but to override the size use
+ * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
+ * when `vertically` argument is set, and use
+ * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
+ * when `horizontally` argument is set.
+ * Of course you can also programmatically increase and decrease the
+ * size of these variables for each edge, based on the amount of
+ * scrolling that has been done by the user. In this case, make sure
+ * to add a custom padding where the mixin is used, to override
+ * the paddings that are automatically added by the mixin in the
+ * compiled CSS code.
+ */
+:host(limel-switch:focus),
+:host(limel-switch:focus-visible),
+:host(limel-switch:focus-within),
+:host(limel-switch[invalid]) {
+  --limel-h-l-grid-template-rows-transition-speed: 0.46s;
+  --limel-h-l-grid-template-rows: 1fr;
 }
 
-@media (pointer: coarse) {
-  limel-helper-line {
-    opacity: 1;
-  }
+:host(limel-switch),
+:host(limel-switch[invalid=false]) {
+  --limel-h-l-grid-template-rows-transition-speed: 0.3s;
+  --limel-h-l-grid-template-rows: 0fr;
 }
-:host(:focus) limel-helper-line,
-:host(:focus-visible) limel-helper-line,
-:host(:focus-within) limel-helper-line {
-  opacity: 1;
+
+:host(limel-switch:focus) limel-helper-line,
+:host(limel-switch:focus-visible) limel-helper-line,
+:host(limel-switch:focus-within) limel-helper-line,
+:host(limel-switch:hover) limel-helper-line {
+  will-change: grid-template-rows;
 }

package/dist/collection/style/mixins.scss

@@ -245,3 +245,33 @@
         @error "Please specify the direction #{$direction}!";
     }
 }
+
+@mixin hide-helper-line-when-not-needed($component-tag) {
+    // This is when:
+    // - the component is not focused, or
+    // - an interactive element within the component is not focused, or
+    // - the component is valid
+
+    :host(#{$component-tag}:focus),
+    :host(#{$component-tag}:focus-visible),
+    :host(#{$component-tag}:focus-within),
+    :host(#{$component-tag}[invalid]) {
+        --limel-h-l-grid-template-rows-transition-speed: 0.46s;
+        --limel-h-l-grid-template-rows: 1fr;
+    }
+
+    :host(#{$component-tag}),
+    :host(#{$component-tag}[invalid='false']) {
+        --limel-h-l-grid-template-rows-transition-speed: 0.3s;
+        --limel-h-l-grid-template-rows: 0fr;
+    }
+
+    :host(#{$component-tag}:focus),
+    :host(#{$component-tag}:focus-visible),
+    :host(#{$component-tag}:focus-within),
+    :host(#{$component-tag}:hover) {
+        limel-helper-line {
+            will-change: grid-template-rows;
+        }
+    }
+}