ogm-viewer 0.3.0 → 0.4.0

package/dist/collection/assets/webawesome/styles/utilities/border-radius.css

@@ -0,0 +1,20 @@
+@layer wa-utilities {
+  .wa-border-radius-s {
+    border-radius: var(--wa-border-radius-s);
+  }
+  .wa-border-radius-m {
+    border-radius: var(--wa-border-radius-m);
+  }
+  .wa-border-radius-l {
+    border-radius: var(--wa-border-radius-l);
+  }
+  .wa-border-radius-pill {
+    border-radius: var(--wa-border-radius-pill);
+  }
+  .wa-border-radius-circle {
+    border-radius: var(--wa-border-radius-circle);
+  }
+  .wa-border-radius-square {
+    border-radius: var(--wa-border-radius-square);
+  }
+}

package/dist/collection/assets/webawesome/styles/utilities/flex-wrap.css

@@ -0,0 +1,16 @@
+@layer wa-utilities {
+  /* Apply Flexbox with 0 specificity to ensure a flex wrap util produces a visible change */
+  :where(.wa-flex-wrap, .wa-flex-nowrap, .wa-flex-wrap-reverse) {
+    display: flex;
+  }
+
+  .wa-flex-wrap {
+    flex-wrap: wrap;
+  }
+  .wa-flex-nowrap {
+    flex-wrap: nowrap;
+  }
+  .wa-flex-wrap-reverse {
+    flex-wrap: wrap-reverse;
+  }
+}

package/dist/collection/assets/webawesome/styles/utilities/fouce.css

