@react-fabric/core 1.0.0-beta.8 → 1.0.1

package/{src/components/actionLabel/ActionLabel.module.css → css/components/_actionLabel.css}

@@ -21,15 +21,15 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .actionLabel {
-    & > .actions {
+@layer components {
+  .fabric-actionLabel {
+    & > .fabric-actions {
       --width: 4rem;
 
       width: 0;
     }
 
-    &:not([data-disabled="true"]):hover > .actions {
+    &:not([data-disabled="true"]):hover > .fabric-actions {
       width: var(--width);
       transition: all cubic-bezier(0.215, 0.61, 0.355, 1) 100ms;
       transition-delay: 500ms;

package/{src/overlays/alert/Alert.module.css → css/components/_alert.css}

@@ -21,11 +21,11 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-@layer comp {
-  .alert {
+@layer components {
+  .fabric-alert {
     z-index: var(--z-overlay);
 
-    grid-template: "icon title" auto "icon message" auto "input input" auto "actions actions" auto / auto 1fr;
+    grid-template: "icon message" auto "input input" auto "actions actions" auto / max-content 1fr;
     gap: 0.5rem 1rem;
 
     margin-top: -100%;

package/css/components/_animations.css

@@ -0,0 +1,52 @@
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+@keyframes loader {
+  from {
+    transform: translateX(calc(-100% * var(--multiplier)));
+  }
+
+  to {
+    transform: translateX(calc(100% * var(--multiplier)));
+  }
+}
+
+@layer components {
+  .fabric-loader {
+    --multiplier: 1;
+
+    & > div {
+      &::after {
+        height: 1.5px;
+        background-image: linear-gradient(to right, var(--color-primary-300), var(--color-primary), var(--color-primary-300));
+        animation: loader 1.5s ease-in-out infinite;
+      }
+    }
+
+    @variant rtl {
+      --multiplier: -1;
+    }
+  }
+}

package/css/components/_avatar.css

@@ -0,0 +1,89 @@
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+@layer components {
+  .fabric-avatar {
+    width: 1em;
+    height: 1em;
+    border-radius: var(--rounding);
+
+    color: var(--text-color-dimmed);
+    vertical-align: -0.125em;
+
+    background-color: var(--bg-color-muted);
+    box-shadow: 0 0 0 1px var(--border-color-soft);
+
+    & > i,
+    & > svg,
+    & > img {
+      pointer-events: none;
+
+      overflow: hidden;
+      display: block;
+
+      width: 1em;
+      height: 1em;
+      border-radius: inherit;
+
+      line-height: 1;
+
+      object-fit: cover;
+
+      fill: currentcolor;
+    }
+
+    & > i {
+      width: 0.75em !important;
+      height: 0.75em !important;
+      margin: 0.125em !important;
+    }
+  }
+
+  .fabric-avatarGroup {
+    & > .fabric-avatar {
+      box-shadow:
+        0 0 0 1px var(--border-color-soft),
+        0 0 0 0.125em var(--fabric-bg);
+
+      &:not(:first-child) {
+        margin-inline-start: -0.125em;
+      }
+    }
+
+    & .fabric-avatarGroup--extra {
+      border-radius: inherit;
+      font-size: inherit;
+    }
+  }
+}
+
+@layer utilities {
+  .fabric-avatarGroup {
+    & > .fabric-avatar {
+      border-radius: inherit;
+      font-size: inherit;
+    }
+  }
+}

package/css/components/_button.css

@@ -0,0 +1,218 @@
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+@layer components {
+  .fabric-buttonWrapper {
+    .fabric-button {
+      color: var(--button-text);
+      background: var(--button-gradient), linear-gradient(var(--button-bg));
+      background-clip: padding-box, padding-box;
+      outline-color: var(--button-border);
+
+      &::after {
+        position: absolute;
+        inset: 0;
+      }
+
+      &:hover {
+        color: var(--button-hover-text, var(--button-text));
+        background: var(--button-gradient), linear-gradient(var(--button-hover-bg, var(--button-bg)));
+        outline-color: var(--button-hover-border, var(--button-border));
+      }
+
+      &:active {
+        color: var(--button-click-text, var(--button-text));
+        background: var(--button-click-gradient), linear-gradient(var(--button-click-bg, var(--button-bg)));
+        outline-color: var(--button-click-border, var(--button-border));
+
+        > * {
+          transform: translateY(1px);
+        }
+      }
+    }
+
+    &[data-active="true"] .fabric-button,
+    & .fabric-button[data-dropdown-open="true"] {
+      color: var(--button-active-text, var(--button-text));
+      background: var(--button-click-gradient), linear-gradient(var(--button-active-bg, var(--button-bg)));
+      background-color: var(--button-active-bg, var(--button-bg));
+      outline-color: var(--button-active-border, var(--button-border));
+    }
+
+    &[data-loading="true"] {
+      .fabric-button {
+        &::after {
+          background-image: var(--progress-gradient);
+          background-size: 1em 1em;
+        }
+      }
+    }
+
+    /**
+     * sizes
+     */
+    &[data-size="xs"] {
+      font-size: 0.75rem;
+    }
+
+    &[data-size="sm"] {
+      font-size: 0.875rem;
+    }
+
+    &[data-size="md"] {
+      font-size: 1.125rem;
+    }
+
+    &[data-size="lg"] {
+      font-size: 1.25rem;
+    }
+
+    &[data-size="xl"] {
+      font-size: 1.5rem;
+    }
+  }
+}
+
+@layer utilities {
+  .fabric-buttonWrapper {
+    --button-click-gradient: var(--active-gradient);
+
+    &[data-color="primary"] {
+      --button-color: var(--color-primary-500);
+    }
+
+    &[data-color="secondary"] {
+      --button-color: var(--color-secondary-500);
+    }
+
+    &[data-color="info"] {
+      --button-color: var(--color-info-500);
+    }
+
+    &[data-color="danger"] {
+      --button-color: var(--color-danger-500);
+    }
+
+    &[data-color="success"] {
+      --button-color: var(--color-success-500);
+    }
+
+    &[data-color="warning"] {
+      --button-color: var(--color-warning-500);
+    }
+
+    &[data-color="muted"] {
+      --button-color: var(--color-tint-600);
+    }
+
+    .fabric-buttonDoneOverlay {
+      color: color-mix(in oklab, var(--button-color, var(--color-primary-500)) 75%, var(--fabric-text));
+      background-color: color-mix(in oklab, var(--button-color, var(--color-primary-500)) 50%, var(--fabric-bg));
+      outline-color: color-mix(in oklab, var(--button-color, var(--color-primary-500)) 65%, var(--fabric-bg));
+    }
+
+    .fabric-button {
+      --button-bg: color-mix(in oklab, var(--color-tint-500) 9%, var(--fabric-bg));
+      --button-text: color-mix(in oklab, var(--button-color, var(--color-tint-800)) 90%, var(--fabric-text));
+      --button-border: color-mix(in oklab, var(--color-tint-500) 35%, var(--fabric-bg));
+      --button-hover-bg: color-mix(in oklab, var(--button-color, var(--color-tint-50)) 20%, var(--fabric-bg));
+      --button-hover-text: color-mix(in oklab, var(--button-color, var(--color-primary-500)) 99%, var(--fabric-text));
+      --button-click-bg: color-mix(in oklab, var(--button-color, var(--color-tint-500)) 18%, var(--fabric-bg));
+      --button-click-text: color-mix(in oklab, var(--button-color, var(--color-primary-500)) 99%, var(--fabric-text));
+      --button-active-bg: color-mix(in oklab, var(--button-color, var(--color-primary-500)) 15%, var(--fabric-bg));
+      --button-active-text: color-mix(in oklab, var(--button-color, var(--color-primary-500)) 99%, var(--fabric-text));
+    }
+
+    &[data-variant="soft"] {
+      .fabric-button {
+        --button-bg: color-mix(in oklab, var(--button-color, var(--color-tint-500)) 20%, var(--fabric-bg));
+        --button-text: color-mix(in oklab, var(--button-color, var(--color-tint-700)) 75%, var(--fabric-text));
+        --button-border: color-mix(in oklab, var(--button-color, var(--color-tint-500)) 25%, var(--fabric-bg));
+        --button-hover-bg: color-mix(in oklab, var(--button-color, var(--color-tint-500)) 25%, var(--fabric-bg));
+        --button-hover-text: color-mix(in oklab, var(--button-color, var(--color-primary-500)) 85%, var(--fabric-text));
+        --button-click-bg: color-mix(in oklab, var(--button-color, var(--color-tint-500)) 18%, var(--fabric-bg));
+        --button-click-text: color-mix(in oklab, var(--button-color, var(--color-primary-500)) 75%, var(--fabric-text));
+        --button-active-bg: color-mix(in oklab, var(--button-color, var(--color-primary-500)) 25%, var(--fabric-bg));
+      }
+    }
+
+    &[data-variant="solid"] {
+      .fabric-button {
+        --button-bg: color-mix(in oklab, var(--button-color, var(--color-tint-900)) 95%, var(--color-black));
+        --button-text: var(--color-white);
+        --button-border: color-mix(in oklab, var(--button-color, var(--color-tint-500)) 85%, var(--fabric-bg));
+        --button-hover-bg: color-mix(in oklab, var(--button-color, var(--color-tint-900)) 90%, var(--color-white));
+        --button-hover-text: var(--color-white);
+        --button-click-bg: color-mix(in oklab, var(--button-color, var(--color-tint-900)) 75%, var(--color-black));
+        --button-click-text: var(--color-white);
+        --button-active-bg: color-mix(in oklab, var(--button-color, var(--color-primary-500)) 75%, var(--color-black));
+        --button-active-text: var(--color-white);
+
+        & kbd {
+          color: --alpha(var(--color-white) / 95%);
+          background-color: --alpha(var(--color-tint-500) / 50%);
+        }
+      }
+    }
+
+    &[data-color="default"][data-variant="solid"] .fabric-button {
+      --button-text: color-mix(in oklab, var(--button-color, var(--color-tint-100)) 95%, var(--color-white));
+      --button-hover-text: color-mix(in oklab, var(--button-color, var(--color-tint-100)) 95%, var(--color-white));
+      --button-click-text: color-mix(in oklab, var(--button-color, var(--color-tint-100)) 95%, var(--color-white));
+    }
+
+    &[data-variant="outlined"] {
+      .fabric-button {
+        --button-border: color-mix(in oklab, var(--button-color, var(--color-tint-500)) 90%, var(--fabric-bg));
+        --button-hover-border: color-mix(in oklab, var(--button-color, var(--color-primary-500)) 90%, var(--fabric-bg));
+      }
+    }
+
+    &[data-variant="dashed"] {
+      .fabric-button {
+        --button-border: color-mix(in oklab, var(--button-color, var(--color-tint-500)) 90%, var(--fabric-bg));
+        --button-hover-border: color-mix(in oklab, var(--button-color, var(--color-primary-500)) 90%, var(--fabric-bg));
+
+        outline-style: dashed;
+      }
+    }
+
+    &[data-variant="link"] {
+      .fabric-button {
+        --button-border: transparent;
+        --button-bg: transparent;
+        --button-gradient: transparent;
+        --button-click-gradient: transparent;
+        --button-text: color-mix(in oklab, var(--button-color, var(--color-primary-500)) 90%, var(--fabric-text));
+        --button-active-bg: color-mix(in oklab, var(--button-color, var(--color-primary-500)) 25%, var(--fabric-bg));
+
+        &:hover {
+          text-decoration: underline solid 1px;
+          text-underline-offset: 4px;
+        }
+      }
+    }
+  }
+}

package/css/components/_buttonGroup.css

@@ -0,0 +1,62 @@
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+@layer variant {
+  .fabric-buttonGroup {
+    & > .fabric-buttonWrapper {
+      flex: 1 1 auto;
+
+      &:not(:first-child, :last-child) {
+        .fabric-button {
+          border-radius: 0;
+        }
+      }
+
+      &:first-child .fabric-button {
+        border-start-end-radius: 0;
+        border-end-end-radius: 0;
+      }
+
+      &:last-child .fabric-button {
+        border-start-start-radius: 0;
+        border-end-start-radius: 0;
+      }
+    }
+
+    @variant is-vertical {
+      & > .fabric-buttonWrapper {
+        &:first-child .fabric-button {
+          border-end-start-radius: 0;
+          border-end-end-radius: 0;
+        }
+
+        &:last-child .fabric-button {
+          border-start-start-radius: 0;
+          border-start-end-radius: 0;
+        }
+      }
+    }
+  }
+}

package/css/components/_callout.css

@@ -0,0 +1,32 @@
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+@layer components {
+  .fabric-callout {
+    border-color: color-mix(in oklab, var(--color, var(--color-tint-500)) 50%, var(--fabric-bg));
+    color: color-mix(in oklab, var(--color, var(--color-tint-500)) 65%, var(--fabric-text));
+    background-color: color-mix(in oklab, var(--color, var(--color-tint-500)) 5%, var(--fabric-bg));
+  }
+}

package/css/components/_card.css

@@ -0,0 +1,167 @@
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+@layer components {
+  .fabric-card {
+    display: grid;
+    grid-template: "title" auto "body" 1fr / 1fr;
+    background-color: var(--fabric-bg);
+    outline: 1px solid var(--border-color-soft);
+
+    &:has(.fabric-style-effect) {
+      background-color: --alpha(var(--fabric-bg) / 75%);
+      backdrop-filter: blur(1rem);
+    }
+
+    &.selected-ribbon {
+      @variant is-selected {
+        &::before {
+          content: "";
+
+          position: absolute;
+          z-index: 5;
+          inset-inline-end: -2px;
+          top: -2px;
+
+          border-top: 1rem solid var(--color-primary-500);
+          border-bottom: 1rem solid transparent;
+          border-inline-start: 1rem solid transparent;
+          border-inline-end: 1rem solid var(--color-primary-500);
+          border-radius: var(--rounding-cap);
+        }
+
+        &::after {
+          content: "✓";
+
+          position: absolute;
+          z-index: 5;
+          inset-inline-end: -2px;
+          top: -2px;
+
+          padding: 4px;
+
+          font-family: monospace;
+          line-height: 0.5;
+          color: var(--color-white);
+        }
+      }
+    }
+
+    & .fabric-cardCover {
+      & > .fabric-cardCoverContent {
+        color: var(--color-white);
+        text-shadow: 0 0 2px var(--color-black);
+        background-image: linear-gradient(to bottom, #0000 0, #0006 100%);
+      }
+    }
+
+    & .fabric-cardBody {
+      grid-area: body;
+      grid-template: "loader" auto "header" auto "content" 1fr "footer" auto / 1fr;
+    }
+
+    @variant is-clickable {
+      --tw-shadow-color: var(--border-color-soft);
+
+      outline-color: var(--border-color-bright);
+      box-shadow: 0 1px 2px 0 var(--fabric-shadow);
+      transition: box-shadow transform 0ms;
+
+      &:has(.fabric-cardBody:hover):not(:has([data-clickable="true"]:hover)) {
+        transform: translateY(-1px);
+        box-shadow: 0 4px 16px 0 color-mix(in lab, var(--fabric-shadow) 35%, #0000);
+        transition-delay: 250ms;
+      }
+
+      &:has(.fabric-cardBody:active):not(:has([data-clickable="true"]:hover)) {
+        box-shadow: 0 0 0 1px var(--tw-shadow-color);
+        transition-delay: 0ms;
+      }
+
+      & .fabric-cardBody {
+        cursor: pointer;
+
+        &::after {
+          pointer-events: none;
+          content: "";
+
+          position: absolute;
+          z-index: 5;
+          inset: 0;
+
+          background-image: linear-gradient(
+            175deg,
+            rgb(255 255 255 / 5%) 0%,
+            transparent 18%,
+            transparent 72%,
+            rgb(0 0 0 / 5%) 100%
+          );
+        }
+      }
+    }
+  }
+}
+
+@layer utilities {
+  .fabric-card {
+    & .fabric-cardCover {
+      & > [data-ref="image"],
+      & > [data-ref="video"] {
+        position: absolute;
+        z-index: 0;
+        inset: 0;
+      }
+
+      & .fabric-cardCoverContent {
+        & > * {
+          flex: 0 0 auto;
+        }
+      }
+    }
+  }
+
+  .fabric-flipCard {
+    [data-card-flip-face="front"] {
+      position: relative;
+      backface-visibility: hidden;
+    }
+
+    [data-card-flip-face="back"] {
+      position: absolute;
+      inset: 0;
+      transform: rotateY(180deg);
+      backface-visibility: hidden;
+    }
+
+    &[data-card-flip] {
+      transform-style: preserve-3d;
+      transition: transform 0.5s;
+    }
+
+    &[data-card-flip="true"] {
+      transform: rotateY(180deg);
+    }
+  }
+}