@adia-ai/web-components 0.6.36 → 0.6.37

package/components/password-strength/password-strength.class.js

@@ -0,0 +1,157 @@
+/**
+ * Non-side-effect class export for `<password-strength-ui>`.
+ *
+ * Importing this file gives you the class without auto-registering the
+ * tag. Useful for test isolation, subclassing with tag-name override,
+ * or selective composition.
+ *
+ * The auto-register path stays at `@adia-ai/web-components/components/password-strength`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+/**
+ * <password-strength-ui></password-strength-ui>
+ *
+ * Layout:
+ *   ▮▮▮▯  ← 4-segment bar, lit segments coloured per score
+ *   Good   ← optional text label
+ *
+ * Pair with `<input-ui type="password">`:
+ *   input.addEventListener('input', e => meter.value = e.target.value);
+ *
+ * Score buckets (heuristic):
+ *   0 Weak    — short or single-class
+ *   1 Fair    — 8+ chars OR mixed classes
+ *   2 Good    — 12+ chars + ≥3 classes
+ *   3 Strong  — 16+ chars + 4 classes
+ *
+ * NOT zxcvbn — this is a tiny first-line heuristic. For security-
+ * critical surfaces, consumers can override the score by listening
+ * to `input` on the field and setting their own `data-score` on the
+ * meter, OR by extending this class.
+ *
+ * Security: `value` is JS-property only. NOT reflected to a DOM
+ * attribute; the password never appears in rendered HTML.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+const LABELS = ['Weak', 'Fair', 'Good', 'Strong'];
+
+/**
+ * Compute a 0..3 score for the given password string.
+ * Returns -1 for empty (sentinel — caller uses to grey out the bar).
+ *
+ * Scoring rubric:
+ *   +1 length >= 8
+ *   +1 length >= 12
+ *   +1 length >= 16
+ *   +1 ≥ 2 character classes (lower / upper / digit / symbol)
+ *   +1 ≥ 3 character classes
+ *   +1 all 4 character classes
+ *   -1 contains 3+ same-char run (e.g. "aaa")
+ *   -1 password is too short (< 8 chars) — clamps score to ≤ 0
+ *
+ * Clamped to [0, 3].
+ */
+function scorePassword(pwd) {
+  if (!pwd) return -1;
+  let score = 0;
+  if (pwd.length >= 8) score++;
+  if (pwd.length >= 12) score++;
+  if (pwd.length >= 16) score++;
+
+  const classes = [
+    /[a-z]/.test(pwd),
+    /[A-Z]/.test(pwd),
+    /[0-9]/.test(pwd),
+    /[^a-zA-Z0-9]/.test(pwd),
+  ].filter(Boolean).length;
+  if (classes >= 2) score++;
+  if (classes >= 3) score++;
+  if (classes === 4) score++;
+
+  // Penalty: same-char run of 3+ (aaa, 111)
+  if (/(.)\1{2,}/.test(pwd)) score--;
+
+  // Hard floor for very short passwords — never above "Weak"
+  if (pwd.length < 8) score = Math.min(score, 0);
+
+  return Math.max(0, Math.min(3, score));
+}
+
+export class UIPasswordStrength extends UIElement {
+  static properties = {
+    // JS-property only — no `reflect: true` so the password never
+    // appears in the DOM attribute set. `dynamic: true` keeps it out
+    // of any static-attribute extraction the a2ui pipeline does.
+    value:     { type: String,  default: '' },
+    minScore:  { type: Number,  default: 2,    reflect: true, attribute: 'min-score' },
+    showLabel: { type: Boolean, default: true, reflect: true, attribute: 'show-label' },
+  };
+
+  static template = () => null;
+
+  #lastEmittedScore = -2; // sentinel — different from any valid score / -1
+
+  connected() {
+    super.connected();
+    if (!this.querySelector('[slot="bar"]')) {
+      this.innerHTML = `
+        <div slot="bar" aria-hidden="true">
+          <div slot="segment" data-i="0"></div>
+          <div slot="segment" data-i="1"></div>
+          <div slot="segment" data-i="2"></div>
+          <div slot="segment" data-i="3"></div>
+        </div>
+        <span slot="label" aria-live="polite"></span>
+      `;
+    }
+    // ARIA meter semantics
+    this.setAttribute('role', 'meter');
+    this.setAttribute('aria-valuemin', '0');
+    this.setAttribute('aria-valuemax', '3');
+  }
+
+  render() {
+    const score = scorePassword(this.value);
+
+    if (score < 0) {
+      this.removeAttribute('data-score');
+      this.removeAttribute('aria-valuenow');
+      this.setAttribute('aria-valuetext', 'Empty');
+    } else {
+      this.setAttribute('data-score', String(score));
+      this.setAttribute('aria-valuenow', String(score));
+      this.setAttribute('aria-valuetext', LABELS[score]);
+    }
+
+    // Update segment lit state via [data-lit]
+    const segments = this.querySelectorAll('[slot="segment"]');
+    segments.forEach((seg, i) => {
+      if (score >= 0 && i <= score) seg.setAttribute('data-lit', '');
+      else seg.removeAttribute('data-lit');
+    });
+
+    // Update label text
+    const labelEl = this.querySelector('[slot="label"]');
+    if (labelEl) {
+      labelEl.textContent = score >= 0 && this.showLabel !== false ? LABELS[score] : '';
+    }
+
+    // Emit score-change only on bucket transitions
+    if (score !== this.#lastEmittedScore) {
+      this.#lastEmittedScore = score;
+      this.dispatchEvent(new CustomEvent('score-change', {
+        bubbles: true,
+        detail: {
+          score,
+          label: score >= 0 ? LABELS[score] : '',
+          satisfied: score >= this.minScore,
+        },
+      }));
+    }
+  }
+}

