@baloise/ds-core 16.3.0 → 16.4.0-nightly.20240917

package/dist/collection/components/bal-steps/bal-steps.css

@@ -1 +1 @@
-@media(hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused .bal-steps__nav__item__icon{box-shadow:var(--bal-focus-shadow) !important}}@media(hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused.bal-steps__nav__item--inverted .bal-steps__nav__item__icon{box-shadow:var(--bal-focus-shadow-inverted) !important}}@media(hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused .bal-steps__nav__item__icon{box-shadow:var(--bal-focus-shadow) !important}}@media(hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused.bal-steps__nav__item--inverted .bal-steps__nav__item__icon{box-shadow:var(--bal-focus-shadow-inverted) !important}}:root{--bal-steps-step-icon-background: var(--bal-color-white);--bal-steps-step-icon-background-active: var(--bal-color-primary);--bal-steps-step-icon-background-disabled: var(--bal-color-grey-2);--bal-steps-step-icon-background-done: var(--bal-color-primary);--bal-steps-step-icon-background-failed: var(--bal-color-danger);--bal-steps-step-button-progress-line-background: var(--bal-form-field-control-border-color);--bal-steps-step-button-passed-background: var(--bal-form-field-control-border-color-active);--bal-steps-step-button-carousel-item-background-after: var(--bal-form-field-control-border-color);--bal-steps-step-button-carousel-item-passed-background-after: var(--bal-form-field-control-border-color-active);--bal-steps-step-border-width: var(--bal-form-field-control-border-width);--bal-steps-step-border-style: var(--bal-form-field-control-border-style);--bal-steps-step-border-color: var(--bal-form-field-control-border-color);--bal-steps-step-border-color-active: var(--bal-form-field-control-border-color-active);--bal-steps-step-border-color-disabled: var(--bal-form-field-control-disabled-background);--bal-steps-step-border-color-done: var(--bal-form-field-control-border-color-active);--bal-steps-step-border-color-failed: var(--bal-color-danger);--bal-steps-step-icon-radius: var(--bal-radius-rounded);--bal-steps-step-button-progress-line-radius: var(--bal-radius-rounded);--bal-steps-step-button-carousel-item-radius: var(--bal-radius-rounded);--bal-steps-step-label-text-color: var(--bal-color-text-primary-light);--bal-steps-step-label-text-color-done: var(--bal-color-text-primary);--bal-steps-step-label-text-color-active: var(--bal-color-text-primary);--bal-steps-step-label-text-color-failed: var(--bal-color-text-danger);--bal-steps-step-label-text-color-disabled: var(--bal-color-text-grey);--bal-steps-step-icon-text-color: var(--bal-color-text-primary);--bal-steps-step-icon-text-color-active: var(--bal-color-text-white);--bal-steps-step-icon-text-color-disabled: var(--bal-color-text-grey);--bal-steps-step-icon-text-color-done: var(--bal-color-text-white);--bal-steps-step-icon-text-color-failed: var(--bal-color-text-white)}.bal-steps__nav__item{display:flex;box-sizing:border-box;gap:.5rem;flex-direction:column;flex-basis:1rem;flex-grow:1;flex-shrink:1;text-decoration:none;cursor:default;position:relative;min-width:3rem;padding-top:6px}.bal-steps__nav__item--hidden{display:none !important;visibility:hidden !important}.bal-steps__nav__item--clickable{cursor:pointer;pointer-events:all}.bal-steps__nav__item:not(:last-child)::after{content:" ";display:block;position:absolute;height:var(--bal-border-width-normal);left:50%;right:-50%;top:50%;background-color:var(--bal-steps-step-button-progress-line-background);border-radius:var(--bal-steps-step-button-progress-line-radius);margin-top:3px;margin-left:calc(1.5rem - var(--bal-border-width-normal));margin-right:1.25rem}@media screen and (min-width: 769px),print{.bal-steps__nav__item:not(:last-child)::after{top:1rem;margin-top:6px;margin-left:calc(1.5rem - var(--bal-border-width-normal));margin-right:1.5rem}}.bal-steps__nav__item--passed:not(:last-child)::after{background-color:var(--bal-steps-step-button-passed-background)}.bal-steps__nav__carousel__item{flex:1;min-width:3rem}.bal-steps__nav__carousel__item:not(:last-child)::after{content:" ";display:block;position:absolute;height:var(--bal-border-width-normal);left:50%;right:-50%;top:50%;background-color:var(--bal-steps-step-button-carousel-item-background-after);border-radius:var(--bal-steps-step-button-carousel-item-radius);margin-top:3px;margin-left:1.25rem;margin-right:1.25rem}@media screen and (min-width: 769px),print{.bal-steps__nav__carousel__item:not(:last-child)::after{top:1rem;margin-top:6px;margin-left:1.5rem;margin-right:1.5rem}}.bal-steps__nav__carousel__item--passed:not(:last-child)::after{background-color:var(--bal-steps-step-button-carousel-item-passed-background-after)}@media(hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused .bal-steps__nav__item__icon{box-shadow:var(--bal-focus-shadow) !important}}@media(hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused.bal-steps__nav__item--inverted .bal-steps__nav__item__icon{box-shadow:var(--bal-focus-shadow-inverted) !important}}:root{--bal-steps-step-icon-background: var(--bal-color-white);--bal-steps-step-icon-background-active: var(--bal-color-primary);--bal-steps-step-icon-background-disabled: var(--bal-color-grey-2);--bal-steps-step-icon-background-done: var(--bal-color-primary);--bal-steps-step-icon-background-failed: var(--bal-color-danger);--bal-steps-step-button-progress-line-background: var(--bal-form-field-control-border-color);--bal-steps-step-button-passed-background: var(--bal-form-field-control-border-color-active);--bal-steps-step-button-carousel-item-background-after: var(--bal-form-field-control-border-color);--bal-steps-step-button-carousel-item-passed-background-after: var(--bal-form-field-control-border-color-active);--bal-steps-step-border-width: var(--bal-form-field-control-border-width);--bal-steps-step-border-style: var(--bal-form-field-control-border-style);--bal-steps-step-border-color: var(--bal-form-field-control-border-color);--bal-steps-step-border-color-active: var(--bal-form-field-control-border-color-active);--bal-steps-step-border-color-disabled: var(--bal-form-field-control-disabled-background);--bal-steps-step-border-color-done: var(--bal-form-field-control-border-color-active);--bal-steps-step-border-color-failed: var(--bal-color-danger);--bal-steps-step-icon-radius: var(--bal-radius-rounded);--bal-steps-step-button-progress-line-radius: var(--bal-radius-rounded);--bal-steps-step-button-carousel-item-radius: var(--bal-radius-rounded);--bal-steps-step-label-text-color: var(--bal-color-text-primary-light);--bal-steps-step-label-text-color-done: var(--bal-color-text-primary);--bal-steps-step-label-text-color-active: var(--bal-color-text-primary);--bal-steps-step-label-text-color-failed: var(--bal-color-text-danger);--bal-steps-step-label-text-color-disabled: var(--bal-color-text-grey);--bal-steps-step-icon-text-color: var(--bal-color-text-primary);--bal-steps-step-icon-text-color-active: var(--bal-color-text-white);--bal-steps-step-icon-text-color-disabled: var(--bal-color-text-grey);--bal-steps-step-icon-text-color-done: var(--bal-color-text-white);--bal-steps-step-icon-text-color-failed: var(--bal-color-text-white)}.bal-steps__nav__item__icon{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;font-weight:var(--bal-font-weight-bold);border-radius:var(--bal-steps-step-icon-radius);font-size:var(--bal-text-size-small);height:1.5rem;width:1.5rem;left:calc(50% - .75rem);border:var(--bal-steps-step-border-width) var(--bal-steps-step-border-style) var(--bal-steps-step-border-color);background:var(--bal-steps-step-icon-background);color:var(--bal-steps-step-icon-text-color)}@media screen and (min-width: 769px),print{.bal-steps__nav__item__icon{height:2rem;width:2rem;left:calc(50% - 1rem);font-size:var(--bal-text-size-normal)}}.bal-steps__nav__item__icon--active{border-color:var(--bal-steps-step-border-color-active);background:var(--bal-steps-step-icon-background-active);color:var(--bal-steps-step-icon-text-color-active)}.bal-steps__nav__item__icon--done{border-color:var(--bal-steps-step-border-color-done);background:var(--bal-steps-step-icon-background-done);color:var(--bal-steps-step-icon-text-color-done)}.bal-steps__nav__item__icon--failed{border-color:var(--bal-steps-step-border-color-failed);background:var(--bal-steps-step-icon-background-failed);color:var(--bal-steps-step-icon-text-color-failed);font-size:var(--bal-text-size-normal)}@media screen and (min-width: 769px),print{.bal-steps__nav__item__icon--failed{font-size:var(--bal-text-size-large-tablet)}}@media screen and (min-width: 1024px){.bal-steps__nav__item__icon--failed{font-size:var(--bal-text-size-large-desktop)}}.bal-steps__nav__item__icon--disabled{border-color:var(--bal-steps-step-border-color-disabled);background:var(--bal-steps-step-icon-background-disabled);color:var(--bal-steps-step-icon-text-color-disabled)}@media(hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused .bal-steps__nav__item__icon{box-shadow:var(--bal-focus-shadow) !important}}@media(hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused.bal-steps__nav__item--inverted .bal-steps__nav__item__icon{box-shadow:var(--bal-focus-shadow-inverted) !important}}.bal-steps__nav__item__label{display:none}@media screen and (min-width: 769px),print{.bal-steps__nav__item__label{display:block;font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-text-size-normal);text-align:center;width:100%;hyphens:auto;user-select:none;color:var(--bal-steps-step-label-text-color)}.bal-steps__nav__item__label--done{color:var(--bal-steps-step-label-text-color-done)}.bal-steps__nav__item__label--active{color:var(--bal-steps-step-label-text-color-active)}.bal-steps__nav__item__label--failed{color:var(--bal-steps-step-label-text-color-failed)}.bal-steps__nav__item__label--disabled{color:var(--bal-steps-step-label-text-color-disabled)}}.bal-steps{display:block;position:static}.bal-steps__nav{-webkit-overflow-scrolling:touch;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.bal-step-item{width:100%;display:none}.bal-step-item--active{display:block}
+@media(hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused .bal-steps__nav__item__icon{box-shadow:var(--bal-focus-shadow) !important}}@media(hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused.bal-steps__nav__item--inverted .bal-steps__nav__item__icon{box-shadow:var(--bal-focus-shadow-inverted) !important}}@media(hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused .bal-steps__nav__item__icon{box-shadow:var(--bal-focus-shadow) !important}}@media(hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused.bal-steps__nav__item--inverted .bal-steps__nav__item__icon{box-shadow:var(--bal-focus-shadow-inverted) !important}}:root{--bal-steps-step-icon-background: var(--bal-color-white);--bal-steps-step-icon-background-active: var(--bal-color-primary);--bal-steps-step-icon-background-disabled: var(--bal-color-grey-2);--bal-steps-step-icon-background-done: var(--bal-color-primary);--bal-steps-step-icon-background-failed: var(--bal-color-danger);--bal-steps-step-button-progress-line-background: var(--bal-form-field-control-border-color);--bal-steps-step-button-passed-background: var(--bal-form-field-control-border-color-active);--bal-steps-step-button-carousel-item-background-after: var(--bal-form-field-control-border-color);--bal-steps-step-button-carousel-item-passed-background-after: var(--bal-form-field-control-border-color-active);--bal-steps-step-button-progress-line-background-light-blue: var(--bal-color-primary-2);--bal-steps-step-button-passed-background-light-blue: var(--bal-color-primary);--bal-steps-step-button-progress-line-background-purple: var(--bal-color-purple-2);--bal-steps-step-button-passed-background-purple: var(--bal-color-primary);--bal-steps-step-button-progress-line-background-green: var(--bal-color-green-2);--bal-steps-step-button-passed-background-green: var(--bal-color-primary);--bal-steps-step-button-progress-line-background-red: var(--bal-color-red-2);--bal-steps-step-button-passed-background-red: var(--bal-color-primary);--bal-steps-step-button-progress-line-background-yellow: var(--bal-color-yellow-2);--bal-steps-step-button-passed-background-yellow: var(--bal-color-primary);--bal-steps-step-border-width: var(--bal-form-field-control-border-width);--bal-steps-step-border-style: var(--bal-form-field-control-border-style);--bal-steps-step-border-color: var(--bal-form-field-control-border-color);--bal-steps-step-border-color-active: var(--bal-form-field-control-border-color-active);--bal-steps-step-border-color-disabled: var(--bal-form-field-control-disabled-background);--bal-steps-step-border-color-done: var(--bal-form-field-control-border-color-active);--bal-steps-step-border-color-failed: var(--bal-color-danger);--bal-steps-step-icon-radius: var(--bal-radius-rounded);--bal-steps-step-button-progress-line-radius: var(--bal-radius-rounded);--bal-steps-step-button-carousel-item-radius: var(--bal-radius-rounded);--bal-steps-step-label-text-color: var(--bal-color-text-primary-light);--bal-steps-step-label-text-color-done: var(--bal-color-text-primary);--bal-steps-step-label-text-color-active: var(--bal-color-text-primary);--bal-steps-step-label-text-color-failed: var(--bal-color-text-danger);--bal-steps-step-label-text-color-disabled: var(--bal-color-text-grey);--bal-steps-step-icon-text-color: var(--bal-color-text-primary);--bal-steps-step-icon-text-color-active: var(--bal-color-text-white);--bal-steps-step-icon-text-color-disabled: var(--bal-color-text-grey);--bal-steps-step-icon-text-color-done: var(--bal-color-text-white);--bal-steps-step-icon-text-color-failed: var(--bal-color-text-white)}.bal-steps__nav__item{display:flex;box-sizing:border-box;gap:.5rem;flex-direction:column;flex-basis:1rem;flex-grow:1;flex-shrink:1;text-decoration:none;cursor:default;position:relative;min-width:3rem;padding-top:6px}.bal-steps__nav__item--hidden{display:none !important;visibility:hidden !important}.bal-steps__nav__item--clickable{cursor:pointer;pointer-events:all}.bal-steps__nav__item:not(:last-child)::after{content:" ";display:block;position:absolute;height:var(--bal-border-width-normal);left:50%;right:-50%;top:50%;background-color:var(--bal-steps-step-button-progress-line-background);border-radius:var(--bal-steps-step-button-progress-line-radius);margin-top:3px;margin-left:calc(1.5rem - var(--bal-border-width-normal));margin-right:1.25rem}@media screen and (min-width: 769px),print{.bal-steps__nav__item:not(:last-child)::after{top:1rem;margin-top:6px;margin-left:calc(1.5rem - var(--bal-border-width-normal));margin-right:1.5rem}}.bal-steps__nav__item--passed:not(:last-child)::after{background-color:var(--bal-steps-step-button-passed-background)}.bal-steps__nav__carousel__item{flex:1;min-width:3rem}.bal-steps__nav__carousel__item:not(:last-child)::after{content:" ";display:block;position:absolute;height:var(--bal-border-width-normal);left:50%;right:-50%;top:50%;background-color:var(--bal-steps-step-button-carousel-item-background-after);border-radius:var(--bal-steps-step-button-carousel-item-radius);margin-top:3px;margin-left:1.25rem;margin-right:1.25rem}@media screen and (min-width: 769px),print{.bal-steps__nav__carousel__item:not(:last-child)::after{top:1rem;margin-top:6px;margin-left:1.5rem;margin-right:1.5rem}}.bal-steps__nav__carousel__item--passed:not(:last-child)::after{background-color:var(--bal-steps-step-button-carousel-item-passed-background-after)}.bal-steps__nav__carousel__item:not(:last-child).bal-steps__nav__carousel__item--color-light-blue::after{background-color:var(--bal-steps-step-button-progress-line-background-light-blue)}.bal-steps__nav__carousel__item:not(:last-child).bal-steps__nav__carousel__item--color-purple::after{background-color:var(--bal-steps-step-button-progress-line-background-purple)}.bal-steps__nav__carousel__item:not(:last-child).bal-steps__nav__carousel__item--color-red::after{background-color:var(--bal-steps-step-button-progress-line-background-red)}.bal-steps__nav__carousel__item:not(:last-child).bal-steps__nav__carousel__item--color-yellow::after{background-color:var(--bal-steps-step-button-progress-line-background-yellow)}.bal-steps__nav__carousel__item:not(:last-child).bal-steps__nav__carousel__item--color-green::after{background-color:var(--bal-steps-step-button-progress-line-background-green)}.bal-steps__nav__carousel__item--passed:not(:last-child).bal-steps__nav__carousel__item--color-light-blue::after{background-color:var(--bal-steps-step-button-passed-background-light-blue)}.bal-steps__nav__carousel__item--passed:not(:last-child).bal-steps__nav__carousel__item--color-purple::after{background-color:var(--bal-steps-step-button-passed-background-purple)}.bal-steps__nav__carousel__item--passed:not(:last-child).bal-steps__nav__carousel__item--color-red::after{background-color:var(--bal-steps-step-button-passed-background-red)}.bal-steps__nav__carousel__item--passed:not(:last-child).bal-steps__nav__carousel__item--color-yellow::after{background-color:var(--bal-steps-step-button-passed-background-yellow)}.bal-steps__nav__carousel__item--passed:not(:last-child).bal-steps__nav__carousel__item--color-green::after{background-color:var(--bal-steps-step-button-passed-background-green)}.bal-steps__nav__item--color-light-blue:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-light-blue)}.bal-steps__nav__item--color-light-blue.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-light-blue);border-color:var(--bal-steps-step-button-progress-line-background-light-blue);color:var(--bal-color-primary-4)}.bal-steps__nav__item--color-light-blue.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}.bal-steps__nav__item--color-purple:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-purple)}.bal-steps__nav__item--color-purple.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-purple);border-color:var(--bal-steps-step-button-progress-line-background-purple)}.bal-steps__nav__item--color-purple.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}.bal-steps__nav__item--color-green:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-green)}.bal-steps__nav__item--color-green.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-green);border-color:var(--bal-steps-step-button-progress-line-background-green)}.bal-steps__nav__item--color-green.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}.bal-steps__nav__item--color-yellow:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-yellow)}.bal-steps__nav__item--color-yellow.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-yellow);border-color:var(--bal-steps-step-button-progress-line-background-yellow)}.bal-steps__nav__item--color-yellow.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}.bal-steps__nav__item--color-red:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-red)}.bal-steps__nav__item--color-red.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-red);border-color:var(--bal-steps-step-button-progress-line-background-red)}.bal-steps__nav__item--color-red.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}@media(hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused .bal-steps__nav__item__icon{box-shadow:var(--bal-focus-shadow) !important}}@media(hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused.bal-steps__nav__item--inverted .bal-steps__nav__item__icon{box-shadow:var(--bal-focus-shadow-inverted) !important}}:root{--bal-steps-step-icon-background: var(--bal-color-white);--bal-steps-step-icon-background-active: var(--bal-color-primary);--bal-steps-step-icon-background-disabled: var(--bal-color-grey-2);--bal-steps-step-icon-background-done: var(--bal-color-primary);--bal-steps-step-icon-background-failed: var(--bal-color-danger);--bal-steps-step-button-progress-line-background: var(--bal-form-field-control-border-color);--bal-steps-step-button-passed-background: var(--bal-form-field-control-border-color-active);--bal-steps-step-button-carousel-item-background-after: var(--bal-form-field-control-border-color);--bal-steps-step-button-carousel-item-passed-background-after: var(--bal-form-field-control-border-color-active);--bal-steps-step-button-progress-line-background-light-blue: var(--bal-color-primary-2);--bal-steps-step-button-passed-background-light-blue: var(--bal-color-primary);--bal-steps-step-button-progress-line-background-purple: var(--bal-color-purple-2);--bal-steps-step-button-passed-background-purple: var(--bal-color-primary);--bal-steps-step-button-progress-line-background-green: var(--bal-color-green-2);--bal-steps-step-button-passed-background-green: var(--bal-color-primary);--bal-steps-step-button-progress-line-background-red: var(--bal-color-red-2);--bal-steps-step-button-passed-background-red: var(--bal-color-primary);--bal-steps-step-button-progress-line-background-yellow: var(--bal-color-yellow-2);--bal-steps-step-button-passed-background-yellow: var(--bal-color-primary);--bal-steps-step-border-width: var(--bal-form-field-control-border-width);--bal-steps-step-border-style: var(--bal-form-field-control-border-style);--bal-steps-step-border-color: var(--bal-form-field-control-border-color);--bal-steps-step-border-color-active: var(--bal-form-field-control-border-color-active);--bal-steps-step-border-color-disabled: var(--bal-form-field-control-disabled-background);--bal-steps-step-border-color-done: var(--bal-form-field-control-border-color-active);--bal-steps-step-border-color-failed: var(--bal-color-danger);--bal-steps-step-icon-radius: var(--bal-radius-rounded);--bal-steps-step-button-progress-line-radius: var(--bal-radius-rounded);--bal-steps-step-button-carousel-item-radius: var(--bal-radius-rounded);--bal-steps-step-label-text-color: var(--bal-color-text-primary-light);--bal-steps-step-label-text-color-done: var(--bal-color-text-primary);--bal-steps-step-label-text-color-active: var(--bal-color-text-primary);--bal-steps-step-label-text-color-failed: var(--bal-color-text-danger);--bal-steps-step-label-text-color-disabled: var(--bal-color-text-grey);--bal-steps-step-icon-text-color: var(--bal-color-text-primary);--bal-steps-step-icon-text-color-active: var(--bal-color-text-white);--bal-steps-step-icon-text-color-disabled: var(--bal-color-text-grey);--bal-steps-step-icon-text-color-done: var(--bal-color-text-white);--bal-steps-step-icon-text-color-failed: var(--bal-color-text-white)}.bal-steps__nav__item__icon{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;font-weight:var(--bal-font-weight-bold);border-radius:var(--bal-steps-step-icon-radius);font-size:var(--bal-text-size-small);height:1.5rem;width:1.5rem;left:calc(50% - .75rem);border:var(--bal-steps-step-border-width) var(--bal-steps-step-border-style) var(--bal-steps-step-border-color);background:var(--bal-steps-step-icon-background);color:var(--bal-steps-step-icon-text-color)}@media screen and (min-width: 769px),print{.bal-steps__nav__item__icon{height:2rem;width:2rem;left:calc(50% - 1rem);font-size:var(--bal-text-size-normal)}}.bal-steps__nav__item__icon--active{border-color:var(--bal-steps-step-border-color-active);background:var(--bal-steps-step-icon-background-active);color:var(--bal-steps-step-icon-text-color-active)}.bal-steps__nav__item__icon--done{border-color:var(--bal-steps-step-border-color-done);background:var(--bal-steps-step-icon-background-done);color:var(--bal-steps-step-icon-text-color-done)}.bal-steps__nav__item__icon--failed{border-color:var(--bal-steps-step-border-color-failed);background:var(--bal-steps-step-icon-background-failed);color:var(--bal-steps-step-icon-text-color-failed);font-size:var(--bal-text-size-normal)}@media screen and (min-width: 769px),print{.bal-steps__nav__item__icon--failed{font-size:var(--bal-text-size-large-tablet)}}@media screen and (min-width: 1024px){.bal-steps__nav__item__icon--failed{font-size:var(--bal-text-size-large-desktop)}}.bal-steps__nav__item__icon--disabled{border-color:var(--bal-steps-step-border-color-disabled);background:var(--bal-steps-step-icon-background-disabled);color:var(--bal-steps-step-icon-text-color-disabled);opacity:.6}@media(hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused .bal-steps__nav__item__icon{box-shadow:var(--bal-focus-shadow) !important}}@media(hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused.bal-steps__nav__item--inverted .bal-steps__nav__item__icon{box-shadow:var(--bal-focus-shadow-inverted) !important}}.bal-steps__nav__item__label{display:none}@media screen and (min-width: 769px),print{.bal-steps__nav__item__label{display:block;font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-text-size-normal);text-align:center;width:100%;hyphens:auto;user-select:none;color:var(--bal-steps-step-label-text-color)}.bal-steps__nav__item__label--done{color:var(--bal-steps-step-label-text-color-done)}.bal-steps__nav__item__label--active{color:var(--bal-steps-step-label-text-color-active)}.bal-steps__nav__item__label--failed{color:var(--bal-steps-step-label-text-color-failed)}.bal-steps__nav__item__label--disabled{color:var(--bal-steps-step-label-text-color-disabled);opacity:.6}}.bal-steps{display:block;position:static}.bal-steps__nav{-webkit-overflow-scrolling:touch;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.bal-step-item{width:100%;display:none}.bal-step-item--active{display:block}

package/dist/collection/components/bal-steps/bal-steps.js

@@ -83,6 +83,7 @@ export class Steps {
         this.store = [];
         this.options = [];
         this.clickable = true;
+        this.color = 'primary';
         this.debounce = 0;
         this.value = undefined;
     }
@@ -176,9 +177,9 @@ export class Steps {
                 .join(','), "data-label": this.store
                 .filter(t => this.isActive(t))
                 .map(t => t.label)
-                .join(',') }, h("nav", { role: "tablist", class: Object.assign({}, bemStepsNav.class()) }, h("bal-carousel", { class: Object.assign({}, bemStepsNav.element('carousel').class()), onBalChange: stopEventBubbling, controls: "small", "items-per-view": "auto", steps: 3 }, steps
+                .join(',') }, h("nav", { class: Object.assign({}, bemStepsNav.class()), role: "tablist", "aria-live": "polite" }, h("bal-carousel", { class: Object.assign({}, bemStepsNav.element('carousel').class()), htmlRole: '', onBalChange: stopEventBubbling, controls: "small", "items-per-view": "auto", steps: 3 }, steps
             .filter(step => !step.invisible)
-            .map(step => (h("bal-carousel-item", { key: step.value, class: Object.assign(Object.assign({}, bemStepsNav.element('carousel').element('item').class()), bemStepsNav.element('carousel').element('item').modifier('passed').class(step.passed)) }, h(StepButton, { item: step, isMobile: this.isMobile, clickable: this.clickable && !step.disabled, onSelectTab: this.onSelectTab })))))), h("div", { id: this.stepsId, class: Object.assign({}, block.element('steps__content').class()) }, h("slot", null))));
+            .map(step => (h("bal-carousel-item", { key: step.value, htmlRole: '', class: Object.assign(Object.assign(Object.assign({}, bemStepsNav.element('carousel').element('item').class()), bemStepsNav.element('carousel').element('item').modifier(`color-${this.color}`).class()), bemStepsNav.element('carousel').element('item').modifier('passed').class(step.passed)) }, h(StepButton, { item: step, color: this.color, isMobile: this.isMobile, clickable: this.clickable && !step.disabled, onSelectTab: this.onSelectTab })))))), h("div", { id: this.stepsId, class: Object.assign({}, block.element('steps__content').class()) }, h("slot", null))));
     }
     static get is() { return "bal-steps"; }
     static get originalStyleUrls() {
@@ -233,6 +234,29 @@ export class Steps {
                 "reflect": false,
                 "defaultValue": "true"
             },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BalProps.BalStepsColor",
+                    "resolved": "\"green\" | \"light-blue\" | \"primary\" | \"purple\" | \"red\" | \"yellow\"",
+                    "references": {
+                        "BalProps": {
+                            "location": "global",
+                            "id": "global::BalProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the color of the steps so it can be placed on colored backgrounds"
+                },
+                "attribute": "color",
+                "reflect": false,
+                "defaultValue": "'primary'"
+            },
             "debounce": {
                 "type": "number",
                 "mutable": false,

package/dist/collection/components/bal-steps/components/step-button.js

@@ -2,10 +2,10 @@ import { h } from "@stencil/core";
 import { BEM } from "../../../utils/bem";
 import { StepIcon } from "./step-icon";
 import { StepLabel } from "./step-label";
-export const StepButton = ({ item, isMobile, clickable, onSelectTab }) => {
+export const StepButton = ({ item, color, isMobile, clickable, onSelectTab }) => {
     const bemEl = BEM.block('steps').element('nav').element('item');
     if (item.invisible) {
         return;
     }
-    return (h("a", { role: "tab", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('done').class(item.done)), bemEl.modifier('active').class(item.active)), bemEl.modifier('failed').class(item.failed)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('clickable').class(clickable)), bemEl.modifier('passed').class(item.passed)), { 'bal-focusable': !item.disabled && !item.invisible }), "data-label": item.label, "data-value": item.value, "data-index": item.index, "data-testid": "bal-steps-option", "aria-disabled": `${item.disabled}`, href: item.href === '' ? 'javascript:;' : item.href, target: item.target, onClick: (ev) => onSelectTab(ev, item) }, h(StepIcon, { item: item, isMobile: isMobile }), h(StepLabel, { item: item })));
+    return (h("a", { role: "tab", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier(`color-${color}`).class()), bemEl.modifier('done').class(item.done)), bemEl.modifier('active').class(item.active)), bemEl.modifier('failed').class(item.failed)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('clickable').class(clickable)), bemEl.modifier('passed').class(item.passed)), { 'bal-focusable': !item.disabled && !item.invisible }), "data-label": item.label, "data-value": item.value, "data-index": item.index, "data-testid": "bal-steps-option", "aria-disabled": `${item.disabled}`, href: item.href === '' ? 'javascript:;' : item.href, target: item.target, onClick: (ev) => onSelectTab(ev, item) }, h(StepIcon, { item: item, isMobile: isMobile }), h(StepLabel, { item: item })));
 };

