@limetech/lime-elements 40.6.2 → 40.7.0

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

@@ -1,401 +1,118 @@
+@charset "UTF-8";
 /**
-* @license
-* Copyright 2018 Google Inc.
+* Note! This file is forwarded via `src/style/exports.scss`
+* and exposed to consumers through the root `index.scss`.
 *
-* Permission is hereby granted, free of charge, to any person obtaining a copy
-* of this software and associated documentation files (the "Software"), to deal
-* in the Software without restriction, including without limitation the rights
-* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-* copies of the Software, and to permit persons to whom the Software is
-* furnished to do so, subject to the following conditions:
+* Consumers import it using:
+* `@use '@limetech/lime-elements' as lime-elements;`
 *
-* The above copyright notice and this permission notice shall be included in
-* all copies or substantial portions of the Software.
-*
-* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-* THE SOFTWARE.
+* Legacy import paths (`dist/scss/mixins`) are maintained
+* for backward compatibility via copy rules in the Stencil config.
 */
-.mdc-tab-bar {
-  width: 100%;
-}
-
-.mdc-tab {
-  height: 48px;
-}
-
-.mdc-tab--stacked {
-  height: 72px;
-}
-
 /**
-* @license
-* Copyright 2018 Google Inc.
-*
-* Permission is hereby granted, free of charge, to any person obtaining a copy
-* of this software and associated documentation files (the "Software"), to deal
-* in the Software without restriction, including without limitation the rights
-* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-* copies of the Software, and to permit persons to whom the Software is
-* furnished to do so, subject to the following conditions:
+* Neutralizes the user-agent styles that browsers apply to `<button>` elements
+* (their default background, border, padding, font, etc.), without stripping
+* the useful defaults that `all: unset;` would also remove
+* (such as `display`, `cursor`, and focus behavior).
 *
-* The above copyright notice and this permission notice shall be included in
-* all copies or substantial portions of the Software.
+* Prefer this mixin over `all: unset;` on `<button>` elements, then layer
+* the styling you want on top — often one of the `is-*-clickable` mixins.
+*/
+/**
+* This can be used on a trigger element that opens a dropdown menu or a popover.
+*/
+/**
+ * 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.
+ */
+/**
+* This mixin will add an animated underline to the bottom of an `a` elements.
+* Note that you may need to add `all: unset;` –depending on your use case–
+* before using this mixin.
+*/
+/**
+* This mixin creates a cross-browser font stack.
+* - `sans-serif` can be used for the UI of the components.
+* - `monospace` can be used for code.
 *
-* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-* THE SOFTWARE.
+* ⚠️ If we change the font stacks, we need to update
+* 1. the consumer documentation in `README.md`, and
+* 2. the CSS variables of `--kompendium-example-font-family`
+* in the `<style>` tag of `index.html`.
 */
