@grantcodes/ui 2.15.6 → 2.16.0

package/src/components/tabs/tabs.component.js

@@ -1,121 +1,119 @@
-import { html, LitElement } from "lit";
-import { ifDefined } from "lit/directives/if-defined.js";
-import focusRingStyles from "../../lib/styles/focus-ring.css" with {
-	type: "css",
-};
-import tabsStyles from "./tabs.css" with { type: "css" };
-import { GrantCodesTab } from "./tab.component.js";
-import { GrantCodesTabsButton } from "./internal/tabs-button.component.js";
-import "./internal/tabs-button.js";
-import { generateId } from "../../lib/generate-id.js";
+import { html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import focusRingStyles from '../../lib/styles/focus-ring.css' with { type: 'css' };
+import { GrantCodesTabsButton } from './internal/tabs-button.component.js';
+import { GrantCodesTab } from './tab.component.js';
+import tabsStyles from './tabs.css' with { type: 'css' };
+import './internal/tabs-button.js';
+import { generateId } from '../../lib/generate-id.js';
 
 export class GrantCodesTabs extends LitElement {
-	// Styles are scoped to this element: they won't conflict with styles
-	// on the main page or in other components. Styling API can be exposed
-	// via CSS custom properties.
-	static styles = [focusRingStyles, tabsStyles];
-
-	static properties = {
-		label: { type: String },
-		_focusedTabIndex: { type: Number, state: true },
-	};
-
-	constructor() {
-		super();
-
-		this.label = "";
-		this._focusedTabIndex = -1;
-
-		if (!this.id) {
-			this.id = generateId("tabs");
-		}
-	}
-
-	/** @type {import("./tab.component.js").GrantCodesTab[]} */
-	tabs = [];
-
-	/** @type {import("./internal/tabs-button.component.js").GrantCodesTabsButton[]} */
-	tabButtons = [];
-
-	get activeTab() {
-		return this.tabs.find((tab) => tab.active) || null;
-	}
-
-	set activeTab(tab) {
-		// Ignore setting activeTab to null. As long as there are children, one tab
-		// must be selected.
-		this.tabs.forEach((t, i) => {
-			if (t === tab) {
-				t.active = true;
-				this._focusedTabIndex = i;
-			} else {
-				t.active = false;
-			}
-		});
-		this.requestUpdate();
-	}
-
-	initializeTabs() {
-		this.tabs.forEach((tab, i) => {
-			tab.index = i;
-			tab.containerId = this.id;
-		});
-
-		// If no tab is active, default to the first tab.
-		if (this.activeTab == null) {
-			this._focusedTabIndex = 0;
-			this.activeTab = this.tabs[0];
-		}
-	}
-
-	firstUpdated() {
-		const slot = this.renderRoot.querySelector("slot");
-		this.tabs = slot
-			? slot.assignedElements().filter((el) => el.tagName === "GRANTCODES-TAB")
-			: [];
-		this.tabButtons = Array.from(
-			this.renderRoot.querySelectorAll("grantcodes-tabs-button"),
-		);
-		this.initializeTabs();
-	}
-
-	handleTabKeyDown(e) {
-		if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
-			e.preventDefault();
-			const tabs = this.tabs;
-			const nextIndex =
-				e.key === "ArrowRight"
-					? (this._focusedTabIndex + 1) % tabs.length
-					: (this._focusedTabIndex - 1 + tabs.length) % tabs.length;
-
-			// Focus the next tab button.
-			const tabButton = this.tabButtons[nextIndex];
-			if (tabButton) {
-				tabButton.focus();
-				this._focusedTabIndex = nextIndex;
-			}
-		}
-	}
-
-	renderTabButtons() {
-		return this.tabs.map(
-			(tab, i) => html`
+  // Styles are scoped to this element: they won't conflict with styles
+  // on the main page or in other components. Styling API can be exposed
+  // via CSS custom properties.
+  static styles = [focusRingStyles, tabsStyles];
+
+  static properties = {
+    label: { type: String },
+    _focusedTabIndex: { type: Number, state: true },
+  };
+
+  constructor() {
+    super();
+
+    this.label = '';
+    this._focusedTabIndex = -1;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    // Not in the constructor: a custom element that gains an attribute there is never upgraded.
+    if (!this.id) {
+      this.id = generateId('tabs');
+    }
+  }
+
+  /** @type {import("./tab.component.js").GrantCodesTab[]} */
+  tabs = [];
+
+  /** @type {import("./internal/tabs-button.component.js").GrantCodesTabsButton[]} */
+  tabButtons = [];
+
+  get activeTab() {
+    return this.tabs.find((tab) => tab.active) || null;
+  }
+
+  set activeTab(tab) {
+    // Ignore setting activeTab to null. As long as there are children, one tab
+    // must be selected.
+    this.tabs.forEach((t, i) => {
+      if (t === tab) {
+        t.active = true;
+        this._focusedTabIndex = i;
+      } else {
+        t.active = false;
+      }
+    });
+    this.requestUpdate();
+  }
+
+  initializeTabs() {
+    this.tabs.forEach((tab, i) => {
+      tab.index = i;
+      tab.containerId = this.id;
+    });
+
+    // If no tab is active, default to the first tab.
+    if (this.activeTab == null) {
+      this._focusedTabIndex = 0;
+      this.activeTab = this.tabs[0];
+    }
+  }
+
+  firstUpdated() {
+    const slot = this.renderRoot.querySelector('slot');
+    this.tabs = slot ? slot.assignedElements().filter((el) => el.tagName === 'GRANTCODES-TAB') : [];
+    this.tabButtons = Array.from(this.renderRoot.querySelectorAll('grantcodes-tabs-button'));
+    this.initializeTabs();
+  }
+
+  handleTabKeyDown(e) {
+    if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+      e.preventDefault();
+      const tabs = this.tabs;
+      const nextIndex =
+        e.key === 'ArrowRight'
+          ? (this._focusedTabIndex + 1) % tabs.length
+          : (this._focusedTabIndex - 1 + tabs.length) % tabs.length;
+
+      // Focus the next tab button.
+      const tabButton = this.tabButtons[nextIndex];
+      if (tabButton) {
+        tabButton.focus();
+        this._focusedTabIndex = nextIndex;
+      }
+    }
+  }
+
+  renderTabButtons() {
+    return this.tabs.map(
+      (tab, i) => html`
 				<grantcodes-tabs-button
-					index=${i + 1}
+					index=${i}
 					label="${tab.label}"
 					containerId="${this.id}"
-					active=${tab.active}
+					.active=${tab.active}
 					@click=${() => {
-						this.activeTab = tab;
-					}}
+            this.activeTab = tab;
+          }}
 					@keydown=${this.handleTabKeyDown}
 				></grantcodes-tabs-button>
 			`,
-		);
-	}
+    );
+  }
 
-	render() {
-		return html`
+  render() {
+    return html`
 			<div class="tabs" id="${this.id}">
 				<div role="tablist" class="tabs__tablist" aria-label=${ifDefined(this.label)}>
 					<div class="tabs__tablist__inner">
@@ -128,7 +126,7 @@ export class GrantCodesTabs extends LitElement {
 				</div>
 			</div>
 		`;
-	}
+  }
 }
 
 export { GrantCodesTab, GrantCodesTabsButton };

