@webority/theme 0.23.1 → 0.25.0

package/scss/wui/_image-crop.scss

@@ -0,0 +1,146 @@
+// ── Image crop ──
+// <wui-image-crop>: the crop surface AppLogoPicker / <app-logo-picker> shows in a dialog before
+// upload. The image is fitted into the stage; the frame is positioned by the element (inline
+// left/top/width/height) and dims everything outside it with a very large box-shadow, which the
+// stage clips. Every colour is a theme token, so dark mode follows the token flip.
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+wui-image-crop {
+    display: block;
+}
+
+.wui-crop-stage {
+    position: relative;
+    height: min(360px, 55vh);
+    overflow: hidden;
+    border-radius: var(--radius-lg);
+    background: var(--color-bg-muted);
+    // The frame is dragged with a finger, so the browser must not scroll or zoom the page instead.
+    touch-action: none;
+    user-select: none;
+    cursor: grab;
+}
+.wui-crop-stage:active {
+    cursor: grabbing;
+}
+.wui-crop-stage:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+
+.wui-crop-img {
+    position: absolute;
+    max-width: none;
+    pointer-events: none;
+}
+.wui-crop-img[hidden],
+.wui-crop-frame[hidden] {
+    display: none;
+}
+
+.wui-crop-frame {
+    position: absolute;
+    border: 2px solid #fff;
+    box-shadow:
+        0 0 0 9999px rgb(0 0 0 / 55%),
+        0 0 0 1px rgb(0 0 0 / 35%);
+    // Thirds guide, so a person lining up a face or a logo has something to hold against.
+    background-image:
+        linear-gradient(to right, transparent 33.2%, rgb(255 255 255 / 35%) 33.3%, transparent 33.5%, transparent 66.5%, rgb(255 255 255 / 35%) 66.7%, transparent 66.8%),
+        linear-gradient(to bottom, transparent 33.2%, rgb(255 255 255 / 35%) 33.3%, transparent 33.5%, transparent 66.5%, rgb(255 255 255 / 35%) 66.7%, transparent 66.8%);
+}
+.wui-crop-frame--round {
+    border-radius: 50%;
+    background-image: none;
+}
+
+// A corner handle is a 44px tap target drawn as a small square at its corner.
+.wui-crop-handle {
+    position: absolute;
+    width: 44px;
+    height: 44px;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: nwse-resize;
+}
+.wui-crop-handle::after {
+    content: "";
+    position: absolute;
+    width: 14px;
+    height: 14px;
+    border-radius: 3px;
+    background: #fff;
+    box-shadow: 0 0 0 1px rgb(0 0 0 / 45%);
+}
+.wui-crop-handle:focus-visible::after {
+    background: var(--color-primary);
+}
+.wui-crop-handle--nw {
+    top: -22px;
+    left: -22px;
+}
+.wui-crop-handle--ne {
+    top: -22px;
+    right: -22px;
+    cursor: nesw-resize;
+}
+.wui-crop-handle--sw {
+    bottom: -22px;
+    left: -22px;
+    cursor: nesw-resize;
+}
+.wui-crop-handle--se {
+    right: -22px;
+    bottom: -22px;
+}
+.wui-crop-handle--nw::after {
+    top: 15px;
+    left: 15px;
+}
+.wui-crop-handle--ne::after {
+    top: 15px;
+    right: 15px;
+}
+.wui-crop-handle--sw::after {
+    bottom: 15px;
+    left: 15px;
+}
+.wui-crop-handle--se::after {
+    right: 15px;
+    bottom: 15px;
+}
+
+.wui-crop-controls {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-top: 16px;
+}
+.wui-crop-zoom {
+    flex: 1 1 auto;
+    min-width: 0;
+    margin: 0;
+}
+.wui-crop-zoombtn {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    border: 1px solid var(--color-border);
+    border-radius: 50%;
+    background: var(--color-surface);
+    color: var(--color-text);
+    cursor: pointer;
+}
+.wui-crop-zoombtn:hover {
+    border-color: var(--color-border-strong);
+}
+.wui-crop-zoombtn:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}

