arekui 1.0.2 → 2.0.0

package/src/components/alert.css

@@ -1,4 +1,3 @@
-/* ALERT */
 .ar-alert {
  display: flex;
  align-items: center;
@@ -23,4 +22,4 @@
 .ar-alert-error {
  background: var(--ar-error);
  color: var(--ar-error-content);
-}
+}

package/src/components/badge.css

@@ -1,4 +1,3 @@
-/* BADGE */
 .ar-badge {
  display: inline-flex;
  align-items: center;
@@ -30,4 +29,4 @@
 .ar-badge-xs {
  font-size: 0.55rem;
  padding: 0 0.375rem;
-}
+}

package/src/components/breadcrumb.css

@@ -1,4 +1,3 @@
-/* BREADCRUMB */
 .ar-breadcrumb {
  display: flex;
  flex-wrap: wrap;
@@ -20,7 +19,7 @@
  transition: color 0.2s ease;
 }
 .ar-breadcrumb-item a:hover {
- color: var(--ar-primary);
+ color: var(--ar-primary-text);
 }
 .ar-breadcrumb-item:not(:last-child)::after {
  content: "/";
@@ -30,4 +29,4 @@
 .ar-breadcrumb-item:last-child {
  color: var(--ar-base-content);
  font-weight: 600;
-}
+}

package/src/components/broadsheet.css