package/components/password-strength/password-strength.css

@@ -0,0 +1,80 @@
+/* ═══════════════════════════════════════════════════════════════
+   PASSWORD-STRENGTH-UI — 4-segment strength meter + label.
+   ═══════════════════════════════════════════════════════════════ */
+
+@scope (password-strength-ui) {
+  :where(:scope) {
+    /* ── Layout ── */
+    --password-strength-gap-default:            var(--a-space-1);
+    --password-strength-segment-height-default: 4px;
+    --password-strength-radius-default:         var(--a-radius-full);
+    --password-strength-stack-gap-default:      var(--a-space-1);
+
+    /* ── Colors ── */
+    --password-strength-segment-bg-default:     var(--a-canvas-1-scrim);
+    --password-strength-color-weak-default:     var(--a-danger-bg);
+    --password-strength-color-fair-default:     var(--a-warning-bg);
+    --password-strength-color-good-default:     var(--a-info-bg);
+    --password-strength-color-strong-default:   var(--a-success-bg);
+
+    /* ── Typography ── */
+    --password-strength-label-fg-default:       var(--a-fg-muted);
+    --password-strength-label-size-default:     var(--a-ui-sm);
+    --password-strength-label-weight-default:   var(--a-weight-medium);
+
+    /* ── Per-score label color (mirrors the lit-segment color so the
+       label visually links to the bar fill state). ── */
+    --password-strength-label-fg-weak-default:   var(--password-strength-color-weak, var(--password-strength-color-weak-default));
+    --password-strength-label-fg-fair-default:   var(--password-strength-color-fair, var(--password-strength-color-fair-default));
+    --password-strength-label-fg-good-default:   var(--password-strength-color-good, var(--password-strength-color-good-default));
+    --password-strength-label-fg-strong-default: var(--password-strength-color-strong, var(--password-strength-color-strong-default));
+  }
+
+  /* ── Host ── */
+  :scope {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--password-strength-stack-gap, var(--password-strength-stack-gap-default));
+    width: 100%;
+  }
+
+  /* ── Bar ── */
+  [slot="bar"] {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: var(--password-strength-gap, var(--password-strength-gap-default));
+  }
+
+  [slot="segment"] {
+    height: var(--password-strength-segment-height, var(--password-strength-segment-height-default));
+    background: var(--password-strength-segment-bg, var(--password-strength-segment-bg-default));
+    border-radius: var(--password-strength-radius, var(--password-strength-radius-default));
+    transition: background var(--a-duration-fast) var(--a-easing);
+  }
+
+  /* ── Lit segments — color depends on host [data-score] ── */
+  :scope[data-score="0"] [slot="segment"][data-lit] { background: var(--password-strength-color-weak,   var(--password-strength-color-weak-default)); }
+  :scope[data-score="1"] [slot="segment"][data-lit] { background: var(--password-strength-color-fair,   var(--password-strength-color-fair-default)); }
+  :scope[data-score="2"] [slot="segment"][data-lit] { background: var(--password-strength-color-good,   var(--password-strength-color-good-default)); }
+  :scope[data-score="3"] [slot="segment"][data-lit] { background: var(--password-strength-color-strong, var(--password-strength-color-strong-default)); }
+
+  /* ── Label ── */
+  [slot="label"] {
+    font-size: var(--password-strength-label-size, var(--password-strength-label-size-default));
+    font-weight: var(--password-strength-label-weight, var(--password-strength-label-weight-default));
+    color: var(--password-strength-label-fg, var(--password-strength-label-fg-default));
+    min-height: 1lh;  /* prevent layout jump when label appears */
+  }
+
+  :scope[data-score="0"] [slot="label"] { color: var(--password-strength-label-fg-weak,   var(--password-strength-label-fg-weak-default)); }
+  :scope[data-score="1"] [slot="label"] { color: var(--password-strength-label-fg-fair,   var(--password-strength-label-fg-fair-default)); }
+  :scope[data-score="2"] [slot="label"] { color: var(--password-strength-label-fg-good,   var(--password-strength-label-fg-good-default)); }
+  :scope[data-score="3"] [slot="label"] { color: var(--password-strength-label-fg-strong, var(--password-strength-label-fg-strong-default)); }
+
+  /* ── Hide label when [show-label] is false-y. The class.js clears
+     the textContent in that case; this provides belt-and-suspenders. ── */
+  :scope:not([show-label]) [slot="label"] {
+    display: none;
+  }
+}

