native-document 1.0.16 → 1.0.17-1.2

package/src/ui/tokens/layouts.scss

@@ -0,0 +1,228 @@
+:root {
+  --z-stack-z-index: 10_000;
+  --glass-color: rgba(255, 255, 255, 0.4);
+  --glass-blur: blur(1px);
+  --glass-shadow:  0px 4px 30px rgba(0, 0, 0, 0.2);
+  --glass-border: rgba(255, 255, 255, .5);
+}
+
+.flex {
+  display: flex;
+  justify-content: space-between;
+  align-content: center;
+  align-items: center;
+  column-gap: var(--space-tight);
+  &.started, &.leading {
+    justify-content: flex-start;
+  }
+  &.centered {
+    justify-content: center;
+  }
+  &.ended, &.trailing {
+    justify-content: flex-end;
+  }
+}
+.flex-fill, .flex-spacer {
+  flex: 1;
+}
+.grid {
+  display: grid;
+  grid-gap: var(--space-tight);
+}
+.custom-grid {
+  display: grid;
+  grid-template-columns: attr(data-columns, 1fr);
+  grid-template-rows: attr(data-rows, 0fr);
+  column-gap: var(--space-tight);
+  row-gap: var(--space-tight);
+}
+.h-stack, .h-stack-multiline {
+  display: flex;
+  flex-direction: row;
+  column-gap: var(--space-tight);
+  row-gap: var(--space-tight);
+  align-items: center;
+  align-content: center;
+}
+.h-stack-responsive {
+  display: flex;
+  flex-direction: column;
+  column-gap: var(--space-tight);
+  row-gap: var(--space-tight);
+  align-items: stretch;
+  align-content: center;
+}
+.h-stack-multiline {
+  flex-wrap: wrap;
+}
+.v-stack {
+  display: flex;
+  flex-direction: column;
+  column-gap: var(--space-tight);
+  row-gap: var(--space-tight);
+  align-items: stretch;
+  align-content: center;
+}
+body.z-stack-open {
+  overflow: hidden;
+}
+.z-stack, .z-stack-relative {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: var(--z-stack-z-index);
+  backdrop-filter: var(--glass-blur);
+  &.fill-parent {
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
+  .top {
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+  .top-center {
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  .top-right {
+    top: 0;
+    right: 0;
+  }
+  .top-left {
+    top: 0;
+    left: 0;
+  }
+
+  .bottom {
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+  .bottom-center {
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  .bottom-right {
+    bottom: 0;
+    right: 0;
+  }
+  .bottom-left {
+    bottom: 0;
+    left: 0;
+  }
+
+  .center {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .left,
+  .left-center {
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  .right,
+  .right-center {
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+}
+
+.z-stack {
+  position: fixed;
+}
+.z-stack-relative {
+  position: absolute;
+}
+
+/** Alignment */
+.align-start, .align-top {
+  justify-content: flex-start;
+}
+.align-center, .align-middle {
+  justify-content: center;
+}
+.align-end, .align-bottom {
+  justify-content: flex-end;
+}
+.align-stretch {
+  justify-content: stretch;
+}
+.align-between {
+  justify-content: space-between;
+}
+.align-around {
+  justify-content: space-around;
+}
+.align-evenly {
+  justify-content: space-evenly;
+}
+
+/** Content Alignment */
+.content-stretch {
+  align-items: stretch;
+}
+.content-center, .content-middle {
+  align-items: center;
+}
+.content-start, .content-top {
+  align-items: flex-start;
+}
+.content-end, .content-bottom {
+  align-items: flex-end;
+}
+
+/** Spacing */
+.space-tiny {
+  column-gap: var(--space-tiny);
+  row-gap: var(--space-tiny);
+}
+.space-tight {
+  column-gap: var(--space-tight);
+  row-gap: var(--space-tight);
+}
+.space-cozy {
+  column-gap: var(--space-cozy);
+  row-gap: var(--space-cozy);
+}
+.space-cozy-comfortable {
+  column-gap: var(--space-cozy-comfortable);
+  row-gap: var(--space-cozy-comfortable);
+}
+.space-comfortable {
+  column-gap: var(--space-comfortable);
+  row-gap: var(--space-comfortable);
+}
+.space-relaxed {
+  column-gap: var(--space-relaxed);
+  row-gap: var(--space-relaxed);
+}
+.space-loose {
+  column-gap: var(--space-loose);
+  row-gap: var(--space-loose);
+}
+.space-spacious {
+  column-gap: var(--space-spacious);
+  row-gap: var(--space-spacious);
+}
+
+/** Text Alignment */
+.text-center {
+  text-align: center;
+}
+
+@media only screen and (min-width: 768px) {
+  .h-stack-responsive {
+    flex-direction: row;
+  }
+}

package/src/ui/tokens/opacity.scss

@@ -0,0 +1,21 @@
+:root {
+  --opacity-hidden: 0;
+  --opacity-disabled: .5;
+  --opacity-middle: .5;
+  --opacity-backdrop: .7;
+  --opacity-unfocused: .8;
+  --opacity-visible: 1;
+
+  --opacity-ghost: .1;
+  --opacity-faint: .2;
+  --opacity-subtle: .3;
+  --opacity-light: .4;
+  --opacity-medium: .5;
+  --opacity-moderate: .6;
+  --opacity-strong: .7;
+  --opacity-bold: .8;
+  --opacity-intense: .9;
+  --opacity-full: 1;
+
+  --background-opacity: .35;
+}

package/src/ui/tokens/others.scss

@@ -0,0 +1,11 @@
+:root {
+  --radius-small: 0.25rem;
+  --radius-medium: 0.5rem;
+  --radius-large: 1rem;
+  --radius-round: 50%;
+  --radius-pill: 35px;
+  --radius-none: 0;
+
+
+  --radius-modal: 12px;
+}

package/src/ui/tokens/radius.scss

@@ -0,0 +1,6 @@
+:root {
+  --radius-button: 5px;
+  --radius-card: 5px;
+  --radius-pill: 35px;
+  --radius-x: 10px;
+}

package/src/ui/tokens/reset.scss

@@ -0,0 +1,51 @@
+/* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+th, td {
+  vertical-align: middle;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

package/src/ui/tokens/shadows.scss

@@ -0,0 +1,29 @@
+:root {
+  --shadow-focus-color: rgba(59, 130, 246, 0.5);
+  --shadow-inner-color: rgba(0, 0, 0, 0.06);
+  --shadow-outline-color: rgba(59, 130, 246, 0.5);
+  --shadow-glow-color: rgba(59, 130, 246, 0.3);
+
+  --shadow-none: none;
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1),
+               0 1px 2px rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07),
+               0 2px 4px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1),
+               0 4px 6px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1),
+               0 10px 10px rgba(0, 0, 0, 0.04);
+  --shadow-double-xl: 0 25px 50px rgba(0, 0, 0, 0.25);
+
+  --shadow-card: 0 4px 6px rgba(0, 0, 0, 0.07);
+  --shadow-button: 0 2px 4px rgba(0, 0, 0, 0.1);
+  --shadow-modal: 0 20px 25px rgba(0, 0, 0, 0.15);
+  --shadow-dropdown: 0 10px 15px rgba(0, 0, 0, 0.1);
+  --shadow-tooltip: 0 4px 8px rgba(0, 0, 0, 0.12);
+
+  --shadow-focus: 0 0 0 3px var(--shadow-focus-color);
+  --shadow-inner: inset 0 2px 4px var(--shadow-inner-color);
+  --shadow-outline: 0 0 0 3px var(--shadow-outline-color);
+  --shadow-glow: 0 0 20px var(--shadow-glow-color);
+}

package/src/ui/tokens/spacings.scss

@@ -0,0 +1,13 @@
+:root {
+  --space-tiny: 0.25rem;
+  --space-tight: 0.35rem;
+  --space-cozy: 0.5rem;
+  --space-cozy-comfortable: 0.75rem;
+  --space-comfortable: 1rem;
+  --space-relaxed: 1.5rem;
+  --space-loose: 2rem;
+  --space-spacious: 3rem;
+
+  --container-padding: 1rem;
+  --container-margin: 0rem;
+}

package/src/ui/tokens/vars.scss

@@ -0,0 +1,35 @@
+:root {
+  /* Primary */
+  --color-primary:          var(--blue);
+  --color-primary-hover:    var(--contrasted-blue);
+
+  /* Secondary */
+  --color-secondary:        var(--gray-lite-4);
+  --color-secondary-hover:  var(--gray-lite-3);
+  --color-secondary-text:   var(--text-color);
+
+  /* Danger */
+  --color-danger:           var(--red);
+  --color-danger-hover:     var(--contrasted-red);
+
+  /* Success */
+  --color-success:          var(--green);
+  --color-success-hover:    var(--contrasted-green);
+
+  /* Warning */
+  --color-warning:          var(--yellow);
+  --color-warning-hover:    var(--contrasted-yellow);
+
+  /* Info */
+  --color-info:             var(--cyan);
+  --color-info-hover:       var(--contrasted-cyan);
+
+  /* Ghost */
+  --color-ghost:            transparent;
+  --color-ghost-hover:      var(--gray-lite-5);
+  --color-ghost-text:       var(--text-color);
+
+  /* Link */
+  --color-link:             var(--blue);
+  --color-link-hover:       var(--contrasted-blue);
+}

package/src/ui/tokens/viewports.scss

@@ -0,0 +1,30 @@
+
+:root {
+  --mobile-width: 320px;
+  --tablet-width: 768px;
+  --desktop-width: 1024px;
+  --wide-desktop-width: 1280px;
+  --fullhd-width: 1440px;
+
+  --floor-layer: 0;
+  --noitifcation-layer: 1;
+  --dropdown-layer: 4;
+  --tooltip-layer: 2;
+  --overlay-layer: 10000;
+  --modal-layer: 10001;
+}
+
+@media only screen and (min-width: 768px) {
+  .mobile-only {
+    display: none;
+  }
+}
+
+@media only screen and (max-width: 768px) {
+  .desktop-only {
+    display: none;
+  }
+  .at-least-tablet {
+    display: none;
+  }
+}

package/src/ui/utils/aria.js

@@ -0,0 +1,19 @@
+/**
+ * Applies aria attributes on a trigger element for overlay components.
+ * Sets aria-haspopup and keeps aria-expanded in sync with the isOpen observable.
+ *
+ * @param {HTMLElement} triggerSource - The trigger element
+ * @param {ObservableItem<boolean>} isOpen - Observable controlling the open state
+ * @param {'menu'|'listbox'|'dialog'|'tree'|'grid'} [type='menu'] - aria-haspopup value
+ */
+export const ariaTrigger = (triggerSource, isOpen, type = 'menu') => {
+    const triggerEl = triggerSource?.toNdElement?.() ?? triggerSource;
+    if(!triggerEl) {
+        return;
+    }
+    triggerEl.setAttribute('aria-haspopup', type);
+    triggerEl.setAttribute('aria-expanded', 'false');
+    isOpen.subscribe((value) => {
+        triggerEl.setAttribute('aria-expanded', String(value));
+    });
+};

package/tests/integration/ui/attributes-wrapper.test.js

@@ -0,0 +1,177 @@
+import { describe, it, expect, vi } from 'vitest';
+import { Observable } from '../../../src/core/data/Observable';
+
+vi.mock('../../../src/core/utils/debug-manager', () => ({
+    default: { log: vi.fn(), warn: vi.fn(), error: vi.fn(), disable: vi.fn() },
+}));
+
+import { Div, Input, Span } from '../../../elements';
+
+describe('AttributesWrapper', () => {
+
+    // -- string attributes ----------------------------------------------------
+
+    describe('string attributes', () => {
+        it('sets a string attribute', () => {
+            const el = Div({ id: 'main', 'data-test': 'value' });
+            expect(el.getAttribute('id')).toBe('main');
+            expect(el.getAttribute('data-test')).toBe('value');
+        });
+
+        it('sets a number attribute as string', () => {
+            const el = Div({ tabindex: 0 });
+            expect(el.getAttribute('tabindex')).toBe('0');
+        });
+
+        it('ignores null values', () => {
+            const el = Div({ id: null });
+            expect(el.hasAttribute('id')).toBe(false);
+        });
+
+        it('ignores undefined values', () => {
+            const el = Div({ id: undefined });
+            expect(el.hasAttribute('id')).toBe(false);
+        });
+    });
+
+    // -- class ----------------------------------------------------------------
+
+    describe('class', () => {
+        it('applies a class string', () => {
+            const el = Div({ class: 'foo bar' });
+            expect(el.className).toBe('foo bar');
+        });
+
+        it('applies a class map object', () => {
+            const el = Div({ class: { active: true, disabled: false } });
+            expect(el.classList.contains('active')).toBe(true);
+            expect(el.classList.contains('disabled')).toBe(false);
+        });
+
+        it('toggles class reactively with Observable', () => {
+            const isActive = Observable(false);
+            const el = Div({ class: { active: isActive } });
+            expect(el.classList.contains('active')).toBe(false);
+            isActive.set(true);
+            expect(el.classList.contains('active')).toBe(true);
+        });
+
+        it('adds multiple reactive classes', () => {
+            const a = Observable(true);
+            const b = Observable(false);
+            const el = Div({ class: { foo: a, bar: b } });
+            expect(el.classList.contains('foo')).toBe(true);
+            expect(el.classList.contains('bar')).toBe(false);
+            b.set(true);
+            expect(el.classList.contains('bar')).toBe(true);
+        });
+    });
+
+    // -- style ----------------------------------------------------------------
+
+    describe('style', () => {
+        it('applies a static style map', () => {
+            const el = Div({ style: { color: 'red', fontSize: '16px' } });
+            expect(el.style.color).toBe('red');
+            expect(el.style.fontSize).toBe('16px');
+        });
+
+        it('updates style reactively with Observable', () => {
+            const color = Observable('red');
+            const el    = Div({ style: { color } });
+            expect(el.style.color).toBe('red');
+            color.set('blue');
+            expect(el.style.color).toBe('blue');
+        });
+
+        it('sets CSS custom property via --var syntax', () => {
+            const el = Div({ style: { '--primary': '#fff' } });
+            expect(el.style.getPropertyValue('--primary')).toBe('#fff');
+        });
+
+        it('updates CSS custom property reactively', () => {
+            const primary = Observable('#fff');
+            const el      = Div({ style: { '--primary': primary } });
+            expect(el.style.getPropertyValue('--primary')).toBe('#fff');
+            primary.set('#000');
+            expect(el.style.getPropertyValue('--primary')).toBe('#000');
+        });
+    });
+
+    // -- Observable attribute -------------------------------------------------
+
+    describe('Observable attribute', () => {
+        it('sets attribute from Observable initial value', () => {
+            const label = Observable('hello');
+            const el    = Div({ 'aria-label': label });
+            expect(el.getAttribute('aria-label')).toBe('hello');
+        });
+
+        it('updates attribute when Observable changes', () => {
+            const label = Observable('hello');
+            const el    = Div({ 'aria-label': label });
+            label.set('world');
+            expect(el.getAttribute('aria-label')).toBe('world');
+        });
+
+        it('handles multiple Observable attributes', () => {
+            const a = Observable('val-a');
+            const b = Observable('val-b');
+            const el = Div({ 'data-a': a, 'data-b': b });
+            b.set('changed');
+            expect(el.getAttribute('data-a')).toBe('val-a');
+            expect(el.getAttribute('data-b')).toBe('changed');
+        });
+    });
+
+    // -- boolean attributes ---------------------------------------------------
+
+    describe('boolean attributes', () => {
+        it('sets disabled=true on input', () => {
+            const el = Input({ type: 'text', disabled: true });
+            expect(el.disabled).toBe(true);
+        });
+
+        it('sets disabled=false on input', () => {
+            const el = Input({ type: 'text', disabled: false });
+            expect(el.disabled).toBe(false);
+        });
+
+        it('toggles aria-disabled reactively via Observable', () => {
+            // Use a standard string attribute for reliable reactive testing
+            const isDisabled = Observable('false');
+            const el         = Input({ type: 'text', 'aria-disabled': isDisabled });
+            expect(el.getAttribute('aria-disabled')).toBe('false');
+            isDisabled.set('true');
+            expect(el.getAttribute('aria-disabled')).toBe('true');
+        });
+
+        it('sets checked on checkbox', () => {
+            const el = Input({ type: 'checkbox', checked: true });
+            expect(el.checked).toBe(true);
+        });
+    });
+
+    // -- aria attributes ------------------------------------------------------
+
+    describe('aria attributes (via this.aria + resolveAriaKey)', () => {
+        it('sets aria-label directly', () => {
+            const el = Div({ 'aria-label': 'My label' });
+            expect(el.getAttribute('aria-label')).toBe('My label');
+        });
+
+        it('sets role attribute', () => {
+            const el = Div({ role: 'dialog' });
+            expect(el.getAttribute('role')).toBe('dialog');
+        });
+
+        it('sets aria-expanded reactively', () => {
+            const expanded = Observable('false');
+            const el       = Div({ 'aria-expanded': expanded });
+            expect(el.getAttribute('aria-expanded')).toBe('false');
+            expanded.set('true');
+            expect(el.getAttribute('aria-expanded')).toBe('true');
+        });
+    });
+
+});