@fluid-theme/core 2.1.1 → 2.2.1

package/src/components/places.css

@@ -0,0 +1,228 @@
+/**
+ * Fluid Framework - Places (opt-in module)
+ * @layer components
+ *
+ * dist/fluid-places.min.css (package export "./places"). Link it after core.
+ * Contact lists, opening hours, the outline map with numbered pins, and the
+ * numbered list that matches it. Without this file the markup is plain HTML:
+ * a definition list, a table, an image and an ordered list.
+ *
+ * CONTACT LIST
+ *   <dl class="contact-list">
+ *     <div><dt>Phone</dt><dd><a href="tel:+351296000000">+351 296 000 000</a></dd></div>
+ *   </dl>
+ *
+ * HOURS
+ *   <table class="hours"><caption>Opening hours</caption>
+ *     <tbody><tr><th scope="row">Mon to Fri</th><td>09:00 to 18:00</td></tr></tbody>
+ *   </table>
+ *
+ * MAP: an outline drawn at build time (scripts/build-map.mjs). No script,
+ * no tiles, no request to another site; it follows light and dark because
+ * every colour is a token. The pins are HTML (so they stay a readable size
+ * at any width) and hidden from assistive tech: the figure carries the
+ * description and the numbered list below it carries the places.
+ *   <figure class="map">
+ *     <div class="map__frame" role="img" aria-label="..." style="aspect-ratio: 960 / 420">
+ *       <svg class="map__svg" viewBox="0 0 960 420" aria-hidden="true"><path class="map__land" d="..."/></svg>
+ *       <span class="map__pin" data-n="1" style="--x: 41.2%; --y: 63.3%" aria-hidden="true"></span>
+ *     </div>
+ *     <figcaption>...</figcaption>
+ *   </figure>
+ *
+ * PLACE LIST (matches the pins)
+ *   <ol class="place-list"><li class="place">
+ *     <span class="place__num" aria-hidden="true">1</span>
+ *     <div class="place__body"><h3>...</h3><address>...</address><p class="place__links">...</p></div>
+ *   </li></ol>
+ */
+
+@layer components {
+  /* ========================================
+     CONTACT LIST
+     ======================================== */
+
+  .contact-list { margin: 0; }
+
+  .contact-list > div {
+    display: grid;
+    grid-template-columns: minmax(5.5rem, 0.5fr) minmax(0, 2fr);
+    gap: var(--space-xs) var(--space-m);
+    align-items: baseline;
+    padding-block: var(--space-s);
+    border-block-start: var(--border-width) solid var(--color-border);
+  }
+
+  .contact-list > div:last-child { border-block-end: var(--border-width) solid var(--color-border); }
+
+  .contact-list dt, .contact-list dd { margin: 0; }
+
+  .contact-list dd {
+    font-size: var(--step-1);
+    font-variant-numeric: lining-nums;
+    overflow-wrap: anywhere;
+  }
+
+  .contact-list address { margin: 0; }
+
+
+  /* ========================================
+     HOURS
+     ======================================== */
+
+  .hours {
+    inline-size: 100%;
+    max-inline-size: 28rem;
+    font-size: var(--step-0);
+    font-variant-numeric: lining-nums tabular-nums;
+  }
+
+  .hours caption {
+    caption-side: top;
+    text-align: start;
+    padding-block-end: var(--space-xs);
+  }
+
+  .hours tbody th {
+    text-align: start;
+    font-weight: var(--weight-normal);
+  }
+
+  .hours td { text-align: end; }
+  .hours [data-closed] { color: var(--color-text-muted); }
+
+
+  /* ========================================
+     MAP
+     ======================================== */
+
+  .map {
+    --_pin: 1.75rem;
+    color: var(--accent-ink);
+    margin: 0;
+  }
+
+  /* The coordinates are not text: a right-to-left page does not mirror the pins. */
+  .map__frame {
+    direction: ltr;
+    position: relative;
+    overflow: hidden;
+    inline-size: 100%;
+    background: color-mix(in oklab, currentColor 9%, var(--color-background));
+    border: var(--border-width) solid var(--color-border);
+    border-radius: var(--radius-card);
+  }
+
+  .map__svg {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  .map__land {
+    fill: color-mix(in oklab, currentColor 24%, var(--color-background));
+    stroke: currentColor;
+    stroke-width: 1.25;
+    stroke-linejoin: round;
+    vector-effect: non-scaling-stroke;
+  }
+
+  /* Physical left/top: the map's coordinates do not flip in right-to-left. */
+  .map__pin {
+    position: absolute;
+    left: var(--x);
+    top: var(--y);
+    translate: -50% -50%;
+    display: grid;
+    place-items: center;
+    inline-size: var(--_pin);
+    block-size: var(--_pin);
+    border-radius: var(--radius-full);
+    background: var(--accent-fill);
+    color: var(--on-accent-fill);
+    border: var(--border-width-thick) solid var(--color-background);
+    font: var(--weight-semibold) var(--step--1) / 1 var(--font-body);
+    font-variant-numeric: lining-nums tabular-nums;
+    box-shadow: 0 0 0 var(--border-width) var(--accent-fill);
+  }
+
+  .map__pin::before { content: attr(data-n); }
+
+  .map figcaption {
+    margin-block-start: var(--space-xs);
+    font-size: var(--step--1);
+    color: var(--color-text-muted);
+  }
+
+  /* ========================================
+     DIRECTIONS: plain links to Google Maps and Apple Maps
+     ======================================== */
+
+  .directions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-xs) var(--space-m);
+    margin: var(--space-s) 0 0;
+    padding: 0;
+    list-style: none;
+    font-size: var(--step--1);
+  }
+
+  .directions li { margin: 0; }
+
+  /* Plain links are 18px tall: a 2.75rem target, as .team-member__social has. */
+  :is(.directions, .place__links) a { display: inline-flex; align-items: center; min-block-size: 2.75rem; }
+
+
+  /* ========================================
+     PLACE LIST: numbered like the pins
+     ======================================== */
+
+  .place-list {
+    display: grid;
+    gap: 0;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .place {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    gap: var(--space-m);
+    margin: 0;
+    padding-block: var(--space-m);
+    border-block-start: var(--border-width) solid var(--color-border);
+  }
+
+  .place:last-child { border-block-end: var(--border-width) solid var(--color-border); }
+
+  .place__num {
+    display: grid;
+    place-items: center;
+    inline-size: 1.75rem;
+    block-size: 1.75rem;
+    border-radius: var(--radius-full);
+    background: var(--accent-fill);
+    color: var(--on-accent-fill);
+    font: var(--weight-semibold) var(--step--1) / 1 var(--font-body);
+    font-variant-numeric: lining-nums tabular-nums;
+  }
+
+  .place__body { display: grid; gap: var(--space-xs); justify-items: start; min-inline-size: 0; }
+  .place__body > * { margin: 0; }
+  .place__body h3 { font-size: var(--step-1); }
+  .place__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-m); font-size: var(--step--1); }
+
+  /* The map and its list side by side when there is room */
+  .places {
+    display: grid;
+    gap: var(--space-l);
+  }
+
+  @media (min-width: 60rem) {
+    .places { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
+    /* The map column scrolls with the page, not sticky (Neil, 2026-10-31). */
+  }
+}

package/src/fluid.css

@@ -4,7 +4,7 @@
  *
  * Like water: adaptable, natural, powerful yet gentle.
  *
- * @version 2.1.1
+ * @version 2.2.1
  * @license MIT
  *
  * Layer Architecture: