@grantcodes/ui 2.15.6 → 2.16.0

package/src/css/tokens.stories.js

@@ -1,17 +1,17 @@
-import grantcodes from "@grantcodes/style-dictionary/grantcodes/json";
-import wireframe from "@grantcodes/style-dictionary/wireframe/json";
-import todomap from "@grantcodes/style-dictionary/todomap/json";
-import { LitElement, html, css } from "lit";
+import grantcodes from '@grantcodes/style-dictionary/grantcodes/json';
+import todomap from '@grantcodes/style-dictionary/todomap/json';
+import wireframe from '@grantcodes/style-dictionary/wireframe/json';
+import { css, html, LitElement } from 'lit';
 
 const allTokens = {
-	grantcodes,
-	wireframe,
-	todomap,
+  grantcodes,
+  wireframe,
+  todomap,
 };
 
 // Token List Component
 class TokenList extends LitElement {
-	static styles = css`
+  static styles = css`
 		:host {
 			display: block;
 			padding: 2rem;
@@ -98,34 +98,31 @@ class TokenList extends LitElement {
 		}
 	`;
 
-	static properties = {
-		theme: { type: String },
-	};
-
-	constructor() {
-		super();
-		this.theme = "grantcodes";
-	}
-
-	formatValue(value) {
-		if (value === null || value === undefined) {
-			return String(value);
-		}
-		if (typeof value === "object") {
-			return JSON.stringify(value, null, 2);
-		}
-		return String(value);
-	}
-
-	render() {
-		const currentThemeTokens = allTokens[this.theme] || allTokens.grantcodes;
-		const tokenEntries = Object.entries(currentThemeTokens).sort(([a], [b]) =>
-			a.localeCompare(b),
-		);
-		const themeDisplay =
-			this.theme.charAt(0).toUpperCase() + this.theme.slice(1);
-
-		return html`
+  static properties = {
+    theme: { type: String },
+  };
+
+  constructor() {
+    super();
+    this.theme = 'grantcodes';
+  }
+
+  formatValue(value) {
+    if (value === null || value === undefined) {
+      return String(value);
+    }
+    if (typeof value === 'object') {
+      return JSON.stringify(value, null, 2);
+    }
+    return String(value);
+  }
+
+  render() {
+    const currentThemeTokens = allTokens[this.theme] || allTokens.grantcodes;
+    const tokenEntries = Object.entries(currentThemeTokens).sort(([a], [b]) => a.localeCompare(b));
+    const themeDisplay = this.theme.charAt(0).toUpperCase() + this.theme.slice(1);
+
+    return html`
 			<div class="banner">
 				<p class="theme-title">
 					<strong>Current Theme:</strong> ${themeDisplay}
@@ -147,42 +144,42 @@ class TokenList extends LitElement {
 					</thead>
 					<tbody>
 						${tokenEntries.map(
-							([tokenName, value]) => html`
+              ([tokenName, value]) => html`
 							<tr>
 								<td class="token-name">--${tokenName}</td>
 								<td class="token-value">${this.formatValue(value)}</td>
 								<td style="background-color: var(--${tokenName});"></td>
 							</tr>
 						`,
-						)}
+            )}
 					</tbody>
 				</table>
 			</div>
 		`;
-	}
+  }
 }
 
-customElements.define("token-list", TokenList);
+customElements.define('token-list', TokenList);
 
 // This default export determines where your story goes in the story list
 const meta = {
-	title: "Styles/Tokens",
-	parameters: {
-		docs: {
-			description: {
-				component:
-					"Complete list of design tokens. Tokens update based on the selected theme in the Storybook toolbar.",
-			},
-		},
-	},
+  title: 'Styles/Tokens',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'Complete list of design tokens. Tokens update based on the selected theme in the Storybook toolbar.',
+      },
+    },
+  },
 };
 
 export default meta;
 
 // Main tokens story that responds to theme changes
 export const AllTokens = {
-	render: (args, context) => {
-		const theme = context.globals?.theme || "grantcodes";
-		return html`<token-list .theme=${theme}></token-list>`;
-	},
+  render: (args, context) => {
+    const theme = context.globals?.theme || 'grantcodes';
+    return html`<token-list .theme=${theme}></token-list>`;
+  },
 };

package/src/css/typography.css

@@ -1,26 +1,24 @@
 :root {
-	font: var(--g-typography-body-font);
-	font-size: var(--g-typography-font-size-root);
+  font: var(--g-typography-body-font);
+  font-size: var(--g-typography-font-size-root);
 }
 @media (min-width: 40em) {
-	:root {
-		/* TODO: Would like to get rid of important */
-		--g-typography-font-scale-default: var(
-			--g-typography-font-scale-lg
-		) !important;
-	}
+  :root {
+    /* TODO: Would like to get rid of important */
+    --g-typography-font-scale-default: var(--g-typography-font-scale-lg) !important;
+  }
 }
 
 :where(h1, h2, h3, h4, h5, h6, p) {
-	margin-block-end: 1rem;
+  margin-block-end: 1rem;
 }
 
 :where(h1, h2, h3, h4, h5, h6, p):first-child {
-	margin-block-start: 0;
+  margin-block-start: 0;
 }
 
 :where(h1, h2, h3, h4, h5, h6, p):last-child {
-	margin-block-end: 0;
+  margin-block-end: 0;
 }
 
 h1,
@@ -29,55 +27,55 @@ h3,
 h4,
 h5,
 h6 {
-	text-wrap: balance;
+  text-wrap: balance;
 }
 
 h1 {
-	font: var(--g-typography-h1-font);
+  font: var(--g-typography-h1-font);
 }
 
 h2 {
-	font: var(--g-typography-h2-font);
+  font: var(--g-typography-h2-font);
 }
 
 h3 {
-	font: var(--g-typography-h3-font);
+  font: var(--g-typography-h3-font);
 }
 
 h4 {
-	font: var(--g-typography-h4-font);
+  font: var(--g-typography-h4-font);
 }
 
 h5 {
-	font: var(--g-typography-h5-font);
+  font: var(--g-typography-h5-font);
 }
 
 h6 {
-	font: var(--g-typography-h6-font);
+  font: var(--g-typography-h6-font);
 }
 
 p {
-	text-wrap: pretty;
-	margin: 0;
+  text-wrap: pretty;
+  margin: 0;
 }
 
 p + p {
-	margin-block-start: 1rem;
+  margin-block-start: 1rem;
 }
 
 pre {
-	font-family: var(--g-typography-font-family-code);
-	line-height: 1.2;
-	inline-size: 100%;
-	overflow: auto;
-	border-radius: var(--g-border-radius-md);
-	/* PLACEHOLDER: u.shadow(0) - manual conversion needed */
-	box-shadow: var(--g-box-shadow-sm);
-	font-size: 1rem;
-	font-weight: 400;
-	padding: 1rem;
+  font-family: var(--g-typography-font-family-code);
+  line-height: 1.2;
+  inline-size: 100%;
+  overflow: auto;
+  border-radius: var(--g-border-radius-md);
+  /* PLACEHOLDER: u.shadow(0) - manual conversion needed */
+  box-shadow: var(--g-box-shadow-sm);
+  font-size: 1rem;
+  font-weight: 400;
+  padding: 1rem;
 }
 
 mark {
-	background-color: var(--g-color-background-highlight);
+  background-color: var(--g-color-background-highlight);
 }

package/src/css/typography.stories.js

@@ -1,130 +1,130 @@
-import { html } from "lit";
+import { html } from 'lit';
 
 // This default export determines where your story goes in the story list
 const meta = {
-	title: "Styles/Typography",
-	// component: "grantcodes-typography",
+  title: 'Styles/Typography',
+  // component: "grantcodes-typography",
 };
 
 export default meta;
 
 export const Heading1 = {
-	args: {
-		text: "Heading 1",
-	},
-	render: ({ text }) => html`<h1>${text}</h1>`,
+  args: {
+    text: 'Heading 1',
+  },
+  render: ({ text }) => html`<h1>${text}</h1>`,
 };
 
 export const Heading2 = {
-	args: {
-		text: "Heading 2",
-	},
-	render: ({ text }) => html`<h2>${text}</h2>`,
+  args: {
+    text: 'Heading 2',
+  },
+  render: ({ text }) => html`<h2>${text}</h2>`,
 };
 
 export const Heading3 = {
-	args: {
-		text: "Heading 3",
-	},
-	render: ({ text }) => html`<h3>${text}</h3>`,
+  args: {
+    text: 'Heading 3',
+  },
+  render: ({ text }) => html`<h3>${text}</h3>`,
 };
 
 export const Heading4 = {
-	args: {
-		text: "Heading 4",
-	},
-	render: ({ text }) => html`<h4>${text}</h4>`,
+  args: {
+    text: 'Heading 4',
+  },
+  render: ({ text }) => html`<h4>${text}</h4>`,
 };
 
 export const Heading5 = {
-	args: {
-		text: "Heading 5",
-	},
-	render: ({ text }) => html`<h5>${text}</h5>`,
+  args: {
+    text: 'Heading 5',
+  },
+  render: ({ text }) => html`<h5>${text}</h5>`,
 };
 
 export const Heading6 = {
-	args: {
-		text: "Heading 6",
-	},
-	render: ({ text }) => html`<h6>${text}</h6>`,
+  args: {
+    text: 'Heading 6',
+  },
+  render: ({ text }) => html`<h6>${text}</h6>`,
 };
 
 export const Paragraph = {
-	args: {
-		text: "This is a paragraph.",
-	},
-	render: ({ text }) => html`<p>${text}</p>`,
+  args: {
+    text: 'This is a paragraph.',
+  },
+  render: ({ text }) => html`<p>${text}</p>`,
 };
 
 export const Emphasis = {
-	args: {
-		text: "This is emphasized text.",
-	},
-	render: ({ text }) => html`<p><em>${text}</em></p>`,
+  args: {
+    text: 'This is emphasized text.',
+  },
+  render: ({ text }) => html`<p><em>${text}</em></p>`,
 };
 
 export const Strong = {
-	args: {
-		text: "This is strong text.",
-	},
-	render: ({ text }) => html`<p><strong>${text}</strong></p>`,
+  args: {
+    text: 'This is strong text.',
+  },
+  render: ({ text }) => html`<p><strong>${text}</strong></p>`,
 };
 
 export const Small = {
-	args: {
-		text: "This is smallprint.",
-	},
-	render: ({ text }) => html`<p><small>${text}</small></p>`,
+  args: {
+    text: 'This is smallprint.',
+  },
+  render: ({ text }) => html`<p><small>${text}</small></p>`,
 };
 
 export const Deleted = {
-	args: {
-		text: "This is deleted text.",
-	},
-	render: ({ text }) => html`<p><del>${text}</del></p>`,
+  args: {
+    text: 'This is deleted text.',
+  },
+  render: ({ text }) => html`<p><del>${text}</del></p>`,
 };
 
 export const Inserted = {
-	args: {
-		text: "This is inserted text.",
-	},
-	render: ({ text }) => html`<p><ins>${text}</ins></p>`,
+  args: {
+    text: 'This is inserted text.',
+  },
+  render: ({ text }) => html`<p><ins>${text}</ins></p>`,
 };
 
 export const Code = {
-	args: {
-		text: "This is code.",
-	},
-	render: ({ text }) => html`<p><code>${text}</code></p>`,
+  args: {
+    text: 'This is code.',
+  },
+  render: ({ text }) => html`<p><code>${text}</code></p>`,
 };
 
 export const Subscript = {
-	args: {
-		text: "This is subscript text.",
-	},
-	render: ({ text }) => html`<p><sub>${text}</sub></p>`,
+  args: {
+    text: 'This is subscript text.',
+  },
+  render: ({ text }) => html`<p><sub>${text}</sub></p>`,
 };
 
 export const Superscript = {
-	args: {
-		text: "This is superscript text.",
-	},
-	render: ({ text }) => html`<p><sup>${text}</sup></p>`,
+  args: {
+    text: 'This is superscript text.',
+  },
+  render: ({ text }) => html`<p><sup>${text}</sup></p>`,
 };
 
 export const Mark = {
-	args: {
-		text: "This is marked text.",
-	},
-	render: ({ text }) => html`<p><mark>${text}</mark></p>`,
+  args: {
+    text: 'This is marked text.',
+  },
+  render: ({ text }) => html`<p><mark>${text}</mark></p>`,
 };
 
 export const OrderedList = {
-	args: {
-		items: ["Item 1", "Item 2"],
-	},
-	render: ({ items }) => html`
+  args: {
+    items: ['Item 1', 'Item 2'],
+  },
+  render: ({ items }) => html`
     <ol>
       ${items.map((item) => html`<li>${item}</li>`)}
     </ol>
@@ -132,10 +132,10 @@ export const OrderedList = {
 };
 
 export const UnorderedList = {
-	args: {
-		items: ["Item 1", "Item 2"],
-	},
-	render: ({ items }) => html`
+  args: {
+    items: ['Item 1', 'Item 2'],
+  },
+  render: ({ items }) => html`
     <ul>
       ${items.map((item) => html`<li>${item}</li>`)}
     </ul>
@@ -143,36 +143,36 @@ export const UnorderedList = {
 };
 
 export const DescriptionDetails = {
-	args: {
-		items: [
-			{ term: "Term 1", description: "Description 1" },
-			{ term: "Term 2", description: "Description 2" },
-		],
-	},
-	render: ({ items }) => html`
+  args: {
+    items: [
+      { term: 'Term 1', description: 'Description 1' },
+      { term: 'Term 2', description: 'Description 2' },
+    ],
+  },
+  render: ({ items }) => html`
     <dl>
       ${items.map(
-				(item) => html`
+        (item) => html`
           <dt>${item.term}</dt>
           <dd>${item.description}</dd>
         `,
