ogm-viewer 0.3.0 → 0.4.0

package/dist/ogm-viewer/assets/webawesome/styles/color/variants/warning.css

@@ -0,0 +1,162 @@
+@layer wa-color-variant {
+  :where(:root), /* default */
+  .wa-warning-yellow {
+    --wa-color-warning-95: var(--wa-color-yellow-95);
+    --wa-color-warning-90: var(--wa-color-yellow-90);
+    --wa-color-warning-80: var(--wa-color-yellow-80);
+    --wa-color-warning-70: var(--wa-color-yellow-70);
+    --wa-color-warning-60: var(--wa-color-yellow-60);
+    --wa-color-warning-50: var(--wa-color-yellow-50);
+    --wa-color-warning-40: var(--wa-color-yellow-40);
+    --wa-color-warning-30: var(--wa-color-yellow-30);
+    --wa-color-warning-20: var(--wa-color-yellow-20);
+    --wa-color-warning-10: var(--wa-color-yellow-10);
+    --wa-color-warning-05: var(--wa-color-yellow-05);
+    --wa-color-warning: var(--wa-color-yellow);
+    --wa-color-warning-on: var(--wa-color-yellow-on);
+  }
+
+  .wa-warning-red {
+    --wa-color-warning-95: var(--wa-color-red-95);
+    --wa-color-warning-90: var(--wa-color-red-90);
+    --wa-color-warning-80: var(--wa-color-red-80);
+    --wa-color-warning-70: var(--wa-color-red-70);
+    --wa-color-warning-60: var(--wa-color-red-60);
+    --wa-color-warning-50: var(--wa-color-red-50);
+    --wa-color-warning-40: var(--wa-color-red-40);
+    --wa-color-warning-30: var(--wa-color-red-30);
+    --wa-color-warning-20: var(--wa-color-red-20);
+    --wa-color-warning-10: var(--wa-color-red-10);
+    --wa-color-warning-05: var(--wa-color-red-05);
+    --wa-color-warning: var(--wa-color-red);
+    --wa-color-warning-on: var(--wa-color-red-on);
+  }
+
+  .wa-warning-orange {
+    --wa-color-warning-95: var(--wa-color-orange-95);
+    --wa-color-warning-90: var(--wa-color-orange-90);
+    --wa-color-warning-80: var(--wa-color-orange-80);
+    --wa-color-warning-70: var(--wa-color-orange-70);
+    --wa-color-warning-60: var(--wa-color-orange-60);
+    --wa-color-warning-50: var(--wa-color-orange-50);
+    --wa-color-warning-40: var(--wa-color-orange-40);
+    --wa-color-warning-30: var(--wa-color-orange-30);
+    --wa-color-warning-20: var(--wa-color-orange-20);
+    --wa-color-warning-10: var(--wa-color-orange-10);
+    --wa-color-warning-05: var(--wa-color-orange-05);
+    --wa-color-warning: var(--wa-color-orange);
+    --wa-color-warning-on: var(--wa-color-orange-on);
+  }
+
+  .wa-warning-green {
+    --wa-color-warning-95: var(--wa-color-green-95);
+    --wa-color-warning-90: var(--wa-color-green-90);
+    --wa-color-warning-80: var(--wa-color-green-80);
+    --wa-color-warning-70: var(--wa-color-green-70);
+    --wa-color-warning-60: var(--wa-color-green-60);
+    --wa-color-warning-50: var(--wa-color-green-50);
+    --wa-color-warning-40: var(--wa-color-green-40);
+    --wa-color-warning-30: var(--wa-color-green-30);
+    --wa-color-warning-20: var(--wa-color-green-20);
+    --wa-color-warning-10: var(--wa-color-green-10);
+    --wa-color-warning-05: var(--wa-color-green-05);
+    --wa-color-warning: var(--wa-color-green);
+    --wa-color-warning-on: var(--wa-color-green-on);
+  }
+
+  .wa-warning-cyan {
+    --wa-color-warning-95: var(--wa-color-cyan-95);
+    --wa-color-warning-90: var(--wa-color-cyan-90);
+    --wa-color-warning-80: var(--wa-color-cyan-80);
+    --wa-color-warning-70: var(--wa-color-cyan-70);
+    --wa-color-warning-60: var(--wa-color-cyan-60);
+    --wa-color-warning-50: var(--wa-color-cyan-50);
+    --wa-color-warning-40: var(--wa-color-cyan-40);
+    --wa-color-warning-30: var(--wa-color-cyan-30);
+    --wa-color-warning-20: var(--wa-color-cyan-20);
+    --wa-color-warning-10: var(--wa-color-cyan-10);
+    --wa-color-warning-05: var(--wa-color-cyan-05);
+    --wa-color-warning: var(--wa-color-cyan);
+    --wa-color-warning-on: var(--wa-color-cyan-on);
+  }
+
+  .wa-warning-blue {
+    --wa-color-warning-95: var(--wa-color-blue-95);
+    --wa-color-warning-90: var(--wa-color-blue-90);
+    --wa-color-warning-80: var(--wa-color-blue-80);
+    --wa-color-warning-70: var(--wa-color-blue-70);
+    --wa-color-warning-60: var(--wa-color-blue-60);
+    --wa-color-warning-50: var(--wa-color-blue-50);
+    --wa-color-warning-40: var(--wa-color-blue-40);
+    --wa-color-warning-30: var(--wa-color-blue-30);
+    --wa-color-warning-20: var(--wa-color-blue-20);
+    --wa-color-warning-10: var(--wa-color-blue-10);
+    --wa-color-warning-05: var(--wa-color-blue-05);
+    --wa-color-warning: var(--wa-color-blue);
+    --wa-color-warning-on: var(--wa-color-blue-on);
+  }
+
+  .wa-warning-indigo {
+    --wa-color-warning-95: var(--wa-color-indigo-95);
+    --wa-color-warning-90: var(--wa-color-indigo-90);
+    --wa-color-warning-80: var(--wa-color-indigo-80);
+    --wa-color-warning-70: var(--wa-color-indigo-70);
+    --wa-color-warning-60: var(--wa-color-indigo-60);
+    --wa-color-warning-50: var(--wa-color-indigo-50);
+    --wa-color-warning-40: var(--wa-color-indigo-40);
+    --wa-color-warning-30: var(--wa-color-indigo-30);
+    --wa-color-warning-20: var(--wa-color-indigo-20);
+    --wa-color-warning-10: var(--wa-color-indigo-10);
+    --wa-color-warning-05: var(--wa-color-indigo-05);
+    --wa-color-warning: var(--wa-color-indigo);
+    --wa-color-warning-on: var(--wa-color-indigo-on);
+  }
+
+  .wa-warning-purple {
+    --wa-color-warning-95: var(--wa-color-purple-95);
+    --wa-color-warning-90: var(--wa-color-purple-90);
+    --wa-color-warning-80: var(--wa-color-purple-80);
+    --wa-color-warning-70: var(--wa-color-purple-70);
+    --wa-color-warning-60: var(--wa-color-purple-60);
+    --wa-color-warning-50: var(--wa-color-purple-50);
+    --wa-color-warning-40: var(--wa-color-purple-40);
+    --wa-color-warning-30: var(--wa-color-purple-30);
+    --wa-color-warning-20: var(--wa-color-purple-20);
+    --wa-color-warning-10: var(--wa-color-purple-10);
+    --wa-color-warning-05: var(--wa-color-purple-05);
+    --wa-color-warning: var(--wa-color-purple);
+    --wa-color-warning-on: var(--wa-color-purple-on);
+  }
+
+  .wa-warning-pink {
+    --wa-color-warning-95: var(--wa-color-pink-95);
+    --wa-color-warning-90: var(--wa-color-pink-90);
+    --wa-color-warning-80: var(--wa-color-pink-80);
+    --wa-color-warning-70: var(--wa-color-pink-70);
+    --wa-color-warning-60: var(--wa-color-pink-60);
+    --wa-color-warning-50: var(--wa-color-pink-50);
+    --wa-color-warning-40: var(--wa-color-pink-40);
+    --wa-color-warning-30: var(--wa-color-pink-30);
+    --wa-color-warning-20: var(--wa-color-pink-20);
+    --wa-color-warning-10: var(--wa-color-pink-10);
+    --wa-color-warning-05: var(--wa-color-pink-05);
+    --wa-color-warning: var(--wa-color-pink);
+    --wa-color-warning-on: var(--wa-color-pink-on);
+  }
+
+  .wa-warning-gray {
+    --wa-color-warning-95: var(--wa-color-gray-95);
+    --wa-color-warning-90: var(--wa-color-gray-90);
+    --wa-color-warning-80: var(--wa-color-gray-80);
+    --wa-color-warning-70: var(--wa-color-gray-70);
+    --wa-color-warning-60: var(--wa-color-gray-60);
+    --wa-color-warning-50: var(--wa-color-gray-50);
+    --wa-color-warning-40: var(--wa-color-gray-40);
+    --wa-color-warning-30: var(--wa-color-gray-30);
+    --wa-color-warning-20: var(--wa-color-gray-20);
+    --wa-color-warning-10: var(--wa-color-gray-10);
+    --wa-color-warning-05: var(--wa-color-gray-05);
+    --wa-color-warning: var(--wa-color-gray);
+    --wa-color-warning-on: var(--wa-color-gray-on);
+  }
+}

