agnosticui-core 2.0.0-alpha.2 → 2.0.0-alpha.21

package/src/components/Checkbox/core/_Checkbox.ts

@@ -5,6 +5,7 @@ import {
   createFormControlIds,
   buildAriaDescribedBy,
 } from '../../../shared/form-control-utils';
+import { FaceMixin, syncInnerInputValidity } from '../../../shared/face-mixin';
 
 export type CheckboxSize = 'small' | 'medium' | 'large';
 export type CheckboxTheme = 'default' | 'primary' | 'success' | 'monochrome';
@@ -26,15 +27,15 @@ export type CheckboxChangeEvent = CustomEvent<CheckboxChangeEventDetail>;
  * @csspart ag-checkbox-label - The label text span
  */
 export interface CheckboxProps {
-  name: string;
-  value: string;
-  checked: boolean;
-  indeterminate: boolean;
-  disabled: boolean;
-  size: CheckboxSize;
-  theme: CheckboxTheme;
-  labelText: string;
-  labelPosition: 'end' | 'start';
+  name?: string;
+  value?: string;
+  checked?: boolean;
+  indeterminate?: boolean;
+  disabled?: boolean;
+  size?: CheckboxSize;
+  theme?: CheckboxTheme;
+  labelText?: string;
+  labelPosition?: 'end' | 'start';
   // Validation & hints
   required?: boolean;
   invalid?: boolean;
@@ -45,7 +46,7 @@ export interface CheckboxProps {
   onChange?: (event: CheckboxChangeEvent) => void;
 }
 
-export class AgCheckbox extends LitElement implements CheckboxProps {
+export class AgCheckbox extends FaceMixin(LitElement) implements CheckboxProps {
   static override styles = [
     formControlStyles,
     css`
@@ -58,7 +59,7 @@ export class AgCheckbox extends LitElement implements CheckboxProps {
       align-items: center;
       cursor: pointer;
       user-select: none;
-      gap: var(--ag-space-3);
+      gap: 0;
     }
 
     :host([disabled]) .checkbox-wrapper {
@@ -249,15 +250,15 @@ export class AgCheckbox extends LitElement implements CheckboxProps {
     }
 
     .checkbox-label-copy--small {
-      font-size: 0.875rem;
+      font-size: var(--ag-font-size-sm);
     }
 
     .checkbox-label-copy--medium {
-      font-size: 1rem;
+      font-size: var(--ag-font-size-sm);
     }
 
     .checkbox-label-copy--large {
-      font-size: 1.125rem;
+      font-size: var(--ag-font-size-base);
     }
 
     /* Respect reduced motion preferences */
@@ -278,9 +279,6 @@ export class AgCheckbox extends LitElement implements CheckboxProps {
   `,
   ];
 
-  @property({ type: String })
-  declare name: string;
-
   @property({ type: String })
   declare value: string;
 
@@ -331,7 +329,6 @@ export class AgCheckbox extends LitElement implements CheckboxProps {
 
   constructor() {
     super();
-    this.name = '';
     this.value = '';
     this.checked = false;
     this.indeterminate = false;
@@ -353,6 +350,52 @@ export class AgCheckbox extends LitElement implements CheckboxProps {
     return this.inputRef || null;
   }
 
+  // ─── FACE ─────────────────────────────────────────────────────────────────
+
+  /**
+   * FACE lifecycle: called when the parent form is reset.
+   * Restores checked and indeterminate to their default states.
+   */
+  override formResetCallback(): void {
+    this.checked = false;
+    this.indeterminate = false;
+    this._internals.setFormValue(null);
+    this._internals.setValidity({});
+    this._syncStates();
+  }
+
+  /**
+   * Sync validity to ElementInternals by delegating to the inner
+   * <input type="checkbox">. Required validation is handled natively
+   * by the inner input; we just mirror its state.
+   */
+  private _syncValidity(): void {
+    syncInnerInputValidity(this._internals, this.inputRef);
+  }
+
+  /**
+   * Sync CustomStateSet states so :state() pseudo-classes work from external CSS.
+   *
+   * Must be called AFTER _syncValidity() so that :state(invalid) reads the
+   * freshly-updated _internals.validity.valid value.
+   *
+   * Exposed states:
+   *  :state(checked)       — checkbox is checked
+   *  :state(indeterminate) — checkbox is in indeterminate state
+   *  :state(disabled)      — checkbox is disabled
+   *  :state(required)      — checkbox is required
+   *  :state(invalid)       — FACE constraint validation is failing
+   */
+  private _syncStates(): void {
+    this._setState('checked', this.checked);
+    this._setState('indeterminate', this.indeterminate);
+    this._setState('disabled', this.disabled);
+    this._setState('required', this.required);
+    this._setState('invalid', !this._internals.validity.valid);
+  }
+
+  // ─── End FACE ─────────────────────────────────────────────────────────────
+
   override updated(changedProperties: Map<string, unknown>) {
     super.updated(changedProperties);
 
@@ -360,6 +403,13 @@ export class AgCheckbox extends LitElement implements CheckboxProps {
     if (changedProperties.has('indeterminate') && this.inputRef) {
       this.inputRef.indeterminate = this.indeterminate;
     }
+
+    // FACE: sync form value and validity for programmatic changes to checked/indeterminate
+    if (changedProperties.has('checked') || changedProperties.has('indeterminate')) {
+      this._internals.setFormValue(this.checked ? (this.value || 'on') : null);
+      this._syncValidity();
+      this._syncStates();
+    }
   }
 
   private handleClick(e: MouseEvent) {
@@ -383,6 +433,11 @@ export class AgCheckbox extends LitElement implements CheckboxProps {
       this.indeterminate = false;
     }
 
+    // FACE: sync form value and validity on user interaction
+    this._internals.setFormValue(this.checked ? (this.value || 'on') : null);
+    this._syncValidity();
+    this._syncStates();
+
     // Dispatch custom change event with dual-dispatch pattern
     const changeEvent = new CustomEvent<CheckboxChangeEventDetail>('change', {
       detail: {
@@ -526,5 +581,10 @@ export class AgCheckbox extends LitElement implements CheckboxProps {
     if (this.inputRef && this.indeterminate) {
       this.inputRef.indeterminate = this.indeterminate;
     }
+
+    // FACE: set initial form value and sync validity after first render
+    this._internals.setFormValue(this.checked ? (this.value || 'on') : null);
+    this._syncValidity();
+    this._syncStates();
   }
 }

package/src/components/Checkbox/vue/VueCheckbox.vue

@@ -23,11 +23,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
 import type {
   CheckboxProps,
-  CheckboxSize,
-  CheckboxTheme,
   CheckboxChangeEvent,
   CheckboxChangeEventDetail,
 } from "../core/Checkbox";
@@ -62,9 +59,6 @@ const emit = defineEmits<{
   (e: "update:indeterminate", indeterminate: boolean): void;
 }>();
 
-// Template ref
-const checkboxRef = ref<HTMLElement>();
-
 // Event handlers that bridge web component events to Vue emits
 const handleClick = (event: MouseEvent) => {
   emit("click", event);

package/src/components/Combobox/core/_Combobox.ts

@@ -16,6 +16,7 @@
 
 import { LitElement, html, css, nothing } from 'lit';
 import { property, state, query } from 'lit/decorators.js';
+import { FaceMixin, type ValidationMessages } from '../../../shared/face-mixin';
 import {
   createFormControlIds,
   buildAriaDescribedBy,
@@ -116,6 +117,7 @@ export interface ComboboxProps {
   onClose?: (event: ComboboxCloseEvent) => void;
   onFocus?: (event: FocusEvent) => void;
   onBlur?: (event: FocusEvent) => void;
+  validationMessages?: ValidationMessages;
 }
 
 /**
@@ -138,7 +140,7 @@ export interface ComboboxProps {
  * @csspart ag-combobox-help-text - Help text element
  * @csspart ag-combobox-error-message - Error message element
  */
-export class AgCombobox extends LitElement implements ComboboxProps {
+export class AgCombobox extends FaceMixin(LitElement) implements ComboboxProps {
   static styles = [
     formControlStyles,
     css`
@@ -200,7 +202,7 @@ export class AgCombobox extends LitElement implements ComboboxProps {
     }
 
     .combobox-input::placeholder {
-      color: var(--ag-text-tertiary);
+      color: var(--ag-text-secondary);
     }
 
     .combobox-input:disabled {
@@ -615,6 +617,9 @@ export class AgCombobox extends LitElement implements ComboboxProps {
   @property({ attribute: false })
   declare onBlur?: (event: FocusEvent) => void;
 
+  @property({ attribute: false })
+  declare validationMessages: ValidationMessages | undefined;
+
   // Internal state
   @state()
   private _open = false;
@@ -681,6 +686,7 @@ export class AgCombobox extends LitElement implements ComboboxProps {
     this.loading = false;
     this.loadingText = 'Loading...';
     this.noResultsText = 'No results found';
+    this.validationMessages = undefined;
   }
 
   connectedCallback() {
@@ -746,6 +752,15 @@ export class AgCombobox extends LitElement implements ComboboxProps {
     }
   }
 
+  override updated(changedProperties: Map<string, unknown>) {
+    super.updated(changedProperties);
+    // FACE: sync for programmatic value changes
+    if (changedProperties.has('value')) {
+      this._syncFormValue();
+      this._syncValidity();
+    }
+  }
+
   // Public methods
   focus() {
     this._inputElement?.focus();
@@ -876,6 +891,10 @@ export class AgCombobox extends LitElement implements ComboboxProps {
     this.dispatchEvent(selectEvent);
     this.onSelect?.(selectEvent);
 
+    // FACE: sync form value and validity after selection
+    this._syncFormValue();
+    this._syncValidity();
+
     // Dispatch change event (value is already updated by _selectionChanged)
     const changeEvent = new CustomEvent<ComboboxChangeEventDetail>('change', {
       detail: {
@@ -914,6 +933,10 @@ export class AgCombobox extends LitElement implements ComboboxProps {
     this._selectionChanged();
     this._activeIndex = -1;
 
+    // FACE: sync form value and validity on clear
+    this._syncFormValue();
+    this._syncValidity();
+
     // Dispatch change event
     const changeEvent = new CustomEvent<ComboboxChangeEventDetail>('change', {
       detail: {
@@ -927,6 +950,65 @@ export class AgCombobox extends LitElement implements ComboboxProps {
     this.onChange?.(changeEvent);
   }
 
+  // ─── FACE ─────────────────────────────────────────────────────────────────
+
+  /**
+   * Sync the form value to ElementInternals.
+   * Single: submits the selected value string, or null if nothing selected.
+   * Multiple: submits all selected values via FormData overload.
+   * Typed text that hasn't been committed via selectOption() is never submitted.
+   */
+  private _syncFormValue(): void {
+    if (this.multiple) {
+      const selected = Array.isArray(this.value) ? this.value : [];
+      if (selected.length === 0) {
+        this._internals.setFormValue(null);
+      } else {
+        const formData = new FormData();
+        selected.forEach(val => formData.append(this.name, val));
+        this._internals.setFormValue(formData);
+      }
+    } else {
+      const val = typeof this.value === 'string' ? this.value : '';
+      this._internals.setFormValue(val || null);
+    }
+  }
+
+  /**
+   * Sync validity. Required with no selection = valueMissing.
+   */
+  private _syncValidity(): void {
+    const hasValue = this.multiple
+      ? (Array.isArray(this.value) && this.value.length > 0)
+      : !!(typeof this.value === 'string' && this.value);
+    if (this.required && !hasValue) {
+      this._internals.setValidity(
+        { valueMissing: true },
+        this.validationMessages?.valueMissing ?? 'Please select an option.'
+      );
+    } else {
+      this._internals.setValidity({});
+    }
+  }
+
+  override firstUpdated() {
+    this._syncFormValue();
+    this._syncValidity();
+  }
+
+  /**
+   * FACE lifecycle: called when the parent form is reset.
+   * Clears selection and re-syncs form value.
+   */
+  override formResetCallback(): void {
+    this._selectedOptions = [];
+    this._selectionChanged();
+    this._internals.setFormValue(null);
+    this._internals.setValidity({});
+  }
+
+  // ─── End FACE ─────────────────────────────────────────────────────────────
+
   // Private methods
   private _selectionChanged() {
     if (this.multiple) {

package/src/components/Combobox/vue/VueCombobox.vue

@@ -132,6 +132,7 @@ defineExpose({
     .clearable="clearable"
     .readonly="readonly"
     .required="required"
+    .validationMessages="validationMessages"
     .loading="loading"
     .multiple="multiple"
     .closeOnSelect="closeOnSelect"

package/src/components/Drawer/v1/dialog--drawer-bottom.hbs

@@ -0,0 +1,48 @@
+<div class="dialog drawer-bottom"
+     id="dialog-example"
+     aria-hidden="true"
+     aria-labelledby="drawer-end-title"
+     aria-describedby="drawer-end-description">
+  <div class="dialog-overlay"
+       data-a11y-dialog-hide></div>
+  <div class="dialog-content drawer-content drawer-slide-bottom"
+       role="document">
+    <div class="mbs16 mbe24 mis16 mie16">
+      <button data-a11y-dialog-hide
+              class="close-button close-button-large dialog-close"
+              aria-label="Close this dialog window">
+        <svg class="close"
+             viewBox="0 0 24 24"
+             aria-hidden="true">
+          <path fill="currentColor"
+                d="M.439 21.44a1.5 1.5 0 0 0 2.122 2.121l9.262-9.261a.25.25 0 0 1 .354 0l9.262 9.263a1.5 1.5 0 1 0 2.122-2.121L14.3 12.177a.25.25 0 0 1 0-.354l9.263-9.262A1.5 1.5 0 0 0 21.439.44L12.177 9.7a.25.25 0 0 1-.354 0L2.561.44A1.5 1.5 0 0 0 .439 2.561L9.7 11.823a.25.25 0 0 1 0 .354Z" />
+        </svg>
+      </button>
+
+      <h1 id="drawer-end-title">Subscribe to our newsletter</h1>
+      <p id="drawer-end-description">
+        Fill in the form below to receive our newsletter!
+      </p>
+      <form class="dialog-form-demo">
+        <label class="label"
+               for="email">Email (required)</label>
+        <input class="input input-rounded"
+               type="email"
+               name="EMAIL"
+               id="email"
+               placeholder="john.doe@gmail.com"
+               required />
+        <button class="btn btn-primary btn-rounded btn-block"
+                type="submit"
+                name="button">Sign up</button>
+      </form>
+    </div>
+  </div>
+</div>
+
+<button type="button"
+        class="btn btn-primary btn-bordered"
+        data-a11y-dialog-show="dialog-example">
+  Open drawer
+</button>
+

package/src/components/Drawer/v1/dialog--drawer-end.hbs

@@ -0,0 +1,48 @@
+<div class="dialog drawer-end"
+     id="dialog-example"
+     aria-hidden="true"
+     aria-labelledby="drawer-end-title"
+     aria-describedby="drawer-end-description">
+  <div class="dialog-overlay"
+       data-a11y-dialog-hide></div>
+  <div class="dialog-content drawer-content drawer-slide-end"
+       role="document">
+    <div class="mbs16 mbe24 mis16 mie16">
+      <button data-a11y-dialog-hide
+              class="close-button close-button-large dialog-close"
+              aria-label="Close this dialog window">
+        <svg class="close"
+             viewBox="0 0 24 24"
+             aria-hidden="true">
+          <path fill="currentColor"
+                d="M.439 21.44a1.5 1.5 0 0 0 2.122 2.121l9.262-9.261a.25.25 0 0 1 .354 0l9.262 9.263a1.5 1.5 0 1 0 2.122-2.121L14.3 12.177a.25.25 0 0 1 0-.354l9.263-9.262A1.5 1.5 0 0 0 21.439.44L12.177 9.7a.25.25 0 0 1-.354 0L2.561.44A1.5 1.5 0 0 0 .439 2.561L9.7 11.823a.25.25 0 0 1 0 .354Z" />
+        </svg>
+      </button>
+
+      <h1 id="drawer-end-title">Subscribe to our newsletter</h1>
+      <p id="drawer-end-description">
+        Fill in the form below to receive our newsletter!
+      </p>
+      <form class="dialog-form-demo">
+        <label class="label"
+               for="email">Email (required)</label>
+        <input class="input input-rounded"
+               type="email"
+               name="EMAIL"
+               id="email"
+               placeholder="john.doe@gmail.com"
+               required />
+        <button class="btn btn-primary btn-rounded btn-block"
+                type="submit"
+                name="button">Sign up</button>
+      </form>
+    </div>
+  </div>
+</div>
+
+<button type="button"
+        class="btn btn-primary btn-bordered"
+        data-a11y-dialog-show="dialog-example">
+  Open drawer
+</button>
+

package/src/components/Drawer/v1/dialog--drawer-start.hbs

@@ -0,0 +1,48 @@
+<div class="dialog drawer-start"
+     id="dialog-example"
+     aria-hidden="true"
+     aria-labelledby="drawer-end-title"
+     aria-describedby="drawer-end-description">
+  <div class="dialog-overlay"
+       data-a11y-dialog-hide></div>
+  <div class="dialog-content drawer-content drawer-slide-start"
+       role="document">
+    <div class="mbs16 mbe24 mis16 mie16">
+      <button data-a11y-dialog-hide
+              class="close-button close-button-large dialog-close"
+              aria-label="Close this dialog window">
+        <svg class="close"
+             viewBox="0 0 24 24"
+             aria-hidden="true">
+          <path fill="currentColor"
+                d="M.439 21.44a1.5 1.5 0 0 0 2.122 2.121l9.262-9.261a.25.25 0 0 1 .354 0l9.262 9.263a1.5 1.5 0 1 0 2.122-2.121L14.3 12.177a.25.25 0 0 1 0-.354l9.263-9.262A1.5 1.5 0 0 0 21.439.44L12.177 9.7a.25.25 0 0 1-.354 0L2.561.44A1.5 1.5 0 0 0 .439 2.561L9.7 11.823a.25.25 0 0 1 0 .354Z" />
+        </svg>
+      </button>
+
+      <h1 id="drawer-end-title">Subscribe to our newsletter</h1>
+      <p id="drawer-end-description">
+        Fill in the form below to receive our newsletter!
+      </p>
+      <form class="dialog-form-demo">
+        <label class="label"
+               for="email">Email (required)</label>
+        <input class="input input-rounded"
+               type="email"
+               name="EMAIL"
+               id="email"
+               placeholder="john.doe@gmail.com"
+               required />
+        <button class="btn btn-primary btn-rounded btn-block"
+                type="submit"
+                name="button">Sign up</button>
+      </form>
+    </div>
+  </div>
+</div>
+
+<button type="button"
+        class="btn btn-primary btn-bordered"
+        data-a11y-dialog-show="dialog-example">
+  Open drawer
+</button>
+

package/src/components/Drawer/v1/dialog--drawer-top.hbs

@@ -0,0 +1,48 @@
+<div class="dialog drawer-top"
+     id="dialog-example"
+     aria-hidden="true"
+     aria-labelledby="drawer-end-title"
+     aria-describedby="drawer-end-description">
+  <div class="dialog-overlay"
+       data-a11y-dialog-hide></div>
+  <div class="dialog-content drawer-content drawer-slide-top"
+       role="document">
+    <div class="mbs16 mbe24 mis16 mie16">
+      <button data-a11y-dialog-hide
+              class="close-button close-button-large dialog-close"
+              aria-label="Close this dialog window">
+        <svg class="close"
+             viewBox="0 0 24 24"
+             aria-hidden="true">
+          <path fill="currentColor"
+                d="M.439 21.44a1.5 1.5 0 0 0 2.122 2.121l9.262-9.261a.25.25 0 0 1 .354 0l9.262 9.263a1.5 1.5 0 1 0 2.122-2.121L14.3 12.177a.25.25 0 0 1 0-.354l9.263-9.262A1.5 1.5 0 0 0 21.439.44L12.177 9.7a.25.25 0 0 1-.354 0L2.561.44A1.5 1.5 0 0 0 .439 2.561L9.7 11.823a.25.25 0 0 1 0 .354Z" />
+        </svg>
+      </button>
+
+      <h1 id="drawer-end-title">Subscribe to our newsletter</h1>
+      <p id="drawer-end-description">
+        Fill in the form below to receive our newsletter!
+      </p>
+      <form class="dialog-form-demo">
+        <label class="label"
+               for="email">Email (required)</label>
+        <input class="input input-rounded"
+               type="email"
+               name="EMAIL"
+               id="email"
+               placeholder="john.doe@gmail.com"
+               required />
+        <button class="btn btn-primary btn-rounded btn-block"
+                type="submit"
+                name="button">Sign up</button>
+      </form>
+    </div>
+  </div>
+</div>
+
+<button type="button"
+        class="btn btn-primary btn-bordered"
+        data-a11y-dialog-show="dialog-example">
+  Open drawer
+</button>
+

package/src/components/Drawer/v1/dialog-demo.css

@@ -0,0 +1,13 @@
+.dialog h1 {
+  margin: 0;
+
+  /* Since this is in a modal we want to force it smaller */
+  font-size: var(--agnostic-h3);
+  font-weight: 400;
+  line-height: 1;
+  margin-block-end: var(--fluid-16);
+}
+
+.dialog-form-demo > input {
+  margin-block-end: var(--fluid-24);
+}

package/src/components/Drawer/v1/dialog.config.yml

@@ -0,0 +1,5 @@
+title: Dialog
+notes: |
+  Dialog is a base-level implementation of a dialog component that can/will be leveraged for other components like popover, modal, menu, etc. Currently, the demo here is utilizing Kitty Giraudel's [a11y-dialog](https://github.com/KittyGiraudel/a11y-dialog) which is a very clean styling-agnostic JavaScript implementation that supports what you'd expect from an a11y-compliant dialog and has saved me a lot of time while I figure out the styles. Thus, the structure should be consistent with what `a11y-dialog` recommends in terms of markup structure. The `a11y-dialog` script is currently pulled in via CDN.
+
+  To be absolutely 100% clear, if you utilize AgnosticUI's CSS package, you only get the HTML/CSS for dialog. The functionality in terms of showing / dismissing the dialog, navigating with your keyboard, etc., is being handled by [a11y-dialog](https://github.com/KittyGiraudel/a11y-dialog). The AgnosticUI framework implementations (React, Angular, Svelte, Vue, etc.) likely WILL handle said functionality once they've been implemented (not the case at time of writing).

package/src/components/Drawer/v1/dialog.css

@@ -0,0 +1,99 @@
+.dialog,
+.dialog-overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.dialog {
+  z-index: 1001;
+  display: flex;
+}
+
+.dialog[aria-hidden="true"] {
+  display: none;
+}
+
+.dialog-overlay {
+  background-color: rgb(50 50 50 / 60%);
+  animation: fade-in var(--agnostic-timing-fast) both;
+}
+
+.dialog-content {
+  background-color: var(--agnostic-light);
+  margin: auto;
+  z-index: 1001;
+  position: relative;
+  padding: var(--fluid-16);
+  max-width: 90%;
+  width: 600px;
+  border-radius: var(--agnostic-radius);
+}
+
+.dialog-fade-in {
+  animation: fade-in var(--agnostic-timing-fast) both;
+}
+
+.dialog-slide-up {
+  animation: slide-up var(--agnostic-timing-slow) var(--agnostic-timing-fast) both;
+}
+
+/**
+ * Cannot use two separate CSS classes with animation: foo, bar
+ * as the later class will overwrite the first (so this combines)
+ */
+.dialog-slide-up-fade-in {
+  animation:
+    fade-in var(--agnostic-timing-fast) both,
+    slide-up var(--agnostic-timing-slow) var(--agnostic-timing-fast) both;
+}
+
+@media screen and (min-width: 700px) {
+  .dialog-content {
+    padding: var(--fluid-32);
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0%;
+  }
+}
+
+@keyframes slide-up {
+  from {
+    transform: translateY(10%);
+  }
+}
+
+/* Shared with AgnosticUI close buton so only need positioning and transition */
+.dialog-close {
+  position: absolute;
+  top: var(--fluid-8);
+  right: var(--fluid-8);
+}
+
+@media (prefers-reduced-motion), (update: slow) {
+  .dialog-slide-up-fade-in,
+  .dialog-fade-in,
+  .dialog-slide-up,
+  .dialog-content {
+    transition-duration: 0.001ms !important;
+  }
+}
+
+@media only screen and (min-width: 576px) {
+  .dialog-close {
+    top: var(--fluid-12);
+    right: var(--fluid-12);
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .dialog-close {
+    top: var(--fluid-16);
+    right: var(--fluid-16);
+  }
+}