@oscarpalmer/oui 0.36.0 → 0.37.0

package/src/css/reset.scss

@@ -6,31 +6,29 @@
  * A reset I use for a lot of personal stuff, and elsewhere, of course.
  * It's a mix of a few different resets mixed together with some of my own ideas.
  *
- * When rules are explained, such comments will be suffixed with one ore more square brackets
- * with a two-letter code, all of which are listed below. My own code is "OP", which are my initials.
- *
- * - Andy Bell's "A (more) Modern CSS Reset" [AB]
+ * - Andy Bell's "A (more) Modern CSS Reset"
  *   https://andy-bell.co.uk/a-more-modern-css-reset/
  *
- * - Chris Coyier's "The Coyier CSS Starter" [CC]
+ * - Chris Coyier's "The Coyier CSS Starter"
  *   https://frontendmasters.com/blog/the-coyier-css-starter/
  *
- * - CSS Remedy [CR]
+ * - CSS Remedy
  *   https://github.com/jensimmons/cssremedy
  *
- * - Harry Roberts [HR]
+ * - Harry Roberts
  * - https://github.com/csswizardry
  *
- * - RESS [RS]
+ * - Interface Cheat sheet
+ * - https://interfaces.dev/cheat-sheet
+ *
+ * - RESS
  *   https://github.com/filipelinhares/ress
  *
- * - Sanitize.css [SE]
+ * - Sanitize.css
  *   https://github.com/csstools/sanitize.css
  */
 
-/**
- * Catch-alls
- */
+// #region Globals
 
 :where(*) {
 	padding: 0;
@@ -43,18 +41,19 @@
 	box-sizing: border-box;
 }
 
-/**
- * Document
- */
+// #endregion
+
+// #region Document
 
 :where(:root) {
 	font-family: system-ui, sans-serif;
 	font-size: 100%;
 	line-height: 1.5;
-	/** Prevent text size inflation (e.g., after orientation change) [AB][RE][SE] */
 	text-size-adjust: none;
 	tab-size: 4;
 	overflow-wrap: break-word;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
 }
 
 :where(body) {
@@ -62,13 +61,14 @@
 	font-size: 1rem;
 }
 
-/**
- * General
- */
+// #endregion
+
+// #region General
 
 :where(a) {
 	text-decoration-skip-ink: auto;
 	text-underline-offset: 0.125em;
+	text-underline-position: from-font;
 }
 
 :where(abbr[title], dfn[title]) {
@@ -76,19 +76,15 @@
 }
 
 :where(abbr[title]) {
-	/** Add the correct text decoration in Safari [RS][SE] */
 	text-decoration: underline;
-	/** Ditto */
 	text-decoration: underline dotted;
 }
 
 :where(b, strong) {
-	/** Add the correct font weight in Chrome, Edge, and Safari [RS][SE], without compounding [HR] */
 	font-weight: bold;
 }
 
 :where(button, h1, h2, h3, h4, h5, h6, input, label, legend) {
-	/** Set shorter line heights on headings and interactive elements [AB] */
 	line-height: 1.125;
 }
 
@@ -103,21 +99,16 @@
 	input[type='submit' i],
 	summary
 ) {
-	/** Correct the inability to style clickable types in iOS [HR][RS][SE] */
 	appearance: auto;
-	/** Ditto */
 	cursor: pointer;
 }
 
 :where(code, kbd, output, pre, samp) {
-	/** Specify the font family of code elements [HR][RS][SE] */
 	font-family: monospace, monospace;
-	/** Correct the odd 'em' font sizing in all browsers [HR][RS][SE] */
 	font-size: inherit;
 }
 
 :where(details > summary:first-of-type) {
-	/** Add the correct display in Safari [SE] */
 	display: list-item;
 }
 
@@ -140,7 +131,6 @@
 }
 
 :where(dl, ol, ul) :where(dl, ol, ul) {
-	/** Remove the margin on nested lists in Chrome, Edge, and Safari [SE] */
 	margin: 0;
 }
 
