@helixui/library 0.1.0

package/dist/shared/hx-prose-BUkZ8rB3.js

@@ -0,0 +1,873 @@
+import { LitElement as x, html as p } from "lit";
+import { property as l, customElement as d } from "lit/decorators.js";
+import { A as c } from "./adopted-stylesheets-BZZnCSAs.js";
+const m = `/* ==========================================================================
+   Prose — Scoped Barrel File
+   All prose styles with selectors scoped to the \`hx-prose\` wrapper.
+   Prevents styles from leaking outside the <hx-prose> component.
+
+   Usage:
+     @import '@wc-2026/library/styles/prose/prose.scoped.css';
+
+     <hx-prose>
+       <h1>My heading</h1>
+       <p>My content from CKEditor...</p>
+     </hx-prose>
+
+   Override prose custom properties on the hx-prose element or any ancestor:
+     hx-prose {
+       --hx-prose-max-width: 720px;
+       --hx-prose-font-size: var(--hx-font-size-md, 1rem);
+       --hx-prose-line-height: var(--hx-line-height-relaxed, 1.75);
+       --hx-prose-color: var(--hx-color-neutral-700, #343a40);
+       --hx-prose-heading-color: var(--hx-color-neutral-900, #111827);
+       --hx-prose-link-color: var(--hx-color-primary-500, #2563EB);
+     }
+   ========================================================================== */
+
+/* ==========================================================================
+   Container Base
+   Sets display:block declaratively to prevent FOUC before JS lifecycle fires.
+   Establishes font-family baseline so prose is not affected by ancestor fonts.
+   ========================================================================== */
+
+hx-prose {
+  display: block;
+  font-family: var(--hx-font-family-sans, sans-serif);
+}
+
+/* ==========================================================================
+   Headings
+   ========================================================================== */
+
+hx-prose h1,
+hx-prose h2,
+hx-prose h3,
+hx-prose h4,
+hx-prose h5,
+hx-prose h6 {
+  font-family: var(
+    --hx-prose-heading-font-family,
+    var(--hx-heading-font-family, var(--hx-font-family-sans, sans-serif))
+  );
+  font-weight: var(
+    --hx-prose-heading-font-weight,
+    var(--hx-heading-font-weight, var(--hx-font-weight-bold, 700))
+  );
+  line-height: var(
+    --hx-prose-heading-line-height,
+    var(--hx-heading-line-height, var(--hx-line-height-tight, 1.25))
+  );
+  letter-spacing: var(
+    --hx-prose-heading-letter-spacing,
+    var(--hx-heading-letter-spacing, var(--hx-letter-spacing-tight, -0.025em))
+  );
+  color: var(--hx-prose-heading-color, var(--hx-color-neutral-900, #111827));
+  margin-top: 0;
+  scroll-margin-top: var(--hx-space-8, 2rem);
+}
+
+hx-prose h1 {
+  font-size: var(--hx-prose-h1-font-size, var(--hx-font-size-4xl, 2.25rem));
+  margin-bottom: var(--hx-space-6, 1.5rem);
+}
+
+hx-prose h2 {
+  font-size: var(--hx-prose-h2-font-size, var(--hx-font-size-3xl, 1.875rem));
+  margin-bottom: var(--hx-space-5, 1.25rem);
+  padding-bottom: var(--hx-space-3, 0.75rem);
+  border-bottom: var(--hx-border-width-thin, 1px) solid
+    var(--hx-color-border-subtle, var(--hx-color-neutral-100, #e9ecef));
+}
+
+hx-prose h3 {
+  font-size: var(--hx-prose-h3-font-size, var(--hx-font-size-2xl, 1.5rem));
+  margin-bottom: var(--hx-space-4, 1rem);
+}
+
+hx-prose h4 {
+  font-size: var(--hx-prose-h4-font-size, var(--hx-font-size-xl, 1.25rem));
+  margin-bottom: var(--hx-space-3, 0.75rem);
+}
+
+hx-prose h5 {
+  font-size: var(--hx-prose-h5-font-size, var(--hx-font-size-lg, 1.125rem));
+  margin-bottom: var(--hx-space-3, 0.75rem);
+}
+
+hx-prose h6 {
+  font-size: var(--hx-prose-h6-font-size, var(--hx-font-size-md, 1rem));
+  font-weight: var(--hx-font-weight-semibold, 600);
+  text-transform: uppercase;
+  letter-spacing: var(--hx-letter-spacing-wide, 0.025em);
+  margin-bottom: var(--hx-space-3, 0.75rem);
+  color: var(--hx-color-text-secondary, var(--hx-color-neutral-600, #495057));
+}
+
+/* Adjacent heading spacing */
+hx-prose h1 + h2,
+hx-prose h2 + h3,
+hx-prose h3 + h4,
+hx-prose h4 + h5,
+hx-prose h5 + h6 {
+  margin-top: var(--hx-space-2, 0.5rem);
+}
+
+/* Spacing above headings when preceded by content */
+hx-prose * + h1 {
+  margin-top: var(--hx-space-12, 3rem);
+}
+
+hx-prose * + h2 {
+  margin-top: var(--hx-space-10, 2.5rem);
+}
+
+hx-prose * + h3 {
+  margin-top: var(--hx-space-8, 2rem);
+}
+
+hx-prose * + h4,
+hx-prose * + h5,
+hx-prose * + h6 {
+  margin-top: var(--hx-space-6, 1.5rem);
+}
+
+/* ==========================================================================
+   Body Text
+   ========================================================================== */
+
+hx-prose p {
+  margin-top: 0;
+  margin-bottom: var(--hx-space-4, 1rem);
+  font-size: var(--hx-prose-font-size, var(--hx-font-size-md, 1rem));
+  line-height: var(--hx-prose-line-height, var(--hx-line-height-relaxed, 1.75));
+  color: var(--hx-prose-color, var(--hx-color-neutral-700, #343a40));
+}
+
+/* Lead paragraph — opt-in via .lead class only.
+   Removed p:first-child because CKEditor/Drupal output always starts with a <p>
+   and promoting every first paragraph to lead styling is semantically incorrect
+   for healthcare content (medication instructions, care plans, clinical protocols). */
+hx-prose p.lead {
+  font-size: var(--hx-prose-lead-font-size, var(--hx-font-size-lg, 1.125rem));
+  color: var(--hx-prose-lead-color, var(--hx-color-neutral-600, #495057));
+}
+
+/* Blockquote */
+hx-prose blockquote {
+  margin-top: 0;
+  margin-bottom: var(--hx-space-6, 1.5rem);
+  margin-left: 0;
+  margin-right: 0;
+  padding: var(--hx-space-4, 1rem) var(--hx-space-6, 1.5rem);
+  border-left: var(--hx-border-width-thick, 3px) solid var(--hx-color-primary-500, #2563eb);
+  background-color: var(--hx-color-surface-raised, var(--hx-color-neutral-50, #f8f9fa));
+  border-radius: 0 var(--hx-border-radius-sm, 0.25rem) var(--hx-border-radius-sm, 0.25rem) 0;
+  font-style: italic;
+  color: var(--hx-color-text-secondary, var(--hx-color-neutral-600, #495057));
+}
+
+hx-prose blockquote p {
+  color: inherit;
+}
+
+hx-prose blockquote p:last-child {
+  margin-bottom: 0;
+}
+
+hx-prose blockquote cite {
+  display: block;
+  margin-top: var(--hx-space-2, 0.5rem);
+  font-size: var(--hx-font-size-sm, 0.875rem);
+  font-style: normal;
+  font-weight: var(--hx-font-weight-medium, 500);
+  color: var(--hx-color-text-muted, var(--hx-color-neutral-500, #6c757d));
+}
+
+hx-prose blockquote cite::before {
+  content: '\\2014\\00A0';
+}
+
+/* Horizontal Rule */
+hx-prose hr {
+  border: 0;
+  border-top: var(--hx-divider-width, var(--hx-border-width-thin, 1px)) solid
+    var(--hx-divider-color, var(--hx-color-border-default, var(--hx-color-neutral-200, #dee2e6)));
+  margin-top: var(--hx-space-8, 2rem);
+  margin-bottom: var(--hx-space-8, 2rem);
+}
+
+/* Inline Text Elements */
+hx-prose strong,
+hx-prose b {
+  font-weight: var(--hx-font-weight-semibold, 600);
+  color: var(--hx-prose-heading-color, var(--hx-color-neutral-900, #111827));
+}
+
+hx-prose em,
+hx-prose i {
+  font-style: italic;
+}
+
+hx-prose small {
+  font-size: var(--hx-font-size-sm, 0.875rem);
+  color: var(--hx-color-text-muted, var(--hx-color-neutral-500, #6c757d));
+}
+
+hx-prose mark {
+  background-color: var(--hx-color-warning-100, #fff3cd);
+  color: var(--hx-color-neutral-900, #0d1117);
+  padding: var(--hx-space-0, 0) var(--hx-space-1, 0.25rem);
+  border-radius: var(--hx-border-radius-sm, 0.25rem);
+}
+
+hx-prose del,
+hx-prose s {
+  text-decoration: line-through;
+  color: var(--hx-color-text-muted, var(--hx-color-neutral-500, #6c757d));
+}
+
+hx-prose ins {
+  text-decoration: underline;
+  text-decoration-color: var(--hx-color-success-300, #75b798);
+}
+
+hx-prose abbr[title] {
+  text-decoration: underline dotted;
+  text-decoration-color: var(--hx-color-text-muted, var(--hx-color-neutral-500, #6c757d));
+  cursor: help;
+  text-underline-offset: 0.15em;
+}
+
+hx-prose sub,
+hx-prose sup {
+  font-size: var(--hx-font-size-xs, 0.75rem);
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+hx-prose sup {
+  top: -0.5em;
+}
+
+hx-prose sub {
+  bottom: -0.25em;
+}
+
+/* Links */
+hx-prose a {
+  color: var(
+    --hx-prose-link-color,
+    var(--hx-color-text-link, var(--hx-color-primary-600, #006868))
+  );
+  text-decoration: underline;
+  text-decoration-color: var(--hx-color-primary-200, #80c2c2);
+  text-underline-offset: 0.15em;
+  transition:
+    color var(--hx-transition-fast, 150ms ease),
+    text-decoration-color var(--hx-transition-fast, 150ms ease);
+}
+
+hx-prose a:hover {
+  color: var(--hx-color-text-link-hover, var(--hx-color-primary-700, #005252));
+  text-decoration-color: currentColor;
+}
+
+hx-prose a:visited {
+  color: var(--hx-color-text-link-visited, var(--hx-color-secondary-600, #4f46e5));
+}
+
+hx-prose a:active {
+  color: var(--hx-color-text-link-active, var(--hx-color-primary-800, #003c3c));
+}
+
+hx-prose a:focus-visible {
+  outline: var(--hx-focus-ring-width, 2px) solid
+    var(--hx-focus-ring-color, var(--hx-color-primary-500, #2563eb));
+  outline-offset: var(--hx-focus-ring-offset, 2px);
+  border-radius: var(--hx-border-radius-sm, 0.25rem);
+}
+
+/* ==========================================================================
+   Lists
+   ========================================================================== */
+
+hx-prose ul,
+hx-prose ol {
+  margin-top: 0;
+  margin-bottom: var(--hx-space-4, 1rem);
+  padding-left: var(--hx-space-6, 1.5rem);
+  color: var(--hx-prose-color, var(--hx-color-neutral-700, #343a40));
+}
+
+hx-prose ul {
+  list-style-type: disc;
+}
+
+hx-prose ol {
+  list-style-type: decimal;
+}
+
+hx-prose li {
+  margin-bottom: var(--hx-space-2, 0.5rem);
+  font-size: var(--hx-prose-font-size, var(--hx-font-size-md, 1rem));
+  line-height: var(--hx-prose-line-height, var(--hx-line-height-relaxed, 1.75));
+}
+
+hx-prose li:last-child {
+  margin-bottom: 0;
+}
+
+/* Paragraph inside a list item */
+hx-prose li > p {
+  margin-bottom: var(--hx-space-2, 0.5rem);
+}
+
+hx-prose li > p:last-child {
+  margin-bottom: 0;
+}
+
+/* Nested Lists */
+hx-prose ul ul,
+hx-prose ol ul {
+  list-style-type: circle;
+  margin-top: var(--hx-space-2, 0.5rem);
+  margin-bottom: var(--hx-space-2, 0.5rem);
+}
+
+hx-prose ul ul ul,
+hx-prose ol ul ul,
+hx-prose ul ol ul,
+hx-prose ol ol ul {
+  list-style-type: square;
+}
+
+hx-prose ol ol,
+hx-prose ul ol {
+  list-style-type: lower-alpha;
+  margin-top: var(--hx-space-2, 0.5rem);
+  margin-bottom: var(--hx-space-2, 0.5rem);
+}
+
+hx-prose ol ol ol,
+hx-prose ul ol ol,
+hx-prose ol ul ol,
+hx-prose ul ul ol {
+  list-style-type: lower-roman;
+}
+
+/* List Marker Color */
+hx-prose ul ::marker,
+hx-prose ol ::marker {
+  color: var(--hx-color-text-muted, var(--hx-color-neutral-500, #6c757d));
+}
+
+/* Definition Lists */
+hx-prose dl {
+  margin-top: 0;
+  margin-bottom: var(--hx-space-4, 1rem);
+}
+
+hx-prose dt {
+  font-weight: var(--hx-font-weight-semibold, 600);
+  color: var(--hx-prose-heading-color, var(--hx-color-neutral-900, #111827));
+  margin-bottom: var(--hx-space-1, 0.25rem);
+}
+
+hx-prose dt + dt {
+  margin-top: var(--hx-space-4, 1rem);
+}
+
+hx-prose dd {
+  margin-left: var(--hx-space-6, 1.5rem);
+  margin-bottom: var(--hx-space-4, 1rem);
+  color: var(--hx-prose-color, var(--hx-color-neutral-700, #343a40));
+}
+
+hx-prose dd:last-child {
+  margin-bottom: 0;
+}
+
+/* ==========================================================================
+   Tables
+   ========================================================================== */
+
+hx-prose table {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  margin-top: 0;
+  margin-bottom: var(--hx-space-6, 1.5rem);
+  font-size: var(--hx-prose-font-size, var(--hx-font-size-md, 1rem));
+  line-height: var(--hx-line-height-normal, 1.5);
+  color: var(--hx-prose-color, var(--hx-color-neutral-700, #343a40));
+  overflow-x: auto;
+  display: block;
+}
+
+@media (min-width: 640px) {
+  hx-prose table {
+    display: table;
+  }
+}
+
+hx-prose caption {
+  padding-top: var(--hx-space-3, 0.75rem);
+  padding-bottom: var(--hx-space-3, 0.75rem);
+  font-size: var(--hx-font-size-sm, 0.875rem);
+  font-weight: var(--hx-font-weight-medium, 500);
+  color: var(--hx-color-text-muted, var(--hx-color-neutral-500, #6c757d));
+  text-align: left;
+  /* caption-side:top matches DOM order — WAI-ARIA authoring practices recommend
+     caption at top for data tables so screen reader announcement aligns with
+     visual placement. caption-side:bottom creates AT/visual mismatch (WCAG H39). */
+  caption-side: top;
+}
+
+hx-prose thead {
+  border-bottom: var(--hx-border-width-medium, 2px) solid
+    var(--hx-color-border-default, var(--hx-color-neutral-200, #dee2e6));
+}
+
+hx-prose tfoot {
+  border-top: var(--hx-border-width-medium, 2px) solid
+    var(--hx-color-border-default, var(--hx-color-neutral-200, #dee2e6));
+}
+
+hx-prose th {
+  padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
+  font-weight: var(--hx-font-weight-semibold, 600);
+  color: var(--hx-prose-heading-color, var(--hx-color-neutral-900, #111827));
+  text-align: left;
+  /* Removed white-space:nowrap — long clinical header text (e.g. "Prescribing Physician")
+     causes horizontal overflow on mobile viewports and forces table width to be
+     determined by longest header rather than content. */
+  background-color: var(--hx-color-surface-raised, var(--hx-color-neutral-50, #f8f9fa));
+}
+
+hx-prose td {
+  padding: var(--hx-space-3, 0.75rem) var(--hx-space-4, 1rem);
+  border-bottom: var(--hx-border-width-thin, 1px) solid
+    var(--hx-color-border-default, var(--hx-color-neutral-200, #dee2e6));
+  vertical-align: top;
+}
+
+/* Zebra Striping */
+hx-prose tbody tr:nth-child(even) {
+  background-color: var(--hx-color-surface-raised, var(--hx-color-neutral-50, #f8f9fa));
+}
+
+/* Row Hover */
+hx-prose tbody tr:hover {
+  background-color: var(--hx-color-primary-50, #e6f3f3);
+}
+
+/* Alignment Helpers — Drupal CKEditor compatibility shims.
+   The HTML \`align\` attribute is deprecated in HTML5 but CKEditor may still
+   emit it. These selectors normalize deprecated presentational markup.
+   Note: [align='left'] is intentionally omitted since left-align is the default. */
+hx-prose th[align='center'],
+hx-prose td[align='center'] {
+  text-align: center;
+}
+
+hx-prose th[align='right'],
+hx-prose td[align='right'] {
+  text-align: right;
+}
+
+/* ==========================================================================
+   Code
+   ========================================================================== */
+
+/* Inline Code */
+hx-prose code {
+  font-family: var(
+    --hx-font-family-mono,
+    'JetBrains Mono',
+    ui-monospace,
+    'Cascadia Code',
+    monospace
+  );
+  font-size: var(--hx-font-size-sm, 0.875em);
+  font-weight: var(--hx-font-weight-normal, 400);
+  background-color: var(--hx-color-surface-sunken, var(--hx-color-neutral-100, #e9ecef));
+  color: var(--hx-color-error-600, #b02a37);
+  padding: var(--hx-prose-code-padding-v, 0.125em) var(--hx-space-1, 0.25rem);
+  border-radius: var(--hx-border-radius-sm, 0.25rem);
+  word-break: break-word;
+}
+
+/* Code Blocks */
+hx-prose pre {
+  margin-top: 0;
+  margin-bottom: var(--hx-space-6, 1.5rem);
+  padding: var(--hx-space-4, 1rem) var(--hx-space-5, 1.25rem);
+  overflow-x: auto;
+  font-family: var(
+    --hx-font-family-mono,
+    'JetBrains Mono',
+    ui-monospace,
+    'Cascadia Code',
+    monospace
+  );
+  font-size: var(--hx-font-size-sm, 0.875rem);
+  line-height: var(--hx-line-height-relaxed, 1.75);
+  color: var(--hx-color-neutral-800, #212529);
+  background-color: var(--hx-color-surface-sunken, var(--hx-color-neutral-100, #e9ecef));
+  border: var(--hx-border-width-thin, 1px) solid
+    var(--hx-color-border-default, var(--hx-color-neutral-200, #dee2e6));
+  border-radius: var(--hx-border-radius-md, 0.375rem);
+  -webkit-overflow-scrolling: touch;
+  tab-size: 2;
+}
+
+/* Reset inline code styles inside pre */
+hx-prose pre code {
+  background-color: transparent;
+  color: inherit;
+  padding: 0;
+  border-radius: 0;
+  font-size: inherit;
+  font-weight: inherit;
+  word-break: normal;
+}
+
+/* Keyboard Input */
+hx-prose kbd {
+  font-family: var(
+    --hx-font-family-mono,
+    'JetBrains Mono',
+    ui-monospace,
+    'Cascadia Code',
+    monospace
+  );
+  font-size: var(--hx-font-size-sm, 0.875em);
+  padding: var(--hx-prose-code-padding-v, 0.125em) var(--hx-space-2, 0.5rem);
+  background-color: var(--hx-color-neutral-800, #212529);
+  color: var(--hx-color-neutral-0, #ffffff);
+  border-radius: var(--hx-border-radius-sm, 0.25rem);
+  box-shadow: var(--hx-shadow-inset-sm, inset 0 -1px 0 rgba(0, 0, 0, 0.25));
+}
+
+/* Sample Output */
+hx-prose samp {
+  font-family: var(
+    --hx-font-family-mono,
+    'JetBrains Mono',
+    ui-monospace,
+    'Cascadia Code',
+    monospace
+  );
+  font-size: var(--hx-font-size-sm, 0.875em);
+}
+
+/* Variable */
+hx-prose var {
+  font-style: italic;
+  color: var(--hx-color-secondary-600, #4f46e5);
+}
+
+/* ==========================================================================
+   Media
+   ========================================================================== */
+
+/* Images */
+hx-prose img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  border-radius: var(--hx-border-radius-sm, 0.25rem);
+}
+
+/* Figure */
+hx-prose figure {
+  margin: 0;
+  margin-bottom: var(--hx-space-6, 1.5rem);
+}
+
+hx-prose figure img {
+  margin-bottom: 0;
+}
+
+hx-prose figure > a {
+  display: block;
+}
+
+hx-prose figure > a img {
+  border-radius: var(--hx-border-radius-sm, 0.25rem);
+}
+
+hx-prose figcaption {
+  margin-top: var(--hx-space-2, 0.5rem);
+  font-size: var(--hx-font-size-sm, 0.875rem);
+  line-height: var(--hx-line-height-normal, 1.5);
+  color: var(--hx-color-text-muted, var(--hx-color-neutral-500, #6c757d));
+  font-style: italic;
+}
+
+/* Video */
+hx-prose video {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin-bottom: var(--hx-space-6, 1.5rem);
+  border-radius: var(--hx-border-radius-sm, 0.25rem);
+}
+
+/* Iframes */
+hx-prose iframe {
+  max-width: 100%;
+  border: 0;
+  margin-bottom: var(--hx-space-6, 1.5rem);
+  border-radius: var(--hx-border-radius-sm, 0.25rem);
+}
+
+/* Responsive Embed Wrapper */
+hx-prose .embed-responsive,
+hx-prose .video-embed,
+hx-prose .media-oembed {
+  position: relative;
+  width: 100%;
+  padding-bottom: 56.25%;
+  height: 0;
+  overflow: hidden;
+  margin-bottom: var(--hx-space-6, 1.5rem);
+  border-radius: var(--hx-border-radius-sm, 0.25rem);
+}
+
+hx-prose .embed-responsive iframe,
+hx-prose .embed-responsive video,
+hx-prose .video-embed iframe,
+hx-prose .video-embed video,
+hx-prose .media-oembed iframe,
+hx-prose .media-oembed video {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin-bottom: 0;
+  border-radius: 0;
+}
+
+/* Audio */
+hx-prose audio {
+  width: 100%;
+  margin-bottom: var(--hx-space-6, 1.5rem);
+}
+
+/* Object / Embed */
+hx-prose object,
+hx-prose embed {
+  max-width: 100%;
+}
+
+/* ==========================================================================
+   Drupal
+   ========================================================================== */
+
+/* Drupal Field Wrappers */
+hx-prose .field {
+  margin-bottom: var(--hx-space-4, 1rem);
+}
+
+hx-prose .field:last-child {
+  margin-bottom: 0;
+}
+
+hx-prose .field__label {
+  font-weight: var(--hx-font-weight-semibold, 600);
+  font-size: var(--hx-font-size-sm, 0.875rem);
+  color: var(--hx-color-text-secondary, var(--hx-color-neutral-600, #495057));
+  margin-bottom: var(--hx-space-1, 0.25rem);
+  text-transform: uppercase;
+  letter-spacing: var(--hx-letter-spacing-wide, 0.025em);
+}
+
+hx-prose .field__item {
+  margin-bottom: var(--hx-space-2, 0.5rem);
+}
+
+hx-prose .field__item:last-child {
+  margin-bottom: 0;
+}
+
+hx-prose .field__items {
+  list-style: none;
+  padding-left: 0;
+  margin: 0;
+}
+
+/* Text Formatted (CKEditor wrapper) */
+hx-prose .text-formatted > *:last-child {
+  margin-bottom: 0;
+}
+
+/* Drupal Media Embeds */
+hx-prose .media-embed,
+hx-prose .embedded-entity,
+hx-prose .media--type-image,
+hx-prose .media--type-remote-video {
+  margin-top: var(--hx-space-4, 1rem);
+  margin-bottom: var(--hx-space-6, 1.5rem);
+}
+
+hx-prose .media-embed img,
+hx-prose .embedded-entity img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+}
+
+/* CKEditor Alignment Classes */
+hx-prose .align-left {
+  float: left;
+  margin-right: var(--hx-space-6, 1.5rem);
+  margin-bottom: var(--hx-space-4, 1rem);
+  max-width: 50%;
+}
+
+hx-prose .align-right {
+  float: right;
+  margin-left: var(--hx-space-6, 1.5rem);
+  margin-bottom: var(--hx-space-4, 1rem);
+  max-width: 50%;
+}
+
+hx-prose .align-center {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: var(--hx-space-6, 1.5rem);
+  text-align: center;
+}
+
+/* Reset float on alignment images */
+hx-prose .align-left img,
+hx-prose .align-right img {
+  display: block;
+}
+
+/* Float siblings — allow content to wrap around aligned images (intentional).
+   Removed explicit clear:none; the default is already no-clear and setting it
+   explicitly prevented consumers from overriding it when clearfix is needed.
+   Use the .clearfix utility class on the parent container when floats must be cleared. */
+
+/* CKEditor Caption */
+hx-prose .caption {
+  margin-bottom: var(--hx-space-6, 1.5rem);
+}
+
+hx-prose .caption figcaption,
+hx-prose .caption .caption-text {
+  font-size: var(--hx-font-size-sm, 0.875rem);
+  color: var(--hx-color-text-muted, var(--hx-color-neutral-500, #6c757d));
+  font-style: italic;
+  margin-top: var(--hx-space-2, 0.5rem);
+}
+
+/* Drupal Table Classes */
+hx-prose .table-responsive {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  margin-bottom: var(--hx-space-6, 1.5rem);
+}
+
+hx-prose .table-responsive table {
+  margin-bottom: 0;
+}
+
+/* Drupal Messages / Callouts */
+hx-prose .messages,
+hx-prose .callout {
+  padding: var(--hx-space-4, 1rem) var(--hx-space-5, 1.25rem);
+  margin-bottom: var(--hx-space-4, 1rem);
+  border: var(--hx-border-width-thin, 1px) solid
+    var(--hx-color-border-default, var(--hx-color-neutral-200, #dee2e6));
+  border-radius: var(--hx-border-radius-md, 0.375rem);
+  border-left-width: var(--hx-border-width-thick, 3px);
+}
+
+hx-prose .messages--status {
+  border-left-color: var(--hx-color-success-500, #198754);
+  background-color: var(--hx-color-success-50, #f0fdf4);
+}
+
+hx-prose .messages--warning {
+  border-left-color: var(--hx-color-warning-500, #ffc107);
+  background-color: var(--hx-color-warning-50, #fffbeb);
+}
+
+hx-prose .messages--error {
+  border-left-color: var(--hx-color-error-500, #dc3545);
+  background-color: var(--hx-color-error-50, #fef2f2);
+}
+
+/* CKEditor Content Separator */
+hx-prose .page-break {
+  border: 0;
+  border-top: var(--hx-border-width-thin, 1px) dashed
+    var(--hx-color-border-default, var(--hx-color-neutral-200, #dee2e6));
+  margin-top: var(--hx-space-8, 2rem);
+  margin-bottom: var(--hx-space-8, 2rem);
+}
+
+/* Clear Floats */
+hx-prose .clearfix::after {
+  content: '';
+  display: table;
+  clear: both;
+}
+`, v = m;
+var g = Object.defineProperty, f = Object.getOwnPropertyDescriptor, h = (r, n, t, o) => {
+  for (var e = o > 1 ? void 0 : o ? f(n, t) : n, i = r.length - 1, s; i >= 0; i--)
+    (s = r[i]) && (e = (o ? s(n, t, e) : s(e)) || e);
+  return o && e && g(n, t, e), e;
+};
+let a = class extends x {
+  constructor() {
+    super(...arguments), this.adoptedStyles = new c(this, v, document), this.size = "base", this.maxWidth = "";
+  }
+  // ─── Light DOM ───
+  createRenderRoot() {
+    return this;
+  }
+  // ─── Lifecycle ───
+  connectedCallback() {
+    super.connectedCallback(), this.style.display = "block", this._applyMaxWidth(), this._applySize();
+  }
+  updated(r) {
+    r.has("maxWidth") && this._applyMaxWidth(), r.has("size") && this._applySize();
+  }
+  // ─── Private ───
+  _applyMaxWidth() {
+    this.maxWidth ? this.style.maxWidth = this.maxWidth : this.style.maxWidth = "";
+  }
+  _applySize() {
+    const n = {
+      sm: "var(--hx-font-size-sm, 0.875rem)",
+      base: "",
+      lg: "var(--hx-font-size-lg, 1.125rem)"
+    }[this.size];
+    n ? this.style.setProperty("--hx-prose-font-size", n) : this.style.removeProperty("--hx-prose-font-size");
+  }
+  // ─── Render ───
+  render() {
+    return p`<slot></slot>`;
+  }
+};
+h([
+  l({ type: String, reflect: !0 })
+], a.prototype, "size", 2);
+h([
+  l({ type: String, reflect: !0, attribute: "max-width" })
+], a.prototype, "maxWidth", 2);
+a = h([
+  d("hx-prose")
+], a);
+export {
+  a as H
+};
+//# sourceMappingURL=hx-prose-BUkZ8rB3.js.map