@coras-io/embed 0.1.0 → 0.1.2

package/dist/views/suggestion-widget/suggestion-widget.styles.js

@@ -11,18 +11,18 @@ export default css `
 
     display: flex;
     flex-direction: column;
-    gap: 1.5rem;
+    gap: 2rem;
 
     h3 {
       margin: 0;
-      padding-inline: 2.25rem;
+      padding-inline: 1rem;
       font-size: var(--suggestion-widget-header-font-size);
       font-weight: var(--suggestion-widget-header-font-weight);
       line-height: var(--suggestion-widget-header-line-height);
       color: var(--suggestion-widget-header-color);
     }
 
-    coras-attraction-card,
+    coras-attraction-short-card,
     coras-explore-card {
       display: flex;
       width: 250px;
@@ -32,10 +32,63 @@ export default css `
     coras-carousel::part(carousel) {
       padding-bottom: 2.5rem;
       padding-inline: 1rem;
+      gap: 1.25rem;
     }
 
-    coras-carousel::part(carousel) {
+    .skeleton {
+      display: flex;
+      flex-direction: column;
+      gap: 2rem;
+    }
+
+    .skeleton-title {
+      margin-inline: 1rem;
+      width: 18rem;
+      max-width: 60%;
+      height: var(--suggestion-widget-header-line-height);
+      border-radius: 0.5rem;
+    }
+
+    .skeleton-cards {
+      display: flex;
       gap: 1.25rem;
+      padding-inline: 1rem;
+      overflow: hidden;
+    }
+
+    .skeleton-card {
+      flex-shrink: 0;
+      width: 250px;
+      height: 380px;
+      border-radius: 0.5rem;
+    }
+
+    .skeleton-title,
+    .skeleton-card {
+      background: linear-gradient(
+        100deg,
+        var(--coras-color-neutral-100, #f2f2f2) 30%,
+        var(--coras-color-neutral-200, #e6e6e6) 50%,
+        var(--coras-color-neutral-100, #f2f2f2) 70%
+      );
+      background-size: 200% 100%;
+      animation: suggestion-widget-shimmer 1.4s ease-in-out infinite;
+    }
+
+    @keyframes suggestion-widget-shimmer {
+      from {
+        background-position: 200% 0;
+      }
+      to {
+        background-position: -200% 0;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .skeleton-title,
+      .skeleton-card {
+        animation: none;
+      }
     }
   }
 `;

package/package.json

@@ -6,11 +6,18 @@
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
   "type": "module",
+  "sideEffects": [
+    "**/*.css",
+    "./dist/components/**",
+    "./dist/containers/**",
+    "./dist/contexts/**",
+    "./dist/views/**"
+  ],
   "engines": {
     "node": ">=20"
   },
   "customElements": "dist/custom-elements.json",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "private": false,
   "homepage": "https://embed.coras.io",
   "bugs": {
@@ -147,6 +154,7 @@
     "generate-manifest": "custom-elements-manifest analyze --config cem.config.mjs",
     "generate:tokens": "node scripts/generate-tokens.mjs",
     "check:styles": "node scripts/check-styles.mjs",
+    "measure:bundle": "node scripts/measure-bundle.mjs",
     "localize:extract": "lit-localize extract",
     "localize:build": "lit-localize build",
     "storybook": "storybook dev --no-open -p 8082",