package/components/password-strength/password-strength.d.ts

@@ -0,0 +1,59 @@
+/**
+ * `<password-strength-ui>` — Visual strength indicator for password inputs — 4-segment bar (weak /
+fair / good / strong) computed from a heuristic combining length,
+character-class diversity, and repeat-pattern penalty. Pairs with
+`<input-ui type="password">` via JS:
+  input.addEventListener('input', e => meter.value = e.target.value)
+Read-only display primitive — no form participation. Emits a
+`score-change` event when the bucket changes so consumers can gate
+a submit button on `detail.satisfied` (score ≥ min-score).
+
+**Security note:** [value] is held as a JS property only, NOT
+reflected to a DOM attribute. The element stamps the bar + label
+from the property; the password never appears in the rendered HTML.
+Do not set the value via setAttribute (it will be no-op).
+
+ *
+ * @see https://ui-kit.exe.xyz/site/components/password-strength
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar(s). Edit the source `.yaml`,
+ * run `npm run build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export interface PasswordStrengthScoreChangeEventDetail {
+  label: string;
+  satisfied: string;
+  score: string;
+}
+
+export type PasswordStrengthScoreChangeEvent = CustomEvent<PasswordStrengthScoreChangeEventDetail>;
+
+export class UIPasswordStrength extends UIElement {
+  /** Minimum acceptable score (0–3). The `score-change` event's
+`detail.satisfied` boolean reflects whether the current score
+meets this threshold. Useful for gating a submit button.
+ */
+  minScore: number;
+  /** Display the textual score label ("Weak" / "Fair" / "Good" /
+"Strong") below the bar. Defaults to true.
+ */
+  showLabel: boolean;
+  /** The password string to score. JS-property only — NOT reflected
+to a DOM attribute (so the password never leaks into rendered
+HTML). Wire to an input via `input.addEventListener('input', e =>
+meter.value = e.target.value)`.
+ */
+  value: string;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIPasswordStrength, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'score-change', listener: (ev: PasswordStrengthScoreChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

package/components/password-strength/password-strength.js

@@ -0,0 +1,17 @@
+/**
+ * `<password-strength-ui>` — auto-registers the tag on import.
+ *
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
+ *
+ *   import { UIPasswordStrength } from '@adia-ai/web-components/components/password-strength/class';
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+import { defineIfFree } from '../../core/register.js';
+import { UIPasswordStrength } from './password-strength.class.js';
+
+defineIfFree('password-strength-ui', UIPasswordStrength);
+
+export { UIPasswordStrength };

package/components/password-strength/password-strength.yaml

@@ -0,0 +1,153 @@
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: UIPasswordStrength
+tag: password-strength-ui
+status: stable
+component: PasswordStrength
+category: display
+version: 1
+description: |
+  Visual strength indicator for password inputs — 4-segment bar (weak /
+  fair / good / strong) computed from a heuristic combining length,
+  character-class diversity, and repeat-pattern penalty. Pairs with
+  `<input-ui type="password">` via JS:
+    input.addEventListener('input', e => meter.value = e.target.value)
+  Read-only display primitive — no form participation. Emits a
+  `score-change` event when the bucket changes so consumers can gate
+  a submit button on `detail.satisfied` (score ≥ min-score).
+
+  **Security note:** [value] is held as a JS property only, NOT
+  reflected to a DOM attribute. The element stamps the bar + label
+  from the property; the password never appears in the rendered HTML.
+  Do not set the value via setAttribute (it will be no-op).
+props:
+  value:
+    description: |
+      The password string to score. JS-property only — NOT reflected
+      to a DOM attribute (so the password never leaks into rendered
+      HTML). Wire to an input via `input.addEventListener('input', e =>
+      meter.value = e.target.value)`.
+    type: string
+    default: ""
+    dynamic: true
+  minScore:
+    description: |
+      Minimum acceptable score (0–3). The `score-change` event's
+      `detail.satisfied` boolean reflects whether the current score
+      meets this threshold. Useful for gating a submit button.
+    type: number
+    default: 2
+    reflect: true
+    attribute: min-score
+  showLabel:
+    description: |
+      Display the textual score label ("Weak" / "Fair" / "Good" /
+      "Strong") below the bar. Defaults to true.
+    type: boolean
+    default: true
+    reflect: true
+    attribute: show-label
+events:
+  score-change:
+    description: Fired when the computed score crosses a bucket boundary (not on every keystroke). Detail carries the new score + label + satisfied flag.
+    detail:
+      score: number
+      label: string
+      satisfied: boolean
+slots:
+  default:
+    description: Optional area for requirements checklist content (e.g. <ul> of "at least 8 characters", "mixed case", etc.).
+states:
+  - name: idle
+    description: Default — no value set, all segments grey.
+  - name: scored
+    description: Value present; segments lit per score 0..3.
+    attribute: data-score
+tokens:
+  --password-strength-segment-height:
+    description: Height of each bar segment.
+    default: 4px
+  --password-strength-gap:
+    description: Gap between segments.
+    default: var(--a-space-1)
+  --password-strength-radius:
+    description: Segment border radius.
+    default: var(--a-radius-full)
+  --password-strength-segment-bg:
+    description: Unlit segment background (track color).
+    default: var(--a-canvas-1-scrim)
+  --password-strength-color-weak:
+    description: Color for score=0 lit segments.
+    default: var(--a-danger-bg)
+  --password-strength-color-fair:
+    description: Color for score=1 lit segments.
+    default: var(--a-warning-bg)
+  --password-strength-color-good:
+    description: Color for score=2 lit segments.
+    default: var(--a-info-bg)
+  --password-strength-color-strong:
+    description: Color for score=3 lit segments.
+    default: var(--a-success-bg)
+  --password-strength-label-fg:
+    description: Label text color.
+    default: var(--a-fg-muted)
+  --password-strength-label-size:
+    description: Label font size.
+    default: var(--a-ui-sm)
+a2ui:
+  rules:
+    - rule: "Pair with <input-ui type=password> via a JS listener (input.addEventListener('input', e => meter.value = e.target.value)). The meter does NOT participate in form data — it is a display indicator."
+      reason: "Pairing contract."
+    - rule: "The score is 0 (Weak) / 1 (Fair) / 2 (Good) / 3 (Strong). [min-score] sets the threshold for the `satisfied` boolean in score-change events. Use the boolean to gate a submit button."
+      reason: "Score semantics + threshold contract."
+    - rule: "Do NOT set value via setAttribute — value is JS-property only and never appears in rendered HTML (security: avoids leaking the password into the DOM)."
+      reason: "Security contract."
+anti_patterns:
+  - wrong: |
+      <password-strength-ui value="hunter2"></password-strength-ui>
+    why: |
+      `value` is JS-property only; the attribute is ignored. The
+      password also shouldn't be authored into HTML at all (server
+      template / static page) — that defeats the purpose.
+    fix: |
+      <password-strength-ui id="m"></password-strength-ui>
+      <script>document.getElementById('m').value = pwd;</script>
+examples:
+  - name: paired-with-input
+    description: Standard pairing with input-ui[type=password] via input listener.
+    a2ui: |
+      [
+        {
+          "id": "field",
+          "component": "Field",
+          "label": "Password",
+          "children": ["pwd", "meter"]
+        },
+        {
+          "id": "pwd",
+          "component": "Input",
+          "type": "password",
+          "name": "password"
+        },
+        {
+          "id": "meter",
+          "component": "PasswordStrength"
+        }
+      ]
+keywords:
+  - password-strength
+  - strength-meter
+  - password
+  - strength
+  - meter
+  - security
+synonyms:
+  password:
+    - password-strength
+    - strength-meter
+  strength:
+    - password-strength
+    - meter
+related:
+  - input
+  - field
+  - progress

package/components/popover/popover.css

@@ -5,15 +5,11 @@
     --popover-py-default:      var(--a-space-2);
     --popover-radius-default:  var(--a-radius-lg);
 
-    /* ── Colors ── */
+    /* ── Colors (default panel chrome — opt out per `:has(>card-ui)` rule
+       below or by setting tokens to transparent / 0) ── */
     --popover-bg-default:      var(--a-bg-subtle);
     --popover-border-default:  var(--a-border-subtle);
     --popover-shadow-default:  var(--a-shadow-lg);
-    --popover-fg-default:      var(--a-fg);
-
-    /* ── Typography ── */
-    --popover-font-default:    var(--a-font-family);
-    --popover-font-size-default: var(--a-ui-size);
   }
 
   :scope {
@@ -34,25 +30,55 @@
     display: none !important;
   }
 
