@webority/theme 0.53.0 → 0.54.0

package/scss/wui/_sections.scss

@@ -0,0 +1,315 @@
+// ── Section kit ──
+// AppSection* / <app-section-*>: the hero, features, logos, testimonials, pricing, FAQ and call to
+// action sections of a public page. One frame for all seven:
+//   <section class="wui-section wui-section-{kind}">
+//     <div class="wui-section-inner">
+//       <div class="wui-section-head">eyebrow, title, subtitle, actions</div>
+//       …the section's own body…
+//
+// Sections sit full width, straight inside <main>: the inner box carries the page container's
+// width and side padding, so a section nested in another container is padded twice.
+//
+// No entrance animation and no opacity-0 start: every section paints in place. Every image the
+// kit lays out keeps the box its width and height attributes reserve, so nothing moves on load.
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+// A section is a full-width band wherever it sits, a flex or grid parent included.
+.wui-section {
+    width: 100%;
+    padding-block: clamp(3rem, 2rem + 4vw, 6rem);
+    color: var(--color-text);
+}
+.wui-section-muted {
+    background: var(--color-bg-muted);
+}
+.wui-section-inner {
+    display: flex;
+    flex-direction: column;
+    gap: clamp(2rem, 1.5rem + 2vw, 3.5rem);
+    width: 100%;
+    max-width: var(--wui-container-max);
+    margin-inline: auto;
+    padding-inline: var(--wui-container-pad);
+}
+
+// ── The heading block ──
+.wui-section-head {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+    max-width: 48rem;
+}
+.wui-section-center .wui-section-head {
+    align-items: center;
+    margin-inline: auto;
+    text-align: center;
+}
+.wui-section-eyebrow {
+    margin: 0;
+    color: var(--color-primary-ink);
+    font-size: var(--wui-fs-sm);
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+}
+.wui-section-title {
+    margin: 0;
+    color: var(--color-text);
+    font-family: var(--wui-font-display);
+    font-size: var(--wui-fs-3xl);
+    font-weight: 600;
+    line-height: 1.15;
+    letter-spacing: -0.02em;
+    overflow-wrap: break-word;
+    text-wrap: balance;
+}
+.wui-section-subtitle {
+    margin: 0;
+    color: var(--color-text-muted);
+    font-size: var(--wui-fs-lg);
+    line-height: 1.6;
+    text-wrap: pretty;
+}
+.wui-section-actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    margin-top: 0.75rem;
+}
+.wui-section-center .wui-section-actions {
+    justify-content: center;
+}
+
+// ── Media slot (hero, feature rows) ──
+// The image fills its column at its own ratio: `height: auto` with the img's width and height
+// attributes is what reserves the box before the file arrives.
+.wui-section-media {
+    min-width: 0;
+}
+.wui-section-media img,
+.wui-section-media picture,
+.wui-section-media video {
+    display: block;
+    width: 100%;
+    height: auto;
+    border-radius: var(--radius-xl);
+}
+
+// ── Hero ──
+.wui-section-hero .wui-section-title {
+    font-size: calc(var(--wui-fs-3xl) * 1.3);
+    line-height: 1.08;
+}
+@include media-breakpoint-up(lg) {
+    .wui-section-hero:not(.wui-section-center) .wui-section-inner:has(> .wui-section-media) {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        align-items: center;
+    }
+}
+.wui-section-hero.wui-section-center .wui-section-media {
+    width: 100%;
+    max-width: 64rem;
+    margin-inline: auto;
+}
+
+// ── Features ──
+.wui-section-features-list,
+.wui-section-logos-list,
+.wui-section-testimonials-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+.wui-section-features-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+    gap: 2rem 1.5rem;
+}
+.wui-section-feature {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    min-width: 0;
+}
+.wui-section-feature-body {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+.wui-section-feature-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 3rem;
+    height: 3rem;
+    margin-bottom: 0.5rem;
+    border-radius: var(--radius-lg);
+    background: var(--color-primary-soft);
+    color: var(--color-primary-ink);
+}
+.wui-section-feature-title {
+    margin: 0;
+    color: var(--color-text);
+    font-size: var(--wui-fs-lg);
+    font-weight: 600;
+    line-height: 1.3;
+}
+.wui-section-feature-text {
+    color: var(--color-text-muted);
+    font-size: var(--wui-fs-base);
+    line-height: 1.6;
+}
+.wui-section-feature-text > :last-child {
+    margin-bottom: 0;
+}
+// Rows: one point per row, its image beside it, the image side alternating from md up.
+.wui-section-features-rows .wui-section-features-list {
+    grid-template-columns: minmax(0, 1fr);
+    gap: clamp(2.5rem, 2rem + 3vw, 5rem);
+}
+@include media-breakpoint-up(md) {
+    .wui-section-features-rows .wui-section-feature {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        align-items: center;
+        gap: clamp(2rem, 1rem + 3vw, 4rem);
+    }
+    .wui-section-features-rows .wui-section-feature:nth-child(even) .wui-section-media {
+        order: 2;
+    }
+}
+
+// ── Logos ──
+.wui-section-logos {
+    padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem);
+}
+.wui-section-logos .wui-section-title {
+    color: var(--color-text-muted);
+    font-family: inherit;
+    font-size: var(--wui-fs-base);
+    font-weight: 500;
+    letter-spacing: 0;
+}
+.wui-section-logos-list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1.5rem 3rem;
+}
+.wui-section-center .wui-section-logos-list {
+    justify-content: center;
+}
+.wui-section-logo a {
+    display: inline-flex;
+    border-radius: var(--radius-sm);
+}
+.wui-section-logo a:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: 4px;
+}
+// One height for every logo; the width follows each file's own ratio from its attributes.
+.wui-section-logo-img {
+    display: block;
+    width: auto;
+    max-width: 10rem;
+    height: 2.5rem;
+    object-fit: contain;
+    filter: grayscale(1);
+    opacity: 0.7;
+    transition:
+        filter 0.2s ease,
+        opacity 0.2s ease;
+}
+.wui-section-logo-img:hover,
+.wui-section-logo a:focus-visible .wui-section-logo-img {
+    filter: none;
+    opacity: 1;
+}
+
+// ── Testimonials ──
+.wui-section-testimonials-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
+    gap: 1.5rem;
+}
+.wui-section-testimonial {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 1.5rem;
+    height: 100%;
+    margin: 0;
+    padding: 1.75rem;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-xl);
+    background: var(--color-surface);
+}
+.wui-section-testimonial-quote {
+    margin: 0;
+    color: var(--color-text);
+    font-size: var(--wui-fs-lg);
+    line-height: 1.6;
+}
+.wui-section-testimonial-quote > :last-child {
+    margin-bottom: 0;
+}
+.wui-section-testimonial-author {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+.wui-section-testimonial-avatar {
+    flex: none;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 50%;
+    object-fit: cover;
+}
+.wui-section-testimonial-who {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+.wui-section-testimonial-name {
+    color: var(--color-text);
+    font-weight: 600;
+}
+.wui-section-testimonial-role {
+    color: var(--color-text-muted);
+    font-size: var(--wui-fs-sm);
+}
+
+// ── Pricing (the cards are AppPricingCard in its .plan-grid) ──
+.wui-section-pricing .plan-grid {
+    width: 100%;
+}
+
+// ── FAQ (the questions are AppAccordion) ──
+.wui-section-faq .wui-section-faq-body {
+    width: 100%;
+    max-width: 48rem;
+}
+.wui-section-center .wui-section-faq-body {
+    margin-inline: auto;
+}
+
+// ── Call to action: the heading block becomes a soft brand panel ──
+.wui-section-call-to-action .wui-section-head {
+    width: 100%;
+    max-width: none;
+    padding: clamp(2rem, 1.5rem + 3vw, 4rem);
+    border-radius: var(--radius-xl);
+    background: var(--color-primary-soft);
+}
+.wui-section-call-to-action .wui-section-subtitle {
+    max-width: 40rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .wui-section-logo-img {
+        transition: none;
+    }
+}

package/scss/wui/_shell-parts.scss

@@ -69,7 +69,7 @@
     font-weight: 600;
 }
 .wui-tabbar-item:focus-visible {
-    outline: 2px solid var(--color-primary);
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
     outline-offset: -4px;
     border-radius: var(--radius-lg);
 }
@@ -162,8 +162,8 @@
     background: var(--color-bg-muted);
 }
 .wui-usermenu-trigger:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
 }
 .wui-usermenu-text {
     display: flex;
@@ -305,6 +305,11 @@ a.wui-bell-item:hover {
     background: var(--color-bg-muted);
     text-decoration: none;
 }
+// Inset: the list scrolls and its rows run edge to edge, so an outer ring would be clipped.
+a.wui-bell-item:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-inset);
+}
 .wui-bell-item:last-child {
     border-bottom: 0;
 }
