@revenexx/editor 0.1.0

package/dist/runtime/editor/features/options/index.vue

@@ -0,0 +1,831 @@
+<template>
+  <Teleport to="#bk-blokkli-item-actions-controls">
+    <OptionsForm
+      v-if="
+  definition && !selection.isDragging.value && !ui.isAnimating.value && !ui.isTransforming.value && uuids
+"
+      :key="key + state.refreshKey.value + ui.isAnimating.value"
+      :uuids
+      :definition
+    />
+  </Teleport>
+</template>
+
+<script setup>
+import {
+  computed,
+  useBlokkli,
+  defineBlokkliFeature,
+  defineAsyncComponent
+} from "#imports";
+import { falsy, onlyUnique } from "#blokkli/helpers";
+import { fragmentBlockBundle } from "#blokkli-build/config";
+const OptionsForm = defineAsyncComponent(() => import("./Form/index.vue"));
+defineBlokkliFeature({
+  id: "options",
+  label: "Options",
+  icon: "bk_mdi_palette",
+  description: "Renders the options form for one or more blocks.",
+  requiredAdapterMethods: ["updateOptions"]
+});
+const { selection, state, ui, definitions, context } = useBlokkli();
+const uuids = computed(() => {
+  const uuids2 = selection.items.value.map((v) => v.uuid);
+  if (uuids2.length) {
+    return uuids2;
+  } else if (selection.hasHostSelected.value) {
+    return "provider";
+  }
+  return null;
+});
+const key = computed(() => {
+  const parts = [];
+  if (typeof uuids.value === "string") {
+    parts.push(uuids.value);
+  } else if (uuids.value && typeof uuids.value === "object") {
+    parts.push(...uuids.value);
+  }
+  return parts.join("-");
+});
+const definition = computed(() => {
+  if (uuids.value === "provider") {
+    return definitions.getProviderDefinition(
+      context.value.entityType,
+      context.value.entityBundle
+    );
+  }
+  const bundles = selection.items.value.map((v) => v.library?.reusableBundle || v.bundle).filter(onlyUnique);
+  if (bundles.length !== 1) {
+    return;
+  }
+  const bundle = bundles[0];
+  if (bundle === fragmentBlockBundle) {
+    const fragments = selection.items.value.filter(
+      (v) => v.bundle === fragmentBlockBundle
+    );
+    const fragmentNames = fragments.map((v) => {
+      const props = state.getFieldListItem(v.uuid)?.props;
+      if (props && props.name) {
+        return props.name;
+      }
+    }).filter(falsy).filter(onlyUnique);
+    if (fragmentNames.length !== 1) {
+      return;
+    }
+    return definitions.getFragmentDefinition(fragmentNames[0]);
+  }
+  return selection.items.value.map((block) => {
+    return definitions.getBlockDefinition(
+      bundle,
+      block.fieldListType,
+      block.parentBlockBundle
+    );
+  }).filter(falsy).at(0);
+});
+</script>
+
+<script>
+export default {
+  name: "Options"
+};
+</script>
+
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+.bk .bk-blokkli-item-options {
+  display: flex;
+  min-width: 100vw;
+  height: var(--bk-actions-height);
+  overflow: auto;
+}
+@media (width >= 64rem) {
+  .bk .bk-blokkli-item-options {
+    overflow: visible;
+  }
+}
+@media (width >= 64rem) {
+  .bk .bk-blokkli-item-options {
+    border-left-style: var(--bk-tw-border-style);
+    border-left-width: 1px;
+  }
+}
+@media (width >= 64rem) {
+  .bk .bk-blokkli-item-options {
+    border-left-color: rgb(var(--bk-theme-mono-700) / 1);
+  }
+}
+.bk .bk-blokkli-item-options {
+  order: -9999;
+  min-width: 100%;
+}
+@media (width >= 64rem) {
+  .bk .bk-blokkli-item-options {
+    order: 0;
+  }
+}
+@media (width >= 64rem) {
+  .bk .bk-blokkli-item-options {
+    min-width: auto;
+  }
+}
+:is(.bk .bk-blokkli-item-options)::-webkit-scrollbar {
+  display: none;
+}
+:is(.bk .bk-blokkli-item-options):empty {
+  display: none;
+}
+:is(.bk .bk-blokkli-item-options):not(:empty) {
+  border-bottom-style: var(--bk-tw-border-style);
+  border-bottom-width: 1px;
+  border-bottom-color: rgb(var(--bk-theme-mono-500) / 1);
+}
+@supports (color: color-mix(in lab, red, red)) {
+  :is(.bk .bk-blokkli-item-options):not(:empty) {
+    border-bottom-color: color-mix(in oklab, rgb(var(--bk-theme-mono-500) / 1) 25%, transparent);
+  }
+}
+@media (width >= 64rem) {
+  :is(.bk .bk-blokkli-item-options):not(:empty) {
+    border-bottom-style: var(--bk-tw-border-style);
+    border-bottom-width: 0;
+  }
+}
+.bk .bk-blokkli-item-options-item-content {
+  height: 100%;
+}
+.bk .bk-blokkli-item-options-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+}
+.bk-is-disabled:is(.bk .bk-blokkli-item-options-item) {
+  pointer-events: none;
+  opacity: 20%;
+}
+@media (width >= 64rem) {
+  :is(.bk .bk-blokkli-item-options-item):not(:last-child) {
+    border-right-style: var(--bk-tw-border-style);
+    border-right-width: 1px;
+  }
+}
+@media (width >= 64rem) {
+  :is(.bk .bk-blokkli-item-options-item):not(:last-child) {
+    border-right-color: rgb(var(--bk-theme-mono-600) / 1);
+  }
+}
+.bk .bk-blokkli-item-options-checkbox {
+  position: relative;
+  display: inline-flex;
+  height: 100%;
+  cursor: pointer;
+  align-items: center;
+  padding-inline: 10px;
+  color: rgb(var(--bk-theme-mono-200) / 1);
+}
+@media not all and (hover: none) {
+  @media (hover: hover) {
+    :is(.bk .bk-blokkli-item-options-checkbox):hover {
+      background-color: rgb(var(--bk-theme-mono-800) / 1);
+    }
+  }
+  @media (hover: hover) {
+    :is(.bk .bk-blokkli-item-options-checkbox):hover {
+      color: rgb(var(--bk-theme-mono-50) / 1);
+    }
+  }
+}
+:is(.bk .bk-blokkli-item-options-checkbox) input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+}
+:is(.bk .bk-blokkli-item-options-checkbox) input:checked + div {
+  background-color: rgb(var(--bk-theme-mono-500) / 1);
+}
+:is(:is(.bk .bk-blokkli-item-options-checkbox) input:checked + div)::after {
+  content: var(--bk-tw-content);
+  --bk-tw-translate-x: 100%;
+  translate: var(--bk-tw-translate-x) var(--bk-tw-translate-y);
+}
+:is(:is(.bk .bk-blokkli-item-options-checkbox) input:checked + div)::after {
+  content: var(--bk-tw-content);
+  border-color: white;
+}
+:is(:is(.bk .bk-blokkli-item-options-checkbox) input:checked + div)::after {
+  content: var(--bk-tw-content);
+  background-color: rgb(var(--bk-theme-mono-50) / 1);
+}
+:is(.bk .bk-blokkli-item-options-checkbox)  > div {
+  position: relative;
+  height: 20px;
+  width: 36px;
+  flex-shrink: 0;
+  border-radius: calc(infinity * 1px);
+  background-color: rgb(var(--bk-theme-mono-700) / 1);
+}
+:is(:is(.bk .bk-blokkli-item-options-checkbox) > div)::after {
+  content: var(--bk-tw-content);
+  position: absolute;
+}
+:is(:is(.bk .bk-blokkli-item-options-checkbox) > div)::after {
+  content: var(--bk-tw-content);
+  top: 2px;
+}
+:is(:is(.bk .bk-blokkli-item-options-checkbox) > div)::after {
+  content: var(--bk-tw-content);
+  left: 2px;
+}
+:is(:is(.bk .bk-blokkli-item-options-checkbox) > div)::after {
+  content: var(--bk-tw-content);
+  height: 16px;
+}
+:is(:is(.bk .bk-blokkli-item-options-checkbox) > div)::after {
+  content: var(--bk-tw-content);
+  width: 16px;
+}
+:is(:is(.bk .bk-blokkli-item-options-checkbox) > div)::after {
+  content: var(--bk-tw-content);
+  border-radius: calc(infinity * 1px);
+}
+:is(:is(.bk .bk-blokkli-item-options-checkbox) > div)::after {
+  content: var(--bk-tw-content);
+  background-color: rgb(var(--bk-theme-mono-300) / 1);
+}
+:is(:is(.bk .bk-blokkli-item-options-checkbox) > div)::after {
+  --bk-tw-content: '';
+  content: var(--bk-tw-content);
+}
+:is(.bk .bk-blokkli-item-options-checkbox)  > span {
+  display: inline-block;
+  padding-left: 10px;
+}
+.bk .bk-blokkli-item-options-radios:not(.bk-is-color) {
+  position: relative;
+  display: flex;
+  height: 100%;
+  align-items: center;
+  padding-inline: 10px;
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  color: rgb(var(--bk-theme-mono-50) / 1);
+  -webkit-user-select: none;
+  user-select: none;
+}
+:is(.bk .bk-blokkli-item-options-radios:not(.bk-is-color))  > label {
+  display: flex;
+  height: 100%;
+  cursor: pointer;
+  align-items: center;
+}
+:is(:is(.bk .bk-blokkli-item-options-radios:not(.bk-is-color)) > label) input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border-width: 0;
+}
+:is(:is(:is(.bk .bk-blokkli-item-options-radios:not(.bk-is-color)) > label) input):checked + span {
+  background-color: rgb(var(--bk-theme-mono-100) / 1);
+  color: rgb(var(--bk-theme-mono-900) / 1);
+}
+@media not all and (hover: none) {
+  :is(:is(.bk .bk-blokkli-item-options-radios:not(.bk-is-color)) > label):hover input:not(:checked) + span {
+    background-color: rgb(var(--bk-theme-mono-700) / 1);
+  }
+}
+:is(:is(.bk .bk-blokkli-item-options-radios:not(.bk-is-color)) > label) span {
+  display: inline-block;
+  border-radius: var(--radius-3xl, 24px);
+  padding-inline: 10px;
+  padding-block: 2px;
+}
+.bk-is-muted:is(:is(.bk .bk-blokkli-item-options-radios:not(.bk-is-color)) > label) {
+  color: rgb(var(--bk-theme-mono-500) / 1);
+}
+.bk .bk-blokkli-item-options-radios.bk-is-color {
+  display: flex;
+  height: 100%;
+  align-items: stretch;
+  padding-inline: 10px;
+}
+:is(.bk .bk-blokkli-item-options-radios.bk-is-color) label {
+  display: flex;
+  height: 100%;
+  cursor: pointer;
+  align-items: center;
+  padding-inline: 5px;
+}
+:is(:is(.bk .bk-blokkli-item-options-radios.bk-is-color) label) div {
+  position: relative;
+  height: 20px;
+  width: 20px;
+  border-radius: calc(infinity * 1px);
+}
+:is(:is(.bk .bk-blokkli-item-options-radios.bk-is-color) label) input {
+  margin-right: 1px;
+  cursor: pointer;
+}
+:is(:is(.bk .bk-blokkli-item-options-radios.bk-is-color) label) span {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  height: 100%;
+  width: 100%;
+  border-radius: inherit;
+  font-size: 0px;
+  outline-width: 1px;
+  outline-style: var(--bk-tw-outline-style);
+  outline-width: 2px;
+  outline-offset: 2px;
+  outline-color: transparent;
+}
+@media not all and (hover: none) {
+  :is(:is(.bk .bk-blokkli-item-options-radios.bk-is-color) label):hover input:not(:checked) + span {
+    outline-color: rgb(var(--bk-theme-mono-400) / 1);
+  }
+}
+:is(:is(.bk .bk-blokkli-item-options-radios.bk-is-color) label) input {
+  opacity: 0;
+}
+:is(:is(:is(.bk .bk-blokkli-item-options-radios.bk-is-color) label) input):checked + span {
+  outline-color: rgb(var(--bk-theme-mono-50) / 1);
+}
+.bk .bk-blokkli-item-options-radios.bk-is-icons {
+  gap: 10px;
+  color: white;
+}
+:is(.bk .bk-blokkli-item-options-radios.bk-is-icons) .bk-blokkli-item-options-radios-icon {
+  opacity: 30%;
+}
+:is(:is(.bk .bk-blokkli-item-options-radios.bk-is-icons) .bk-blokkli-item-options-radios-icon) svg {
+  height: 24px;
+  width: auto;
+  fill: currentcolor;
+}
+:is(:is(:is(.bk .bk-blokkli-item-options-radios.bk-is-icons) .bk-blokkli-item-options-radios-icon) svg) .bk-option-icon-fill {
+  fill: rgb(var(--bk-theme-mono-700) / 1);
+}
+:is(:is(:is(.bk .bk-blokkli-item-options-radios.bk-is-icons) .bk-blokkli-item-options-radios-icon) svg) .bk-option-icon-fill-strong {
+  fill: rgb(var(--bk-theme-mono-200) / 1);
+}
+:is(:is(:is(.bk .bk-blokkli-item-options-radios.bk-is-icons) .bk-blokkli-item-options-radios-icon) svg) .bk-option-icon-stroke {
+  stroke: currentcolor;
+}
+:is(.bk .bk-blokkli-item-options-radios.bk-is-icons) input:not(:checked):hover + .bk-blokkli-item-options-radios-icon {
+  opacity: 50%;
+}
+:is(.bk .bk-blokkli-item-options-radios.bk-is-icons) input:checked + .bk-blokkli-item-options-radios-icon {
+  opacity: 100%;
+}
+.bk .bk-blokkli-item-options-text {
+  position: relative;
+  height: 100%;
+  cursor: pointer;
+}
+:is(.bk .bk-blokkli-item-options-text) input {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  height: 100%;
+  width: 100%;
+  background-color: transparent;
+  padding-inline: 10px;
+}
+:is(:is(.bk .bk-blokkli-item-options-text) input):focus {
+  background-color: rgb(var(--bk-theme-mono-800) / 1);
+}
+:is(:is(.bk .bk-blokkli-item-options-text) input):focus {
+  --bk-tw-shadow: 0 0 #0000;
+  box-shadow: var(--bk-tw-inset-shadow), var(--bk-tw-inset-ring-shadow), var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), var(--bk-tw-shadow);
+}
+:is(:is(.bk .bk-blokkli-item-options-text) input):focus {
+  --bk-tw-outline-style: none;
+  outline-style: none;
+}
+:is(.bk .bk-blokkli-item-options-text)  > div {
+  pointer-events: none;
+  visibility: hidden;
+  padding-inline: 10px;
+  white-space: pre;
+  max-width: 250px;
+  min-width: 100px;
+  overflow: hidden;
+}
+@media not all and (hover: none) {
+  :is(.bk .bk-blokkli-item-options-text):hover {
+    color: var(--gin-color-primary);
+  }
+}
+.bk .bk-blokkli-item-options-date {
+  position: relative;
+  height: 100%;
+  cursor: pointer;
+}
+:is(.bk .bk-blokkli-item-options-date) input {
+  height: 100%;
+  background-color: transparent;
+  padding-inline: 10px;
+  accent-color: rgb(var(--bk-theme-mono-100) / 1);
+}
+:is(:is(.bk .bk-blokkli-item-options-date) input):focus {
+  background-color: rgb(var(--bk-theme-mono-800) / 1);
+}
+:is(:is(.bk .bk-blokkli-item-options-date) input):focus {
+  --bk-tw-shadow: 0 0 #0000;
+  box-shadow: var(--bk-tw-inset-shadow), var(--bk-tw-inset-ring-shadow), var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), var(--bk-tw-shadow);
+}
+:is(:is(.bk .bk-blokkli-item-options-date) input):focus {
+  --bk-tw-outline-style: none;
+  outline-style: none;
+}
+@media not all and (hover: none) {
+  :is(.bk .bk-blokkli-item-options-date):hover {
+    color: var(--gin-color-primary);
+  }
+}
+:is(.bk .bk-blokkli-item-options-radios.bk-is-grid) .bk-blokkli-item-options-radios-flex {
+  position: relative;
+  margin-inline: 5px;
+  display: flex;
+  height: 20px;
+  width: 60px;
+  border-style: var(--bk-tw-border-style);
+  border-width: 1px;
+  border-color: currentcolor;
+  color: rgb(var(--bk-theme-mono-500) / 1);
+}
+:is(:is(.bk .bk-blokkli-item-options-radios.bk-is-grid) .bk-blokkli-item-options-radios-flex)  > div {
+  position: relative;
+  height: 100%;
+  background-color: rgb(var(--bk-theme-mono-800) / 1);
+}
+:is(:is(:is(.bk .bk-blokkli-item-options-radios.bk-is-grid) .bk-blokkli-item-options-radios-flex) > div):not(:last-child):after {
+  content: '';
+  position: absolute;
+  top: calc(1px * -1);
+  right: 0px;
+  bottom: calc(1px * -1);
+  border-right-style: var(--bk-tw-border-style);
+  border-right-width: 1px;
+  border-color: currentcolor;
+}
+:is(.bk .bk-blokkli-item-options-radios.bk-is-grid) input:checked + div {
+  color: white;
+}
+:is(:is(.bk .bk-blokkli-item-options-radios.bk-is-grid) input:checked + div)  > div {
+  background-color: white;
+}
+:is(:is(.bk .bk-blokkli-item-options-radios.bk-is-grid) input:checked + div)  > div:after {
+  border-right-color: rgb(var(--bk-theme-mono-950) / 1) !important;
+}
+@media not all and (hover: none) {
+  :is(:is(.bk .bk-blokkli-item-options-radios.bk-is-grid) label):hover input:not(:checked) + div {
+    color: rgb(var(--bk-theme-mono-300) / 1);
+  }
+  :is(:is(:is(.bk .bk-blokkli-item-options-radios.bk-is-grid) label):hover input:not(:checked) + div)  > div {
+    background-color: rgb(var(--bk-theme-mono-600) / 1);
+  }
+}
+.bk .bk-blokkli-item-options-checkboxes {
+  height: 100%;
+  padding-inline: 15px;
+}
+.bk-is-grouped:is(.bk .bk-blokkli-item-options-checkboxes) {
+  height: auto;
+  padding-inline: 0px;
+}
+.bk-is-grouped:is(.bk .bk-blokkli-item-options-checkboxes)  > div {
+  position: static;
+}
+@media not all and (hover: none) {
+  @media (hover: hover) {
+    :is(.bk .bk-blokkli-item-options-checkboxes):hover {
+      background-color: rgb(var(--bk-theme-mono-700) / 1);
+    }
+  }
+}
+:is(.bk .bk-blokkli-item-options-checkboxes) button {
+  display: flex;
+  height: 100%;
+  min-width: 200px;
+  align-items: center;
+  gap: 10px;
+}
+:is(:is(.bk .bk-blokkli-item-options-checkboxes) button) svg {
+  fill: currentColor;
+  height: 15px;
+  width: 20px;
+  color: rgb(var(--bk-theme-mono-100) / 1);
+}
+:is(:is(.bk .bk-blokkli-item-options-checkboxes) button)  > span:first-child {
+  margin-right: auto;
+}
+:is(.bk .bk-blokkli-item-options-checkboxes)  > div {
+  position: fixed;
+  left: 0px;
+  display: grid;
+  min-width: 100%;
+  overflow: hidden;
+  background-color: rgb(var(--bk-theme-mono-900) / 1);
+  bottom: 100%;
+}
+@media (width >= 48rem) {
+  :is(.bk .bk-blokkli-item-options-checkboxes)  > div {
+    position: absolute;
+    top: 100%;
+    bottom: auto;
+  }
+}
+:is(:is(.bk .bk-blokkli-item-options-checkboxes) > div) label {
+  padding-block: 10px;
+}
+@media not all and (hover: none) {
+  @media (hover: hover) {
+    :is(:is(:is(.bk .bk-blokkli-item-options-checkboxes) > div) label):hover {
+      background-color: rgb(var(--bk-theme-mono-800) / 1);
+    }
+  }
+}
+.bk-is-active:is(.bk .bk-blokkli-item-options-checkboxes) {
+  background-color: rgb(var(--bk-theme-mono-800) / 1);
+}
+:is(.bk-is-active:is(.bk .bk-blokkli-item-options-checkboxes) button) svg {
+  rotate: 180deg;
+}
+.bk .bk-blokkli-item-options-color {
+  position: relative;
+  display: flex;
+  height: 100%;
+  cursor: pointer;
+  align-items: center;
+  padding-inline: 10px;
+}
+@media not all and (hover: none) {
+  @media (hover: hover) {
+    :is(.bk .bk-blokkli-item-options-color):hover {
+      background-color: rgb(var(--bk-theme-mono-700) / 1);
+    }
+  }
+}
+:is(.bk .bk-blokkli-item-options-color) input {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  height: 100%;
+  width: 100%;
+  cursor: pointer;
+  appearance: none;
+  opacity: 0%;
+}
+:is(.bk .bk-blokkli-item-options-color) .bk-blokkli-item-options-color-preview {
+  height: 20px;
+  width: 20px;
+  border-radius: calc(infinity * 1px);
+}
+:is(.bk .bk-blokkli-item-options-color) .bk-blokkli-item-options-color-label {
+  margin-left: 10px;
+  font-family: monospace;
+}
+.bk .bk-blokkli-item-options-range {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  gap: 5px;
+  padding-inline: 10px;
+}
+:is(.bk .bk-blokkli-item-options-range) input {
+  height: 5px;
+  width: 120px;
+  appearance: none;
+  border-radius: calc(infinity * 1px);
+  background-color: rgb(var(--bk-theme-mono-500) / 1);
+}
+:is(:is(.bk .bk-blokkli-item-options-range) input)::-webkit-slider-thumb {
+  appearance: none;
+  border-radius: calc(infinity * 1px);
+  background-color: white;
+  width: 15px;
+  height: 15px;
+  cursor: pointer;
+}
+:is(:is(.bk .bk-blokkli-item-options-range) input)::-moz-range-thumb {
+  border-radius: calc(infinity * 1px);
+  background-color: white;
+  width: 15px;
+  height: 15px;
+  cursor: pointer;
+}
+:is(.bk .bk-blokkli-item-options-range)  > div {
+  min-width: 40px;
+  text-align: right;
+  font-family: monospace;
+}
+.bk .bk-blokkli-item-options-group {
+  position: relative;
+}
+:is(.bk .bk-blokkli-item-options-group)  > button {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  min-width: 200px;
+  align-items: center;
+  gap: 10px;
+  padding-inline: 10px;
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+}
+@media not all and (hover: none) {
+  @media (hover: hover) {
+    :is(:is(.bk .bk-blokkli-item-options-group) > button):hover {
+      background-color: rgb(var(--bk-theme-mono-700) / 1);
+    }
+  }
+}
+:is(:is(.bk .bk-blokkli-item-options-group) > button) .bk-icon {
+  margin-left: auto;
+}
+:is(:is(.bk .bk-blokkli-item-options-group) > button) svg {
+  fill: currentColor;
+  height: 15px;
+  width: 20px;
+  color: rgb(var(--bk-theme-mono-100) / 1);
+}
+.bk-is-active:is(.bk .bk-blokkli-item-options-group):last-child  > button {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.bk-is-active:is(.bk .bk-blokkli-item-options-group)  > button {
+  background-color: rgb(var(--bk-theme-mono-800) / 1);
+}
+:is(.bk-is-active:is(.bk .bk-blokkli-item-options-group) > button) svg {
+  rotate: 180deg;
+}
+@media (width >= 48rem) {
+  .bk .bk-blokkli-item-options-group:last-child > .bk-blokkli-item-options-group-content {
+    right: 0px;
+    left: auto;
+  }
+}
+.bk .bk-blokkli-item-options-group-content {
+  position: absolute;
+  position: fixed;
+  left: 0px;
+  display: grid;
+  min-width: 100%;
+  overflow: hidden;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+  background-color: rgb(var(--bk-theme-mono-900) / 1);
+  bottom: 100%;
+}
+@media (width >= 48rem) {
+  .bk .bk-blokkli-item-options-group-content {
+    position: absolute;
+    top: 100%;
+    bottom: auto;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+}
+:is(.bk .bk-blokkli-item-options-group-content)  > label {
+  padding-block: 10px;
+}
+@media not all and (hover: none) {
+  @media (hover: hover) {
+    :is(:is(.bk .bk-blokkli-item-options-group-content) > label):hover {
+      background-color: rgb(var(--bk-theme-mono-800) / 1);
+    }
+  }
+}
+:is(.bk .bk-blokkli-item-options-group-content) .bk-blokkli-item-options-item-content {
+  height: 50px;
+}
+.bk-is-grouped:is(:is(.bk .bk-blokkli-item-options-group-content) .bk-blokkli-item-options-item-content) {
+  height: auto;
+  min-height: 50px;
+  width: 100%;
+}
+.bk-is-grouped:is(:is(.bk .bk-blokkli-item-options-group-content) .bk-blokkli-item-options-item-content) .bk-blokkli-item-options-checkbox {
+  height: 50px;
+  width: 100%;
+  white-space: nowrap;
+}
+:is(.bk .bk-blokkli-item-options-group-content) .bk-blokkli-item-options-item {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+:is(:is(.bk .bk-blokkli-item-options-group-content) .bk-blokkli-item-options-item):not(:last-child) {
+  border-bottom-style: var(--bk-tw-border-style);
+  border-bottom-width: 1px;
+  border-bottom-color: rgb(var(--bk-theme-mono-600) / 1);
+}
+:is(:is(.bk .bk-blokkli-item-options-group-content) .bk-blokkli-item-options-item) .bk-blokkli-item-options-item-label {
+  margin-top: 10px;
+  padding-inline: 10px;
+  --bk-tw-font-weight: var(--font-weight-semibold, 600);
+  font-weight: var(--font-weight-semibold, 600);
+  color: rgb(var(--bk-theme-mono-300) / 1);
+}
+.bk .bk-blokkli-item-options-complex-type {
+  display: flex;
+  height: 100%;
+  cursor: pointer;
+  align-items: center;
+  gap: 10px;
+  padding-inline: 10px;
+  font-size: var(--text-sm, 14px);
+  line-height: var(--bk-tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+  --bk-tw-font-weight: var(--font-weight-medium, 500);
+  font-weight: var(--font-weight-medium, 500);
+  white-space: nowrap;
+  color: rgb(var(--bk-theme-mono-300) / 1);
+}
+@media not all and (hover: none) {
+  @media (hover: hover) {
+    :is(.bk .bk-blokkli-item-options-complex-type):hover {
+      background-color: rgb(var(--bk-theme-mono-700) / 1);
+    }
+  }
+  @media (hover: hover) {
+    :is(.bk .bk-blokkli-item-options-complex-type):hover {
+      color: rgb(var(--bk-theme-mono-50) / 1);
+    }
+  }
+}
+:is(.bk .bk-blokkli-item-options-complex-type) .bk-icon {
+  width: 24px;
+  height: 24px;
+  fill: currentcolor;
+}
+.bk .bk-blokkli-item-options-number {
+  position: relative;
+  display: flex;
+  height: 100%;
+  align-items: center;
+  padding-inline: 10px;
+}
+:is(.bk .bk-blokkli-item-options-number) input {
+  height: 100%;
+  appearance: none;
+  background-color: transparent;
+  text-align: center;
+  font-family: monospace;
+}
+:is(:is(.bk .bk-blokkli-item-options-number) input):focus {
+  --bk-tw-border-style: none;
+  border-style: none;
+}
+:is(:is(.bk .bk-blokkli-item-options-number) input):focus {
+  --bk-tw-shadow: 0 0 #0000;
+  box-shadow: var(--bk-tw-inset-shadow), var(--bk-tw-inset-ring-shadow), var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), var(--bk-tw-shadow);
+}
+:is(:is(.bk .bk-blokkli-item-options-number) input):focus {
+  outline-style: var(--bk-tw-outline-style);
+  outline-width: 0px;
+}
+:is(:is(.bk .bk-blokkli-item-options-number) input)::-webkit-inner-spin-button {
+  display: none;
+  height: 0px;
+  width: 0px;
+  appearance: none;
+}
+:is(.bk .bk-blokkli-item-options-number) button {
+  display: flex;
+  height: 20px;
+  width: 20px;
+  align-items: center;
+  justify-content: center;
+  border-radius: calc(infinity * 1px);
+}
+@media (hover: hover) {
+  :is(:is(.bk .bk-blokkli-item-options-number) button):hover {
+    background-color: rgb(var(--bk-theme-mono-700) / 1);
+  }
+}
+[disabled]:is(:is(.bk .bk-blokkli-item-options-number) button) {
+  pointer-events: none;
+  background-color: transparent;
+  color: rgb(var(--bk-theme-mono-600) / 1);
+}
+:is(:is(.bk .bk-blokkli-item-options-number) button) .bk-icon {
+  height: 15px;
+  width: 15px;
+  fill: currentcolor;
+}
+</style>