package/src/components/tabs/tabs.css

@@ -1,91 +1,82 @@
 *,
 *::before,
 *::after {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 .tabs {
-	--border-width: 3px;
-	display: block;
+  --border-width: 3px;
+  display: block;
 }
 
 .tabs__tablist {
-	overflow: auto;
-	contain: none;
+  overflow: auto;
+  contain: none;
 }
 
 .tabs__tablist__inner {
-	position: relative;
-	display: flex;
-	flex-direction: row;
-	flex-wrap: nowrap;
-	width: fit-content;
-	min-width: 100%;
-	background-image: linear-gradient(
-		var(--g-color-border-default, var(--g-color-primary-100)),
-		var(--g-color-border-default, var(--g-color-primary-100))
-	);
-	background-size: auto var(--border-width);
-	background-position: bottom;
-	background-repeat: repeat-x;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  width: fit-content;
+  min-width: 100%;
+  background-image: linear-gradient(
+    var(--g-color-border-default, var(--g-color-primary-100)),
+    var(--g-color-border-default, var(--g-color-primary-100))
+  );
+  background-size: auto var(--border-width);
+  background-position: bottom;
+  background-repeat: repeat-x;
 }
 
 .tabs__tab {
-	padding: 0.6em 1.2em;
-	line-height: 1;
-	font-size: var(--g-typography-body-default-font-size);
-	border: none;
-	border-block-start: var(--border-width) solid transparent;
-	border-block-end: var(--border-width) solid
-		var(--g-color-border-default, var(--g-color-primary-100));
-	background-color: transparent;
-	color: var(--g-color-content-default);
-	opacity: 0.7;
-	white-space: nowrap;
-	cursor: pointer;
-	transition:
-		opacity 0.2s,
-		border-color 0.2s,
-		background-color 0.2s;
+  padding: 0.6em 1.2em;
+  line-height: 1;
+  font-size: var(--g-typography-body-default-font-size);
+  border: none;
+  border-block-start: var(--border-width) solid transparent;
+  border-block-end: var(--border-width) solid
+    var(--g-color-border-default, var(--g-color-primary-100));
+  background-color: transparent;
+  color: var(--g-color-content-default);
+  opacity: 0.7;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    opacity 0.2s,
+    border-color 0.2s,
+    background-color 0.2s;
 }
 
 @media (min-width: 40em) {
-	.tabs__tab {
-		padding-inline: var(--g-spacing-md);
-	}
+  .tabs__tab {
+    padding-inline: var(--g-spacing-md);
+  }
 }
 
 .tabs__tab:hover,
 .tabs__tab:focus-visible {
-	opacity: 1;
-	border-block-end-color: var(
-		--g-color-border-default,
-		var(--g-color-primary-200)
-	);
+  opacity: 1;
+  border-block-end-color: var(--g-color-border-default, var(--g-color-primary-200));
 }
 
 .tabs__tab.is-active {
-	border-block-end-color: var(
-		--g-color-border-primary,
-		var(--g-color-primary-500)
-	);
-	background-color: var(--g-color-background-subtle);
-	color: var(--g-color-content-default);
-	z-index: 1;
-	position: relative;
-	opacity: 1;
+  border-block-end-color: var(--g-color-border-primary, var(--g-color-primary-500));
+  background-color: var(--g-color-background-subtle);
+  color: var(--g-color-content-default);
+  z-index: 1;
+  position: relative;
+  opacity: 1;
 }
 
 .tabs__panel {
-	margin-block-start: var(--g-spacing-md);
-	outline-color: var(
-		--g-color-border-primary,
-		var(--g-color-primary-500)
-	);
-	outline-offset: 1rem;
-	display: none;
+  margin-block-start: var(--g-spacing-md);
+  outline-color: var(--g-color-border-primary, var(--g-color-primary-500));
+  outline-offset: 1rem;
+  display: none;
 }
 
 .tabs__panel.is-active {
-	display: block;
+  display: block;
 }

package/src/components/tabs/tabs.js

@@ -1,8 +1,8 @@
-import { GrantCodesTabs } from "./tabs.component.js";
+import { GrantCodesTabs } from './tabs.component.js';
 
-export * from "./tabs.component.js";
+export * from './tabs.component.js';
 export default GrantCodesTabs;
 
-if (!customElements.get("grantcodes-tabs")) {
-	customElements.define("grantcodes-tabs", GrantCodesTabs);
+if (!customElements.get('grantcodes-tabs')) {
+  customElements.define('grantcodes-tabs', GrantCodesTabs);
 }

package/src/components/tabs/tabs.react.js

@@ -1,9 +1,9 @@
-import React from "react";
-import { createComponent } from "@lit/react";
-import { GrantCodesTabs } from "./tabs.js";
+import { createComponent } from '@lit/react';
+import React from 'react';
+import { GrantCodesTabs } from './tabs.js';
 
 export const Tabs = createComponent({
-	tagName: "grantcodes-tabs",
-	elementClass: GrantCodesTabs,
-	react: React,
+  tagName: 'grantcodes-tabs',
+  elementClass: GrantCodesTabs,
+  react: React,
 });

package/src/components/tabs/tabs.stories.js

@@ -1,21 +1,22 @@
-import { html } from "lit/static-html.js";
-import { getStorybookHelpers } from "@wc-toolkit/storybook-helpers";
-const { events, args, argTypes, template } =
-	getStorybookHelpers("grantcodes-tabs");
-import "./tabs.js";
-import "./tab.js";
+import { getStorybookHelpers } from '@wc-toolkit/storybook-helpers';
+import { html } from 'lit/static-html.js';
+
+const { events, args, argTypes, template } = getStorybookHelpers('grantcodes-tabs');
+
+import './tabs.js';
+import './tab.js';
 
 const meta = {
-	title: "Components/Tabs",
-	component: "grantcodes-tabs",
-	args: {
-		...args,
-	},
-	argTypes,
-	render: (args) =>
-		template(
-			args,
-			html`
+  title: 'Components/Tabs',
+  component: 'grantcodes-tabs',
+  args: {
+    ...args,
+  },
+  argTypes,
+  render: (args) =>
+    template(
+      args,
+      html`
 				<grantcodes-tab label="Tab 1">
 					<p>This is the content of the first tab.</p>
 				</grantcodes-tab>
@@ -26,12 +27,12 @@ const meta = {
 					<p>This is the content of the third tab.</p>
 				</grantcodes-tab>
 			`,
-		),
-	parameters: {
-		actions: {
-			handles: events,
-		},
-	},
+    ),
+  parameters: {
+    actions: {
+      handles: events,
+    },
+  },
 };
 
 export default meta;