@@ -0,0 +1,264 @@
+/* The print sheet — an opt-in add-on, also shipped standalone as
+   dist/css/arekui.broadsheet.min.css (use it on top of any base bundle).
+   It sets a newspaper front page on framework tokens: nothing here renders
+   unless one of the classes below is used.
+
+   Two variable families. --ar-sheet-display/text/mono are the sheet's
+   faces; they default to the framework's own serif/mono stacks, so the
+   add-on works with zero setup — map them to hosted webfonts to set a
+   display face (the ArekUI docs map them to Bodoni Moda / Source Serif 4 /
+   Spline Sans Mono). The paper set (stock, ink, hairline, signal, tooth)
+   is pinned rather than derived from --ar-base-*: the framework's light
+   stock is pure white and its neutrals are tuned for white pages, while a
+   newspaper prints on paper. Each edition re-inks the whole set from
+   html[data-theme], so one sheet prints in all five themes.
+
+   Every edition's set is contrast-checked end to end (ink, soft, faint and
+   signal on both stocks, plus signal-as-fill): all eleven pairings clear
+   4.5:1. The default stock #f2efe7 carries ink #121110 at 16.41:1 and
+   signal #9c1b1b at 7.07:1; then per edition:
+
+    NIGHT  stock #16130f  ink 16.11:1  soft 7.22:1  signal #e07a5f 6.28:1
+    NEO    stock #e6f6fd  ink 17.88:1  soft 9.43:1  signal #005f80 6.43:1
+    PIXEL  stock #f4f1e8  ink 16.70:1  soft 9.25:1  signal #2c639e 5.49:1
+    BRUT.  stock #f1efe9  ink 17.22:1  soft 9.08:1  signal #ad3508 5.55:1 */
+:root {
+ /* Faces. The mono editions below re-set display and text to the mono
+    face for the whole paper. */
+ --ar-sheet-display: var(--ar-font-serif);
+ --ar-sheet-text: var(--ar-font-serif);
+ --ar-sheet-mono: var(--ar-font-mono);
+ /* Display weights. A serif display ships 700/900; a mono face usually
+    ships 400/600, so the mono editions drop these to what exists. */
+ --ar-sheet-weight-black: 900;
+ --ar-sheet-weight-bold: 700;
+ /* Nameplate and banner size their faces from these two — override them
+    to re-fit a fold contract. The mono editions re-set the banner because
+    a monospaced banner is ~15em wide and wraps two lines where the serif
+    holds one, which costs a front page its fold. */
+ --ar-sheet-nameplate-size: clamp(2.75rem, 13vw, 4.5rem);
+ --ar-sheet-banner-size: clamp(1.875rem, 7vw, 5.25rem);
+ /* Newsprint stock, one ink, one hairline, one signal. The signal is the
+    only saturated colour on the sheet, spent on live marks, section links,
+    step numbers and the active edition chip. */
+ --ar-sheet-paper: #f2efe7;
+ --ar-sheet-paper-2: #e9e5da;
+ --ar-sheet-ink: #121110;
+ --ar-sheet-ink-soft: #3f3f46;
+ --ar-sheet-ink-faint: #3f3f46;
+ --ar-sheet-rule: #c4bdae;
+ --ar-sheet-rule-strong: #121110;
+ --ar-sheet-signal: #9c1b1b;
+ /* Stock tooth: a fine halftone screen over the sheet, tuned per edition. */
+ --ar-sheet-grain: rgba(18, 17, 16, 0.14);
+}
+html[data-theme="dark"] {
+ --ar-sheet-paper: #16130f;
+ --ar-sheet-paper-2: #211d17;
+ --ar-sheet-ink: #f2efe7;
+ --ar-sheet-ink-soft: #a1a1aa;
+ --ar-sheet-ink-faint: #a1a1aa;
+ --ar-sheet-rule: #3a342b;
+ --ar-sheet-rule-strong: #f2efe7;
+ --ar-sheet-signal: #e07a5f;
+ --ar-sheet-grain: rgba(242, 239, 231, 0.1);
+}
+/* Neo prints on a pale cyan stock with the theme's own hue as the signal
+   and hard black rules — neobrutalism's poster, set in the same serif. */
+html[data-theme="neo"] {
+ --ar-sheet-paper: #e6f6fd;
+ --ar-sheet-paper-2: #d2eefb;
+ --ar-sheet-ink: #0a0a0a;
+ --ar-sheet-ink-soft: #3f3f46;
+ --ar-sheet-ink-faint: #3f3f46;
+ --ar-sheet-rule: #a5cddd;
+ --ar-sheet-rule-strong: #0a0a0a;
+ --ar-sheet-signal: #005f80;
+ --ar-sheet-grain: rgba(10, 10, 10, 0.09);
+}
+/* Pixel and brutalist re-set the whole paper in the mono face: display and
+   body text go mono, the weights drop to the 400/600 the faces ship, and
+   the banner shrinks to keep its single line. */
+html[data-theme="pixel"] {
+ --ar-sheet-display: var(--ar-sheet-mono);
+ --ar-sheet-text: var(--ar-sheet-mono);
+ --ar-sheet-weight-black: 600;
+ --ar-sheet-weight-bold: 600;
+ --ar-sheet-banner-size: clamp(1.875rem, 5.8vw, 4.75rem);
+ --ar-sheet-paper: #f4f1e8;
+ --ar-sheet-paper-2: #eae6d9;
+ --ar-sheet-rule: #cfc9b8;
+ --ar-sheet-signal: #2c639e;
+}
+html[data-theme="brutalist"] {
+ --ar-sheet-display: var(--ar-sheet-mono);
+ --ar-sheet-text: var(--ar-sheet-mono);
+ --ar-sheet-weight-black: 600;
+ --ar-sheet-weight-bold: 600;
+ --ar-sheet-banner-size: clamp(1.875rem, 5.8vw, 4.75rem);
+ --ar-sheet-paper: #f1efe9;
+ --ar-sheet-paper-2: #e5e2da;
+ --ar-sheet-rule: #121110;
+ --ar-sheet-rule-strong: #0a0a0a;
+ --ar-sheet-signal: #ad3508;
+}
+
+/* The printed double rule: a heavy line, a gap, then a hairline — the way
+   a front page rules its edges. A sheet carries three: above the masthead,
+   on the fold between the deck and the columns, and closing the page under
+   the footer (mirrored there: hairline over heavy). box-sizing is
+   border-box, so the height pays for both borders first:
+   8px = 3px heavy + 4px of paper + 1px hairline. */
+.ar-rule-double {
+ height: 0.5rem;
+ border-top: 3px solid var(--ar-sheet-rule-strong);
+ border-bottom: 1px solid var(--ar-sheet-rule-strong);
+ margin: var(--ar-s-2) 0;
+}
+.ar-rule-double-end {
+ border-top: 1px solid var(--ar-sheet-rule-strong);
+ border-bottom: 3px solid var(--ar-sheet-rule-strong);
+ margin-top: var(--ar-s-5);
+ margin-bottom: 0;
+}
+
+/* Masthead: the nameplate over the folio line — the order a front page
+   sets them. The nameplate's clamp is capped at 4.5rem: the nameplate,
+   banner, deck, facts, fold rule, columns and front-page footer rule all
+   close above a 900px fold, and a 13rem plate spends the budget on its own
+   ascenders. The display face is wide, so the 13vw term keeps it inside a
+   390px viewport; the cap takes over from ~550px up. */
+.ar-masthead {
+ text-align: center;
+}
+.ar-folio {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ gap: var(--ar-s-2);
+ font-family: var(--ar-sheet-mono);
+ font-size: 0.6875rem;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: var(--ar-sheet-ink-soft);
+ border-bottom: 1px solid var(--ar-sheet-rule);
+ padding-bottom: var(--ar-s-2);
+ margin-bottom: var(--ar-s-2);
+}
+.ar-folio > span {
+ min-width: 0;
+}
+.ar-nameplate {
+ font-family: var(--ar-sheet-display);
+ font-weight: var(--ar-sheet-weight-black);
+ line-height: 0.86;
+ letter-spacing: -0.045em;
+ font-size: var(--ar-sheet-nameplate-size);
+ margin: 0;
+}
+
+/* Banner: the day's story. The face sizes its banner through
+   --ar-sheet-banner-size, so one mark re-fits the whole front page. */
+.ar-banner {
+ font-family: var(--ar-sheet-display);
+ font-weight: var(--ar-sheet-weight-black);
+ letter-spacing: -0.03em;
+ line-height: 0.94;
+ font-size: var(--ar-sheet-banner-size);
+ margin: var(--ar-s-4) 0 var(--ar-s-2);
+ text-wrap: balance;
+ text-align: center;
+ overflow-wrap: break-word;
+ hyphens: auto;
+}
+
+/* Ruled column grid: an explicit, drawn grid. Grid children default to
+   min-width:auto, which lets one wide child stretch its track past the
+   viewport — let the columns shrink. Columns divide with hairlines; the
+   grid's own top rule is an .ar-rule-double above it. One column until
+   640px, two until 1024px, three above. */
+.ar-sheet-cols {
+ display: grid;
+ gap: 0;
+ grid-template-columns: minmax(0, 1fr);
+}
+.ar-sheet-col {
+ padding: var(--ar-s-2) 0 var(--ar-s-5);
+ border-bottom: 1px solid var(--ar-sheet-rule);
+ min-width: 0;
+}
+@media (min-width: 640px) {
+ .ar-sheet-cols {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  column-gap: var(--ar-s-6);
+ }
+ .ar-sheet-col {
+  border-bottom: 0;
+  border-right: 1px solid var(--ar-sheet-rule);
+  padding-right: var(--ar-s-6);
+ }
+ .ar-sheet-col:nth-child(2n) {
+  border-right: 0;
+  padding-right: 0;
+ }
+ .ar-sheet-col:nth-child(n + 3) {
+  border-top: 1px solid var(--ar-sheet-rule);
+  margin-top: var(--ar-s-5);
+  padding-top: var(--ar-s-5);
+ }
+}
+@media (min-width: 1024px) {
+ .ar-sheet-cols {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+ }
+ .ar-sheet-col {
+  border-right: 1px solid var(--ar-sheet-rule);
+  padding-right: var(--ar-s-5);
+ }
+ .ar-sheet-col:nth-child(2n) {
+  border-right: 1px solid var(--ar-sheet-rule);
+  padding-right: var(--ar-s-5);
+ }
+ .ar-sheet-col:last-child {
+  border-right: 0;
+  padding-right: 0;
+ }
+ .ar-sheet-col:nth-child(n + 3) {
+  border-top: 0;
+  margin-top: 0;
+  padding-top: var(--ar-s-2);
+ }
+}
+
+/* Plate: a live component set as a printed specimen — label pinned
+   top-left, body below, the class string under the frame. */
+.ar-plate {
+ border: 1px solid var(--ar-sheet-rule);
+ background: var(--ar-sheet-paper-2);
+ padding: var(--ar-s-3);
+ position: relative;
+ min-width: 0;
+}
+.ar-plate-label {
+ font-family: var(--ar-sheet-mono);
+ font-size: 0.625rem;
+ letter-spacing: 0.12em;
+ text-transform: uppercase;
+ color: var(--ar-sheet-ink-faint);
+ position: absolute;
+ top: var(--ar-s-2);
+ left: var(--ar-s-3);
+}
+.ar-plate-body {
+ margin-top: var(--ar-s-4);
+ min-width: 0;
+}
+.ar-plate-tag {
+ font-family: var(--ar-sheet-mono);
+ font-size: 0.6875rem;
+ color: var(--ar-sheet-ink-faint);
+ margin-top: var(--ar-s-2);
+ word-break: break-word;
+ overflow-wrap: anywhere;
+ min-width: 0;
+}

