@santi020k/lumen 3.0.1 → 4.1.0

package/styles/motion.css

@@ -0,0 +1,61 @@
+/* Native disclosures keep their semantic toggle and immediate fallback in older browsers. */
+@layer lumen.components {
+  @supports (interpolate-size: allow-keywords) and selector(details::details-content) {
+    @media (prefers-reduced-motion: no-preference) {
+      :is(.ui-accordion details, .ui-collapsible) {
+        interpolate-size: allow-keywords;
+        transition:
+          border-color var(--ui-duration-fast) var(--ui-ease),
+          padding-block-end var(--ui-duration) var(--ui-ease-emphasized);
+      }
+
+      :is(.ui-accordion details, .ui-collapsible)::details-content {
+        block-size: 0;
+        overflow: clip;
+        opacity: 0;
+        transition:
+          block-size var(--ui-duration) var(--ui-ease-emphasized),
+          opacity var(--ui-duration) var(--ui-ease),
+          content-visibility var(--ui-duration) allow-discrete;
+      }
+
+      :is(.ui-accordion details, .ui-collapsible)[open]::details-content {
+        block-size: auto;
+        opacity: 1;
+      }
+    }
+  }
+}
+
+/* A local preference can reduce motion without changing the operating system setting. */
+[data-ui-motion="reduce"],
+[data-ui-motion="reduce"]::before,
+[data-ui-motion="reduce"]::after,
+[data-ui-motion="reduce"]::backdrop,
+[data-ui-motion="reduce"] *,
+[data-ui-motion="reduce"] *::before,
+[data-ui-motion="reduce"] *::after,
+[data-ui-motion="reduce"] ::backdrop {
+  animation: none !important;
+  transition: none !important;
+  scroll-behavior: auto !important;
+}
+
+[data-ui-motion="reduce"].ui-collapsible::details-content,
+[data-ui-motion="reduce"] :is(.ui-accordion details, .ui-collapsible)::details-content {
+  transition: none !important;
+}
+
+[data-ui-motion="reduce"].ui-collapsible[open]::details-content,
+[data-ui-motion="reduce"] :is(.ui-accordion details, .ui-collapsible)[open]::details-content {
+  block-size: auto;
+  opacity: 1;
+}
+
+[data-ui-motion="reduce"].ui-scroll-reveal,
+[data-ui-motion="reduce"] .ui-scroll-reveal,
+[data-ui-motion="reduce"].ui-reveal-group > *,
+[data-ui-motion="reduce"] .ui-reveal-group > * {
+  opacity: 1;
+  transform: none;
+}

package/styles/world-map.css

@@ -0,0 +1,30 @@
+@layer lumen.components {
+  .ui-world-map { display: grid; gap: .75rem; color: hsl(var(--ink)); }
+  .ui-world-map__frame { position: relative; overflow: hidden; border-radius: var(--ui-radius-lg); background: var(--ui-world-map-surface, hsl(var(--surface-muted))); }
+  .ui-world-map__viewport { overflow: auto; aspect-ratio: 2.5; }
+  .ui-world-map__viewport[data-pan-enabled="true"], .ui-world-map__viewport[data-pan-enabled="true"] .ui-world-map__country { cursor: grab; user-select: none; }
+  .ui-world-map__viewport[data-panning], .ui-world-map__viewport[data-panning] .ui-world-map__country { cursor: grabbing; }
+  .ui-world-map__viewport:focus-visible { outline: 2px solid hsl(var(--brand)); outline-offset: -2px; }
+  .ui-world-map__plot { display: block; width: calc(100% * var(--ui-world-map-zoom, 1)); max-width: none; height: auto; }
+  .ui-world-map__zoom-controls { display: flex; align-items: center; justify-content: end; flex-wrap: wrap; gap: .5rem; }
+  .ui-world-map__zoom-controls button { min-width: 2.75rem; min-height: 2.75rem; }
+  .ui-world-map__zoom-controls output { min-width: 3rem; text-align: center; font-variant-numeric: tabular-nums; }
+  .ui-world-map__dot--neutral { fill: var(--ui-world-map-land, hsl(var(--ink-soft) / .45)); }
+  .ui-world-map__dot--highlight { fill: var(--ui-world-map-highlight, hsl(var(--brand))); }
+  .ui-world-map[data-variant="solid"] .ui-world-map__country { fill: var(--ui-world-map-land, hsl(var(--ink-soft) / .22)); }
+  .ui-world-map[data-variant="solid"] .ui-world-map__country--highlighted { fill: var(--ui-world-map-highlight, hsl(var(--brand))); }
+  .ui-world-map__country { stroke: hsl(var(--surface-muted)); stroke-width: .5; vector-effect: non-scaling-stroke; pointer-events: all; transition: opacity var(--ui-duration); }
+  .ui-world-map[data-interactive="true"] .ui-world-map__country { cursor: pointer; }
+  .ui-world-map[data-interactive="true"] .ui-world-map__country:hover { opacity: .65; }
+  .ui-world-map__selection { fill: none; stroke: hsl(var(--accent)); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; pointer-events: none; }
+  .ui-world-map__marker { fill: hsl(var(--on-brand)); stroke: var(--ui-world-map-marker, hsl(var(--brand))); }
+  .ui-world-map__inspection { position: absolute; inset: .75rem auto auto .75rem; padding: .25rem .5rem; background: hsl(var(--surface)); border-radius: var(--ui-radius-md); font-size: .875rem; pointer-events: none; }
+  .ui-world-map__highlights { display: flex; flex-wrap: wrap; gap: .75rem; padding: 0; margin: 0; list-style: none; font-size: .8125rem; }
+  .ui-world-map__select-label { display: grid; gap: .375rem; max-width: 24rem; }
+  .ui-world-map[data-animated="true"] .ui-world-map__countries { animation: ui-map-enter .6s; }
+  .ui-world-map[data-animated="true"] .ui-world-map__marker { animation: ui-map-pulse 2.5s 2; transform-box: fill-box; transform-origin: center; }
+  @keyframes ui-map-enter { from { opacity: 0; } }
+  @keyframes ui-map-pulse { 50% { transform: scale(1.25); } }
+  @media (prefers-reduced-motion: reduce) { .ui-world-map[data-animated="true"] :is(.ui-world-map__countries, .ui-world-map__marker) { animation: none; transition: none; } }
+  @media (forced-colors: active) { .ui-world-map__country { stroke: CanvasText; } .ui-world-map__selection { stroke: Highlight; } }
+}