@odx/ui 1.0.0-rc.8 → 1.0.0

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@odx/ui",
-  "version": "1.0.0-rc.8",
+  "version": "1.0.0",
   "author": "Drägerwerk AG & Co.KGaA",
   "license": "SEE LICENSE IN LICENSE",
+  "peerDependencies": {
+    "@odx/icons": "*"
+  },
   "files": [
     "*.css",
     "*.woff2",

package/scss/3rdparty/ag-grid/theme.scss

@@ -0,0 +1,220 @@
+@use '@odx/icons/core/core-utils' as icons;
+@use '../../abstract/dimensions';
+@use '../../abstract/typography';
+
+.ag-theme-odx {
+  --ag-border-color: var(--odx-c-seperator);
+  --ag-foreground-color: var(--odx-c-text);
+  --ag-secondary-foreground-color: var(--odx-c-text);
+  --ag-disabled-foreground-color: vara(--odx-c-text-disabled);
+
+  --ag-background-color: var(--odx-c-background-content);
+
+  --ag-font-family: 'Pangea';
+  --ag-font-size: var(--odx-typography-base-size);
+
+  --ag-icon-size: #{typography.get-font-size(1)};
+  --ag-icon-font-family: #{icons.get-font-family()};
+  --ag-icon-font-code-aggregation: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-arrows: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-asc: '#{icons.get-icon-glyph(ascending)}';
+  --ag-icon-font-code-cancel: '#{icons.get-icon-glyph(close)}';
+  --ag-icon-font-code-chart: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-checkbox-checked: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-checkbox-indeterminate: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-checkbox-unchecked: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-color-picker: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-columns: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-contracted: '#{icons.get-icon-glyph(chevron-right)}';
+  --ag-icon-font-code-copy: '#{icons.get-icon-glyph(copy-content)}';
+  --ag-icon-font-code-cut: '#{icons.get-icon-glyph(cut)}';
+  --ag-icon-font-code-cross: '#{icons.get-icon-glyph(close)}';
+  --ag-icon-font-code-csv: '#{icons.get-icon-glyph(file)}';
+  --ag-icon-font-code-desc: '#{icons.get-icon-glyph(descending)}';
+  --ag-icon-font-code-excel: '#{icons.get-icon-glyph(file-excel)}';
+  --ag-icon-font-code-expanded: '#{icons.get-icon-glyph(chevron-left)}';
+  --ag-icon-font-code-eye-slash: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-eye: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-filter: '#{icons.get-icon-glyph(filter)}';
+  --ag-icon-font-code-first: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-grip: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-group: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-last: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-left: '#{icons.get-icon-glyph(arrow-left)}';
+  --ag-icon-font-code-linked: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-loading: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-maximize: '#{icons.get-icon-glyph(maximize)}';
+  --ag-icon-font-code-menu: '#{icons.get-icon-glyph(menu)}';
+  --ag-icon-font-code-minimize: '#{icons.get-icon-glyph(minimize)}';
+  --ag-icon-font-code-next: '#{icons.get-icon-glyph(chevron-right)}';
+  --ag-icon-font-code-none: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-not-allowed: '#{icons.get-icon-glyph(blocked)}';
+  --ag-icon-font-code-paste: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-pin: '#{icons.get-icon-glyph(pin)}';
+  --ag-icon-font-code-pivot: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-previous: '#{icons.get-icon-glyph(chevron-left)}';
+  --ag-icon-font-code-radio-button-off: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-radio-button-on: '#{icons.get-icon-glyph(placeholder)}';
+  --ag-icon-font-code-right: '#{icons.get-icon-glyph(arrow-right)}';
+  --ag-icon-font-code-save: '#{icons.get-icon-glyph(save)}';
+  --ag-icon-font-code-small-down: '#{icons.get-icon-glyph(chevron-down)}';
+  --ag-icon-font-code-small-left: '#{icons.get-icon-glyph(chevron-left)}';
+  --ag-icon-font-code-small-right: '#{icons.get-icon-glyph(chevron-right)}';
+  --ag-icon-font-code-small-up: '#{icons.get-icon-glyph(chevron-up)}';
+  --ag-icon-font-code-tick: '#{icons.get-icon-glyph(check)}';
+  --ag-icon-font-code-tree-closed: '#{icons.get-icon-glyph(chevron-right)}';
+  --ag-icon-font-code-tree-indeterminate: '#{icons.get-icon-glyph(minus)}';
+  --ag-icon-font-code-tree-open: '#{icons.get-icon-glyph(chevron-down)}';
+  --ag-icon-font-code-unlinked: '#{icons.get-icon-glyph(placeholder)}';
+
+  --ag-grid-size: #{dimensions.get-size(0.25)};
+  --ag-widget-vertical-spacing: #{dimensions.get-size(0.5)};
+
+  --ag-header-height: #{dimensions.get-size(2)};
+  --ag-row-height: #{dimensions.get-size(2)};
+  --ag-table-line-height: #{dimensions.get-size(1.5)};
+  --ag-list-item-height: #{dimensions.get-size(1.5)};
+
+  input[type='text'] {
+    background: var(--gray-100);
+    border: var(--ag-borders-critical) var(--gray100);
+    border-radius: var(--odx-v-border-radius-controls);
+    font-weight: var(--odx-typography-font-weight-normal);
+    letter-spacing: var(--odx-typography-font-weight-medium-letter-spacing);
+    line-height: var(--ag-table-line-height);
+    padding-left: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
+    padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.3334);
+    vertical-align: middle;
+
+    &::placeholder {
+      color: var(--odx-c-text);
+      opacity: 0.65;
+    }
+  }
+
+  .ag-standard-button {
+    background-color: var(--odx-c-primary);
+    border-radius: var(--odx-v-border-radius-controls);
+    color: var(--odx-c-primary-text);
+    height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
+    min-width: calc(var(--odx-vertical-rythm-base-size) * 3);
+    outline-offset: calc(-1 * var(--odx-v-outline-width-bold));
+    outline-width: var(--odx-v-outline-width-bold);
+    transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+    transition-property: background-color, color, outline;
+  }
+
+  .ag-header {
+    border-bottom: var(--ag-borders-critical) var(--gray-700);
+
+    &-row:not(:first-child) {
+      .ag-header-cell,
+      .ag-header-group-cell.ag-header-group-cell-with-group {
+        border: none;
+      }
+    }
+
+    .ag-cell-label-container {
+      width: fit-content;
+    }
+
+    .ag-floating-filter {
+      .ag-filter-select {
+        .ag-picker-field-wrapper {
+          height: calc(var(--odx-vertical-rythm-base-size) * 1.5);
+        }
+      }
+
+      input[type='text']:disabled {
+        color: var(--odx-c-text);
+        font-weight: var(--odx-typography-font-weight-medium);
+        padding: 0;
+      }
+    }
+
+    .ag-header-cell-text {
+      font-weight: var(--odx-typography-font-weight-medium);
+    }
+
+    .ag-header-cell-label {
+      padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.25);
+    }
+
+    .ag-header-icon {
+      &.ag-header-cell-menu-button {
+        height: calc(var(--odx-vertical-rythm-base-size) * 0.667);
+        width: calc(var(--odx-vertical-rythm-base-size) * 0.667);
+      }
+    }
+  }
+
+  &.ag-popup {
+    [type='text']:focus {
+      border-color: var(--ag-input-border-color);
+      border-radius: var(--odx-v-border-radius);
+      box-shadow: unset;
+    }
+  }
+
+  .ag-radio-button-input-wrapper {
+    align-items: center;
+    background-color: var(--odx-control-background-color);
+    border-radius: 50%;
+    display: flex;
+    flex: 0 0 auto;
+    height: calc(var(--odx-vertical-rythm-base-size) * 0.8334);
+    justify-content: center;
+    margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 0.0834);
+    margin-top: calc(var(--odx-vertical-rythm-base-size) * 0.0834);
+    outline: var(--odx-v-outline-width) solid transparent;
+    outline-color: var(--odx-control-outline-color);
+    outline-offset: calc(-1 * var(--odx-v-outline-width));
+    padding: 1px;
+    transition: all var(--odx-v-transition-duration) 0ms var(--odx-v-transition-easing-fn);
+    transition-property: background-color, color, outline-color;
+    width: calc(var(--odx-vertical-rythm-base-size) * 0.8334);
+
+    &:hover {
+      background-color: var(--odx-control-background-color-hover);
+      outline-color: var(--odx-control-outline-color-hover);
+    }
+
+    &.ag-checked {
+      background-color: var(--odx-control-background-color-selected);
+      color: var(--odx-control-color-selected);
+      opacity: 1;
+      outline-color: var(--odx-control-outline-color-selected);
+
+      &::after {
+        background-color: var(--odx-control-color-selected);
+        border-radius: 50%;
+        content: '';
+        height: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
+        left: unset;
+        margin-bottom: calc(var(--odx-vertical-rythm-base-size) * 0);
+        margin-top: calc(var(--odx-vertical-rythm-base-size) * 0);
+        top: unset;
+        transform: scale(1);
+        width: calc(var(--odx-vertical-rythm-base-size) * 0.1667);
+      }
+    }
+  }
+
+  .ag-root-wrapper {
+    border: none;
+  }
+
+  .ag-select {
+    .ag-picker-field-display {
+      color: var(--odx-c-text);
+    }
+
+    .ag-picker-field-icon {
+      padding-right: calc(var(--odx-vertical-rythm-base-size) * 0.5);
+    }
+  }
+
+  .ag-select-list {
+    color: var(--odx-c-text);
+  }
+}