@@ -149,23 +139,18 @@
 }
 
 :where(h1) {
-	/** Consistent sizing across browsers [HR] */
 	font-size: 2em;
 }
 
 :where(hr) {
-	/** Add the correct box sizing in Firefox [CR][RS][SE] */
 	height: 0;
-	/** Show the overflow in Edge and IE [CR][RS] */
 	overflow: visible;
 	border-style: solid;
 	border-width: 1px 0 0;
-	/** // Correct the inheritance of border colour in Firefox [CR][RS][SE] */
 	color: inherit;
 }
 
 :where(ins, u) {
-	/** Prevent link styling [HR] */
 	text-decoration: none;
 }
 
@@ -176,15 +161,12 @@
 }
 
 :where(nav li)::before {
-	/** Prevent VoiceOver from ignoring list semantics in Safari [SE] */
 	content: '\200B';
 	float: left;
 }
 
 :where(pre) {
-	/** Prevent overflow of the container in all browsers [SE] */
 	overflow: auto;
-	/** Overflow by default is bad… [CR] */
 	white-space: pre-wrap;
 }
 
@@ -208,29 +190,22 @@
 
 :where(table) {
 	border-collapse: collapse;
-	/** Correct table border colour in Chrome, Edge, and Safari [SE] */
 	border-color: currentcolor;
-	/** Modernized border spacing [HR] */
 	border-spacing: 0;
-	/** More legible numbers [HR] */
 	font-variant-numeric: tabular-nums;
-	/** Remove text indentation from table contents in Chrome, Edge, and Safari [RS][SE] */
 	text-indent: 0;
 }
 
-/**
- * Form-related
- */
+// #endregion
+
+// #region Forms
 
 :where(button, input, optgroup, select, textarea) {
-	/** Correct the font inheritance in Firefox, Edge, and Safari [HR][RS][SE] */
 	font: inherit;
 }
 
 :where(button, input, select, textarea) {
-	/** Change the inconsistent appearance in all browsers [SE] */
 	padding: 0.25em 0.5em;
-	/** Ditto for all */
 	background-color: transparent;
 	border: 1px solid WindowFrame;
 	color: inherit;
@@ -238,24 +213,19 @@
 }
 
 :where(fieldset) {
-	/** Change the inconsistent appearance in all browsers [SE] */
 	border: 1px solid darkgrey;
 }
 
 :where(optgroup) {
-	/** Restore the font weight unset by previous rules [RS] */
 	font-weight: bold;
 }
 
 :where(progress) {
-	/** Add the correct vertical alignment in Chrome, Edge, and Firefox [RS][SE] */
 	vertical-align: baseline;
 }
 
 :where(select, input[list]) {
-	/** Change the inconsistent appearance in all browsers [SE] */
 	appearance: none;
-	/** Ditto for all */
 	padding-right: 1em;
 	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E");
 	background-position: right center / 1em;
@@ -264,31 +234,24 @@
 }
 
 :where(select[multiple]) {
-	/** Don't show the arrow for multiple choice selects [SE] */
 	background-image: none;
 }
 
 :where(textarea) {
-	/** Change the resize direction in all browsers [RS][SE] */
 	resize: vertical;
 }
 
 :where([type='color' i], [type='range' i]) {
-	/** Remove the padding in all browsers [SE] */
 	padding: 0;
-	/** Remove the border in all browsers [SE] */
 	border-width: 0;
 }
 
 :where([type='search' i]) {
-	/** Correct the odd appearance in Chrome, Edge, and Safari [RS][SE] */
 	appearance: textfield;
-	/** Correct the outline style in Safari [RS][SE] */
 	outline-offset: -2px;
 }
 
 ::file-selector-button {
-	/** Correct the inability to style upload buttons in iOS and Safari [RS][SE] */
 	appearance: auto;
 	color: inherit;
 	font: inherit;
@@ -296,26 +259,22 @@
 }
 
 ::placeholder {
-	/** Better default text opacity [OP] */
 	opacity: 0.67;
-	/** Better default text color [HR][SE] */
 	color: inherit;
 }
 
 ::-webkit-inner-spin-button,
 ::-webkit-outer-spin-button {
-	/** Correct the cursor style of increment and decrement buttons in Safari [RS][SE] */
 	height: auto;
 }
 
 ::-webkit-search-decoration {
-	/** Remove the inner padding in Chrome, Edge, and Safari on macOS [SE] */
 	appearance: none;
 }
 