package/dist/collection/components/bal-tabs/bal-tab-item/bal-tab-item.js

@@ -15,6 +15,8 @@ export class TabItem {
         this.invisible = false;
         this.prevent = false;
         this.icon = undefined;
+        this.noPanel = false;
+        this.aria = undefined;
     }
     componentWillLoad() {
         this.inheritAttributes = inheritTrackingAttributes(this.el);
@@ -47,13 +49,17 @@ export class TabItem {
             prevent: this.prevent,
             navigate: this.balNavigate,
             trackingData: this.inheritAttributes,
+            noPanel: this.noPanel,
+            aria: this.aria,
         };
     }
     render() {
-        return (h(Host, { id: this.tabPanelID, role: "tabpanel", "aria-label": this.label, "aria-hidden": !this.isActive ? 'true' : 'false', tabindex: this.isActive ? '0' : '-1', class: {
+        const hasPanel = !this.noPanel;
+        const noPanelOrInactive = !this.isActive || this.noPanel;
+        return (h(Host, { id: this.tabPanelID, class: {
                 'bal-tab-item': true,
                 'bal-tab-item--active': this.isActive,
-            } }, h("slot", null)));
+            }, role: hasPanel ? 'tabpanel' : undefined, "aria-label": hasPanel ? this.label : undefined, "aria-hidden": noPanelOrInactive ? 'true' : 'false', tabindex: noPanelOrInactive ? '-1' : undefined, hidden: noPanelOrInactive ? true : undefined }, h("slot", null)));
     }
     static get is() { return "bal-tab-item"; }
     static get properties() {
@@ -242,6 +248,45 @@ export class TabItem {
                 "attribute": "icon",
                 "reflect": true,
                 "defaultValue": "undefined"
+            },
+            "noPanel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` the tab does not have a panel"
+                },
+                "attribute": "no-panel",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "aria": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "BalProps.BalTabItemAria",
+                    "resolved": "{ controls?: string; }",
+                    "references": {
+                        "BalProps": {
+                            "location": "global",
+                            "id": "global::BalProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "A11y attributes for the native tab element."
+                },
+                "defaultValue": "undefined"
             }
         };
     }

