srcdev-nuxt-components 9.3.7 → 9.3.8

package/app/components/03.organisms/services/services-grids/stories/ServicesCardGrid.stories.ts

@@ -1,8 +1,23 @@
+import { computed } from "vue";
 import ServicesCardGrid from "../ServicesCardGrid.vue";
 import type { Meta, StoryObj } from "@nuxtjs/storybook";
 import type { Service } from "~/types/types.services";
 
-const meta: Meta<typeof ServicesCardGrid> = {
+type StoryArgs = {
+  tag?: "div" | "section" | "main";
+  eyebrowConfig?: { tag?: "p" | "div" | "span"; fontSize?: "large" | "medium" | "small" };
+  heroConfig?: {
+    tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    fontSize?: "display" | "title" | "heading" | "subheading" | "label";
+  };
+  hrefBase?: string;
+  buttonTextPrefix?: string;
+  styleClassPassthrough?: string | string[];
+  /** Story-only — not a real ServicesCardGrid prop, see useStorySetup below. */
+  lineClamp?: number;
+};
+
+const meta: Meta<StoryArgs> = {
   title: "Organisms/Services/Services Card Grid",
   component: ServicesCardGrid,
   argTypes: {
@@ -31,6 +46,11 @@ const meta: Meta<typeof ServicesCardGrid> = {
       control: "object",
       description: "Additional CSS classes applied to the root element",
     },
+    lineClamp: {
+      control: { type: "number", min: 1, max: 10, step: 1 },
+      description:
+        "Story-only control — sets ServicesCard's --description-line-clamp custom property on the grid wrapper (not a real component prop) to demo description clamping across cards",
+    },
   },
   args: {
     tag: "div",
@@ -39,8 +59,15 @@ const meta: Meta<typeof ServicesCardGrid> = {
     hrefBase: "/services/",
     buttonTextPrefix: "Enquire about",
     styleClassPassthrough: [],
+    lineClamp: 3,
   },
   parameters: {
+    backgrounds: {
+      default: "storybook-canvas",
+      options: {
+        "storybook-canvas": { name: "Canvas", value: "oklch(0.163 0.005 17)" },
+      },
+    },
     docs: {
       description: {
         component:
@@ -51,7 +78,7 @@ const meta: Meta<typeof ServicesCardGrid> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof ServicesCardGrid>;
+type Story = StoryObj<StoryArgs>;
 
 // ─── Fixtures ─────────────────────────────────────────────────────────────────
 
@@ -81,8 +108,79 @@ const sampleServices: Service[] = [
   makeService("colour-treatment", "Colour Treatment", "Add dimension and depth", "https://picsum.photos/seed/card-c/600/800"),
 ];
 
+const makeServiceWithDescription = (
+  slug: string,
+  title: string,
+  subtitle: string,
+  image: string,
+  shortDescription: string
+): Service => ({ ...makeService(slug, title, subtitle, image), shortDescription });
+
+// Six cards with progressively longer shortDescription text, to demo how the same
+// lineClamp value clips each card's description at a different point.
+const lineClampServices: Service[] = [
+  makeServiceWithDescription(
+    "one-liner",
+    "Fringe Trim",
+    "A quick refresh",
+    "https://picsum.photos/seed/clamp-1/600/800",
+    "A quick tidy-up."
+  ),
+  makeServiceWithDescription(
+    "short-desc",
+    "Blow Dry",
+    "Salon finish, fast",
+    "https://picsum.photos/seed/clamp-2/600/800",
+    "A smooth, voluminous blow dry finished with a light-hold spray for lasting body."
+  ),
+  makeServiceWithDescription(
+    "medium-desc",
+    "Balayage",
+    "Freehand colour artistry",
+    "https://picsum.photos/seed/clamp-3/600/800",
+    "Colour swept on by hand, bespoke to your hair's natural fall and texture. Creates soft, sun-kissed dimension that grows out gracefully with minimal upkeep."
+  ),
+  makeServiceWithDescription(
+    "long-desc",
+    "Locs Installation",
+    "Start your loc journey",
+    "https://picsum.photos/seed/clamp-4/600/800",
+    "Professional loc installation tailored to your hair type. We work with all textures and lengths to create beautiful, long-lasting locs, with a full consultation beforehand to agree size, style, and maintenance schedule."
+  ),
+  makeServiceWithDescription(
+    "very-long-desc",
+    "Keratin Treatment",
+    "Smooth, frizz-free hair",
+    "https://picsum.photos/seed/clamp-5/600/800",
+    "A deep-conditioning keratin treatment that smooths the hair cuticle, reduces frizz, and cuts down on daily styling time. Results typically last three to five months depending on hair type, porosity, and aftercare routine, and can be combined with a colour service for a full transformation."
+  ),
+  makeServiceWithDescription(
+    "extra-long-desc",
+    "Full Colour Correction",
+    "Rebuild from the roots",
+    "https://picsum.photos/seed/clamp-6/600/800",
+    "A multi-session colour correction service for hair that's had previous colour go wrong — box dye build-up, uneven tone, brassiness, or over-processed ends. We start with a full strand test and consultation, then work in stages to lift, tone, and rebuild condition safely, protecting hair integrity at every step rather than rushing to a single-visit result that risks further damage."
+  ),
+];
+
 // ─── Stories ──────────────────────────────────────────────────────────────────
 
+/**
+ * lineClamp is a story-only control (not a real ServicesCardGrid prop) that sets
+ * --description-line-clamp on the grid wrapper — the global custom property each
+ * ServicesCard's .description reads for its -webkit-line-clamp value.
+ */
+function useStorySetup(args: StoryArgs) {
+  const clampStyle = computed(() => ({
+    "--description-line-clamp": String(args.lineClamp ?? 3),
+  }));
+  const componentArgs = computed(() => {
+    const { lineClamp: _lineClamp, ...rest } = args;
+    return rest;
+  });
+  return { clampStyle, componentArgs };
+}
+
 export const Default: Story = {
   render: (args) => ({
     components: { ServicesCardGrid },
@@ -180,3 +278,29 @@ export const EmptyData: Story = {
     },
   },
 };
+
+export const DescriptionLineClamp: Story = {
+  name: "Description Line Clamp",
+  args: {
+    lineClamp: 3,
+  },
+  render: (args) => ({
+    components: { ServicesCardGrid },
+    setup() {
+      return { ...useStorySetup(args), lineClampServices };
+    },
+    template: `
+      <div :style="clampStyle">
+        <ServicesCardGrid v-bind="componentArgs" :services-data="lineClampServices" />
+      </div>
+    `,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Six cards with progressively longer shortDescription text, all sharing one --description-line-clamp value set via the lineClamp control. Use the control to see how the same clamp value affects a one-line description (no visible clamping) versus a long paragraph (clamped with an ellipsis) — card heights stay equal since the meta row and actions slot sit below the clamped description rather than growing with it.",
+      },
+    },
+  },
+};

package/app/components/03.organisms/services/services-grids/stories/ServicesSectionGrid.stories.ts

@@ -32,6 +32,12 @@ const meta: Meta<typeof ServicesSectionGrid> = {
     styleClassPassthrough: [],
   },
   parameters: {
+    backgrounds: {
+      default: "storybook-canvas",
+      options: {
+        "storybook-canvas": { name: "Canvas", value: "oklch(0.163 0.005 17)" },
+      },
+    },
     docs: {
       description: {
         component:

package/app/components/03.organisms/services/services-grids/tests/__snapshots__/ServicesCardGrid.spec.ts.snap

@@ -4,39 +4,63 @@ exports[`ServicesCardGrid > renders correct HTML structure 1`] = `
 "<div class="services-card-grid">
   <div class="services-card">
     <div class="image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/locs-installation.jpg 1x, /_ipx/_/images/locs-installation.jpg 2x" alt="Locs Installation" loading="lazy" class="image" src="/_ipx/_/images/locs-installation.jpg"></div>
-    <div class="eyebrow-text large">Subtitle for Locs Installation</div>
-    <h2 class="hero-text heading axis-horizontal">
-      <!--v-if--><span class="text-block-0 normal">Locs Installation</span>
-    </h2>
-    <div class="description">Short description for Locs Installation.</div><a href="/ui/services/services-section/locs-installation" data-testid="input-button-core" data-theme="default" class="input-button-core secondary mbs-24 is-link">
-      <!--v-if-->
-      <!--v-if--><span class="button-text">Enquire about Locs Installation</span><span class="btn-icon right"><span class="iconify i-mdi:arrow-right icon" aria-hidden="true"></span></span>
-      <!--v-if-->
-    </a>
+    <div class="details-wrapper">
+      <div class="eyebrow-text large">Subtitle for Locs Installation</div>
+      <h2 class="hero-text heading axis-horizontal">
+        <!--v-if--><span class="text-block-0 normal">Locs Installation</span>
+      </h2>
+      <div class="description">Short description for Locs Installation.</div>
+      <div class="footer">
+        <div class="meta">
+          <div class="meta-duration">60 mins</div>
+          <div class="meta-price">£50</div>
+        </div><a href="/services/locs-installation" data-testid="input-button-core" data-theme="default" class="input-button-core secondary mbs-24 is-link">
+          <!--v-if-->
+          <!--v-if--><span class="button-text">Enquire about Locs Installation</span><span class="btn-icon right"><span class="iconify i-mdi:arrow-right icon" aria-hidden="true"></span></span>
+          <!--v-if-->
+        </a>
+      </div>
+    </div>
   </div>
   <div class="services-card">
     <div class="image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/locs-retwist.jpg 1x, /_ipx/_/images/locs-retwist.jpg 2x" alt="Locs Retwist" loading="lazy" class="image" src="/_ipx/_/images/locs-retwist.jpg"></div>
-    <div class="eyebrow-text large">Subtitle for Locs Retwist</div>
-    <h2 class="hero-text heading axis-horizontal">
-      <!--v-if--><span class="text-block-0 normal">Locs Retwist</span>
-    </h2>
-    <div class="description">Short description for Locs Retwist.</div><a href="/ui/services/services-section/locs-retwist" data-testid="input-button-core" data-theme="default" class="input-button-core secondary mbs-24 is-link">
-      <!--v-if-->
-      <!--v-if--><span class="button-text">Enquire about Locs Retwist</span><span class="btn-icon right"><span class="iconify i-mdi:arrow-right icon" aria-hidden="true"></span></span>
-      <!--v-if-->
-    </a>
+    <div class="details-wrapper">
+      <div class="eyebrow-text large">Subtitle for Locs Retwist</div>
+      <h2 class="hero-text heading axis-horizontal">
+        <!--v-if--><span class="text-block-0 normal">Locs Retwist</span>
+      </h2>
+      <div class="description">Short description for Locs Retwist.</div>
+      <div class="footer">
+        <div class="meta">
+          <div class="meta-duration">60 mins</div>
+          <div class="meta-price">£50</div>
+        </div><a href="/services/locs-retwist" data-testid="input-button-core" data-theme="default" class="input-button-core secondary mbs-24 is-link">
+          <!--v-if-->
+          <!--v-if--><span class="button-text">Enquire about Locs Retwist</span><span class="btn-icon right"><span class="iconify i-mdi:arrow-right icon" aria-hidden="true"></span></span>
+          <!--v-if-->
+        </a>
+      </div>
+    </div>
   </div>
   <div class="services-card">
     <div class="image-wrapper"><img data-nuxt-img="" srcset="/_ipx/_/images/colour-treatment.jpg 1x, /_ipx/_/images/colour-treatment.jpg 2x" alt="Colour Treatment" loading="lazy" class="image" src="/_ipx/_/images/colour-treatment.jpg"></div>
-    <div class="eyebrow-text large">Subtitle for Colour Treatment</div>
-    <h2 class="hero-text heading axis-horizontal">
-      <!--v-if--><span class="text-block-0 normal">Colour Treatment</span>
-    </h2>
-    <div class="description">Short description for Colour Treatment.</div><a href="/ui/services/services-section/colour-treatment" data-testid="input-button-core" data-theme="default" class="input-button-core secondary mbs-24 is-link">
-      <!--v-if-->
-      <!--v-if--><span class="button-text">Enquire about Colour Treatment</span><span class="btn-icon right"><span class="iconify i-mdi:arrow-right icon" aria-hidden="true"></span></span>
-      <!--v-if-->
-    </a>
+    <div class="details-wrapper">
+      <div class="eyebrow-text large">Subtitle for Colour Treatment</div>
+      <h2 class="hero-text heading axis-horizontal">
+        <!--v-if--><span class="text-block-0 normal">Colour Treatment</span>
+      </h2>
+      <div class="description">Short description for Colour Treatment.</div>
+      <div class="footer">
+        <div class="meta">
+          <div class="meta-duration">60 mins</div>
+          <div class="meta-price">£50</div>
+        </div><a href="/services/colour-treatment" data-testid="input-button-core" data-theme="default" class="input-button-core secondary mbs-24 is-link">
+          <!--v-if-->
+          <!--v-if--><span class="button-text">Enquire about Colour Treatment</span><span class="btn-icon right"><span class="iconify i-mdi:arrow-right icon" aria-hidden="true"></span></span>
+          <!--v-if-->
+        </a>
+      </div>
+    </div>
   </div>
 </div>"
 `;

package/app/types/components/breadcrumb.ts

@@ -0,0 +1,4 @@
+export interface BreadcrumbItem {
+  label: string;
+  to?: string;
+}

package/app/types/components/index.ts

@@ -14,3 +14,4 @@ export * from "./hero-text"
 export * from "./navigation-horizontal.d"
 export * from "./social-icons-list.d"
 export * from "./content-docs.d"
+export * from "./breadcrumb"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.3.7",
+  "version": "9.3.8",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",
@@ -16,7 +16,7 @@
     "cleaninstall": "npm run clean && npm run reinstall",
     "generate:ramps": "node scripts/generate-ramps.mjs",
     "check:ramps": "node scripts/check-ramps.mjs",
-    "dev": "npm run generate:ramps && SRCDEV_STANDALONE=true nuxt dev",
+    "dev": "npm run generate:ramps && SRCDEV_STANDALONE=true storybook dev -p 6006",
     "build": "npm run generate:ramps && SRCDEV_STANDALONE=true nuxt build",
     "generate": "npm run generate:ramps && SRCDEV_STANDALONE=true nuxt generate",
     "preview": "SRCDEV_STANDALONE=true nuxt preview",

package/app/pages/auto-grid.vue

@@ -1,328 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-32']">
-          <h1 class="page-heading-1">AutoGrid</h1>
-          <p class="page-body-normal">
-            Responsive auto-fit CSS grid wrapper. Columns auto-fit to a minimum width; when
-            <code>is-responsive</code>
-            is enabled, the minimum shifts at container breakpoints via
-            <code>@container</code>
-            queries.
-          </p>
-        </PageRow>
-
-        <div v-if="isDev" class="qa-panel">
-          <details class="qa-panel__details">
-            <summary class="qa-panel__summary">
-              <span class="qa-panel__title">QA — AutoGrid</span>
-              <code class="qa-panel__status">
-                tag:{{ qaTag }} · responsive:{{ qaIsResponsive ? "on" : "off" }} · small:{{ qaMinColSizeSmall }} ·
-                default:{{ qaMinColSizeDefault }} · large:{{ qaMinColSizeLarge }} · gap:{{ qaGap }}
-              </code>
-            </summary>
-            <div class="qa-panel__body">
-              <div class="qa-panel__group">
-                <span class="qa-panel__label">tag</span>
-                <div class="qa-panel__chips">
-                  <button
-                    v-for="opt in tagOptions"
-                    :key="opt"
-                    class="qa-panel__chip"
-                    :class="{ 'is-active': qaTag === opt }"
-                    @click="qaTag = opt"
-                  >
-                    {{ opt }}
-                  </button>
-                </div>
-              </div>
-
-              <div class="qa-panel__group">
-                <span class="qa-panel__label">is-responsive</span>
-                <div class="qa-panel__chips">
-                  <button
-                    v-for="opt in [true, false]"
-                    :key="String(opt)"
-                    class="qa-panel__chip"
-                    :class="{ 'is-active': qaIsResponsive === opt }"
-                    @click="qaIsResponsive = opt"
-                  >
-                    {{ opt ? "on" : "off" }}
-                  </button>
-                </div>
-              </div>
-
-              <div class="qa-panel__group">
-                <span class="qa-panel__label">min-col-size-small</span>
-                <div class="qa-panel__chips">
-                  <button
-                    v-for="preset in sizePresets"
-                    :key="preset"
-                    class="qa-panel__chip"
-                    :class="{ 'is-active': qaMinColSizeSmall === preset }"
-                    @click="qaMinColSizeSmall = preset"
-                  >
-                    {{ preset }}
-                  </button>
-                </div>
-                <input v-model="qaMinColSizeSmall" placeholder="e.g. 200px" class="qa-panel__input" />
-              </div>
-
-              <div class="qa-panel__group">
-                <span class="qa-panel__label">min-col-size-default</span>
-                <div class="qa-panel__chips">
-                  <button
-                    v-for="preset in sizePresets"
-                    :key="preset"
-                    class="qa-panel__chip"
-                    :class="{ 'is-active': qaMinColSizeDefault === preset }"
-                    @click="qaMinColSizeDefault = preset"
-                  >
-                    {{ preset }}
-                  </button>
-                </div>
-                <input v-model="qaMinColSizeDefault" placeholder="e.g. 300px" class="qa-panel__input" />
-              </div>
-
-              <div class="qa-panel__group">
-                <span class="qa-panel__label">min-col-size-large</span>
-                <div class="qa-panel__chips">
-                  <button
-                    v-for="preset in sizePresets"
-                    :key="preset"
-                    class="qa-panel__chip"
-                    :class="{ 'is-active': qaMinColSizeLarge === preset }"
-                    @click="qaMinColSizeLarge = preset"
-                  >
-                    {{ preset }}
-                  </button>
-                </div>
-                <input v-model="qaMinColSizeLarge" placeholder="e.g. 350px" class="qa-panel__input" />
-              </div>
-
-              <div class="qa-panel__group">
-                <span class="qa-panel__label">gap</span>
-                <div class="qa-panel__chips">
-                  <button
-                    v-for="preset in gapPresets"
-                    :key="preset"
-                    class="qa-panel__chip"
-                    :class="{ 'is-active': qaGap === preset }"
-                    @click="qaGap = preset"
-                  >
-                    {{ preset }}
-                  </button>
-                </div>
-                <input v-model="qaGap" placeholder="e.g. 2rem" class="qa-panel__input" />
-              </div>
-            </div>
-          </details>
-        </div>
-
-        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-32']">
-          <div class="auto-grid-demo-container">
-            <AutoGrid
-              :tag="qaTag"
-              :is-responsive="qaIsResponsive"
-              :min-col-size-small="qaMinColSizeSmall"
-              :min-col-size-default="qaMinColSizeDefault"
-              :min-col-size-large="qaMinColSizeLarge"
-              :style="qaStyle"
-            >
-              <template v-for="card in statCards" #[card.id] :key="card.id">
-                <div class="stat-card">
-                  <span class="stat-card__label">{{ card.label }}</span>
-                  <span class="stat-card__value">{{ card.value }}</span>
-                </div>
-              </template>
-            </AutoGrid>
-          </div>
-        </PageRow>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-definePageMeta({ layout: false });
-
-useHead({
-  title: "AutoGrid",
-  meta: [{ name: "description", content: "AutoGrid component demo" }],
-  bodyAttrs: { class: "auto-grid-page" },
-});
-
-const isDev = import.meta.dev;
-
-const tagOptions = ["div", "section", "article", "main"] as const;
-const qaTag = ref<"div" | "section" | "article" | "main">("div");
-const qaIsResponsive = ref(false);
-const qaMinColSizeSmall = ref("250px");
-const qaMinColSizeDefault = ref("300px");
-const qaMinColSizeLarge = ref("350px");
-const qaGap = ref("1rem");
-
-const sizePresets = ["150px", "200px", "250px", "300px", "350px", "400px"];
-const gapPresets = ["0.5rem", "1rem", "1.6rem", "2.4rem", "3.2rem"];
-
-const qaStyle = computed(() => ({
-  "--auto-grid-min-col-size-small": qaMinColSizeSmall.value,
-  "--auto-grid-min-col-size-default": qaMinColSizeDefault.value,
-  "--auto-grid-min-col-size-large": qaMinColSizeLarge.value,
-  "--auto-grid-gap": qaGap.value,
-}));
-
-const statCards = [
-  { id: "item-1", label: "Revenue", value: "£24,500" },
-  { id: "item-2", label: "Clients", value: "142" },
-  { id: "item-3", label: "Bookings", value: "38" },
-  { id: "item-4", label: "Avg. Rating", value: "4.9" },
-  { id: "item-5", label: "New Users", value: "76" },
-  { id: "item-6", label: "Retention", value: "91%" },
-];
-</script>
-
-<style lang="css">
-.auto-grid-page {
-  code {
-    font-family: monospace;
-    font-size: 0.9em;
-    background: var(--slate-02);
-    padding: 0.1em 0.4em;
-    border-radius: 0.3rem;
-  }
-
-  .auto-grid-demo-container {
-    container-type: inline-size;
-  }
-
-  .stat-card {
-    display: flex;
-    flex-direction: column;
-    gap: 0.8rem;
-    padding: 2.4rem;
-    background: white;
-    border-radius: 0.8rem;
-    box-shadow: 0 2px 8px oklch(0% 0 0 / 0.08);
-  }
-
-  .stat-card__label {
-    font-size: 1.2rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: var(--slate-08, #6b7280);
-  }
-
-  .stat-card__value {
-    font-size: 2.4rem;
-    font-weight: 700;
-    color: var(--slate-12, #111827);
-  }
-
-  /* ── QA Panel ──────────────────────────────────────────────────── */
-
-  .qa-panel {
-    background: oklch(15% 0 0);
-    color: white;
-    font-size: 1.3rem;
-  }
-
-  .qa-panel__details {
-    padding: 1rem 2rem;
-  }
-
-  .qa-panel__summary {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    gap: 1.6rem;
-    list-style: none;
-    user-select: none;
-
-    &::-webkit-details-marker {
-      display: none;
-    }
-  }
-
-  .qa-panel__title {
-    font-weight: 600;
-    font-size: 1.1rem;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-  }
-
-  .qa-panel__status {
-    font-family: monospace;
-    font-size: 1.2rem;
-    background: oklch(0% 0 0 / 0.3);
-    padding: 0.2rem 0.8rem;
-    border-radius: 0.4rem;
-    user-select: text;
-    cursor: text;
-  }
-
-  .qa-panel__body {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 2.4rem;
-    padding-block: 1.2rem 0.4rem;
-  }
-
-  .qa-panel__group {
-    display: flex;
-    flex-direction: column;
-    gap: 0.6rem;
-  }
-
-  .qa-panel__label {
-    font-size: 1.1rem;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-    opacity: 0.55;
-  }
-
-  .qa-panel__chips {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.4rem;
-  }
-
-  .qa-panel__chip {
-    font-family: monospace;
-    font-size: 1.2rem;
-    color: white;
-    background: oklch(0% 0 0 / 0.25);
-    border: 1px solid oklch(100% 0 0 / 0.18);
-    padding: 0.3rem 1rem;
-    border-radius: 0.4rem;
-    cursor: pointer;
-    transition: background 0.15s;
-
-    &:hover {
-      background: oklch(0% 0 0 / 0.4);
-    }
-
-    &.is-active {
-      background: oklch(55% 0.18 240);
-      border-color: oklch(55% 0.18 240);
-    }
-  }
-
-  .qa-panel__input {
-    font-family: monospace;
-    font-size: 1.2rem;
-    color: white;
-    background: oklch(0% 0 0 / 0.25);
-    border: 1px solid oklch(100% 0 0 / 0.18);
-    padding: 0.3rem 1rem;
-    border-radius: 0.4rem;
-    width: 18rem;
-
-    &::placeholder {
-      opacity: 0.45;
-    }
-  }
-}
-</style>