oat-glassed 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License
+
+Copyright (c) 2026 Kailash Nadh. https://nadh.in
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,41 @@
+# Oat Glassed UI
+
+(Forked [Oat UI](https://github.com/knadh/oat))
+See [CHANGELOG](CHANGELOG.md) for changes and updates.
+
+> Semantic, minimal, zero dependencies. ~11KB CSS and JS.
+
+Oat Glassed is an ultra-lightweight HTML + CSS, semantic UI component library with zero dependencies. No framework, build, or dev complexity. Just include the tiny CSS and JS files and you are good to go building decent looking web applications with most commonly needed components and elements. Forked from Oat UI, it is now built with a glassmorphism design and has a few new components.
+
+Semantic tags and attributes are styled contextually out of the box without classes, forcing best practices, and reducing markup class pollution. A few dynamic components are WebComponents and use minimal JavaScript.
+
+See live demo and docs at [**https://good-lly.github.io/oat-glassed**](https://good-lly.github.io/oat-glassed)
+
+---
+
+<img width="739" alt="image" src="https://github.com/good-lly/oat-glassed/blob/main/docs/static/screenshot.png?raw=true" />
+
+## Installation
+
+### CDN
+
+```html
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/oat-glassed@1.0.0/dist/oat-glassed.min.css"
+/>
+<script src="https://cdn.jsdelivr.net/npm/oat-glassed@1.0.0/dist/oat-glassed.min.js"></script>
+```
+
+### NPM
+
+```bash
+npm install oat-glassed
+```
+
+```js
+import "oat-glassed/dist/oat-glassed.min.css";
+import "oat-glassed/dist/oat-glassed.min.js";
+```
+
+## License is licensed under [MIT](LICENSE).

package/css/00-base.css

@@ -0,0 +1,194 @@
+@layer theme, base, components, animations, utilities;
+
+@layer base {
+  *, *::before, *::after {
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  * {
+    margin: 0;
+  }
+
+  html {
+    tab-size: 4;
+  }
+
+  /* Top-layer elements don't inherit from body. Set explicitly. */
+  body, dialog, [popover] {
+    font-family: var(--font-sans);
+    font-size: var(--text-regular);
+    line-height: var(--leading-normal);
+    color: var(--foreground);
+  }
+
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+  }
+
+  main {
+    padding-block-start: var(--space-8);
+  }
+
+  img, picture, video, canvas, svg {
+    max-width: 100%;
+  }
+
+  p, h1, h2, h3, h4, h5, h6 {
+    overflow-wrap: break-word;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-weight: var(--font-semibold);
+    line-height: 1.25;
+
+    &:first-child {
+      margin-block-start: 0;
+    }
+  }
+
+  h1 {
+    font-size: var(--text-1);
+    margin: var(--space-10) 0 var(--space-6);
+  }
+
+  h2 {
+    font-size: var(--text-2);
+    margin: var(--space-8) 0 var(--space-5);
+  }
+
+  h3 {
+    font-size: var(--text-3);
+    margin: var(--space-6) 0 var(--space-4);
+  }
+
+  h4 {
+    font-size: var(--text-4);
+    margin: var(--space-5) 0 var(--space-3);
+  }
+
+  h5 {
+    font-size: var(--text-5);
+    margin: var(--space-4) 0 var(--space-2);
+  }
+
+  h6 {
+    font-size: var(--text-regular);
+    margin: var(--space-4) 0 var(--space-2);
+  }
+
+  p {
+    margin-block-end: var(--space-4);
+
+    &:last-child {
+      margin-block-end: 0;
+    }
+  }
+
+  a {
+    color: var(--link);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    transition: color var(--transition-fast);
+
+    &:hover {
+      color: rgb(from var(--link) r g b / 0.8);
+    }
+  }
+
+  strong, b {
+    font-weight: var(--font-semibold);
+  }
+
+  em, i {
+    font-style: italic;
+  }
+
+  small {
+    font-size: var(--text-7);
+  }
+
+  code {
+    font-family: var(--font-mono);
+    font-size: 0.875em;
+    padding: calc(var(--space-1) / 2) var(--space-2);
+    background-color: var(--faint);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-small);
+  }
+
+  pre {
+    font-family: var(--font-mono);
+    padding: var(--space-5);
+    background-color: light-dark(rgb(246 246 250 / 0.45), rgb(18 18 24 / 0.45));
+    border: 1px solid var(--glass-border);
+    border-radius: var(--radius-medium);
+    overflow-x: auto;
+    margin-block-end: var(--space-4);
+    box-shadow: var(--glass-edge);
+
+    code {
+      padding: 0;
+      background: none;
+      border: none;
+      border-radius: 0;
+    }
+  }
+
+  blockquote {
+    border-inline-start: 3px solid light-dark(rgb(from var(--primary) r g b / 0.3), rgb(from var(--primary) r g b / 0.4));
+    padding: var(--space-3) var(--space-4);
+    margin: var(--space-4) 0;
+    color: var(--muted-foreground);
+    font-style: italic;
+    background-color: var(--faint);
+    border-radius: 0 var(--radius-small) var(--radius-small) 0;
+  }
+
+  hr {
+    border: none;
+    border-top: 1px solid var(--border);
+    margin: var(--space-2) 0;
+  }
+
+  ul, ol {
+    padding-inline-start: var(--space-6);
+    margin-block-end: var(--space-4);
+  }
+
+  ul {
+    list-style-type: disc;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  li {
+    margin-block-end: var(--space-1);
+  }
+
+  mark {
+    background-color: rgb(from var(--warning) r g b / 0.3);
+    padding: calc(var(--space-1) / 2) var(--space-1);
+    border-radius: var(--radius-small);
+  }
+
+  [hidden] {
+    display: none;
+  }
+
+  :focus-visible {
+    outline: 2px solid rgb(from var(--ring) r g b / 0.6);
+    outline-offset: 2px;
+  }
+
+  :disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}

package/css/01-theme.css

@@ -0,0 +1,148 @@
+@layer theme {
+  :root {
+    color-scheme: light dark;
+
+    /* Surface & text — Tailwind gray */
+    --background: light-dark(#ffffff, #030712);
+    --foreground: light-dark(#111827, #f9fafb);
+    --card: light-dark(rgb(255 255 255 / 0.55), rgb(17 24 39 / 0.48));
+    --card-foreground: light-dark(#111827, #f9fafb);
+    --primary: light-dark(#111827, #f9fafb);
+    --primary-foreground: light-dark(#ffffff, #111827);
+    --secondary: light-dark(rgb(243 244 246 / 0.55), rgb(31 41 55 / 0.4));
+    --secondary-foreground: light-dark(#1f2937, #f3f4f6);
+    --muted: light-dark(rgb(243 244 246 / 0.45), rgb(31 41 55 / 0.4));
+    --muted-foreground: light-dark(#6b7280, #9ca3af);
+    --faint: light-dark(rgb(249 250 251 / 0.35), rgb(17 24 39 / 0.3));
+    --faint-foreground: light-dark(#9ca3af, #6b7280);
+    --accent: light-dark(rgb(243 244 246 / 0.55), rgb(31 41 55 / 0.4));
+    --link: light-dark(#0284c7, #7dd3fc);
+
+    /* Semantic — Tailwind red/emerald/amber */
+    --danger: light-dark(#ef4444, #f87171);
+    --danger-foreground: light-dark(#ffffff, #111827);
+    --success: light-dark(#10b981, #34d399);
+    --success-foreground: light-dark(#ffffff, #111827);
+    --warning: light-dark(#f59e0b, #fbbf24);
+    --warning-foreground: #111827;
+
+    /* Borders & rings */
+    --border: light-dark(rgb(0 0 0 / 0.08), rgb(255 255 255 / 0.08));
+    --input: light-dark(rgb(0 0 0 / 0.1), rgb(255 255 255 / 0.1));
+    --ring: light-dark(#111827, #f9fafb);
+
+    /* Glass — Tier 1 (real blur on nav, sidebar, dialog only) */
+    --glass-blur: 12px;
+    --glass-saturate: 120%;
+    --glass-border: light-dark(
+      rgb(255 255 255 / 0.65),
+      rgb(255 255 255 / 0.09)
+    );
+    --glass-highlight: light-dark(
+      linear-gradient(
+        135deg,
+        rgb(255 255 255 / 0.7) 0%,
+        rgb(255 255 255 / 0.15) 40%,
+        rgb(255 255 255 / 0) 60%
+      ),
+      linear-gradient(
+        135deg,
+        rgb(255 255 255 / 0.1) 0%,
+        rgb(255 255 255 / 0.03) 40%,
+        rgb(255 255 255 / 0) 60%
+      )
+    );
+    /* Faux glass edge — Tier 2 (inset highlights simulate glass reflection) */
+    --glass-edge: light-dark(
+      inset 0 0 0 1px rgb(255 255 255 / 0.12), inset 0 1px 0 rgb(255 255 255 / 0.15), 0 8px 32px rgb(0 0 0 / 0.08),
+      inset 0 0 0 1px rgb(255 255 255 / 0.08), inset 0 1px 0 rgb(255 255 255 / 0.1), 0 8px 32px rgb(0 0 0 / 0.25)
+    );
+
+    /* ==================== */
+    --space-1: 0.25rem;
+    --space-2: 0.5rem;
+    --space-3: 0.75rem;
+    --space-4: 1rem;
+    --space-5: 1.25rem;
+    --space-6: 1.5rem;
+    --space-8: 2rem;
+    --space-10: 2.5rem;
+    --space-12: 3rem;
+    --space-14: 3.5rem;
+    --space-16: 4rem;
+    --space-18: 4.5rem;
+
+    --radius-small: 0.25rem;
+    --radius-medium: 0.5rem;
+    --radius-large: 1.25rem;
+    --radius-full: 9999px;
+
+    --bar-height: 0.5rem;
+
+    --font-sans: system-ui, -apple-system, sans-serif;
+    --font-mono: ui-monospace, "SF Mono", Consolas, monospace;
+
+    --text-1: clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem);
+    --text-2: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
+    --text-3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
+    --text-4: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
+    --text-5: 1.125rem;
+    --text-6: 1rem;
+    --text-7: 0.875rem;
+    --text-8: 0.75rem;
+    --text-regular: var(--text-6);
+
+    --leading-normal: 1.6;
+
+    --font-normal: 400;
+    --font-medium: 500;
+    --font-semibold: 600;
+    --font-bold: 600;
+
+    --shadow-small: light-dark(
+      0 1px 4px rgb(0 0 0 / 0.03), 0 0.5px 1px rgb(0 0 0 / 0.02),
+      0 1px 4px rgb(0 0 0 / 0.2), 0 0.5px 1px rgb(0 0 0 / 0.15)
+    );
+    --shadow-medium: light-dark(
+      0 4px 20px -4px rgb(0 0 0 / 0.06), 0 1px 4px rgb(0 0 0 / 0.03),
+      0 4px 20px -4px rgb(0 0 0 / 0.35), 0 1px 4px rgb(0 0 0 / 0.2)
+    );
+    --shadow-large: light-dark(
+      0 16px 48px -8px rgb(0 0 0 / 0.07), 0 4px 16px -4px rgb(0 0 0 / 0.03),
+      0 16px 48px -8px rgb(0 0 0 / 0.45), 0 4px 16px -4px rgb(0 0 0 / 0.2)
+    );
+    --shadow-glow: light-dark(
+      0 0 0 0.5px rgb(0 0 0 / 0.02), 0 4px 24px -4px rgb(0 0 0 / 0.05),
+      0 0 0 0.5px rgb(255 255 255 / 0.05), 0 4px 28px -4px rgb(0 0 0 / 0.4)
+    );
+
+    --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
+    --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-spring: 500ms cubic-bezier(0.175, 0.885, 0.32, 1.1);
+
+    --z-dropdown: 50;
+    --z-modal: 200;
+  }
+
+  @media (prefers-reduced-transparency: reduce) {
+    :root {
+      --glass-blur: 0px;
+      --glass-saturate: 100%;
+      --card: light-dark(rgb(243 244 246 / 0.95), rgb(17 24 39 / 0.95));
+      --secondary: light-dark(rgb(229 231 235 / 0.95), rgb(31 41 55 / 0.92));
+      --muted: light-dark(rgb(229 231 235 / 0.92), rgb(31 41 55 / 0.88));
+      --faint: light-dark(rgb(243 244 246 / 0.9), rgb(17 24 39 / 0.85));
+      --accent: light-dark(rgb(229 231 235 / 0.95), rgb(31 41 55 / 0.92));
+      --glass-highlight: none;
+      --glass-edge: none;
+    }
+
+    *,
+    *::before,
+    *::after,
+    *::backdrop {
+      backdrop-filter: none !important;
+      -webkit-backdrop-filter: none !important;
+    }
+  }
+}

package/css/accordion.css

@@ -0,0 +1,67 @@
+@layer components {
+  details {
+    border: 1px solid var(--glass-border);
+    border-radius: var(--radius-medium);
+    overflow: hidden;
+    background-color: light-dark(rgb(255 255 255 / 0.35), rgb(255 255 255 / 0.02));
+    background-image: var(--glass-highlight);
+    box-shadow: var(--glass-edge);
+    contain: paint;
+    content-visibility: auto;
+
+    & + details {
+      margin-top: -1px;
+      border-start-start-radius: 0;
+      border-start-end-radius: 0;
+    }
+
+    &:has(+ details) {
+      border-end-start-radius: 0;
+      border-end-end-radius: 0;
+    }
+
+    &[open] summary {
+      border-bottom: 1px solid var(--border);
+    }
+  }
+
+  summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+    padding: var(--space-4);
+    font-weight: var(--font-medium);
+    cursor: pointer;
+    user-select: none;
+    transition: background-color var(--transition-fast);
+
+    &:hover {
+      background-color: var(--accent);
+    }
+
+    &::-webkit-details-marker, &::marker {
+      display: none;
+    }
+
+    &::after {
+      content: "";
+      width: 1em;
+      height: 1em;
+      flex-shrink: 0;
+      background-color: currentColor;
+      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+      mask-size: contain;
+      mask-repeat: no-repeat;
+      transition: transform var(--transition-fast);
+    }
+
+    details[open] &::after {
+      transform: rotate(180deg);
+    }
+  }
+
+  details > *:not(summary) {
+    margin: var(--space-4);
+  }
+}

package/css/alert.css

@@ -0,0 +1,68 @@
+@layer components {
+  [role="alert"] {
+    position: relative;
+    display: flex;
+    gap: var(--space-3);
+    padding: var(--space-4) var(--space-6);
+    background-color: light-dark(rgb(255 255 255 / 0.4), rgb(255 255 255 / 0.03));
+    background-image: var(--glass-highlight);
+    border: 1px solid var(--glass-border);
+    border-radius: var(--radius-medium);
+    font-size: var(--text-7);
+    box-shadow: var(--glass-edge);
+    contain: paint;
+
+    &[data-variant] {
+      border: none;
+    }
+
+    &[data-variant="error"],
+    &[data-variant="danger"] {
+      color: var(--danger);
+      background-color: light-dark(
+        color-mix(in srgb, var(--danger) 6%, rgb(255 255 255 / 0.35)),
+        color-mix(in srgb, var(--danger) 12%, rgb(0 0 0 / 0.25))
+      );
+      border: 1px solid light-dark(
+        rgb(from var(--danger) r g b / 0.15),
+        rgb(from var(--danger) r g b / 0.2)
+      );
+
+      & a {
+        color: var(--danger);
+      }
+    }
+
+    &[data-variant="success"] {
+      color: var(--success);
+      background-color: light-dark(
+        color-mix(in srgb, var(--success) 6%, rgb(255 255 255 / 0.35)),
+        color-mix(in srgb, var(--success) 12%, rgb(0 0 0 / 0.25))
+      );
+      border: 1px solid light-dark(
+        rgb(from var(--success) r g b / 0.15),
+        rgb(from var(--success) r g b / 0.2)
+      );
+
+      & a {
+        color: var(--success);
+      }
+    }
+
+    &[data-variant="warning"] {
+      color: var(--warning);
+      background-color: light-dark(
+        color-mix(in srgb, var(--warning) 6%, rgb(255 255 255 / 0.35)),
+        color-mix(in srgb, var(--warning) 12%, rgb(0 0 0 / 0.25))
+      );
+      border: 1px solid light-dark(
+        rgb(from var(--warning) r g b / 0.15),
+        rgb(from var(--warning) r g b / 0.2)
+      );
+
+      & a {
+        color: var(--warning);
+      }
+    }
+  }
+}

package/css/animations.css

@@ -0,0 +1,61 @@
+@layer animations {
+  /* Pop-in animation for modals/overlays - swings from above */
+  .animate-pop-in {
+    opacity: 1;
+    transform: perspective(1000px) rotateX(0deg) translateZ(0);
+    will-change: transform, opacity;
+    transition:
+      opacity 250ms cubic-bezier(0.175, 0.885, 0.32, 1.075),
+      transform 250ms cubic-bezier(0.175, 0.885, 0.32, 1.075),
+      overlay 250ms cubic-bezier(0.175, 0.885, 0.32, 1.075) allow-discrete,
+      display 250ms cubic-bezier(0.175, 0.885, 0.32, 1.075) allow-discrete;
+
+    /* Entry - where to animate FROM */
+    @starting-style {
+      opacity: 0;
+      transform: perspective(1000px) rotateX(-12deg) translateZ(-60px);
+    }
+
+    /* Exit - where to animate TO when closing */
+    &[data-state="closing"] {
+      opacity: 0;
+      transform: perspective(1000px) rotateX(-12deg) translateZ(-60px);
+    }
+
+    &[data-state="closing"]::backdrop {
+      opacity: 0;
+    }
+  }
+
+  /* Backdrop animation for dialogs */
+  dialog::backdrop {
+    opacity: 1;
+    transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
+
+    @starting-style {
+      opacity: 0;
+    }
+  }
+
+  /* Slide-in animation for toasts */
+  .animate-slide-in {
+    opacity: 1;
+    transform: translateX(0) scale(1);
+    will-change: transform, opacity;
+    transition:
+      opacity 300ms cubic-bezier(0.175, 0.885, 0.32, 1.075),
+      transform 300ms cubic-bezier(0.175, 0.885, 0.32, 1.075);
+
+    /* Entry - slide in from right */
+    @starting-style {
+      opacity: 0;
+      transform: translateX(100%) scale(0.95);
+    }
+
+    /* Exit - slide out to right */
+    &[data-state="closing"] {
+      opacity: 0;
+      transform: translateX(100%) scale(0.95);
+    }
+  }
+}

package/css/avatar.css

@@ -0,0 +1,49 @@
+@layer components {
+  .avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: var(--radius-full);
+    background-color: var(--secondary);
+    color: var(--secondary-foreground);
+    font-size: var(--text-7);
+    font-weight: var(--font-medium);
+    overflow: hidden;
+    flex-shrink: 0;
+    vertical-align: middle;
+    border: 1.5px solid light-dark(rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.06));
+    box-shadow: var(--shadow-small);
+
+    & > img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    &.small {
+      width: 1.75rem;
+      height: 1.75rem;
+      font-size: var(--text-8);
+    }
+
+    &.large {
+      width: 3.5rem;
+      height: 3.5rem;
+      font-size: var(--text-5);
+    }
+  }
+
+  .avatar-group {
+    display: flex;
+
+    .avatar {
+      border: 2px solid var(--background);
+
+      &:not(:first-child) {
+        margin-inline-start: -0.5rem;
+      }
+    }
+  }
+}

package/css/badge.css

@@ -0,0 +1,56 @@
+@layer components {
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding: var(--space-1) var(--space-4);
+    font-size: var(--text-8);
+    font-weight: var(--font-medium);
+    line-height: var(--leading-normal);
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+    border-radius: var(--radius-full);
+    border: 1px solid rgb(from #fff r g b / 0.12);
+    box-shadow: var(--shadow-small);
+
+    &.secondary {
+      background-color: var(--secondary);
+      color: var(--secondary-foreground);
+      border-color: light-dark(rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.06));
+    }
+
+    &.outline {
+      background-color: transparent;
+      color: var(--foreground);
+      border: 1px solid var(--border);
+      box-shadow: none;
+    }
+
+    &.success {
+      color: var(--success);
+      border-color: light-dark(rgb(from var(--success) r g b / 0.15), rgb(from var(--success) r g b / 0.2));
+      background-color: light-dark(
+        color-mix(in srgb, var(--success) 8%, rgb(255 255 255 / 0.35)),
+        color-mix(in srgb, var(--success) 15%, rgb(0 0 0 / 0.25))
+      );
+    }
+
+    &.warning {
+      color: var(--warning);
+      border-color: light-dark(rgb(from var(--warning) r g b / 0.15), rgb(from var(--warning) r g b / 0.2));
+      background-color: light-dark(
+        color-mix(in srgb, var(--warning) 8%, rgb(255 255 255 / 0.35)),
+        color-mix(in srgb, var(--warning) 15%, rgb(0 0 0 / 0.25))
+      );
+    }
+
+    &.danger {
+      color: var(--danger);
+      border-color: light-dark(rgb(from var(--danger) r g b / 0.15), rgb(from var(--danger) r g b / 0.2));
+      background-color: light-dark(
+        color-mix(in srgb, var(--danger) 8%, rgb(255 255 255 / 0.35)),
+        color-mix(in srgb, var(--danger) 15%, rgb(0 0 0 / 0.25))
+      );
+    }
+  }
+}