srcdev-nuxt-components 9.4.4 → 9.4.5

package/app/components/01.atoms/animations/clip-element/stories/ClipElement.stories.ts

@@ -0,0 +1,133 @@
+import ClipElement from "../ClipElement.vue";
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+
+const meta: Meta<typeof ClipElement> = {
+  title: "Atoms/Effects/ClipElement",
+  component: ClipElement,
+  argTypes: {
+    maxClip: {
+      control: { type: "number", min: 0, step: 10 },
+      description: "Scroll distance (px) over which the element clips in as it enters the viewport, and clips further out as it scrolls above it.",
+      table: { category: "Behaviour" },
+    },
+    styleClassPassthrough: {
+      table: { disable: true },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Clips its slot content in from the top edge as it scrolls into the viewport, using a scroll listener to drive a `clip-path: inset(...)` value. For a CSS-only, listener-free parallax reveal, prefer ScrollRevealFrame/ScrollRevealImage instead — reach for ClipElement only when you specifically need this scroll-position-driven clip behaviour.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ClipElement>;
+
+// A fixed marker at the top of the viewport, since that's exactly where the
+// clip finishes resolving (top === 0) — makes the effect's endpoint visible
+// instead of something you have to guess at while scrolling.
+const topMarker = `
+  <div style="position: fixed; top: 0; left: 0; right: 0; height: 2px; background: #ff5c5c; z-index: 10;"></div>
+  <div style="position: fixed; top: 6px; left: 12px; font-size: 1.2rem; color: #ff5c5c; z-index: 10;">clip fully resolves at this line ↑</div>
+`;
+
+// Horizontal rules baked into the image itself so the wipe boundary is
+// visible against the photo, not just a subtle crop of pixels.
+const rulerOverlayStyle = `
+  background-image: repeating-linear-gradient(
+    to bottom,
+    transparent,
+    transparent 49px,
+    rgba(255, 92, 92, 0.6) 49px,
+    rgba(255, 92, 92, 0.6) 50px
+  );
+`;
+
+const scrollWrapper = (maxClip: number, inner: string) => `
+  ${topMarker}
+  <div style="padding-block: 30vh 6px; max-width: 860px; margin-inline: auto;">
+    <p style="text-align: center; font-size: 1.4rem; opacity: 0.6; margin-block-end: 1rem;">
+      Scroll slowly — the image clips in over the ${maxClip}px just before it reaches the red line.
+    </p>
+  </div>
+  ${inner}
+  <div style="height: 100vh;"></div>
+`;
+
+export const Default: Story = {
+  args: {
+    maxClip: 100,
+  },
+  render: (args) => ({
+    components: { ClipElement },
+    setup() {
+      return { args };
+    },
+    template: scrollWrapper(
+      args.maxClip ?? 100,
+      `
+      <div style="max-width: 860px; margin-inline: auto; position: relative;">
+        <ClipElement v-bind="args">
+          <div style="position: relative;">
+            <img
+              src="/images/page/hero/hero-blonde.jpg"
+              alt="Blonde hair portrait"
+              style="display: block; width: 100%;"
+            />
+            <div style="position: absolute; inset: 0; ${rulerOverlayStyle}"></div>
+          </div>
+        </ClipElement>
+      </div>
+    `
+    ),
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Default props — the ruled overlay makes the clip boundary visible as it wipes in over the last 100px before the image reaches the top of the viewport (marked by the red line).",
+      },
+    },
+  },
+};
+
+export const LargeClipDistance: Story = {
+  args: {
+    maxClip: 500,
+  },
+  render: (args) => ({
+    components: { ClipElement },
+    setup() {
+      return { args };
+    },
+    template: scrollWrapper(
+      args.maxClip ?? 500,
+      `
+      <div style="max-width: 860px; margin-inline: auto; position: relative;">
+        <ClipElement v-bind="args">
+          <div style="position: relative;">
+            <img
+              src="/images/page/hero/hero-blonde.jpg"
+              alt="Blonde hair portrait"
+              style="display: block; width: 100%;"
+            />
+            <div style="position: absolute; inset: 0; ${rulerOverlayStyle}"></div>
+          </div>
+        </ClipElement>
+      </div>
+    `
+    ),
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "A much larger maxClip (500px) stretches the wipe over a longer, easier-to-watch scroll distance — useful for previewing the effect without scrolling pixel-by-pixel.",
+      },
+    },
+  },
+};

package/app/components/01.atoms/animations/clip-element/tests/ClipElement.spec.ts

@@ -0,0 +1,70 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import ClipElement from "../ClipElement.vue";
+
+function setTopAndScroll(wrapper: Awaited<ReturnType<typeof mountSuspended>>, top: number) {
+  const clipElement = wrapper.find(".clipped-element").element as HTMLElement;
+  clipElement.getBoundingClientRect = () => ({ top } as DOMRect);
+  window.dispatchEvent(new Event("scroll"));
+}
+
+describe("ClipElement", () => {
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(ClipElement);
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders correct HTML structure (default props)", async () => {
+    const wrapper = await mountSuspended(ClipElement);
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders the wrapper and clipped-element structure", async () => {
+    const wrapper = await mountSuspended(ClipElement);
+    expect(wrapper.find(".clip-element-wrapper").exists()).toBe(true);
+    expect(wrapper.find(".clipped-element").exists()).toBe(true);
+  });
+
+  it("renders slot content inside .clipped-element", async () => {
+    const wrapper = await mountSuspended(ClipElement, {
+      slots: { default: "<p class='slot-child'>Hello</p>" },
+    });
+    const content = wrapper.find(".clipped-element");
+    expect(content.find(".slot-child").exists()).toBe(true);
+    expect(content.find(".slot-child").text()).toBe("Hello");
+  });
+
+  it("applies styleClassPassthrough classes to the wrapper", async () => {
+    const wrapper = await mountSuspended(ClipElement, {
+      props: { styleClassPassthrough: ["custom-class"] },
+    });
+    expect(wrapper.find(".clip-element-wrapper").classes()).toContain("custom-class");
+  });
+
+  it("clips fully (0px inset) once the element has scrolled past maxClip", async () => {
+    const wrapper = await mountSuspended(ClipElement, { props: { maxClip: 100 } });
+    setTopAndScroll(wrapper, 150);
+    await wrapper.vm.$nextTick();
+
+    const clipElement = wrapper.find(".clipped-element").element as HTMLElement;
+    expect(clipElement.style.getPropertyValue("--_clip-path")).toBe("inset(0px 0 0 0)");
+  });
+
+  it("increases the clip offset as the element approaches the top of the viewport", async () => {
+    const wrapper = await mountSuspended(ClipElement, { props: { maxClip: 100 } });
+    setTopAndScroll(wrapper, 40);
+    await wrapper.vm.$nextTick();
+
+    const clipElement = wrapper.find(".clipped-element").element as HTMLElement;
+    expect(clipElement.style.getPropertyValue("--_clip-path")).toBe("inset(60px 0 0 0)");
+  });
+
+  it("keeps clipping past 0px once the element has scrolled above the viewport", async () => {
+    const wrapper = await mountSuspended(ClipElement, { props: { maxClip: 100 } });
+    setTopAndScroll(wrapper, -20);
+    await wrapper.vm.$nextTick();
+
+    const clipElement = wrapper.find(".clipped-element").element as HTMLElement;
+    expect(clipElement.style.getPropertyValue("--_clip-path")).toBe("inset(120px 0 0 0)");
+  });
+});

