@bspk/ui 1.1.33 → 1.2.0

package/dist/{base.css → styles/base.css}

@@ -8,7 +8,7 @@
   * This file will NOT contain any classes
 */
 /**
- * This file is generated by the build-css script.
+ * This file is generated by the update-css script.
  * Do not edit this file directly.
  * Instead, edit the script and run it again. */
 [data-color=grey] {
@@ -94,6 +94,7 @@
 }
 
 :root {
+  --z-index-focus: 9999;
   --z-index-tooltip-popover: 1100;
   --z-index-dialog: 1000;
   --z-index-dropdown: 1000;
@@ -129,20 +130,20 @@ body[data-bspk] {
   color: var(--foreground-neutral-on-surface);
   min-width: 343px;
 }
-body[data-bspk] a {
+body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]) {
   color: var(--foreground-link-text-default);
 }
-body[data-bspk] a:not([disabled]):hover, body[data-bspk] a:not([disabled])[data-pseudo=hover] {
+body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):hover, body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=hover] {
   color: var(--foreground-link-text-default-hovered);
 }
-body[data-bspk] a:not([disabled]):active, body[data-bspk] a:not([disabled])[data-pseudo=active] {
+body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):active, body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=active] {
   color: var(--foreground-link-text-default);
   filter: brightness(80%);
 }
-body[data-bspk] a:not([disabled]):visited, body[data-bspk] a:not([disabled])[data-pseudo=visited] {
+body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):visited, body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=visited] {
   color: var(--foreground-link-text-default-visited);
 }