-			)}
+      )}
     </dl>
   `,
 };
 
 export const Pre = {
-	args: {
-		text: "This is a pre block.",
-	},
-	render: ({ text }) => html`<pre>${text}</pre>`,
+  args: {
+    text: 'This is a pre block.',
+  },
+  render: ({ text }) => html`<pre>${text}</pre>`,
 };
 
 export const Blockquote = {
-	args: {
-		text: "This is a blockquote.",
-	},
-	render: ({ text }) => html`<blockquote>
+  args: {
+    text: 'This is a blockquote.',
+  },
+  render: ({ text }) => html`<blockquote>
     <p>${text}</p>
     <footer><cite>Cite info</cite></footer>
   </blockquote>`,

package/src/css/util/focus-ring.css

@@ -1,30 +1,22 @@
 :where(.focus-ring),
 :where(:enabled) {
-	outline: 0px solid transparent;
-	outline-offset: var(--g-focus-ring-offset-default);
-	transition-duration: var(--g-animation-move-quick);
-	transition-property: outline-color, width;
+  outline: 0px solid transparent;
+  outline-offset: var(--g-focus-ring-offset-default);
+  transition-duration: var(--g-animation-move-quick);
+  transition-property: outline-color, width;
 }
 
 :where(.focus-ring):focus-visible,
 :where(:enabled):focus-visible {
-	outline: var(--g-focus-ring-width-default) solid
-		var(--g-focus-ring-color-default);
+  outline: var(--g-focus-ring-width-default) solid var(--g-focus-ring-color-default);
 }
 
 @media (prefers-contrast: more) {
-	:where(.focus-ring):focus-visible,
-	:where(:enabled):focus-visible {
-		outline: var(--g-focus-ring-width-default) solid
-			var(--g-focus-ring-color-contrast);
-		box-shadow: 0 0 0
-			calc(
-				(
-					var(--g-focus-ring-width-default) +
-					var(--g-focus-ring-offset-default)
-				) *
-				1.5
-			)
-			var(--g-focus-ring-color-contrast-shadow);
-	}
+  :where(.focus-ring):focus-visible,
+  :where(:enabled):focus-visible {
+    outline: var(--g-focus-ring-width-default) solid var(--g-focus-ring-color-contrast);
+    box-shadow: 0 0 0
+      calc((var(--g-focus-ring-width-default) + var(--g-focus-ring-offset-default)) * 1.5)
+      var(--g-focus-ring-color-contrast-shadow);
+  }
 }

package/src/css/view-transitions.css

@@ -0,0 +1,16 @@
+/* View transitions are an enhancement: without support the per-component
+   view-transition-name declarations are ignored and their own transitions apply. */
+@supports (view-transition-name: none) {
+  @media (prefers-reduced-motion: no-preference) {
+    ::view-transition-group(*) {
+      animation-duration: var(--g-animation-move-quick);
+      animation-timing-function: var(--g-animation-ease);
+    }
+
+    /* Only the named elements animate; the page would otherwise cross-fade around them. */
+    ::view-transition-old(root),
+    ::view-transition-new(root) {
+      animation: none;
+    }
+  }
+}