@hagicode/hagilight-core 0.6.1 → 0.6.2-dev.77.1.2359fea

package/PromotoBanner.astro

@@ -16,21 +16,36 @@ const { fallback, locale = Astro.currentLocale ?? 'en' } = Astro.props;
   hidden
 >
   <section class="hagilight-promoto__shell" data-promoto-shell hidden aria-label="Featured promotion">
-    <button
-      type="button"
-      class="hagilight-promoto__dismiss"
-      data-promoto-dismiss
-      aria-label="Dismiss promotion"
-    >&times;</button>
     <div class="hagilight-promoto__viewport">
       <div class="hagilight-promoto__track" data-promoto-track></div>
     </div>
     <nav class="hagilight-promoto__controls" data-promoto-controls aria-label="Promotion controls" hidden>
-      <button type="button" class="hagilight-promoto__control" data-promoto-previous aria-label="Previous promotion">‹</button>
+      <button type="button" class="hagilight-promoto__control" data-promoto-previous aria-label="Previous promotion">
+        <svg class="hagilight-promoto__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M15 6l-6 6 6 6" /></svg>
+      </button>
       <span class="hagilight-promoto__count" data-promoto-count aria-label="Promotion progress"></span>
-      <button type="button" class="hagilight-promoto__control" data-promoto-next aria-label="Next promotion">›</button>
-      <button type="button" class="hagilight-promoto__control" data-promoto-pause aria-pressed="false">Pause</button>
+      <button type="button" class="hagilight-promoto__control" data-promoto-next aria-label="Next promotion">
+        <svg class="hagilight-promoto__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6" /></svg>
+      </button>
+      <button
+        type="button"
+        class="hagilight-promoto__control"
+        data-promoto-pause
+        aria-pressed="false"
+        aria-label="Pause automatic promotion rotation"
+      >
+        <svg class="hagilight-promoto__icon hagilight-promoto__icon--pause" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 6v12M15 6v12" /></svg>
+        <svg class="hagilight-promoto__icon hagilight-promoto__icon--play" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M8 5.5v13l11-6.5z" /></svg>
+      </button>
     </nav>
+    <button
+      type="button"
+      class="hagilight-promoto__dismiss"
+      data-promoto-dismiss
+      aria-label="Dismiss promotion"
+    >
+      <svg class="hagilight-promoto__icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6.5 6.5l11 11M17.5 6.5l-11 11" /></svg>
+    </button>
     <span class="hagilight-promoto__status" data-promoto-status aria-live="polite"></span>
   </section>
 </hagilight-promoto-banner>
@@ -42,8 +57,18 @@ const { fallback, locale = Astro.currentLocale ?? 'en' } = Astro.props;
 </script>
 
 <style is:global>