package/dist/ogm-viewer/assets/webawesome/styles/color/variants.css

@@ -0,0 +1,5 @@
+@import url('variants/brand.css');
+@import url('variants/neutral.css');
+@import url('variants/success.css');
+@import url('variants/warning.css');
+@import url('variants/danger.css');

package/dist/ogm-viewer/assets/webawesome/styles/component/form-control.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/ogm-viewer/assets/webawesome/styles/component/form-control.styles.ts

@@ -0,0 +1,43 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* Treat wrapped labels, inputs, and hints as direct children of the host element */
+  [part~='form-control'] {
+    display: contents;
+  }
+
+  /* Label */
+  :is([part~='form-control-label'], [part~='label']):has(*:not(:empty)),
+  :is([part~='form-control-label'], [part~='label']).has-label {
+    display: inline-flex;
+    color: var(--wa-form-control-label-color);
+    font-weight: var(--wa-form-control-label-font-weight);
+    line-height: var(--wa-form-control-label-line-height);
+    margin-block-end: 0.5em;
+  }
+
+  :host([required]) :is([part~='form-control-label'], [part~='label'])::after {
+    content: var(--wa-form-control-required-content);
+    margin-inline-start: var(--wa-form-control-required-content-offset);
+    color: var(--wa-form-control-required-content-color);
+  }
+
+  /* Help text */
+  [part~='hint'] {
+    display: block;
+    color: var(--wa-form-control-hint-color);
+    font-weight: var(--wa-form-control-hint-font-weight);
+    line-height: var(--wa-form-control-hint-line-height);
+    margin-block-start: 0.5em;
+    font-size: var(--wa-font-size-smaller);
+
+    &:not(.has-slotted, .has-hint) {
+      display: none;
+    }
+  }
+`;

package/dist/ogm-viewer/assets/webawesome/styles/component/host.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/ogm-viewer/assets/webawesome/styles/component/host.styles.ts

@@ -0,0 +1,18 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    box-sizing: border-box;
+  }
+
+  :host *,
+  :host *::before,
+  :host *::after {
+    box-sizing: inherit;
+  }
+
+  [hidden],
+  :host([hidden]) {
+    display: none !important;
+  }
+`;

