@glw907/cairn-cms 0.37.1 → 0.40.0

package/dist/components/cairn-admin.css

@@ -47,6 +47,19 @@
       --tw-drop-shadow-color: initial;
       --tw-drop-shadow-alpha: 100%;
       --tw-drop-shadow-size: initial;
+      --tw-backdrop-blur: initial;
+      --tw-backdrop-brightness: initial;
+      --tw-backdrop-contrast: initial;
+      --tw-backdrop-grayscale: initial;
+      --tw-backdrop-hue-rotate: initial;
+      --tw-backdrop-invert: initial;
+      --tw-backdrop-opacity: initial;
+      --tw-backdrop-saturate: initial;
+      --tw-backdrop-sepia: initial;
+      --tw-duration: initial;
+      --tw-translate-x: 0;
+      --tw-translate-y: 0;
+      --tw-translate-z: 0;
     }
   }
 }
@@ -75,6 +88,9 @@
     --text-xl--line-height: calc(1.75 / 1.25);
     --text-2xl: 1.5rem;
     --text-2xl--line-height: calc(2 / 1.5);
+    --text-3xl: 1.875rem;
+    --text-3xl--line-height: calc(2.25 / 1.875);
+    --font-weight-normal: 400;
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
@@ -145,6 +161,24 @@
       box-shadow: 0 2px 4px color-mix(in oklch, var(--color-primary) 26%, transparent), 0 10px 24px -5px color-mix(in oklch, var(--color-primary) 48%, transparent);
     }
   }
+
+  :where([data-theme="cairn-admin"], [data-theme="cairn-admin-dark"]) .cairn-doc-title:focus {
+    outline: 1px solid var(--color-primary);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where([data-theme="cairn-admin"], [data-theme="cairn-admin-dark"]) .cairn-doc-title:focus {
+      outline: 1px solid color-mix(in oklab, var(--color-primary) 70%, transparent);
+    }
+  }
+
+  :where([data-theme="cairn-admin"], [data-theme="cairn-admin-dark"]) .cairn-doc-title:focus {
+    outline-offset: -1px;
+  }
+
+  :where([data-theme="cairn-admin"], [data-theme="cairn-admin-dark"]) :is(a, button, input, textarea, select, summary, [tabindex]) {
+    scroll-margin-top: 8.5rem;
+  }
 }
 
 @layer utilities {
@@ -1093,6 +1127,10 @@
     }
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .pointer-events-none {
+    pointer-events: none;
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .collapse:not(td, tr, colgroup) {
     visibility: revert-layer;
   }
@@ -1721,6 +1759,25 @@
     }
   }
 