+  /*
+   * Layout model: the card leads with the campaign (media, title, description,
+   * call to action). Pager and dismiss are one quiet toolbar and never get their
+   * own row. Wide: a single row with the toolbar at the trailing edge, vertically
+   * centered. Narrow (portrait phones): the dismiss sits in the top corner and the
+   * pager shares the call-to-action row. Short landscape viewports keep the single
+   * row and drop the thumbnail so the card stays a thin strip.
+   */
   .hagilight-promoto {
     display: block;
+    --promoto-control-size: 1.75rem;
+    --promoto-muted: var(--sl-color-gray-2, #4b5563);
   }
 
   .hagilight-promoto[hidden],
@@ -57,13 +82,16 @@ const { fallback, locale = Astro.currentLocale ?? 'en' } = Astro.props;
     z-index: 40;
     inset-inline: 0;
     bottom: max(1rem, env(safe-area-inset-bottom));
-    width: min(72rem, calc(100vw - 1rem));
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto auto;
+    align-items: center;
+    width: min(72rem, calc(100vw - 1rem - 2 * max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))));
     margin-inline: auto;
     overflow: hidden;
     border: 1px solid color-mix(in srgb, var(--sl-color-accent, #2563eb) 24%, var(--sl-color-gray-5, #cbd5e1));
-    border-radius: 1.25rem;
+    border-radius: 1rem;
     background: color-mix(in srgb, var(--sl-color-bg, #fff) 96%, var(--sl-color-accent-low, #dbeafe) 4%);
-    box-shadow: 0 18px 48px color-mix(in srgb, var(--sl-color-black, #000) 16%, transparent);
+    box-shadow: 0 12px 32px color-mix(in srgb, var(--sl-color-black, #000) 14%, transparent);
     color: var(--sl-color-text, #1f2937);
     opacity: 1;
     visibility: visible;
@@ -78,6 +106,9 @@ const { fallback, locale = Astro.currentLocale ?? 'en' } = Astro.props;
   }
 
   .hagilight-promoto__viewport {
+    grid-column: 1;
+    grid-row: 1;
+    min-width: 0;
     overflow: hidden;
   }
 
@@ -88,14 +119,22 @@ const { fallback, locale = Astro.currentLocale ?? 'en' } = Astro.props;
     transition: transform 0.34s ease;
   }
 
+  /* Slide: [media] [copy] [cta] in one row. */
   .hagilight-promoto__slide {
     display: grid;
-    grid-template-columns: minmax(0, 1fr) auto auto;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    grid-template-areas: 'media copy cta';
     align-items: center;
-    gap: 1.25rem;
+    column-gap: 1rem;
     width: 100%;
     min-width: 100%;
-    padding: 1.25rem 4rem 1.25rem 1.25rem;
+    padding: 0.875rem 1rem 0.875rem 0.875rem;
+  }
+
+  .hagilight-promoto__slide:not([data-has-image='true']) {
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas: 'copy cta';
+    padding-inline-start: 1.25rem;
   }
 
   .hagilight-promoto__slide[aria-hidden='true'] {
@@ -103,10 +142,9 @@ const { fallback, locale = Astro.currentLocale ?? 'en' } = Astro.props;
   }
 
   .hagilight-promoto__copy {
+    grid-area: copy;
     display: grid;
-    grid-template-columns: 1fr;
-    align-items: start;
-    gap: 0.4rem;
+    gap: 0.25rem;
     min-width: 0;
   }
 
@@ -115,28 +153,36 @@ const { fallback, locale = Astro.currentLocale ?? 'en' } = Astro.props;
     display: -webkit-box;
     overflow: hidden;
     margin: 0;
-    color: var(--sl-color-text-high, var(--sl-color-gray-1, #111827));
-    font-size: var(--sl-text-sm);
-    font-weight: 600;
-    line-height: 1.35;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
   }
 
+  .hagilight-promoto__title {
+    color: var(--sl-color-text-high, var(--sl-color-gray-1, #111827));
+    font-size: var(--sl-text-base, 1rem);
+    font-weight: 700;
+    line-height: 1.3;
+    text-wrap: balance;
+  }
+
   .hagilight-promoto__description {
-    color: var(--sl-color-text, #1f2937);
+    color: var(--promoto-muted);
+    font-size: var(--sl-text-sm, 0.875rem);
+    font-weight: 400;
+    line-height: 1.4;
   }
 
   .hagilight-promoto__media {
+    grid-area: media;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: clamp(4.5rem, 8vw, 6.25rem);
-    min-width: clamp(4.5rem, 8vw, 6.25rem);
+    width: 4.5rem;
+    min-width: 4.5rem;
     aspect-ratio: 1;
     overflow: hidden;
     border: 1px solid color-mix(in srgb, var(--sl-color-accent-high, #1d4ed8) 18%, var(--sl-color-gray-5, #cbd5e1));
-    border-radius: 0.8rem;
+    border-radius: 0.75rem;
     background: color-mix(in srgb, var(--sl-color-bg-sidebar, #f8fafc) 82%, transparent);
   }
 
@@ -148,18 +194,20 @@ const { fallback, locale = Astro.currentLocale ?? 'en' } = Astro.props;
   }
 
   .hagilight-promoto__cta {
+    grid-area: cta;
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    min-width: 7.5rem;
-    min-height: 2.6rem;
+    max-width: 14rem;
+    min-height: 2.25rem;
+    padding: 0.4rem 1rem;
     border: 1px solid color-mix(in srgb, var(--sl-color-accent-high, #1d4ed8) 30%, transparent);
     border-radius: 999px;
     background: var(--sl-color-accent, #2563eb);
     color: #fff;
-    font-size: var(--sl-text-xs);
-    font-weight: 700;
-    padding-inline: 1rem;
+    font-size: var(--sl-text-sm, 0.875rem);
+    font-weight: 600;
+    line-height: 1.2;
     text-align: center;
     text-decoration: none;
   }
@@ -169,45 +217,88 @@ const { fallback, locale = Astro.currentLocale ?? 'en' } = Astro.props;
     background: var(--sl-color-accent-high, #1d4ed8);
   }
 
+  /* Toolbar: pager then dismiss, small, quiet, trailing edge. */
+  .hagilight-promoto__controls {
+    grid-column: 2;
+    grid-row: 1;
+    display: flex;
+    align-items: center;
+    gap: 0.125rem;
+  }
+
   .hagilight-promoto__dismiss,
   .hagilight-promoto__control {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    min-width: 2.5rem;
-    min-height: 2.5rem;
-    border: 1px solid color-mix(in srgb, var(--sl-color-accent-high, #1d4ed8) 20%, var(--sl-color-gray-5, #cbd5e1));
+    position: relative;
+    display: inline-grid;
+    place-items: center;
+    flex: none;
+    width: var(--promoto-control-size);
+    height: var(--promoto-control-size);
+    padding: 0;
+    border: 0;
     border-radius: 999px;
-    background: var(--sl-color-bg-nav, #f8fafc);
-    color: var(--sl-color-text-high, #111827);
+    background: transparent;
+    color: var(--promoto-muted);
     cursor: pointer;
+    transition: background-color 0.15s ease, color 0.15s ease;
   }
 
-  .hagilight-promoto__dismiss {
+  /* Keep the tap target larger than the visible mark. */
+  .hagilight-promoto__dismiss::before,
+  .hagilight-promoto__control::before {
+    content: '';
     position: absolute;
-    z-index: 1;
-    inset-block-start: 0.6rem;
-    inset-inline-end: 0.6rem;
+    inset-block: -0.375rem;
+    inset-inline: 0;
   }
 
-  .hagilight-promoto__controls {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    gap: 0.5rem;
-    padding: 0 1.25rem 1rem;
+  .hagilight-promoto__dismiss {
+    grid-column: 3;
+    grid-row: 1;
+    margin-inline: 0.25rem 0.625rem;
+  }
+
+  .hagilight-promoto__dismiss::before {
+    inset-inline: -0.25rem;
+  }
+
+  .hagilight-promoto__icon {
+    width: 1rem;
+    height: 1rem;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    pointer-events: none;
+  }
+
+  .hagilight-promoto__icon--play {
+    display: none;
+    fill: currentColor;
+  }
+
+  .hagilight-promoto__control[aria-pressed='true'] .hagilight-promoto__icon--pause {
+    display: none;
+  }
+
+  .hagilight-promoto__control[aria-pressed='true'] .hagilight-promoto__icon--play {
+    display: block;
   }
 
   .hagilight-promoto__count {
-    min-width: 3.5rem;
-    text-align: center;
-    font-size: var(--sl-text-xs);
+    min-width: 2.25rem;
+    color: var(--promoto-muted);
+    font-size: var(--sl-text-xs, 0.75rem);
     font-variant-numeric: tabular-nums;
+    line-height: 1;
+    text-align: center;
+    white-space: nowrap;
   }
 
   .hagilight-promoto__control:disabled {
     cursor: default;
-    opacity: 0.6;
+    opacity: 0.45;
   }
 
   .hagilight-promoto__status {
@@ -219,128 +310,157 @@ const { fallback, locale = Astro.currentLocale ?? 'en' } = Astro.props;
     white-space: nowrap;
   }
 
+  @media (hover: hover) {
+    .hagilight-promoto__dismiss:hover,
+    .hagilight-promoto__control:hover:not(:disabled) {
+      background: color-mix(in srgb, var(--sl-color-accent, #2563eb) 12%, transparent);
+      color: var(--sl-color-text-high, #111827);
+    }
+  }
+
   .hagilight-promoto__dismiss:focus-visible,
   .hagilight-promoto__control:focus-visible,
   .hagilight-promoto__cta:focus-visible {
-    outline: 3px solid var(--sl-color-accent-high, #1d4ed8);
-    outline-offset: 3px;
+    outline: 2px solid var(--sl-color-accent-high, #1d4ed8);
+    outline-offset: 2px;
   }
 
-  @media (max-width: 960px) {
-    .hagilight-promoto__slide {
-      grid-template-columns: 1fr;
-      gap: 0.75rem;
-      padding-inline-end: 3.7rem;
+  /* Touch: bigger marks, still compact. */
+  @media (pointer: coarse) {
+    .hagilight-promoto {
+      --promoto-control-size: 2rem;
+    }
+  }
+
+  /* Portrait phones and narrow windows: stacked card, pager on the CTA row. */
+  @media (max-width: 45rem) and (min-height: 30rem) {
+    .hagilight-promoto {
+      --promoto-control-size: 2rem;
+      --promoto-pager-width: 8.25rem;
+    }
+
+    .hagilight-promoto__shell {
+      display: block;
+      bottom: calc(env(safe-area-inset-bottom) + 0.5rem);
+      width: min(calc(100vw - 1rem - 2 * max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))), 24rem);
+      border-radius: 0.875rem;
+    }
+
+    .hagilight-promoto__slide,
+    .hagilight-promoto__slide:not([data-has-image='true']) {
+      grid-template-columns: minmax(0, 1fr);
+      grid-template-areas: 'title' 'desc' 'cta';
+      align-items: start;
+      gap: 0.375rem;
+      padding: 0.75rem;
     }
 
     .hagilight-promoto__slide[data-has-image='true'] {
-      grid-template-columns: 1fr;
+      grid-template-columns: 3rem minmax(0, 1fr);
+      grid-template-areas: 'media title' 'desc desc' 'cta cta';
+      column-gap: 0.625rem;
     }
 
+    /* Flatten copy so the thumbnail sits beside the title only. */
     .hagilight-promoto__copy {
-      grid-template-columns: 1fr;
-      gap: 0.45rem;
+      display: contents;
     }
 
-    .hagilight-promoto__media {
-      width: min(100%, 8rem);
-      min-width: 0;
+    .hagilight-promoto__title {
+      grid-area: title;
+      align-self: center;
+      padding-inline-end: 1.75rem;
+      font-size: 0.95rem;
     }
 
-    .hagilight-promoto__cta {
-      justify-self: start;
-      white-space: normal;
+    .hagilight-promoto__description {
+      grid-area: desc;
+      font-size: 0.85rem;
+      line-height: 1.35;
     }
 
-    .hagilight-promoto__controls {
-      justify-content: flex-start;
-      padding-top: 0;
+    .hagilight-promoto__media {
+      width: 3rem;
+      min-width: 3rem;
+      border-radius: 0.625rem;
     }
-  }
 
-  @media (max-width: 720px) {
-    .hagilight-promoto__shell {
-      bottom: calc(env(safe-area-inset-bottom) + 0.5rem);
-      width: min(calc(100vw - 1rem), 24rem);
-      border-radius: 1rem;
+    .hagilight-promoto__cta {
+      justify-self: start;
+      margin-block-start: 0.25rem;
+      min-height: 2.25rem;
+      padding-inline: 0.875rem;
     }
 
-    .hagilight-promoto__slide {
-      grid-template-columns: 1fr;
-      gap: 0.7rem;
-      padding: 0.85rem 4.8rem 0.85rem 0.85rem;
+    .hagilight-promoto[data-multiple] .hagilight-promoto__cta {
+      max-width: calc(100% - var(--promoto-pager-width));
     }
 
-    .hagilight-promoto__slide[data-has-image='true'] {
-      grid-template-columns: minmax(0, 1fr) 4.5rem;
-      align-items: start;
+    .hagilight-promoto__dismiss {
+      position: absolute;
+      inset-block-start: 0.375rem;
+      inset-inline-end: 0.375rem;
+      margin: 0;
     }
 
-    .hagilight-promoto__copy {
-      grid-column: 1;
-      grid-row: 1;
-      gap: 0.45rem;
+    .hagilight-promoto__controls {
+      position: absolute;
+      inset-block-end: 0.75rem;
+      inset-inline-end: 0.5rem;
+      gap: 0;
     }
 
-    .hagilight-promoto__title {
-      font-size: 0.92rem;
+    .hagilight-promoto__count {
+      min-width: 2.25rem;
     }
+  }
 
-    .hagilight-promoto__description {
-      font-size: 0.84rem;
-      font-weight: 500;
-      line-height: 1.3;
+  @media (max-width: 22.5rem) and (min-height: 30rem) {
+    .hagilight-promoto {
+      --promoto-pager-width: 6rem;
     }
 
-    .hagilight-promoto__media {
-      width: 4.5rem;
-      min-width: 4.5rem;
-      align-self: start;
-      grid-column: 2;
-      grid-row: 1;
+    .hagilight-promoto__count {
+      display: none;
     }
 
     .hagilight-promoto__cta {
-      grid-column: 1 / -1;
-      justify-self: stretch;
-      min-width: 0;
-      min-height: 2.35rem;
-      width: 100%;
-      font-size: 0.82rem;
-      white-space: normal;
+      padding-inline: 0.625rem;
     }
+  }
 
-    .hagilight-promoto__control {
-      min-width: 2.2rem;
-      min-height: 2.2rem;
+  /* Short landscape viewports: single strip, no thumbnail, one-line description. */
+  @media (max-height: 30rem) {
+    .hagilight-promoto__shell {
+      bottom: max(0.5rem, env(safe-area-inset-bottom));
     }
 
-    .hagilight-promoto__count {
-      min-width: 2.75rem;
-      font-size: 0.75rem;
+    .hagilight-promoto__media {
+      display: none;
     }
 
-    .hagilight-promoto__dismiss {
-      inset-block-start: 0.55rem;
-      inset-inline-end: 0.55rem;
-      width: auto;
-      min-width: 2rem;
-      height: 2rem;
-      gap: 0.25rem;
-      padding-inline: 0.55rem;
+    .hagilight-promoto__slide,
+    .hagilight-promoto__slide[data-has-image='true'] {
+      grid-template-columns: minmax(0, 1fr) auto;
+      grid-template-areas: 'copy cta';
+      padding: 0.5rem 0.75rem 0.5rem 1rem;
     }
 
-    .hagilight-promoto__controls {
-      flex-wrap: wrap;
-      gap: 0.35rem;
-      padding: 0 0.85rem 0.9rem;
+    .hagilight-promoto__description {
+      -webkit-line-clamp: 1;
+    }
+
+    .hagilight-promoto__cta {
+      min-height: 2rem;
     }
   }
 
   @media (prefers-reduced-motion: reduce) {
     .hagilight-promoto__shell,
-    .hagilight-promoto__track {
+    .hagilight-promoto__track,
+    .hagilight-promoto__dismiss,
+    .hagilight-promoto__control {
       transition: none;
     }
   }
-</style>
+</style>

package/dist/promoto-banner.js

@@ -281,6 +281,7 @@ export function definePromotoBannerElement() {
         }
         updateControls() {
             const multiple = this.cards.length > 1;
+            this.toggleAttribute('data-multiple', multiple);
             const controls = this.querySelector('[data-promoto-controls]');
             if (controls)
                 controls.hidden = !multiple;
@@ -290,7 +291,6 @@ export function definePromotoBannerElement() {
                 pause.disabled = this.reducedMotion;
                 pause.setAttribute('aria-pressed', String(paused));
                 pause.setAttribute('aria-label', paused ? 'Resume automatic promotion rotation' : 'Pause automatic promotion rotation');
-                pause.textContent = paused ? 'Resume' : 'Pause';
             }
             this.updateSlides();
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hagicode/hagilight-core",
-  "version": "0.6.1",
+  "version": "0.6.2-dev.77.1.2359fea",
   "type": "module",
   "description": "Shared TypeScript utilities, components, and assets for HagiCode Astro and Starlight sites",
   "repository": {