@@ -436,6 +441,10 @@ a.wui-bell-item:hover {
     color: var(--color-text);
     text-decoration: none;
 }
+.wui-topsearch-hit:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-inset);
+}
 .wui-topsearch-hit-icon {
     flex: none;
     display: inline-grid;

package/scss/wui/_shell.scss

@@ -407,8 +407,8 @@
     font-weight: 600;
 }
 .app-nav-item:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: -2px;
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-inset);
 }
 .app-nav-icon {
     flex: none;
@@ -659,8 +659,8 @@
     background: var(--color-bg-muted);
 }
 .app-sidebar-toggle:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
 }
 .app-sidebar-toggle > * {
     // `block` kills the inline-block baseline gap (.wui-icon is inline-block), which otherwise
@@ -729,8 +729,8 @@
     cursor: pointer;
 }
 .app-topbar-menu:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
 }
 
 .app-content {

package/scss/wui/_shortcuts.scss

@@ -0,0 +1,143 @@
+// ── Keyboard shortcuts ──
+// `.wui-kbd` is the key chip of a shortcut: the `shortcut` prop on AppButton, AppTooltip and
+// AppDropdown items (and their Razor `shortcut` attribute), and every row of a legend.
+// AppShortcutLegend / <app-shortcut-legend> (a <wui-shortcuts> element) is a "? Keyboard
+// shortcuts" button and the sheet of every shortcut on the screen, which opens above it.
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+.wui-kbd {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 20px;
+    height: 20px;
+    padding: 0 5px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-radius-sm);
+    background: var(--color-bg-muted);
+    color: var(--color-text);
+    font-family: inherit;
+    font-size: 11px;
+    font-weight: 600;
+    line-height: 1;
+    white-space: nowrap;
+    vertical-align: middle;
+}
+
+// On a filled surface (a button, a tinted tooltip) the chip takes the surface's own text colour.
+.btn > .wui-kbd,
+.tooltip.wui-tooltip .wui-kbd {
+    border-color: color-mix(in srgb, currentColor 40%, transparent);
+    background: transparent;
+    color: inherit;
+}
+.btn > .wui-kbd {
+    margin-left: 8px;
+}
+.tooltip.wui-tooltip .wui-kbd {
+    margin-left: 6px;
+}
+.dropdown-item > .wui-kbd {
+    margin-left: auto;
+}
+
+// A phone has no keyboard to press them on.
+@media (hover: none) and (pointer: coarse) {
+    .btn > .wui-kbd,
+    .dropdown-item > .wui-kbd {
+        display: none;
+    }
+}
+
+.wui-shortcut-legend {
+    position: relative;
+    display: inline-flex;
+}
+.wui-shortcut-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 2px 0;
+    border: 0;
+    background: none;
+    color: var(--color-text-muted);
+    font: inherit;
+    font-size: 12px;
+    cursor: pointer;
+}
+.wui-shortcut-toggle:hover {
+    color: var(--color-text);
+}
+.wui-shortcut-toggle:focus-visible,
+.wui-shortcut-close:focus-visible {
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
+}
+
+.wui-shortcut-sheet {
+    position: absolute;
+    right: 0;
+    bottom: calc(100% + 8px);
+    z-index: var(--wui-z-dropdown, 1000);
+    width: min(320px, calc(100vw - 32px));
+    border: 1px solid var(--color-border);
+    border-radius: var(--wui-radius);
+    corner-shape: squircle;
+    background: var(--color-surface);
+    color: var(--color-text);
+    box-shadow: var(--wui-shadow-overlay);
+    font-size: 14px;
+    text-align: start;
+}
+.wui-shortcut-sheet[hidden] {
+    display: none;
+}
+.wui-shortcut-sheet-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    padding: 8px 8px 8px 16px;
+    border-bottom: 1px solid var(--color-border);
+}
+.wui-shortcut-sheet-title {
+    font-size: 14px;
+    font-weight: 600;
+}
+.wui-shortcut-close {
+    display: grid;
+    place-items: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: 0;
+    border-radius: var(--wui-radius-sm);
+    background: transparent;
+    color: var(--color-text-muted);
+}
+.wui-shortcut-close:hover {
+    background: var(--color-bg-muted);
+    color: var(--color-text);
+}
+.wui-shortcut-keys {
+    display: grid;
+    gap: 6px;
+    margin: 0;
+    padding: 10px 16px 14px;
+}
+.wui-shortcut-keys > div {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+}
+.wui-shortcut-keys dt {
+    font-weight: 400;
+}
+.wui-shortcut-keys dd {
+    margin: 0;
+    color: var(--color-text-muted);
+    font-size: 13px;
+    text-align: end;
+}

