@livenetworks/ashlar 1.3.2

package/scss/config/mixins/_empty-state.scss

@@ -0,0 +1,30 @@
+@use 'spacing' as *;
+@use 'display' as *;
+
+@mixin empty-state {
+	@include flex-col;
+	@include items-center;
+	@include justify-center;
+	--gap: var(--size-md);
+	gap: var(--gap);
+	--padding-y: var(--size-xl);
+	--padding-x: var(--size-xl);
+	padding: var(--padding-y) var(--padding-x);
+	text-align: center;
+	max-width: 28rem;
+	margin-inline: auto;
+
+	h3 {
+		margin: 0;
+	}
+
+	p {
+		margin: 0;
+	}
+
+	button,
+	a {
+		--margin-block: var(--size-sm);
+		margin-top: var(--margin-block);
+	}
+}

package/scss/config/mixins/_focus.scss

@@ -0,0 +1,55 @@
+// Focus indicator presets — apply to :focus-visible
+//
+// Usage (in project SCSS on a form selector):
+//   input:focus-visible { @include focus-ring; }            ← default (ring)
+//   input:focus-visible { @include focus-border-thicken; }  ← structural
+//   input:focus-visible { @include focus-combination; }     ← max signal
+//   input:focus-visible { @include focus-background-shift; } ← minimal
+//   input:focus-visible { @include focus-accent-line; }     ← subtle
+//   input:focus-visible { @include focus-inset-shadow; }    ← tactile
+//
+// Error state — override $color:
+//   input.error:focus-visible { @include focus-ring(var(--color-error)); }
+
+// Three-layer halo:
+//   1. 2px ring at bg-primary colour — visual separator from the
+//      element's own background
+//   2. 2px ring at 60% of the colour — the main focus signal
+//   3. 2px outer glow at 15% — soft halo outside the main ring
+@mixin focus-ring($color: var(--color-accent)) {
+	box-shadow:
+		0 0 0 2px var(--color-bg),
+		0 0 0 4px color-mix(in srgb, #{$color} 60%, transparent),
+		0 0 0 6px color-mix(in srgb, #{$color} 15%, transparent);
+	outline: none;
+}
+
+// Thickens the outline without causing layout shift (outline, not border).
+@mixin focus-border-thicken($color: var(--color-accent)) {
+	outline: 2px solid $color;
+	outline-offset: -1px;
+	box-shadow: none;
+}
+
+// Border color change + outer ring — maximum signal.
+@mixin focus-combination($color: var(--color-accent), $width: 3px) {
+	border-color: $color;
+	box-shadow: 0 0 0 $width color-mix(in srgb, #{$color} 12%, transparent);
+}
+
+// Very light primary tint on the field background. No border change.
+@mixin focus-background-shift($color: var(--color-accent)) {
+	background-color: color-mix(in srgb, #{$color} 4%, transparent);
+	box-shadow: none;
+}
+
+// Only the bottom border changes to primary. Other sides stay neutral.
+@mixin focus-accent-line($color: var(--color-accent)) {
+	border-bottom-color: $color;
+	box-shadow: none;
+}
+
+// Inner shadow — field visually sinks.
+@mixin focus-inset-shadow($color: var(--color-accent), $width: 3px) {
+	box-shadow: inset 0 0 0 $width color-mix(in srgb, #{$color} 15%, transparent);
+}

package/scss/config/mixins/_footer.scss

@@ -0,0 +1,42 @@
+@use 'spacing' as *;
+@use 'display' as *;
+@use 'typography' as *;
+@use 'colors' as *;
+@use 'borders' as *;
+@use 'interaction' as *;
+
+// ─── App / shell footer chrome ──────────────────────────────────────────────
+// Single recipe for any shell bottom region. Used by:
+//   - `.app-footer`                         (bottom of .app-main)
+//   - `<aside class="app-sidebar"> > footer` (bottom of the sidebar drawer)
+//
+// Reads logical tokens only — padding, border, bg, and type follow
+// the same cascade as the header. To re-bind for a region, override
+// --padding-y / --color-bg / etc. on the parent scope.
+//
+// Inner-text contract:
+//   - Two <span>s    → second tinted via `> span:last-child`.
+//   - Single <small> → tinted via `> small`; `font-size: inherit`
+//     neutralises the UA 0.875em shrink.
+
+@mixin app-footer {
+	--color-fg:     var(--fg-muted);
+	--color-border: var(--border-subtle);
+	padding: var(--padding-y) var(--padding-x);
+	border-block-start: var(--border-block-start, var(--border-width) solid var(--color-border));
+	background: var(--color-bg);
+	font-size: var(--text-body-sm);
+	line-height: var(--lh-body-sm);
+	color: var(--color-fg);
+	@include flex;
+	@include items-center;
+	@include justify-between;
+	user-select: none;
+
+	> small,
+	> span:last-child {
+		--color-fg: var(--fg-subtle);
+		color: var(--color-fg);
+		font-size: inherit;
+	}
+}