package/scss/wui/_modal-remote.scss

@@ -0,0 +1,3 @@
+// Server-loaded modal: loading skeleton, error state and the fullscreen size.
+//
+// Part of the wui-components layer; imported after its base partial (see _wui-components.scss).

package/scss/wui/_rich-text.scss

@@ -0,0 +1,281 @@
+// Rich text: the <wui-rich-text> element behind AppRichText / <app-rich-text>.
+//
+// Part of the wui-components layer; see _wui-components.scss for the load order. The shell wears the
+// shared field chrome (muted fill at rest, white surface and brand border on focus, soft danger
+// border when invalid) around a toolbar and the editable surface; the content takes the page's
+// type. Every colour is a token the dark remap in _wui-aliases.scss flips with the rest of the portal.
+
+wui-rich-text {
+    display: block;
+    min-width: 0;
+}
+// Until the editor's own script has run, the field shows its starting value in a plain box.
+wui-rich-text:not(:defined) > textarea {
+    display: block;
+    width: 100%;
+    min-height: 180px;
+}
+
+.wui-rich-text-shell {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-field-radius);
+    background: var(--color-field-bg);
+    color: var(--color-text);
+    font-size: 14px;
+    line-height: 1.5;
+    overflow: hidden;
+    transition:
+        border-color 0.12s,
+        background-color 0.12s;
+}
+.wui-rich-text-shell:hover {
+    border-color: var(--color-border-strong);
+}
+.wui-rich-text-shell:focus-within {
+    background: var(--color-surface);
+    border-color: var(--color-focus-border);
+}
+wui-rich-text[aria-invalid="true"] .wui-rich-text-shell,
+wui-rich-text[aria-invalid="true"] .wui-rich-text-shell:focus-within {
+    background: var(--color-surface);
+    border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
+}
+wui-rich-text[disabled] .wui-rich-text-shell {
+    background: var(--color-border);
+    border-color: transparent;
+    color: var(--color-text-subtle);
+    cursor: not-allowed;
+}
+wui-rich-text[readonly] .wui-rich-text-shell {
+    background: var(--color-bg-subtle);
+    color: var(--color-text-muted);
+}
+
+// ── Toolbar ──
+// Wraps on a phone rather than scrolling sideways, so every tool stays reachable at 375px.
+.wui-rich-text-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 2px 8px;
+    padding: 6px;
+    border-bottom: 1px solid var(--color-border);
+}
+.wui-rich-text-group {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+}
+.wui-rich-text-group + .wui-rich-text-group {
+    padding-left: 8px;
+    border-left: 1px solid var(--color-border);
+}
+.wui-rich-text-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 32px;
+    height: 32px;
+    padding: 0 6px;
+    border: 0;
+    border-radius: var(--wui-radius);
+    background: transparent;
+    color: var(--color-text-muted);
+    font: inherit;
+    font-size: 13px;
+    cursor: pointer;
+    transition:
+        background-color 0.12s,
+        color 0.12s;
+}
+.wui-rich-text-button:hover:not(:disabled) {
+    background: var(--color-bg-muted);
+    color: var(--color-text);
+}
+.wui-rich-text-button[aria-pressed="true"] {
+    background: var(--color-primary-soft);
+    color: var(--color-text);
+}
+.wui-rich-text-button:focus-visible {
+    outline: 2px solid var(--color-focus-border);
+    outline-offset: 1px;
+}
+.wui-rich-text-button:disabled {
+    color: var(--color-text-subtle);
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+.wui-rich-text-glyph {
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 1;
+}
+
+// ── Link box ──
+.wui-rich-text-linkbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 6px;
+    padding: 6px;
+    border-bottom: 1px solid var(--color-border);
+    background: var(--color-bg-subtle);
+}
+.wui-rich-text-linkbar[hidden],
+.wui-rich-text-link-error[hidden],
+.wui-rich-text-link-remove[hidden] {
+    display: none;
+}
+.wui-rich-text-link-input {
+    flex: 1 1 200px;
+    min-width: 0;
+    height: 32px;
+    padding: 0 10px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-field-radius-sm);
+    background: var(--color-surface);
+    color: var(--color-text);
+    font: inherit;
+    font-size: 13px;
+}
+.wui-rich-text-link-input:focus {
+    outline: none;
+    border-color: var(--color-focus-border);
+}
+.wui-rich-text-link-input[aria-invalid="true"] {
+    border-color: color-mix(in srgb, var(--color-danger) 30%, transparent);
+}
+.wui-rich-text-link-apply,
+.wui-rich-text-link-remove,
+.wui-rich-text-link-cancel {
+    height: 32px;
+    padding: 0 10px;
+    border: 0;
+    border-radius: var(--wui-radius);
+    background: transparent;
+    color: var(--color-text-muted);
+    font: inherit;
+    font-size: 13px;
+    cursor: pointer;
+}
+.wui-rich-text-link-apply {
+    background: var(--color-primary);
+    color: var(--color-primary-text);
+}
+.wui-rich-text-link-apply:hover {
+    background: var(--color-primary-hover);
+}
+.wui-rich-text-link-remove:hover,
+.wui-rich-text-link-cancel:hover {
+    background: var(--color-bg-muted);
+    color: var(--color-text);
+}
+.wui-rich-text-link-apply:focus-visible,
+.wui-rich-text-link-remove:focus-visible,
+.wui-rich-text-link-cancel:focus-visible {
+    outline: 2px solid var(--color-focus-border);
+    outline-offset: 1px;
+}
+.wui-rich-text-link-error {
+    flex: 1 0 100%;
+    font-size: 12px;
+    color: var(--color-danger-text);
+}
+
+// ── Editable surface ──
+.wui-rich-text-content {
+    min-width: 0;
+}
+.wui-rich-text-prose {
+    box-sizing: border-box;
+    min-height: 140px;
+    max-height: 480px;
+    overflow-y: auto;
+    padding: 12px 15px;
+    outline: none;
+    overflow-wrap: anywhere;
+    cursor: text;
+}
+wui-rich-text[disabled] .wui-rich-text-prose {
+    cursor: not-allowed;
+}
+wui-rich-text[readonly] .wui-rich-text-prose {
+    cursor: default;
+}
+.wui-rich-text-prose > :first-child {
+    margin-top: 0;
+}
+.wui-rich-text-prose > :last-child {
+    margin-bottom: 0;
+}
+.wui-rich-text-prose p {
+    margin: 0 0 0.75em;
+}
+.wui-rich-text-prose h2,
+.wui-rich-text-prose h3 {
+    margin: 1em 0 0.5em;
+    font-weight: 600;
+    line-height: 1.3;
+    color: var(--color-text);
+}
+.wui-rich-text-prose h2 {
+    font-size: 1.25em;
+}
+.wui-rich-text-prose h3 {
+    font-size: 1.1em;
+}
+.wui-rich-text-prose ul,
+.wui-rich-text-prose ol {
+    margin: 0 0 0.75em;
+    padding-left: 1.5em;
+}
+.wui-rich-text-prose li > p {
+    margin-bottom: 0.25em;
+}
+.wui-rich-text-prose blockquote {
+    margin: 0 0 0.75em;
+    padding-left: 12px;
+    border-left: 3px solid var(--color-border-strong);
+    color: var(--color-text-muted);
+}
+.wui-rich-text-prose a {
+    color: var(--bs-link-color);
+    text-decoration: underline;
+    cursor: pointer;
+}
+.wui-rich-text-prose code {
+    padding: 0.1em 0.35em;
+    border-radius: var(--wui-radius-sm);
+    background: var(--color-bg-muted);
+    font-size: 0.9em;
+}
+.wui-rich-text-prose pre {
+    margin: 0 0 0.75em;
+    padding: 10px 12px;
+    border-radius: var(--wui-radius);
+    background: var(--color-bg-muted);
+    overflow-x: auto;
+}
+.wui-rich-text-prose pre code {
+    padding: 0;
+    background: transparent;
+    font-size: 0.9em;
+}
+// The engine marks the empty first paragraph; the placeholder text is its data attribute.
+.wui-rich-text-prose p.wui-rich-text-empty:first-child::before {
+    content: attr(data-placeholder);
+    float: left;
+    height: 0;
+    color: var(--color-text-subtle);
+    pointer-events: none;
+}
+@media (prefers-reduced-motion: reduce) {
+    .wui-rich-text-shell,
+    .wui-rich-text-button {
+        transition: none;
+    }
+}