+  /* ── popover-ui's CSS opinions, narrowly scoped ──
+   *
+   * What's HERE and why:
+   *  • [slot="content"]:not(:popover-open) display:none — required Popover
+   *    API mechanics (closed-state visibility for slotted children).
+   *  • [slot="content"] margin: 0 — reset UA stylesheet's `margin: auto`
+   *    on popover elements (otherwise popover centers in viewport).
+   *  • [slot="content"] box-sizing — universal sanity.
+   *  • Default panel chrome — defensive for the bare-HTML case
+   *    (<div slot="content">Hello</div> needs to be visible against the
+   *    page). Opt out by putting a surface primitive (card-ui / drawer-ui
+   *    / menu-ui) as the only child — they own their own chrome.
+   *  • Light enter/exit animation (opacity + 4px translate) tied to the
+   *    :popover-open state; honors prefers-reduced-motion.
+   *
+   * What's deliberately NOT here:
+   *  • width / max-width / max-height / overflow-y — set by core/anchor.js
+   *    inline during anchoring; those are the anchor module's contract,
+   *    not the shell's.
+   *  • font-family / font-size / color — inherit from the page naturally.
+   *  • Prose first/last-child margin resets — touched consumer DOM.
+   */
   [slot="content"] {
     box-sizing: border-box;
+    /* Reset UA stylesheet's `[popover]` defaults — it sets `margin: auto`
+       (centers in viewport) AND `padding: 0.25em` (~3.75 px at default
+       font-size, leaks into card-ui / drawer-ui consumers and looks like
+       phantom inset between popover edge and inner surface). Both must
+       be zeroed; the chrome rule below re-applies padding only when no
+       surface primitive is in the slot. */
     margin: 0;
+    padding: 0;
+    opacity: 1;
+    translate: 0 0;
+    transition: opacity var(--a-duration-fast) var(--a-easing-out),
+                translate var(--a-duration-fast) var(--a-easing-out);
+  }
+
+  /* Skip chrome when the slot IS a surface primitive itself
+     (`<card-ui slot="content">…`) AND when it CONTAINS one as the only
+     child (`<div slot="content"><card-ui>…</card-ui></div>`). Both
+     shapes appear in consumer code; both should let the inner surface
+     own padding + bg + border + radius + shadow. */
+  [slot="content"]:not(card-ui):not(drawer-ui):not(menu-ui):not(:has(> card-ui:only-child)):not(:has(> drawer-ui:only-child)):not(:has(> menu-ui:only-child)) {
     padding: var(--popover-py, var(--popover-py-default)) var(--popover-px, var(--popover-px-default));
     background: var(--popover-bg, var(--popover-bg-default));
     border: 1px solid var(--popover-border, var(--popover-border-default));
     border-radius: var(--popover-radius, var(--popover-radius-default));
     box-shadow: var(--popover-shadow, var(--popover-shadow-default));
-    font-family: var(--popover-font, var(--popover-font-default));
-    font-size: var(--popover-font-size, var(--popover-font-size-default));
-    color: var(--popover-fg, var(--popover-fg-default));
-    max-height: calc(100vh - 3rem);
-    overflow-y: auto;
-    /* Fade + lift in on first paint. @starting-style is the initial frame
-       browsers paint before the popover transitions to its open state. */
-    opacity: 1;
-    translate: 0 0;
-    transition: opacity var(--a-duration-fast) var(--a-easing-out),
-                translate var(--a-duration-fast) var(--a-easing-out);
   }
 
   [slot="content"]:popover-open {
@@ -65,10 +91,4 @@
   @media (prefers-reduced-motion: reduce) {
     [slot="content"] { transition: none; }
   }
-
-  /* Collapse default margins on the first/last block child so the
-     content sits snug inside --popover-py (no phantom extra space
-     below <p>, <h*>, etc.). */
-  [slot="content"] > :first-child { margin-block-start: 0; }
-  [slot="content"] > :last-child  { margin-block-end:   0; }
 }

