@oscarpalmer/oui 0.38.0 → 0.40.0

package/src/css/reset.scss

@@ -1,392 +0,0 @@
-/*! 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.
- *
- * - 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"
- *   https://frontendmasters.com/blog/the-coyier-css-starter/
- *
- * - CSS Remedy
- *   https://github.com/jensimmons/cssremedy
- *
- * - Harry Roberts
- * - https://github.com/csswizardry
- *
- * - Interface Cheat sheet
- * - https://interfaces.dev/cheat-sheet
- *
- * - RESS
- *   https://github.com/filipelinhares/ress
- *
- * - Sanitize.css
- *   https://github.com/csstools/sanitize.css
- */
-
-// #region Globals
-
-:where(*) {
-	padding: 0;
-	margin: 0;
-}
-
-:where(*),
-::after,
-::before {
-	box-sizing: border-box;
-}
-
-// #endregion
-
-// #region Document
-
-:where(:root) {
-	font-family: system-ui, sans-serif;
-	font-size: 100%;
-	line-height: 1.5;
-	text-size-adjust: none;
-	tab-size: 4;
-	overflow-wrap: break-word;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-}
-
-:where(body) {
-	min-height: 100vh;
-	font-size: 1rem;
-}
-
-// #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]) {
-	cursor: help;
-}
-
-:where(abbr[title]) {
-	text-decoration: underline;
-	text-decoration: underline dotted;
-}
-
-:where(b, strong) {
-	font-weight: bold;
-}
-
-:where(button, h1, h2, h3, h4, h5, h6, input, label, legend) {
-	line-height: 1.125;
-}
-
-:where(
-	button,
-	input[type='button' i],
-	input[type='checkbox' i],
-	input[type='file' i],
-	input[type='image' i],
-	input[type='radio' i],
-	input[type='reset' i],
-	input[type='submit' i],
-	summary
-) {
-	appearance: auto;
-	cursor: pointer;
-}
-
-:where(code, kbd, output, pre, samp) {
-	font-family: monospace, monospace;
-	font-size: inherit;
-}
-
-:where(details > summary:first-of-type) {
-	display: list-item;
-}
-
-:where(dialog) {
-	display: none !important;
-	overflow: visible;
-	overscroll-behavior: contain;
-	border: none;
-	color: currentcolor;
-}
-
-:where([oui-dialog][aria-modal='true' i]) {
-	position: fixed;
-	inset: 50% auto auto 50%;
-	transform: translate3d(-50%, -50%, 0);
-}
-
-:where(dialog[open]) {
-	display: inherit !important;
-}
-
-:where(dl, ol, ul) :where(dl, ol, ul) {
-	margin: 0;
-}
-
-:where(h1, h2, h3, h4, h5, h6) {
-	text-wrap: balance;
-}
-
-:where(h1) {
-	font-size: 2em;
-}
-
-:where(hr) {
-	height: 0;
-	overflow: visible;
-	border-style: solid;
-	border-width: 1px 0 0;
-	color: inherit;
-}
-
-:where(ins, u) {
-	text-decoration: none;
-}
-
-:where(nav) :where(ol, ul),
-:where(ul[class]) {
-	list-style-type: none;
-	padding: 0;
-}
-
-:where(nav li)::before {
-	content: '\200B';
-	float: left;
-}
-
-:where(pre) {
-	overflow: auto;
-	white-space: pre-wrap;
-}
-
-:where(small, sub, sup) {
-	font-size: 0.875em;
-}
-
-:where(sub, sup) {
-	vertical-align: baseline;
-	line-height: 0;
-	position: relative;
-}
-
-:where(sub) {
-	bottom: -0.25em;
-}
-
-:where(sup) {
-	top: -0.5em;
-}
-
-:where(table) {
-	border-collapse: collapse;
-	border-color: currentcolor;
-	border-spacing: 0;
-	font-variant-numeric: tabular-nums;
-	text-indent: 0;
-}
-
-// #endregion
-
-// #region Forms
-
-: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, input[list]) {
-	appearance: none;
-	padding-right: 1.5em;
-	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 0.5em center;
-	background-repeat: no-repeat;
-	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]) {
-	appearance: textfield;
-	outline-offset: -2px;
-}
-
-::file-selector-button {
-	appearance: auto;
-	color: inherit;
-	font: inherit;
-	line-height: 1.25;
-}
-
-::placeholder {
-	opacity: 0.67;
-	color: inherit;
-}
-
-::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
-	height: auto;
-}
-
-::-webkit-search-decoration {
-	appearance: none;
-}
-
-// #endregion
-
-// #region Media
-
-:where(audio, canvas, embed, iframe, img, object, picture, svg, video) {
-	max-inline-size: 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) {
-	block-size: auto;
-}
-
-:where(iframe) {
-	border-style: none;
-}
-
-:where(img) {
-	background-repeat: no-repeat;
-	background-size: cover;
-	outline: 1px solid light-dark(rgb(255 255 255 / 8%), rgb(0 0 0 / 8%));
-	font-style: italic;
-}
-
-:where(picture) {
-	display: contents;
-}
-
-:where(source) {
-	display: none;
-}
-
-:where(svg:not([fill])) {
-	fill: currentcolor;
-}
-
-// #endregion
-
-// #region Attributes
-
-:where([aria-busy='true' i]) {
-	cursor: progress;
-}
-
-:where([aria-controls]) {
-	cursor: pointer;
-}
-
-:where([disabled], [aria-disabled='true' i]) {
-	cursor: default;
-}
-
-[hidden] {
-	display: none !important;
-}
-
-:where([popover]) {
-	display: none !important;
-	overflow: visible;
-	overscroll-behavior: contain;
-	border: none;
-	color: currentcolor;
-}
-
-:where([popover]:popover-open) {
-	display: inherit !important;
-}
-
-// #endregion
-
-// #region Pseudo-classes
-
-:where(:target) {
-	scroll-margin: 2rlh;
-}
-
-// #endregion
-
-// #region Media queries
-
-@media (prefers-reduced-motion: no-preference) {
-	:where(:root) {
-		interpolate-size: allow-keywords;
-	}
-
-	:where(:root:focus-within) {
-		scroll-behavior: smooth;
-	}
-}
-
-@media (prefers-reduced-motion: reduce) {
-	:where(:root:focus-within) {
-		scroll-behavior: auto;
-	}
-
-	:where(*),
-	::after,
-	::before {
-		animation-duration: 0.01ms !important;
-		animation-iteration-count: 1 !important;
-		transition-duration: 0.01ms !important;
-		scroll-behavior: auto !important;
-	}
-}
-
-// #endregion