package/dist/collection/components/bal-tabs/bal-tabs.js

@@ -1,18 +1,19 @@
 import { __decorate, __metadata } from "tslib";
 import { Host, h, } from "@stencil/core";
 import { areArraysEqual } from "@baloise/web-app-utils";
-import { debounceEvent, deepReady, hasParent, isChildOfEventTarget, isDescendant, raf, transitionEndAsync, } from "../../utils/helpers";
+import { debounceEvent, deepReady, hasParent, isChildOfEventTarget, isDescendant, raf, transitionEndAsync, waitAfterFramePaint, } from "../../utils/helpers";
 import { ListenToConfig } from "../../utils/config";
 import { BEM } from "../../utils/bem";
 import { Logger } from "../../utils/log";
 import { newBalTabOption } from "./bal-tab.util";
 import { stopEventBubbling } from "../../utils/form-input";
 import { TabSelect } from "./components/tab-select";
-import { TabNav } from "./components/tab-nav";
 import { getComputedPadding } from "../../utils/style";
 import { ListenToBreakpoints, balBreakpoints } from "../../utils/breakpoints";
 import { ListenToMutation } from "../../utils/mutation";
 import { ListenToResize } from "../../utils/resize";
+import { TabNav } from "./components/tab-nav";
+import { toKebabCase } from "../../utils/string";
 export class Tabs {
     constructor() {
         this.tabsId = `bal-tabs-${TabsIds++}`;
@@ -34,8 +35,8 @@ export class Tabs {
                 this.store = newStore;
             }
             else if (!this.optionalTabSelection && !this.accordion && this.value === undefined && this.store.length > 0) {
-                const firstStep = this.store[0];
-                this.value = firstStep.value;
+                const firstTab = this.store[0];
+                this.value = firstTab.value;
             }
         };
         this.setActiveItem = () => {
@@ -47,7 +48,7 @@ export class Tabs {
         };
         this.setActiveContent = () => {
             if (this.options.length === 0) {
-                this.items.forEach(item => item.setActive(this.isActive(item)));
+                this.items.forEach(item => item.setActive(this.isTabActive(item)));
             }
         };
         this.getLineSize = (element, padding) => {
@@ -242,25 +243,26 @@ export class Tabs {
                 console.warn('[WARN] - Could not read tab options');
             }
         };
-        this.onSelectTab = async (ev, step) => {
-            if (step.prevent || step.disabled || !this.clickable) {
+        this.onSelectTab = async (ev, tab) => {
+            if (tab.prevent || tab.disabled || !this.clickable) {
                 stopEventBubbling(ev);
             }
-            if (!step.disabled && this.clickable) {
+            if (!tab.disabled && this.clickable) {
                 if (this.accordion) {
-                    if (step.value === this.value) {
+                    if (tab.value === this.value) {
                         this.toggleAccordionState();
                     }
                     else {
                         this.expandAccordion();
                     }
                 }
-                if (step.navigate) {
-                    step.navigate.emit(ev);
+                if (tab.navigate) {
+                    tab.navigate.emit(ev);
                 }
-                if (step.value !== this.value) {
-                    this.balChange.emit(step.value);
-                    await this.select(step);
+                if (tab.value !== this.value) {
+                    this.balChange.emit(tab.value);
+                    await this.select(tab);
+                    await this.focus(tab);
                 }
             }
         };
@@ -358,6 +360,26 @@ export class Tabs {
         isChildOfEventTarget(ev, this.el, () => this.animateLine());
         this.isUsedInNavbar(ev);
     }
+    listenToKeyDown(ev) {
+        if (this.isTabList) {
+            if (this.vertical !== false) {
+                if (ev.code === 'ArrowDown') {
+                    this.tabListSelectNext(ev);
+                }
+                else if (ev.code === 'ArrowUp') {
+                    this.tabListSelectPrevious(ev);
+                }
+            }
+            else {
+                if (ev.code === 'ArrowRight') {
+                    this.tabListSelectNext(ev);
+                }
+                else if (ev.code === 'ArrowLeft') {
+                    this.tabListSelectPrevious(ev);
+                }
+            }
+        }
+    }
     isUsedInNavbar(ev) {
         const target = ev.target;
         const parentNavbar = target.closest('bal-navbar');
@@ -409,11 +431,17 @@ export class Tabs {
      * PRIVATE METHODS
      * ------------------------------------------------------
      */
+    get isTabList() {
+        return this.store.filter(tab => !!tab.href).length === 0;
+    }
     get items() {
         return Array.from(this.el.querySelectorAll(`#${this.tabsId} > bal-tab-item`));
     }
-    isActive(step) {
-        return step.value === this.value;
+    isTabActive(tab) {
+        return tab.value === this.value;
+    }
+    isTabVisible(tab) {
+        return !tab.hidden;
     }
     parseVertical() {
         if (this.vertical === 'true' || this.vertical === '') {
@@ -451,6 +479,73 @@ export class Tabs {
     getCarouselElement() {
         return this.el.querySelector(`#${this.tabsId}-carousel`);
     }
+    /**
+     * PRIVATE Tab Navigation with Arrow Keys
+     * ------------------------------------------------------
+     */
+    findNextTab(previous = false) {
+        const indexOfActive = this.store.findIndex(t => this.isTabActive(t));
+        let tabs = this.store.map((tab, index) => ({
+            index,
+            visible: !tab.hidden && !tab.disabled,
+        }));
+        if (previous) {
+            tabs = tabs.reverse();
+        }
+        const visibleTabs = tabs.filter(t => t.visible).map(t => t.index);
+        const findNextTabReducer = (acc, index) => {
+            // found a new higher index need to break out
+            if (acc > indexOfActive) {
+                return acc;
+            }
+            if (index <= acc) {
+                return acc;
+            }
+            else {
+                return index;
+            }
+        };
+        const findPreviousTabReducer = (acc, index) => {
+            // found a new lower index need to break out
+            if (acc < indexOfActive) {
+                return acc;
+            }
+            if (index >= acc) {
+                return acc;
+            }
+            else {
+                return index;
+            }
+        };
+        const reducer = previous ? findPreviousTabReducer : findNextTabReducer;
+        const nextIndex = visibleTabs.reduce((acc, value) => reducer(acc, value), indexOfActive);
+        return this.store[nextIndex];
+    }
+    findPreviousTab() {
+        return this.findNextTab(true);
+    }
+    tabListSelectNext(ev) {
+        const nextTab = this.findNextTab();
+        if (nextTab) {
+            this.onSelectTab(ev, nextTab);
+        }
+    }
+    tabListSelectPrevious(ev) {
+        const previousTab = this.findPreviousTab();
+        if (previousTab) {
+            this.onSelectTab(ev, previousTab);
+        }
+    }
+    async focus(tab) {
+        await waitAfterFramePaint();
+        const hasKeyboardFocus = this.el.querySelector(`button.bal-focused`) !== null;
+        if (hasKeyboardFocus) {
+            const tabEl = this.el.querySelector(`#${this.tabsId}-button-${toKebabCase(tab.value)}`);
+            if (tabEl) {
+                tabEl.focus({ preventScroll: true });
+            }
+        }
+    }
     /**
      * RENDER
      * ------------------------------------------------------
@@ -467,13 +562,15 @@ export class Tabs {
         const tabs = this.store.map(tab => (Object.assign(Object.assign({}, tab), { active: tab.value === this.value })));
         const expanded = this.accordionState === 4 /* AccordionState.Expanded */ || this.accordionState === 8 /* AccordionState.Expanding */;
         const contentPart = expanded ? 'content expanded' : 'content';
+        const valueExists = this.value !== undefined && !!this.store.find(o => o.value === this.value);
+        const isLinkList = !this.isTabList;
         return (h(Host, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('navbar').class(this.inNavbar)), block.modifier('vertical').class(isVertical)), block.modifier('fullwidth').class(this.expanded || this.fullwidth)), block.modifier('accordion').class(this.accordion)), block.modifier('animated').class(this.animated)), block.modifier('expanding').class(this.accordionState === 8 /* AccordionState.Expanding */)), block.modifier('expanded').class(this.accordionState === 4 /* AccordionState.Expanded */)), block.modifier('collapsing').class(this.accordionState === 2 /* AccordionState.Collapsing */)), block.modifier('collapsed').class(this.accordionState === 1 /* AccordionState.Collapsed */)), "data-value": this.store
-                .filter(t => this.isActive(t))
+                .filter(t => this.isTabActive(t))
                 .map(t => t.value)
                 .join(','), "data-label": this.store
-                .filter(t => this.isActive(t))
+                .filter(t => this.isTabActive(t))
                 .map(t => t.label)
-                .join(',') }, isSelect ? (h(TabSelect, { value: this.value, items: tabs, onSelectTab: this.onSelectTab })) : (h(TabNav, { items: tabs, tabsId: this.tabsId, onSelectTab: this.onSelectTab, clickable: this.clickable, accordion: this.accordion, isAccordionOpen: this.isAccordionOpen, lineActive: this.value !== undefined, inverted: isInverted, animated: this.animated, context: this.context, border: this.border, spaceless: this.spaceless, expanded: this.expanded, isMobile: isMobile, isTouch: isTouch, isVertical: isVertical, inNavbar: this.inNavbar, hasCarousel: hasCarousel, iconPosition: this.iconPosition, verticalColSize: this.verticalColSize })), h("div", { part: contentPart, ref: contentEl => (this.contentEl = contentEl), class: Object.assign({}, block.element('tabs').element('content').class()) }, h("div", { id: this.tabsId, class: Object.assign({}, block.element('tabs').element('content').element('wrapper').class()), ref: contentElWrapper => (this.contentElWrapper = contentElWrapper) }, h("slot", null)))));
+                .join(',') }, isSelect ? (h(TabSelect, { value: this.value, items: tabs, onSelectTab: this.onSelectTab })) : (h(TabNav, { items: tabs, isLinkList: isLinkList, tabsId: this.tabsId, clickable: this.clickable, accordion: this.accordion, isAccordionOpen: this.isAccordionOpen, lineActive: valueExists, inverted: isInverted, animated: this.animated, context: this.context, border: this.border, spaceless: this.spaceless, expanded: this.expanded, isMobile: isMobile, isTouch: isTouch, isVertical: isVertical, inNavbar: this.inNavbar, hasCarousel: hasCarousel, iconPosition: this.iconPosition, verticalColSize: this.verticalColSize, onSelectTab: this.onSelectTab })), h("div", { part: contentPart, ref: contentEl => (this.contentEl = contentEl), class: Object.assign({}, block.element('tabs').element('content').class()) }, h("div", { id: this.tabsId, class: Object.assign({}, block.element('tabs').element('content').element('wrapper').class()), ref: contentElWrapper => (this.contentElWrapper = contentElWrapper) }, h("slot", null)))));
     }
     static get is() { return "bal-tabs"; }
     static get originalStyleUrls() {
@@ -586,7 +683,7 @@ export class Tabs {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Steps can be passed as a property or through HTML markup."
+                    "text": "Tabs can be passed as a property or through HTML markup."
                 },
                 "defaultValue": "[]"
             },