package/app/components/01.atoms/animations/clip-element/tests/__snapshots__/ClipElement.spec.ts.snap

@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ClipElement > renders correct HTML structure (default props) 1`] = `
+"<div class="clip-element-wrapper">
+  <div class="clipped-element" style="--_clip-path: inset(0px 0 0 0);"></div>
+</div>"
+`;

package/app/components/01.atoms/canvas-switcher/CONSUMER-STYLING.md

@@ -0,0 +1,27 @@
+# CanvasSwitcher — Consumer Styling
+
+CanvasSwitcher renders its buttons via `InputButtonCore` (`variant="tertiary"`, icon-only) — see
+that component's own `CONSUMER-STYLING.md` for the button surface/hover/focus tokens it inherits.
+CanvasSwitcher itself exposes the following public tokens:
+
+| Token | Default | Applies to |
+|---|---|---|
+| `--canvas-switcher-gap` | `2rem` | Gap between the switcher's own children (currently just the list) |
+| `--canvas-switcher-item-gap` | `1rem` | Gap between each button in the list |
+| `--canvas-switcher-icon-size` | `2.4rem` | Width/height of each icon |
+| `--canvas-switcher-icon-colour` | `light-dark(var(--slate-10), var(--slate-02))` | Icon colour, resting state |
+| `--canvas-switcher-icon-colour-current` | `light-dark(var(--green-10), var(--green-04))` | Icon colour when that button's canvas is selected (`aria-pressed="true"`) |
+
+## Class passthrough
+
+`styleClassPassthrough` (string or string[]) is applied to the root `.canvas-switcher` element via
+`useStyleClassPassthrough()`.
+
+## Canvas-size utility classes
+
+`.mobileCanvas`, `.tabletCanvas`, `.laptopCanvas`, `.desktopCanvas`, `.fullWidthCanvas` are also
+declared in this component's stylesheet (not scoped to `.canvas-switcher`) so a consumer can apply
+the same `MediaCanvas` value returned by `v-model:canvas-name` directly as a class on a preview
+wrapper to constrain its width — see `LayoutGridA`/`LayoutGridB` stories for the pattern. These are
+plain global utility classes, not overridable via a CSS custom property; import `CanvasSwitcher`
+(or otherwise ensure its styles are bundled) wherever you rely on them.

package/app/components/01.atoms/canvas-switcher/CanvasSwitcher.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="canvas-switcher" :class="[elementClasses]">
+    <ul class="canvas-switcher-list">
+      <li v-for="option in canvasOptions" :key="option.value">
+        <InputButtonCore
+          type="button"
+          variant="tertiary"
+          class="canvas-switcher-button"
+          :button-text="option.label"
+          :aria-pressed="canvasName === option.value"
+          @click="updateCanvas(option.value)"
+        >
+          <template #iconOnly>
+            <Icon :name="option.icon" class="icon"></Icon>
+          </template>
+        </InputButtonCore>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { MediaCanvas } from "~/types/components";
+
+interface CanvasOption {
+  value: MediaCanvas;
+  label: string;
+  icon: string;
+}
+
+interface Props {
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  styleClassPassthrough: () => [],
+});
+
+const canvasName = defineModel<MediaCanvas>("canvasName");
+
+const canvasOptions: CanvasOption[] = [
+  { value: "mobileCanvas", label: "Mobile", icon: "ic:baseline-phone-iphone" },
+  { value: "tabletCanvas", label: "Tablet", icon: "ic:baseline-tablet-mac" },
+  { value: "laptopCanvas", label: "Laptop", icon: "ic:baseline-laptop-mac" },
+  { value: "desktopCanvas", label: "Desktop", icon: "ic:outline-desktop-mac" },
+  { value: "fullWidthCanvas", label: "Full width", icon: "pixelarticons:viewport-wide" },
+];
+
+const updateCanvas = (setCanvas: MediaCanvas) => {
+  canvasName.value = setCanvas;
+};
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+@layer components {
+  .canvas-switcher {
+    display: flex;
+    align-items: center;
+    gap: var(--canvas-switcher-gap, 2rem);
+  }
+
+  .canvas-switcher-list {
+    display: flex;
+    align-items: center;
+    gap: var(--canvas-switcher-item-gap, 1rem);
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .canvas-switcher-button.input-button-core {
+    color: var(--canvas-switcher-icon-colour, light-dark(var(--slate-10), var(--slate-02)));
+
+    &[aria-pressed="true"] {
+      color: var(--canvas-switcher-icon-colour-current, light-dark(var(--green-10), var(--green-04)));
+    }
+
+    .icon {
+      width: var(--canvas-switcher-icon-size, 2.4rem);
+      height: var(--canvas-switcher-icon-size, 2.4rem);
+    }
+  }
+
+  /* Canvas-size utility classes — applied by a consumer to a preview wrapper to constrain
+     it to the width matching a MediaCanvas value. Not scoped to .canvas-switcher itself. */
+  .mobileCanvas {
+    max-width: 41.2rem;
+  }
+  .tabletCanvas {
+    max-width: 76.8rem;
+  }
+  .laptopCanvas {
+    max-width: 106.4rem;
+  }
+  .desktopCanvas {
+    max-width: 128rem;
+  }
+  .fullWidthCanvas {
+    max-width: unset;
+  }
+}
+</style>

package/app/components/01.atoms/canvas-switcher/stories/CanvasSwitcher.stories.ts

@@ -0,0 +1,75 @@
+import type { Meta, StoryFn } from "@nuxtjs/storybook";
+import CanvasSwitcher from "../CanvasSwitcher.vue";
+import type { MediaCanvas } from "~/types/components";
+
+interface CanvasSwitcherStoryArgs {
+  canvasName: MediaCanvas | undefined;
+  styleClassPassthrough: string[];
+}
+
+export default {
+  title: "Atoms/CanvasSwitcher",
+  component: CanvasSwitcher,
+  argTypes: {
+    canvasName: {
+      control: { type: "select" },
+      options: ["mobileCanvas", "tabletCanvas", "laptopCanvas", "desktopCanvas", "fullWidthCanvas"],
+      description: "Bound via v-model:canvas-name — the currently selected MediaCanvas value",
+      table: { category: "Model" },
+    },
+    styleClassPassthrough: {
+      control: "object",
+      description: "Additional CSS classes applied to the root element",
+      table: { category: "Styling" },
+    },
+  },
+  args: {
+    canvasName: "desktopCanvas",
+    styleClassPassthrough: [],
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "An icon button group for switching between MediaCanvas preview widths (mobile/tablet/laptop/desktop/full width). Also declares the `.mobileCanvas`/`.tabletCanvas`/etc. utility classes a consumer can apply to a preview wrapper to constrain it to the matching width — see LayoutGridA/LayoutGridB stories.",
+      },
+    },
+  },
+} as Meta<typeof CanvasSwitcher>;
+
+const Template: StoryFn<CanvasSwitcherStoryArgs> = (args) => ({
+  components: { CanvasSwitcher },
+  setup() {
+    const { canvasName, ...otherArgs } = args;
+    const selected = ref(canvasName);
+    return { selected, args: otherArgs };
+  },
+  template: `
+    <div>
+      <CanvasSwitcher v-model:canvas-name="selected" v-bind="args" />
+      <p style="margin-top: 1.6rem;">Selected: {{ selected }}</p>
+    </div>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const PreviewWidthDemo = Template.bind({});
+PreviewWidthDemo.args = {};
+PreviewWidthDemo.render = (args) => ({
+  components: { CanvasSwitcher },
+  setup() {
+    const { canvasName } = args;
+    const selected = ref(canvasName);
+    return { selected };
+  },
+  template: `
+    <div>
+      <CanvasSwitcher v-model:canvas-name="selected" />
+      <div :class="selected" style="border: 1px dashed currentColor; margin-top: 1.6rem; padding: 1.6rem;">
+        This box is constrained by the selected canvas's utility class.
+      </div>
+    </div>
+  `,
+});

