@schalkneethling/miyagi-core 4.0.2

package/frontend/assets/css/iframe.css

@@ -0,0 +1,410 @@
+@import url("./tokens.css") layer(miyagi);
+@import url("./shared.css") layer(miyagi);
+@import url("./iframe/prism.css") layer(miyagi);
+@import url("./iframe/accordion-tabs.css") layer(miyagi);
+@import url("./iframe/jsontree.js.css") layer(miyagi);
+@import url("./iframe/styleguide/index.css") layer(miyagi);
+
+html {
+	--iframe-spacing: clamp(0.75rem, 4vi, 2.5rem);
+
+	height: 100%;
+}
+
+body {
+	background: var(--color-Iframe-background);
+	margin: 0;
+	min-height: 100%;
+	font-family: var(--font-family);
+	color: var(--color-Iframe-text);
+}
+
+.Wrapper {
+	box-sizing: border-box;
+	padding: var(--iframe-spacing);
+	width: 100%;
+}
+
+a {
+	color: var(--color-Iframe-link);
+	text-decoration: underline;
+}
+
+a:focus-visible,
+summary:focus-visible,
+button:focus-visible {
+	outline: 3px solid currentcolor;
+	outline-offset: 2px;
+	border-radius: 0.25em;
+}
+
+code[class*="language-"],
+pre[class*="language-"] {
+	text-shadow: none;
+	box-shadow: none;
+	border-radius: 0;
+}
+
+.Documentation code,
+.Code code,
+:not(pre) > code[class*="language-"] {
+	font-size-adjust: 0.525;
+	text-shadow: none;
+}
+
+.Documentation,
+.Information,
+.Code code,
+:not(pre) > code[class*="language-"],
+.ErrorMessage {
+	line-height: calc(1ex / 0.32);
+}
+
+.Information code,
+.Documentation code,
+.Code code,
+:not(pre) > code[class*="language-"] {
+	font-family: Menlo, Monaco, monospace;
+}
+
+.Documentation h1 {
+	font-size: 2.4em;
+	font-weight: bold;
+	line-height: 1;
+	text-transform: capitalize;
+}
+
+.Documentation > * + * {
+	margin-top: calc(1ex / 0.32);
+}
+
+.Documentation i {
+	font-style: italic;
+}
+
+.Documentation table {
+	border-spacing: 0;
+}
+
+.Documentation th {
+	text-align: left;
+	border-block-end: 0.0625rem solid currentcolor;
+}
+
+.Documentation :is(th, td) {
+	padding: 0.25em 0.5em;
+}
+
+.Documentation tr:not(:last-child) td {
+	border-block-end: 0.0625rem solid var(--color-Outline);
+}
+
+.Information-val {
+	margin-inline-start: 0;
+}
+
+.Component-variationHeader {
+	display: flex;
+	gap: 16px;
+	position: absolute;
+	inset-inline-end: 40px;
+	top: 13px;
+	font-size: 14px;
+	line-height: 1;
+}
+
+.Documentation > *:first-child {
+	margin-top: 0;
+}
+
+.Documentation p {
+	max-width: 64ch;
+}
+
+.SectionTitle {
+	align-items: center;
+	display: flex;
+	font-size: 1.6em;
+	margin: 2em 0 1em;
+	scroll-margin-top: 1.5em;
+}
+
+.SectionTitle::after {
+	background: var(--color-Outline);
+	content: "";
+	flex: 1;
+	height: 0.0625rem;
+	margin-inline-start: 20px;
+}
+
+.Information-wrapper + .Information-wrapper {
+	margin-top: 30px;
+}
+
+.Information-attr {
+	color: var(--color-Iframe-text-secondary);
+	font-family: var(--font-family);
+	font-size: 0.875em;
+	letter-spacing: 0.0375em;
+	text-decoration: none;
+	text-transform: uppercase;
+}
+
+.Information-attr:not(:first-child) {
+	margin-top: 1em;
+}
+
+.Information code,
+.Documentation code {
+	font-weight: 600;
+}
+
+.Status::before {
+	display: inline-block;
+	margin-inline-end: 0.5em;
+}
+
+.Status--valid {
+	color: var(--color-Positive);
+}
+
+.Status--valid::before {
+	content: "✓";
+}
+
+.Status--invalid {
+	color: var(--color-Negative);
+}
+
+.Status--invalid::before {
+	content: "✗";
+}
+
+.Error {
+	align-items: center;
+	color: var(--color-Negative);
+	display: flex;
+	height: 100%;
+	justify-content: center;
+	margin: 0;
+}
+
+.ErrorMessage {
+	color: var(--color-Negative);
+	margin: 1.5em 0;
+}
+
+.Iframe-newTabLink {
+	align-items: center;
+	display: flex;
+	font-weight: normal;
+}
+
+.Iframe-newTabLink::before {
+	content: "";
+	display: block;
+	width: 1em;
+	height: 1em;
+	margin-inline-end: 0.5em;
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' focusable='false' aria-hidden='true'%3E%3Cpath d='M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3'%3E%3C/path%3E%3C/svg%3E");
+}
+
+pre[class*="language-"],
+.Code,
+:not(pre) > code[class*="language-"] {
+	background: var(--color-Code-background);
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	border-color: var(--color-Outline);
+}
+
+.Code,
+:not(pre) > code[class*="language-"] {
+	border: 0.0625rem solid var(--color-Outline);
+	padding: calc(var(--iframe-spacing) / 2);
+}
+
+.Code,
+pre[class*="language-"] {
+	font-size: 0.875em;
+}
+
+.Tabs-tab summary {
+	cursor: default;
+	list-style-type: none;
+	padding-block: 10px;
+	padding-inline-start: 16px;
+	position: relative;
+}
+
+.Tabs-tab summary::before {
+	border: var(--toggle-border);
+	border-color: currentcolor;
+	border-top-width: 0.25em;
+	border-inline-end-width: 0.25em;
+	content: "";
+	display: block;
+	font-size: 0.4em;
+	height: var(--toggle-height);
+	inset-inline-start: 0.25rem;
+	position: absolute;
+	top: 50%;
+	transition: var(--toggle-transition);
+	width: var(--toggle-width);
+}
+
+.Tabs-tab summary::-webkit-details-marker {
+	display: none;
+}
+
+.Tabs-tab:not([open]) summary::before {
+	transform: var(--toggle-transition-closed);
+}
+
+.Tabs-tab[open] summary::before {
+	transform: var(--toggle-transition-opened);
+}
+
+.Component:not(:last-child) {
+	margin-bottom: calc(2 * var(--iframe-spacing));
+}
+
+.Component-iframeWrapper {
+	height: calc(100vh - 2.5 * var(--iframe-spacing));
+	width: 100%;
+}
+
+.Component-iframeWrapper:not(.has-fixedHeight) {
+	outline: 0.0625rem solid var(--color-Outline);
+	resize: both;
+}
+
+.Component-iframe {
+	height: 100%;
+	width: 100%;
+}
+
+.Component-head {
+	display: flex;
+	justify-content: space-between;
+	flex-wrap: wrap;
+	gap: 10px;
+	padding: 0 0 20px;
+}
+
+.Component-headMeta {
+	display: flex;
+	align-items: center;
+	gap: 16px;
+}
+
+.Component-mockValidation {
+	appearance: none;
+	border: none;
+	background: none;
+	color: var(--color-Iframe-link);
+	cursor: pointer;
+	margin: 0;
+	padding: 0;
+	font-size: inherit;
+	font-family: var(--font-family);
+	line-height: 1;
+	text-decoration: underline;
+}
+
+.Component-mockData {
+	background: light-dark(hsl(0deg 0% 95%), hsl(0deg 0% 12%));
+	border: none;
+	padding: var(--iframe-spacing);
+	width: calc(100vi - 2 * var(--iframe-spacing));
+	height: calc(100vb - 2 * var(--iframe-spacing));
+	max-width: 70ch;
+	box-sizing: border-box;
+	overscroll-behavior: contain;
+}
+
+.Component-mockData::backdrop {
+	background: light-dark(rgb(255 255 255 / 80%), rgb(0 0 0 / 80%));
+}
+
+.Component-mockData:not([open]) {
+	display: none;
+}
+
+.Component-mockDataHeading {
+	margin-block: 0 1em;
+}
+
+.Component-closeMockData {
+	appearance: none;
+	background: none;
+	padding: 0;
+	margin: 0;
+	border: 0;
+	color: var(--color-Iframe-link);
+	text-decoration: underline;
+	cursor: pointer;
+	line-height: 1;
+	font-family: var(--font-family);
+	font-size: 0.875em;
+	position: absolute;
+	inset-block-start: 1rem;
+	inset-inline-end: 1rem;
+}
+
+.Component-file {
+	align-items: center;
+	color: var(--color-Iframe-text-secondary);
+	display: inline-flex;
+	flex-wrap: wrap;
+	font-family: var(--font-family);
+	font-size: 0.875em;
+	letter-spacing: 0.0375em;
+	text-decoration: none;
+	text-transform: uppercase;
+}
+
+.Component-file:hover,
+.Component-file:focus,
+.Component-file:active {
+	text-decoration: underline;
+}
+
+.Component-fileFolders {
+	color: var(--color-Iframe-text-tertiary);
+}
+
+.ComponentView {
+	border: 0.0625rem solid var(--color-Outline);
+	box-sizing: border-box;
+	height: calc(100vh - 2 * var(--iframe-spacing));
+	overflow: hidden;
+	resize: both;
+	width: 100%;
+}
+
+.ComponentView-iframe {
+	height: 100%;
+	width: 100%;
+}
+
+[data-mode="presentation"] .DeveloperInformation {
+	display: none;
+}
+
+@media screen and (prefers-reduced-motion) {
+	*,
+	*::after,
+	*::before {
+		animation: none !important;
+		transition: none !important;
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	.Iframe-newTabLink::before {
+		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' focusable='false' aria-hidden='true'%3E%3Cpath d='M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3'%3E%3C/path%3E%3C/svg%3E");
+	}
+}

package/frontend/assets/css/main/menu/config-switcher.css

@@ -0,0 +1,49 @@
+/** @define ConfigSwitcher; */
+
+.ConfigSwitcher-options {
+	display: flex;
+	gap: 0.5rem;
+	margin-block-start: 0.25rem;
+}
+
+.ConfigSwitcher-option {
+	position: relative;
+}
+
+.ConfigSwitcher [type="radio"] {
+	position: absolute;
+	inset-block-start: 0;
+	inset-inline-start: 0;
+	opacity: 0.01;
+}
+
+.ConfigSwitcher label {
+	display: flex;
+	padding: 0.25em;
+	cursor: pointer;
+}
+
+.ConfigSwitcher :checked + label {
+	outline: 0.0625em solid currentcolor;
+}
+
+.ConfigSwitcher input:focus-visible + label {
+	outline: var(--outline);
+	outline-offset: var(--outline-offset);
+}
+
+.ConfigSwitcher svg {
+	block-size: 1em;
+	inline-size: 1em;
+	fill: var(--color-Link);
+}
+
+.ConfigSwitcher :checked + label svg {
+	fill: var(--color-Link-active, var(--color-Link));
+}
+
+@media (width <= 40rem) {
+	.ConfigSwitchers {
+		margin-block-start: 1rem;
+	}
+}

package/frontend/assets/css/main/menu/config-switchers.css

@@ -0,0 +1,67 @@
+@import url("./config-switcher.css");
+
+.ConfigSwitchers {
+	display: flex;
+	background: var(--bar-background);
+}
+
+.ConfigSwitchers-toggle {
+	--size: var(--bar-size);
+
+	align-items: center;
+	color: var(--color-Icon);
+	display: flex;
+	flex-shrink: 0;
+	gap: 0.5em;
+	cursor: pointer;
+	border-block-start: var(--divider);
+	inline-size: 100%;
+
+	svg {
+		display: block;
+		inline-size: var(--size);
+		block-size: var(--size);
+		padding: 0.45em;
+	}
+}
+
+.ConfigSwitchers-toggle:focus-visible {
+	outline-offset: calc(-1 * var(--outline-offset));
+}
+
+.ConfigSwitchers-toggleClose {
+	fill: currentcolor;
+	block-size: 75%;
+	inline-size: 75%;
+}
+
+.ConfigSwitchers-toggle[aria-expanded="false"] .ConfigSwitchers-toggleClose {
+	display: none;
+}
+
+.ConfigSwitchers-toggle[aria-expanded="true"] .ConfigSwitchers-toggleOpen {
+	display: none;
+}
+
+.ConfigSwitchers-container {
+	padding: var(--bar-size);
+	padding-inline-start: calc(2 * var(--bar-size));
+	flex: 1;
+	position: absolute;
+	z-index: 2;
+	inset-block: 0 calc(var(--bar-size) + 0.0625rem);
+	inset-inline: 0;
+	background: var(--bar-background);
+}
+
+.ConfigSwitchers-container > * + * {
+	margin-block-start: var(--menu-spacing);
+}
+
+.ConfigSwitchers-toggle[aria-expanded="false"] ~ .ConfigSwitchers-container {
+	display: none;
+}
+
+.ConfigSwitchers-toggle[aria-expanded="true"] ~ .ConfigSwitchers-container {
+	display: block;
+}

package/frontend/assets/css/main/menu/goto.css

@@ -0,0 +1,24 @@
+.GoTo {
+	box-shadow: 0 0 1rem rgb(0 0 0 / 50%);
+	position: fixed;
+	inset-block-start: 50%;
+	inset-inline-start: 50%;
+	transform: translate(-50%, -50%);
+	background: var(--color-Menu-background);
+	padding: 0.25em 0.5em 0.5em;
+	inline-size: calc(100% - 1rem);
+	max-inline-size: 20em;
+}
+
+.GoTo-label {
+	display: block;
+}
+
+.GoTo-input {
+	outline: var(--divider);
+	box-shadow: 0.1em 0.1em 0.3em rgb(0 0 0 / 20%) inset;
+	background: var(--color-Menu-background);
+	padding: 0.35em 0.5em;
+	margin-block-start: 0.25em;
+	inline-size: 100%;
+}

package/frontend/assets/css/main/menu/nav.css

@@ -0,0 +1,113 @@
+/** @define Nav; */
+
+.Nav-entry {
+	position: relative;
+}
+
+.Nav-entry:not(.Nav-entry--lvl0)::before {
+	content: "";
+	display: block;
+	inline-size: var(--bar-size);
+	position: absolute;
+	inset-block: 0;
+	inset-inline-start: 0;
+	background: var(--color-MenuBar-background);
+}
+
+.Nav-entry--directory {
+	border-block-start: var(--divider);
+}
+
+.Nav-entry--lvl0:last-child {
+	border-block-end: var(--divider);
+}
+
+.Nav-wrapper {
+	position: relative;
+}
+
+.Nav-toggle {
+	display: block;
+	position: absolute;
+	z-index: 1;
+	inset-block: 0;
+	inset-inline-end: 0;
+	inline-size: var(--bar-size);
+}
+
+.Nav-toggle::after {
+	border: var(--toggle-border);
+	border-block-start-width: var(--toggle-borderWidth);
+	border-inline-end-width: var(--toggle-borderWidth);
+	content: "";
+	display: block;
+	font-size: var(--toggle-fontSize);
+	block-size: var(--toggle-height);
+	position: absolute;
+	inset-block-start: 50%;
+	inset-inline-start: 50%;
+	transition: var(--toggle-transition);
+	inline-size: var(--toggle-width);
+}
+
+.Nav-toggle[aria-expanded="false"]::after {
+	transform: var(--toggle-transition-closed);
+}
+
+.Nav-toggle[aria-expanded="true"]::after {
+	transform: var(--toggle-transition-opened);
+	border-color: var(--color-Text);
+}
+
+.Nav-item,
+.Nav-variant {
+	display: block;
+	padding-block: var(--menu-spacing);
+	padding-inline-start: calc(var(--level, 1) * 1em + var(--menu-spacing));
+	margin-inline-start: var(--bar-size);
+}
+
+:where(.Nav-item, .Nav-variant):not(:has(mark)),
+:where(.Nav-item, .Nav-variant) mark {
+	text-transform: capitalize;
+}
+
+:where(.Nav-item, .Nav-variant)[aria-current="page"] {
+	background: var(--color-Link-active-background);
+	color: var(--color-Link-active, var(--color-Link));
+}
+
+.is-no-match:not(:has(.is-match)) {
+	display: none;
+}
+
+.Nav-entry--directory.has-match > .Nav-toggle,
+.Nav-entry--directory.is-match * {
+	opacity: 1 !important;
+}
+
+.Nav-item--directory {
+	color: var(--color-Link);
+	cursor: default;
+	opacity: 0.75;
+}
+
+.Nav-item--link {
+	font-weight: 600;
+}
+
+.Nav-item--link,
+.Nav-variant {
+	color: var(--color-Link);
+	text-decoration: none;
+}
+
+.Nav-item--link:where(:hover, :focus),
+.Nav-variant:where(:hover, :focus) {
+	text-decoration: underline;
+}
+
+.Nav-toggle:focus-visible,
+.Nav-item:focus-visible {
+	outline-offset: calc(-1 * var(--outline-offset));
+}

package/frontend/assets/css/main/menu/search.css

@@ -0,0 +1,64 @@
+/** @define Search; */
+
+.Search {
+	border-block: var(--divider);
+	display: flex;
+	margin-block-end: var(--spacing-x);
+	position: relative;
+}
+
+.Search-label {
+	--size: var(--bar-size);
+
+	align-items: center;
+	display: flex;
+	flex-shrink: 0;
+	block-size: var(--size);
+	justify-content: center;
+	inline-size: var(--size);
+}
+
+.Search-clear:not([hidden]) {
+	--size: var(--bar-size);
+
+	align-items: center;
+	display: flex;
+	justify-content: center;
+	inline-size: var(--size);
+	block-size: var(--size);
+	border-radius: 50%;
+	position: absolute;
+	inset-inline-end: 0;
+	inset-block-start: 0;
+}
+
+.Search-icon {
+	color: var(--color-Icon);
+	display: block;
+	inline-size: 50%;
+	block-size: 50%;
+}
+
+.Search-icon path {
+	fill: currentcolor;
+}
+
+.Search-icon circle {
+	fill: none;
+	stroke: currentcolor;
+}
+
+.Search-input {
+	padding: 0.35em var(--menu-spacing);
+	padding-inline-end: 2.5em;
+	inline-size: calc(100% - var(--bar-size));
+}
+
+.Search-input:focus {
+	outline: none;
+	background: var(--color-Link-active-background);
+}
+
+.Search-clear:focus-visible {
+	outline-offset: calc(-1 * var(--outline-offset));
+}