package/dist/ogm-viewer/assets/webawesome/styles/component/segmented-field.styles.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Shared trailing-affordance styling for segmented-field pickers (`<wa-date-input>`,
+ * `<wa-time-input>`). Keeps their clear and expand buttons — and their start/end decoration
+ * slots — on the same trailing optical axis as `<wa-select>`'s chevron and end-slot icons,
+ * while preserving each button's padded hit target and focus ring.
+ *
+ * How the alignment works:
+ *  - Each button keeps `0.25em` padding (hit area + focus-ring breathing room).
+ *  - `margin-inline-end: -0.25em` lets that trailing padding overhang the trailing content
+ *    edge instead of pushing the glyph inboard.
+ *  - Each button is given a fixed `inline-size` equal to its natural width (glyph + 2×padding):
+ *    `1.75em` for the expand glyph (1.25em) and `1.5em` for the clear glyph (1em). Because the
+ *    width is fixed and the glyph is centered, a custom-slotted icon of any width stays centered
+ *    on the axis — the alignment is glyph-agnostic, not tuned to one icon.
+ *  - The expand button's `margin-inline-start` sets the gap that positions the clear button onto
+ *    `<wa-select>`'s clear axis given those fixed widths.
+ */
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/ogm-viewer/assets/webawesome/styles/component/segmented-field.styles.ts