package/app/components/01.atoms/canvas-switcher/tests/CanvasSwitcher.spec.ts

@@ -0,0 +1,67 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import CanvasSwitcher from "../CanvasSwitcher.vue";
+
+describe("CanvasSwitcher", () => {
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(CanvasSwitcher);
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  it("renders one button per canvas option", async () => {
+    const wrapper = await mountSuspended(CanvasSwitcher);
+    expect(wrapper.findAll("button").length).toBe(5);
+  });
+
+  it("gives each button an accessible name", async () => {
+    const wrapper = await mountSuspended(CanvasSwitcher);
+    const labels = wrapper.findAll("button").map((button) => button.text());
+    expect(labels).toEqual(["Mobile", "Tablet", "Laptop", "Desktop", "Full width"]);
+  });
+
+  it("marks no button as pressed when canvasName is unset", async () => {
+    const wrapper = await mountSuspended(CanvasSwitcher);
+    const pressed = wrapper.findAll('button[aria-pressed="true"]');
+    expect(pressed.length).toBe(0);
+  });
+
+  it("marks the matching button as pressed via the canvasName model", async () => {
+    const wrapper = await mountSuspended(CanvasSwitcher, {
+      props: { canvasName: "tabletCanvas" },
+    });
+    const buttons = wrapper.findAll("button");
+    expect(buttons[1]?.attributes("aria-pressed")).toBe("true");
+    expect(buttons[0]?.attributes("aria-pressed")).toBe("false");
+  });
+
+  it("updates the canvasName model when a button is clicked", async () => {
+    const wrapper = await mountSuspended(CanvasSwitcher, {
+      props: { canvasName: "mobileCanvas" },
+    });
+    await wrapper.findAll("button")[3]?.trigger("click");
+    expect(wrapper.emitted("update:canvasName")?.[0]).toEqual(["desktopCanvas"]);
+  });
+
+  it("applies a single styleClassPassthrough string", async () => {
+    const wrapper = await mountSuspended(CanvasSwitcher, { props: { styleClassPassthrough: "custom-class" } });
+    expect(wrapper.classes()).toContain("custom-class");
+  });
+
+  it("applies multiple styleClassPassthrough classes from an array", async () => {
+    const wrapper = await mountSuspended(CanvasSwitcher, {
+      props: { styleClassPassthrough: ["class-a", "class-b"] },
+    });
+    expect(wrapper.classes()).toContain("class-a");
+    expect(wrapper.classes()).toContain("class-b");
+  });
+
+  it("updates classes when styleClassPassthrough prop changes", async () => {
+    const wrapper = await mountSuspended(CanvasSwitcher, {
+      props: { styleClassPassthrough: ["original"] },
+    });
+    expect(wrapper.classes()).toContain("original");
+    await wrapper.setProps({ styleClassPassthrough: ["updated"] });
+    expect(wrapper.classes()).not.toContain("original");
+    expect(wrapper.classes()).toContain("updated");
+  });
+});