@@ -683,7 +780,7 @@ export class Tabs {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If `true` the tabs or steps can be clicked."
+                    "text": "If `true` the tabs or tabs can be clicked."
                 },
                 "attribute": "clickable",
                 "reflect": false,
@@ -1072,6 +1169,12 @@ export class Tabs {
                 "target": "window",
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "keydown",
+                "method": "listenToKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }];
     }
 }

package/dist/collection/components/bal-tabs/components/tab-button.js

@@ -2,7 +2,9 @@ import { h } from "@stencil/core";
 import { BEM } from "../../../utils/bem";
 import { TabIcon } from "./tab-icon";
 import { TabLabel } from "./tab-label";
-export const TabButton = ({ item, tabsId, isFirst, isLast, isMobile, isVertical, accordion, isAccordionOpen, inverted, expanded, spaceless, clickable, iconPosition, context, onSelectTab, }) => {
+import { toKebabCase } from "../../../utils/string";
+export const TabButton = ({ item, tabsId, isFirst, isLast, isMobile, isVertical, accordion, isAccordionOpen, isLinkList, inverted, expanded, spaceless, clickable, iconPosition, context, onSelectTab, }) => {
+    var _a;
     const bemEl = BEM.block('tabs').element('nav').element('item');
     if (item.invisible) {
         return;
@@ -15,13 +17,23 @@ export const TabButton = ({ item, tabsId, isFirst, isLast, isMobile, isVertical,
     const hasLabelBubble = (!hasIcon && hasBubble && !accordion) ||
         (hasBubble && !isMobile && iconPosition === 'horizontal' && !accordion) ||
         (hasBubble && isVertical && !accordion);
-    const TagType = item.href === undefined || item.href === '' ? 'button' : 'a';
-    const attrs = TagType === 'button'
-        ? { type: 'button' }
+    const isTabButton = item.href === undefined || item.href === '';
+    const TagType = isTabButton ? 'button' : 'a';
+    const attrs = isTabButton
+        ? {
+            'type': 'button',
+            'role': 'tab',
+            'aria-controls': ((_a = item.aria) === null || _a === void 0 ? void 0 : _a.controls) || item.tabPanelID || undefined,
+            'aria-expanded': item.active ? 'true' : 'false',
+            'aria-disabled': `${item.disabled}`,
+            'aria-label': item.label,
+        }
         : {
             href: item.href,
             target: item.target,
         };
-    return (h(TagType, Object.assign({ id: `${tabsId}-button-${TabButtonIds++}`, role: "tab", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('active').class(item.active)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('clickable').class(clickable)), bemEl.modifier('accordion').class(accordion)), bemEl.modifier('inverted').class(inverted)), bemEl.modifier('expanded').class(expanded)), bemEl.modifier('spaceless').class(spaceless)), bemEl.modifier('first').class(isFirst)), bemEl.modifier('last').class(isLast)), bemEl.modifier('passed').class(item.passed)), bemEl.modifier('vertical').class(isVertical)), bemEl.modifier(`context-${context}`).class(context !== undefined)), bemEl.modifier(`icon-position-${iconPosition}`).class(iconPosition !== 'horizontal')), { 'bal-focusable': !item.disabled && !item.invisible }), draggable: false, "data-tabs": tabsId, "data-label": item.label, "data-value": item.value, "data-index": item.index, "data-testid": "bal-tabs-item", "aria-selected": item.active ? 'true' : 'false', "aria-disabled": `${item.disabled}`, "aria-label": item.label, "aria-controls": item.tabPanelID }, attrs, { onClick: (ev) => onSelectTab(ev, item) }), item.icon ? (h(TabIcon, { accordion: false, item: item, isMobile: isMobile, hasBubble: hasIconBubble, inverted: inverted })) : (''), h(TabLabel, { item: item, isMobile: isMobile, isVertical: isVertical, hasBubble: hasLabelBubble, inverted: inverted, context: context }), accordion && !item.href ? (h(TabIcon, { accordion: accordion, isAccordionOpen: isAccordionOpen, item: item, isMobile: isMobile, hasBubble: hasAccordionIconBubble, inverted: inverted })) : ('')));
+    if (!isLinkList) {
+        attrs['tabindex'] = item.active ? '0' : '-1';
+    }
+    return (h(TagType, Object.assign({ id: `${tabsId}-button-${toKebabCase(item.value)}`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('active').class(item.active)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('clickable').class(clickable)), bemEl.modifier('accordion').class(accordion)), bemEl.modifier('inverted').class(inverted)), bemEl.modifier('expanded').class(expanded)), bemEl.modifier('spaceless').class(spaceless)), bemEl.modifier('first').class(isFirst)), bemEl.modifier('last').class(isLast)), bemEl.modifier('passed').class(item.passed)), bemEl.modifier('vertical').class(isVertical)), bemEl.modifier(`context-${context}`).class(context !== undefined)), bemEl.modifier(`icon-position-${iconPosition}`).class(iconPosition !== 'horizontal')), { 'bal-focusable': !item.disabled && !item.invisible }), draggable: false, "data-tabs": tabsId, "data-label": item.label, "data-value": item.value, "data-index": item.index, "data-testid": "bal-tabs-item", "aria-selected": !isTabButton ? undefined : item.active ? 'true' : 'false' }, attrs, { onClick: (ev) => onSelectTab(ev, item) }), item.icon ? (h(TabIcon, { accordion: false, item: item, isMobile: isMobile, hasBubble: hasIconBubble, inverted: inverted })) : (''), h(TabLabel, { item: item, isMobile: isMobile, isVertical: isVertical, hasBubble: hasLabelBubble, inverted: inverted, context: context }), accordion && !item.href ? (h(TabIcon, { accordion: accordion, isAccordionOpen: isAccordionOpen, item: item, isMobile: isMobile, hasBubble: hasAccordionIconBubble, inverted: inverted })) : ('')));
 };