@@ -0,0 +1,17 @@
+@layer wa-utilities {
+  /*
+   * Utility to minimize FOUCE and show custom elements only after they're registered
+   */
+  .wa-cloak:has(:not(:defined)) {
+    animation: 2s step-end wa-fouce-cloak;
+  }
+
+  @keyframes wa-fouce-cloak {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+}

package/dist/collection/assets/webawesome/styles/utilities/gap.css

@@ -0,0 +1,56 @@
+@layer wa-utilities {
+  /* Apply Flexbox with 0 specificity to ensure a gap util produces a visible change */
+  :where(
+    .wa-gap-0,
+    .wa-gap-3xs,
+    .wa-gap-2xs,
+    .wa-gap-xs,
+    .wa-gap-s,
+    .wa-gap-m,
+    .wa-gap-l,
+    .wa-gap-xl,
+    .wa-gap-2xl,
+    .wa-gap-3xl,
+    .wa-gap-4xl,
+    .wa-gap-5xl
+  ) {
+    display: flex;
+  }
+
+  .wa-gap-0 {
+    gap: 0px;
+  }
+  .wa-gap-3xs {
+    gap: var(--wa-space-3xs);
+  }
+  .wa-gap-2xs {
+    gap: var(--wa-space-2xs);
+  }
+  .wa-gap-xs {
+    gap: var(--wa-space-xs);
+  }
+  .wa-gap-s {
+    gap: var(--wa-space-s);
+  }
+  .wa-gap-m {
+    gap: var(--wa-space-m);
+  }
+  .wa-gap-l {
+    gap: var(--wa-space-l);
+  }
+  .wa-gap-xl {
+    gap: var(--wa-space-xl);
+  }
+  .wa-gap-2xl {
+    gap: var(--wa-space-2xl);
+  }
+  .wa-gap-3xl {
+    gap: var(--wa-space-3xl);
+  }
+  .wa-gap-4xl {
+    gap: var(--wa-space-4xl);
+  }
+  .wa-gap-5xl {
+    gap: var(--wa-space-5xl);
+  }
+}

package/dist/collection/assets/webawesome/styles/utilities/justify-content.css

@@ -0,0 +1,32 @@
+@layer wa-utilities {
+  /* Apply Flexbox with 0 specificity to ensure a justify-content util produces a visible change */
+  :where(
+    .wa-justify-content-start,
+    .wa-justify-content-end,
+    .wa-justify-content-center,
+    .wa-justify-content-space-around,
+    .wa-justify-content-space-between,
+    .wa-justify-content-space-evenly
+  ) {
+    display: flex;
+  }
+
+  .wa-justify-content-start {
+    justify-content: flex-start;
+  }
+  .wa-justify-content-end {
+    justify-content: flex-end;
+  }
+  .wa-justify-content-center {
+    justify-content: center;
+  }
+  .wa-justify-content-space-around {
+    justify-content: space-around;
+  }
+  .wa-justify-content-space-between {
+    justify-content: space-between;
+  }
+  .wa-justify-content-space-evenly {
+    justify-content: space-evenly;
+  }
+}

package/dist/collection/assets/webawesome/styles/utilities/layout.css

@@ -0,0 +1,159 @@
+@layer wa-utilities {
+  :is(
+      [class*='wa-cluster'],
+      [class*='wa-flank'],
+      [class*='wa-frame'],
+      [class*='wa-grid'],
+      [class*='wa-stack'],
+      [class*='wa-split']
+    )
+    > * {
+    margin-block: 0;
+    margin-inline: 0;
+  }
+
+  :where(
+    [class*='wa-cluster'],
+    [class*='wa-flank'],
+    [class*='wa-frame'],
+    [class*='wa-grid'],
+    [class*='wa-stack'],
+    [class*='wa-split']
+  ) {
+    gap: var(--wa-space-m);
+  }
+
+  /* #region Cluster */
+  [class*='wa-cluster'] {
+    display: flex;
+  }
+
+  :where([class*='wa-cluster']) {
+    align-items: center;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+  }
+  /* #endregion */
+
+  /* #region Flank */
+  [class*='wa-flank'] {
+    display: flex;
+
+    --content-percentage: initial;
+    --flank-size: initial;
+  }
+
+  [class*='wa-flank']:not([class*='\:end']) > :first-child,
+  [class*='wa-flank'][class*='\:start'] > :first-child {
+    flex-basis: var(--flank-size, auto);
+    flex-grow: 1;
+  }
+  [class*='wa-flank']:not([class*='\:end']) > :last-child,
+  [class*='wa-flank'][class*='\:start'] > :last-child {
+    flex-basis: 0;
+    flex-grow: 999;
+    min-inline-size: var(--content-percentage, 50%);
+  }
+
+  [class*='wa-flank'][class*='\:end'] > :last-child {
+    flex-basis: var(--flank-size, auto);
+    flex-grow: 1;
+  }
+  [class*='wa-flank'][class*='\:end'] > :first-child {
+    flex-basis: 0;
+    flex-grow: 999;
+    min-inline-size: var(--content-percentage, 50%);
+  }
+
+  :where([class*='wa-flank']) {
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  /* #endregion */
+
+  /* #region Frame */
+  [class*='wa-frame'] {
+    display: flex;
+    aspect-ratio: 1 / 1;
+    overflow: hidden;
+  }
+
+  [class*='wa-frame'] > img,
+  [class*='wa-frame'] > video {
+    block-size: 100%;
+    inline-size: 100%;
+    object-fit: cover;
+  }
+
+  [class*='wa-frame'][class*='\:square'] {
+    aspect-ratio: 1 / 1;
+  }
+  [class*='wa-frame'][class*='\:landscape'] {
+    aspect-ratio: 16 / 9;
+  }
+  [class*='wa-frame'][class*='\:portrait'] {
+    aspect-ratio: 9 / 16;
+  }
+
+  :where([class*='wa-frame']) {
+    align-items: center;
+    justify-content: center;
+  }
+  /* #endregion */
+
+  /* #region Grid */
+  [class*='wa-grid'] {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(var(--min-column-size, 20ch), 100%), 1fr));
+
+    --min-column-size: initial;
+  }
+
+  .wa-span-grid {
+    grid-column: 1 / -1;
+  }
+  /* #endregion */
+
+  /* #region Split */
+  [class*='wa-split'] {
+    display: flex;
+  }
+
+  [class*='wa-split'],
+  [class*='wa-split'][class*='\:row'] {
+    flex-direction: row;
+    block-size: auto;
+    inline-size: 100%;
+  }
+
+  [class*='wa-split']:not([class*='\:column']) > :first-child {
+    flex: 0 1 auto;
+  }
+
+  [class*='wa-split'][class*='\:column'] {
+    flex-direction: column;
+    block-size: auto;
+    inline-size: auto;
+    align-self: stretch;
+  }
+
+  :where([class*='wa-split']) {
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
+
+  /* #endregion */
+
+  /* #region Stack */
+  [class*='wa-stack'] {
+    display: flex;
+    flex-direction: column;
+  }
+
+  :where([class*='wa-stack']) {
+    align-items: stretch;
+    justify-content: flex-start;
+  }
+  /* #endregion */
+}

package/dist/collection/assets/webawesome/styles/utilities/placeholder.css

@@ -0,0 +1,9 @@
+@layer wa-utilities {
+  .wa-placeholder {
+    align-self: stretch;
+    background-color: var(--wa-color-neutral-fill-quiet);
+    border: dashed var(--wa-border-width-s) var(--wa-color-neutral-border-normal);
+    border-radius: var(--wa-border-radius-l);
+    padding: var(--wa-space-3xl);
+  }
+}

package/dist/collection/assets/webawesome/styles/utilities/prose.css

@@ -0,0 +1,161 @@
+@layer wa-utilities {
+  /* `wa-prose` applies hierarchical, asymmetric typographic rhythm to a block
+     of long-form content. Builds on `wa-native`'s base block styles instead of
+     duplicating them. Em-based spacing scales when composed with `wa-font-size-*`.
+     The class and its element selectors are wrapped in `:where()` so every rule
+     sits at 0,0,0 specificity — any utility class or element rule the author
+     applies inside the container takes precedence without weight tricks. */
+
+  /* @scope is Newly Available in Baseline 2025. As such, it should be reserved for
+     non-essential, progressive enhancement features until @scope is established
+     as Widely Available. https://caniuse.com/css-cascade-scope */
+  @scope (.wa-prose) to (.wa-not-prose) {
+    :where(:scope) {
+      /* #region Tokens ~~~~~~~~~~~~ */
+
+      /* Em-based rhythm scale: each token resolves at the use site, so margins
+        scale with the element's own font-size. `--wa-prose-rhythm-scale` is a
+        single knob to tighten or loosen everything at once. */
+      --wa-prose-rhythm-scale: 1;
+      --wa-prose-rhythm-2xs: calc(0.25em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));
+      --wa-prose-rhythm-xs: calc(0.5em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));
+      --wa-prose-rhythm-s: calc(0.75em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));
+      --wa-prose-rhythm-m: calc(1em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));
+      --wa-prose-rhythm-l: calc(1.5em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));
+      --wa-prose-rhythm-xl: calc(2em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));
+      --wa-prose-rhythm-2xl: calc(2.5em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));
+      --wa-prose-rhythm-3xl: calc(3em * var(--wa-space-scale) * var(--wa-prose-rhythm-scale));
+
+      --wa-prose-line-length: 65ch;
+
+      max-inline-size: var(--wa-prose-line-length);
+
+      /* Oldstyle proportional figures for running text; tables reassert
+        `tabular-nums` below. Fonts without the OpenType feature fall back. */
+      font-variant-numeric: oldstyle-nums proportional-nums;
+
+      /* Inherits to descendants. Safari today; progressive enhancement elsewhere. */
+      hanging-punctuation: first last allow-end;
+      /* #endregion */
+
+      /* #region Headings ~~~~~~~~~~~~ */
+
+      /* Em sizes inherit through the cascade — re-applying `--wa-font-size-scale`
+        here would double-scale. Authors overriding should stay em-based. */
+      & :where(h1) {
+        font-size: 2.5625em;
+      }
+      & :where(h2) {
+        font-size: 2em;
+      }
+      & :where(h3) {
+        font-size: 1.5625em;
+      }
+      & :where(h4) {
+        font-size: 1.25em;
+      }
+      & :where(h5) {
+        font-size: 1em;
+      }
+      & :where(h6) {
+        font-size: 0.75em;
+      }
+
+      /* Slight optical tracking; only the larger sizes need it. */
+      & :where(h1, h2) {
+        letter-spacing: -0.01em;
+      }
+
+      /* Headings hug what they introduce: generous above, tight below. */
+      & :where(h1):has(+ *) {
+        margin-block-end: var(--wa-prose-rhythm-s);
+      }
+
+      & * + :where(h2) {
+        margin-block-start: var(--wa-prose-rhythm-2xl);
+      }
+      & :where(h2):has(+ *) {
+        margin-block-end: var(--wa-prose-rhythm-s);
+      }
+
+      & * + :where(h3) {
+        margin-block-start: var(--wa-prose-rhythm-xl);
+      }
+      & :where(h3):has(+ *) {
+        margin-block-end: var(--wa-prose-rhythm-s);
+      }
+
+      & :where(h4, h5, h6):has(+ *) {
+        margin-block-end: var(--wa-prose-rhythm-xs);
+      }
+
+      /* Back-to-back headings tighten so the second reads as subordinate.
+        Enumerated explicitly — skipping more than two levels is rare enough
+        that the default rhythm reads better. */
+      & :where(h1 + h2, h1 + h3, h2 + h3, h2 + h4, h3 + h4, h4 + h5, h5 + h6) {
+        margin-block-start: var(--wa-prose-rhythm-m);
+      }
+      /* #endregion */
+
+      /* #region Body text & lists ~~~~~~~~~~~~ */
+
+      /* Replaces wa-native's rem-based `--wa-content-spacing` with em rhythm. */
+      & :where(p, ul, ol, dl):has(+ *) {
+        margin-block-end: var(--wa-prose-rhythm-l);
+      }
+
+      & :where(ul, ol) > :where(li):has(+ li) {
+        margin-block-end: var(--wa-prose-rhythm-2xs);
+      }
+
+      & :where(dd):has(+ *) {
+        margin-block-end: var(--wa-prose-rhythm-s);
+      }
+      /* #endregion */
+
+      /* #region Captions ~~~~~~~~~~~~ */
+
+      /* Em-based override keeps caption spacing in step with the prose
+        container; wa-native sets the visual style. */
+      & :where(figcaption) {
+        margin-block-start: var(--wa-prose-rhythm-xs);
+      }
+      /* #endregion */
+
+      /* #region Inline code & long-word breaks ~~~~~~~~~~~~ */
+
+      /* `anywhere` is the right trade-off in prose: long URLs and identifiers
+        break instead of overflowing the column. */
+      & :where(code, pre) {
+        overflow-wrap: anywhere;
+      }
+      /* #endregion */
+
+      /* #region Section breaks & major non-text blocks ~~~~~~~~~~~~ */
+
+      /* `<hr>`'s own margin defines the gap; the next heading shouldn't double-stack. */
+      & :where(hr) {
+        margin-block: var(--wa-prose-rhythm-3xl);
+      }
+      & :where(hr + :is(h1, h2, h3, h4, h5, h6)) {
+        margin-block-start: 0;
+      }
+
+      /* Major non-text blocks get more air than running prose, but headings
+        still hug — so the top-margin rule excludes the heading-to-block case
+        (handled separately below with a smaller gap). */
+      & :where(pre, figure, table, blockquote, wa-callout, details):has(+ *) {
+        margin-block-end: var(--wa-prose-rhythm-xl);
+      }
+
+      & :where(:not(h1, h2, h3, h4, h5, h6) + :is(pre, figure, table, blockquote, wa-callout, details)) {
+        margin-block-start: var(--wa-prose-rhythm-xl);
+      }
+
+      & :where(:is(h1, h2, h3, h4, h5, h6) + :is(pre, figure, table, blockquote, wa-callout, details)) {
+        margin-block-start: var(--wa-prose-rhythm-m);
+      }
+      /* #endregion */
+    }
+  }
+}