@@ -0,0 +1,92 @@
+import { css } from 'lit';
+
+/**
+ * Shared trailing-affordance styling for segmented-field pickers (`<wa-date-input>`,
+ * `<wa-time-input>`). Keeps their clear and expand buttons — and their start/end decoration
+ * slots — on the same trailing optical axis as `<wa-select>`'s chevron and end-slot icons,
+ * while preserving each button's padded hit target and focus ring.
+ *
+ * How the alignment works:
+ *  - Each button keeps `0.25em` padding (hit area + focus-ring breathing room).
+ *  - `margin-inline-end: -0.25em` lets that trailing padding overhang the trailing content
+ *    edge instead of pushing the glyph inboard.
+ *  - Each button is given a fixed `inline-size` equal to its natural width (glyph + 2×padding):
+ *    `1.75em` for the expand glyph (1.25em) and `1.5em` for the clear glyph (1em). Because the
+ *    width is fixed and the glyph is centered, a custom-slotted icon of any width stays centered
+ *    on the axis — the alignment is glyph-agnostic, not tuned to one icon.
+ *  - The expand button's `margin-inline-start` sets the gap that positions the clear button onto
+ *    `<wa-select>`'s clear axis given those fixed widths.
+ */
+export default css`
+  /* font: inherit lifts the UA default button font-size so children that size with em
+     (e.g. the expand icon) resolve against the host size-driven font-size instead of ~13px. */
+  [part~='clear-button'],
+  [part~='expand-button'] {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    color: var(--wa-color-text-quiet);
+    font: inherit;
+    padding: 0.25em;
+    /* Trailing padding overhangs the content edge rather than displacing the glyph. */
+    margin-inline-end: -0.25em;
+    border-radius: var(--wa-border-radius-s);
+    transition: color var(--wa-transition-fast);
+  }
+
+  /* Fixed widths (= glyph + 2×0.25em padding) keep each glyph centered on the trailing axis
+     regardless of the slotted icon's intrinsic width. */
+  [part~='expand-button'] {
+    inline-size: 1.75em;
+    /* Leading gap that lands the clear button on <wa-select>'s clear axis. Scales with the
+       form-control padding token (like select's own spacing) so it holds across themes; the
+       0.125em offset accounts for the fixed button widths. */
+    margin-inline-start: calc(var(--wa-form-control-padding-inline) - 0.125em);
+  }
+
+  [part~='clear-button'] {
+    inline-size: 1.5em;
+    margin-inline-start: var(--wa-form-control-padding-inline);
+  }
+
+  [part~='clear-button']:hover,
+  [part~='expand-button']:hover {
+    color: var(--wa-color-text-loud);
+  }
+
+  [part~='expand-button']:focus-visible {
+    outline: var(--wa-focus-ring-style) var(--wa-focus-ring-width) var(--wa-color-focus);
+    outline-offset: 2px;
+  }
+
+  /* font-size scales the glyph with the host size attribute; the button width handles centering. */
+  [part~='expand-icon'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--wa-color-text-quiet);
+    font-size: 1.25em;
+  }
+
+  /* Start / end decoration slots. Spaced with the same --wa-form-control-padding-inline gap as
+     <wa-input>/<wa-select> so slotted icons line up with the rest of the form controls, rather
+     than the tighter 0.25em the pickers used before. */
+  [part~='start'],
+  [part~='end'] {
+    display: inline-flex;
+    align-items: center;
+    color: var(--wa-color-text-quiet);
+  }
+
+  [part~='start']::slotted(*) {
+    margin-inline-end: var(--wa-form-control-padding-inline);
+  }
+
+  [part~='end']::slotted(*) {
+    margin-inline-start: var(--wa-form-control-padding-inline);
+  }
+`;