package/src/components/button.css

@@ -1,4 +1,4 @@
-/* BUTTONS */
+/* BUTTONS */
 .ar-btn {
  display: inline-flex;
  align-items: center;
@@ -29,6 +29,7 @@
 }
 .ar-btn-primary:hover {
  background: var(--ar-neutral);
+ color: var(--ar-neutral-content);
 }
 .ar-btn-outline {
  background: transparent;
@@ -100,4 +101,4 @@
  to {
   transform: rotate(360deg);
  }
-}
+}

package/src/components/card.css

@@ -1,4 +1,3 @@
-/* CARD */
 .ar-card {
  display: flex;
  flex-direction: column;
@@ -21,4 +20,4 @@
 .ar-card-figure img {
  width: 100%;
  object-fit: cover;
-}
+}

package/src/components/carousel.css

@@ -1,4 +1,3 @@
-/* CAROUSEL */
 .ar-carousel {
  display: flex;
  overflow-x: auto;
@@ -12,3 +11,40 @@
 .ar-carousel-item img {
  width: 100%;
 }
+.ar-carousel-frame {
+ position: relative;
+}
+.ar-carousel-btn {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ z-index: 2;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2.25rem;
+ height: 2.25rem;
+ padding: 0;
+ border: var(--ar-border-width) solid var(--ar-base-content);
+ border-radius: var(--ar-radius-pill);
+ background-color: var(--ar-base-100);
+ color: var(--ar-base-content);
+ font-size: 1.25rem;
+ line-height: 1;
+ cursor: pointer;
+ box-shadow: var(--ar-shadow-sm);
+ transition: all 0.2s ease;
+}
+.ar-carousel-btn:hover {
+ background-color: var(--ar-base-200);
+}
+.ar-carousel-btn:focus-visible {
+ outline: 2px solid var(--ar-primary);
+ outline-offset: 2px;
+}
+.ar-carousel-btn-prev {
+ left: var(--ar-s-2);
+}
+.ar-carousel-btn-next {
+ right: var(--ar-s-2);
+}

package/src/components/chat.css

@@ -1,4 +1,4 @@
-/* CHAT BUBBLE */
+/* CHAT BUBBLE */
 .ar-chat {
  display: flex;
  flex-direction: column;
@@ -49,14 +49,15 @@
  margin-bottom: var(--ar-s-1);
  font-size: 0.75rem;
  font-weight: 600;
- color: var(--ar-gray-600);
+ color: var(--ar-base-content);
 }
 .ar-chat-end .ar-chat-header {
  justify-content: flex-end;
 }
 .ar-chat-footer {
  font-size: 0.7rem;
- color: var(--ar-gray-500);
+ color: var(--ar-base-content);
+ opacity: 0.7;
  margin-top: var(--ar-s-1);
 }
 .ar-chat-start .ar-chat-footer {
@@ -75,4 +76,4 @@
  align-items: flex-end;
  gap: var(--ar-s-2);
  flex-direction: row-reverse;
-}
+}