package/scss/abstract/_breakpoints.scss

@@ -2,15 +2,21 @@
 @use 'sass:list';
 @use 'sass:map';
 
-$breakpoints: () !default;
+$breakpoints: (
+  'phone-s': 360px,
+  'phone': 480px,
+  'tablet': 768px,
+  'desktop-s': 960px,
+  'desktop': 1200px,
+) !default;
 
 @function get-breakpoint-names() {
   @return map.keys($breakpoints);
 }
 
-@function _get-value($breakpoint) {
+@function get-breakpoint-value($breakpoint) {
   @if $breakpoint and not map.has-key($breakpoints, $breakpoint) {
-    @error "Invalid breakpoint, `#{$breakpoint}` doesn't exist. Choose one of #{map.keys(breakpoints.$values)}.";
+    @error "Invalid breakpoint, `#{$breakpoint}` doesn't exist.";
   }
 
   @return map.get($breakpoints, $breakpoint);
@@ -18,7 +24,7 @@ $breakpoints: () !default;
 
 @function _get-next-value($breakpoint) {
   @if $breakpoint and not map.has-key($breakpoints, $breakpoint) {
-    @error "Invalid breakpoint, `#{$breakpoint}` doesn't exist. Choose one of #{map.keys(breakpoints.$values)}.";
+    @error "Invalid breakpoint, `#{$breakpoint}` doesn't exist.";
   }
 
   $keys: get-breakpoint-names();
@@ -28,13 +34,13 @@ $breakpoints: () !default;
 }
 
 @function _get-min-value($breakpoint) {
-  $value: _get-value($breakpoint);
+  $value: get-breakpoint-value($breakpoint);
 
   @return if($value != 0, $value, null);
 }
 
 @function _get-max-value($breakpoint) {
-  $value: _get-value($breakpoint);
+  $value: get-breakpoint-value($breakpoint);
 
   @return if($value > 0, $value - 1, null);
 }

package/scss/abstract/_dimensions.scss

@@ -1,9 +1,10 @@
 @use 'sass:math';
 
 @function _get-line-height-factor($factor, $line-height-factor) {
-  @if $line-height-factor == null {
+  @if not $line-height-factor {
     @return $factor;
   }
+
   @return $line-height-factor;
 }
 

package/scss/abstract/_motion.scss

@@ -1,8 +1,10 @@
+@use 'sass:list';
+
 @mixin transition($properties, $duration: var(--odx-v-transition-duration), $delay: 0ms) {
   $props: ();
 
   @each $prop in $properties {
-    $props: append($props, $prop, comma);
+    $props: list.append($props, $prop, comma);
   }
 
   transition: all $duration $delay var(--odx-v-transition-easing-fn);

package/scss/abstract/_typography.scss

@@ -1,16 +1,20 @@
 @use 'sass:math';
 @use 'utils';
 
+@function get-font-size($size: 1) {
+  @if $size < 0 {
+    @return calc(var(--odx-typography-base-size) * utils.css-pow(var(--odx-typography-negative-font-scaling-factor), $size));
+  } @else {
+    @return calc(var(--odx-typography-base-size) * utils.css-pow(var(--odx-typography-positive-font-scaling-factor), $size));
+  }
+}
+
 @mixin font-size($size: 1) {
   @if math.round($size) != $size {
     @error '$size must me an integer';
   }
 
-  @if $size < 0 {
-    font-size: calc(var(--odx-typography-base-size) * utils.css-pow(var(--odx-typography-negative-font-scaling-factor), $size));
-  } @else {
-    font-size: calc(var(--odx-typography-base-size) * utils.css-pow(var(--odx-typography-positive-font-scaling-factor), $size));
-  }
+  font-size: get-font-size($size);
 }
 
 @mixin font-weight($value: normal) {

package/scss/abstract/_utils.scss

@@ -66,6 +66,7 @@
 
 @mixin _focus-styles($with-background) {
   outline-color: var(--odx-c-focus-outline);
+
   @if $with-background {
     &,
     &:hover {
@@ -105,7 +106,7 @@
 }
 
 @mixin interactive($with-background: true, $focus-within: false) {
-  @include with-outline;
+  @include with-outline();
   @include focus-state($with-background, $focus-within);
 
   cursor: pointer;
@@ -121,3 +122,10 @@
   pointer-events: none;
   user-select: none;
 }
+
+@mixin dark-theme-selector() {
+  &[odxTheme='dark'],
+  &.odx-theme-dark {
+    @content;
+  }
+}

package/scss/assets/icons.css.hbs

@@ -0,0 +1,23 @@
+@font-face {
+  font-display: block;
+  font-family: "{{ name }}";
+  src: {{{ fontSrc }}};
+}
+
+.{{prefix}}::before,
+[class^="{{prefix}}-"]::before,
+[class*=" {{prefix}}-"]::before {
+  font-family: {{ name }} !important;
+  font-style: normal;
+  font-weight: normal !important;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  vertical-align: top;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+{{# each codepoints }}
+.{{ ../prefix }}-{{ @key }}::before { content: "\\{{ codepoint this }}"; }
+{{/ each }}

package/scss/assets/images/logo.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 74 29">
+  <path
+    fill="#000000"
+    d="M29.717 2.887c0 1.4-1.127 2.535-2.512 2.535a2.522 2.522 0 0 1-2.514-2.533c0-1.4 1.124-2.534 2.514-2.534a2.523 2.523 0 0 1 2.512 2.532ZM9.827.848H0v2.554h7.779c.903 0 1.635.732 1.644 1.637v14.62a1.65 1.65 0 0 1-1.644 1.64H4.823l.001-15.516H0v18.174h9.827c2.303 0 4.17-1.868 4.192-4.187V5.036C13.998 2.717 12.13.848 9.827.848Zm13.968 6.18c-2.705-.01-4.327.186-5.537.464-1.649.414-2.318.972-2.638 1.24a2.134 2.134 0 0 1-.145.114v15.111h4.596V11.452c-.027-1.55 2.264-2.062 3.722-.984l.002-3.44Zm42.037 1.694c.324-.269.992-.823 2.634-1.235 1.205-.275 2.833-.475 5.534-.464v3.44c-1.457-1.079-3.75-.566-3.726.984v12.509h-4.593V8.84c.04-.028.09-.068.15-.12ZM31.507 21.278h-2.135c-.987.018-1.716-.705-1.737-1.76a37.415 37.415 0 0 1 0-1.91c.014-.968.75-1.743 1.737-1.73h2.135v5.4Zm.679-14.253h-7.447v3.438s2.625-.894 4.448-.894c2.222 0 2.34 1.13 2.322 1.635v2.022h-4.484c-2.048 0-3.709 1.67-3.718 3.734v3.246c0 2.07 1.665 3.75 3.718 3.75h9.077v-13.01c-.015-2.318-1.883-3.92-3.916-3.92Zm1.074-1.604a2.521 2.521 0 0 0 2.512-2.534A2.52 2.52 0 0 0 33.26.355a2.522 2.522 0 0 0-2.513 2.532 2.523 2.523 0 0 0 2.513 2.534ZM43.7 9.605c-1.776 0-1.974 1.253-1.974 1.975v1.67c0 .725.198 1.976 1.974 1.974 1.778-.001 1.975-1.25 1.975-1.975v-1.67c0-.722-.197-1.974-1.975-1.974Zm2.281 8.092H41.33c-2.038.01-3.916-1.604-3.914-3.919V10.98C37.405 8.927 39 7.014 41.3 7.025h8.566v6.72c.004 2.05-1.601 3.96-3.884 3.952Zm-.117 6.877c0 .719-.21 1.971-2.084 1.971-1.869 0-2.078-1.252-2.078-1.97v-1.673c0-.723.21-1.977 2.078-1.977 1.875 0 2.084 1.255 2.084 1.977v1.672Zm.473-6.234-5.21.002c-2.29-.003-3.892 1.868-3.885 3.92v2.785c-.005 2.305 1.88 3.956 3.917 3.953h5.204c2.288 0 3.902-1.915 3.89-3.953v-2.785a3.916 3.916 0 0 0-3.916-3.922Zm9.41-3.326h3.946v-3.449c0-.723-.253-1.975-1.972-1.975-1.722 0-1.973 1.252-1.973 1.975v3.449Zm-.59-7.99 5.173-.001c2.03 0 3.926 1.602 3.923 3.92v6.699h-8.417v2.072c.008.906.696 1.66 2.522 1.66 2.81.005 5.761-.846 5.761-.846v3.428h-8.76c-2.233.004-4.123-1.6-4.118-3.918v-9.093c0-2.33 1.879-3.93 3.916-3.921Z"
+  />
+</svg>

package/scss/cdk/active-indicator.scss

@@ -7,7 +7,7 @@
   pointer-events: none;
   position: absolute;
   transform-origin: 0 0;
-  z-index: 0;
+  z-index: var(--odx-v-layer-1);
 
   &--horizontal {
     left: 0;

package/scss/cdk/connected-overlay.scss

@@ -9,7 +9,7 @@
 
   display: block;
   position: fixed;
-  z-index: 1337;
+  z-index: var(--odx-v-layer-3);
 
   &.is-hidden {
     opacity: 0;
@@ -32,5 +32,5 @@
   position: fixed;
   transform: rotate(45deg);
   width: dimensions.get-size(0.5);
-  z-index: 0;
+  z-index: var(--odx-v-layer-1);
 }

package/scss/components/action-group.component.scss

@@ -12,14 +12,14 @@
     flex-direction: row-reverse;
   }
 
-  > .odx-button:not(.odx-button--success, .odx-button--danger, .odx-button--confirmation) {
+  > .odx-button:not(.odx-button--primary, .odx-button--success, .odx-button--danger, .odx-button--confirmation, .odx-auth-sign-in) {
     /* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
     @extend .odx-button--ghost;
 
-    color: var(--odx-c-control-text);
+    color: var(--odx-c-text);
 
     &:hover {
-      color: var(--odx-c-control-text);
+      color: var(--odx-c-text);
     }
 
     &:focus-visible {

package/scss/components/area-header.component.scss

@@ -6,18 +6,27 @@
 @use 'avatar.component';
 @use '../layout/typography' as *;
 
-:root {
+body {
   --odx-area-header-title-color: var(--odx-c-headline);
   --odx-area-header-subtitle-color: var(--odx-c-headline);
 }
 
 .odx-area-header {
-  @include dimensions.padding-x(1);
+  @include dimensions.padding-x(0.5);
+
+  @include breakpoints.up(phone) {
+    @include dimensions.padding-x(1);
+  }
 
   &,
   &__container {
     column-gap: dimensions.get-size(math.div(20, 24));
     display: flex;
+
+    .odx-navigation-back {
+      @include dimensions.margin(-0.75, right);
+      @include dimensions.margin(math.div(5, 24), top);
+    }
   }
 
   * {
@@ -32,11 +41,13 @@
   &__container {
     display: flex;
     flex: 1 1 auto;
+    overflow: hidden;
   }
 
   &__inner {
     align-self: center;
     flex: 1 1 auto;
+    overflow: hidden;
   }
 
   &__title {
@@ -47,6 +58,7 @@
   }
 
   &__subtitle {
+    @include typography.prevent-text-overflow();
     @extend .odx-subtitle;
     @extend .odx-subtitle-6;
 
@@ -67,10 +79,6 @@
 
   &--small,
   &--medium {
-    .odx-area-header__subtitle {
-      display: none;
-    }
-
     .odx-avatar {
       @extend .odx-avatar--small;
     }
@@ -99,11 +107,7 @@
   }
 
   &--large {
-    @include dimensions.padding-y(0.25);
-
-    @include breakpoints.up(tablet) {
-      @include dimensions.padding-y(0.5);
-    }
+    @include dimensions.padding-y(0.5);
 
     .odx-area-header__title {
       @extend .odx-title-4;

package/scss/components/avatar.component.scss

@@ -25,6 +25,7 @@
   border-radius: 50%;
   color: var(--odx-c-text);
   position: relative;
+  user-select: none;
   vertical-align: middle;
 
   &--small {
@@ -47,6 +48,10 @@
     }
   }
 
+  &--rectangle {
+    border-radius: var(--odx-v-border-radius-controls);
+  }
+
   img {
     height: 100%;
     left: 0;
@@ -54,6 +59,6 @@
     position: absolute;
     top: 0;
     width: 100%;
-    z-index: 2;
+    z-index: var(--odx-v-layer-1);
   }
 }

package/scss/components/badge.component.scss

@@ -3,7 +3,7 @@
 @use '../abstract/utils';
 @use '../abstract/typography';
 
-:root {
+body {
   --odx-badge-contrast-color: var(--odx-c-background-content);
 }
 
@@ -18,24 +18,10 @@
 
   border-radius: $badge-size;
   height: $badge-size;
-  left: 0;
   min-width: $badge-size;
   outline: 1px solid transparent;
-  top: 0;
   vertical-align: middle;
-  z-index: 9999;
-
-  &::before {
-    content: attr(data-value);
-  }
-
-  &[data-value='0'] {
-    display: none;
-  }
-
-  &[data-value^='-']::before {
-    content: '';
-  }
+  z-index: var(--odx-v-layer-1);
 
   &,
   &--highlight {
@@ -56,4 +42,9 @@
   &--contrast {
     outline-color: var(--odx-badge-contrast-color);
   }
+
+  .odx-badge-overlay > & {
+    display: flex;
+    margin: calc(#{$badge-size} / -2);
+  }
 }

package/scss/components/bar.component.scss

@@ -0,0 +1,93 @@
+@use 'sass:math';
+@use '../abstract/dimensions';
+@use '../abstract/utils';
+@use '../abstract/typography';
+@use '../abstract/motion';
+@use './dropdown.component' as dropdown;
+
+body {
+  --odx-bar-background-color: var(--cyan-500);
+  --odx-bar-background-color-hover: var(--cyan-600);
+  --odx-bar-background-color-active: var(--cyan-700);
+  --odx-bar-text-color: var(--white);
+  --odx-bar-text-color-disabled: var(--cyan-700);
+
+  @include utils.dark-theme-selector() {
+    --odx-bar-background-color-hover: var(--cyan-400);
+    --odx-bar-background-color-active: var(--cyan-300);
+    --odx-bar-text-color: var(--black);
+    --odx-bar-text-color-disabled: var(--cyan-200);
+  }
+}
+
+.odx-bar {
+  @include dimensions.padding-x(math.div(12, 24));
+  @include dimensions.padding-y(math.div(6, 24));
+
+  align-items: center;
+  background-color: var(--odx-bar-background-color);
+  border-radius: dimensions.get-size(math.div(6, 24));
+  box-shadow: 0 2px 6px rgb(0 25 66 / 50%);
+  color: var(--odx-bar-text-color);
+  display: inline-flex;
+  gap: dimensions.get-size(math.div(12, 24));
+  width: max-content;
+
+  &-button {
+    $button: &;
+
+    @include motion.transition(background-color color outline);
+    @include utils.with-outline-bold();
+
+    align-items: center;
+    background-color: var(--odx-bar-background-color);
+    border-radius: var(--odx-v-border-radius-controls);
+    display: inline-flex;
+    font-size: dimensions.get-size(math.div(4, 3));
+    height: dimensions.get-size(math.div(36, 24));
+    outline-color: transparent;
+    outline-style: solid;
+
+    &:hover {
+      background-color: var(--odx-bar-background-color-hover);
+    }
+
+    &#{dropdown.$dropdown-open-selector},
+    &:active {
+      background-color: var(--odx-bar-background-color-active);
+    }
+
+    &:focus-visible {
+      outline-color: var(--odx-bar-background-color-active);
+    }
+
+    &--default {
+      @include dimensions.padding-x(math.div(28, 24));
+    }
+
+    &--small {
+      @include dimensions.padding-x(math.div(2, 24));
+    }
+
+    &.is-disabled {
+      @include utils.non-interactive();
+
+      color: var(--odx-bar-text-color-disabled);
+    }
+  }
+
+  &-label {
+    display: inline;
+  }
+
+  .odx-bar-parent & {
+    bottom: dimensions.get-size(math.div(16, 24));
+    left: 50%;
+    position: absolute;
+    transform: translateX(-50%);
+  }
+}
+
+.odx-bar-parent {
+  position: relative;
+}