package/dist/ogm-viewer/assets/webawesome/styles/component/size.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/ogm-viewer/assets/webawesome/styles/component/size.styles.ts

@@ -0,0 +1,26 @@
+import { css } from 'lit';
+
+export default css`
+  :host([size='xs']) {
+    font-size: var(--wa-font-size-xs);
+  }
+
+  :host([size='s']),
+  :host([size='small']) {
+    font-size: var(--wa-font-size-s);
+  }
+
+  :host([size='m']),
+  :host([size='medium']) {
+    font-size: var(--wa-font-size-m);
+  }
+
+  :host([size='l']),
+  :host([size='large']) {
+    font-size: var(--wa-font-size-l);
+  }
+
+  :host([size='xl']) {
+    font-size: var(--wa-font-size-xl);
+  }
+`;

package/dist/ogm-viewer/assets/webawesome/styles/component/variants.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/ogm-viewer/assets/webawesome/styles/component/variants.styles.ts

@@ -0,0 +1,69 @@
+import { css } from 'lit';
+
+export default css`
+  :where(:root),
+  .wa-neutral,
+  :host([variant='neutral']) {
+    --wa-color-fill-loud: var(--wa-color-neutral-fill-loud);
+    --wa-color-fill-normal: var(--wa-color-neutral-fill-normal);
+    --wa-color-fill-quiet: var(--wa-color-neutral-fill-quiet);
+    --wa-color-border-loud: var(--wa-color-neutral-border-loud);
+    --wa-color-border-normal: var(--wa-color-neutral-border-normal);
+    --wa-color-border-quiet: var(--wa-color-neutral-border-quiet);
+    --wa-color-on-loud: var(--wa-color-neutral-on-loud);
+    --wa-color-on-normal: var(--wa-color-neutral-on-normal);
+    --wa-color-on-quiet: var(--wa-color-neutral-on-quiet);
+  }
+
+  .wa-brand,
+  :host([variant='brand']) {
+    --wa-color-fill-loud: var(--wa-color-brand-fill-loud);
+    --wa-color-fill-normal: var(--wa-color-brand-fill-normal);
+    --wa-color-fill-quiet: var(--wa-color-brand-fill-quiet);
+    --wa-color-border-loud: var(--wa-color-brand-border-loud);
+    --wa-color-border-normal: var(--wa-color-brand-border-normal);
+    --wa-color-border-quiet: var(--wa-color-brand-border-quiet);
+    --wa-color-on-loud: var(--wa-color-brand-on-loud);
+    --wa-color-on-normal: var(--wa-color-brand-on-normal);
+    --wa-color-on-quiet: var(--wa-color-brand-on-quiet);
+  }
+
+  .wa-success,
+  :host([variant='success']) {
+    --wa-color-fill-loud: var(--wa-color-success-fill-loud);
+    --wa-color-fill-normal: var(--wa-color-success-fill-normal);
+    --wa-color-fill-quiet: var(--wa-color-success-fill-quiet);
+    --wa-color-border-loud: var(--wa-color-success-border-loud);
+    --wa-color-border-normal: var(--wa-color-success-border-normal);
+    --wa-color-border-quiet: var(--wa-color-success-border-quiet);
+    --wa-color-on-loud: var(--wa-color-success-on-loud);
+    --wa-color-on-normal: var(--wa-color-success-on-normal);
+    --wa-color-on-quiet: var(--wa-color-success-on-quiet);
+  }
+
+  .wa-warning,
+  :host([variant='warning']) {
+    --wa-color-fill-loud: var(--wa-color-warning-fill-loud);
+    --wa-color-fill-normal: var(--wa-color-warning-fill-normal);
+    --wa-color-fill-quiet: var(--wa-color-warning-fill-quiet);
+    --wa-color-border-loud: var(--wa-color-warning-border-loud);
+    --wa-color-border-normal: var(--wa-color-warning-border-normal);
+    --wa-color-border-quiet: var(--wa-color-warning-border-quiet);
+    --wa-color-on-loud: var(--wa-color-warning-on-loud);
+    --wa-color-on-normal: var(--wa-color-warning-on-normal);
+    --wa-color-on-quiet: var(--wa-color-warning-on-quiet);
+  }
+
+  .wa-danger,
+  :host([variant='danger']) {
+    --wa-color-fill-loud: var(--wa-color-danger-fill-loud);
+    --wa-color-fill-normal: var(--wa-color-danger-fill-normal);
+    --wa-color-fill-quiet: var(--wa-color-danger-fill-quiet);
+    --wa-color-border-loud: var(--wa-color-danger-border-loud);
+    --wa-color-border-normal: var(--wa-color-danger-border-normal);
+    --wa-color-border-quiet: var(--wa-color-danger-border-quiet);
+    --wa-color-on-loud: var(--wa-color-danger-on-loud);
+    --wa-color-on-normal: var(--wa-color-danger-on-normal);
+    --wa-color-on-quiet: var(--wa-color-danger-on-quiet);
+  }
+`;

