@solid-design-system/styles 6.0.0-next.12 → 6.0.0-next.13

package/dist/solid-styles.css

@@ -6,8 +6,12 @@
   height: var(--sd-spacing-6);
   align-items: center;
   overflow: hidden;
-  border-radius: var(--sd-radius);
-  background-color: rgba(var(--sd-color-background-primary-200));
+  border-radius: var(--sd-chip-border-radius, var(--sd-spacing-1));
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  border-width: var(--sd-chip-border-width, 0);
+  border-color: rgba(var(--sd-chip--primary-200-color-border, rgba(255, 255, 255, 0)));
+  background-color: rgba(var(--sd-chip--primary-200-color-background, rgba(var(--sd-color-primary-200))));
   padding-inline: var(--sd-spacing-2);
   font-size: var(--sd-text-sm);
   line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
@@ -15,14 +19,17 @@
   color: rgba(var(--sd-color-text-black));
 }
 .sd-chip--primary-500 {
-    background-color: rgba(var(--sd-color-background-primary-500));
-    color: rgba(var(--sd-color-text-white));
+    border-color: rgba(var(--sd-chip--primary-500-color-border, rgba(255, 255, 255, 0)));
+    background-color: rgba(var(--sd-chip--primary-500-color-background, rgba(var(--sd-color-primary-500))));
+    color: rgba(var(--sd-chip--primary-500-color-text, rgba(var(--sd-color-white))));
   }
 .sd-chip--primary-300 {
-    background-color: rgba(var(--sd-color-background-primary-300));
+    border-color: rgba(var(--sd-chip--primary-300-color-border, rgba(255, 255, 255, 0)));
+    background-color: rgba(var(--sd-chip--primary-300-color-background, rgba(var(--sd-color-primary-300))));
   }
 .sd-chip--white {
-    background-color: rgba(var(--sd-color-background-white));
+    border-color: rgba(var(--sd-chip--white-color-border, rgba(255, 255, 255, 0)));
+    background-color: rgba(var(--sd-chip--white-color-background, rgba(var(--sd-color-white))));
   }
 .sd-container {
   position: relative;
@@ -200,7 +207,12 @@
   height: var(--sd-spacing-8);
   align-items: center;
   overflow: hidden;
-  background-color: rgba(var(--sd-color-background-neutral-200));
+  border-radius: var(--sd-flag-border-radius, 0);
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  border-width: var(--sd-flag-border-width, 0);
+  border-color: rgba(var(--sd-flag--neutral-200-color-border, rgba(255, 255, 255, 0)));
+  background-color: rgba(var(--sd-flag--neutral-200-color-background, rgba(var(--sd-color-neutral-200))));
   padding-inline: var(--sd-spacing-3);
   font-size: var(--sd-text-sm);
   line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
@@ -208,14 +220,17 @@
   color: rgba(var(--sd-color-text-black));
 }
 .sd-flag--neutral-500 {
+    border-color: rgba(var(--sd-flag--neutral-500-color-border, rgba(255, 255, 255, 0)));
     background-color: rgba(var(--sd-flag--neutral-500-color-background, rgba(var(--sd-color-neutral-500))));
     color: rgba(var(--sd-color-text-black));
   }
 .sd-flag--neutral-300 {
-    background-color: rgba(var(--sd-color-background-neutral-300));
+    border-color: rgba(var(--sd-flag--neutral-300-color-border, rgba(255, 255, 255, 0)));
+    background-color: rgba(var(--sd-flag--neutral-300-color-background, rgba(var(--sd-color-neutral-300))));
   }
 .sd-flag--white {
-    background-color: rgba(var(--sd-color-background-white));
+    border-color: rgba(var(--sd-flag--white-color-border, rgba(255, 255, 255, 0)));
+    background-color: rgba(var(--sd-flag--white-color-background, rgba(var(--sd-color-white))));
   }
 .sd-footnotes {
   margin-block: calc(var(--sd-spacing-1) * 0);
@@ -279,7 +294,7 @@
             outline-style: var(--tw-outline-style);
             outline-width: 2px;
             outline-offset: 2px;
-            outline-color: var(--sd-border-color-primary, var(--sd-color-primary));
+            outline-color: var(--sd-color-border-primary, var(--sd-color-primary));
           }
 .sd-footnotes:is(ul) {
     list-style: '';
@@ -343,7 +358,7 @@
         outline-style: var(--tw-outline-style);
         outline-width: 2px;
         outline-offset: 2px;
-        outline-color: var(--sd-border-color-primary, var(--sd-color-primary));
+        outline-color: var(--sd-color-border-primary, var(--sd-color-primary));
       }
 .sd-footnotes--marker :is(a):link {
         color: rgba(var(--sd-color-text-primary));
@@ -357,7 +372,7 @@
       outline-style: var(--tw-outline-style);
       outline-width: 2px;
       outline-offset: 2px;
-      outline-color: var(--sd-border-color-primary, var(--sd-color-primary));
+      outline-color: var(--sd-color-border-primary, var(--sd-color-primary));
     }
 :lang(en) {
   --sd-hidden-links-title: 'Jump to';
@@ -476,7 +491,7 @@ mark.sd-mark {
         outline-style: var(--tw-outline-style);
         outline-width: 2px;
         outline-offset: 2px;
-        outline-color: var(--sd-border-color-primary, var(--sd-color-primary));
+        outline-color: var(--sd-color-border-primary, var(--sd-color-primary));
       }
 .sd-pagination ul li:first-child, .sd-pagination ul li:last-child {
       height: var(--sd-spacing-12);
@@ -871,7 +886,7 @@ mark.sd-mark {
   }
 .sd-prose a, .sd-interactive{
   cursor: pointer;
-  color: rgba(var(--sd-color-text-primary));
+  color: rgba(var(--sd-interactive--default-color-text, rgba(var(--sd-color-primary))));
   text-decoration-line: underline;
   transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
   transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
@@ -888,7 +903,7 @@ mark.sd-mark {
     outline-style: solid;
     outline-offset: 2px;
     outline-width: 2px;
-    outline-color: var(--outline-color-primary);
+    outline-color: rgba(var(--outline-color-primary));
   }
 .sd-prose a:active:not([disabled]), .sd-interactive:active:not([disabled]) {
     color: rgba(var(--sd-interactive--active-color-text, rgba(var(--sd-color-primary-800))));
@@ -925,7 +940,7 @@ mark.sd-mark {
     outline-style: solid;
     outline-offset: 2px;
     outline-width: 2px;
-    outline-color: var(--outline-color-primary);
+    outline-color: rgba(var(--outline-color-primary));
   }
 .sd-prose--inverted a:active:not([disabled]), .sd-interactive--inverted:active:not([disabled]) {
     color: rgba(var(--sd-color-text-primary-400));
@@ -1253,6 +1268,11 @@ mark.sd-mark {
 .sd-prose--full-width {
     max-width: unset;
   }
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
 @property --tw-blur {
   syntax: "*";
   inherits: false;
@@ -1384,11 +1404,6 @@ mark.sd-mark {
   inherits: false;
   initial-value: 0 0 #0000;
 }
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
 @property --tw-content {
   syntax: "*";
   initial-value: "";
@@ -1472,6 +1487,7 @@ mark.sd-mark {
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
+      --tw-border-style: solid;
       --tw-blur: initial;
       --tw-brightness: initial;
       --tw-contrast: initial;
@@ -1502,7 +1518,6 @@ mark.sd-mark {
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
-      --tw-border-style: solid;
       --tw-content: "";
       --tw-scale-x: 1;
       --tw-scale-y: 1;

package/dist-versioned/modules/chip.css

@@ -1,25 +1,45 @@
 /*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
+@layer properties;
 @layer theme, base, components, utilities;
-.sd-6-0-0-next-12-chip {
+.sd-6-0-0-next-13-chip {
   display: inline-flex;
   height: var(--sd-spacing-6);
   align-items: center;
   overflow: hidden;
-  border-radius: var(--sd-radius);
-  background-color: rgba(var(--sd-color-background-primary-200));
+  border-radius: var(--sd-chip-border-radius, var(--sd-spacing-1));
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  border-width: var(--sd-chip-border-width, 0);
+  border-color: rgba(var(--sd-chip--primary-200-color-border, rgba(255, 255, 255, 0)));
+  background-color: rgba(var(--sd-chip--primary-200-color-background, rgba(var(--sd-color-primary-200))));
   padding-inline: var(--sd-spacing-2);
   font-size: var(--sd-text-sm);
   line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
   white-space: nowrap;
   color: rgba(var(--sd-color-text-black));
 }
-.sd-6-0-0-next-12-chip--primary-500 {
-    background-color: rgba(var(--sd-color-background-primary-500));
-    color: rgba(var(--sd-color-text-white));
+.sd-6-0-0-next-13-chip--primary-500 {
+    border-color: rgba(var(--sd-chip--primary-500-color-border, rgba(255, 255, 255, 0)));
+    background-color: rgba(var(--sd-chip--primary-500-color-background, rgba(var(--sd-color-primary-500))));
+    color: rgba(var(--sd-chip--primary-500-color-text, rgba(var(--sd-color-white))));
   }
-.sd-6-0-0-next-12-chip--primary-300 {
-    background-color: rgba(var(--sd-color-background-primary-300));
+.sd-6-0-0-next-13-chip--primary-300 {
+    border-color: rgba(var(--sd-chip--primary-300-color-border, rgba(255, 255, 255, 0)));
+    background-color: rgba(var(--sd-chip--primary-300-color-background, rgba(var(--sd-color-primary-300))));
   }
-.sd-6-0-0-next-12-chip--white {
-    background-color: rgba(var(--sd-color-background-white));
+.sd-6-0-0-next-13-chip--white {
+    border-color: rgba(var(--sd-chip--white-color-border, rgba(255, 255, 255, 0)));
+    background-color: rgba(var(--sd-chip--white-color-background, rgba(var(--sd-color-white))));
   }
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-border-style: solid;
+    }
+  }
+}

package/dist-versioned/modules/container.css

@@ -1,35 +1,35 @@
 /*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
 @layer theme, base, components, utilities;
-.sd-6-0-0-next-12-container {
+.sd-6-0-0-next-13-container {
   position: relative;
   background-color: rgba(var(--sd-color-background-neutral-100));
   padding-inline: var(--sd-spacing-10);
   padding-block: var(--sd-spacing-8);
 }
-.sd-6-0-0-next-12-container--variant-primary-100 {
+.sd-6-0-0-next-13-container--variant-primary-100 {
     background-color: rgba(var(--sd-color-background-primary-100));
   }
-.sd-6-0-0-next-12-container--variant-primary {
+.sd-6-0-0-next-13-container--variant-primary {
     background-color: rgba(var(--sd-color-background-primary));
   }
-.sd-6-0-0-next-12-container--variant-border-neutral-400 {
+.sd-6-0-0-next-13-container--variant-border-neutral-400 {
     --tw-border-style: solid;
     border-style: solid;
     border-color: rgba(var(--sd-color-border-neutral-400));
     background-color: rgba(var(--sd-color-background-white));
     border-width: 1px;
   }
-.sd-6-0-0-next-12-container--variant-white {
+.sd-6-0-0-next-13-container--variant-white {
     background-color: rgba(var(--sd-color-background-white));
   }
-.sd-6-0-0-next-12-container--padding-sm {
+.sd-6-0-0-next-13-container--padding-sm {
     padding-inline: var(--sd-spacing-6);
     padding-block: var(--sd-spacing-4);
   }
-.sd-6-0-0-next-12-container{
+.sd-6-0-0-next-13-container{
   --triangle-background: rgba(var(--sd-color-white));
 }
-.sd-6-0-0-next-12-container--triangle-top::before, .sd-6-0-0-next-12-container--triangle-right::before, .sd-6-0-0-next-12-container--triangle-bottom::before, .sd-6-0-0-next-12-container--triangle-left::before {
+.sd-6-0-0-next-13-container--triangle-top::before, .sd-6-0-0-next-13-container--triangle-right::before, .sd-6-0-0-next-13-container--triangle-bottom::before, .sd-6-0-0-next-13-container--triangle-left::before {
     position: absolute;
     display: block;
     --tw-border-style: solid;
@@ -38,27 +38,27 @@
     border-width: 14px;
     content: '';
   }
-.sd-6-0-0-next-12-container--triangle-top::before {
+.sd-6-0-0-next-13-container--triangle-top::before {
     top: calc(var(--sd-spacing-1) * 0);
     left: calc(50% - 14px);
     border-top-color: var(--triangle-background);
   }
-.sd-6-0-0-next-12-container--triangle-right::before {
+.sd-6-0-0-next-13-container--triangle-right::before {
     right: calc(var(--sd-spacing-1) * 0);
     top: calc(50% - 14px);
     border-right-color: var(--triangle-background);
   }
-.sd-6-0-0-next-12-container--triangle-bottom::before {
+.sd-6-0-0-next-13-container--triangle-bottom::before {
     bottom: calc(var(--sd-spacing-1) * 0);
     left: calc(50% - 14px);
     border-bottom-color: var(--triangle-background);
   }
-.sd-6-0-0-next-12-container--triangle-left::before {
+.sd-6-0-0-next-13-container--triangle-left::before {
     left: calc(var(--sd-spacing-1) * 0);
     top: calc(50% - 14px);
     border-left-color: var(--triangle-background);
   }
-.sd-6-0-0-next-12-container--triangle-top-border::after, .sd-6-0-0-next-12-container--triangle-top-border::before, .sd-6-0-0-next-12-container--triangle-right-border::after, .sd-6-0-0-next-12-container--triangle-right-border::before, .sd-6-0-0-next-12-container--triangle-bottom-border::after, .sd-6-0-0-next-12-container--triangle-bottom-border::before, .sd-6-0-0-next-12-container--triangle-left-border::after, .sd-6-0-0-next-12-container--triangle-left-border::before {
+.sd-6-0-0-next-13-container--triangle-top-border::after, .sd-6-0-0-next-13-container--triangle-top-border::before, .sd-6-0-0-next-13-container--triangle-right-border::after, .sd-6-0-0-next-13-container--triangle-right-border::before, .sd-6-0-0-next-13-container--triangle-bottom-border::after, .sd-6-0-0-next-13-container--triangle-bottom-border::before, .sd-6-0-0-next-13-container--triangle-left-border::after, .sd-6-0-0-next-13-container--triangle-left-border::before {
       position: absolute;
       display: block;
       --tw-border-style: solid;
@@ -66,53 +66,53 @@
       border-color: transparent;
       content: '';
     }
-.sd-6-0-0-next-12-container--triangle-top-border::after, .sd-6-0-0-next-12-container--triangle-right-border::after, .sd-6-0-0-next-12-container--triangle-bottom-border::after, .sd-6-0-0-next-12-container--triangle-left-border::after {
+.sd-6-0-0-next-13-container--triangle-top-border::after, .sd-6-0-0-next-13-container--triangle-right-border::after, .sd-6-0-0-next-13-container--triangle-bottom-border::after, .sd-6-0-0-next-13-container--triangle-left-border::after {
       border-width: 14px;
     }
-.sd-6-0-0-next-12-container--triangle-top-border::before, .sd-6-0-0-next-12-container--triangle-right-border::before, .sd-6-0-0-next-12-container--triangle-bottom-border::before, .sd-6-0-0-next-12-container--triangle-left-border::before {
+.sd-6-0-0-next-13-container--triangle-top-border::before, .sd-6-0-0-next-13-container--triangle-right-border::before, .sd-6-0-0-next-13-container--triangle-bottom-border::before, .sd-6-0-0-next-13-container--triangle-left-border::before {
       border-width: 15px;
     }
-.sd-6-0-0-next-12-container--triangle-top-border::after, .sd-6-0-0-next-12-container--triangle-top-border::before {
+.sd-6-0-0-next-13-container--triangle-top-border::after, .sd-6-0-0-next-13-container--triangle-top-border::before {
       top: -1px;
     }
-.sd-6-0-0-next-12-container--triangle-top-border::before {
+.sd-6-0-0-next-13-container--triangle-top-border::before {
       border-top-color: rgba(var(--sd-color-border-neutral-400));
       left: calc(50% - 15px);
     }
-.sd-6-0-0-next-12-container--triangle-top-border::after {
+.sd-6-0-0-next-13-container--triangle-top-border::after {
       left: calc(50% - 14px);
       border-top-color: var(--triangle-background);
     }
-.sd-6-0-0-next-12-container--triangle-right-border::after, .sd-6-0-0-next-12-container--triangle-right-border::before {
+.sd-6-0-0-next-13-container--triangle-right-border::after, .sd-6-0-0-next-13-container--triangle-right-border::before {
       right: -1px;
     }
-.sd-6-0-0-next-12-container--triangle-right-border::before {
+.sd-6-0-0-next-13-container--triangle-right-border::before {
       border-right-color: rgba(var(--sd-color-border-neutral-400));
       top: calc(50% - 15px);
     }
-.sd-6-0-0-next-12-container--triangle-right-border::after {
+.sd-6-0-0-next-13-container--triangle-right-border::after {
       top: calc(50% - 14px);
       border-right-color: var(--triangle-background);
     }
-.sd-6-0-0-next-12-container--triangle-bottom-border::after, .sd-6-0-0-next-12-container--triangle-bottom-border::before {
+.sd-6-0-0-next-13-container--triangle-bottom-border::after, .sd-6-0-0-next-13-container--triangle-bottom-border::before {
       bottom: -1px;
     }
-.sd-6-0-0-next-12-container--triangle-bottom-border::before {
+.sd-6-0-0-next-13-container--triangle-bottom-border::before {
       border-bottom-color: rgba(var(--sd-color-border-neutral-400));
       left: calc(50% - 15px);
     }
-.sd-6-0-0-next-12-container--triangle-bottom-border::after {
+.sd-6-0-0-next-13-container--triangle-bottom-border::after {
       left: calc(50% - 14px);
       border-bottom-color: var(--triangle-background);
     }
-.sd-6-0-0-next-12-container--triangle-left-border::after, .sd-6-0-0-next-12-container--triangle-left-border::before {
+.sd-6-0-0-next-13-container--triangle-left-border::after, .sd-6-0-0-next-13-container--triangle-left-border::before {
       left: -1px;
     }
-.sd-6-0-0-next-12-container--triangle-left-border::before {
+.sd-6-0-0-next-13-container--triangle-left-border::before {
       border-left-color: rgba(var(--sd-color-border-neutral-400));
       top: calc(50% - 15px);
     }
-.sd-6-0-0-next-12-container--triangle-left-border::after {
+.sd-6-0-0-next-13-container--triangle-left-border::after {
       top: calc(50% - 14px);
       border-left-color: var(--triangle-background);
     }

package/dist-versioned/modules/copyright.css

@@ -1,7 +1,7 @@
 /*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
-.sd-6-0-0-next-12-copyright {
+.sd-6-0-0-next-13-copyright {
   position: relative;
   --tw-blur: ;
   --tw-brightness: ;
@@ -12,7 +12,7 @@
   --tw-saturate: ;
   --tw-sepia: ;
 }
-.sd-6-0-0-next-12-copyright::after {
+.sd-6-0-0-next-13-copyright::after {
     position: absolute;
     bottom: calc(var(--sd-spacing-1) * 0);
     left: calc(var(--sd-spacing-1) * 0);
@@ -28,7 +28,7 @@
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
     content: var(--copyright);
   }
-.sd-6-0-0-next-12-copyright--orientation-vertical::after {
+.sd-6-0-0-next-13-copyright--orientation-vertical::after {
         width: -moz-max-content;
         width: max-content;
         padding-top: var(--sd-spacing-2);
@@ -39,14 +39,14 @@
         text-orientation: sideways-right;
         transform: rotate(180deg);
       }
-.sd-6-0-0-next-12-copyright--color-black::after {
+.sd-6-0-0-next-13-copyright--color-black::after {
         color: rgba(var(--sd-color-text-black));
         filter: drop-shadow(0 0 transparent);
       }
-.sd-6-0-0-next-12-copyright--no-shadow::after {
+.sd-6-0-0-next-13-copyright--no-shadow::after {
       filter: drop-shadow(0 0 transparent);
     }
-.sd-6-0-0-next-12-copyright--placement-top::after {
+.sd-6-0-0-next-13-copyright--placement-top::after {
         position: absolute;
         top: calc(var(--sd-spacing-1) * 0);
         right: calc(var(--sd-spacing-1) * 0);

package/dist-versioned/modules/display.css

@@ -1,7 +1,7 @@
 /*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
-.sd-6-0-0-next-12-display {
+.sd-6-0-0-next-13-display {
   font-size: var(--sd-text-3xl);
   line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)));
   --tw-leading: var(--leading-tight, 1.25);
@@ -11,12 +11,12 @@
   color: rgba(var(--sd-color-text-black));
 }
 @media (width >= 64rem) {
-.sd-6-0-0-next-12-display {
+.sd-6-0-0-next-13-display {
     font-size: var(--sd-text-4xl);
     line-height: var(--tw-leading, var(--text-4xl--line-height, calc(2.5 / 2.25)))
 }
   }
-.sd-6-0-0-next-12-display--size-xl {
+.sd-6-0-0-next-13-display--size-xl {
       font-size: var(--sd-text-xl);
       line-height: var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
       --tw-leading: var(--leading-tight, 1.25);
@@ -25,7 +25,7 @@
       font-weight: var(--sd-font-weight-normal);
       color: rgba(var(--sd-color-text-black));
     }
-.sd-6-0-0-next-12-display--size-3xl {
+.sd-6-0-0-next-13-display--size-3xl {
       font-size: var(--sd-text-2xl);
       line-height: var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));
       --tw-leading: var(--leading-tight, 1.25);
@@ -35,12 +35,12 @@
       color: rgba(var(--sd-color-text-black));
     }
 @media (width >= 64rem) {
-.sd-6-0-0-next-12-display--size-3xl {
+.sd-6-0-0-next-13-display--size-3xl {
         font-size: var(--sd-text-3xl);
         line-height: var(--tw-leading, var(--text-3xl--line-height, calc(2.25 / 1.875)))
     }
       }
-.sd-6-0-0-next-12-display--inverted {
+.sd-6-0-0-next-13-display--inverted {
     color: rgba(var(--sd-color-text-white));
   }
 @property --tw-leading {

package/dist-versioned/modules/flag.css

@@ -1,24 +1,45 @@
 /*! tailwindcss v4.1.14 | MIT License | https://tailwindcss.com */
+@layer properties;
 @layer theme, base, components, utilities;
-.sd-6-0-0-next-12-flag {
+.sd-6-0-0-next-13-flag {
   display: inline-flex;
   height: var(--sd-spacing-8);
   align-items: center;
   overflow: hidden;
-  background-color: rgba(var(--sd-color-background-neutral-200));
+  border-radius: var(--sd-flag-border-radius, 0);
+  border-style: var(--tw-border-style);
+  border-width: 1px;
+  border-width: var(--sd-flag-border-width, 0);
+  border-color: rgba(var(--sd-flag--neutral-200-color-border, rgba(255, 255, 255, 0)));
+  background-color: rgba(var(--sd-flag--neutral-200-color-background, rgba(var(--sd-color-neutral-200))));
   padding-inline: var(--sd-spacing-3);
   font-size: var(--sd-text-sm);
   line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
   white-space: nowrap;
   color: rgba(var(--sd-color-text-black));
 }
-.sd-6-0-0-next-12-flag--neutral-500 {
+.sd-6-0-0-next-13-flag--neutral-500 {
+    border-color: rgba(var(--sd-flag--neutral-500-color-border, rgba(255, 255, 255, 0)));
     background-color: rgba(var(--sd-flag--neutral-500-color-background, rgba(var(--sd-color-neutral-500))));
     color: rgba(var(--sd-color-text-black));
   }
-.sd-6-0-0-next-12-flag--neutral-300 {
-    background-color: rgba(var(--sd-color-background-neutral-300));
+.sd-6-0-0-next-13-flag--neutral-300 {
+    border-color: rgba(var(--sd-flag--neutral-300-color-border, rgba(255, 255, 255, 0)));
+    background-color: rgba(var(--sd-flag--neutral-300-color-background, rgba(var(--sd-color-neutral-300))));
   }
-.sd-6-0-0-next-12-flag--white {
-    background-color: rgba(var(--sd-color-background-white));
+.sd-6-0-0-next-13-flag--white {
+    border-color: rgba(var(--sd-flag--white-color-border, rgba(255, 255, 255, 0)));
+    background-color: rgba(var(--sd-flag--white-color-background, rgba(var(--sd-color-white))));
   }
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@layer properties {
+  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
+    *, ::before, ::after, ::backdrop {
+      --tw-border-style: solid;
+    }
+  }
+}