@redvars/peacock 3.2.9 → 3.2.10

package/dist/index.js

@@ -1,6 +1,6 @@
-export { A as Accordion, a as Avatar, B as Badge, b as Breadcrumb, c as BreadcrumbItem, C as Chip, d as CircularProgress, e as Container, D as DatePicker, f as Divider, E as Elevation, g as EmptyState, F as Field, h as FocusRing, I as Icon, i as IconButton, j as Image, k as Input, L as LinearProgress, l as Link, N as NumberField, R as Ripple, S as Skeleton, m as Spinner, n as Switch, T as Tag, o as Textarea, p as TimePicker, q as Tooltip } from './image-DK6VQW7N.js';
+export { A as Accordion, a as Avatar, B as Badge, b as Breadcrumb, c as BreadcrumbItem, C as Chip, d as CircularProgress, e as Container, D as DatePicker, f as Divider, E as Elevation, g as EmptyState, F as Field, h as FocusRing, I as Icon, i as IconButton, j as Image, k as Input, L as LinearProgress, l as Link, N as NumberField, R as Ripple, S as Skeleton, m as Spinner, n as Switch, T as Tag, o as Textarea, p as TimePicker, q as Tooltip } from './image-v3BujlY5.js';
 export { Clock } from './clock.js';
-export { B as Button } from './button-2MeDq0Yy.js';
+export { B as Button } from './button-DaL4va7Q.js';
 export { ButtonGroup } from './button-group.js';
 export { NumberCounter } from './number-counter.js';
 export { CodeHighlighter } from './code-highlighter.js';

package/dist/peacock-loader.js

@@ -1,5 +1,5 @@
-import { A as Accordion, j as Image, e as Container, g as EmptyState, m as Spinner, n as Switch, c as BreadcrumbItem, b as Breadcrumb, q as Tooltip, p as TimePicker, D as DatePicker, o as Textarea, N as NumberField, F as Field, k as Input, S as Skeleton, d as CircularProgress, L as LinearProgress, T as Tag, C as Chip, l as Link, R as Ripple, E as Elevation, f as Divider, i as IconButton, B as Badge, a as Avatar, h as FocusRing, I as Icon } from './image-DK6VQW7N.js';
-import { s as spread, B as Button } from './button-2MeDq0Yy.js';
+import { A as Accordion, j as Image, e as Container, g as EmptyState, m as Spinner, n as Switch, c as BreadcrumbItem, b as Breadcrumb, q as Tooltip, p as TimePicker, D as DatePicker, o as Textarea, N as NumberField, F as Field, k as Input, S as Skeleton, d as CircularProgress, L as LinearProgress, T as Tag, C as Chip, l as Link, R as Ripple, E as Elevation, f as Divider, i as IconButton, B as Badge, a as Avatar, h as FocusRing, I as Icon } from './image-v3BujlY5.js';
+import { s as spread, B as Button } from './button-DaL4va7Q.js';
 import { ButtonGroup } from './button-group.js';
 import { i, _ as __decorate, n, a as i$1, w, b } from './PeacockComponent-CxJc63xj.js';
 import { r } from './state-B09bP3XH.js';

package/package.json

@@ -2,7 +2,7 @@
   "name": "@redvars/peacock",
   "description": "The foundation for beautiful user interfaces",
   "license": "Apache-2.0",
-  "version": "3.2.9",
+  "version": "3.2.10",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/readme.md

@@ -44,9 +44,9 @@ Visit [https://peacock.redvars.com](https://peacock.redvars.com) to view the doc
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
 
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@redvars/peacock@3.2.8/dist/assets/styles.css"></link>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@redvars/peacock@3.2.9/dist/assets/styles.css"></link>
   <script type='module'
-          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.2.8/dist/peacock-loader.js'></script>
+          src='https://cdn.jsdelivr.net/npm/@redvars/peacock@3.2.9/dist/peacock-loader.js'></script>
 </head>
 
 <base-button>Button</base-button>

package/scss/tokens.scss

@@ -0,0 +1 @@
+@use 'tokens.css';

package/src/button/button/button.scss

@@ -64,7 +64,7 @@ slot::slotted(*) {
     justify-content: center;
     gap: var(--_button-icon-label-spacing);
     width: 100%;
-    z-index: 1;
+    z-index: 0;
 
     color: var(--_label-text-color);
     opacity: var(--_label-text-opacity, 1);

package/src/image/image.scss

@@ -1,49 +1,56 @@
 :host {
-      display: inline-block;
-    }
-
-    .image-wrapper {
-      position: relative;
-      display: inline-block;
-    }
-
-    img {
-      display: block;
-      max-width: 100%;
-    }
-
-    img.clickable {
-      cursor: zoom-in;
-    }
-
-    .placeholder {
-      background: #e0e0e0;
-      min-width: 100px;
-      min-height: 100px;
-      display: block;
-    }
-
-    /* Preview overlay — rendered in light DOM via portal, but we keep
-       a host-level overlay as a fallback when shadow DOM is used.       */
-    .preview-overlay {
-      display: none;
-      position: fixed;
-      inset: 0;
-      z-index: 9999;
-      background: rgba(0, 0, 0, 0.85);
-      align-items: center;
-      justify-content: center;
-      cursor: zoom-out;
-    }
-
-    .preview-overlay.open {
-      display: flex;
-    }
-
-    .preview-overlay img {
-      max-width: 90vw;
-      max-height: 90vh;
-      object-fit: contain;
-      box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
-      border-radius: 4px;
-    }
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+.image-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+
+img {
+  display: block;
+  max-height: 100%;
+  max-width: 100%;
+}
+
+
+img.clickable {
+  cursor: zoom-in;
+}
+
+.placeholder {
+  background: #e0e0e0;
+  min-width: 100px;
+  min-height: 100px;
+  display: block;
+}
+
+/* Preview overlay — rendered in light DOM via portal, but we keep
+    a host-level overlay as a fallback when shadow DOM is used.       */
+.preview-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  background: rgba(0, 0, 0, 0.85);
+  align-items: center;
+  justify-content: center;
+  cursor: zoom-out;
+}
+
+.preview-overlay.open {
+  display: flex;
+}
+
+.preview-overlay img {
+  max-width: 90vw;
+  max-height: 90vh;
+  object-fit: contain;
+  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
+  border-radius: 4px;
+}