package/scss/wui/_shell-parts.scss

@@ -0,0 +1,3 @@
+// Shell parts: notification bell, topbar search, phone tab bar, user menu.
+//
+// Part of the wui-components layer; imported after its base partial (see _wui-components.scss).

package/scss/wui/_sortable.scss

@@ -0,0 +1,135 @@
+// ── Sortable list ──
+// AppSortableList / <app-sortable-list> / <wui-sortable>. The element moves the real items
+// while the person drags and shows a `.wui-sortable-ghost` copy under the pointer; everything
+// visual lives here.
+//
+// Part of the wui-components layer — see _wui-components.scss for load order.
+
+wui-sortable {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    // An empty list is still a drop target.
+    min-height: 44px;
+}
+wui-sortable[orientation="horizontal"] {
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.wui-sortable-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 6px 12px 6px 6px;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-radius);
+    corner-shape: squircle;
+    color: var(--color-text);
+    // Dragging a body text selection is never what a drag on an item means.
+    -webkit-user-select: none;
+    user-select: none;
+}
+// A pointer drag from the body starts on the item itself; touch scrolling stays on until the
+// press-and-hold promotes it, so only the handle opts out of the browser's panning.
+wui-sortable:not([handle]):not([disabled]) .wui-sortable-item:not([data-disabled]) {
+    cursor: grab;
+}
+wui-sortable[disabled] .wui-sortable-item,
+.wui-sortable-item[data-disabled] {
+    color: var(--color-text-muted);
+}
+
+.wui-sortable-handle {
+    display: grid;
+    place-items: center;
+    flex: none;
+    // 44px is the touch target; the glyph stays small inside it.
+    width: 44px;
+    height: 44px;
+    padding: 0;
+    border: none;
+    border-radius: var(--wui-radius-sm);
+    background: transparent;
+    color: var(--color-text-subtle);
+    cursor: grab;
+    touch-action: none;
+    transition:
+        background-color 160ms var(--wui-ease-ui),
+        color 160ms var(--wui-ease-ui);
+}
+.wui-sortable-handle:hover {
+    background: var(--color-bg-muted);
+    color: var(--color-text);
+}
+.wui-sortable-handle:focus-visible {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+}
+// Lifted by the keyboard.
+.wui-sortable-handle[aria-pressed="true"] {
+    background: var(--color-primary-soft);
+    color: var(--color-primary);
+}
+.wui-sortable-handle:disabled {
+    cursor: not-allowed;
+    opacity: 0.45;
+    background: transparent;
+    color: var(--color-text-subtle);
+}
+
+.wui-sortable-body {
+    flex: 1 1 auto;
+    // Lets long content wrap instead of widening the list past a 375px phone.
+    min-width: 0;
+    overflow-wrap: anywhere;
+}
+
+// The real item, while its ghost is under the pointer: it marks where the drop would land.
+.wui-sortable-item.wui-sortable-dragging {
+    background: var(--color-primary-soft);
+    border-style: dashed;
+    border-color: var(--color-primary);
+    > * {
+        opacity: 0.35;
+    }
+}
+
+.wui-sortable-ghost {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: var(--wui-z-tooltip, 1650);
+    margin: 0;
+    box-shadow: var(--wui-shadow-overlay);
+    pointer-events: none;
+    cursor: grabbing;
+}
+
+// While any drag runs, the whole page shows the grabbing cursor and does not select text.
+html.wui-sortable-active,
+html.wui-sortable-active * {
+    cursor: grabbing !important;
+    -webkit-user-select: none;
+    user-select: none;
+}
+
+// The aria-live announcement region: read by screen readers, never seen.
+.wui-sortable-live {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .wui-sortable-handle {
+        transition: none;
+    }
+}