package/src/css/splitter.scss

@@ -1,89 +0,0 @@
-/*! https://github.com/oscarpalmer/oui */
-
-oui-splitter {
-	:where(&) {
-		display: flex;
-		flex-flow: row nowrap;
-		flex: 1;
-	}
-
-	:where(& > :first-child) {
-		flex: var(--oui-splitter-size, 0.5);
-	}
-
-	:where(& > :last-child) {
-		flex: calc(1 - var(--oui-splitter-size, 0.5));
-	}
-}
-
-:where([oui-splitter-separator]) {
-	width: 0.25rem;
-	background-color: rgb(0 0 0 / 10%);
-	border-radius: 0.25rem;
-	position: relative;
-	transition: background 0.125s ease-in-out;
-}
-
-: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%);
-}
-
-:where([oui-splitter-handle]) {
-	width: 2rem;
-	height: 4rem;
-	padding: 0.875rem;
-	position: absolute;
-	inset: 50% auto auto 50%;
-	transform: translate3d(-50%, -50%, 0);
-	cursor: ew-resize;
-
-	&:focus {
-		outline: none;
-	}
-
-	&::after {
-		content: '';
-		width: 100%;
-		height: 100%;
-		display: block;
-		background-color: rgb(0 0 0 / 25%);
-		outline: 0.25rem solid transparent;
-		outline-offset: 0.25rem;
-		border-radius: 0.25rem;
-		transition:
-			background 0.125s ease-in-out,
-			outline 0.125s ease-in-out;
-	}
-}
-
-:where([oui-splitter-handle]:focus-visible),
-:where([oui-splitter-handle]:hover),
-:where([oui-splitter-handle][oui-splitter-active]) {
-	&::after {
-		background-color: color-mix(in oklab, var(--oui-blue-6), transparent 50%);
-	}
-}
-
-:where([oui-splitter-handle]:focus-visible)::after {
-	outline-color: color-mix(in oklab, var(--oui-blue-6), transparent 50%);
-}
-
-oui-splitter[type='horizontal' i],
-oui-splitter[oui-splitter-horizontal] {
-	:where(&) {
-		flex-flow: column nowrap;
-	}
-
-	:where(& [oui-splitter-separator]) {
-		width: 100%;
-		height: 0.25rem;
-	}
-
-	:where(& [oui-splitter-handle]) {
-		width: 4rem;
-		height: 2rem;
-		cursor: ns-resize;
-	}
-}