-/**
- * Media-related
- */
+// #endregion
+
+// #region Media
 
 :where(audio, canvas, embed, iframe, img, object, picture, svg, video) {
 	max-inline-size: 100%;
@@ -327,7 +286,6 @@
 }
 
 :where(audio) {
-	/** Better default width [CR] */
 	width: 100%;
 }
 
@@ -336,7 +294,6 @@
 }
 
 :where(canvas, img, svg, video) {
-	/** Proportional height based on width [HR] */
 	block-size: auto;
 }
 
@@ -345,21 +302,17 @@
 }
 
 :where(img) {
-	/** CSS magic! [HR] */
 	background-repeat: no-repeat;
-	/** Ditto */
 	background-size: cover;
-	/** Offset alt-text if image does not load [HR] */
+	outline: 1px solid light-dark(rgb(255 255 255 / 8%), rgb(0 0 0 / 8%));
 	font-style: italic;
 }
 
 :where(picture) {
-	/** Remove the unnecessary wrapping 'picture', while maintaining contents [CR] */
 	display: contents;
 }
 
 :where(source) {
-	/** Source elements have nothing to display, so we hide them entirely [CR] */
 	display: none;
 }
 
@@ -367,9 +320,9 @@
 	fill: currentcolor;
 }
 
-/**
- * Attributes
- */
+// #endregion
+
+// #region Attributes
 
 :where([aria-busy='true' i]) {
 	cursor: progress;
@@ -399,37 +352,33 @@
 	display: inherit !important;
 }
 
-/**
- * Pseudo-classes
- */
+// #endregion
+
+// #region Pseudo-classes
 
 :where(:target) {
 	scroll-margin: 2rlh;
 }
 
-/**
- * Media queries
- */
+// #endregion
+
+// #region Media queries
 
 @media (prefers-reduced-motion: no-preference) {
 	:where(:root) {
-		/** Allow for animations on auto-sizes [CC] */
 		interpolate-size: allow-keywords;
 	}
 
 	:where(:root:focus-within) {
-		/** Allow for smooth scrolling to focused elements */
 		scroll-behavior: smooth;
 	}
 }
 
 @media (prefers-reduced-motion: reduce) {
 	:where(:root:focus-within) {
-		/** Disable smooth scrolling, when requested */
 		scroll-behavior: auto;
 	}
 
-	/** Disable animations and transitions, when requested */
 	:where(*),
 	::after,
 	::before {
@@ -439,3 +388,5 @@
 		scroll-behavior: auto !important;
 	}
 }
+
+// #endregion

package/src/css/splitter.scss

@@ -24,7 +24,7 @@ oui-splitter {
 	transition: background 0.125s ease-in-out;
 }
 
-:where([oui-splitter-separator]:has([oui-splitter-handle]:focus)),
+:where([oui-splitter-separator]:has([oui-splitter-handle]:focus-visible)),
 :where([oui-splitter-separator]:has([oui-splitter-handle]:hover)),
 :where([oui-splitter-separator][oui-splitter-active]) {
 	background-color: color-mix(in oklab, var(--oui-blue-6), transparent 82.5%);
@@ -58,7 +58,7 @@ oui-splitter {
 	}
 }
 
