@limetech/lime-elements 36.3.0-next.4 → 36.3.0-next.40

package/dist/collection/components/tab-bar/tab-bar.css

@@ -387,20 +387,16 @@
 }
 
 .mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon + .mdc-tab__text-label {
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   padding-left: 8px;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   padding-right: 0;
 }
 [dir=rtl] .mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon + .mdc-tab__text-label, .mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon + .mdc-tab__text-label[dir=rtl] {
   /*rtl:begin:ignore*/
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   padding-left: 0;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   padding-right: 8px;
   /*rtl:end:ignore*/
 }
@@ -465,16 +461,14 @@
 }
 .mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::after {
   top: 0;
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: 0;
   transform: scale(0);
   transform-origin: center center;
 }
 .mdc-tab.mdc-ripple-upgraded--unbounded .mdc-tab__ripple::after {
   top: var(--mdc-ripple-top, 0);
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: var(--mdc-ripple-left, 0);
 }
 .mdc-tab.mdc-ripple-upgraded--foreground-activation .mdc-tab__ripple::after {
@@ -487,8 +481,7 @@
 .mdc-tab .mdc-tab__ripple::before,
 .mdc-tab .mdc-tab__ripple::after {
   top: calc(50% - 100%);
-  /* @noflip */
-  /*rtl:ignore*/
+  /* @noflip */ /*rtl:ignore*/
   left: calc(50% - 100%);
   width: 200%;
   height: 200%;
@@ -569,7 +562,10 @@
 
 .scroll-button {
   --icon-background-color: rgb(var(--contrast-100));
-  top: 0.25rem;
+  display: flex;
+  align-items: center;
+  top: 0;
+  bottom: 0;
 }
 .scroll-button.left {
   transform: translate3d(-4.0625rem, 0, 0);
@@ -601,11 +597,16 @@
 }
 
 .mdc-tab-scroller__scroll-content {
-  padding: 0.5rem 0.75rem 0 0.75rem;
+  padding: 0.25rem 0.75rem 0 0.75rem;
   background-color: rgb(var(--contrast-300));
 }
 
-:host {
+:host(limel-tab-bar) {
+  --limel-active-tab-background-color: var(
+      --tab-panel-background-color,
+      rgb(var(--contrast-100))
+  );
+  isolation: isolate;
   display: block;
   position: relative;
 }
@@ -661,7 +662,7 @@
 
 .mdc-tab--active {
   border-radius: 0.625rem 0.625rem 0 0;
-  background-color: rgb(var(--contrast-100));
+  background-color: var(--limel-active-tab-background-color);
   z-index: 2;
 }
 .mdc-tab--active:before, .mdc-tab--active:after {
@@ -671,7 +672,7 @@
   height: 0.75rem;
   position: absolute;
   bottom: 0;
-  background-color: rgb(var(--contrast-100));
+  background-color: var(--limel-active-tab-background-color);
   -webkit-mask-image: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' clip-rule='evenodd' viewBox='0 0 50 50'><defs/><path d='M0 0c0 27.594 22.406 50 50 50H0V0z'/></svg>");
   mask-image: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' clip-rule='evenodd' viewBox='0 0 50 50'><defs/><path d='M0 0c0 27.594 22.406 50 50 50H0V0z'/></svg>");
 }

package/dist/collection/components/tab-panel/tab-panel.css

@@ -1,4 +1,8 @@
+/**
+* @prop --tab-panel-background-color: Background color of the contents of the tab and the active tab of the tab bar. Defaults to `--contrast-100`.
+*/
 :host(limel-tab-panel) {
+  --tab-panel-background-color: rgb(var(--contrast-100));
   display: block;
   height: 100%;
 }
@@ -16,4 +20,5 @@
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   box-sizing: border-box;
+  background-color: var(--tab-panel-background-color);
 }

package/dist/collection/components/table/table.css

@@ -1,4 +1,12 @@
 @charset "UTF-8";
+/**
+ * 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 file is imported into every component!
  *
@@ -1213,6 +1221,14 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
     border-bottom-color: rgb(var(--table-arrow-color));
   }
 }
+/**
+ * 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 file is imported into every component!
  *
@@ -1245,6 +1261,7 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
 }
 .tabulator .tabulator-footer .tabulator-paginator .tabulator-page:not([disabled]) {
   transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
   color: rgb(var(--contrast-1200)) !important;
   background-color: transparent;
 }
@@ -1348,6 +1365,14 @@ button.tabulator-page[data-page=first]:not([disabled]):hover:after, button.tabul
   padding: 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 file is imported into every component!
  *
@@ -1430,6 +1455,14 @@ button.tabulator-page[data-page=first]:not([disabled]):hover:after, button.tabul
   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 file is imported into every component!
  *