-body[data-bspk] a[disabled] {
+body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item])[disabled] {
   pointer-events: none;
   cursor: text;
   color: var(--foreground-link-text-default-disabled);
@@ -208,15 +209,11 @@ body[data-bspk] a[data-subtle-inverse][disabled] {
 }
 
 [data-sr-only] {
-  position: absolute;
-  width: 1px;
   height: 1px;
-  padding: 0;
-  margin: -1px;
   overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
+  position: absolute !important;
+  width: 1px;
+  clip: rect(1px, 1px, 1px, 1px);
 }
 
 [data-touch-target] ~ * {
@@ -256,7 +253,7 @@ body[data-bspk] a[data-subtle-inverse][disabled] {
 [data-bspk=skeleton-text] [data-line] {
   width: 100%;
   background: var(--foreground-neutral-skeleton-element);
-  border-radius: var(--radius-small);
+  border-radius: var(--radius-sm);
   height: var(--text-height);
 }
 [data-bspk=skeleton-text]:has([data-line]:nth-child(2)) [data-line]:last-child {
@@ -276,10 +273,10 @@ body[data-bspk] a[data-subtle-inverse][disabled] {
   min-height: var(--spacing-sizing-08);
   height: var(--height, var(--width));
   width: var(--width, var(--height));
-  border-radius: var(--radius-small);
+  border-radius: var(--radius-sm);
 }
 [data-bspk=skeleton][data-variant=photo] {
-  border-radius: var(--radius-medium);
+  border-radius: var(--radius-md);
 }
 [data-bspk=skeleton][data-variant=circular] {
   border-radius: 100%;
@@ -294,7 +291,25 @@ body[data-bspk] a[data-subtle-inverse][disabled] {
 [data-bspk=skeleton][data-variant=thumbnail] {
   width: var(--spacing-sizing-12);
   height: var(--spacing-sizing-12);
-  border-radius: var(--radius-small);
+  border-radius: var(--radius-sm);
+}
+
+[data-attachment-wrapper] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: fit-content;
+  height: fit-content;
+  flex-shrink: 0;
+}
+[data-attachment-wrapper] [data-attachment] {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: scale(1) translate(50%, -50%);
+  transform-origin: 100% 0%;
+  z-index: 2;
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */

package/dist/{base.css.js → styles/base.css.js}

@@ -11,7 +11,7 @@ style.appendChild(document.createTextNode(`/**
   * This file will NOT contain any classes
 */
 /**
- * This file is generated by the build-css script.
+ * This file is generated by the update-css script.
  * Do not edit this file directly.
  * Instead, edit the script and run it again. */
 [data-color=grey] {
@@ -97,6 +97,7 @@ style.appendChild(document.createTextNode(`/**
 }
 
 :root {
+  --z-index-focus: 9999;
   --z-index-tooltip-popover: 1100;
   --z-index-dialog: 1000;
   --z-index-dropdown: 1000;
@@ -132,20 +133,20 @@ body[data-bspk] {
   color: var(--foreground-neutral-on-surface);
   min-width: 343px;
 }
-body[data-bspk] a {
+body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]) {
   color: var(--foreground-link-text-default);
 }
-body[data-bspk] a:not([disabled]):hover, body[data-bspk] a:not([disabled])[data-pseudo=hover] {
+body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):hover, body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=hover] {
   color: var(--foreground-link-text-default-hovered);
 }
-body[data-bspk] a:not([disabled]):active, body[data-bspk] a:not([disabled])[data-pseudo=active] {
+body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):active, body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=active] {
   color: var(--foreground-link-text-default);
   filter: brightness(80%);
 }
-body[data-bspk] a:not([disabled]):visited, body[data-bspk] a:not([disabled])[data-pseudo=visited] {
+body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled]):visited, body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item]):not([disabled])[data-pseudo=visited] {
   color: var(--foreground-link-text-default-visited);
 }
-body[data-bspk] a[disabled] {
+body[data-bspk] a:not([data-bspk=button], [data-bspk=list-item])[disabled] {
   pointer-events: none;
   cursor: text;
   color: var(--foreground-link-text-default-disabled);
@@ -211,15 +212,11 @@ body[data-bspk] a[data-subtle-inverse][disabled] {
 }
 
 [data-sr-only] {
-  position: absolute;
-  width: 1px;
   height: 1px;
-  padding: 0;
-  margin: -1px;
   overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
+  position: absolute !important;
+  width: 1px;
+  clip: rect(1px, 1px, 1px, 1px);
 }
 
 [data-touch-target] ~ * {
@@ -259,7 +256,7 @@ body[data-bspk] a[data-subtle-inverse][disabled] {
 [data-bspk=skeleton-text] [data-line] {
   width: 100%;
   background: var(--foreground-neutral-skeleton-element);
-  border-radius: var(--radius-small);
+  border-radius: var(--radius-sm);
   height: var(--text-height);
 }
 [data-bspk=skeleton-text]:has([data-line]:nth-child(2)) [data-line]:last-child {
@@ -279,10 +276,10 @@ body[data-bspk] a[data-subtle-inverse][disabled] {
   min-height: var(--spacing-sizing-08);
   height: var(--height, var(--width));
   width: var(--width, var(--height));
-  border-radius: var(--radius-small);
+  border-radius: var(--radius-sm);
 }
 [data-bspk=skeleton][data-variant=photo] {
-  border-radius: var(--radius-medium);
+  border-radius: var(--radius-md);
 }
 [data-bspk=skeleton][data-variant=circular] {
   border-radius: 100%;
@@ -297,10 +294,27 @@ body[data-bspk] a[data-subtle-inverse][disabled] {
 [data-bspk=skeleton][data-variant=thumbnail] {
   width: var(--spacing-sizing-12);
   height: var(--spacing-sizing-12);
-  border-radius: var(--radius-small);
+  border-radius: var(--radius-sm);
+}
+
+[data-attachment-wrapper] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: fit-content;
+  height: fit-content;
+  flex-shrink: 0;
+}
+[data-attachment-wrapper] [data-attachment] {
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: scale(1) translate(50%, -50%);
+  transform-origin: 100% 0%;
+  z-index: 2;
 }
 
 /** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
 `));
 document.head.appendChild(style);
-