package/app/components/01.atoms/clipped-panel/CONSUMER-STYLING.md

@@ -0,0 +1,39 @@
+# ClippedPanel — Consumer Styling Guide
+
+## Public token API
+
+| Token | Default | Controls |
+|---|---|---|
+| `--clipped-panel-background-colour` | `light-dark(hsl(0, 0%, 96%), hsl(0, 0%, 12%))` | Panel background |
+| `--clipped-panel-outline-colour` | `light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%))` | Outline colour, and the panel's text/icon colour (`color`) |
+| `--clipped-panel-outline-width` | `1px` | Outline width |
+
+```css
+.my-page {
+  --clipped-panel-background-colour: #fef3e7;
+  --clipped-panel-outline-colour: #b5651d;
+  --clipped-panel-outline-width: 2px;
+}
+```
+
+Or scope to a single instance via `styleClassPassthrough`:
+
+```vue
+<ClippedPanel variant="square" style-class-passthrough="promo-panel">...</ClippedPanel>
+```
+
+```css
+.promo-panel {
+  --clipped-panel-background-colour: #fef3e7;
+}
+```
+
+## Shapes are fixed-size, not tokenised
+
+Each `variant`'s notched/cutout shape is drawn with `clip-path: path("...")` using literal pixel
+coordinates (`square`/`circle-cutout` at 200×200px, `rectangle` at 300×200px). CSS custom
+properties cannot be interpolated into a `path()` string, so the shape geometry itself — corner
+radii, notch size, overall dimensions — is **not** overridable via tokens or `width`/`height`
+overrides. Changing `width` on the element stretches the box without moving the clip-path
+coordinates, which will misalign the shape. If a different size or geometry is needed, that
+requires a new variant with its own `path()` string, not a CSS override.

