@oscarpalmer/oui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Oscar Palmér
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,7 @@
+# Oui
+
+_Oui_ is a collection of styles, components, and related thingamjigs for designing websites and applications, which I often use to build prototypes and proof-of-concepts for myself and at work.
+
+## License
+
+[MIT licensed](LICENSE), natch :wink:

package/dist/css/a11y.css

@@ -0,0 +1,13 @@
+:where(.visually-hidden) {
+  position: absolute !important;
+}
+:where(.visually-hidden:not(:active):not(:focus):not(:focus-within)) {
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  clip: rect(1px, 1px 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  overflow: hidden !important;
+  border: 0 !important;
+  white-space: nowrap !important;
+}

package/dist/css/flex.css

@@ -0,0 +1,150 @@
+:where(.fill) {
+  flex: 1;
+}
+
+:where(.flow, .stack) {
+  display: flex;
+}
+
+:where(.flow) {
+  flex-flow: row wrap;
+  align-items: center;
+  gap: var(--flow-gap, 1rem);
+}
+
+:where(.flow-large) {
+  gap: var(--flow-gap-large, calc(2 * var(--flow-gap, 1rem)));
+}
+:where(.flow-nowrap) {
+  flex-wrap: nowrap;
+}
+:where(.flow-small) {
+  gap: var(--flow-gap-small, calc(0.5 * var(--flow-gap, 1rem)));
+}
+:where(.flow-text) {
+  gap: var(--flow-gap-text, 1em);
+}
+
+:where(.stack) {
+  flex-flow: column nowrap;
+  gap: var(--stack-gap, 1rem);
+}
+
+:where(.stack-large) {
+  gap: var(--stack-gap-large, calc(2 * var(--stack-gap, 1rem)));
+}
+:where(.stack-small) {
+  gap: var(--stack-gap-small, calc(0.5 * var(--stack-gap, 1rem)));
+}
+:where(.stack-text) {
+  gap: var(--stack-gap-text, 1em);
+}
+
+:where(.flex-reverse[class^=flow i], .flex-reverse[class*=" flow" i]) {
+  flex-direction: row-reverse;
+}
+:where(.flex-reverse[class^=stack i], .flex-reverse[class*=" stack" i]) {
+  flex-direction: column-reverse;
+}
+
+:where(.flex-ac-c) {
+  align-content: center;
+}
+:where(.flex-ac-fe) {
+  align-content: flex-end;
+}
+:where(.flex-ac-fs) {
+  align-content: flex-start;
+}
+:where(.flex-ac-s) {
+  align-content: stretch;
+}
+
+:where(.flex-ai-c) {
+  align-items: center;
+}
+:where(.flex-ai-fe) {
+  align-items: flex-end;
+}
+:where(.flex-ai-fs) {
+  align-items: flex-start;
+}
+:where(.flex-ai-s) {
+  align-items: stretch;
+}
+
+:where(.flex-as-c) {
+  align-self: center;
+}
+:where(.flex-as-fe) {
+  align-self: flex-end;
+}
+:where(.flex-as-fs) {
+  align-self: flex-start;
+}
+:where(.flex-as-s) {
+  align-self: stretch;
+}
+
+:where(.flex-ac-sa) {
+  align-content: space-around;
+}
+
+:where(.flex-ac-sb) {
+  align-content: space-between;
+}
+
+:where(.flex-ac-se) {
+  align-content: space-evenly;
+}
+
+:where(.flex-jc-c) {
+  justify-content: center;
+}
+:where(.flex-jc-fe) {
+  justify-content: flex-end;
+}
+:where(.flex-jc-fs) {
+  justify-content: flex-start;
+}
+:where(.flex-jc-s) {
+  justify-content: stretch;
+}
+
+:where(.flex-ji-c) {
+  justify-items: center;
+}
+:where(.flex-ji-fe) {
+  justify-items: flex-end;
+}
+:where(.flex-ji-fs) {
+  justify-items: flex-start;
+}
+:where(.flex-ji-s) {
+  justify-items: stretch;
+}
+
+:where(.flex-js-c) {
+  justify-self: center;
+}
+:where(.flex-js-fe) {
+  justify-self: flex-end;
+}
+:where(.flex-js-fs) {
+  justify-self: flex-start;
+}
+:where(.flex-js-s) {
+  justify-self: stretch;
+}
+
+:where(.flex-jc-sa) {
+  justify-content: space-around;
+}
+
+:where(.flex-jc-sb) {
+  justify-content: space-between;
+}
+
+:where(.flex-jc-se) {
+  justify-content: space-evenly;
+}

package/dist/css/reset.css

@@ -0,0 +1,282 @@
+@charset "UTF-8";
+/*! https://github.com/oscarpalmer/oui */
+/**
+ * Reset
+ * ========================
+ * 
+ * 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]
+ *   https://andy-bell.co.uk/a-more-modern-css-reset/
+ *
+ * - CSS Remedy [CR]
+ *   https://github.com/jensimmons/cssremedy
+ *
+ * - RESS [RS]
+ *   https://github.com/filipelinhares/ress
+ *
+ * - Sanitize.css [SE]
+ *   https://github.com/csstools/sanitize.css
+ */
+/**
+ * Catch-alls
+ */
+* {
+  padding: 0;
+  margin: 0;
+}
+
+*,
+::after,
+::before {
+  box-sizing: border-box;
+}
+
+/**
+ * Document
+ */
+:where(:root) {
+  font-family: system-ui, sans-serif;
+  font-size: 100%;
+  line-height: 1.5;
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+  -moz-tab-size: 4;
+  tab-size: 4;
+}
+
+:where(body) {
+  min-height: 100vh;
+  font-size: 1rem;
+}
+
+/**
+ * General
+ */
+:where(a) {
+  text-decoration-skip-ink: auto;
+  text-underline-offset: 0.125em;
+}
+
+:where(abbr[title]) {
+  text-decoration: underline;
+  text-decoration: underline dotted;
+}
+
+:where(b, strong) {
+  font-weight: bolder;
+}
+
+:where(button, h1, h2, h3, h4, h5, h6, input, label, legend) {
+  line-height: 1.125;
+}
+
+:where(button, [type=button i], [type=reset i], [type=submit i]) {
+  -webkit-appearance: button;
+  cursor: pointer;
+}
+
+:where(code, kbd, pre, samp) {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+:where(details > summary:first-of-type) {
+  display: list-item;
+}
+
+:where(dl, ol, ul) :where(dl, ol, ul) {
+  margin: 0;
+}
+
+:where(h1, h2, h3, h4, h5, h6) {
+  text-wrap: balance;
+}
+
+:where(hr) {
+  height: 0;
+  overflow: visible;
+  border-style: solid;
+  border-width: 1px 0 0;
+  color: inherit;
+}
+
+:where(nav) :where(ol, ul),
+:where(ul[class]) {
+  list-style-type: none;
+  padding: 0;
+}
+
+:where(nav li)::before {
+  content: "​";
+  float: left;
+}
+
+:where(pre) {
+  overflow: auto;
+  white-space: pre-wrap;
+}
+
+:where(small) {
+  font-size: 0.875rem;
+}
+
+:where(sub, sup) {
+  vertical-align: baseline;
+  font-size: 0.75rem;
+  line-height: 0;
+  position: relative;
+}
+
+:where(sub) {
+  bottom: -0.25em;
+}
+
+:where(sup) {
+  top: -0.5em;
+}
+
+:where(table) {
+  border-collapse: collapse;
+  border-color: currentColor;
+  text-indent: 0;
+}
+
+/**
+ * Form-related
+ */
+:where(button, input, optgroup, select, textarea) {
+  font: inherit;
+}
+
+:where(button, input, select, textarea) {
+  padding: 0.25em 0.5em;
+  background-color: transparent;
+  border: 1px solid WindowFrame;
+  color: inherit;
+  letter-spacing: inherit;
+}
+
+:where(fieldset) {
+  border: 1px solid darkgrey;
+}
+
+:where(optgroup) {
+  font-weight: bold;
+}
+
+:where(progress) {
+  vertical-align: baseline;
+}
+
+:where(select) {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  padding-right: 1em;
+  background: 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") no-repeat right center/1em;
+  border-radius: 0;
+}
+
+:where(select[multiple]) {
+  background-image: none;
+}
+
+:where(textarea) {
+  resize: vertical;
+}
+
+:where([type=color i], [type=range i]) {
+  padding: 0;
+  border-width: 0;
+}
+
+:where([type=search i]) {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  color: inherit;
+  font: inherit;
+  line-height: 1.25;
+}
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+::-webkit-input-placeholder {
+  opacity: 0.54;
+  color: inherit;
+}
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Media-related
+ */
+:where(audio, canvas, embed, iframe, img, object, picture, svg, video) {
+  max-width: 100%;
+  vertical-align: middle;
+}
+
+:where(audio, canvas, embed, iframe, img, object, svg, video) {
+  display: block;
+}
+
+:where(audio) {
+  width: 100%;
+}
+
+:where(audio:not([controls])) {
+  display: none;
+}
+
+:where(canvas, img, svg, video) {
+  height: auto;
+}
+
+:where(iframe) {
+  border-style: none;
+}
+
+:where(picture) {
+  display: contents;
+}
+
+:where(source) {
+  display: none;
+}
+
+:where(svg:not([fill])) {
+  fill: currentColor;
+}
+
+/**
+ * Attributes
+ */
+:where([disabled], [aria-disabled=true i]) {
+  cursor: default;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:where([aria-busy=true i]) {
+  cursor: progress;
+}
+
+:where([aria-controls]) {
+  cursor: pointer;
+}

package/package.json

@@ -0,0 +1,39 @@
+{
+	"author": {
+		"name": "Oscar Palmér",
+		"url": "https://oscarpalmer.se"
+	},
+	"description": "Styles, components, and utilities for building websites and applications.",
+	"devDependencies": {
+		"@biomejs/biome": "^1.9",
+		"sass": "^1.80",
+		"stylelint": "^16.10"
+	},
+	"exports": {
+		"./css/a11y": "./dist/css/a11y.css",
+		"./css/flex": "./dist/css/flex.css",
+		"./css/reset": "./dist/css/reset.css"
+	},
+	"files": ["dist", "src"],
+	"keywords": [
+		"css",
+		"scss",
+		"design",
+		"framework",
+		"library",
+		"style",
+		"stylesheet",
+		"utility"
+	],
+	"license": "MIT",
+	"name": "@oscarpalmer/oui",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/oscarpalmer/oui.git"
+	},
+	"scripts": {
+		"build": "npx sass ./src/css:./dist/css --no-source-map"
+	},
+	"type": "module",
+	"version": "0.1.0"
+}

package/src/css/a11y.scss

@@ -0,0 +1,18 @@
+/*! https://github.com/oscarpalmer/oui */
+
+.visually-hidden {
+	:where(&) {
+		position: absolute !important;
+	}
+
+	:where(&:not(:active):not(:focus):not(:focus-within)) {
+		width: 1px !important;
+		height: 1px !important;
+		padding: 0 !important;
+		clip: rect(1px, 1px 1px, 1px) !important;
+		clip-path: inset(50%) !important;
+		overflow: hidden !important;
+		border: 0 !important;
+		white-space: nowrap !important;
+	}
+}

package/src/css/flex.scss

@@ -0,0 +1,106 @@
+/*! https://github.com/oscarpalmer/oui */
+
+:where(.fill) {
+	flex: 1;
+}
+
+:where(.flow, .stack) {
+	display: flex;
+}
+
+:where(.flow) {
+	flex-flow: row wrap;
+	align-items: center;
+	gap: var(--flow-gap, 1rem);
+}
+
+.flow {
+	:where(&-large) {
+		gap: var(--flow-gap-large, calc(2 * var(--flow-gap, 1rem)));
+	}
+
+	:where(&-nowrap) {
+		flex-wrap: nowrap;
+	}
+
+	:where(&-small) {
+		gap: var(--flow-gap-small, calc(0.5 * var(--flow-gap, 1rem)));
+	}
+
+	:where(&-text) {
+		gap: var(--flow-gap-text, 1em);
+	}
+}
+
+:where(.stack) {
+	flex-flow: column nowrap;
+	gap: var(--stack-gap, 1rem);
+}
+
+.stack {
+	:where(&-large) {
+		gap: var(--stack-gap-large, calc(2 * var(--stack-gap, 1rem)));
+	}
+
+	:where(&-small) {
+		gap: var(--stack-gap-small, calc(0.5 * var(--stack-gap, 1rem)));
+	}
+
+	:where(&-text) {
+		gap: var(--stack-gap-text, 1em);
+	}
+}
+
+.flex {
+	&-reverse {
+		:where(&[class^='flow' i], &[class*=' flow' i]) {
+			flex-direction: row-reverse;
+		}
+
+		:where(&[class^='stack' i], &[class*=' stack' i]) {
+			flex-direction: column-reverse;
+		}
+	}
+}
+
+$alignmentOrigins: (
+	c: 'content',
+	i: 'items',
+	s: 'self',
+);
+
+$alignmentValues: (
+	c: 'center',
+	fe: 'flex-end',
+	fs: 'flex-start',
+	s: 'stretch',
+);
+
+$justificationValues: (
+	sa: 'space-around',
+	sb: 'space-between',
+	se: 'space-evenly',
+);
+
+$types: (
+	a: 'align',
+	j: 'justify',
+);
+
+@each $typeKey, $typeValue in $types {
+	@each $alignmentOriginKey, $alignmentOriginValue in $alignmentOrigins {
+		.flex-#{$typeKey}#{$alignmentOriginKey} {
+			@each $alignmentValueKey, $alignmentValueValue in $alignmentValues {
+				:where(&-#{$alignmentValueKey}) {
+					#{$typeValue}-#{$alignmentOriginValue}: #{$alignmentValueValue};
+				}
+			}
+		}
+	}
+
+	@each $justificationKey, $justificationValue in $justificationValues {
+		:where(.flex-#{$typeKey}c-#{$justificationKey}) {
+			#{$typeValue}-content: #{$justificationValue};
+		}
+	}
+}

package/src/css/reset.scss

@@ -0,0 +1,289 @@
+/*! https://github.com/oscarpalmer/oui */
+/**
+ * Reset
+ * ========================
+ * 
+ * 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]
+ *   https://andy-bell.co.uk/a-more-modern-css-reset/
+ *
+ * - CSS Remedy [CR]
+ *   https://github.com/jensimmons/cssremedy
+ *
+ * - RESS [RS]
+ *   https://github.com/filipelinhares/ress
+ *
+ * - Sanitize.css [SE]
+ *   https://github.com/csstools/sanitize.css
+ */
+
+/**
+ * Catch-alls
+ */
+
+* {
+	padding: 0;
+	margin: 0;
+}
+
+*,
+::after,
+::before {
+	box-sizing: border-box;
+}
+
+/**
+ * Document
+ */
+
+:where(:root) {
+	font-family: system-ui, sans-serif;
+	font-size: 100%;
+	line-height: 1.5;
+	-moz-text-size-adjust: none; // Prevent text size inflation (e.g., after orientation change) [AB][RE][SE]
+	-webkit-text-size-adjust: none; // ditto
+	text-size-adjust: none; // ditto
+	-moz-tab-size: 4;
+	tab-size: 4;
+}
+
+:where(body) {
+	min-height: 100vh;
+	font-size: 1rem;
+}
+
+/**
+ * General
+ */
+
+:where(a) {
+	text-decoration-skip-ink: auto;
+	text-underline-offset: 0.125em;
+}
+
+:where(abbr[title]) {
+	text-decoration: underline; // Add the correct text decoration in Safari [RS][SE]
+	text-decoration: underline dotted; // ditto
+}
+
+:where(b, strong) {
+	font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari [RS][SE]
+}
+
+:where(button, h1, h2, h3, h4, h5, h6, input, label, legend) {
+	line-height: 1.125; // Set shorter line heights on headings and interactive elements [AB]
+}
+
+:where(button, [type='button' i], [type='reset' i], [type='submit' i]) {
+	-webkit-appearance: button; // Correct the inability to style clickable types in iOS [RS][SE]
+	cursor: pointer;
+}
+
+:where(code, kbd, pre, samp) {
+	font-family: monospace, monospace; // Specify the font family of code elements [RS][SE]
+	font-size: 1em; // Correct the odd 'em' font sizing in all browsers [RS][SE]
+}
+
+:where(details > summary:first-of-type) {
+	display: list-item; // Add the correct display in Safari [SE]
+}
+
+:where(dl, ol, ul) :where(dl, ol, ul) {
+	margin: 0; // Remove the margin on nested lists in Chrome, Edge, and Safari [SE]
+}
+
+:where(h1, h2, h3, h4, h5, h6) {
+	text-wrap: balance;
+}
+
+:where(hr) {
+	height: 0; // Add the correct box sizing in Firefox [CR][RS][SE]
+	overflow: visible; // Show the overflow in Edge and IE [CR][RS]
+	border-style: solid;
+	border-width: 1px 0 0;
+	color: inherit; // Correct the inheritance of border colour in Firefox [CR][RS][SE]
+}
+
+:where(nav) :where(ol, ul),
+:where(ul[class]) {
+	list-style-type: none;
+	padding: 0;
+}
+
+:where(nav li)::before {
+	content: '\200B'; // Prevent VoiceOver from ignoring list semantics in Safari [SE]
+	float: left;
+}
+
+:where(pre) {
+	overflow: auto; // Prevent overflow of the container in all browsers [SE]
+	white-space: pre-wrap; // Overflow by default is bad… [CR]
+}
+
+:where(small) {
+	font-size: 0.875rem;
+}
+
+:where(sub, sup) {
+	vertical-align: baseline;
+	font-size: 0.75rem;
+	line-height: 0;
+	position: relative;
+}
+
+:where(sub) {
+	bottom: -0.25em;
+}
+
+:where(sup) {
+	top: -0.5em;
+}
+
+:where(table) {
+	border-collapse: collapse;
+	border-color: currentColor; // Correct table border colour in Chrome, Edge, and Safari [SE]
+	text-indent: 0; // Remove text indentation from table contents in Chrome, Edge, and Safari [RS][SE]
+}
+
+/**
+ * Form-related
+ */
+
+:where(button, input, optgroup, select, textarea) {
+	font: inherit; // Correct the font inheritance in Firefox, Edge, and Safari [RS][SE]
+}
+
+:where(button, input, select, textarea) {
+	padding: 0.25em 0.5em; // Change the inconsistent appearance in all browsers [SE]
+	background-color: transparent; // ditto
+	border: 1px solid WindowFrame; // ditto
+	color: inherit; // ditto
+	letter-spacing: inherit; // ditto
+}
+
+:where(fieldset) {
+	border: 1px solid darkgrey; // Change the inconsistent appearance in all browsers [SE]
+}
+
+:where(optgroup) {
+	font-weight: bold; // Restore the font weight unset by previous rules [RS]
+}
+
+:where(progress) {
+	vertical-align: baseline; // Add the correct vertical alignment in Chrome, Edge, and Firefox [RS][SE]
+}
+
+:where(select) {
+	-moz-appearance: none; // Change the inconsistent appearance in all browsers [SE]
+	-webkit-appearance: none; // ditto
+	appearance: none; // ditto
+	padding-right: 1em; // ditto
+	background: 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")
+		no-repeat right center / 1em; // ditto
+	border-radius: 0; // ditto
+}
+
+:where(select[multiple]) {
+	background-image: none; // Don't show the arrow for multiple choice selects [SE]
+}
+
+:where(textarea) {
+	resize: vertical; // Change the resize direction in all browsers [RS][SE]
+}
+
+:where([type='color' i], [type='range' i]) {
+	padding: 0; // Remove the padding in all browsers [SE]
+	border-width: 0; // Remove the border in all browsers [SE]
+}
+
+:where([type='search' i]) {
+	-webkit-appearance: textfield; // Correct the odd appearance in Chrome, Edge, and Safari [RS][SE]
+	outline-offset: -2px; // Correct the outline style in Safari [RS][SE]
+}
+
+::-webkit-file-upload-button {
+	-webkit-appearance: button; // Correct the inability to style upload buttons in iOS and Safari [RS][SE]
+	color: inherit;
+	font: inherit;
+	line-height: 1.25;
+}
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+	height: auto; // Correct the cursor style of increment and decrement buttons in Safari [RS][SE]
+}
+
+::-webkit-input-placeholder {
+	opacity: 0.54; // Correct the text style of placeholders in Chrome, Edge, and Safari. [SE]
+	color: inherit; // Correct the text style of placeholders in Chrome, Edge, and Safari. [SE]
+}
+
+::-webkit-search-decoration {
+	-webkit-appearance: none; // Remove the inner padding in Chrome, Edge, and Safari on macOS [SE]
+}
+
+/**
+ * Media-related
+ */
+
+:where(audio, canvas, embed, iframe, img, object, picture, svg, video) {
+	max-width: 100%;
+	vertical-align: middle;
+}
+
+:where(audio, canvas, embed, iframe, img, object, svg, video) {
+	display: block;
+}
+
+:where(audio) {
+	width: 100%; // Better default width [CR]
+}
+
+:where(audio:not([controls])) {
+	display: none;
+}
+
+:where(canvas, img, svg, video) {
+	height: auto; // Maintain aspect ratios [CR]
+}
+
+:where(iframe) {
+	border-style: none;
+}
+
+:where(picture) {
+	display: contents; // Remove the unnecessary wrapping 'picture', while maintaining contents [CR]
+}
+
+:where(source) {
+	display: none; // Source elements have nothing to display, so we hide them entirely [CR]
+}
+
+:where(svg:not([fill])) {
+	fill: currentColor;
+}
+
+/**
+ * Attributes
+ */
+
+:where([disabled], [aria-disabled='true' i]) {
+	cursor: default;
+}
+
+[hidden] {
+	display: none !important;
+}
+
+:where([aria-busy='true' i]) {
+	cursor: progress;
+}
+
+:where([aria-controls]) {
+	cursor: pointer;
+}