package/components/popover/popover.yaml

@@ -76,10 +76,14 @@ a2ui:
       everything else (inline forms, color pickers, theme panels,
       export menus with non-action content).
     - >-
-      Use [placement="bottom-end"] for topbar overflow / settings
-      buttons; [placement="bottom-start"] for inline form fields;
-      top-* variants when trigger sits low in the viewport
-      (statusbar). [gap] (default 4px) controls offset from anchor.
+      Placement convention (ADR-0034): default `bottom` centers under
+      the trigger — correct for wide pickers (calendar, color,
+      date-range, filter forms). Use `bottom-start` for trigger-width
+      menus (action lists, listboxes, breadcrumb overflow — popover
+      width ≈ trigger width). Use `bottom-end` only when the trigger
+      sits at the right edge of a container by construction (toolbar
+      spillover). Use `top-*` when the trigger sits low in the
+      viewport (statusbar). [gap] (default 4px) sets offset from anchor.
     - >-
       [trigger="hover"] is for non-essential disclosure only — never
       use it for popovers containing inputs, destructive actions, or

package/components/qr-code/QR-TEST.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 330 330" width="330" height="330" shape-rendering="crispEdges">
+  <rect width="100%" height="100%" fill="#fff"/>
+  <g fill="#000"><rect x="40" y="40" width="10" height="10"/><rect x="50" y="40" width="10" height="10"/><rect x="60" y="40" width="10" height="10"/><rect x="70" y="40" width="10" height="10"/><rect x="80" y="40" width="10" height="10"/><rect x="90" y="40" width="10" height="10"/><rect x="100" y="40" width="10" height="10"/><rect x="120" y="40" width="10" height="10"/><rect x="150" y="40" width="10" height="10"/><rect x="170" y="40" width="10" height="10"/><rect x="180" y="40" width="10" height="10"/><rect x="190" y="40" width="10" height="10"/><rect x="220" y="40" width="10" height="10"/><rect x="230" y="40" width="10" height="10"/><rect x="240" y="40" width="10" height="10"/><rect x="250" y="40" width="10" height="10"/><rect x="260" y="40" width="10" height="10"/><rect x="270" y="40" width="10" height="10"/><rect x="280" y="40" width="10" height="10"/><rect x="40" y="50" width="10" height="10"/><rect x="100" y="50" width="10" height="10"/><rect x="190" y="50" width="10" height="10"/><rect x="220" y="50" width="10" height="10"/><rect x="280" y="50" width="10" height="10"/><rect x="40" y="60" width="10" height="10"/><rect x="60" y="60" width="10" height="10"/><rect x="70" y="60" width="10" height="10"/><rect x="80" y="60" width="10" height="10"/><rect x="100" y="60" width="10" height="10"/><rect x="120" y="60" width="10" height="10"/><rect x="140" y="60" width="10" height="10"/><rect x="160" y="60" width="10" height="10"/><rect x="170" y="60" width="10" height="10"/><rect x="220" y="60" width="10" height="10"/><rect x="240" y="60" width="10" height="10"/><rect x="250" y="60" width="10" height="10"/><rect x="260" y="60" width="10" height="10"/><rect x="280" y="60" width="10" height="10"/><rect x="40" y="70" width="10" height="10"/><rect x="60" y="70" width="10" height="10"/><rect x="70" y="70" width="10" height="10"/><rect x="80" y="70" width="10" height="10"/><rect x="100" y="70" width="10" height="10"/><rect x="130" y="70" width="10" height="10"/><rect x="150" y="70" width="10" height="10"/><rect x="160" y="70" width="10" height="10"/><rect x="190" y="70" width="10" height="10"/><rect x="220" y="70" width="10" height="10"/><rect x="240" y="70" width="10" height="10"/><rect x="250" y="70" width="10" height="10"/><rect x="260" y="70" width="10" height="10"/><rect x="280" y="70" width="10" height="10"/><rect x="40" y="80" width="10" height="10"/><rect x="60" y="80" width="10" height="10"/><rect x="70" y="80" width="10" height="10"/><rect x="80" y="80" width="10" height="10"/><rect x="100" y="80" width="10" height="10"/><rect x="130" y="80" width="10" height="10"/><rect x="190" y="80" width="10" height="10"/><rect x="200" y="80" width="10" height="10"/><rect x="220" y="80" width="10" height="10"/><rect x="240" y="80" width="10" height="10"/><rect x="250" y="80" width="10" height="10"/><rect x="260" y="80" width="10" height="10"/><rect x="280" y="80" width="10" height="10"/><rect x="40" y="90" width="10" height="10"/><rect x="100" y="90" width="10" height="10"/><rect x="120" y="90" width="10" height="10"/><rect x="160" y="90" width="10" height="10"/><rect x="170" y="90" width="10" height="10"/><rect x="180" y="90" width="10" height="10"/><rect x="220" y="90" width="10" height="10"/><rect x="280" y="90" width="10" height="10"/><rect x="40" y="100" width="10" height="10"/><rect x="50" y="100" width="10" height="10"/><rect x="60" y="100" width="10" height="10"/><rect x="70" y="100" width="10" height="10"/><rect x="80" y="100" width="10" height="10"/><rect x="90" y="100" width="10" height="10"/><rect x="100" y="100" width="10" height="10"/><rect x="120" y="100" width="10" height="10"/><rect x="140" y="100" width="10" height="10"/><rect x="160" y="100" width="10" height="10"/><rect x="180" y="100" width="10" height="10"/><rect x="200" y="100" width="10" height="10"/><rect x="220" y="100" width="10" height="10"/><rect x="230" y="100" width="10" height="10"/><rect x="240" y="100" width="10" height="10"/><rect x="250" y="100" width="10" height="10"/><rect x="260" y="100" width="10" height="10"/><rect x="270" y="100" width="10" height="10"/><rect x="280" y="100" width="10" height="10"/><rect x="160" y="110" width="10" height="10"/><rect x="170" y="110" width="10" height="10"/><rect x="190" y="110" width="10" height="10"/><rect x="200" y="110" width="10" height="10"/><rect x="40" y="120" width="10" height="10"/><rect x="60" y="120" width="10" height="10"/><rect x="100" y="120" width="10" height="10"/><rect x="110" y="120" width="10" height="10"/><rect x="130" y="120" width="10" height="10"/><rect x="140" y="120" width="10" height="10"/><rect x="150" y="120" width="10" height="10"/><rect x="160" y="120" width="10" height="10"/><rect x="170" y="120" width="10" height="10"/><rect x="190" y="120" width="10" height="10"/><rect x="230" y="120" width="10" height="10"/><rect x="260" y="120" width="10" height="10"/><rect x="280" y="120" width="10" height="10"/><rect x="40" y="130" width="10" height="10"/><rect x="50" y="130" width="10" height="10"/><rect x="60" y="130" width="10" height="10"/><rect x="70" y="130" width="10" height="10"/><rect x="130" y="130" width="10" height="10"/><rect x="150" y="130" width="10" height="10"/><rect x="160" y="130" width="10" height="10"/><rect x="190" y="130" width="10" height="10"/><rect x="200" y="130" width="10" height="10"/><rect x="220" y="130" width="10" height="10"/><rect x="230" y="130" width="10" height="10"/><rect x="250" y="130" width="10" height="10"/><rect x="270" y="130" width="10" height="10"/><rect x="280" y="130" width="10" height="10"/><rect x="60" y="140" width="10" height="10"/><rect x="70" y="140" width="10" height="10"/><rect x="80" y="140" width="10" height="10"/><rect x="100" y="140" width="10" height="10"/><rect x="110" y="140" width="10" height="10"/><rect x="130" y="140" width="10" height="10"/><rect x="140" y="140" width="10" height="10"/><rect x="170" y="140" width="10" height="10"/><rect x="180" y="140" width="10" height="10"/><rect x="190" y="140" width="10" height="10"/><rect x="220" y="140" width="10" height="10"/><rect x="240" y="140" width="10" height="10"/><rect x="250" y="140" width="10" height="10"/><rect x="260" y="140" width="10" height="10"/><rect x="280" y="140" width="10" height="10"/><rect x="70" y="150" width="10" height="10"/><rect x="80" y="150" width="10" height="10"/><rect x="110" y="150" width="10" height="10"/><rect x="160" y="150" width="10" height="10"/><rect x="180" y="150" width="10" height="10"/><rect x="200" y="150" width="10" height="10"/><rect x="250" y="150" width="10" height="10"/><rect x="40" y="160" width="10" height="10"/><rect x="70" y="160" width="10" height="10"/><rect x="90" y="160" width="10" height="10"/><rect x="100" y="160" width="10" height="10"/><rect x="130" y="160" width="10" height="10"/><rect x="150" y="160" width="10" height="10"/><rect x="170" y="160" width="10" height="10"/><rect x="180" y="160" width="10" height="10"/><rect x="190" y="160" width="10" height="10"/><rect x="200" y="160" width="10" height="10"/><rect x="220" y="160" width="10" height="10"/><rect x="230" y="160" width="10" height="10"/><rect x="280" y="160" width="10" height="10"/><rect x="70" y="170" width="10" height="10"/><rect x="80" y="170" width="10" height="10"/><rect x="90" y="170" width="10" height="10"/><rect x="110" y="170" width="10" height="10"/><rect x="120" y="170" width="10" height="10"/><rect x="170" y="170" width="10" height="10"/><rect x="180" y="170" width="10" height="10"/><rect x="190" y="170" width="10" height="10"/><rect x="200" y="170" width="10" height="10"/><rect x="220" y="170" width="10" height="10"/><rect x="230" y="170" width="10" height="10"/><rect x="270" y="170" width="10" height="10"/><rect x="280" y="170" width="10" height="10"/><rect x="40" y="180" width="10" height="10"/><rect x="50" y="180" width="10" height="10"/><rect x="60" y="180" width="10" height="10"/><rect x="90" y="180" width="10" height="10"/><rect x="100" y="180" width="10" height="10"/><rect x="110" y="180" width="10" height="10"/><rect x="130" y="180" width="10" height="10"/><rect x="150" y="180" width="10" height="10"/><rect x="190" y="180" width="10" height="10"/><rect x="200" y="180" width="10" height="10"/><rect x="210" y="180" width="10" height="10"/><rect x="250" y="180" width="10" height="10"/><rect x="260" y="180" width="10" height="10"/><rect x="280" y="180" width="10" height="10"/><rect x="60" y="190" width="10" height="10"/><rect x="80" y="190" width="10" height="10"/><rect x="90" y="190" width="10" height="10"/><rect x="120" y="190" width="10" height="10"/><rect x="130" y="190" width="10" height="10"/><rect x="140" y="190" width="10" height="10"/><rect x="170" y="190" width="10" height="10"/><rect x="200" y="190" width="10" height="10"/><rect x="210" y="190" width="10" height="10"/><rect x="230" y="190" width="10" height="10"/><rect x="240" y="190" width="10" height="10"/><rect x="250" y="190" width="10" height="10"/><rect x="40" y="200" width="10" height="10"/><rect x="50" y="200" width="10" height="10"/><rect x="70" y="200" width="10" height="10"/><rect x="90" y="200" width="10" height="10"/><rect x="100" y="200" width="10" height="10"/><rect x="110" y="200" width="10" height="10"/><rect x="120" y="200" width="10" height="10"/><rect x="150" y="200" width="10" height="10"/><rect x="160" y="200" width="10" height="10"/><rect x="170" y="200" width="10" height="10"/><rect x="190" y="200" width="10" height="10"/><rect x="200" y="200" width="10" height="10"/><rect x="210" y="200" width="10" height="10"/><rect x="220" y="200" width="10" height="10"/><rect x="230" y="200" width="10" height="10"/><rect x="240" y="200" width="10" height="10"/><rect x="270" y="200" width="10" height="10"/><rect x="120" y="210" width="10" height="10"/><rect x="130" y="210" width="10" height="10"/><rect x="140" y="210" width="10" height="10"/><rect x="160" y="210" width="10" height="10"/><rect x="200" y="210" width="10" height="10"/><rect x="240" y="210" width="10" height="10"/><rect x="280" y="210" width="10" height="10"/><rect x="40" y="220" width="10" height="10"/><rect x="50" y="220" width="10" height="10"/><rect x="60" y="220" width="10" height="10"/><rect x="70" y="220" width="10" height="10"/><rect x="80" y="220" width="10" height="10"/><rect x="90" y="220" width="10" height="10"/><rect x="100" y="220" width="10" height="10"/><rect x="120" y="220" width="10" height="10"/><rect x="160" y="220" width="10" height="10"/><rect x="170" y="220" width="10" height="10"/><rect x="180" y="220" width="10" height="10"/><rect x="200" y="220" width="10" height="10"/><rect x="220" y="220" width="10" height="10"/><rect x="240" y="220" width="10" height="10"/><rect x="280" y="220" width="10" height="10"/><rect x="40" y="230" width="10" height="10"/><rect x="100" y="230" width="10" height="10"/><rect x="130" y="230" width="10" height="10"/><rect x="140" y="230" width="10" height="10"/><rect x="150" y="230" width="10" height="10"/><rect x="160" y="230" width="10" height="10"/><rect x="180" y="230" width="10" height="10"/><rect x="190" y="230" width="10" height="10"/><rect x="200" y="230" width="10" height="10"/><rect x="240" y="230" width="10" height="10"/><rect x="40" y="240" width="10" height="10"/><rect x="60" y="240" width="10" height="10"/><rect x="70" y="240" width="10" height="10"/><rect x="80" y="240" width="10" height="10"/><rect x="100" y="240" width="10" height="10"/><rect x="130" y="240" width="10" height="10"/><rect x="170" y="240" width="10" height="10"/><rect x="180" y="240" width="10" height="10"/><rect x="190" y="240" width="10" height="10"/><rect x="200" y="240" width="10" height="10"/><rect x="210" y="240" width="10" height="10"/><rect x="220" y="240" width="10" height="10"/><rect x="230" y="240" width="10" height="10"/><rect x="240" y="240" width="10" height="10"/><rect x="270" y="240" width="10" height="10"/><rect x="280" y="240" width="10" height="10"/><rect x="40" y="250" width="10" height="10"/><rect x="60" y="250" width="10" height="10"/><rect x="70" y="250" width="10" height="10"/><rect x="80" y="250" width="10" height="10"/><rect x="100" y="250" width="10" height="10"/><rect x="140" y="250" width="10" height="10"/><rect x="170" y="250" width="10" height="10"/><rect x="180" y="250" width="10" height="10"/><rect x="200" y="250" width="10" height="10"/><rect x="210" y="250" width="10" height="10"/><rect x="240" y="250" width="10" height="10"/><rect x="260" y="250" width="10" height="10"/><rect x="270" y="250" width="10" height="10"/><rect x="40" y="260" width="10" height="10"/><rect x="60" y="260" width="10" height="10"/><rect x="70" y="260" width="10" height="10"/><rect x="80" y="260" width="10" height="10"/><rect x="100" y="260" width="10" height="10"/><rect x="120" y="260" width="10" height="10"/><rect x="150" y="260" width="10" height="10"/><rect x="210" y="260" width="10" height="10"/><rect x="230" y="260" width="10" height="10"/><rect x="240" y="260" width="10" height="10"/><rect x="250" y="260" width="10" height="10"/><rect x="270" y="260" width="10" height="10"/><rect x="280" y="260" width="10" height="10"/><rect x="40" y="270" width="10" height="10"/><rect x="100" y="270" width="10" height="10"/><rect x="130" y="270" width="10" height="10"/><rect x="170" y="270" width="10" height="10"/><rect x="200" y="270" width="10" height="10"/><rect x="230" y="270" width="10" height="10"/><rect x="240" y="270" width="10" height="10"/><rect x="40" y="280" width="10" height="10"/><rect x="50" y="280" width="10" height="10"/><rect x="60" y="280" width="10" height="10"/><rect x="70" y="280" width="10" height="10"/><rect x="80" y="280" width="10" height="10"/><rect x="90" y="280" width="10" height="10"/><rect x="100" y="280" width="10" height="10"/><rect x="120" y="280" width="10" height="10"/><rect x="130" y="280" width="10" height="10"/><rect x="150" y="280" width="10" height="10"/><rect x="160" y="280" width="10" height="10"/><rect x="170" y="280" width="10" height="10"/><rect x="190" y="280" width="10" height="10"/><rect x="200" y="280" width="10" height="10"/><rect x="220" y="280" width="10" height="10"/><rect x="250" y="280" width="10" height="10"/><rect x="280" y="280" width="10" height="10"/></g>
+</svg>