package/app/components/01.atoms/clipped-panel/ClippedPanel.vue

@@ -0,0 +1,68 @@
+<template>
+  <component :is="tag" class="clipped-panel" :class="[variant, elementClasses]">
+    <slot name="default"></slot>
+  </component>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  tag?: "div" | "p" | "span" | "section" | "article" | "aside" | "header" | "footer" | "main" | "nav" | "ul" | "ol";
+  variant?: "circle-cutout" | "rectangle" | "square";
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: "div",
+  variant: "square",
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+</script>
+
+<style lang="css">
+@layer components {
+.clipped-panel {
+  --_outline-colour: var(--clipped-panel-outline-colour, light-dark(hsl(0, 29%, 3%), hsl(0, 0%, 92%)));
+
+  background-color: var(--clipped-panel-background-colour, light-dark(hsl(0, 0%, 96%), hsl(0, 0%, 12%)));
+  color: var(--_outline-colour);
+  outline: var(--clipped-panel-outline-width, 1px) solid var(--_outline-colour);
+
+  aspect-ratio: 1;
+
+  /*
+   * clip-path: path(...) coordinates are fixed to each variant's exact
+   * pixel width below — CSS custom properties cannot be interpolated into
+   * a path() string, so these shapes cannot be resized via tokens. See
+   * CONSUMER-STYLING.md.
+   */
+  &.rectangle {
+    clip-path: path(
+      "M 10, 50 L 140, 50 A 10, 10, 0, 0, 0 150, 40 L 150, 10 A 10, 10, 0, 0, 1 160, 0 L 290, 0 A 10, 10, 0, 0, 1 300, 10 L 300, 190 A 10, 10, 0, 0, 1 290, 200 L 10, 200 A 10, 10, 0, 0, 1 0, 190 L 0, 60 A 10, 10, 0, 0, 1 10, 50 Z"
+    );
+    width: 300px;
+  }
+  &.square {
+    clip-path: path(
+      "M 10, 50 L 90, 50 A 10, 10, 0, 0, 0 100, 40 L 100, 10 A 10, 10, 0, 0, 1 110, 0 L 190, 0 A 10, 10, 0, 0, 1 200, 10 L 200, 190 A 10, 10, 0, 0, 1 190, 200 L 10, 200 A 10, 10, 0, 0, 1 0, 190 L 0, 60 A 10, 10, 0, 0, 1 10, 50 Z"
+    );
+    width: 200px;
+  }
+  &.circle-cutout {
+    /* 200x200 rounded square (10px corners) with a 50px-radius circular notch bitten out of the top-right corner. */
+    clip-path: path(
+      "M 10, 0 L 150, 0 A 50, 50, 0, 0, 0 200, 50 L 200, 190 A 10, 10, 0, 0, 1 190, 200 L 10, 200 A 10, 10, 0, 0, 1 0, 190 L 0, 10 A 10, 10, 0, 0, 1 10, 0 Z"
+    );
+    width: 200px;
+  }
+}
+}
+</style>