@oscarpalmer/oui 0.35.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/combobox/constants.combobox.ts

@@ -1,4 +1,7 @@
-import type {OuiComboboxAutoCompleteType, OuiComboboxType} from './models.combobox';
+import type {
+	OuiListboxAttributes,
+	OuiListboxAutoCompleteType,
+} from '../internal/listbox/listbox.model';
 
 // #region Variables
 
@@ -6,57 +9,75 @@ export const COMBOBOX_TAGNAME = 'oui-combobox';
 
 export const COMBOBOX_ATTRIBUTE_ANCHOR = `${COMBOBOX_TAGNAME}-anchor`;
 
-export const COMBOBOX_ATTRIBUTE_CONTENT = `${COMBOBOX_TAGNAME}-content`;
+const attributeContent = `${COMBOBOX_TAGNAME}-content`;
 
-export const COMBOBOX_ATTRIBUTE_FILTER = `${COMBOBOX_TAGNAME}-filter`;
+const attributeFilter = `${COMBOBOX_TAGNAME}-filter`;
 
-export const COMBOBOX_ATTRIBUTE_FILTER_INPUT = `${COMBOBOX_ATTRIBUTE_FILTER}-input`;
+const attributeFilterInput = `${attributeFilter}-input`;
 
-export const COMBOBOX_ATTRIBUTE_HEADER = `${COMBOBOX_TAGNAME}-header`;
+const attributeGroup = `${COMBOBOX_TAGNAME}-group`;
 
-export const COMBOBOX_ATTRIBUTE_HIDDEN = `${COMBOBOX_TAGNAME}-hidden`;
+const attributeHeader = `${COMBOBOX_TAGNAME}-header`;
 
-export const COMBOBOX_ATTRIBUTE_LIST = `${COMBOBOX_TAGNAME}-list`;
+const attributeHidden = `${COMBOBOX_TAGNAME}-hidden`;
 
-export const COMBOBOX_ATTRIBUTE_MESSAGE = `${COMBOBOX_TAGNAME}-message`;
+const attributeList = `${COMBOBOX_TAGNAME}-list`;
 
-export const COMBOBOX_ATTRIBUTE_OPTION = `${COMBOBOX_TAGNAME}-option`;
+const attributeListEmpty = `${attributeList}-empty`;
 
-export const COMBOBOX_ATTRIBUTE_OPTION_ACTIVE = `${COMBOBOX_TAGNAME}-option-active`;
+const attributeMessage = `${COMBOBOX_TAGNAME}-message`;
+
+const attributeOption = `${COMBOBOX_TAGNAME}-option`;
+
+const attributeOptionActive = `${COMBOBOX_TAGNAME}-option-active`;
 
 export const COMBOBOX_ATTRIBUTE_SELECTION = `${COMBOBOX_TAGNAME}-selection`;
 
 export const COMBOBOX_ATTRIBUTE_SELECTION_ITEM = `${COMBOBOX_TAGNAME}-selection-item`;
 
-export const COMBOBOX_AUTOCOMPLETES = new Set<OuiComboboxAutoCompleteType>([
+export const COMBOBOX_AUTOCOMPLETES = new Set<OuiListboxAutoCompleteType>([
 	'both',
 	'inline',
 	'list',
 	'none',
 ]);
 
-export const COMBOBOX_KEYS_ACTIVATION = new Set([' ', 'Backspace', 'Delete', 'Enter']);
-
-export const COMBOBOX_KEYS_NAVIGATION = new Set(['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp']);
+export const messageLabel = `<${COMBOBOX_TAGNAME}> must contain a <label> element for the <select> element`;
 
-export const COMBOBOX_KEYS_SELECTION = new Set(['ArrowRight', 'End']);
+export const messageSelect = `<${COMBOBOX_TAGNAME}> must contain a valid <select> element`;
 
-export const COMBOBOX_MESSAGE_LABEL = `<${COMBOBOX_TAGNAME}> must contain a <label> element for the <select> element`;
+export const selectorAnchor = `[${COMBOBOX_ATTRIBUTE_ANCHOR}]`;
 
-export const COMBOBOX_MESSAGE_SELECT = `<${COMBOBOX_TAGNAME}> must contain a valid <select> element`;
+export const selectorContent = `[${attributeContent}]`;
 
-export const COMBOBOX_SELECTOR_ANCHOR = `[${COMBOBOX_ATTRIBUTE_ANCHOR}]`;
+export const selectorOption = `[${attributeOption}]`;
 
-export const COMBOBOX_SELECTOR_SELECTION_ITEM = `[${COMBOBOX_ATTRIBUTE_SELECTION_ITEM}]`;
+export const selectorSelectionItem = `[${COMBOBOX_ATTRIBUTE_SELECTION_ITEM}]`;
 
-export const COMBOBOX_SELECTOR_OPTION = `[${COMBOBOX_ATTRIBUTE_OPTION}]`;
+export const COMBOBOX_ATTRIBUTES: OuiListboxAttributes = {
+	active: attributeOptionActive,
+	content: attributeContent,
+	empty: attributeListEmpty,
+	filter: attributeFilter,
+	group: attributeGroup,
+	header: attributeHeader,
+	hidden: attributeHidden,
+	input: attributeFilterInput,
+	list: attributeList,
+	message: attributeMessage,
+	option: attributeOption,
+};
 
-export const COMBOBOX_TYPES = new Set<OuiComboboxType>(['autocomplete', 'select']);
+export const COMBOBOX_MESSAGES = {
+	label: messageLabel,
+	select: messageSelect,
+};
 
-export const comboboxScrollOptions: ScrollIntoViewOptions = {
-	behavior: 'auto',
-	block: 'nearest',
-	inline: 'nearest',
+export const COMBOBOX_SELECTORS = {
+	anchor: selectorAnchor,
+	content: selectorContent,
+	selectionItem: selectorSelectionItem,
+	option: selectorOption,
 };
 
 // #endregion