package/scss/wui/_table-server.scss

@@ -0,0 +1,3 @@
+// Server-paged data table: loading, empty and error states, the busy dim and the server sort affordance.
+//
+// Part of the wui-components layer; imported after its base partial (see _wui-components.scss).

package/scss/wui/_tree.scss

@@ -0,0 +1,124 @@
+// ── Tree view ──
+// AppTreeView / <app-tree-view> / <wui-tree>: a hierarchy in the WAI-ARIA tree pattern. The element
+// draws the markup and keeps the state on ARIA attributes (aria-expanded on an item,
+// aria-selected / aria-checked for the selection), which are the state hooks below. Each row is
+// indented by --wui-tree-level (set by the element), so the nesting needs no per-depth rule.
+// Every colour is a theme token, so dark mode follows the token flip with no rules of its own.
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+wui-tree {
+    display: block;
+}
+
+.wui-tree,
+.wui-tree-group {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.wui-tree-item {
+    outline: none;
+}
+
+.wui-tree-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 36px;
+    padding: 4px 8px;
+    padding-inline-start: calc(8px + var(--wui-tree-level, 0) * 20px);
+    border-radius: var(--radius-sm);
+    color: var(--color-text);
+    cursor: pointer;
+    user-select: none;
+}
+.wui-tree-row:hover {
+    background: var(--color-bg-muted);
+}
+.wui-tree-row.wui-tree-row-selected {
+    background: var(--color-primary-soft);
+    color: var(--color-primary);
+}
+.wui-tree-item[aria-disabled="true"] > .wui-tree-row {
+    color: var(--color-text-subtle);
+    cursor: not-allowed;
+}
+.wui-tree-item[aria-disabled="true"] > .wui-tree-row:hover {
+    background: transparent;
+}
+// The item holds the focus, but it also holds its subtree, so the ring goes on its own row.
+.wui-tree-item:focus-visible > .wui-tree-row {
+    outline: 2px solid var(--color-primary);
+    outline-offset: -2px;
+}
+.wui-tree-row-error .wui-tree-label {
+    color: var(--color-danger);
+}
+
+.wui-tree-toggle {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    color: var(--color-text-muted);
+}
+.wui-tree-toggle .wui-icon {
+    transition: transform 0.15s ease;
+}
+.wui-tree-item[aria-expanded="true"] > .wui-tree-row .wui-tree-toggle .wui-icon {
+    transform: rotate(90deg);
+}
+
+.wui-tree-check {
+    flex: 0 0 auto;
+    margin: 0;
+}
+
+.wui-tree-icon {
+    display: inline-flex;
+    flex: 0 0 auto;
+    color: var(--color-text-muted);
+}
+.wui-tree-row-selected .wui-tree-icon {
+    color: inherit;
+}
+
+.wui-tree-label {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.wui-tree-badge {
+    flex: 0 0 auto;
+}
+
+.wui-tree-spinner {
+    flex: 0 0 auto;
+    width: 14px;
+    height: 14px;
+    border: 2px solid var(--color-border-strong);
+    border-top-color: var(--color-primary);
+    border-radius: 50%;
+    animation: wui-tree-spin 0.7s linear infinite;
+}
+@keyframes wui-tree-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .wui-tree-toggle .wui-icon {
+        transition: none;
+    }
+    .wui-tree-spinner {
+        animation-duration: 2s;
+    }
+}