-.mdc-tab-indicator .mdc-tab-indicator__content--underline {
-  border-color: #6200ee;
-  /* @alternate */
-  border-color: var(--mdc-theme-primary, #6200ee);
-}
-.mdc-tab-indicator .mdc-tab-indicator__content--icon {
-  color: #018786;
-  /* @alternate */
-  color: var(--mdc-theme-secondary, #018786);
-}
-.mdc-tab-indicator .mdc-tab-indicator__content--underline {
-  border-top-width: 2px;
-}
-.mdc-tab-indicator .mdc-tab-indicator__content--icon {
-  height: 34px;
-  font-size: 34px;
-}
-
-.mdc-tab-indicator {
-  display: flex;
-  position: absolute;
-  top: 0;
-  left: 0;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 1;
-}
-
-.mdc-tab-indicator__content {
-  transform-origin: left;
-  opacity: 0;
-}
-
-.mdc-tab-indicator__content--underline {
-  align-self: flex-end;
-  box-sizing: border-box;
-  width: 100%;
-  border-top-style: solid;
-}
-
-.mdc-tab-indicator__content--icon {
-  align-self: center;
-  margin: 0 auto;
-}
-
-.mdc-tab-indicator--active .mdc-tab-indicator__content {
-  opacity: 1;
-}
-
-.mdc-tab-indicator .mdc-tab-indicator__content {
-  transition: 250ms transform cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.mdc-tab-indicator--no-transition .mdc-tab-indicator__content {
-  transition: none;
-}
-
-.mdc-tab-indicator--fade .mdc-tab-indicator__content {
-  transition: 150ms opacity linear;
-}
-
-.mdc-tab-indicator--active.mdc-tab-indicator--fade .mdc-tab-indicator__content {
-  transition-delay: 100ms;
-}
-
-.mdc-tab {
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  font-family: Roboto, sans-serif;
-  /* @alternate */
-  font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif));
-  font-size: 0.875rem;
-  /* @alternate */
-  font-size: var(--mdc-typography-button-font-size, 0.875rem);
-  line-height: 2.25rem;
-  /* @alternate */
-  line-height: var(--mdc-typography-button-line-height, 2.25rem);
-  font-weight: 500;
-  /* @alternate */
-  font-weight: var(--mdc-typography-button-font-weight, 500);
-  letter-spacing: 0.0892857143em;
-  /* @alternate */
-  letter-spacing: var(--mdc-typography-button-letter-spacing, 0.0892857143em);
-  text-decoration: none;
-  /* @alternate */
-  text-decoration: var(--mdc-typography-button-text-decoration, none);
-  text-transform: uppercase;
-  /* @alternate */
-  text-transform: var(--mdc-typography-button-text-transform, uppercase);
-}
-.mdc-tab .mdc-tab__text-label {
-  color: rgba(0, 0, 0, 0.6);
-}
-.mdc-tab .mdc-tab__icon {
-  color: rgba(0, 0, 0, 0.54);
-  fill: currentColor;
-}
-.mdc-tab {
-  position: relative;
-}
-
-.mdc-tab__content {
-  position: relative;
-}
-
-.mdc-tab__icon {
-  width: 24px;
-  height: 24px;
-  font-size: 24px;
-}
-
-.mdc-tab--active .mdc-tab__text-label {
-  color: #6200ee;
-  /* @alternate */
-  color: var(--mdc-theme-primary, #6200ee);
-}
-.mdc-tab--active .mdc-tab__icon {
-  color: #6200ee;
-  /* @alternate */
-  color: var(--mdc-theme-primary, #6200ee);
-  fill: currentColor;
-}
-
-.mdc-tab {
-  background: none;
-}
-
-.mdc-tab {
-  min-width: 90px;
-  padding-right: 24px;
-  padding-left: 24px;
-  display: flex;
-  flex: 1 0 auto;
-  justify-content: center;
-  box-sizing: border-box;
-  margin: 0;
-  padding-top: 0;
-  padding-bottom: 0;
-  border: none;
-  outline: none;
-  text-align: center;
-  white-space: nowrap;
-  cursor: pointer;
-  -webkit-appearance: none;
-  z-index: 1;
-}
-.mdc-tab::-moz-focus-inner {
-  padding: 0;
-  border: 0;
-}
-
-.mdc-tab--min-width {
-  flex: 0 1 auto;
-}
-
-.mdc-tab__content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: inherit;
-  pointer-events: none;
-}
-
-.mdc-tab__text-label {
-  transition: 150ms color linear;
-  display: inline-block;
-  line-height: 1;
-  z-index: 2;
-}
-
-.mdc-tab__icon {
-  transition: 150ms color linear;
-  z-index: 2;
-}
-
-.mdc-tab--stacked .mdc-tab__content {
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-.mdc-tab--stacked .mdc-tab__text-label {
-  padding-top: 6px;
-  padding-bottom: 4px;
-}
-
-.mdc-tab--active .mdc-tab__text-label,
-.mdc-tab--active .mdc-tab__icon {
-  transition-delay: 100ms;
-}
-
-.mdc-tab:not(.mdc-tab--stacked) .mdc-tab__icon + .mdc-tab__text-label {
-  /* @noflip */ /*rtl:ignore*/
-  padding-left: 8px;
-  /* @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*/
-  padding-left: 0;
-  /* @noflip */ /*rtl:ignore*/
-  padding-right: 8px;
-  /*rtl:end:ignore*/
-}
-
-@keyframes mdc-ripple-fg-radius-in {
-  from {
-    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transform: translate(var(--mdc-ripple-fg-translate-start, 0)) scale(1);
-  }
-  to {
-    transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
-  }
-}
-@keyframes mdc-ripple-fg-opacity-in {
-  from {
-    animation-timing-function: linear;
-    opacity: 0;
-  }
-  to {
-    opacity: var(--mdc-ripple-fg-opacity, 0);
-  }
-}
-@keyframes mdc-ripple-fg-opacity-out {
-  from {
-    animation-timing-function: linear;
-    opacity: var(--mdc-ripple-fg-opacity, 0);
-  }
-  to {
-    opacity: 0;
-  }
-}
-.mdc-tab {
-  --mdc-ripple-fg-size: 0;
-  --mdc-ripple-left: 0;
-  --mdc-ripple-top: 0;
-  --mdc-ripple-fg-scale: 1;
-  --mdc-ripple-fg-translate-end: 0;
-  --mdc-ripple-fg-translate-start: 0;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-.mdc-tab .mdc-tab__ripple::before,
-.mdc-tab .mdc-tab__ripple::after {
-  position: absolute;
-  border-radius: 50%;
-  opacity: 0;
-  pointer-events: none;
-  content: "";
-}
-.mdc-tab .mdc-tab__ripple::before {
-  transition: opacity 15ms linear, background-color 15ms linear;
-  z-index: 1;
-  /* @alternate */
-  z-index: var(--mdc-ripple-z-index, 1);
-}
-.mdc-tab .mdc-tab__ripple::after {
-  z-index: 0;
-  /* @alternate */
-  z-index: var(--mdc-ripple-z-index, 0);
-}
-.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::before {
-  transform: scale(var(--mdc-ripple-fg-scale, 1));
-}
-.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::after {
-  top: 0;
-  /* @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*/
-  left: var(--mdc-ripple-left, 0);
-}
-.mdc-tab.mdc-ripple-upgraded--foreground-activation .mdc-tab__ripple::after {
-  animation: mdc-ripple-fg-radius-in 225ms forwards, mdc-ripple-fg-opacity-in 75ms forwards;
-}
-.mdc-tab.mdc-ripple-upgraded--foreground-deactivation .mdc-tab__ripple::after {
-  animation: mdc-ripple-fg-opacity-out 150ms;
-  transform: translate(var(--mdc-ripple-fg-translate-end, 0)) scale(var(--mdc-ripple-fg-scale, 1));
-}
-.mdc-tab .mdc-tab__ripple::before,
-.mdc-tab .mdc-tab__ripple::after {
-  top: calc(50% - 100%);
-  /* @noflip */ /*rtl:ignore*/
-  left: calc(50% - 100%);
-  width: 200%;
-  height: 200%;
-}
-.mdc-tab.mdc-ripple-upgraded .mdc-tab__ripple::after {
-  width: var(--mdc-ripple-fg-size, 100%);
-  height: var(--mdc-ripple-fg-size, 100%);
-}
-.mdc-tab .mdc-tab__ripple::before, .mdc-tab .mdc-tab__ripple::after {
-  background-color: #6200ee;
-  /* @alternate */
-  background-color: var(--mdc-ripple-color, var(--mdc-theme-primary, #6200ee));
-}
-.mdc-tab:hover .mdc-tab__ripple::before, .mdc-tab.mdc-ripple-surface--hover .mdc-tab__ripple::before {
-  opacity: 0.04;
-  /* @alternate */
-  opacity: var(--mdc-ripple-hover-opacity, 0.04);
-}
-.mdc-tab.mdc-ripple-upgraded--background-focused .mdc-tab__ripple::before, .mdc-tab:not(.mdc-ripple-upgraded):focus .mdc-tab__ripple::before {
-  transition-duration: 75ms;
-  opacity: 0.12;
-  /* @alternate */
-  opacity: var(--mdc-ripple-focus-opacity, 0.12);
-}
-.mdc-tab:not(.mdc-ripple-upgraded) .mdc-tab__ripple::after {
-  transition: opacity 150ms linear;
-}
-.mdc-tab:not(.mdc-ripple-upgraded):active .mdc-tab__ripple::after {
-  transition-duration: 75ms;
-  opacity: 0.12;
-  /* @alternate */
-  opacity: var(--mdc-ripple-press-opacity, 0.12);
-}
-.mdc-tab.mdc-ripple-upgraded {
-  --mdc-ripple-fg-opacity: var(--mdc-ripple-press-opacity, 0.12);
-}
-
-.mdc-tab__ripple {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  will-change: transform, opacity;
-}
-
+/**
+* This mixin is a hack, using old CSS syntax
+* to enable you to truncate a piece of text,
+* after a certain number of lines.
+*/
+/**
+* This mixin will add a chessboard background pattern,
+* typically used to visualize transparency.
+*/
+/**
+* Make a container resizable by the user.
+* This is used in the documentations and examples
+* of some components, to demonstrate how the component
+* behaves in a resizable container.
+*/
+/**
+ * Drag to reorder mixins
+ */
+/**
+ * The breakpoints below are used to create responsive designs
+ * in Lime's products. Therefore, they are here to get distributed
+ * to all components in other private repos, which rely on this `mixins`
+ * file, to create consistent styles.
+ *
+ * :::important
+ * In very rare cases you should used media queries!
+ * Nowadays, there are many better ways of achieving responsive design
+ * without media queries. For example, using CSS Grid, Flexbox, and their features.
+ * :::
+ */
+/**
+  * Media query mixins for responsive design based on screen width.
+  * Note that these mixins do not detect the device type!
+  */
+/**
+ * @prop --tab-bar-horizontal-tab-max-width: The largest width of a tab in a horizontal tab bar. Defaults to `16rem`, and to no limit for tabs with equal width. Set it to `none` for no limit.
+ * @prop --tab-bar-vertical-width: The width of a vertical tab bar. Defaults to `10rem`.
+ */
 :host(limel-tab-bar) {
   --limel-tab-background-color: var(--contrast-300);
   --limel-tab-border-radius: 0.625rem;
+  --limel-tab-content-inset: 0.25rem;
   --limel-active-tab-background-color: var(
       --tab-panel-background-color,
       rgb(var(--contrast-100))
   );
+  --limel-active-tab-color: var(
+      --lime-primary-color,
+      var(--limel-theme-primary-color)
+  );
   --limel-tab-active-outer-edge-curve-size: 0.75rem;
   --limel-tab-separator-width: 0.125rem;
   --limel-tab-separator-background-color: rgb(var(--contrast-600));
@@ -411,111 +128,157 @@ limel-scroller {
   background-color: rgb(var(--limel-tab-background-color));
 }
 
-:host(.has-tabs-with-equal-width) .mdc-tab {
+:host(.has-tabs-with-equal-width:not([orientation=vertical])) button {
   flex: 1 0 auto;
+  max-width: var(--tab-bar-horizontal-tab-max-width, none);
 }
 
-.mdc-tab {
-  font-family: inherit;
-  font-weight: 400;
-  letter-spacing: normal;
-  font-size: var(--limel-theme-default-font-size);
-  text-transform: none;
-}
-
-.mdc-tab-indicator .mdc-tab-indicator__content {
+button {
+  appearance: none;
+  background: none;
   border: none;
-}
-
-.mdc-tab__ripple {
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
+  position: relative;
+  display: flex;
   box-sizing: border-box;
-  border-radius: var(--limel-tab-border-radius);
-  border-style: solid;
-  border-color: transparent;
-  border-width: 0.25rem;
-  opacity: 0.7;
-}
-.mdc-tab__ripple:before, .mdc-tab__ripple:after {
-  transition: background-color 0.5s ease;
-}
-
-.mdc-tab {
   border-radius: 0;
-  padding-right: 1rem;
-  padding-left: 1rem;
+  padding: var(--limel-tab-content-inset);
   min-width: 2.5rem;
   background-color: transparent;
   flex: 0 0 auto;
   height: 2.5rem;
+  outline: none;
+  cursor: pointer;
+  white-space: nowrap;
+  font-size: var(--limel-theme-default-font-size);
 }
-.mdc-tab:not(.mdc-tab--active):after {
-  content: "";
-  display: block;
-  background-color: var(--limel-tab-separator-background-color);
-  width: var(--limel-tab-separator-width);
-  height: 1rem;
-  margin: auto;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  border-radius: 1rem;
-  right: calc(-1 * var(--limel-tab-separator-width));
-}
-.mdc-tab:not(.mdc-tab--active):last-of-type:after {
-  display: none;
-}
-.mdc-tab .mdc-tab__icon {
+button limel-icon {
+  transition: color 0.2s ease;
   color: rgb(var(--contrast-800));
   margin-left: -0.25rem;
+  flex-shrink: 0;
+}
+button span.text {
+  transition: color 0.2s ease;
+  line-height: 1.25;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--limel-theme-on-surface-color);
+}
+button:hover span.text {
+  color: var(--limel-theme-text-primary-on-background-color);
 }
-.mdc-tab limel-badge {
+button limel-badge {
   margin-right: -0.25rem;
   box-shadow: 0 0 0 1px rgb(var(--contrast-600));
+  pointer-events: none;
+  flex-shrink: 0;
 }
 
-.mdc-tab--active {
-  border-radius: var(--limel-tab-border-radius) var(--limel-tab-border-radius) 0 0;
+button[aria-selected=true] {
   background-color: var(--limel-active-tab-background-color);
   z-index: 2;
 }
-.mdc-tab--active:before, .mdc-tab--active:after {
+button[aria-selected=true]:before, button[aria-selected=true]:after {
   content: "";
   display: block;
   width: var(--limel-tab-active-outer-edge-curve-size);
   height: var(--limel-tab-active-outer-edge-curve-size);
   position: absolute;
-  bottom: 0;
   background-color: var(--limel-active-tab-background-color);
   -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill-rule='evenodd'%20stroke-linejoin='round'%20stroke-miterlimit='2'%20clip-rule='evenodd'%20viewBox='0%200%2050%2050'%3E%3Cdefs/%3E%3Cpath%20d='M0%200c0%2027.594%2022.406%2050%2050%2050H0V0z'/%3E%3C/svg%3E");
   mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20fill-rule='evenodd'%20stroke-linejoin='round'%20stroke-miterlimit='2'%20clip-rule='evenodd'%20viewBox='0%200%2050%2050'%3E%3Cdefs/%3E%3Cpath%20d='M0%200c0%2027.594%2022.406%2050%2050%2050H0V0z'/%3E%3C/svg%3E");
 }
-.mdc-tab--active:before {
+button[aria-selected=true] limel-icon {
+  color: var(--limel-active-tab-color);
+}
+button[aria-selected=true] span.text {
+  color: var(--limel-active-tab-color);
+}
+
+span.content {
+  transition: box-shadow 0.2s ease;
+  display: flex;
+  flex-grow: 1;
+  min-width: 0;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  padding: 0 0.75rem;
+  border-radius: calc(var(--limel-tab-border-radius) - var(--limel-tab-content-inset));
+}
+button:focus-visible span.content {
+  transition-duration: 0.3s;
+  box-shadow: var(--shadow-depth-8-focused);
+}
+
+:host(limel-tab-bar:not([orientation=vertical])) button {
+  max-width: var(--tab-bar-horizontal-tab-max-width, 16rem);
+}
+:host(limel-tab-bar:not([orientation=vertical])) button:not([aria-selected=true]):after {
+  content: "";
+  display: block;
+  background-color: var(--limel-tab-separator-background-color);
+  width: var(--limel-tab-separator-width);
+  height: 1rem;
+  margin: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  border-radius: 1rem;
+  right: calc(-1 * var(--limel-tab-separator-width));
+}
+:host(limel-tab-bar:not([orientation=vertical])) button:not([aria-selected=true]):last-of-type:after {
+  display: none;
+}
+:host(limel-tab-bar:not([orientation=vertical])) button[aria-selected=true] {
+  border-radius: var(--limel-tab-border-radius) var(--limel-tab-border-radius) 0 0;
+}
+:host(limel-tab-bar:not([orientation=vertical])) button[aria-selected=true]:before, :host(limel-tab-bar:not([orientation=vertical])) button[aria-selected=true]:after {
+  bottom: 0;
+}
+:host(limel-tab-bar:not([orientation=vertical])) button[aria-selected=true]:before {
   left: calc(-1 * var(--limel-tab-active-outer-edge-curve-size));
   transform: rotateY(180deg);
 }
-.mdc-tab--active:after {
+:host(limel-tab-bar:not([orientation=vertical])) button[aria-selected=true]:after {
   right: calc(-1 * var(--limel-tab-active-outer-edge-curve-size));
 }
-.mdc-tab--active .mdc-ripple-upgraded--background-focused:before {
-  background-color: transparent;
-  transition: background-color 1s ease;
+
+:host(limel-tab-bar[orientation=vertical]) {
+  width: var(--tab-bar-vertical-width, 10rem);
 }
-.mdc-tab--active .mdc-tab__icon {
-  color: var(--mdc-theme-primary);
+:host(limel-tab-bar[orientation=vertical]) div[role=tablist] {
+  height: 100%;
 }
-
-.mdc-tab__content {
-  gap: 0.375rem;
+:host(limel-tab-bar[orientation=vertical]) limel-scroller {
+  --limel-scroller-content-padding: var(
+          --limel-tab-active-outer-edge-curve-size
+      )
+      0 var(--limel-tab-active-outer-edge-curve-size) 0.25rem;
+  height: 100%;
 }
-
-.mdc-tab .mdc-tab__text-label {
-  transition: color 0.2s ease;
-  padding-left: 0 !important;
-  color: var(--limel-theme-on-surface-color);
+:host(limel-tab-bar[orientation=vertical]) button[aria-selected=true] {
+  border-radius: var(--limel-tab-border-radius) 0 0 var(--limel-tab-border-radius);
 }
-.mdc-tab:hover .mdc-tab__text-label {
-  color: var(--limel-theme-text-primary-on-background-color);
+:host(limel-tab-bar[orientation=vertical]) button[aria-selected=true]:before, :host(limel-tab-bar[orientation=vertical]) button[aria-selected=true]:after {
+  right: 0;
+}
+:host(limel-tab-bar[orientation=vertical]) button[aria-selected=true]:before {
+  bottom: 100%;
+  transform: rotateY(180deg);
+}
+:host(limel-tab-bar[orientation=vertical]) button[aria-selected=true]:after {
+  top: 100%;
+  transform: rotate(180deg);
+}
+:host(limel-tab-bar[orientation=vertical]) span.content {
+  justify-content: flex-start;
 }
-.mdc-tab.mdc-tab--active .mdc-tab__text-label {
-  color: var(--lime-primary-color, var(--limel-theme-primary-color));
+:host(limel-tab-bar[orientation=vertical]) span.text {
+  flex-grow: 1;
 }