package/src/components/description-list.css

@@ -0,0 +1,34 @@
+.ar-dl {
+ display: grid;
+ grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
+ margin: 0;
+}
+.ar-dt {
+ padding: var(--ar-s-3) var(--ar-s-6) var(--ar-s-3) 0;
+ color: var(--ar-gray-600);
+ font-weight: 600;
+ border-bottom: var(--ar-border-width) solid var(--ar-base-300);
+}
+.ar-dd {
+ padding: var(--ar-s-3) 0;
+ margin: 0;
+ color: var(--ar-base-content);
+ border-bottom: var(--ar-border-width) solid var(--ar-base-300);
+}
+/* The last pair closes the list without a trailing rule: -n + 2 clears the
+   dt and dd of the final row in both the two-column and stacked layouts. */
+.ar-dl > :nth-last-child(-n + 2) {
+ border-bottom: 0;
+}
+@media (max-width: 479px) {
+ .ar-dl {
+  grid-template-columns: 1fr;
+ }
+ .ar-dt {
+  padding: var(--ar-s-3) 0 0;
+  border-bottom: 0;
+ }
+ .ar-dd {
+  padding: var(--ar-s-1) 0 var(--ar-s-3);
+ }
+}

package/src/components/docs.css

@@ -0,0 +1,252 @@
+/* DOCS (documentation-site patterns) */
+.ar-docs-section {
+ scroll-margin-top: var(--ar-nav-h);
+}
+.ar-docs-main :is(h2, h3)[id] {
+ scroll-margin-top: var(--ar-nav-h);
+}
+.ar-docs-block {
+ border: 1px dashed var(--ar-base-300);
+ border-radius: var(--ar-radius-box);
+ padding: var(--ar-s-6);
+}
+.ar-docs-usage {
+ position: relative;
+ margin-top: var(--ar-s-4);
+ padding: var(--ar-s-4);
+ background: var(--ar-base-100);
+ border: 1px solid var(--ar-base-300);
+ border-left: 4px solid var(--ar-primary);
+ border-radius: var(--ar-radius-box);
+}
+.ar-docs-usage-tag {
+ display: inline-block;
+ margin-bottom: var(--ar-s-2);
+ font-size: 0.7rem;
+ font-weight: 700;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ color: var(--ar-primary-text);
+}
+.ar-docs-usage pre {
+ margin: 0;
+ padding: var(--ar-s-3);
+ background: var(--ar-base-200);
+ border: 1px solid var(--ar-base-300);
+ border-radius: var(--ar-radius-field);
+ overflow-x: auto;
+ font-size: 0.8rem;
+ line-height: 1.7;
+}
+.ar-docs-usage pre code {
+ background: transparent;
+ padding: 0;
+ border: 0;
+ border-radius: 0;
+ font-size: inherit;
+}
+.ar-docs-usage-hint {
+ margin: var(--ar-s-2) 0 0;
+ font-size: 0.8rem;
+ color: var(--ar-gray-600);
+}
+.ar-docs-usage .ar-docs-copy {
+ top: var(--ar-s-3);
+ right: var(--ar-s-3);
+}
+.ar-docs-lede {
+ margin-top: var(--ar-s-3);
+ max-width: 72ch;
+ font-size: 1.05rem;
+ line-height: 1.6;
+ color: var(--ar-gray-600);
+}
+.ar-docs-pager {
+ margin: var(--ar-s-8) 0;
+}
+.ar-docs-example {
+ position: relative;
+ margin-top: var(--ar-s-4);
+ background: var(--ar-base-100);
+ border: 1px solid var(--ar-base-300);
+ border-left: 4px solid var(--ar-primary);
+ border-radius: var(--ar-radius-box);
+}
+.ar-docs-example-head {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ gap: var(--ar-s-2);
+ padding: var(--ar-s-3) var(--ar-s-4) 0;
+}
+.ar-docs-example-head .ar-docs-usage-tag {
+ margin-bottom: 0;
+}
+.ar-docs-example-tabs {
+ display: inline-flex;
+ gap: var(--ar-s-1);
+}
+.ar-docs-example-tab {
+ font-size: 0.7rem;
+ font-weight: 700;
+ letter-spacing: 0.06em;
+ text-transform: uppercase;
+ padding: 0.25rem var(--ar-s-2);
+ color: var(--ar-gray-600);
+ background: transparent;
+ border: 1px solid transparent;
+ border-radius: var(--ar-radius-field);
+ cursor: pointer;
+ transition: color 0.15s ease, background-color 0.15s ease,
+  border-color 0.15s ease;
+}
+.ar-docs-example-tab:hover {
+ color: var(--ar-primary-text);
+}
+.ar-docs-example-tab[aria-selected="true"] {
+ color: var(--ar-primary-text);
+ background: var(--ar-base-200);
+ border-color: var(--ar-base-300);
+}
+.ar-docs-example-preview {
+ padding: var(--ar-s-4);
+}
+.ar-docs-example-code {
+ position: relative;
+ padding: 0 var(--ar-s-4) var(--ar-s-4);
+}
+.ar-docs-example-code pre {
+ margin: 0;
+ padding: var(--ar-s-3);
+ background: var(--ar-base-200);
+ border: 1px solid var(--ar-base-300);
+ border-radius: var(--ar-radius-field);
+ overflow-x: auto;
+ font-size: 0.8rem;
+ line-height: 1.7;
+}
+.ar-docs-example-code pre code {
+ background: transparent;
+ padding: 0;
+ border: 0;
+ border-radius: 0;
+ font-size: inherit;
+}
+.ar-docs-example-code .ar-docs-copy {
+ top: var(--ar-s-3);
+ right: calc(var(--ar-s-4) + var(--ar-s-2));
+}
+.ar-docs-options th {
+ white-space: nowrap;
+}
+.ar-docs-options td {
+ vertical-align: top;
+}
+.ar-docs-options td code {
+ word-break: normal;
+ overflow-wrap: normal;
+}
+.ar-docs-copy {
+ position: absolute;
+ top: var(--ar-s-2);
+ right: var(--ar-s-2);
+ padding: 0.25rem var(--ar-s-2);
+ font-size: 0.7rem;
+ font-weight: 700;
+ letter-spacing: 0.06em;
+ text-transform: uppercase;
+ line-height: 1.4;
+ color: var(--ar-base-content);
+ background: var(--ar-base-100);
+ border: 1px solid var(--ar-base-300);
+ border-radius: var(--ar-radius-field);
+ cursor: pointer;
+ transition: border-color 0.15s ease, background-color 0.15s ease,
+  color 0.15s ease;
+}
+.ar-docs-copy:hover {
+ border-color: var(--ar-primary);
+}
+.ar-docs-copy.is-done {
+ background: var(--ar-primary);
+ border-color: var(--ar-primary);
+ color: var(--ar-primary-content);
+}
+.ar-docs-shell {
+ display: flex;
+ align-items: flex-start;
+}
+.ar-docs-side {
+ display: contents;
+}
+.ar-docs-main {
+ flex: 1;
+ min-width: 0;
+}
+.ar-docs-side .ar-menu {
+ padding: var(--ar-s-1);
+ border: 1px solid var(--ar-base-300);
+ border-radius: var(--ar-radius-box);
+}
+.ar-docs-side .ar-menu li > a {
+ font-size: 0.875rem;
+}
+.ar-docs-versions .ar-docs-version {
+ display: block;
+ padding: var(--ar-s-1) var(--ar-s-2);
+ border-radius: var(--ar-radius-field);
+ font-size: 0.875rem;
+}
+a.ar-docs-version {
+ color: var(--ar-gray-700);
+ text-decoration: none;
+}
+a.ar-docs-version:hover {
+ background: var(--ar-base-200);
+}
+.ar-docs-version.is-current {
+ color: var(--ar-primary-text);
+ font-weight: 700;
+}
+.ar-docs-demo-img {
+ background: linear-gradient(135deg, var(--ar-base-300), var(--ar-base-200));
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--ar-gray-600);
+}
+@media (min-width: 1024px) {
+ .ar-docs-side {
+  display: block;
+  position: sticky;
+  top: var(--ar-nav-h);
+  width: 15rem;
+  flex-shrink: 0;
+  max-height: calc(100vh - 6rem);
+  overflow-y: auto;
+  padding: var(--ar-s-4);
+  border-right: 1px solid var(--ar-base-300);
+ }
+ .ar-docs-side > .ar-sidebar-panel > .ar-menu {
+  display: contents;
+ }
+ .ar-docs-side-norail {
+  display: none;
+ }
+}
+.ar-docs-demo-state .ar-sidebar-content {
+ transition: box-shadow 0.2s ease;
+}
+.ar-docs-demo-state .ar-menu {
+ transition: box-shadow 0.2s ease;
+}
+.ar-docs-demo-state.ar-sidebar-is-close .ar-sidebar-content {
+ box-shadow: inset 4px 0 0 var(--ar-base-300);
+}
+.ar-docs-demo-state.ar-sidebar-is-open .ar-sidebar-content {
+ box-shadow: inset 4px 0 0 var(--ar-primary);
+}
+.ar-docs-demo-state.ar-sidebar-is-open .ar-menu {
+ box-shadow: 6px 0 0 var(--ar-primary);
+}