srcdev-nuxt-components 9.1.42 → 9.1.44

package/app/components/01.atoms/grids/data-grid/stories/{DataGrid.stories.ts → AutoGrid.stories.ts}

@@ -1,15 +1,53 @@
+import { computed } from "vue";
 import type { Meta, StoryFn } from "@nuxtjs/storybook";
-import DataGridComponent from "../DataGrid.vue";
+import AutoGridComponent from "../AutoGrid.vue";
 
-const meta: Meta<typeof DataGridComponent> = {
-  title: "Atoms/Grids/DataGrid",
-  component: DataGridComponent,
+interface AutoGridArgs {
+  tag: "div" | "section" | "article" | "main";
+  isResponsive: boolean;
+  styleClassPassthrough: string[];
+  minColSizeSmall: string;
+  minColSizeDefault: string;
+  minColSizeLarge: string;
+  gap: string;
+}
+
+const meta: Meta<AutoGridArgs> = {
+  title: "Atoms/Grids/AutoGrid",
+  component: AutoGridComponent,
   argTypes: {
     tag: {
       control: { type: "select" },
       options: ["div", "section", "article", "main"],
       description: "HTML tag to render as",
-      table: { category: "Semantic" },
+      table: { category: "Props" },
+    },
+    isResponsive: {
+      control: { type: "boolean" },
+      description:
+        "Enables container-query breakpoints: `--auto-grid-min-col-size-small` below 768px, default 768px+, large 1024px+. Requires a `container-type: inline-size` ancestor.",
+      table: { category: "Props" },
+    },
+    minColSizeSmall: {
+      control: { type: "text" },
+      description: "`--auto-grid-min-col-size-small` — minimum column width in responsive mode below 768px",
+      table: { category: "CSS Tokens" },
+    },
+    minColSizeDefault: {
+      control: { type: "text" },
+      description:
+        "`--auto-grid-min-col-size-default` — controls column width when `isResponsive` is **off**. Also used as the mid-size step in responsive mode (768px+).",
+      table: { category: "CSS Tokens" },
+    },
+    minColSizeLarge: {
+      control: { type: "text" },
+      description: "`--auto-grid-min-col-size-large` — minimum column width in responsive mode 1024px+",
+      table: { category: "CSS Tokens" },
+    },
+    gap: {
+      control: { type: "text" },
+      description: "`--auto-grid-gap` — gap between grid items",
+      table: { category: "CSS Tokens" },
     },
     styleClassPassthrough: {
       table: { disable: true },
@@ -17,13 +55,18 @@ const meta: Meta<typeof DataGridComponent> = {
   },
   args: {
     tag: "div",
+    isResponsive: false,
+    minColSizeSmall: "250px",
+    minColSizeDefault: "300px",
+    minColSizeLarge: "350px",
+    gap: "1rem",
     styleClassPassthrough: [],
   },
   parameters: {
     docs: {
       description: {
         component:
-          "A responsive auto-fit grid container. Uses CSS custom properties `--data-grid-columns` and `--data-grid-gap` to control layout. Renders named slots provided by the consumer.",
+          "A responsive auto-fit grid container. Override `--auto-grid-min-col-size-default` and `--auto-grid-gap` to control layout. Enable `isResponsive` for container-query-based column steps using `--auto-grid-min-col-size-small` and `--auto-grid-min-col-size-large`.",
       },
     },
   },
@@ -33,22 +76,24 @@ export default meta;
 
 const cardStyle =
   "padding: 2.4rem; background: white; border-radius: 0.8rem; box-shadow: 0 2px 8px rgba(0,0,0,0.08); display: flex; flex-direction: column; gap: 0.8rem;";
-const labelStyle = "font-size: 1.2rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280;";
+const labelStyle =
+  "font-size: 1.2rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280;";
 const valueStyle = "font-size: 2.4rem; font-weight: 700; color: #111827;";
 
-interface DataGridArgs {
-  tag: "div" | "section" | "article" | "main";
-  styleClassPassthrough: string[];
-}
-
-const Template: StoryFn<DataGridArgs> = (args) => ({
-  components: { DataGridComponent },
+const Template: StoryFn<AutoGridArgs> = (args) => ({
+  components: { AutoGridComponent },
   setup() {
-    return { args };
+    const cssTokenStyle = computed(() => ({
+      "--auto-grid-min-col-size-small": args.minColSizeSmall,
+      "--auto-grid-min-col-size-default": args.minColSizeDefault,
+      "--auto-grid-min-col-size-large": args.minColSizeLarge,
+      "--auto-grid-gap": args.gap,
+    }));
+    return { args, cssTokenStyle };
   },
   template: `
-    <div style="padding: 3.2rem; background: #f9fafb;">
-      <DataGridComponent :tag="args.tag" :style-class-passthrough="args.styleClassPassthrough">
+    <div style="padding: 3.2rem; background: #f9fafb; container-type: inline-size;">
+      <AutoGridComponent :tag="args.tag" :is-responsive="args.isResponsive" :style="cssTokenStyle" :style-class-passthrough="args.styleClassPassthrough">
         <template #item-1>
           <div style="${cardStyle}">
             <span style="${labelStyle}">Revenue</span>
@@ -73,7 +118,7 @@ const Template: StoryFn<DataGridArgs> = (args) => ({
             <span style="${valueStyle}">4.9</span>
           </div>
         </template>
-      </DataGridComponent>
+      </AutoGridComponent>
     </div>
   `,
 });
@@ -82,7 +127,18 @@ export const Default = Template.bind({});
 Default.parameters = {
   docs: {
     description: {
-      story: "Default grid with four stat cards. Columns auto-fit to available space at a minimum of 250px each.",
+      story: "Default grid with four stat cards. Columns auto-fit to available space at a minimum of 300px each.",
+    },
+  },
+};
+
+export const Responsive = Template.bind({});
+Responsive.args = { isResponsive: true };
+Responsive.parameters = {
+  docs: {
+    description: {
+      story:
+        "With `isResponsive` enabled, column width steps through three sizes based on container width. Resize the story viewport to see the breakpoints in action.",
     },
   },
 };
@@ -91,10 +147,10 @@ export const TwoItems = Template.bind({});
 TwoItems.storyName = "Two Items";
 TwoItems.decorators = [
   () => ({
-    components: { DataGridComponent },
+    components: { AutoGridComponent },
     template: `
-      <div style="padding: 3.2rem; background: #f9fafb;">
-        <DataGridComponent>
+      <div style="padding: 3.2rem; background: #f9fafb; container-type: inline-size;">
+        <AutoGridComponent>
           <template #item-1>
             <div style="${cardStyle}">
               <span style="${labelStyle}">Revenue</span>
@@ -107,7 +163,7 @@ TwoItems.decorators = [
               <span style="${valueStyle}">142</span>
             </div>
           </template>
-        </DataGridComponent>
+        </AutoGridComponent>
       </div>
     `,
   }),
@@ -116,15 +172,15 @@ TwoItems.parameters = {
   docs: { description: { story: "Grid with two items — auto-fit spreads them to fill available columns." } },
 };
 
-export const NarrowContainer: StoryFn<DataGridArgs> = (args) => ({
-  components: { DataGridComponent },
+export const NarrowContainer: StoryFn<AutoGridArgs> = (args) => ({
+  components: { AutoGridComponent },
   setup() {
     return { args };
   },
   template: `
     <div style="padding: 3.2rem; background: #f9fafb;">
-      <div style="max-width: 400px;">
-        <DataGridComponent :tag="args.tag">
+      <div style="max-width: 400px; container-type: inline-size;">
+        <AutoGridComponent :tag="args.tag">
           <template #item-1>
             <div style="${cardStyle}">
               <span style="${labelStyle}">Revenue</span>
@@ -143,7 +199,7 @@ export const NarrowContainer: StoryFn<DataGridArgs> = (args) => ({
               <span style="${valueStyle}">38</span>
             </div>
           </template>
-        </DataGridComponent>
+        </AutoGridComponent>
       </div>
     </div>
   `,
@@ -151,19 +207,19 @@ export const NarrowContainer: StoryFn<DataGridArgs> = (args) => ({
 NarrowContainer.parameters = {
   docs: {
     description: {
-      story: "In a 400px container the auto-fit columns stack to a single column once items fall below 250px.",
+      story: "In a 400px container the auto-fit columns stack to a single column once items fall below 300px.",
     },
   },
 };
 
-export const CustomColumns: StoryFn<DataGridArgs> = (args) => ({
-  components: { DataGridComponent },
+export const CustomColumns: StoryFn<AutoGridArgs> = (args) => ({
+  components: { AutoGridComponent },
   setup() {
     return { args };
   },
   template: `
     <div style="padding: 3.2rem; background: #f9fafb;">
-      <DataGridComponent style="--data-grid-columns: repeat(3, 1fr); --data-grid-gap: 2.4rem;" :tag="args.tag">
+      <AutoGridComponent style="grid-template-columns: repeat(3, 1fr); --auto-grid-gap: 2.4rem;" :tag="args.tag">
         <template #item-1>
           <div style="${cardStyle}">
             <span style="${labelStyle}">Revenue</span>
@@ -182,7 +238,7 @@ export const CustomColumns: StoryFn<DataGridArgs> = (args) => ({
             <span style="${valueStyle}">38</span>
           </div>
         </template>
-      </DataGridComponent>
+      </AutoGridComponent>
     </div>
   `,
 });
@@ -190,19 +246,19 @@ CustomColumns.parameters = {
   docs: {
     description: {
       story:
-        "Override `--data-grid-columns` and `--data-grid-gap` via inline style to force a fixed 3-column layout with wider gaps.",
+        "Override `grid-template-columns` and `--auto-grid-gap` via inline style to force a fixed 3-column layout with wider gaps.",
     },
   },
 };
 
-export const SemanticSection: StoryFn<DataGridArgs> = (args) => ({
-  components: { DataGridComponent },
+export const SemanticSection: StoryFn<AutoGridArgs> = (args) => ({
+  components: { AutoGridComponent },
   setup() {
     return { args };
   },
   template: `
-    <div style="padding: 3.2rem; background: #f9fafb;">
-      <DataGridComponent tag="section">
+    <div style="padding: 3.2rem; background: #f9fafb; container-type: inline-size;">
+      <AutoGridComponent tag="section">
         <template #item-1>
           <div style="${cardStyle}">
             <span style="${labelStyle}">Revenue</span>
@@ -221,7 +277,7 @@ export const SemanticSection: StoryFn<DataGridArgs> = (args) => ({
             <span style="${valueStyle}">38</span>
           </div>
         </template>
-      </DataGridComponent>
+      </AutoGridComponent>
     </div>
   `,
 });

package/app/components/01.atoms/grids/data-grid/tests/{DataGrid.spec.ts → AutoGrid.spec.ts}

@@ -1,26 +1,27 @@
 import { describe, it, expect } from "vitest";
 import { mountSuspended } from "@nuxt/test-utils/runtime";
-import DataGrid from "../DataGrid.vue";
+import AutoGrid from "../AutoGrid.vue";
 
-describe("DataGrid", () => {
+describe("AutoGrid", () => {
   // ─── Mount ───────────────────────────────────────────────────────────────
 
   it("mounts without error", async () => {
-    const wrapper = await mountSuspended(DataGrid);
+    const wrapper = await mountSuspended(AutoGrid);
     expect(wrapper.vm).toBeTruthy();
   });
 
   // ─── Snapshots ───────────────────────────────────────────────────────────
 
   it("renders correct HTML structure (default props)", async () => {
-    const wrapper = await mountSuspended(DataGrid);
+    const wrapper = await mountSuspended(AutoGrid);
     expect(wrapper.html()).toMatchSnapshot();
   });
 
   it("renders correct HTML structure (all props and slots set)", async () => {
-    const wrapper = await mountSuspended(DataGrid, {
+    const wrapper = await mountSuspended(AutoGrid, {
       props: {
         tag: "section",
+        isResponsive: true,
         styleClassPassthrough: ["custom-class"],
       },
       slots: {
@@ -35,58 +36,77 @@ describe("DataGrid", () => {
   // ─── Root element ────────────────────────────────────────────────────────
 
   it("renders a <div> as the root element by default", async () => {
-    const wrapper = await mountSuspended(DataGrid);
+    const wrapper = await mountSuspended(AutoGrid);
     expect(wrapper.element.tagName).toBe("DIV");
   });
 
-  it("always has the data-grid class", async () => {
-    const wrapper = await mountSuspended(DataGrid);
-    expect(wrapper.classes()).toContain("data-grid");
+  it("always has the auto-grid class", async () => {
+    const wrapper = await mountSuspended(AutoGrid);
+    expect(wrapper.classes()).toContain("auto-grid");
   });
 
   // ─── Tag prop ────────────────────────────────────────────────────────────
 
   it("renders a <section> when tag is section", async () => {
-    const wrapper = await mountSuspended(DataGrid, { props: { tag: "section" } });
+    const wrapper = await mountSuspended(AutoGrid, { props: { tag: "section" } });
     expect(wrapper.element.tagName).toBe("SECTION");
   });
 
   it("renders an <article> when tag is article", async () => {
-    const wrapper = await mountSuspended(DataGrid, { props: { tag: "article" } });
+    const wrapper = await mountSuspended(AutoGrid, { props: { tag: "article" } });
     expect(wrapper.element.tagName).toBe("ARTICLE");
   });
 
   it("renders a <main> when tag is main", async () => {
-    const wrapper = await mountSuspended(DataGrid, { props: { tag: "main" } });
+    const wrapper = await mountSuspended(AutoGrid, { props: { tag: "main" } });
     expect(wrapper.element.tagName).toBe("MAIN");
   });
 
   // ─── Aria ─────────────────────────────────────────────────────────────────
 
   it("does not set aria-labelledby when tag is div", async () => {
-    const wrapper = await mountSuspended(DataGrid, { props: { tag: "div" } });
+    const wrapper = await mountSuspended(AutoGrid, { props: { tag: "div" } });
     expect(wrapper.attributes("aria-labelledby")).toBeUndefined();
   });
 
   it("sets aria-labelledby when tag is section", async () => {
-    const wrapper = await mountSuspended(DataGrid, { props: { tag: "section" } });
+    const wrapper = await mountSuspended(AutoGrid, { props: { tag: "section" } });
     expect(wrapper.attributes("aria-labelledby")).toBeTruthy();
   });
 
   it("sets aria-labelledby when tag is article", async () => {
-    const wrapper = await mountSuspended(DataGrid, { props: { tag: "article" } });
+    const wrapper = await mountSuspended(AutoGrid, { props: { tag: "article" } });
     expect(wrapper.attributes("aria-labelledby")).toBeTruthy();
   });
 
   it("sets aria-labelledby when tag is main", async () => {
-    const wrapper = await mountSuspended(DataGrid, { props: { tag: "main" } });
+    const wrapper = await mountSuspended(AutoGrid, { props: { tag: "main" } });
     expect(wrapper.attributes("aria-labelledby")).toBeTruthy();
   });
 
+  // ─── isResponsive ────────────────────────────────────────────────────────
+
+  it("does not have is-responsive class by default", async () => {
+    const wrapper = await mountSuspended(AutoGrid);
+    expect(wrapper.classes()).not.toContain("is-responsive");
+  });
+
+  it("adds is-responsive class when isResponsive is true", async () => {
+    const wrapper = await mountSuspended(AutoGrid, { props: { isResponsive: true } });
+    expect(wrapper.classes()).toContain("is-responsive");
+  });
+
+  it("removes is-responsive class when isResponsive changes to false", async () => {
+    const wrapper = await mountSuspended(AutoGrid, { props: { isResponsive: true } });
+    expect(wrapper.classes()).toContain("is-responsive");
+    await wrapper.setProps({ isResponsive: false });
+    expect(wrapper.classes()).not.toContain("is-responsive");
+  });
+
   // ─── Slots ───────────────────────────────────────────────────────────────
 
   it("renders a named slot", async () => {
-    const wrapper = await mountSuspended(DataGrid, {
+    const wrapper = await mountSuspended(AutoGrid, {
       slots: { "item-1": "<div class='card'>Card 1</div>" },
     });
     expect(wrapper.find(".card").exists()).toBe(true);
@@ -94,7 +114,7 @@ describe("DataGrid", () => {
   });
 
   it("renders multiple named slots", async () => {
-    const wrapper = await mountSuspended(DataGrid, {
+    const wrapper = await mountSuspended(AutoGrid, {
       slots: {
         "item-1": "<div class='card-1'>Card 1</div>",
         "item-2": "<div class='card-2'>Card 2</div>",
@@ -107,21 +127,21 @@ describe("DataGrid", () => {
   });
 
   it("renders no slot content when no slots are provided", async () => {
-    const wrapper = await mountSuspended(DataGrid);
+    const wrapper = await mountSuspended(AutoGrid);
     expect(wrapper.text()).toBe("");
   });
 
   // ─── styleClassPassthrough ───────────────────────────────────────────────
 
   it("applies a single styleClassPassthrough string to the root", async () => {
-    const wrapper = await mountSuspended(DataGrid, {
+    const wrapper = await mountSuspended(AutoGrid, {
       props: { styleClassPassthrough: "my-grid" },
     });
     expect(wrapper.classes()).toContain("my-grid");
   });
 
   it("applies multiple styleClassPassthrough classes from an array", async () => {
-    const wrapper = await mountSuspended(DataGrid, {
+    const wrapper = await mountSuspended(AutoGrid, {
       props: { styleClassPassthrough: ["my-grid", "mbe-32"] },
     });
     expect(wrapper.classes()).toContain("my-grid");
@@ -129,7 +149,7 @@ describe("DataGrid", () => {
   });
 
   it("updates classes when styleClassPassthrough prop changes", async () => {
-    const wrapper = await mountSuspended(DataGrid, {
+    const wrapper = await mountSuspended(AutoGrid, {
       props: { styleClassPassthrough: ["original"] },
     });
     expect(wrapper.classes()).toContain("original");

package/app/components/01.atoms/grids/data-grid/tests/__snapshots__/AutoGrid.spec.ts.snap

@@ -0,0 +1,11 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AutoGrid > renders correct HTML structure (all props and slots set) 1`] = `
+"<section class="auto-grid custom-class is-responsive" aria-labelledby="v-0-0">
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</section>"
+`;
+
+exports[`AutoGrid > renders correct HTML structure (default props) 1`] = `"<div class="auto-grid"></div>"`;

package/app/components/01.atoms/grids/data-grid/tests/__snapshots__/DataGrid.spec.ts.snap

@@ -1,11 +1,11 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`DataGrid > renders correct HTML structure (all props and slots set) 1`] = `
-"<section class="data-grid custom-class" aria-labelledby="v-0-0">
+exports[`AutoGrid > renders correct HTML structure (all props and slots set) 1`] = `
+"<section class="auto-grid custom-class" aria-labelledby="v-0-0">
   <div>Item 1</div>
   <div>Item 2</div>
   <div>Item 3</div>
 </section>"
 `;
 
-exports[`DataGrid > renders correct HTML structure (default props) 1`] = `"<div class="data-grid"></div>"`;
+exports[`AutoGrid > renders correct HTML structure (default props) 1`] = `"<div class="auto-grid"></div>"`;

package/app/components/02.molecules/display-chip/DisplayChip.vue

@@ -0,0 +1,189 @@
+<template>
+  <component :is="tag" class="display-chip-core" :class="[shape, elementClasses]" :style="chipStyles">
+    <slot name="default"></slot>
+    <Icon v-if="config?.icon" :name="config.icon" class="chip-icon" />
+    <span v-if="config?.label" class="chip-label" :class="`length-${config.label.length}`">{{ validatedLabel }}</span>
+  </component>
+</template>
+
+<script setup lang="ts">
+import type { DisplayChipConfig } from "~/types/components";
+
+interface Props {
+  tag?: "div" | "span";
+  shape?: "circle" | "square";
+  config?: DisplayChipConfig;
+  styleClassPassthrough?: string | string[];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  tag: "span",
+  shape: "circle",
+  config: () => ({
+    size: "12px",
+    maskWidth: "4px",
+    offset: "0px",
+    angle: "90deg",
+    icon: undefined,
+    label: undefined,
+  }),
+  styleClassPassthrough: () => [],
+});
+
+const { elementClasses, resetElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+watch(
+  () => props.styleClassPassthrough,
+  () => {
+    resetElementClasses(props.styleClassPassthrough);
+  }
+);
+
+const validatedLabel = computed(() => {
+  if (!props.config?.label) return props.config?.label;
+  if (props.config.label.length > 3) {
+    console.warn(
+      `DisplayChip: label "${
+        props.config.label
+      }" exceeds maximum length of 3 characters. Truncating to "${props.config.label.slice(0, 3)}"`
+    );
+    return props.config.label.slice(0, 3);
+  }
+  return props.config.label;
+});
+
+const chipStyles = computed(() => ({
+  "--chip-size": props.config?.size,
+  "--chip-mask-width": props.config?.maskWidth,
+  "--chip-offset": props.config?.offset,
+  "--chip-angle": props.config?.angle,
+}));
+</script>
+
+<style lang="css">
+@layer components {
+  .display-chip-core {
+    --computed-mask-diameter: calc(var(--chip-size) + (var(--chip-mask-width) * 2));
+
+    &.circle {
+      --computed-chip-offset: calc((100% / 2) + var(--chip-offset));
+      --computed-position-x: calc(var(--computed-chip-offset) * cos(var(--chip-angle) - 90deg) + (100% / 2));
+      --computed-position-y: calc(var(--computed-chip-offset) * sin(var(--chip-angle) - 90deg) + (100% / 2));
+    }
+
+    &.square {
+      --circle-x: calc(50% + (50% + var(--chip-offset) + (var(--chip-size) / 2)) * cos(var(--chip-angle) - 90deg));
+      --circle-y: calc(50% + (50% + var(--chip-offset) + (var(--chip-size) / 2)) * sin(var(--chip-angle) - 90deg));
+      --computed-position-x: clamp(calc(var(--chip-offset) * -1), var(--circle-x), calc(100% + var(--chip-offset)));
+      --computed-position-y: clamp(calc(var(--chip-offset) * -1), var(--circle-y), calc(100% + var(--chip-offset)));
+    }
+
+    /* colors */
+
+    --color-offline: slategrey;
+    --color-online: rgb(0, 255, 135);
+    --color-idle: rgb(255, 185, 51);
+    --color-dnd: rgb(255, 40, 80);
+
+    position: relative;
+    display: inline-block;
+
+    &::after {
+      content: "";
+      aspect-ratio: 1;
+      background: var(--color-offline);
+      position: absolute;
+      width: var(--chip-size);
+      border-radius: 100%;
+      z-index: 1;
+    }
+    .chip-icon {
+      position: absolute;
+      width: var(--chip-size);
+      height: var(--chip-size);
+      border-radius: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: black;
+      z-index: 2;
+    }
+
+    .chip-label {
+      --_font-size-adjust: 0.7;
+      position: absolute;
+      width: var(--chip-size);
+      height: var(--chip-size);
+      border-radius: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: black;
+      z-index: 2;
+      font-size: calc(var(--chip-size) * var(--_font-size-adjust));
+      line-height: 1;
+      letter-spacing: -0.05rem;
+      user-select: none;
+
+      &.length-2 {
+        --_font-size-adjust: 0.6;
+      }
+
+      &.length-3 {
+        --_font-size-adjust: 0.5;
+      }
+    }
+
+    & > * {
+      /*
+    create the cutout mask around the image,
+    it's just a radial gradient positioned at the same place as the
+    psuedo-element ::after
+    */
+
+      &:not(.chip-icon, .chip-label) {
+        mask-image: radial-gradient(
+          var(--computed-mask-diameter) var(--computed-mask-diameter) at var(--computed-position-x)
+            var(--computed-position-y),
+          transparent calc(50% - 0.5px),
+          black calc(50% + 0.5px)
+        );
+      }
+    }
+
+    &.circle {
+      &::after,
+      .chip-icon,
+      .chip-label {
+        top: calc(var(--computed-position-y) - (var(--chip-size) / 2));
+        left: calc(var(--computed-position-x) - (var(--chip-size) / 2));
+      }
+    }
+
+    &.square {
+      &::after,
+      .chip-icon,
+      .chip-label {
+        top: calc(var(--computed-position-y) - (var(--chip-size) / 2));
+        left: calc(var(--computed-position-x) - (var(--chip-size) / 2));
+      }
+    }
+
+    &.online {
+      &::after {
+        background-color: var(--color-online);
+      }
+    }
+    &.idle {
+      &::after {
+        background-color: var(--color-idle);
+      }
+    }
+    &.dnd {
+      &::after {
+        background-color: var(--color-dnd);
+      }
+    }
+  }
+}
+</style>