+  @layer daisyui.l1.l2.l3 {
+    :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .indicator {
+      width: max-content;
+      display: inline-flex;
+      position: relative;
+    }
+
+    :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .indicator :where(.indicator-item) {
+      z-index: 1;
+      white-space: nowrap;
+      top: var(--indicator-t, 0);
+      bottom: var(--indicator-b, auto);
+      left: var(--indicator-s, auto);
+      right: var(--indicator-e, 0);
+      translate: var(--indicator-x, 50%) var(--indicator-y, -50%);
+      position: absolute;
+    }
+  }
+
   @layer daisyui.l1.l2.l3 {
     :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .table {
       border-collapse: separate;
@@ -2714,6 +2771,10 @@
     top: calc(var(--spacing) * 0);
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .top-16 {
+    top: calc(var(--spacing) * 16);
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .join {
     --join-ss: 0;
     --join-se: 0;
@@ -2898,6 +2959,23 @@
     }
   }
 
+  @layer daisyui.l1.l2 {
+    :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .btn-active {
+      --btn-bg: var(--btn-color, var(--color-base-200));
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .btn-active {
+        --btn-bg: color-mix(in oklab, var(--btn-color, var(--color-base-200)), #000 7%);
+      }
+    }
+
+    :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .btn-active {
+      --btn-shadow: 0 0 0 0 oklch(0% 0 0 / 0), 0 0 0 0 oklch(0% 0 0 / 0);
+      isolation: isolate;
+    }
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .isolate {
     isolation: isolate;
   }
@@ -3131,6 +3209,10 @@
     }
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .m-0 {
+    margin: calc(var(--spacing) * 0);
+  }
+
   @layer daisyui.l1.l2.l3 {
     :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .filter {
       flex-wrap: wrap;
@@ -3180,6 +3262,10 @@
     }
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .-mx-4 {
+    margin-inline: calc(var(--spacing) * -4);
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .mx-auto {
     margin-inline: auto;
   }
@@ -3314,6 +3400,15 @@
     }
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .join-item:where(:not(:first-child, :disabled, [disabled], .btn-disabled)) {
+    margin-block-start: 0;
+    margin-inline-start: calc(var(--border, 1px) * -1);
+  }
+
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .join-item:where(:is(:disabled, [disabled], .btn-disabled)) {
+    border-width: var(--border, 1px) 0 var(--border, 1px) var(--border, 1px);
+  }
+
   @layer daisyui.l1.l2.l3 {
     :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .modal-action {
       justify-content: flex-end;
@@ -3784,6 +3879,10 @@
     }
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .h-1\.5 {
+    height: calc(var(--spacing) * 1.5);
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .h-3 {
     height: calc(var(--spacing) * 3);
   }
@@ -3828,6 +3927,10 @@
     min-height: calc(var(--spacing) * 64);
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .min-h-\[50vh\] {
+    min-height: 50vh;
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .min-h-full {
     min-height: 100%;
   }
@@ -3854,6 +3957,10 @@
     }
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .w-1\.5 {
+    width: calc(var(--spacing) * 1.5);
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .w-3 {
     width: calc(var(--spacing) * 3);
   }
@@ -3890,6 +3997,10 @@
     width: calc(var(--spacing) * 12);
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .w-44 {
+    width: calc(var(--spacing) * 44);
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .w-56 {
     width: calc(var(--spacing) * 56);
   }
@@ -3910,6 +4021,10 @@
     width: 100%;
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .w-px {
+    width: 1px;
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .max-w-3xl {
     max-width: var(--container-3xl);
   }
@@ -4084,6 +4199,10 @@
     gap: calc(var(--spacing) * 1);
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .gap-1\.5 {
+    gap: calc(var(--spacing) * 1.5);
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
@@ -4114,10 +4233,30 @@
     margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .gap-x-3 {
+    column-gap: calc(var(--spacing) * 3);
+  }
+
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .gap-x-4 {
+    column-gap: calc(var(--spacing) * 4);
+  }
+
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .gap-y-1 {
+    row-gap: calc(var(--spacing) * 1);
+  }
+
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .gap-y-2 {
+    row-gap: calc(var(--spacing) * 2);
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .self-start {
     align-self: flex-start;
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .self-stretch {
+    align-self: stretch;
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .truncate {
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -4203,6 +4342,11 @@
     border-width: 1px;
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0;
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .border-t {
     border-top-style: var(--tw-border-style);
     border-top-width: 1px;
@@ -4261,6 +4405,19 @@
     }
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .glass {
+    backdrop-filter: blur(var(--glass-blur, 40px));
+    background-color: #0000;
+    background-image: linear-gradient(135deg, oklch(100% 0 0 / var(--glass-opacity, 30%)) 0%, oklch(0% 0 0 / 0) 100%), linear-gradient(var(--glass-reflect-degree, 100deg), oklch(100% 0 0 / var(--glass-reflect-opacity, 5%)) 25%, oklch(0% 0 0 / 0) 25%);
+    box-shadow: 0 0 0 1px oklch(100% 0 0 / var(--glass-border-opacity, 20%)) inset, 0 0 0 2px oklch(0% 0 0 / .05);
+    text-shadow: 0 1px oklch(0% 0 0 / var(--glass-text-shadow-opacity, 5%));
+    border: none;
+  }
+
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .bg-\[var\(--cairn-card-border\)\] {
+    background-color: var(--cairn-card-border);
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .bg-base-100 {
     background-color: var(--color-base-100);
   }
@@ -4279,6 +4436,16 @@
     }
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .bg-base-200\/90 {
+    background-color: var(--color-base-200);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .bg-base-200\/90 {
+      background-color: color-mix(in oklab, var(--color-base-200) 90%, transparent);
+    }
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .bg-base-content\/\[0\.04\] {
     background-color: var(--color-base-content);
   }
@@ -4311,6 +4478,10 @@
     background-color: #0000;
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .bg-warning {
+    background-color: var(--color-warning);
+  }
+
   @layer daisyui.l1.l2 {
     :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .loading-spinner {
       mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='black' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform-origin='center'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='2s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dasharray' values='0,150;42,150;42,150' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3Canimate attributeName='stroke-dashoffset' values='0;-16;-59' keyTimes='0;0.475;1' dur='1.5s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
@@ -4391,6 +4562,17 @@
     }
   }
 
+  @layer daisyui.l1.l2 {
+    :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .table-sm :not(thead, tfoot) tr {
+      font-size: .75rem;
+    }
+
+    :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .table-sm :where(th, td) {
+      padding-block: .5rem;
+      padding-inline: .75rem;
+    }
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .px-1\.5 {
     padding-inline: calc(var(--spacing) * 1.5);
   }
@@ -4415,6 +4597,10 @@
     padding-inline: calc(var(--spacing) * 6);
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .py-1 {
+    padding-block: calc(var(--spacing) * 1);
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .py-1\.5 {
     padding-block: calc(var(--spacing) * 1.5);
   }
@@ -4423,6 +4609,10 @@
     padding-block: calc(var(--spacing) * 2);
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .py-3 {
+    padding-block: calc(var(--spacing) * 3);
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .py-3\.5 {
     padding-block: calc(var(--spacing) * 3.5);
   }
@@ -4492,6 +4682,11 @@
     line-height: var(--tw-leading, var(--text-2xl--line-height));
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .text-3xl {
+    font-size: var(--text-3xl);
+    line-height: var(--tw-leading, var(--text-3xl--line-height));
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .text-base {
     font-size: var(--text-base);
     line-height: var(--tw-leading, var(--text-base--line-height));
@@ -4551,6 +4746,11 @@
     font-weight: var(--font-weight-medium);
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .font-normal {
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .font-semibold {
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
@@ -4581,6 +4781,10 @@
     letter-spacing: var(--tracking-wide);
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .break-all {
+    word-break: break-all;
+  }
+
   @layer daisyui.l1.l2 {
     :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .alert-error {
       color: var(--color-error-content);
@@ -4670,6 +4874,10 @@
     }
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .line-through {
+    text-decoration-line: line-through;
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .no-underline {
     text-decoration-line: none;
   }
@@ -4682,6 +4890,10 @@
     text-decoration-line: underline;
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .opacity-0 {
+    opacity: 0;
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .opacity-30 {
     opacity: .3;
   }
@@ -4773,12 +4985,23 @@
     filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .backdrop-blur {
+    --tw-backdrop-blur: blur(8px);
+    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .transition-all {
+    transition-property: all;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
   :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .transition-colors {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -4791,6 +5014,31 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
+  :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .duration-300 {
+    --tw-duration: .3s;
+    transition-duration: .3s;
+  }
+
+  @layer daisyui.l1 {
+    :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .btn-outline:not(.btn-active, :hover, :active:focus, :focus-visible, input:checked:not(.filter .btn), :disabled, [disabled], .btn-disabled) {
+      --btn-shadow: "";
+      --btn-bg: #0000;
+      --btn-fg: var(--btn-color);
+      --btn-border: var(--btn-color);
+      --btn-noise: none;
+    }
+
+    @media (hover: none) {
+      :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .btn-outline:not(.btn-active, :active, :focus-visible, input:checked:not(.filter .btn)):hover {
+        --btn-shadow: "";
+        --btn-bg: #0000;
+        --btn-fg: var(--btn-color);
+        --btn-border: var(--btn-color);
+        --btn-noise: none;
+      }
+    }
+  }
+
   @layer daisyui.l1.l2 {
     :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .btn-sm {
       --fontsize: .75rem;
@@ -4807,6 +5055,20 @@
     }
   }
 
+  @layer daisyui.l1.l2 {
+    :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .badge-info {
+      --badge-color: var(--color-info);
+      --badge-fg: var(--color-info-content);
+    }
+  }
+
+  @layer daisyui.l1.l2 {
+    :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .badge-neutral {
+      --badge-color: var(--color-neutral);
+      --badge-fg: var(--color-neutral-content);
+    }
+  }
+
   @layer daisyui.l1.l2 {
     :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .badge-primary {
       --badge-color: var(--color-primary);
@@ -5058,6 +5320,12 @@
     }
   }
 
+  @media (width >= 64rem) {
+    :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .lg\:-mx-8 {
+      margin-inline: calc(var(--spacing) * -8);
+    }
+  }
+
   @media (width >= 64rem) {
     :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .lg\:mt-0 {
       margin-top: calc(var(--spacing) * 0);
@@ -5118,6 +5386,19 @@
       padding-inline: calc(var(--spacing) * 8);
     }
   }
+
+  @starting-style {
+    :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .starting\:-translate-y-2 {
+      --tw-translate-y: calc(var(--spacing) * -2);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+
+  @starting-style {
+    :where([data-theme='cairn-admin'], [data-theme='cairn-admin-dark']) .starting\:opacity-0 {
+      opacity: 0;
+    }
+  }
 }
 
 [data-theme="cairn-admin"] {
@@ -5135,17 +5416,17 @@
   --color-primary-content: oklch(98% .012 293);
   --color-secondary: oklch(45% .02 75);
   --color-secondary-content: oklch(98% .004 75);
-  --color-accent: oklch(58% .16 300);
+  --color-accent: oklch(54% .16 300);
   --color-accent-content: oklch(98% .012 300);
   --color-neutral: oklch(32% .012 75);
   --color-neutral-content: oklch(96% .004 75);
-  --color-info: oklch(60% .12 240);
+  --color-info: oklch(52% .12 240);
   --color-info-content: oklch(98% .012 240);
-  --color-success: oklch(58% .12 150);
+  --color-success: oklch(52% .12 150);
   --color-success-content: oklch(98% .012 150);
   --color-warning: oklch(75% .15 70);
   --color-warning-content: oklch(26% .05 70);
-  --color-error: oklch(58% .2 25);
+  --color-error: oklch(56% .2 25);
   --color-error-content: oklch(98% .012 25);
   --color-muted: oklch(48% .01 75);
   --color-subtle: oklch(42% .01 75);
@@ -5575,6 +5856,74 @@
   inherits: false
 }
 
+@property --tw-backdrop-blur {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-brightness {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-contrast {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-grayscale {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-hue-rotate {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-invert {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-opacity {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-saturate {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-backdrop-sepia {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-duration {
+  syntax: "*";
+  inherits: false
+}
+
+@property --tw-translate-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-translate-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --tw-translate-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
+
 @keyframes spin {
   to {
     transform: rotate(360deg);

package/dist/components/editor-highlight.d.ts

@@ -0,0 +1,9 @@
+import { HighlightStyle } from '@codemirror/language';
+import { ViewPlugin, type DecorationSet, type ViewUpdate } from '@codemirror/view';
+/** Markdown token colors over the admin theme variables. */
+export declare function cairnHighlightStyle(): HighlightStyle;
+/** Line and mark decorations flagging remark-directive machinery. */
+export declare function cairnDirectivePlugin(): ViewPlugin<{
+    decorations: DecorationSet;
+    update(update: ViewUpdate): void;
+}, undefined>;

package/dist/components/editor-highlight.js

@@ -0,0 +1,62 @@
+// The editor's syntax colors and the directive machinery decorations. Colors reference the Warm
+// Stone CSS variables so light and dark themes both resolve, and every token pair must hold WCAG
+// AA against --color-base-100 (checked in the design pass).
+import { HighlightStyle } from '@codemirror/language';
+import { tags } from '@lezer/highlight';
+import { Decoration, ViewPlugin } from '@codemirror/view';
+import { RangeSetBuilder } from '@codemirror/state';
+import { directiveLineKind, findInlineDirectives } from './markdown-directives.js';
+/** Markdown token colors over the admin theme variables. */
+export function cairnHighlightStyle() {
+    return HighlightStyle.define([
+        { tag: tags.heading, color: 'var(--color-primary)', fontWeight: '700' },
+        { tag: tags.strong, fontWeight: '700' },
+        { tag: tags.emphasis, fontStyle: 'italic' },
+        { tag: tags.strikethrough, textDecoration: 'line-through' },
+        { tag: tags.link, color: 'var(--color-info)' },
+        { tag: tags.url, color: 'var(--color-info)' },
+        { tag: tags.quote, color: 'var(--color-muted)', fontStyle: 'italic' },
+        { tag: tags.monospace, color: 'var(--color-accent)' },
+        { tag: tags.processingInstruction, color: 'var(--color-muted)' },
+        { tag: tags.list, color: 'var(--color-muted)' },
+    ]);
+}
+// The machinery lines explain themselves on hover, so an editor who has never seen ::: syntax
+// learns what the line is without leaving the page.
+const MACHINERY_HINT = 'Layout marker. Edit the text between these lines and leave this line as it is.';
+const fenceLine = Decoration.line({ class: 'cm-cairn-directive-fence', attributes: { title: MACHINERY_HINT } });
+const leafLine = Decoration.line({ class: 'cm-cairn-directive-leaf', attributes: { title: MACHINERY_HINT } });
+const inlineMark = Decoration.mark({ class: 'cm-cairn-directive-inline' });
+function buildDirectiveDecorations(view) {
+    const builder = new RangeSetBuilder();
+    for (const { from, to } of view.visibleRanges) {
+        for (let pos = from; pos <= to;) {
+            const line = view.state.doc.lineAt(pos);
+            const kind = directiveLineKind(line.text);
+            if (kind === 'fence')
+                builder.add(line.from, line.from, fenceLine);
+            else if (kind === 'leaf')
+                builder.add(line.from, line.from, leafLine);
+            else {
+                for (const r of findInlineDirectives(line.text)) {
+                    builder.add(line.from + r.from, line.from + r.to, inlineMark);
+                }
+            }
+            pos = line.to + 1;
+        }
+    }
+    return builder.finish();
+}
+/** Line and mark decorations flagging remark-directive machinery. */
+export function cairnDirectivePlugin() {
+    return ViewPlugin.fromClass(class {
+        decorations;
+        constructor(view) {
+            this.decorations = buildDirectiveDecorations(view);
+        }
+        update(update) {
+            if (update.docChanged || update.viewportChanged)
+                this.decorations = buildDirectiveDecorations(update.view);
+        }
+    }, { decorations: (v) => v.decorations });
+}

package/dist/components/markdown-directives.d.ts

@@ -0,0 +1,7 @@
+/** Classify a whole line as a container fence, a leaf directive, or neither. */
+export declare function directiveLineKind(line: string): 'fence' | 'leaf' | null;
+/** Inline directive ranges (`:name[...]{...}`) within a line of text. */
+export declare function findInlineDirectives(text: string): {
+    from: number;
+    to: number;
+}[];