@ox-content/vite-plugin 3.0.0-alpha.8 → 3.0.0-beta.0

package/dist/styles/tabs.css

@@ -0,0 +1,210 @@
+/* ox-content Tabs Plugin - Pure CSS, No JS */
+
+.ox-tabs {
+  margin: 1.25rem 0;
+  border: 1px solid var(--octc-color-border);
+  border-radius: 6px;
+  overflow: hidden;
+  background: var(--octc-color-bg);
+}
+
+.ox-tabs-header {
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+  padding: 0.35rem;
+  background: var(--octc-color-bg-alt);
+  border-bottom: 1px solid var(--octc-color-border);
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+
+.ox-tabs-header::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hidden radio inputs for tab selection */
+.ox-tabs input[type="radio"] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Tab labels */
+.ox-tabs label {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  min-width: 0;
+  min-height: 2.1rem;
+  padding: 0.42rem 0.7rem;
+  cursor: pointer;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--octc-color-text-muted);
+  border: 1px solid transparent;
+  border-bottom: 2px solid transparent;
+  border-radius: 5px;
+  white-space: nowrap;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease,
+    border-color 0.2s ease;
+}
+
+.ox-tabs label:hover {
+  color: var(--octc-color-text);
+  background: color-mix(in srgb, var(--octc-color-bg) 72%, transparent);
+}
+
+/* Checked tab label */
+.ox-tabs input[type="radio"]:checked + label {
+  color: var(--octc-color-primary);
+  background: var(--octc-color-bg);
+  border-color: var(--octc-color-border);
+  border-bottom-color: var(--octc-color-primary);
+}
+
+/* Focus styles for accessibility */
+.ox-tabs input[type="radio"]:focus-visible + label {
+  outline: var(--octc-focus-ring);
+  outline-offset: -2px;
+}
+
+/* Tab content panels */
+.ox-tab-panel {
+  display: none;
+  padding: 0.85rem 0.9rem;
+  background: var(--octc-color-bg);
+}
+
+/* Reset margins for first/last children in panels */
+.ox-tab-panel > :first-child {
+  margin-top: 0;
+}
+
+.ox-tab-panel > :last-child {
+  margin-bottom: 0;
+}
+
+/* Panel visibility via :has(). Radio ids are `ox-tab-{group}-{index}`. */
+@supports selector(:has(*)) {
+  .ox-tabs:has(input[id$="-0"]:checked) .ox-tab-panel[data-tab="0"] {
+    display: block;
+  }
+  .ox-tabs:has(input[id$="-1"]:checked) .ox-tab-panel[data-tab="1"] {
+    display: block;
+  }
+  .ox-tabs:has(input[id$="-2"]:checked) .ox-tab-panel[data-tab="2"] {
+    display: block;
+  }
+  .ox-tabs:has(input[id$="-3"]:checked) .ox-tab-panel[data-tab="3"] {
+    display: block;
+  }
+  .ox-tabs:has(input[id$="-4"]:checked) .ox-tab-panel[data-tab="4"] {
+    display: block;
+  }
+  .ox-tabs:has(input[id$="-5"]:checked) .ox-tab-panel[data-tab="5"] {
+    display: block;
+  }
+  .ox-tabs:has(input[id$="-6"]:checked) .ox-tab-panel[data-tab="6"] {
+    display: block;
+  }
+  .ox-tabs:has(input[id$="-7"]:checked) .ox-tab-panel[data-tab="7"] {
+    display: block;
+  }
+
+  .ox-tab-panel:has(> pre:only-child),
+  .ox-tabs-fallback .ox-tabs-fallback-content:has(> pre:only-child) {
+    padding: 0;
+    background: var(--octc-color-code-bg);
+  }
+
+  .ox-tab-panel:has(> pre:only-child) > pre,
+  .ox-tabs-fallback .ox-tabs-fallback-content:has(> pre:only-child) > pre {
+    margin: 0;
+    border: 0;
+    border-radius: 0;
+  }
+}
+
+/* Code blocks inside tabs */
+.ox-tab-panel pre {
+  margin: 0.5rem 0;
+}
+
+.ox-tab-panel pre:first-child {
+  margin-top: 0;
+}
+
+.ox-tab-panel pre:last-child {
+  margin-bottom: 0;
+}
+
+.ox-tab-panel > .ox-code {
+  margin: 0;
+}
+
+/* Fallback for older browsers using <details> */
+.ox-tabs-fallback {
+  margin: 1.5rem 0;
+}
+
+.ox-tabs-fallback details {
+  border: 1px solid var(--octc-color-border);
+  border-radius: 4px;
+  margin-bottom: 0.5rem;
+}
+
+.ox-tabs-fallback details:last-child {
+  margin-bottom: 0;
+}
+
+.ox-tabs-fallback summary {
+  padding: 0.55rem 0.75rem;
+  cursor: pointer;
+  font-weight: 500;
+  background: var(--octc-color-bg-alt);
+  border-radius: 4px;
+  list-style: none;
+}
+
+.ox-tabs-fallback summary::-webkit-details-marker {
+  display: none;
+}
+
+.ox-tabs-fallback summary::before {
+  content: "▸ ";
+  display: inline-block;
+  margin-right: 0.5rem;
+  transition: transform 0.2s ease;
+}
+
+.ox-tabs-fallback details[open] summary::before {
+  transform: rotate(90deg);
+}
+
+.ox-tabs-fallback details[open] summary {
+  border-radius: 4px 4px 0 0;
+  border-bottom: 1px solid var(--octc-color-border);
+}
+
+.ox-tabs-fallback .ox-tabs-fallback-content {
+  padding: 0.85rem 0.9rem;
+}
+
+/* The disclosure marker still turns, it just turns instantly. */
+@media (prefers-reduced-motion: reduce) {
+  .ox-tabs label,
+  .ox-tabs-fallback summary::before {
+    transition: none;
+  }
+}

package/dist/styles/theme-transition.css

@@ -0,0 +1,37 @@
+/* Same-document colour-scheme change. Every rule is scoped to an attribute the
+   runtime sets for the length of one theme toggle, so none of it can reach the
+   cross-document `@view-transition` used for MPA navigation — that transition
+   needs the UA cross-fade left alone. */
+
+/* The circle is drawn by clipping one snapshot over the other, so the UA
+   cross-fade has to stop first: two half-opacity snapshots would show the clip
+   through the layer beneath it. */
+:root[data-ox-theme-transition]::view-transition-old(root),
+:root[data-ox-theme-transition]::view-transition-new(root) {
+  animation: none;
+  mix-blend-mode: normal;
+}
+
+/* Whichever snapshot the circle is drawn on has to sit on top of the other. */
+:root[data-ox-theme-transition="expand"]::view-transition-old(root) {
+  z-index: 1;
+}
+:root[data-ox-theme-transition="expand"]::view-transition-new(root) {
+  z-index: 2;
+}
+:root[data-ox-theme-transition="shrink"]::view-transition-old(root) {
+  z-index: 2;
+}
+:root[data-ox-theme-transition="shrink"]::view-transition-new(root) {
+  z-index: 1;
+}
+
+/* Element-level colour transitions would animate underneath the snapshot and
+   bleed the old palette into the new one. The runtime holds this attribute
+   only while the theme is mutated, and drops it once both snapshots exist. */
+:root[data-ox-theme-transition-suppress],
+:root[data-ox-theme-transition-suppress] *,
+:root[data-ox-theme-transition-suppress] *::before,
+:root[data-ox-theme-transition-suppress] *::after {
+  transition: none !important;
+}