@bauer-group/accessibility-widget 1.0.3

package/src/styles/widget.css

@@ -0,0 +1,739 @@
+/*!
+ * BAUER GROUP Accessibility Widget — Panel CSS (loaded on-demand)
+ * SPDX-License-Identifier: AGPL-3.0-only · © 2026 BAUER GROUP
+ * AGPL-3.0-only or commercial (info@bauer-group.com) — see LICENSE / LICENSING.md
+ */
+
+.aw-panel {
+  position: fixed;
+  z-index: 2147483647;
+  width: 420px;
+  max-width: 95vw;
+  max-height: 85vh;
+  overflow-y: auto;
+  /* `overflow-y: auto` silently forces `overflow-x: auto` — which would
+     expose a horizontal scrollbar the moment any tooltip peeks over the
+     right edge, causing the widget to "jump" as the scrollbar appears.
+     `hidden` blocks horizontal scroll while keeping vertical intact. */
+  overflow-x: hidden;
+  background: #fff;
+  color: #111;
+  border-radius: 12px;
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
+  font:
+    16px / 1.5 -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    sans-serif;
+  padding: 16px 20px 20px;
+}
+.aw-panel--bottom-right {
+  bottom: 80px;
+  right: 20px;
+}
+.aw-panel--bottom-left {
+  bottom: 80px;
+  left: 20px;
+}
+.aw-panel--top-right {
+  top: 80px;
+  right: 20px;
+}
+.aw-panel--top-left {
+  top: 80px;
+  left: 20px;
+}
+
+.aw-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  border-bottom: 1px solid #e0e0e0;
+  padding-bottom: 12px;
+  cursor: grab;
+  touch-action: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.aw-header.is-dragging {
+  cursor: grabbing;
+}
+.aw-drag-grip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #888;
+  margin-inline-end: 8px;
+  flex: 0 0 auto;
+}
+@media (pointer: coarse) {
+  /* Touch devices: show the grip but don't enable pointer drag on narrow viewports.
+     Panel position on mobile is controlled by CSS preset + safe-area insets. */
+  .aw-drag-grip {
+    opacity: 0.5;
+  }
+}
+.aw-title {
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin: 0;
+  color: #0058a3;
+}
+.aw-close {
+  background: transparent;
+  border: 2px solid transparent;
+  cursor: pointer;
+  color: #444;
+  padding: 4px;
+  border-radius: 4px;
+}
+.aw-close:hover,
+.aw-close:focus-visible {
+  background: #f0f0f0;
+  outline: 2px solid #0058a3;
+}
+.aw-close svg {
+  width: 20px;
+  height: 20px;
+}
+
+.aw-toolbar {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+  align-items: stretch;
+}
+.aw-tool {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border-radius: 8px;
+  border: 2px solid #d1e0ee;
+  background: #f7f9fc;
+  color: #0058a3;
+  font: inherit;
+  font-size: 0.85rem;
+  cursor: pointer;
+}
+.aw-tool:hover,
+.aw-tool:focus-within,
+.aw-tool:focus-visible {
+  border-color: #0058a3;
+  outline: 3px solid #ff6a00;
+  outline-offset: 1px;
+}
+.aw-tool--lang {
+  flex: 1 1 auto;
+}
+.aw-tool--lang select.aw-lang {
+  background: transparent;
+  border: 0;
+  color: inherit;
+  font: inherit;
+  padding: 2px 0;
+  width: 100%;
+  cursor: pointer;
+}
+.aw-tool--lang select.aw-lang:focus {
+  outline: none;
+}
+.aw-tool--oversize.is-on {
+  background: #0058a3;
+  color: #fff;
+  border-color: #003c73;
+}
+
+.aw-panel--xl {
+  width: 520px;
+  font-size: 1.08rem;
+}
+.aw-panel--xl .aw-feat-grid {
+  grid-auto-rows: 160px;
+}
+.aw-panel--xl .aw-feat {
+  padding: 14px 10px 12px;
+}
+.aw-panel--xl .aw-feat-icon svg {
+  width: 34px;
+  height: 34px;
+}
+.aw-panel--xl .aw-feat-label {
+  font-size: 0.95rem;
+}
+.aw-panel--xl .aw-profile-btn {
+  padding: 14px 10px;
+  font-size: 1rem;
+}
+
+.aw-section {
+  margin-bottom: 16px;
+}
+.aw-h3 {
+  font-size: 0.95rem;
+  font-weight: 600;
+  margin: 0 0 8px;
+  color: #333;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+
+.aw-profile-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+.aw-profile-btn {
+  background: #f7f9fc;
+  color: #0058a3;
+  border: 2px solid #d1e0ee;
+  padding: 10px 8px;
+  border-radius: 8px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+  text-align: center;
+  transition:
+    background 0.15s,
+    border-color 0.15s;
+}
+.aw-profile-btn:hover,
+.aw-profile-btn:focus-visible {
+  background: #e5efff;
+  border-color: #0058a3;
+  outline: 3px solid #ff6a00;
+  outline-offset: 1px;
+}
+
+.aw-feat-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  /* Every row is locked to the same height so cards look identical
+     regardless of label length / language. 136px fits 3-line labels plus
+     icon, stage-dots and status badge across every supported translation. */
+  grid-auto-rows: 136px;
+  gap: 8px;
+}
+.aw-feat {
+  position: relative;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  justify-items: center;
+  align-items: center;
+  gap: 4px;
+  background: #fff;
+  border: 2px solid #e0e0e0;
+  border-radius: 10px;
+  padding: 12px 8px 10px;
+  cursor: pointer;
+  font: inherit;
+  text-align: center;
+  color: #111;
+  overflow: hidden;
+  transition:
+    border-color 0.15s,
+    background 0.15s;
+}
+.aw-feat:hover,
+.aw-feat:focus-visible {
+  background: #eaf1f9;
+  outline: 3px solid #ff6a00;
+  outline-offset: 1px;
+}
+.aw-feat.is-on {
+  background: #eef5ff;
+  border-color: #0058a3;
+  color: #002c57;
+}
+.aw-feat-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  color: #0058a3;
+}
+.aw-feat.is-on .aw-feat-icon {
+  color: #003c73;
+}
+.aw-feat-label {
+  font-size: 0.85rem;
+  font-weight: 600;
+  line-height: 1.2;
+  overflow-wrap: anywhere;
+}
+.aw-feat-badge {
+  display: inline-block;
+  min-width: 28px;
+  padding: 1px 7px;
+  background: #e9eff7;
+  color: #0058a3;
+  border-radius: 999px;
+  font-size: 0.72rem;
+  font-weight: 700;
+  text-align: center;
+  line-height: 1.4;
+}
+.aw-stage-dots {
+  display: inline-flex;
+  gap: 3px;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  margin: 2px 0 1px;
+}
+.aw-stage-dot {
+  flex: 1 1 0;
+  max-width: 18px;
+  height: 4px;
+  border-radius: 2px;
+  background: #d1e0ee;
+  transition: background 0.15s;
+}
+.aw-stage-dot.is-filled {
+  background: #0058a3;
+}
+.aw-feat.is-on .aw-stage-dot {
+  background: #b6cce5;
+}
+.aw-feat.is-on .aw-stage-dot.is-filled {
+  background: #003c73;
+}
+.aw-feat.is-on .aw-feat-badge {
+  background: #0058a3;
+  color: #fff;
+}
+.aw-feat-check {
+  position: absolute;
+  top: 6px;
+  inset-inline-end: 6px;
+  width: 20px;
+  height: 20px;
+  display: none;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: #0058a3;
+  color: #fff;
+}
+.aw-feat.is-on .aw-feat-check {
+  display: inline-flex;
+}
+.aw-feat-info {
+  position: absolute;
+  top: 6px;
+  inset-inline-start: 6px;
+  width: 18px;
+  height: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  color: #6b8aac;
+  background: #eef2f7;
+}
+.aw-feat.is-on .aw-feat-info {
+  color: #0058a3;
+  background: #fff;
+}
+
+.aw-feat-wrap {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+.aw-feat-wrap > .aw-feat {
+  width: 100%;
+}
+.aw-feat-tooltip {
+  position: absolute;
+  top: calc(100% + 6px);
+  /* Default: centered on card (middle column in 3-col layout). Left/right
+     columns get their tooltip pinned to the corresponding edge via the
+     nth-child rules below, so the overlay never escapes the panel. */
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
+  display: none;
+  width: max-content;
+  min-width: 180px;
+  max-width: 260px;
+  padding: 8px 12px;
+  background: #111;
+  color: #fff;
+  font-size: 0.78rem;
+  font-weight: 400;
+  line-height: 1.4;
+  text-align: center;
+  border-radius: 6px;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
+  pointer-events: none;
+  overflow-wrap: anywhere;
+  word-wrap: break-word;
+  white-space: normal;
+}
+.aw-feat-wrap:hover > .aw-feat-tooltip,
+.aw-feat-wrap:focus-within > .aw-feat-tooltip {
+  display: block;
+}
+/* 3-column grid: left-column tiles anchor their tooltip to the card's
+   left edge, right-column tiles to the right edge. Middle column keeps
+   the default centered position. Without these rules, edge tooltips slid
+   past the panel boundary and triggered a horizontal scroll. */
+.aw-feat-grid > .aw-feat-wrap:nth-child(3n + 1) > .aw-feat-tooltip {
+  left: 0;
+  right: auto;
+  transform: none;
+}
+.aw-feat-grid > .aw-feat-wrap:nth-child(3n) > .aw-feat-tooltip {
+  left: auto;
+  right: 0;
+  transform: none;
+}
+@media (max-width: 380px) {
+  /* 2-column fallback: odd columns anchor-left, even anchor-right. */
+  .aw-feat-grid > .aw-feat-wrap:nth-child(odd) > .aw-feat-tooltip {
+    left: 0;
+    right: auto;
+    transform: none;
+  }
+  .aw-feat-grid > .aw-feat-wrap:nth-child(even) > .aw-feat-tooltip {
+    left: auto;
+    right: 0;
+    transform: none;
+  }
+}
+
+.aw-summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  list-style: none;
+  padding: 4px 0;
+  margin-bottom: 4px;
+}
+.aw-summary::-webkit-details-marker {
+  display: none;
+}
+.aw-summary svg {
+  transition: transform 0.15s;
+}
+.aw-collapsible[open] .aw-summary svg {
+  transform: rotate(180deg);
+}
+.aw-collapsible:not([open]) .aw-h3 {
+  margin-bottom: 0;
+}
+
+@media (max-width: 380px) {
+  .aw-feat-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.aw-footer {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid #e0e0e0;
+}
+.aw-reset {
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  background: #fff;
+  color: #c00;
+  border: 2px solid #c00;
+  padding: 10px;
+  border-radius: 8px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.aw-reset svg {
+  flex: 0 0 auto;
+}
+.aw-reset:hover,
+.aw-reset:focus-visible {
+  background: #c00;
+  color: #fff;
+  outline: 3px solid #ff6a00;
+}
+.aw-statement-link {
+  display: block;
+  margin-top: 10px;
+  text-align: center;
+  color: #0058a3;
+  text-decoration: underline;
+  font-size: 0.85rem;
+}
+.aw-disclaimer {
+  font-size: 0.75rem;
+  color: #666;
+  margin: 12px 0 0;
+  line-height: 1.4;
+}
+.aw-poweredby {
+  font-size: 10px;
+  font-weight: 400;
+  color: #888;
+  margin: 10px 0 0;
+  text-align: center;
+  line-height: 1.3;
+  letter-spacing: 0.01em;
+}
+.aw-poweredby a {
+  color: inherit;
+  text-decoration: underline;
+  text-decoration-color: #bbb;
+  text-underline-offset: 2px;
+}
+.aw-poweredby a:hover,
+.aw-poweredby a:focus-visible {
+  color: #0058a3;
+  text-decoration-color: currentColor;
+}
+.aw-live {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.aw-reading-mask {
+  --aw-mask-y: 50vh;
+  position: fixed;
+  inset: 0;
+  z-index: 2147483645;
+  pointer-events: none;
+  background: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0.75) 0,
+    rgba(0, 0, 0, 0.75) calc(var(--aw-mask-y) - 100px),
+    rgba(0, 0, 0, 0) calc(var(--aw-mask-y) - 80px),
+    rgba(0, 0, 0, 0) calc(var(--aw-mask-y) + 80px),
+    rgba(0, 0, 0, 0.75) calc(var(--aw-mask-y) + 100px),
+    rgba(0, 0, 0, 0.75) 100%
+  );
+}
+
+.aw-reading-guide {
+  position: fixed;
+  left: 0;
+  width: 100%;
+  height: 32px;
+  background: rgba(255, 235, 59, 0.35);
+  border-top: 2px solid rgba(255, 165, 0, 0.8);
+  border-bottom: 2px solid rgba(255, 165, 0, 0.8);
+  pointer-events: none;
+  z-index: 2147483644;
+}
+
+#aw-struct-nav {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 2147483647;
+  width: 320px;
+  max-height: 70vh;
+  overflow-y: auto;
+  background: #fff;
+  color: #111;
+  border-radius: 12px;
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
+  padding: 12px 16px;
+  font:
+    15px / 1.4 -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    sans-serif;
+}
+#aw-struct-nav .aw-struct-nav__close {
+  position: absolute;
+  top: 8px;
+  right: 10px;
+  background: transparent;
+  border: 0;
+  font-size: 22px;
+  cursor: pointer;
+  color: #666;
+}
+#aw-struct-nav ul {
+  list-style: none;
+  padding: 0;
+  margin: 8px 0 0;
+}
+#aw-struct-nav li {
+  margin: 0;
+}
+#aw-struct-nav li[data-level='2'] a {
+  padding-left: 16px;
+}
+#aw-struct-nav li[data-level='3'] a {
+  padding-left: 32px;
+}
+#aw-struct-nav a {
+  display: block;
+  padding: 6px 8px;
+  color: #0058a3;
+  text-decoration: none;
+  border-radius: 4px;
+}
+#aw-struct-nav a:hover,
+#aw-struct-nav a:focus-visible {
+  background: #eaf1f9;
+  outline: 2px solid #0058a3;
+}
+
+@media (max-width: 520px) {
+  .aw-panel {
+    width: calc(100vw - 40px);
+    bottom: 80px;
+    left: 20px;
+    right: 20px;
+  }
+  .aw-panel--top-right,
+  .aw-panel--top-left {
+    top: 20px;
+    bottom: auto;
+  }
+}
+
+[dir='rtl'] .aw-panel--bottom-right,
+[dir='rtl'] .aw-panel--top-right {
+  right: auto;
+  left: 20px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .aw-panel {
+    background: #1b1b1b;
+    color: #eee;
+  }
+  .aw-title {
+    color: #6ea8e6;
+  }
+  .aw-h3 {
+    color: #bbb;
+  }
+  .aw-profile-btn {
+    background: #2a2a2a;
+    color: #6ea8e6;
+    border-color: #3b3b3b;
+  }
+  .aw-profile-btn:hover {
+    background: #333;
+  }
+  .aw-feat {
+    background: #222;
+    color: #eee;
+    border-color: #3b3b3b;
+  }
+  .aw-feat:hover {
+    background: #2c2c2c;
+  }
+  .aw-feat.is-on {
+    background: #0f2d4c;
+    border-color: #0a66c2;
+    color: #fff;
+  }
+  .aw-feat-icon {
+    color: #6ea8e6;
+  }
+  .aw-feat.is-on .aw-feat-icon {
+    color: #cfe1f7;
+  }
+  .aw-feat-badge {
+    background: #3b3b3b;
+    color: #6ea8e6;
+  }
+  .aw-feat.is-on .aw-feat-badge {
+    background: #0a66c2;
+    color: #fff;
+  }
+  .aw-feat-check {
+    background: #0a66c2;
+  }
+  .aw-feat-info {
+    background: #2c2c2c;
+    color: #9aa6b3;
+  }
+  .aw-feat.is-on .aw-feat-info {
+    background: #0f2d4c;
+    color: #cfe1f7;
+  }
+  .aw-feat-tooltip {
+    background: #eee;
+    color: #111;
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
+  }
+  .aw-tool {
+    background: #2a2a2a;
+    border-color: #3b3b3b;
+    color: #6ea8e6;
+  }
+  .aw-tool--oversize.is-on {
+    background: #0a66c2;
+    color: #fff;
+    border-color: #064d8f;
+  }
+  .aw-stage-dot {
+    background: #3b3b3b;
+  }
+  .aw-stage-dot.is-filled {
+    background: #6ea8e6;
+  }
+  .aw-feat.is-on .aw-stage-dot {
+    background: #064d8f;
+  }
+  .aw-feat.is-on .aw-stage-dot.is-filled {
+    background: #cfe1f7;
+  }
+  .aw-footer {
+    border-color: #333;
+  }
+  .aw-reset {
+    background: #1b1b1b;
+    color: #ff7676;
+    border-color: #ff7676;
+  }
+  .aw-disclaimer {
+    color: #aaa;
+  }
+  .aw-poweredby {
+    color: #888;
+  }
+  .aw-poweredby a {
+    text-decoration-color: #555;
+  }
+  .aw-poweredby a:hover,
+  .aw-poweredby a:focus-visible {
+    color: #6ea8e6;
+  }
+  #aw-struct-nav {
+    background: #1b1b1b;
+    color: #eee;
+  }
+  #aw-struct-nav a {
+    color: #6ea8e6;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .aw-panel,
+  .aw-feat,
+  .aw-profile-btn,
+  .aw-reset,
+  .aw-close {
+    transition: none !important;
+  }
+}

package/src/types/index.ts

@@ -0,0 +1,2 @@
+export * from './widget.js';
+export * from './locale.js';