package/scss/wui/_show-more.scss

@@ -0,0 +1,30 @@
+// ── Show more ──
+// AppShowMore / <app-show-more> (a <wui-show-more> element): a long text block clamped to a few
+// lines with a Show more toggle. The clamp is visual only, so the full text stays readable by
+// assistive technology; it applies once the element is defined, so without script the text shows
+// in full. The element writes --wui-show-more-lines from its `lines` attribute.
+//
+// Part of the wui-components layer, see _wui-components.scss for load order.
+
+.wui-show-more {
+    display: block;
+    min-width: 0;
+}
+.wui-show-more:defined:not([expanded]) .wui-show-more-body {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--wui-show-more-lines, 3);
+    line-clamp: var(--wui-show-more-lines, 3);
+    overflow: hidden;
+}
+.wui-show-more-body {
+    overflow-wrap: anywhere;
+}
+.wui-show-more-toggle {
+    margin-top: 4px;
+    padding-left: 0;
+    padding-right: 0;
+}
+.wui-show-more-toggle[hidden] {
+    display: none;
+}

package/scss/wui/_sortable.scss

@@ -64,8 +64,8 @@ wui-sortable[disabled] .wui-sortable-item,
     color: var(--color-text);
 }
 .wui-sortable-handle:focus-visible {
-    outline: 2px solid var(--color-primary);
-    outline-offset: 2px;
+    outline: var(--wui-focus-ring-width) solid var(--color-focus-ring);
+    outline-offset: var(--wui-focus-ring-offset);
 }
 // Lifted by the keyboard.
 .wui-sortable-handle[aria-pressed="true"] {