-let TabButtonIds = 0;

package/dist/collection/components/bal-tabs/components/tab-nav.js

@@ -2,10 +2,10 @@ import { h } from "@stencil/core";
 import { BEM } from "../../../utils/bem";
 import { stopEventBubbling } from "../../../utils/form-input";
 import { TabButton } from "./tab-button";
-export const TabNav = ({ items, tabsId, hasCarousel, isVertical, inNavbar, isMobile, isTouch, lineActive, border, accordion, isAccordionOpen, inverted, clickable, animated, spaceless, expanded, verticalColSize, iconPosition, context, onSelectTab, }) => {
+export const TabNav = ({ items, tabsId, hasCarousel, isVertical, inNavbar, isMobile, isTouch, lineActive, isLinkList, border, accordion, isAccordionOpen, inverted, clickable, animated, spaceless, expanded, verticalColSize, iconPosition, context, onSelectTab, }) => {
     const bemEl = BEM.block('tabs').element('nav');
     const tabs = items.filter(tab => !tab.invisible);
     const isFullHeight = inNavbar && !isTouch;
-    const Button = ({ item, index }) => (h(TabButton, { item: item, tabsId: tabsId, isFirst: index === 0, isLast: index === tabs.length - 1, isMobile: isMobile, isVertical: isVertical, iconPosition: iconPosition, spaceless: spaceless, inverted: inverted, accordion: accordion, isAccordionOpen: isAccordionOpen, context: context, expanded: expanded, clickable: clickable && !item.disabled, onSelectTab: onSelectTab }));
-    return (h("div", { role: "tablist", id: `${tabsId}-nav`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier(`full-height`).class(isFullHeight)), bemEl.modifier(`border`).class(border)), bemEl.modifier(`animated`).class(animated)), bemEl.modifier(`vertical`).class(isVertical)), bemEl.modifier(`expanded`).class(expanded && !isVertical)), bemEl.modifier(`vertical-col-${verticalColSize}`).class(isVertical)) }, hasCarousel ? (h("bal-carousel", { id: `${tabsId}-carousel`, class: Object.assign({}, bemEl.element('carousel').class()), fullHeight: isFullHeight, border: border, inverted: inverted, controls: "small", "items-per-view": "auto", steps: 3, onBalChange: stopEventBubbling }, tabs.map((tab, index) => (h("bal-carousel-item", { key: tab.value, class: Object.assign(Object.assign({}, bemEl.element('carousel').element('item').class()), bemEl.element('carousel').element('item').modifier('expanded').class(expanded)) }, h(Button, { item: tab, index: index })))), h("div", { id: `${tabsId}-line`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.element('line').class()), bemEl.element('line').modifier(`active`).class(lineActive)), bemEl.element('line').modifier(`inverted`).class(inverted)), bemEl.element('line').modifier(`animated`).class(animated)), bemEl.element('line').modifier(`vertical`).class(isVertical)) }))) : (tabs.map((tab, index) => h(Button, { item: tab, index: index }))), !hasCarousel ? (h("div", { id: `${tabsId}-border`, class: Object.assign(Object.assign(Object.assign({}, bemEl.element('border').class()), bemEl.element('border').modifier(`inverted`).class(inverted)), bemEl.element('border').modifier(`vertical`).class(isVertical)) })) : (''), !hasCarousel ? (h("div", { id: `${tabsId}-line`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.element('line').class()), bemEl.element('line').modifier(`active`).class(lineActive)), bemEl.element('line').modifier(`inverted`).class(inverted)), bemEl.element('line').modifier(`animated`).class(animated)), bemEl.element('line').modifier(`vertical`).class(isVertical)) })) : ('')));
+    const Button = ({ item, index }) => (h(TabButton, { item: item, isLinkList: isLinkList, tabsId: tabsId, isFirst: index === 0, isLast: index === tabs.length - 1, isMobile: isMobile, isVertical: isVertical, iconPosition: iconPosition, spaceless: spaceless, inverted: inverted, accordion: accordion, isAccordionOpen: isAccordionOpen, context: context, expanded: expanded, clickable: clickable && !item.disabled, onSelectTab: onSelectTab }));
+    return (h("div", { id: `${tabsId}-nav`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier(`full-height`).class(isFullHeight)), bemEl.modifier(`border`).class(border)), bemEl.modifier(`animated`).class(animated)), bemEl.modifier(`vertical`).class(isVertical)), bemEl.modifier(`expanded`).class(expanded && !isVertical)), bemEl.modifier(`vertical-col-${verticalColSize}`).class(isVertical)) }, hasCarousel ? (h("bal-carousel", { id: `${tabsId}-carousel`, class: Object.assign({}, bemEl.element('carousel').class()), htmlRole: 'tablist', fullHeight: isFullHeight, border: border, inverted: inverted, controls: "small", "items-per-view": "auto", steps: 3, onBalChange: stopEventBubbling }, tabs.map((tab, index) => (h("bal-carousel-item", { key: tab.value, htmlRole: '', class: Object.assign(Object.assign({}, bemEl.element('carousel').element('item').class()), bemEl.element('carousel').element('item').modifier('expanded').class(expanded)) }, h(Button, { item: tab, index: index })))), h("div", { id: `${tabsId}-line`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.element('line').class()), bemEl.element('line').modifier(`active`).class(lineActive)), bemEl.element('line').modifier(`inverted`).class(inverted)), bemEl.element('line').modifier(`animated`).class(animated)), bemEl.element('line').modifier(`vertical`).class(isVertical)) }))) : (tabs.map((tab, index) => h(Button, { item: tab, index: index }))), !hasCarousel ? (h("div", { id: `${tabsId}-border`, class: Object.assign(Object.assign(Object.assign({}, bemEl.element('border').class()), bemEl.element('border').modifier(`inverted`).class(inverted)), bemEl.element('border').modifier(`vertical`).class(isVertical)) })) : (''), !hasCarousel ? (h("div", { id: `${tabsId}-line`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.element('line').class()), bemEl.element('line').modifier(`active`).class(lineActive)), bemEl.element('line').modifier(`inverted`).class(inverted)), bemEl.element('line').modifier(`animated`).class(animated)), bemEl.element('line').modifier(`vertical`).class(isVertical)) })) : ('')));
 };