@grantcodes/ui 2.15.6 → 2.16.0

package/src/css/elements.stories.js

@@ -1,20 +1,20 @@
-import { html } from "lit";
+import { html } from 'lit';
 
 // This default export determines where your story goes in the story list
 const meta = {
-	title: "Styles/Elements",
-	// component: "grantcodes-elements",
+  title: 'Styles/Elements',
+  // component: "grantcodes-elements",
 };
 
 export default meta;
 
 export const Image = {
-	args: {
-		width: 400,
-		height: 400,
-	},
-	render: ({ width, height }) =>
-		html`<img
+  args: {
+    width: 400,
+    height: 400,
+  },
+  render: ({ width, height }) =>
+    html`<img
       width="${width}"
       height="${height}"
       src="https://placehold.co/${width}x${height}"
@@ -22,46 +22,46 @@ export const Image = {
 };
 
 export const Figure = {
-	args: {},
-	render: () =>
-		html`<figure>
+  args: {},
+  render: () =>
+    html`<figure>
       <img width="800" height="600" src="https://placehold.co/800x600" />
       <figcaption>This is a caption</figcaption>
     </figure>`,
 };
 
 export const Link = {
-	args: {
-		text: "This is a link",
-	},
-	render: ({ text }) => html`<a href="#">${text}</a>`,
+  args: {
+    text: 'This is a link',
+  },
+  render: ({ text }) => html`<a href="#">${text}</a>`,
 };
 
 export const Button = {
-	args: {
-		text: "This is a button",
-		disabled: false,
-	},
-	render: ({ text }) => html`<button>${text}</button>`,
+  args: {
+    text: 'This is a button',
+    disabled: false,
+  },
+  render: ({ text }) => html`<button>${text}</button>`,
 };
 
 export const Input = {
-	args: {
-		placeholder: "This is an input",
-	},
-	render: ({ placeholder }) => html`<input placeholder="${placeholder}" />`,
+  args: {
+    placeholder: 'This is an input',
+  },
+  render: ({ placeholder }) => html`<input placeholder="${placeholder}" />`,
 };
 
 export const Label = {
-	args: {
-		text: "This is a label",
-	},
-	render: ({ text }) => html`<label>${text}</label>`,
+  args: {
+    text: 'This is a label',
+  },
+  render: ({ text }) => html`<label>${text}</label>`,
 };
 
 export const Select = {
-	args: {},
-	render: () => html`<select>
+  args: {},
+  render: () => html`<select>
     <option value="1">Option 1</option>
     <option value="2">Option 2</option>
     <option value="3">Option 3</option>
@@ -71,36 +71,35 @@ export const Select = {
 };
 
 export const Textarea = {
-	args: {
-		placeholder: "This is a textarea",
-	},
-	render: ({ placeholder }) =>
-		html`<textarea placeholder="${placeholder}"></textarea>`,
+  args: {
+    placeholder: 'This is a textarea',
+  },
+  render: ({ placeholder }) => html`<textarea placeholder="${placeholder}"></textarea>`,
 };
 
 export const Checkbox = {
-	args: {},
-	render: () => html`<input type="checkbox" />`,
+  args: {},
+  render: () => html`<input type="checkbox" />`,
 };
 
 export const Radio = {
-	args: {
-		text: "This is a radio",
-	},
-	render: () => html`<input type="radio" />`,
+  args: {
+    text: 'This is a radio',
+  },
+  render: () => html`<input type="radio" />`,
 };
 
 export const DetailsSummary = {
-	args: {
-		exclusive: false,
-	},
-	argTypes: {},
-	render: ({ exclusive }) => html`
-		<details name=${exclusive ? "accordion" : ""}>
+  args: {
+    exclusive: false,
+  },
+  argTypes: {},
+  render: ({ exclusive }) => html`
+		<details name=${exclusive ? 'accordion' : ''}>
 			<summary>Summary</summary>
 			Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, ratione ad Suscipit, impedit ipsa sed soluta sapiente totam Voluptatibus, corporis.
 		</details>
-		<details name=${exclusive ? "accordion" : ""}>
+		<details name=${exclusive ? 'accordion' : ''}>
 			<summary>Summary</summary>
 			Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero, ratione ad Suscipit, impedit ipsa sed soluta sapiente totam Voluptatibus, corporis.
 		</details>

package/src/css/helpers.css

@@ -1,16 +1,16 @@
 .screen-reader-text {
-	display: none !important;
+  display: none !important;
 }
 
 .hide-print {
-	@media print {
-		display: none !important;
-	}
+  @media print {
+    display: none !important;
+  }
 }
 
 .print-only {
-	display: none !important;
-	@media print {
-		display: block !important;
-	}
+  display: none !important;
+  @media print {
+    display: block !important;
+  }
 }

package/src/css/layers.stories.js

@@ -1,13 +1,13 @@
-import { html } from "lit";
+import { html } from 'lit';
 
 const meta = {
-	title: "Styles/CSS Layers",
+  title: 'Styles/CSS Layers',
 };
 
 export default meta;
 
 export const LayerOrder = {
-	render: () => html`
+  render: () => html`
 		<div style="max-width: 40rem;">
 			<h2>CSS Layers</h2>
 			<p>Styles are organized into CSS cascade layers, from lowest to highest priority:</p>
@@ -25,7 +25,7 @@ export const LayerOrder = {
 };
 
 export const LayerOverrideDemo = {
-	render: () => html`
+  render: () => html`
 		<style>
 			/* This override is unlayered, so it beats all layers */
 			.layer-demo-override {
@@ -62,7 +62,7 @@ export const LayerOverrideDemo = {
 };
 
 export const AllLayers = {
-	render: () => html`
+  render: () => html`
 		<style>
 			.layers-grid {
 				display: grid;

package/src/css/reset.css

@@ -5,256 +5,256 @@
 *,
 ::before,
 ::after {
-	box-sizing: border-box;
-	background-repeat: no-repeat;
+  box-sizing: border-box;
+  background-repeat: no-repeat;
 }
 
 ::before,
 ::after {
-	text-decoration: inherit;
-	vertical-align: inherit;
+  text-decoration: inherit;
+  vertical-align: inherit;
 }
 
 /* Root defaults */
 :where(:root) {
-	font: var(--g-typography-body-font);
-	cursor: default;
-	line-height: 1.5;
-	overflow-wrap: break-word;
-	scrollbar-gutter: stable;
-	-moz-tab-size: 4;
-	tab-size: 4;
-	-webkit-tap-highlight-color: transparent;
-	-webkit-text-size-adjust: 100%;
+  font: var(--g-typography-body-font);
+  cursor: default;
+  line-height: 1.5;
+  overflow-wrap: break-word;
+  scrollbar-gutter: stable;
+  -moz-tab-size: 4;
+  tab-size: 4;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-text-size-adjust: 100%;
 }
 
 :where(:root, body) {
-	padding: 0;
-	margin: 0;
+  padding: 0;
+  margin: 0;
 }
 
 :where(body) {
-	min-block-size: 100svh;
+  min-block-size: 100svh;
 }
 
 code,
 kbd,
 samp,
 pre {
-	font-family:
-		ui-monospace,
-		"Menlo",
-		"Consolas",
-		"Roboto Mono",
-		"Ubuntu Monospace",
-		"Noto Mono",
-		"Oxygen Mono",
-		"Liberation Mono",
-		monospace,
-		"Apple Color Emoji",
-		"Segoe UI Emoji",
-		"Segoe UI Symbol",
-		"Noto Color Emoji";
+  font-family:
+    ui-monospace,
+    "Menlo",
+    "Consolas",
+    "Roboto Mono",
+    "Ubuntu Monospace",
+    "Noto Mono",
+    "Oxygen Mono",
+    "Liberation Mono",
+    monospace,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol",
+    "Noto Color Emoji";
 }
 
 /* Grouping */
 :where(dl, ol, ul) :where(dl, ol, ul) {
-	margin: 0;
+  margin: 0;
 }
 
 :where(hr) {
-	color: inherit;
-	height: 0;
+  color: inherit;
+  height: 0;
 }
 
 :where(nav) :where(ol, ul) {
-	list-style-type: none;
-	padding: 0;
+  list-style-type: none;
+  padding: 0;
 }
 
 /* Prevent VoiceOver from ignoring list semantics in Safari */
 :where(nav li)::before {
-	content: "\200B";
-	float: left;
+  content: "\200B";
+  float: left;
 }
 
 :where(pre) {
-	font-size: 1em;
-	overflow: auto;
+  font-size: 1em;
+  overflow: auto;
 }
 
 /* Text-level semantics */
 :where(abbr[title]) {
-	text-decoration: underline dotted;
+  text-decoration: underline dotted;
 }
 
 :where(b, strong) {
-	font-weight: bolder;
+  font-weight: bolder;
 }
 
 :where(code, kbd, samp) {
-	font-size: 1em;
+  font-size: 1em;
 }
 
 :where(small) {
-	font-size: 80%;
+  font-size: 80%;
 }
 
 /* Embedded content */
 :where(audio, canvas, iframe, img, svg, video) {
-	vertical-align: middle;
+  vertical-align: middle;
 }
 
 :where(iframe) {
-	border-style: none;
+  border-style: none;
 }
 
 :where(svg:not([fill])) {
-	fill: currentColor;
+  fill: currentColor;
 }
 
 /* Tabular data */
 :where(table) {
-	border-collapse: collapse;
-	border-color: inherit;
-	text-indent: 0;
+  border-collapse: collapse;
+  border-color: inherit;
+  text-indent: 0;
 }
 
 /* Forms — baseline normalisation */
 :where(button, input, select) {
-	margin: 0;
+  margin: 0;
 }
 
 :where(button, [type="button" i], [type="reset" i], [type="submit" i]) {
-	-webkit-appearance: button;
+  -webkit-appearance: button;
 }
 
 :where(fieldset) {
-	border: 1px solid #a0a0a0;
+  border: 1px solid #a0a0a0;
 }
 
 :where(progress) {
-	vertical-align: baseline;
+  vertical-align: baseline;
 }
 
 :where(textarea) {
-	margin: 0;
-	resize: vertical;
+  margin: 0;
+  resize: vertical;
 }
 
 :where([type="search" i]) {
-	-webkit-appearance: textfield;
-	outline-offset: -2px;
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
 }
 
 ::-webkit-inner-spin-button,
 ::-webkit-outer-spin-button {
-	height: auto;
+  height: auto;
 }
 
 ::-webkit-input-placeholder {
-	color: inherit;
-	opacity: 0.54;
+  color: inherit;
+  opacity: 0.54;
 }
 
 ::-webkit-search-decoration {
-	-webkit-appearance: none;
+  -webkit-appearance: none;
 }
 
 ::-webkit-file-upload-button {
-	-webkit-appearance: button;
-	font: inherit;
+  -webkit-appearance: button;
+  font: inherit;
 }
 
 /* Forms — typography and colour inheritance */
 :where(button, input, select, textarea) {
-	background-color: transparent;
-	border: 1px solid WindowFrame;
-	color: inherit;
-	font: inherit;
-	letter-spacing: inherit;
-	padding: 0.25em 0.375em;
+  background-color: transparent;
+  border: 1px solid WindowFrame;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  padding: 0.25em 0.375em;
 }
 
 :where([type="color" i], [type="range" i]) {
-	border-width: 0;
-	padding: 0;
+  border-width: 0;
+  padding: 0;
 }
 
 /* Interactive */
 :where(details > summary:first-of-type) {
-	display: list-item;
+  display: list-item;
 }
 
 /* Accessibility */
 :where([aria-busy="true" i]) {
-	cursor: progress;
+  cursor: progress;
 }
 
 :where([aria-controls]) {
-	cursor: pointer;
+  cursor: pointer;
 }
 
 :where([aria-disabled="true" i], [disabled]) {
-	cursor: not-allowed;
+  cursor: not-allowed;
 }
 
 :where([aria-hidden="false" i][hidden]) {
-	display: initial;
+  display: initial;
 }
 
 :where([aria-hidden="false" i][hidden]:not(:focus)) {
-	clip: rect(0, 0, 0, 0);
-	position: absolute;
+  clip: rect(0, 0, 0, 0);
+  position: absolute;
 }
 
 /* Reduced motion — !important is required here to override any animation/transition regardless of specificity */
 @media (prefers-reduced-motion: reduce) {
-	*,
-	::before,
-	::after {
-		animation-delay: -1ms !important;
-		animation-duration: 1ms !important;
-		animation-iteration-count: 1 !important;
-		background-attachment: initial !important;
-		scroll-behavior: auto !important;
-		transition-delay: 0s !important;
-		transition-duration: 0s !important;
-	}
+  *,
+  ::before,
+  ::after {
+    animation-delay: -1ms !important;
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    background-attachment: initial !important;
+    scroll-behavior: auto !important;
+    transition-delay: 0s !important;
+    transition-duration: 0s !important;
+  }
 }
 
 /* Design tokens are provided by @grantcodes/style-dictionary and applied to :root */
 :root {
-	color-scheme: light dark;
-	--grantcodes-ui-theme: "none";
-	background-color: var(--g-color-background-default);
-	color: var(--g-color-content-default);
-	fill: currentColor;
+  color-scheme: light dark;
+  --grantcodes-ui-theme: "none";
+  background-color: var(--g-color-background-default);
+  color: var(--g-color-content-default);
+  fill: currentColor;
 }
 
 /* Force dark mode on any element or subtree */
 .dark {
-	color-scheme: dark;
+  color-scheme: dark;
 }
 
 /* Force light mode on any element or subtree */
 .light {
-	color-scheme: light;
+  color-scheme: light;
 }
 
 /* Allow transitioning auto */
 :root {
-	@supports (interpolate-size: allow-keywords) {
-		interpolate-size: allow-keywords;
-	}
+  @supports (interpolate-size: allow-keywords) {
+    interpolate-size: allow-keywords;
+  }
 }
 
 ::selection {
-	background-color: var(--g-color-background-primary);
+  background-color: var(--g-color-background-primary);
 }
 
 /* Default backdrop styles */
 ::backdrop {
-	background-color: rgba(0, 0, 0, 0.4);
-	backdrop-filter: blur(6px);
+  background-color: rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(6px);
 }

package/src/css/themes/todomap.css

@@ -3,5 +3,5 @@
 @import "@grantcodes/style-dictionary/assets/fonts/quicksand";
 
 html.todomap {
-	font-family: var(--g-typography-font-family-body);
+  font-family: var(--g-typography-font-family-body);
 }