package/dist/collection/assets/webawesome/styles/utilities/scroll-lock.css

@@ -0,0 +1,20 @@
+@layer wa-utilities {
+  /* These scroll lock helpers are put into this CSS file to avoid strict CSPs that affect style tag loading. */
+  @supports (scrollbar-gutter: stable) {
+    .wa-scroll-lock {
+      scrollbar-gutter: var(--wa-scroll-lock-gutter) !important;
+    }
+
+    .wa-scroll-lock body {
+      overflow: hidden !important;
+    }
+  }
+
+  /** This can go away once Safari has scrollbar-gutter support. */
+  @supports not (scrollbar-gutter: stable) {
+    .wa-scroll-lock body {
+      padding-right: var(--wa-scroll-lock-size) !important;
+      overflow: hidden !important;
+    }
+  }
+}

package/dist/collection/assets/webawesome/styles/utilities/size.css

@@ -0,0 +1,21 @@
+@layer wa-utilities {
+  .wa-size-xs {
+    font-size: var(--wa-font-size-xs);
+  }
+
+  .wa-size-s {
+    font-size: var(--wa-font-size-s);
+  }
+
+  .wa-size-m {
+    font-size: var(--wa-font-size-m);
+  }
+
+  .wa-size-l {
+    font-size: var(--wa-font-size-l);
+  }
+
+  .wa-size-xl {
+    font-size: var(--wa-font-size-xl);
+  }
+}