package/dist/ogm-viewer/assets/webawesome/styles/component/visually-hidden.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/ogm-viewer/assets/webawesome/styles/component/visually-hidden.styles.ts

@@ -0,0 +1,19 @@
+import { css } from 'lit';
+
+export default css`
+  .wa-visually-hidden:not(:focus-within),
+  .wa-visually-hidden-force,
+  .wa-visually-hidden-hint::part(hint),
+  .wa-visually-hidden-label::part(label),
+  .wa-visually-hidden-label::part(form-control-label) {
+    position: absolute !important;
+    width: 1px !important;
+    height: 1px !important;
+    clip: rect(0 0 0 0) !important;
+    clip-path: inset(50%) !important;
+    border: none !important;
+    overflow: hidden !important;
+    white-space: nowrap !important;
+    padding: 0 !important;
+  }
+`;

package/dist/ogm-viewer/assets/webawesome/styles/layers.css

@@ -0,0 +1,21 @@
+/* Order of precedence for all cascade layers in Web Awesome */
+@layer wa-native, wa-base, wa-utilities, wa-color-palette, wa-color-variant, wa-theme, wa-theme-dimension, wa-theme-overrides;
+
+@layer wa-base {
+  /**
+    Because headers are sticky, this is needed to make sure page fragment anchors scroll down past the headers / subheaders and are visible.
+    IE: \`<a href="#id-for-h2">\` anchors.
+    */
+  wa-page :is(*, *:after, *:before) {
+    scroll-margin-top: var(--scroll-margin-top);
+  }
+
+  wa-page[view='desktop'] [data-toggle-nav] {
+    display: none;
+  }
+
+  wa-page[view='mobile'] .wa-desktop-only,
+  wa-page[view='desktop'] .wa-mobile-only {
+    display: none !important;
+  }
+}