@burger-editor/client 4.0.0-alpha.2 → 4.0.0-alpha.22

package/dist/client.css

@@ -1,10 +1,10 @@
-@charset "UTF-8";
-	dl.svelte-s2t554 {
+@charset "utf-8";
+	dl.svelte-1hna6ki {
 		padding: 0;
 		margin: 0;
 	}
 
-	dt.svelte-s2t554 {
+	dt.svelte-1hna6ki {
 		margin-block-end: 10px;
 		font-size: 1.1em;
 		font-weight: bold;
@@ -12,51 +12,54 @@
 		border-block-end: 1px #565a49 dotted;
 	}
 
-	dl.svelte-s2t554 > div:where(.svelte-s2t554) {
+	dl.svelte-1hna6ki > div:where(.svelte-1hna6ki) {
 		display: grid;
 		grid-template-columns: repeat(auto-fill, minmax(6em, 1fr));
 		gap: 0.5em;
 	}
 
-	dd.svelte-s2t554 {
+	dd.svelte-1hna6ki {
 		padding: 0;
 		margin: 0;
 	}
 
-	button.svelte-s2t554 {
+	button.svelte-1hna6ki {
 		display: flex;
 		align-items: start;
 		inline-size: 100%;
 		block-size: 100%;
-		padding: 0.5em 0.5em;
+		padding: 0.5em;
 		margin: 0;
 		appearance: none;
 	}
 
-	figure.svelte-s2t554 {
-		margin: 0 auto;
+	figure.svelte-1hna6ki {
+		margin-block: 0;
+		margin-inline: auto;
 	}
 
-	.img.svelte-s2t554 > :where(.svelte-s2t554) {
+	.img.svelte-1hna6ki > :where(.svelte-1hna6ki) {
 		display: block;
 		inline-size: 71px;
 		block-size: 56px;
-		margin: 0 auto;
+		margin-block: 0;
+		margin-inline: auto;
 		background-repeat: no-repeat;
 		border-radius: 10px;
 	}
 
-	figcaption.svelte-s2t554 {
+	figcaption.svelte-1hna6ki {
 		padding-block-start: 0.5em;
 		font-size: 0.6em;
 		font-weight: bold;
 		text-align: center;
 	}
 
-	button.svelte-1m6pw9u {
+	button.svelte-4wfsd1 {
 		anchor-name: var(--name);
 		display: block;
-		padding: 0.2em 0.5em;
+		padding-block: 0.2em;
+		padding-inline: 0.5em;
 		font-size: 1.5em;
 		color: var(--bge-lightest-color);
 		pointer-events: all;
@@ -64,7 +67,7 @@
 		border: none;
 	}
 
-	div.svelte-1m6pw9u:is(:where(.svelte-1m6pw9u):hover, :where(.svelte-1m6pw9u):focus-within) button:where(.svelte-1m6pw9u) {
+	div.svelte-4wfsd1:is(:where(.svelte-4wfsd1):hover, :where(.svelte-4wfsd1):focus-within) button:where(.svelte-4wfsd1) {
 		background-color: color-mix(
 			in srgb,
 			var(--bge-ui-primary-color) 70%,
@@ -72,7 +75,7 @@
 		);
 	}
 
-	span.svelte-1m6pw9u {
+	span.svelte-4wfsd1 {
 		position: absolute;
 		z-index: 1000;
 		display: none;
@@ -88,11 +91,11 @@
 		border-radius: 0.6em;
 	}
 
-	div.svelte-1m6pw9u:is(:where(.svelte-1m6pw9u):hover, :where(.svelte-1m6pw9u):focus-within) span:where(.svelte-1m6pw9u) {
+	div.svelte-4wfsd1:is(:where(.svelte-4wfsd1):hover, :where(.svelte-4wfsd1):focus-within) span:where(.svelte-4wfsd1) {
 		display: block;
 	}
 
-	.bge-menu-base.svelte-15fci6 {
+	.bge-menu-base.svelte-1fv4q6w {
 		position: absolute;
 		inset-block-start: var(--y);
 		inset-inline-start: var(--x);
@@ -101,9 +104,8 @@
 		pointer-events: none;
 	}
 
-	.bge-menu-margin.svelte-15fci6 {
+	.bge-menu-margin.svelte-1fv4q6w {
 		--_line-color: rgb(from var(--bge-ui-primary-color) r g b / 10%);
-		container: margin-view / size;
 		position: absolute;
 		inset-block-end: 0;
 		inset-inline-start: 0;
@@ -113,6 +115,7 @@
 		justify-content: center;
 		inline-size: 100%;
 		block-size: var(--margin-block-end);
+		container: margin-view / size;
 		font-size: 0.8em;
 		font-weight: bold;
 		color: var(--bge-ui-primary-color);
@@ -127,9 +130,10 @@
 	}
 
 	@container margin-view (height < 1em) {
-		.bge-menu-margin.svelte-15fci6 {
-			span:where(.svelte-15fci6) {
-				padding: 0.2em 0.4em;
+		.bge-menu-margin.svelte-1fv4q6w {
+			span:where(.svelte-1fv4q6w) {
+				padding-block: 0.2em;
+				padding-inline: 0.4em;
 				color: var(--bge-lightest-color);
 				background: var(--bge-ui-primary-color);
 				border-radius: 0.2em;
@@ -137,7 +141,7 @@
 		}
 	}
 
-	.bge-menu.svelte-15fci6 {
+	.bge-menu.svelte-1fv4q6w {
 		--gap: 0.2em;
 		display: flex;
 		align-items: start;
@@ -149,8 +153,8 @@
 		outline: 4px solid var(--bge-ui-primary-color);
 	}
 
-	.bge-move-group.svelte-15fci6,
-	.bge-standard-group.svelte-15fci6 {
+	.bge-move-group.svelte-1fv4q6w,
+	.bge-standard-group.svelte-1fv4q6w {
 		inset-block-start: 0;
 		display: flex;
 		gap: var(--gap);
@@ -158,67 +162,69 @@
 		padding: var(--gap);
 	}
 
-	.draft-btn.svelte-1t1s8gh {
+	.draft-btn.svelte-17zpf86 {
 		display: flex;
 		justify-content: space-between;
 	}
 
-	button.svelte-1t1s8gh {
+	button.svelte-17zpf86 {
 		display: block;
-		padding: 3px 5px;
+		padding-block: 3px;
+		padding-inline: 5px;
 		color: #333;
 		text-decoration: none;
 		background-color: var(--bge-background-color01);
 		border: var(--bge-border-primary-color) solid 1px;
 	}
 
-	.draft-tab-btn.svelte-1t1s8gh {
+	.draft-tab-btn.svelte-17zpf86 {
 		display: flex;
 	}
 
 	/* stylelint-disable declaration-no-important */
-	.draft-tab-btn.svelte-1t1s8gh button[aria-pressed='true']:where(.svelte-1t1s8gh) {
+	.draft-tab-btn.svelte-17zpf86 button[aria-pressed='true']:where(.svelte-17zpf86) {
 		color: var(--bge-lightest-color) !important;
 		background-color: var(--bge-background-color02) !important;
 		border-color: var(--bge-background-color02) !important;
 	}
+
 	/* stylelint-enable declaration-no-important */
 
-	.draft-tab-btn.svelte-1t1s8gh button:where(.svelte-1t1s8gh):hover {
+	.draft-tab-btn.svelte-17zpf86 button:where(.svelte-17zpf86):hover {
 		cursor: pointer;
 		background-color: var(--bge-border-primary-color);
 	}
 
-	.draft-tab-btn.svelte-1t1s8gh button:where(.svelte-1t1s8gh) span:where(.svelte-1t1s8gh) {
+	.draft-tab-btn.svelte-17zpf86 button:where(.svelte-17zpf86) span:where(.svelte-17zpf86) {
 		margin-inline-start: 0.5em;
 		font-size: 0.8em;
 	}
 
-	.draft-tab-btn.svelte-1t1s8gh button:where(.svelte-1t1s8gh) span:where(.svelte-1t1s8gh)::before {
+	.draft-tab-btn.svelte-17zpf86 button:where(.svelte-17zpf86) span:where(.svelte-17zpf86)::before {
 		content: '(';
 	}
 
-	.draft-tab-btn.svelte-1t1s8gh button:where(.svelte-1t1s8gh) span:where(.svelte-1t1s8gh)::after {
+	.draft-tab-btn.svelte-17zpf86 button:where(.svelte-17zpf86) span:where(.svelte-17zpf86)::after {
 		content: ')';
 	}
 
-	.draft-copy-btn.svelte-1t1s8gh {
+	.draft-copy-btn.svelte-17zpf86 {
 		display: flex;
 	}
 
-	.draft-copy-btn.svelte-1t1s8gh button:where(.svelte-1t1s8gh):hover {
+	.draft-copy-btn.svelte-17zpf86 button:where(.svelte-17zpf86):hover {
 		cursor: pointer;
 		background-color: var(--bge-border-primary-color);
 	}
 
-	span.svelte-1zu56m {
+	span.svelte-by6cmj {
 		display: block;
 		inline-size: 100%;
 		block-size: 100%;
 	}
 
-	img.svelte-1zu56m,
-	video.svelte-1zu56m {
+	img.svelte-by6cmj,
+	video.svelte-by6cmj {
 		display: block;
 		inline-size: 100%;
 		block-size: 100%;
@@ -226,39 +232,39 @@
 		transition: opacity 300ms linear;
 	}
 
-	[data-loaded='false'].svelte-1zu56m img:where(.svelte-1zu56m) {
+	[data-loaded='false'].svelte-by6cmj img:where(.svelte-by6cmj) {
 		opacity: 0;
 	}
 
-	[data-loaded='true'].svelte-1zu56m img:where(.svelte-1zu56m) {
+	[data-loaded='true'].svelte-by6cmj img:where(.svelte-by6cmj) {
 		opacity: 1;
 	}
 
-	.ctrl.svelte-15rcfwg {
+	.ctrl.svelte-6hu200 {
 		display: flex;
 		gap: 2em;
 		margin-block-end: 1em;
 	}
 
-	.pagination.svelte-15rcfwg {
+	.pagination.svelte-6hu200 {
 		display: flex;
 		flex: 1 0 auto;
 		gap: 1em;
 		align-items: center;
 		justify-content: center;
 
-		button:where(.svelte-15rcfwg) {
+		button:where(.svelte-6hu200) {
 			user-select: none;
 		}
 	}
 
-	.page.svelte-15rcfwg {
+	.page.svelte-6hu200 {
 		display: flex;
 		gap: 0.5em;
 		align-items: center;
 	}
 
-	.list.svelte-15rcfwg {
+	.list.svelte-6hu200 {
 		display: flex;
 		flex-direction: column;
 		gap: 0.5em;
@@ -266,14 +272,14 @@
 		margin: 0;
 	}
 
-	.list.svelte-15rcfwg li:where(.svelte-15rcfwg) {
+	.list.svelte-6hu200 li:where(.svelte-6hu200) {
 		position: relative;
 		padding: 0;
 		margin: 0;
 		list-style: none;
 	}
 
-	.file.svelte-15rcfwg {
+	.file.svelte-6hu200 {
 		z-index: 0;
 		display: flex;
 		gap: 1em;
@@ -284,29 +290,29 @@
 		border: none;
 	}
 
-	.file.svelte-15rcfwg > span:where(.svelte-15rcfwg) {
+	.file.svelte-6hu200 > span:where(.svelte-6hu200) {
 		display: block;
 	}
 
-	.file.svelte-15rcfwg > span.thumbnail:where(.svelte-15rcfwg) {
+	.file.svelte-6hu200 > span.thumbnail:where(.svelte-6hu200) {
 		display: block;
 		flex: 0 0 7em;
 		inline-size: 7em;
 		block-size: 7em;
 	}
 
-	.file.svelte-15rcfwg > span.attr:where(.svelte-15rcfwg) {
+	.file.svelte-6hu200 > span.attr:where(.svelte-6hu200) {
 		display: grid;
 		grid-template-columns: max-content 1fr;
 		gap: 0.2em 1em;
 		align-items: baseline;
 	}
 
-	.file.svelte-15rcfwg > span.attr:where(.svelte-15rcfwg) > span:where(.svelte-15rcfwg):nth-child(odd)::after {
+	.file.svelte-6hu200 > span.attr:where(.svelte-6hu200) > span:where(.svelte-6hu200):nth-child(odd)::after {
 		content: ':';
 	}
 
-	.delete.svelte-15rcfwg {
+	.delete.svelte-6hu200 {
 		position: absolute;
 		inset-block-end: 0.7em;
 		inset-inline-end: 0.7em;
@@ -321,30 +327,30 @@
 		}
 	}
 
-	.file[aria-pressed='true'].svelte-15rcfwg + .delete:where(.svelte-15rcfwg) {
+	.file[aria-pressed='true'].svelte-6hu200 + .delete:where(.svelte-6hu200) {
 		--bge-outline-color: #fff;
 		--bge-border-color: #fff;
 		color: #fff;
 		background-color: var(--bge-ui-primary-color);
 	}
 
-	li.svelte-15rcfwg:is(:where(.svelte-15rcfwg):focus-within:has(:where(.svelte-15rcfwg):focus-visible), :where(.svelte-15rcfwg):hover) .delete:where(.svelte-15rcfwg) {
+	li.svelte-6hu200:is(:where(.svelte-6hu200):focus-within:has(:where(.svelte-6hu200):focus-visible), :where(.svelte-6hu200):hover) .delete:where(.svelte-6hu200) {
 		opacity: 1;
 	}
 
-	input[type='file'].svelte-1kuhunj {
+	input[type='file'].svelte-uefuli {
 		display: none;
 	}
 
-	.img.svelte-1ie51m5 {
+	.img.svelte-1sdkkhr {
 		position: relative;
 		overflow: hidden;
 
-		img:where(.svelte-1ie51m5),
-		video:where(.svelte-1ie51m5),
-		audio:where(.svelte-1ie51m5),
-		object:where(.svelte-1ie51m5),
-		p:where(.svelte-1ie51m5) {
+		img:where(.svelte-1sdkkhr),
+		video:where(.svelte-1sdkkhr),
+		audio:where(.svelte-1sdkkhr),
+		object:where(.svelte-1sdkkhr),
+		p:where(.svelte-1sdkkhr) {
 			position: relative;
 			z-index: 0;
 			display: block;
@@ -354,18 +360,18 @@
 			object-fit: contain;
 		}
 
-		p:where(.svelte-1ie51m5) {
+		p:where(.svelte-1sdkkhr) {
 			display: flex;
 			align-items: center;
 			justify-content: center;
 			background: rgb(0 0 0 / 10%);
 		}
 
-		&.uploading img:where(.svelte-1ie51m5) {
+		&.uploading img:where(.svelte-1sdkkhr) {
 			object-fit: cover;
 		}
 
-		.progress:where(.svelte-1ie51m5) {
+		.progress:where(.svelte-1sdkkhr) {
 			position: absolute;
 			inset-block-start: 0;
 			z-index: 10;
@@ -375,7 +381,7 @@
 		}
 	}
 
-	ul.svelte-1ie51m5 {
+	ul.svelte-1sdkkhr {
 		display: flex;
 		flex-wrap: wrap;
 		gap: 0.3em;
@@ -389,26 +395,26 @@
 		opacity: 0.7;
 	}
 
-	li.svelte-1ie51m5 {
+	li.svelte-1sdkkhr {
 		display: block;
 		padding: 0;
 		margin: 0;
 		list-style: none;
 	}
 
-	.path.svelte-1ie51m5 {
+	.path.svelte-1sdkkhr {
 		word-break: break-all;
 
-		a:where(.svelte-1ie51m5) {
+		a:where(.svelte-1sdkkhr) {
 			color: inherit;
 		}
 	}
 
-	.upload.svelte-1ie51m5 .progress:where(.svelte-1ie51m5) {
+	.upload.svelte-1sdkkhr .progress:where(.svelte-1sdkkhr) {
 		font-style: italic;
 	}
 
-	.dimension.svelte-1ie51m5 {
+	.dimension.svelte-1sdkkhr {
 		&::before {
 			content: '(';
 		}
@@ -418,347 +424,580 @@
 		}
 	}
 
-	.table.svelte-37o4yi {
+	.table.svelte-sj6f65 {
 		display: grid;
 		grid-template-columns: minmax(1em, 1fr) minmax(1em, 1fr) auto;
 		gap: 0.5em 1em;
 	}
 
-	.row.svelte-37o4yi {
+	.row.svelte-sj6f65 {
 		display: grid;
 		grid-template-columns: subgrid;
 		grid-column: span 3;
 		align-items: center;
 	}
 
-	textarea.svelte-37o4yi {
+	textarea.svelte-sj6f65 {
 		inline-size: 100%;
 		resize: vertical;
 	}
 
-	.btn.svelte-37o4yi ul:where(.svelte-37o4yi) {
+	.btn.svelte-sj6f65 ul:where(.svelte-sj6f65) {
 		display: flex;
 		gap: 0.3em;
 		padding: 0;
 		margin: 0;
 	}
 
-	.btn.svelte-37o4yi li:where(.svelte-37o4yi) {
+	.btn.svelte-sj6f65 li:where(.svelte-sj6f65) {
 		padding: 0;
 		margin: 0;
 		list-style: none;
 	}
 
+	:root {
+		--border-radius: 0.5em;
+	}
+
+	[role='tablist'].svelte-ruvo7f {
+		display: flex;
+		gap: 0.5em;
+		align-items: center;
+		padding-inline: var(--border-radius);
+	}
+
+	[role='tab'].svelte-ruvo7f {
+		position: relative;
+		border: 1px solid var(--bge-border-color);
+		border-end-start-radius: 0;
+		border-end-end-radius: 0;
+
+		&[aria-selected='true'] {
+			border-block-end: none;
+
+			&::after {
+				position: absolute;
+				inset-block-start: 100%;
+				inset-inline-start: 50%;
+				display: block;
+				inline-size: 1em;
+				block-size: 0.5em;
+				content: '';
+				background-color: var(--bge-ui-primary-color);
+				clip-path: polygon(0 0, 50% 100%, 100% 0);
+				translate: -50% 0;
+			}
+		}
+	}
+
+
 :root {
-  --bge-lightest-color: #fff;
-  --bge-darkest-color: #000;
-  --bge-border-primary-color: #cfd1cf;
-  --bge-background-color01: #f5f5f5;
-  --bge-background-color02: #555;
-  --bge-border-color: #c6c6d8;
-  --bge-ui-primary-color: #0c7e9e;
-  --bge-ui-background-color: #eaedf0;
-  --bge-button-background-color: var(--bge-lightest-color);
-  --bge-dialog-font-color: #0f1533;
-  --bge-dialog-background-color: var(--bge-ui-background-color);
-  --bge-focus-outline-width: 2px;
-  --bge-tooltip-background-color: rgba(0 0 0 / 60%);
+	--bge-lightest-color: #fff;
+	--bge-darkest-color: #000;
+	--bge-border-primary-color: #cfd1cf;
+	--bge-background-color01: #f5f5f5;
+	--bge-background-color02: #555;
+	--bge-border-color: #c6c6d8;
+	--bge-ui-primary-color: #0c7e9e;
+	--bge-ui-background-color: #eaedf0;
+	--bge-button-background-color: var(--bge-lightest-color);
+	--bge-dialog-font-color: #0f1533;
+	--bge-dialog-background-color: var(--bge-ui-background-color);
+	--bge-focus-outline-width: 2px;
+	--bge-tooltip-background-color: rgb(0 0 0 / 60%);
+	--bge-font-family-monospace: 'Courier New', monospace;
 }
 
 :where(body:has(dialog[open])) {
-  overflow: hidden;
+	overflow: hidden;
 }
 
 :where(dialog[open]) {
-  --dialog-margin: 40px;
-  --dialog-margin-inline: var(--dialog-margin);
-  --dialog-margin-block: var(--dialog-margin);
-  --border-radius: 0.5em;
-  display: grid;
-  grid-template-rows: minmax(0, 1fr) auto;
-  inline-size: calc(100vw - var(--dialog-margin-inline) * 2);
-  max-inline-size: 40em;
-  max-block-size: calc(100vh - var(--dialog-margin-block) * 2);
-  padding: 0;
-  padding-block: 1em;
-  overscroll-behavior: contain;
-  color: var(--bge-dialog-font-color);
-  resize: both;
-  background: var(--bge-dialog-background-color);
-  border: none;
-  border-radius: var(--border-radius);
-}
-:where(:where(dialog[open]) *) {
-  box-sizing: border-box;
-}
-:where(dialog[open])::backdrop {
-  background: rgba(0, 0, 1, 0.6);
-}
-:where(dialog[open]):has([data-bge-dialog="2col"]), :where(dialog[open]):has([data-bge-dialog=wide]) {
-  max-inline-size: 80em;
-}
-:where(dialog[open])[style*="width:"] {
-  max-inline-size: none;
-}
-:where(dialog[open]) > div {
-  --padding-block: 0em;
-  --padding-inline: 1em;
-  padding-block: calc(var(--padding-block) + var(--bge-focus-outline-width));
-  padding-inline: calc(var(--padding-inline) + var(--bge-focus-outline-width));
-  overflow: auto;
-  outline: none;
-}
-:where(dialog[open]) > div > form {
-  block-size: max-content;
-  margin: 0;
-}
-:where(dialog[open]) > footer {
-  --padding-block: 1em;
-  --padding-inline: 1em;
-  display: flex;
-  gap: 0.5em;
-  justify-content: flex-end;
-  padding-block-start: calc(var(--padding-block) + var(--bge-focus-outline-width));
-  padding-inline: calc(var(--padding-inline) + var(--bge-focus-outline-width));
-  background: var(--bge-dialog-background-color);
-}
-:where(dialog[open]) [data-bge-dialog="2col"] {
-  display: flex;
-  gap: 2em;
-  align-items: flex-start;
-}
-:where(dialog[open]) [data-bge-dialog="2col"] > div {
-  flex: 0 0 calc(50% - 1em);
-}
-:where(dialog[open]) [data-bge-dialog-ui*=sticky] {
-  position: sticky;
-  inset-block-start: 0;
-  z-index: 1;
-  background: var(--bge-dialog-background-color);
-}
+	--dialog-margin: 40px;
+	--dialog-margin-inline: var(--dialog-margin);
+	--dialog-margin-block: var(--dialog-margin);
+	--border-radius: 0.5em;
+	display: grid;
+	grid-template-rows: minmax(0, 1fr) auto;
+	inline-size: calc(100vw - (var(--dialog-margin-inline) * 2));
+	max-inline-size: 40em;
+	max-block-size: calc(100vh - (var(--dialog-margin-block) * 2));
+	padding: 0;
+	padding-block: 1em;
+	overscroll-behavior: contain;
+	font-size: 16px;
+	color: var(--bge-dialog-font-color);
+	resize: both;
+	background: var(--bge-dialog-background-color);
+	border: none;
+	border-radius: var(--border-radius);
 
-:where(dialog[open], [data-bge-component=block-menu]) :where(input:is(:not([type]),
-[type=text],
-[type=number],
-[type=password],
-[type=email],
-[type=url],
-[type=tel],
-[type=search],
-[type=color],
-[type=date],
-[type=time],
-[type=datetime-local],
-[type=month],
-[type=week]),
-select,
-textarea) {
-  inline-size: 100%;
-  padding: 0.5em 0.7em;
-  font-size: inherit;
-  line-height: 1.1;
-  border: 1px solid var(--bge-border-color);
-  border-radius: var(--border-radius);
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(input:not([type=radio], [type=checkbox], [type=range]),
-select,
-textarea,
-[contenteditable]) {
-  background: var(--bge-lightest-color);
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(input:not([type=radio], [type=checkbox], [type=range]),
-select,
-textarea,
-[contenteditable]):disabled {
-  background: initial;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(input, textarea, select, button, [contenteditable]):focus-visible {
-  --bge-border-color: var(--bge-ui-primary-color);
-  --bge-outline-color: var(--bge-ui-primary-color);
-  --allow-color: var(--bge-ui-primary-color);
-  outline: var(--bge-focus-outline-width) solid var(--bge-outline-color);
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(select) {
-  --allow-size: 0.4em;
-  --allow-padding: 0.5em;
-  --allow-color: currentColor;
-  --separator-width: 1px;
-  --separator-height: calc(100% - 4px * 2);
-  --separator-color: var(--bge-border-color);
-  appearance: none;
-  background-image: linear-gradient(45deg, transparent 50%, var(--allow-color) 50%), linear-gradient(135deg, var(--allow-color) 50%, transparent 50%), linear-gradient(to right, var(--separator-color), var(--separator-color));
-  background-repeat: no-repeat;
-  background-position: right calc(var(--allow-padding) + var(--allow-size) * 2) center, right calc(var(--allow-padding) + var(--allow-size) * 1 + 1px) center, right calc(var(--allow-padding) * 2 + var(--allow-size) * 4) center;
-  background-size: var(--allow-size) var(--allow-size), var(--allow-size) var(--allow-size), var(--separator-width) var(--separator-height);
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(textarea) {
-  field-sizing: content;
-  max-block-size: 50vh;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(button) {
-  padding: 0.5em 1em;
-  font-size: inherit;
-  line-height: 1.1;
-  appearance: none;
-  cursor: pointer;
-  background: var(--bge-button-background-color);
-  border: 1px solid var(--bge-border-color);
-  border-radius: 0.5em;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(button)[aria-pressed=true] {
-  color: #fff;
-  background-color: var(--bge-ui-primary-color);
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(button)[aria-pressed=true]:focus-visible {
-  box-shadow: 0 0 0 2px #fff inset;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(input:is([type=checkbox], [type=radio], [type=range])) {
-  inline-size: 1.5em;
-  block-size: 1.5em;
-  margin: 0;
-  accent-color: var(--bge-ui-primary-color);
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(input:is([type=range])) {
-  inline-size: 100%;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(label:not([for], :has(+ button))):last-of-type {
-  padding-block-end: 0;
-  border-block-end: none;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(label:not([for], :has(+ button))):has(+ small[id]):has(input[aria-describedby]) {
-  margin-block-end: 0.3em;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(label:not([for])) {
-  display: block;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(:is(label:not([for]), small[id]) + :is(label:not([for], :has([type=checkbox], [type=radio], [type=range])))) {
-  padding-block-start: 1em;
-  margin-block-start: 1em;
-  border-block-start: 1px solid var(--bge-border-color);
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(:is(label:not([for]), small[id]) + fieldset) {
-  margin-block-start: 1em;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(label:not([for]) > span:has(+ input, + select, + textarea)) {
-  display: block;
-  margin-block-end: 0.3em;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(label:not([for]):has(input:is([type=checkbox], [type=radio]))) {
-  display: flex;
-  gap: 0.3em;
-  align-items: center;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(fieldset) {
-  padding: 1em;
-  margin-block-end: 1em;
-  border: 1px solid var(--bge-border-color);
-  border-radius: 0.5em;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where([role=radiogroup]) {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 1em;
-  margin-block: 0.3em;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where([role=radiogroup]) > :not(label):first-child::after {
-  content: ":";
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where([role=radiogroup]) > label {
-  padding: 0;
-  margin: 0;
-  border: none;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(hr) {
-  block-size: 1px;
-  margin-block: 1em;
-  background: var(--bge-border-color);
-  border: none;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(div:has(input):has(> button:last-child)) {
-  display: flex;
-  gap: 0.5em;
-  align-items: center;
-  justify-content: flex-end;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(div:has(input):has(> button:last-child)):has(> label) {
-  align-items: flex-end;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(div:has(input):has(> button:last-child)):has(> label) > label {
-  flex-grow: 1;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(iframe) {
-  display: block;
-  inline-size: 100%;
-  border: none;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where(code) {
-  display: inline-block;
-  padding: 0.1em 0.3em;
-  font-weight: bold;
-  vertical-align: middle;
-  color: color-mix(in srgb, currentcolor 80%, var(--bge-lightest-color) 20%);
-  background: color-mix(in srgb, var(--bge-dialog-background-color) 80%, var(--bge-lightest-color) 20%);
-  border: 1px solid color-mix(in srgb, var(--bge-border-color) 80%, var(--bge-lightest-color) 20%);
-  border-radius: 0.3em;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where([data-bge-editor-ui]) {
-  margin-block-start: 1em;
-}
-:where(dialog[open], [data-bge-component=block-menu]) :where([data-bge-editor-ui]):first-child {
-  margin-block-start: 0;
-}
+	:where(&, *) {
+		box-sizing: border-box;
+	}
 
-[data-bge-component$=-editable-area][data-bge-component-mode=visual] iframe {
-  display: block;
-  margin: 0 auto;
-  overflow: hidden;
-  border: none;
-}
-[data-bge-component$=-editable-area][data-bge-component-mode=visual] textarea {
-  display: none;
-}
-[data-bge-component$=-editable-area][data-bge-component-mode=source] iframe {
-  display: none;
-}
+	&::backdrop {
+		background: rgb(0 0 1 / 60%);
+	}
 
-[data-bgi] {
-  min-inline-size: 20px;
-  min-block-size: 20px;
-  outline: 1px #a6a6a6 dotted;
-}
-[data-bgi]:hover {
-  cursor: pointer;
-  outline: 1px solid var(--bge-ui-primary-color);
-  background-color: var(--bge-ui-background-color);
+	&:has([data-bge-dialog='2col']),
+	&:has([data-bge-dialog='wide']) {
+		max-inline-size: 80em;
+	}
+
+	&[style*='width:'] {
+		max-inline-size: none;
+	}
+
+	> div {
+		--padding-block: 0em; /* stylelint-disable-line length-zero-no-unit */
+		--padding-inline: 1em;
+		padding-block: calc(var(--padding-block) + var(--bge-focus-outline-width));
+		padding-inline: calc(var(--padding-inline) + var(--bge-focus-outline-width));
+		overflow: auto;
+		outline: none;
+	}
+
+	> div > form {
+		block-size: max-content;
+		margin: 0;
+	}
+
+	> footer {
+		--padding-block: 1em;
+		--padding-inline: 1em;
+		display: flex;
+		gap: 0.5em;
+		justify-content: flex-end;
+		padding-block-start: calc(var(--padding-block) + var(--bge-focus-outline-width));
+		padding-inline: calc(var(--padding-inline) + var(--bge-focus-outline-width));
+		background: var(--bge-dialog-background-color);
+	}
+
+	[data-bge-dialog='2col'] {
+		display: flex;
+		gap: 2em;
+		align-items: flex-start;
+	}
+
+	[data-bge-dialog='2col'] > div {
+		flex: 0 0 calc(50% - 2em / 2);
+	}
+
+	[data-bge-dialog-ui*='sticky'] {
+		position: sticky;
+		inset-block-start: 0;
+		z-index: 1;
+		background: var(--bge-dialog-background-color);
+	}
+}
+
+:where(dialog[open], [data-bge-component='block-menu']) {
+	:where(
+		input:is(
+			:not([type]),
+			[type='text'],
+			[type='number'],
+			[type='password'],
+			[type='email'],
+			[type='url'],
+			[type='tel'],
+			[type='search'],
+			[type='color'],
+			[type='date'],
+			[type='time'],
+			[type='datetime-local'],
+			[type='month'],
+			[type='week']
+		),
+		select,
+		textarea
+	) {
+		inline-size: 100%;
+		padding-block: 0.5em;
+		padding-inline: 0.7em;
+		font-size: 1em;
+		line-height: 1.1;
+	}
+
+	:where(
+		input:not([type='radio'], [type='checkbox'], [type='range']),
+		select,
+		textarea,
+		[contenteditable]
+	) {
+		background: var(--bge-lightest-color);
+		border: 1px solid var(--bge-border-color);
+		border-radius: var(--border-radius);
+
+		&:disabled {
+			background: initial;
+		}
+	}
+
+	:where(input, textarea, select, button, [contenteditable]):focus-visible {
+		--bge-border-color: var(--bge-ui-primary-color);
+		--bge-outline-color: var(--bge-ui-primary-color);
+		--allow-color: var(--bge-ui-primary-color);
+		outline: var(--bge-focus-outline-width) solid var(--bge-outline-color);
+	}
+
+	:where(select) {
+		--allow-size: 0.4em;
+		--allow-padding: 0.5em;
+		--allow-color: currentColor;
+		--separator-width: 1px;
+		--separator-height: calc(100% - 4px * 2);
+		--separator-color: var(--bge-border-color);
+		appearance: none;
+		background-image:
+			linear-gradient(45deg, transparent 50%, var(--allow-color) 50%),
+			linear-gradient(135deg, var(--allow-color) 50%, transparent 50%),
+			linear-gradient(to right, var(--separator-color), var(--separator-color));
+		background-repeat: no-repeat;
+		background-position:
+			right calc(var(--allow-padding) + var(--allow-size) * 2) center,
+			right calc(var(--allow-padding) + var(--allow-size) * 1 + 1px) center,
+			right calc(var(--allow-padding) * 2 + var(--allow-size) * 4) center;
+		background-size:
+			var(--allow-size) var(--allow-size),
+			var(--allow-size) var(--allow-size),
+			var(--separator-width) var(--separator-height);
+	}
+
+	:where(textarea) {
+		field-sizing: content;
+		max-block-size: 50vh;
+	}
+
+	:where(button) {
+		padding-block: 0.5em;
+		padding-inline: 1em;
+		font-size: inherit;
+		line-height: 1.1;
+		appearance: none;
+		cursor: pointer;
+		background: var(--bge-button-background-color);
+		border: 1px solid var(--bge-border-color);
+		border-radius: var(--border-radius);
+	}
+
+	:where(button:is([aria-pressed='true'], [aria-selected='true'])) {
+		color: #fff;
+		background-color: var(--bge-ui-primary-color);
+
+		&:focus-visible {
+			box-shadow: 0 0 0 2px #fff inset;
+		}
+	}
+
+	:where(input:is([type='checkbox'], [type='radio'], [type='range'])) {
+		inline-size: 1.5em;
+		block-size: 1.5em;
+		margin: 0;
+		accent-color: var(--bge-ui-primary-color);
+	}
+
+	:where(input:is([type='range'])) {
+		inline-size: 100%;
+	}
+
+	:where(label:not([for], :has(+ button))) {
+		&:last-of-type {
+			padding-block-end: 0;
+			border-block-end: none;
+		}
+
+		&:has(+ small[id]):has(input[aria-describedby]) {
+			margin-block-end: 0.3em;
+		}
+	}
+
+	:where(label:not([for])) {
+		display: block;
+	}
+
+	:where(
+		:is(label:not([for]), small[id], [role='radiogroup'])
+			~ :is(
+				label:not([for]),
+				div:has(> label, > span > label):has(> :is(input, select, textarea)),
+				[role='radiogroup']
+			)
+	) {
+		padding-block-start: 1em;
+		margin-block-start: 1em;
+		border-block-start: 1px solid var(--bge-border-color);
+	}
+
+	:where(:is(label:not([for]), small[id]) + fieldset) {
+		margin-block-start: 1em;
+	}
+
+	:where(label:not([for]) > span:has(+ input, + select, + textarea)) {
+		display: block;
+		margin-block-end: 0.3em;
+	}
+
+	:where(label:not([for]):has(input:is([type='checkbox'], [type='radio']))) {
+		display: flex;
+		gap: 0.3em;
+		align-items: center;
+	}
+
+	:where(fieldset) {
+		padding: 1em;
+		margin-block-start: 1em;
+		border: 1px solid var(--bge-border-color);
+		border-radius: var(--border-radius);
+
+		&:first-child {
+			margin-block-start: 0;
+		}
+	}
+
+	:where([role='radiogroup']) {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 1em;
+
+		> :not(label):first-child {
+			&::after {
+				content: ':';
+			}
+		}
+
+		> label {
+			padding: 0;
+			margin: 0;
+			border: none;
+		}
+	}
+
+	:where(div:has(input):has(> button:last-child)) {
+		display: flex;
+		gap: 0.5em;
+		align-items: center;
+		justify-content: flex-end;
+
+		&:has(> label) {
+			align-items: flex-end;
+
+			> label {
+				flex-grow: 1;
+			}
+		}
+	}
+
+	:where(iframe) {
+		display: block;
+		inline-size: 100%;
+		border: none;
+	}
+
+	:where(code) {
+		display: inline-block;
+		padding-block: 0.1em;
+		padding-inline: 0.3em;
+		font-size: 0.75em;
+		font-weight: bold;
+		vertical-align: middle;
+		color: color-mix(in srgb, currentcolor 80%, var(--bge-lightest-color) 20%);
+		background: color-mix(
+			in srgb,
+			var(--bge-dialog-background-color) 80%,
+			var(--bge-lightest-color) 20%
+		);
+		border: 1px solid
+			color-mix(in srgb, var(--bge-border-color) 80%, var(--bge-lightest-color) 20%);
+		border-radius: 0.3em;
+	}
+
+	:where(p) {
+		&:first-child {
+			margin-block-start: 0;
+		}
+
+		&:last-child {
+			margin-block-end: 0;
+		}
+	}
+
+	:where([data-bge-editor-ui]) {
+		margin-block-start: 1em;
+
+		&:first-child {
+			margin-block-start: 0;
+		}
+	}
+
+	bge-wysiwyg-editor {
+		display: block;
+		margin-block-start: 1em;
+
+		> fieldset {
+			margin-block: 0;
+		}
+
+		&:first-child {
+			margin-block-start: 0;
+		}
+
+		[data-bge-toolbar] {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 0.25em;
+			align-items: center;
+			justify-content: space-between;
+			margin-block-end: 0.5em;
+		}
+
+		[data-bge-toolbar-group] {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 0.25em;
+			align-items: center;
+		}
+
+		[data-bge-toolbar-button] {
+			--size: 1lh;
+			--stroke-width: 1.5;
+			--padding: 0.25em;
+			padding: 0.25em;
+			font-size: inherit;
+			cursor: pointer;
+			background: var(--bge-lightest-color);
+			border: 1px solid var(--bge-border-color);
+			border-radius: var(--border-radius);
+
+			&:hover,
+			&:focus-visible {
+				--bge-border-color: var(--bge-ui-primary-color);
+				--bge-outline-color: var(--bge-ui-primary-color);
+				outline: var(--bge-focus-outline-width) solid var(--bge-outline-color);
+			}
+
+			&:disabled {
+				color: inherit;
+				cursor: not-allowed;
+				outline: none;
+				opacity: 0.3;
+			}
+
+			&[aria-pressed='true'] {
+				--stroke-width: 2;
+				color: #fff;
+				background-color: var(--bge-ui-primary-color);
+
+				&:focus-visible {
+					box-shadow: 0 0 0 2px #fff inset;
+				}
+			}
+
+			&:not(:has(svg)) {
+				padding-inline: calc(var(--padding) * 3);
+			}
+
+			svg {
+				inline-size: var(--size);
+				block-size: var(--size);
+				stroke: currentcolor;
+				stroke-width: var(--stroke-width);
+			}
+
+			[data-bge-rotate] {
+				display: block;
+				rotate: -90deg;
+			}
+		}
+	}
 }
-[data-bgi]:hover img {
-  filter: brightness(90%);
+
+[data-bge-component$='-editable-area'] {
+	&[data-bge-component-mode='visual'] {
+		iframe {
+			display: block;
+			margin-block: 0;
+			margin-inline: auto;
+			overflow: hidden;
+			border: none;
+		}
+
+		textarea {
+			display: none;
+		}
+	}
+
+	&[data-bge-component-mode='source'] {
+		iframe {
+			display: none;
+		}
+	}
 }
-[data-bgi] a,
-[data-bgi] area,
-[data-bgi] button,
-[data-bgi] input,
-[data-bgi] label,
-[data-bgi] select,
-[data-bgi] summary,
-[data-bgi] textarea,
-[data-bgi] iframe {
-  pointer-events: none;
+
+[data-bge-component='editable-area'] [data-bgi] {
+	--outline: none;
+	min-inline-size: 20px;
+	min-block-size: 20px;
+	outline: var(--outline);
+
+	&:where([data-bge-container]:hover &) {
+		--outline: 1px #a6a6a6 dotted;
+	}
+
+	&:hover {
+		--outline: 1px solid var(--bge-ui-primary-color);
+		cursor: pointer;
+		background-color: oklch(from currentcolor l c h / 5%);
+		background-blend-mode: darken;
+
+		img {
+			filter: brightness(90%);
+		}
+	}
+
+	a,
+	area,
+	button,
+	input,
+	label,
+	select,
+	summary,
+	textarea,
+	iframe {
+		pointer-events: none;
+	}
 }
 
 button svg.tabler-icon {
-  inline-size: auto;
-  block-size: 1em;
+	inline-size: auto;
+	block-size: 1em;
+}
+
+[data-bge-editor-ui-component='thumbnail'] svg.tabler-icon {
+	inline-size: 100%;
+	block-size: 100%;
 }
 
-[data-bge-editor-ui-component=thumbnail] svg.tabler-icon {
-  inline-size: 100%;
-  block-size: 100%;
+label:has(input[type='radio'][name='bge-scale-type'][value='container']) {
+	& > span {
+		&::before {
+			content: 'コンテナ';
+		}
+
+		&:is([data-bge-container^='grid:'] *, [data-bge-container='grid'] *) {
+			&::before {
+				content: 'グリッド';
+			}
+		}
+	}
 }
 
-label:has(input[type=radio][name=bge-scale-type][value=container]) > span::before {
-  content: "コンテナ";
+[data-bge-editor-ui='tabs'] {
+	& + * {
+		padding: 1em;
+		margin-block: -1px 1em;
+		border: 1px solid var(--bge-border-color);
+		border-radius: 0.5em;
+	}
 }
-label:has(input[type=radio][name=bge-scale-type][value=container]) > span:is([data-bge-container^="grid:"] *, [data-bge-container=grid] *)::before {
-  content: "グリッド";
-}