@repobit/dex-system-design 0.21.2 → 0.22.0

package/src/components/picture/picture.css.js

@@ -0,0 +1,209 @@
+import { css } from "lit";
+
+export default css`
+  @layer bd-components {
+    .bd-picture {
+      display: block;
+      max-width: 100%;
+      height: auto;
+    }
+
+    .bd-picture img {
+      display: block;
+      max-width: 100%;
+      height: auto;
+    }
+
+    /* Object Fit Classes */
+    .bd-picture.fit-cover img {
+      object-fit: cover;
+    }
+
+    .bd-picture.fit-contain img {
+      object-fit: contain;
+    }
+
+    .bd-picture.fit-fill img {
+      object-fit: fill;
+    }
+
+    .bd-picture.fit-none img {
+      object-fit: none;
+    }
+
+    .bd-picture.fit-scale-down img {
+      object-fit: scale-down;
+    }
+
+    /* Radius Classes */
+    .bd-picture.radius-none img {
+      border-radius: 0;
+    }
+
+    .bd-picture.radius-sm img {
+      border-radius: var(--radius-sm, 0.25rem);
+    }
+
+    .bd-picture.radius-md img {
+      border-radius: var(--radius-md, 0.5rem);
+    }
+
+    .bd-picture.radius-lg img {
+      border-radius: var(--radius-lg, 0.75rem);
+    }
+
+    .bd-picture.radius-full img {
+      border-radius: 50%;
+    }
+
+    /* Responsive Behavior */
+    .bd-picture.responsive {
+      width: 100%;
+    }
+
+    .bd-picture.responsive img {
+      width: 100%;
+      height: auto;
+    }
+
+    /* Aspect Ratio Containers */
+    .bd-picture.aspect-16-9 {
+      aspect-ratio: 16 / 9;
+    }
+
+    .bd-picture.aspect-16-9 img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .bd-picture.aspect-4-3 {
+      aspect-ratio: 4 / 3;
+    }
+
+    .bd-picture.aspect-4-3 img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .bd-picture.aspect-1-1 {
+      aspect-ratio: 1 / 1;
+    }
+
+    .bd-picture.aspect-1-1 img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    /* Focus styles for accessibility */
+    .bd-picture:focus-within {
+      outline: 2px solid var(--color-primary-500, #3b82f6);
+      outline-offset: 2px;
+      border-radius: 2px;
+    }
+
+    /* Loading state */
+    .bd-picture:not([loaded]) {
+      background-color: var(--color-neutral-100, #f3f4f6);
+      min-height: 100px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--color-neutral-400, #9ca3af);
+    }
+
+    .bd-picture:not([loaded])::before {
+      content: "Loading image...";
+      font-size: var(--text-sm, 0.875rem);
+    }
+
+    /* Smooth transitions */
+    .bd-picture img {
+      transition: opacity 0.3s ease, transform 0.3s ease;
+    }
+
+    .bd-picture img[loading="lazy"] {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+
+    .bd-picture img[loading="lazy"][loaded] {
+      opacity: 1;
+      transform: scale(1);
+    }
+
+    /* Hover effects */
+    .bd-picture.hover-zoom:hover img {
+      transform: scale(1.05);
+    }
+
+    .bd-picture.hover-lift:hover {
+      transform: translateY(-2px);
+      transition: transform 0.3s ease;
+    }
+
+    /* Performance optimizations */
+    .bd-picture img {
+      will-change: transform, opacity;
+    }
+
+    /* Responsive width utilities */
+    @container (max-width: 480px) {
+      .bd-picture.mobile-full {
+        width: 100vw;
+        margin-left: -1rem;
+        margin-right: -1rem;
+      }
+    }
+
+    @container (max-width: 768px) {
+      .bd-picture.tablet-optimized img {
+        object-fit: contain;
+      }
+    }
+
+    /* Print styles */
+    @media print {
+      .bd-picture {
+        break-inside: avoid;
+      }
+      
+      .bd-picture img {
+        max-width: 100% !important;
+        height: auto !important;
+      }
+    }
+
+    /* High contrast mode support */
+    @media (prefers-contrast: high) {
+      .bd-picture img {
+        border: 1px solid currentColor;
+      }
+    }
+
+    /* Reduced motion support */
+    @media (prefers-reduced-motion: reduce) {
+      .bd-picture img {
+        transition: none;
+      }
+      
+      .bd-picture.hover-zoom:hover img {
+        transform: none;
+      }
+      
+      .bd-picture.hover-lift:hover {
+        transform: none;
+      }
+    }
+
+    /* Dark mode support */
+    @media (prefers-color-scheme: dark) {
+      .bd-picture:not([loaded]) {
+        background-color: var(--color-neutral-800, #1f2937);
+        color: var(--color-neutral-400, #9ca3af);
+      }
+    }
+  }
+`;

package/src/components/picture/picture.js

@@ -1,4 +1,6 @@
 import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import pictureCSS from "./picture.css.js";
 
 export class BdPicture extends LitElement {
   static properties = {
@@ -7,7 +9,9 @@ export class BdPicture extends LitElement {
     fallbackSrc: { type: String },
     width      : { type: Number },
     height     : { type: Number },
-    loading    : { type: String }
+    loading    : { type: String },
+    fit        : { type: String },
+    radius     : { type: String }
   };
 
   constructor() {
@@ -18,11 +22,19 @@ export class BdPicture extends LitElement {
     this.width = null;
     this.height = null;
     this.loading = "lazy";
+    this.fit = "cover";
+    this.radius = "none";
   }
 
   render() {
+    const classes = [
+      'bd-picture',
+      `fit-${this.fit}`,
+      `radius-${this.radius}`
+    ].filter(Boolean).join(' ');
+
     return html`
-      <picture>
+      <picture class="${classes}">
         ${this.sources.map(source => html`
           <source 
             type="${source.type}" 
@@ -41,6 +53,8 @@ export class BdPicture extends LitElement {
       </picture>
     `;
   }
+
+  static styles = [tokens, pictureCSS];
 }
 
 customElements.define("bd-picture", BdPicture);