package/src/css/table.scss

@@ -1,107 +0,0 @@
-/*! https://github.com/oscarpalmer/oui */
-
-.oui-table {
-	:where(&) {
-		width: 100%;
-		background-color: var(--oui-absolute);
-	}
-
-	:where(&_wrapper) {
-		max-height: 32em;
-		overflow: auto;
-		overscroll-behavior: contain;
-		border: 1px solid var(--oui-gray-3);
-		border-radius: 0.25em;
-		position: relative;
-	}
-
-	:where(& caption) {
-		height: 2rem;
-		align-content: center;
-		background-color: var(--oui-gray-1);
-		border: solid var(--oui-gray-3);
-		border-width: 0 0 1px;
-		font-size: 0.875rem;
-		text-align: left;
-		text-indent: 0.5rem;
-		position: sticky;
-		top: 0;
-		z-index: 2;
-	}
-
-	:where(& tbody tr:nth-of-type(2n)) {
-		background-color: color-mix(in oklab, var(--oui-blue-0), transparent 50%);
-	}
-
-	:where(& th, & tfoot td) {
-		background-color: var(--oui-gray-1);
-		border: solid var(--oui-gray-3);
-		border-width: 0 1px 0 0;
-	}
-
-	:where(& thead th, & tfoot td) {
-		position: sticky;
-		left: 0;
-		z-index: 1;
-
-		&::after {
-			content: '';
-			width: 100%;
-			height: 4px;
-			background-image: linear-gradient(
-				to var(--oui-shadow-direction),
-				rgb(0 0 0 / 10%),
-				transparent
-			);
-			position: absolute;
-		}
-	}
-
-	:where(& th, & td) {
-		padding: 0.5em 0.625rem;
-	}
-
-	:where(& thead th) {
-		font-size: 0.75rem;
-		font-weight: bold;
-		letter-spacing: 0.1em;
-		text-align: left;
-		text-transform: uppercase;
-		top: 0;
-
-		&::after {
-			--oui-shadow-direction: bottom;
-
-			border-top: 1px solid var(--oui-gray-3);
-			inset: 100%;
-		}
-	}
-
-	:where(&:has(caption) thead th) {
-		top: 2rem;
-	}
-
-	:where(& tfoot td) {
-		bottom: 0;
-
-		&::after {
-			--oui-shadow-direction: top;
-
-			border-bottom: 1px solid var(--oui-gray-3);
-			inset: -4px;
-		}
-	}
-
-	:where(& tbody td) {
-		border: solid var(--oui-gray-3);
-		border-width: 0 1px 1px 0;
-	}
-
-	:where(& tbody tr:last-child td) {
-		border-bottom-width: 0;
-	}
-
-	:where(& tr th:last-child, & tr td:last-child) {
-		border-right-width: 0;
-	}
-}

package/src/css/tabs.scss

@@ -1,74 +0,0 @@
-/*! https://github.com/oscarpalmer/oui */
-
-@use './mixins/button.mixins.scss' as buttonMixins;
-
-oui-tabs {
-	:where(&) {
-		display: flex;
-	}
-
-	:where(&:not([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);
-		border: 1px solid var(--oui-gray-3);
-		position: relative;
-		z-index: 0;
-	}
-}
-
-[oui-tabs-tab] {
-	:where(&) {
-		@include buttonMixins.button;
-
-		font-size: 0.75rem;
-		flex-shrink: 0;
-		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;
-		position: relative;
-		z-index: 0;
-	}
-
-	:where(&:focus-within) {
-		z-index: 1;
-	}
-
-	&[aria-orientation='horizontal' i] {
-		:where(&) {
-			margin: 0 0 0.5em;
-			flex-flow: row wrap;
-		}
-	}
-
-	&[aria-orientation='vertical' i] {
-		:where(&) {
-			margin: 0 0.5em 0 0;
-			flex-flow: column wrap;
-		}
-	}
-}