@oscarpalmer/atoms 0.5.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 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,9 @@
+# Atoms
+
+[![npm](https://badge.fury.io/js/@oscarpalmer%2Fatoms.svg)](https://www.npmjs.com/package/@oscarpalmer/atoms)
+
+Sweet little atomic goodies…
+
+## License
+
+[MIT licensed](LICENSE), natch :wink:

package/dist/css/a11y.css

@@ -0,0 +1,14 @@
+.sr-focusable, .sr-only {
+  position: absolute !important;
+}
+.sr-focusable:not(:focus):not(:focus-within), .sr-only {
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !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,148 @@
+.fill {
+  flex: 1;
+}
+
+.flow,
+.stack {
+  display: flex;
+}
+
+.flow {
+  flex-flow: row wrap;
+  gap: var(--flow-gap, 1rem);
+  align-items: center;
+}
+.flow-large {
+  gap: calc(2 * var(--flow-gap, 1rem));
+}
+.flow-nowrap {
+  flex-wrap: nowrap;
+}
+.flow-reverse {
+  flex-flow: row-reverse wrap-reverse;
+}
+.flow-small {
+  gap: calc(0.5 * var(--flow-gap, 1rem));
+}
+.flow-nogap {
+  gap: 0;
+}
+
+.stack {
+  flex-flow: column nowrap;
+  gap: var(--stack-gap, 1rem);
+}
+.stack-large {
+  gap: calc(2 * var(--stack-gap, 1rem));
+}
+.stack-reverse {
+  flex-flow: column-reverse nowrap;
+}
+.stack-small {
+  gap: calc(0.5 * var(--stack-gap, 1rem));
+}
+.stack-nogap {
+  gap: 0;
+}
+
+.ac-c {
+  align-content: center;
+}
+.ac-fe {
+  align-content: flex-end;
+}
+.ac-fs {
+  align-content: flex-start;
+}
+.ac-s {
+  align-content: stretch;
+}
+
+.ai-c {
+  align-items: center;
+}
+.ai-fe {
+  align-items: flex-end;
+}
+.ai-fs {
+  align-items: flex-start;
+}
+.ai-s {
+  align-items: stretch;
+}
+
+.as-c {
+  align-self: center;
+}
+.as-fe {
+  align-self: flex-end;
+}
+.as-fs {
+  align-self: flex-start;
+}
+.as-s {
+  align-self: stretch;
+}
+
+.ac-sa {
+  align-content: space-around;
+}
+
+.ac-sb {
+  align-content: space-between;
+}
+
+.ac-se {
+  align-content: space-evenly;
+}
+
+.jc-c {
+  justify-content: center;
+}
+.jc-fe {
+  justify-content: flex-end;
+}
+.jc-fs {
+  justify-content: flex-start;
+}
+.jc-s {
+  justify-content: stretch;
+}
+
+.ji-c {
+  justify-items: center;
+}
+.ji-fe {
+  justify-items: flex-end;
+}
+.ji-fs {
+  justify-items: flex-start;
+}
+.ji-s {
+  justify-items: stretch;
+}
+
+.js-c {
+  justify-self: center;
+}
+.js-fe {
+  justify-self: flex-end;
+}
+.js-fs {
+  justify-self: flex-start;
+}
+.js-s {
+  justify-self: stretch;
+}
+
+.jc-sa {
+  justify-content: space-around;
+}
+
+.jc-sb {
+  justify-content: space-between;
+}
+
+.jc-se {
+  justify-content: space-evenly;
+}

package/dist/css/reset.css

@@ -0,0 +1,313 @@
+@charset "UTF-8";
+/*! https://github.com/oscarpalmer/atoms */
+/**
+ * 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;
+  box-sizing: border-box;
+  background-repeat: no-repeat;
+}
+
+::before,
+::after {
+  box-sizing: inherit;
+  text-decoration: inherit;
+  vertical-align: inherit;
+}
+
+/**
+ * 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;
+  -webkit-tap-highlight-color: transparent;
+}
+
+:where(body) {
+  min-height: 100vh;
+  font-size: 1rem;
+}
+
+/**
+ * General
+ */
+:where(a) {
+  background-color: transparent;
+}
+
+:where(abbr[title]) {
+  border-bottom: none;
+  text-decoration: underline;
+  text-decoration: underline dotted;
+}
+
+:where(b, strong) {
+  font-weight: bolder;
+}
+
+:where(button, [type=button i], [type=reset i], [type=submit i]) {
+  -webkit-appearance: button;
+  cursor: pointer;
+}
+
+:where(button, select) {
+  text-transform: none;
+}
+
+:where(button) {
+  overflow: visible;
+}
+
+: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, label, legend) {
+  line-height: 1.125;
+}
+
+: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) {
+  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(button, input) {
+  line-height: 1.25;
+}
+
+:where(fieldset) {
+  border: 1px solid darkgrey;
+}
+
+:where(optgroup) {
+  font-weight: bold;
+}
+
+:where(progress) {
+  vertical-align: baseline;
+}
+
+:where(select) {
+  -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;
+}
+
+select::-ms-expand {
+  display: none;
+}
+
+select::-ms-value {
+  color: currentColor;
+}
+
+:where(textarea) {
+  overflow: auto;
+  resize: vertical;
+}
+
+:where([type=color i], [type=range i]) {
+  border-width: 0;
+  padding: 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 {
+  color: inherit;
+  opacity: 0.54;
+}
+
+::-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(img) {
+  border-style: none;
+}
+
+:where(picture) {
+  display: contents;
+}
+
+:where(source) {
+  display: none;
+}
+
+:where(svg) {
+  overflow: hidden;
+}
+
+: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/dist/js/atoms.js

@@ -0,0 +1,36 @@
+// src/js/value.ts
+function getValue(data, key) {
+  if (typeof data !== "object" || data === null || isNullableOrWhitespace(key)) {
+    return;
+  }
+  const parts = getString(key).split(".");
+  const length = parts.length;
+  let index = 0;
+  let value = data;
+  while (typeof value === "object" && value !== null && index < length) {
+    value = value[parts[index++]];
+  }
+  return value;
+}
+function isNullable(value) {
+  return value === undefined || value === null;
+}
+
+// src/js/string.ts
+function createUuid() {
+  return uuidTemplate.replace(/[018]/g, (substring) => (substring ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> substring / 4).toString(16));
+}
+function getString(value2) {
+  return typeof value2 === "string" ? value2 : String(value2);
+}
+function isNullableOrWhitespace(value2) {
+  return isNullable(value2) || getString(value2).trim().length === 0;
+}
+var uuidTemplate = "10000000-1000-4000-8000-100000000000";
+export {
+  isNullableOrWhitespace,
+  isNullable,
+  getValue,
+  getString,
+  createUuid
+};

package/package.json

@@ -0,0 +1,67 @@
+{
+	"author": {
+		"name": "Oscar Palmér",
+		"url": "https://oscarpalmer.se"
+	},
+	"description": "Sweet little atomic goodies…",
+	"devDependencies": {
+		"@rollup/plugin-typescript": "^11.1",
+		"bun": "^1.0",
+		"prettier": "^3.1",
+		"rollup": "^4.5",
+		"sass": "^1.69",
+		"typescript": "^5.3",
+		"xo": "^0.56"
+	},
+	"exports": {
+		".": {
+			"types": "./types/index.d.ts",
+			"import": "./dist/index.js"
+		},
+		"./package.json": "./package.json"
+	},
+	"files": [
+		"dist",
+		"src",
+		"types"
+	],
+	"keywords": [],
+	"license": "MIT",
+	"main": "./dist/js/index.js",
+	"module": "./dist/js/index.js",
+	"name": "@oscarpalmer/atoms",
+	"prettier": {
+		"arrowParens": "avoid",
+		"bracketSpacing": false,
+		"singleQuote": true,
+		"switchIndent": true,
+		"trailingComma": "all",
+		"useTabs": true
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/oscarpalmer/atoms.git"
+	},
+	"scripts": {
+		"build": "npm run build:css && npm run build:js && npm run types",
+		"build:css": "npx sass ./src/css:./dist/css --no-source-map",
+		"build:js": "npx bun build ./src/js/index.ts --outfile ./dist/js/atoms.js",
+		"test": "npx bun test --coverage",
+		"types": "npx tsc ./src/js/index.ts --declaration --declarationDir ./types --emitDeclarationOnly",
+		"watch:css": "npx sass ./src/css:./dist/css --no-source-map --watch",
+		"watch:js": "npx bun build ./src/js/index.ts --outfile ./dist/js/atoms.js --watch"
+	},
+	"type": "module",
+	"types": "./types/index.d.ts",
+	"version": "0.5.0",
+	"xo": {
+		"envs": [
+			"browser"
+		],
+		"prettier": true,
+		"rules": {
+			"import/extensions": "off",
+			"import/no-cycle": "off"
+		}
+	}
+}

package/src/css/a11y.scss

@@ -0,0 +1,19 @@
+.sr {
+	&-focusable,
+	&-only {
+		position: absolute !important;
+	}
+
+	&-focusable:not(:focus):not(:focus-within),
+	&-only {
+		width: 1px !important;
+		height: 1px !important;
+		padding: 0 !important;
+		margin: -1px !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,78 @@
+.fill {
+	flex: 1;
+}
+
+.flow,
+.stack {
+	display: flex;
+}
+
+.flow {
+	flex-flow: row wrap;
+	gap: var(--flow-gap, 1rem);
+	align-items: center;
+
+	&-large {
+		gap: calc(2 * var(--flow-gap, 1rem));
+	}
+
+	&-nowrap {
+		flex-wrap: nowrap;
+	}
+
+	&-reverse {
+		flex-flow: row-reverse wrap-reverse;
+	}
+
+	&-small {
+		gap: calc(0.5 * var(--flow-gap, 1rem));
+	}
+
+	&-nogap {
+		gap: 0;
+	}
+}
+
+.stack {
+	flex-flow: column nowrap;
+	gap: var(--stack-gap, 1rem);
+
+	&-large {
+		gap: calc(2 * var(--stack-gap, 1rem));
+	}
+
+	&-reverse {
+		flex-flow: column-reverse nowrap;
+	}
+
+	&-small {
+		gap: calc(0.5 * var(--stack-gap, 1rem));
+	}
+
+	&-nogap {
+		gap: 0;
+	}
+}
+
+$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 {
+		.#{$typeKey}#{$alignmentOriginKey} {
+			@each $alignmentValueKey, $alignmentValueValue in $alignmentValues {
+				&-#{$alignmentValueKey} {
+					#{$typeValue}-#{$alignmentOriginValue}: #{$alignmentValueValue}
+				}
+			}
+		}
+	}
+
+	@each $justificationValueKey, $justificationValueValue in $justificationValues {
+		.#{$typeKey}c-#{$justificationValueKey} {
+			#{$typeValue}-content: #{$justificationValueValue}
+		}
+	}
+}

package/src/css/reset.scss

@@ -0,0 +1,320 @@
+/*! https://github.com/oscarpalmer/atoms */
+/**
+ * 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;
+	box-sizing: border-box;
+	background-repeat: no-repeat;
+}
+
+::before,
+::after {
+	box-sizing: inherit;
+	text-decoration: inherit;
+	vertical-align: inherit;
+}
+
+/**
+ * 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;
+	-webkit-tap-highlight-color: transparent; // Remove the gray highlight on active links in IE 10 [SE]
+}
+
+:where(body) {
+	min-height: 100vh;
+	font-size: 1rem;
+}
+
+/**
+ * General
+ */
+
+:where(a) {
+	background-color: transparent; // Remove the gray background on active links in IE10 [RS]
+}
+
+:where(abbr[title]) {
+	border-bottom: none; // Remove the bottom border in Chrome 57 [RS]
+	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, [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(button, select) {
+	text-transform: none; // Undo transformation in Firefox 40+ and IE11 [RS]
+}
+
+:where(button) {
+	overflow: visible; // Address 'overflow' set to 'hidden' in IE8–11 [RS]
+}
+
+: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, label, legend) {
+	line-height: 1.125;
+}
+
+: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) {
+	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(button, input) {
+	line-height: 1.25;
+}
+
+: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) {
+	-webkit-appearance: none; // Change the inconsistent appearance in all browsers [SE]
+	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]
+}
+
+select::-ms-expand {
+	display: none; // Hide in IE11+ [RS]
+}
+
+select::-ms-value {
+	color: currentColor; // Set text colour in IE11+ [RS]
+}
+
+:where(textarea) {
+	overflow: auto; // Allow overflow in IE11+ [RS]
+	resize: vertical; // Change the resize direction in all browsers [RS][SE]
+}
+
+:where([type='color' i], [type='range' i]) {
+	border-width: 0; // Remove the border and padding in all browsers [SE]
+	padding: 0; // ditto
+}
+
+: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 {
+	color: inherit; // Correct the text style of placeholders in Chrome, Edge, and Safari. [SE]
+	opacity: 0.54; // ditto
+}
+
+::-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(img) {
+	border-style: none; // Remove the border on images inside links in IE 10 and earlier [CR]
+}
+
+: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) {
+	overflow: hidden; // Hide the overflow in IE 10 and earlier [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;
+}

