@energycap/components 0.46.16 → 0.46.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@energycap/components",
-  "version": "0.46.16",
+  "version": "0.46.17",
   "schematics": "./schematics/collection.json",
   "dependencies": {
     "tslib": "^2.0.0"

package/src/styles/mixins/_button-base.scss

@@ -37,11 +37,16 @@ $button-padding-x: 0.5rem;
   }
 
   &:focus {
-    outline: none;
+    outline: 2px solid transparent;
+    outline-offset: 2px;
     position: relative;
     z-index: 1;
   }
 
+  &:focus-visible {
+    outline-color: var(--ec-border-color-focus);
+  }
+
   &:disabled {
     background-color: var(--ec-background-color-disabled);
     border: 1px solid var(--ec-form-control-border-color-disabled);

package/src/styles/mixins/_form-control-base.scss

@@ -125,6 +125,8 @@ $checkbox-indicator-size: $form-control-icon-size;
   } @else if $state == focus {
     border-color: var(--ec-form-control-border-color-focus);
     box-shadow: var(--ec-form-control-box-shadow-focus);
+    outline: 2px solid transparent;
+    outline-offset: 2px;
     position: relative;
     z-index: 1;
 
@@ -342,7 +344,14 @@ $checkbox-indicator-size: $form-control-icon-size;
   textarea:focus,
   input:focus,
   select:focus {
-    outline: none;
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+
+  textarea:focus-visible,
+  input:focus-visible,
+  select:focus-visible {
+    outline-color: var(--ec-border-color-focus);
   }
 
   .sr-only {

package/src/styles/mixins/_login.scss

@@ -62,6 +62,7 @@
 
   #{$form-submit-button-selector} {
     --ec-button-color-primary: var(--ec-color-brand-green);
+    --ec-button-color-active: var(--ec-color-primary-dark);
     margin-left: auto;
   }
   

package/src/styles/mixins/_menu-base.scss

@@ -68,12 +68,17 @@ $menu-item-padding: get-item-padding($menu-item-height, $menu-item-line-height);
     }
 
     &:focus .item-wrapper{
-      outline: none;
-      background-color: var(--ec-color-disabled-dark);
+      outline: 2px solid transparent;
+      outline-offset: -2px;
+      background-color: var(--ec-background-color-selected);
       position: relative;
       z-index: 1;
     }
 
+    &:focus-visible .item-wrapper{
+      outline-color: var(--ec-border-color-focus);
+    }
+
     &.is-disabled .item-wrapper {
       color: var(--ec-color-disabled-dark);
       opacity: var(--ec-form-control-opacity-disabled);

package/src/styles/mixins/_tabs-base.scss

@@ -17,6 +17,21 @@
     }
 }
 
+/// Hover/focus treatment for a tab. Exposed separately from `tab` so a host can re-apply it when
+/// the pointer is over something overlaying the tab (e.g. the closable tab's close button).
+@mixin tab-hover($style: tabs) {
+    @if $style =='pills' or $style =='tiles' {
+        border-color: var(--ec-tab-border-color-active, var(--ec-border-color-focus));
+        box-shadow: 0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));
+        position: relative;
+        z-index: 1;
+    }
+
+    @else {
+        border-color: var(--ec-tab-border-color-active, var(--ec-border-color-focus));
+    }
+}
+
 @mixin tab($style: tabs) {
     $height: 2rem;
 
@@ -61,28 +76,18 @@
 
     &:hover,
     &:focus {
-        // Override the default browser focus ring
-        outline: none;
-
-        @if $style =='pills' {
-            border-color: var(--ec-tab-border-color-active, var(--ec-border-color-focus));
-            box-shadow: 0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));
-            position: relative;
-            z-index: 1;
-
-        }
-
-        @else if $style =='tiles' {
-            border-color: var(--ec-tab-border-color-active, var(--ec-border-color-focus));
-            box-shadow: 0 0 0 1px var(--ec-tab-border-color-active, var(--ec-border-color-focus));
-            position: relative;
-            z-index: 1;
+        @include tab-hover($style);
+    }
 
-        }
+    // Transparent outline only on actual focus (not hover) so forced-colors doesn't
+    // promote it to a visible ring on hover; keyboard ring set in &:focus-visible below.
+    &:focus {
+        outline: 2px solid transparent;
+        outline-offset: -2px;
+    }
 
-        @else {
-            border-color: var(--ec-tab-border-color-active, var(--ec-border-color-focus));
-        }
+    &:focus-visible {
+        outline-color: var(--ec-border-color-focus);
     }
 
     &.is-disabled {

package/src/styles/mixins/_text.scss

@@ -83,7 +83,11 @@
   }
 
   &:focus {
-    outline: none;
-    text-decoration: underline;
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+  }
+
+  &:focus-visible {
+    outline-color: var(--ec-border-color-focus);
   }
 }

package/types/energycap-components.d.ts

@@ -211,6 +211,10 @@ interface NavItem extends LinkItem {
      * Controls badge visibility. If undefined or true, badge will show (if badge property is set)
      */
     badgeVisible?: boolean;
+    /**
+     * Displays a button that allows the tab to be closed
+     */
+    closable?: boolean;
 }
 
 declare class NavGroup {
@@ -247,6 +251,8 @@ declare class TabsComponent {
     tabStyle: 'tabs' | 'pills' | 'tiles';
     /** The tabs group */
     tabs: NavGroup;
+    /** Emits the removed tab when its close button is clicked */
+    tabClosed: EventEmitter<NavItem>;
     constructor();
     /**
      * Set the selected tab to the one the user clicked on pressed enter
@@ -254,8 +260,10 @@ declare class TabsComponent {
      * has a link, navigate to that link.
      */
     selectTab(event: Event, tab: NavItem): void;
+    /** Remove a closable tab and select its nearest neighbor when necessary */
+    closeTab(event: Event, tab: NavItem): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TabsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TabsComponent, "ec-tabs", never, { "id": { "alias": "id"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "tabStyle": { "alias": "tabStyle"; "required": false; }; "tabs": { "alias": "tabGroup"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TabsComponent, "ec-tabs", never, { "id": { "alias": "id"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "tabStyle": { "alias": "tabStyle"; "required": false; }; "tabs": { "alias": "tabGroup"; "required": false; }; }, { "tabClosed": "tabClosed"; }, never, never, false, never>;
 }
 
 /**