-:where([oui-splitter-handle]:focus),
+:where([oui-splitter-handle]:focus-visible),
 :where([oui-splitter-handle]:hover),
 :where([oui-splitter-handle][oui-splitter-active]) {
 	&::after {

package/src/css/tabs.scss

@@ -0,0 +1,85 @@
+@use './mixins.scss' as mixins;
+
+oui-tabs {
+	:where(&) {
+		display: flex;
+	}
+
+	:where(&[orientation='horizontal' i]) {
+		flex-flow: column nowrap;
+	}
+
+	:where(&[orientation='vertical' i]) {
+		flex-flow: row nowrap;
+	}
+}
+
+[oui-tabs-content] {
+	:where(&) {
+		padding: 1em;
+		flex: 1;
+		background-color: var(--oui-absolute);
+	}
+
+	:where(oui-tabs[orientation='horizontal' i] > &) {
+		border-radius: 0 0 0.5em 0.5em;
+		box-shadow:
+			0 0 0 1px rgb(0 0 0 / 12.5%),
+			inset 0 1px 2px -0.5px rgb(0 0 0 / 5%),
+			inset 0 2px 4px -1px rgb(0 0 0 / 5%);
+	}
+
+	:where(oui-tabs[orientation='vertical' i] > &) {
+		border-radius: 0 0.5em 0.5em 0;
+		box-shadow:
+			0 0 0 1px rgb(0 0 0 / 12.5%),
+			inset 1px 1px 2px -0.5px rgb(0 0 0 / 5%),
+			inset 2px 2px 4px -1px rgb(0 0 0 / 5%);
+	}
+}
+
+[oui-tabs-tab] {
+	:where(&) {
+		@include mixins.button;
+		@include mixins.button-blue;
+
+		font-size: 0.875rem;
+		align-self: flex-end;
+	}
+
+	:where(&[aria-selected='true' i]) {
+		--oui-background-percentage: 80%;
+
+		box-shadow:
+			0 0 0 1px var(--oui-shadow-value),
+			inset 0 1px 2px -0.5px var(--oui-shadow-value),
+			inset 0 2px 4px -1px var(--oui-shadow-value);
+	}
+}
+
+[oui-tabs-tablist] {
+	:where(&) {
+		display: flex;
+		gap: 0.5em;
+	}
+
+	&[aria-orientation='horizontal' i] {
+		:where(&) {
+			flex-flow: row nowrap;
+		}
+
+		:where(& > [oui-tabs-tab]) {
+			border-radius: 0.25em 0.25em 0 0;
+		}
+	}
+
+	&[aria-orientation='vertical' i] {
+		:where(&) {
+			flex-flow: column nowrap;
+		}
+
+		:where(& > [oui-tabs-tab]) {
+			border-radius: 0.25em 0 0 0.25em;
+		}
+	}
+}

package/src/js/focus-trap/focus-trap.embedded.ts

@@ -285,31 +285,23 @@ function onTab(event: KeyboardEvent): void {
 
 	const instance = instances.get(element);
 
-	if (instance == null) {
+	if (instance == null || dispatch(element, 'oui:focus-trap').defaultPrevented) {
 		return;
 	}
 
-	const dispatched = dispatch(element, 'focus-trap');
-
-	setTimeout(() => {
-		if (dispatched.defaultPrevented) {
-			return;
-		}
-
-		if (!instance.disabled) {
-			event.preventDefault();
-		}
+	if (!instance.disabled) {
+		event.preventDefault();
+	}
 
-		const elements = getFocusable(element);
+	const elements = getFocusable(element);
 
-		const index = elements.indexOf(event.target as HTMLElement);
+	const index = elements.indexOf(event.target as HTMLElement);
 
-		if (index === -1 || elements.length === 0) {
-			tabToTrap(instance, elements, element);
-		} else {
-			tabToElement(instance, elements, index, event.shiftKey ? -1 : 1);
-		}
-	});
+	if (index === -1 || elements.length === 0) {
+		tabToTrap(instance, elements, element);
+	} else {
+		tabToElement(instance, elements, index, event.shiftKey ? -1 : 1);
+	}
 }
 
 export function removeFocusTrap(element: HTMLElement): void {

package/src/js/index.ts

@@ -11,4 +11,5 @@ export * from './popover';
 export * from './resizable/resizable.standalone';
 export * from './sortable/sortable.standalone';
 export * from './splitter';
+export * from './tabs';
 export * from './tooltip';

package/src/js/internal/draggable.ts

@@ -258,7 +258,7 @@ function cancelDrag(item?: OuiDraggableItem): void {
 
 	item.state.options.drag.onCancel?.(globals, item);
 
-	dispatch(item.state.element, `${item.state.name}:cancel`, {
+	dispatch(item.state.element, `oui:${item.state.name}:cancel`, {
 		detail: {
 			element: item.state.options.getOrigin(),
 		},
@@ -406,35 +406,33 @@ function onPointerdown(event: MouseEvent | TouchEvent): void {
 	globals.offset = item.state.options.position.getOffset(globals, item, element, position);
 	globals.original = item.state.options.position.getOriginal(globals, item, position);
 
-	const dispatched = dispatch(item.state.element, `${item.state.name}:begin`, {
-		detail: {
-			element,
-			position: {...globals.original},
-		},
-	});
-
-	setTimeout(() => {
-		if (dispatched.defaultPrevented) {
-			item.state.options.drag.onCancel?.(globals, item);
+	if (
+		dispatch(item.state.element, `oui:${item.state.name}:begin`, {
+			detail: {
+				element,
+				position: {...globals.original},
+			},
+		}).defaultPrevented
+	) {
+		item.state.options.drag.onCancel?.(globals, item);
 
-			reset();
+		reset();
 
-			return;
-		}
+		return;
+	}
 
-		const next = getNextPosition(item, position);
+	const next = getNextPosition(item, position);
 
-		setStyles(dragged, {
-			position: 'fixed',
-			inset: `${next.y}px auto auto ${next.x}px`,
-			transform: 'translate3d(0, 0, 0)',
-		});
+	setStyles(dragged, {
+		position: 'fixed',
+		inset: `${next.y}px auto auto ${next.x}px`,
+		transform: 'translate3d(0, 0, 0)',
+	});
 
-		item.state.options.drag.onBegin?.(event, globals, item, element, handle, next);
+	item.state.options.drag.onBegin?.(event, globals, item, element, handle, next);
 
-		item.state.styling.set();
-		styleToggler.set();
-	});
+	item.state.styling.set();
+	styleToggler.set();
 }
 
 function onPointermove(event: MouseEvent | TouchEvent): void {
@@ -459,15 +457,13 @@ function onPointermove(event: MouseEvent | TouchEvent): void {
 		original: position,
 	});
 
-	const dispatched = dispatch(current.state.element, `${current.state.name}:move`, {
-		detail,
-	});
-
-	setTimeout(() => {
-		if (dispatched.defaultPrevented) {
-			cancelDrag(current);
-		}
-	});
+	if (
+		dispatch(current.state.element, `oui:${current.state.name}:move`, {
+			detail,
+		}).defaultPrevented
+	) {
+		cancelDrag(current);
+	}
 }
 
 function onPointerup(event: MouseEvent | TouchEvent): void {

package/src/js/internal/listbox/listbox.form.ts

@@ -32,7 +32,7 @@ export function updateListboxForm<State extends OuiListboxState>(
 	updateListboxValidity(state);
 
 	if (emit ?? true) {
-		dispatch(state.host, 'change');
+		dispatch(state.host, 'oui:change');
 	}
 }
 

package/src/js/internal/listbox/listbox.state.ts

@@ -73,7 +73,7 @@ export function initializeListboxState<State extends OuiListboxState>(
 	updateListboxValueLabel(state);
 
 	if (state.options.selected.length > 0) {
-		updateListboxPreview('none', state, state.options.selected[0]);
+		updateListboxPreview('none', state, state.options.selected[0], false);
 	}
 
 	return state;