@neovici/cosmoz-tabs 5.1.0 → 5.2.1

package/cosmoz-tab-card.js

@@ -60,7 +60,7 @@ const CosmozTabCard = ({ heading }) => html`
 </style>
 
 <div id="header" part="header">
-	<h1 class="heading">${ heading }<slot name="after-title"></slot></h1>
+	<h1 class="heading" part="heading">${ heading }<slot name="after-title"></slot></h1>
 	<slot name="card-actions"></slot>
 </div>
 

package/cosmoz-tabs.js

@@ -17,8 +17,8 @@ using tabs.
 
 The following custom properties and mixins are available for styling:
 
-Custom property | Description | Default
-----------------|-------------|----------
+Custom property                     | Description                 | Default
+------------------------------------|-----------------------------|----------
 `--cosmoz-tabs-selection-bar-color` | Color for the selection bar | `#00b4db`
 
 */
@@ -28,6 +28,7 @@ const Tabs = host => {
 	return html`
 		<style>${ style }</style>
 		<div class="tabs" part="tabs" role="tablist">
+			<slot name="tabs"></slot>
 			${ tabs.map(renderTab(opts)) }
 		</div>
 

package/lib/render.js

@@ -12,17 +12,20 @@ const style = `
 }
 
 .tabs {
-	background-color: #fff;
-	margin-bottom: 3px;
-	box-shadow: var(--cosmoz-shadow-2dp, var(--shadow-elevation-2dp_-_box-shadow, 0 2px 4px 0 #e5e5e5));
+	background-color: var(--cosmoz-tabs-bg-color, #fff);
+	color: var(--cosmoz-tabs-text-color, #606c7e);
+	font-family: var(--cosmoz-tabs-font-family, inherit);
+	font-size: var(--cosmoz-tabs-font-size, 13px);
+	line-height: var(--cosmoz-tabs-line-height, 19px);
+	box-shadow: var(--cosmoz-tabs-shadow, inset 0 -1px 0 0 #e5e6eb);
 	flex: none;
 	display: flex;
 	align-items: center;
 	overflow-x:  auto;
 	-webkit-overflow-scrolling: auto;
 	scrollbar-width: none;
+	padding-bottom: 1px;
 }
-
 .tabs::-webkit-scrollbar {
 	display: none;
 }
@@ -30,16 +33,15 @@ const style = `
 .tab {
 	position: relative;
 	display: flex;
+	box-sizing: border-box;
 	align-items: center;
 	justify-content: center;
 	flex: 1;
-	padding: 0.767em 24px;
+	padding: 11px 24px;
 	color: inherit;
 	text-decoration: none;
 	text-align: center;
-	font-size: 1.0714286em;
-	line-height: 1.27;
-	font-weight: 300;
+	letter-spacing: 0.3px;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	cursor: pointer;
@@ -48,12 +50,14 @@ const style = `
 }
 
 .tab[aria-selected] {
-	box-shadow: inset 0 -1.4px 0px 0px var(--cosmoz-tabs-selection-bar-color, #00b4db);
-	font-weight: 400;
+	color: var(--cosmoz-tabs-accent-color, #508aef);
+	box-shadow: inset 0 -3px 0px 0px var(--cosmoz-tabs-accent-color, #508aef);
+	font-weight: 700;
+	letter-spacing: 0;
 }
 
 .tab[disabled] {
-	opacity: 0.65;
+	opacity: 0.4;
 	pointer-events: none;
 }
 
@@ -101,10 +105,11 @@ const style = `
 		selectedTab,
 		onSelect,
 		href
-	}) => tab => {
+	}) => (tab, i, tabs) => {
 		const isSelected = selectedTab === tab,
 			icon = getIcon(tab, isSelected);
 		return html`<a class="tab" tabindex="-1" role="tab"
+			part=${ ['tab', i === 0 && 'first-tab', i === tabs.length - 1 && 'last-tab', isSelected && 'selected-tab'].filter(Boolean).join(' ') }
 			?hidden=${ tab.hidden } ?disabled=${ tab.disabled }
 			?aria-selected=${ isSelected }
 			@click=${ onSelect }

package/lib/use-tabs.js

@@ -1,13 +1,8 @@
-import {
-	useState, useEffect, useMemo, useCallback
-} from 'haunted';
+import { useState, useEffect, useMemo, useCallback } from 'haunted';
 import { notifyProperty } from '@neovici/cosmoz-utils/lib/hooks/use-notify-property';
-import {
-	useHashParam, link
-} from './use-hash-param';
-import {
-	choose, collect, getName, isValid
-} from './utils';
+import { useHashParam, link } from './use-hash-param';
+import { choose, collect, getName, isValid } from './utils';
+import computeScroll from 'compute-scroll-into-view';
 
 const useTabSelectedEffect = (host, selectedTab) => {
 		useEffect(() => {
@@ -37,6 +32,17 @@ const useTabSelectedEffect = (host, selectedTab) => {
 		}, [selectedTab]);
 	},
 
+	useAutoScroll = (host, selectedTab) => {
+		useEffect(() => {
+			const el = host.shadowRoot.querySelector('a[aria-selected]');
+			if (!el) {
+				return;
+			}
+			computeScroll(el, { block: 'nearest', inline: 'center', boundary: el.parentElement })
+				.forEach(({ el, top, left }) => el.scroll({ top, left, behavior: 'smooth' }));
+		}, [selectedTab]);
+	},
+
 	useTabs = host => {
 		const {
 				selected, hashParam
@@ -62,9 +68,7 @@ const useTabSelectedEffect = (host, selectedTab) => {
 			return () => host.removeEventListener('cosmoz-tab-alter', onTabAlter);
 		}, [selectedTab]);
 
-		useEffect(() => {
-			host.shadowRoot.querySelector('a[aria-selected]')?.scrollIntoView?.({ inline: 'center', behavior: 'smooth' });
-		}, [selectedTab]);
+		useAutoScroll(host, selectedTab);
 
 		const href = useCallback(tab => isValid(tab) ? link(hashParam, getName(tab)) : undefined, [hashParam]);
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@neovici/cosmoz-tabs",
-	"version": "5.1.0",
+	"version": "5.2.1",
 	"description": "A multi views container element that allow navigation between the views using tabs or an accordion.",
 	"keywords": [
 		"web-components"
@@ -57,6 +57,7 @@
 		"@neovici/cosmoz-utils": "^3.21.0",
 		"@polymer/iron-icon": "^3.0.0",
 		"@polymer/iron-icons": "^3.0.0",
+		"compute-scroll-into-view": "^1.0.17",
 		"haunted": "^4.8.0",
 		"lit-html": "^1.4.0"
 	},