package/src/js/index.ts

@@ -0,0 +1,2 @@
+export * from './string';
+export * from './value';

package/src/js/string.ts

@@ -0,0 +1,31 @@
+import {isNullable} from './value';
+
+const uuidTemplate = '10000000-1000-4000-8000-100000000000';
+
+/**
+ * Create a new UUID
+ */
+export function createUuid(): string {
+	return uuidTemplate.replace(/[018]/g, (substring: any) =>
+		(
+			substring ^
+			(crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (substring / 4)))
+		).toString(16),
+	);
+}
+
+/**
+ * Get the string value from any value
+ */
+export function getString(value: unknown): string {
+	return typeof value === 'string' ? value : String(value);
+}
+
+/**
+ * Is the value undefined, null, or an empty string?
+ */
+export function isNullableOrWhitespace(
+	value: unknown,
+): value is undefined | null | '' {
+	return isNullable(value) || getString(value).trim().length === 0;
+}

package/src/js/value.ts

@@ -0,0 +1,34 @@
+import {getString, isNullableOrWhitespace} from './string';
+
+/**
+ * - Get the value from an object using a path
+ * - You can retrieve a nested value by using a dot notation path
+ */
+export function getValue(data: unknown, key: unknown): unknown {
+	if (
+		typeof data !== 'object' ||
+		data === null ||
+		isNullableOrWhitespace(key)
+	) {
+		return undefined;
+	}
+
+	const parts = getString(key).split('.');
+	const length = parts.length;
+
+	let index = 0;
+	let value = data;
+
+	while (typeof value === 'object' && value !== null && index < length) {
+		value = value[parts[index++]];
+	}
+
+	return value;
+}
+
+/**
+ * Is the value undefined or null?
+ */
+export function isNullable(value: unknown): value is undefined | null {
+	return value === undefined || value === null;
+}

package/types/index.d.ts

@@ -0,0 +1,2 @@
+export * from './string';
+export * from './value';

package/types/string.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Create a new UUID
+ */
+export declare function createUuid(): string;
+/**
+ * Get the string value from any value
+ */
+export declare function getString(value: unknown): string;
+/**
+ * Is the value undefined, null, or an empty string?
+ */
+export declare function isNullableOrWhitespace(value: unknown): value is undefined | null | '';

package/types/value.d.ts

@@ -0,0 +1,9 @@
+/**
+ * - Get the value from an object using a path
+ * - You can retrieve a nested value by using a dot notation path
+ */
+export declare function getValue(data: unknown, key: unknown): unknown;
+/**
+ * Is the value undefined or null?
+ */
+export declare function isNullable(value: unknown): value is undefined | null;