spoko-design-system 1.3.7 → 1.4.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [1.4.0](https://github.com/polo-blue/sds/compare/v1.3.7...v1.4.0) (2025-10-20)
+
+### Features
+
+* enhance components with flexible layouts and click-to-copy functionality ([3dfa718](https://github.com/polo-blue/sds/commit/3dfa718f7f4355c0beed4032e84d01a2c2c4a547))
+
 ## [1.3.7](https://github.com/polo-blue/sds/compare/v1.3.6...v1.3.7) (2025-10-08)
 
 ### Bug Fixes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "1.3.7",
+  "version": "1.4.0",
   "private": false,
   "main": "./index.ts",
   "module": "./index.ts",
@@ -51,33 +51,33 @@
     "spoko design system"
   ],
   "dependencies": {
-    "@algolia/client-search": "^5.40.0",
-    "@astrojs/mdx": "^4.3.6",
-    "@astrojs/node": "^9.4.4",
+    "@algolia/client-search": "^5.40.1",
+    "@astrojs/mdx": "^4.3.7",
+    "@astrojs/node": "^9.5.0",
     "@astrojs/sitemap": "^3.6.0",
-    "@astrojs/ts-plugin": "^1.10.4",
+    "@astrojs/ts-plugin": "^1.10.5",
     "@astrojs/vue": "^5.1.1",
-    "@docsearch/css": "^4.1.0",
+    "@docsearch/css": "^4.2.0",
     "@iconify-json/ant-design": "^1.2.5",
     "@iconify-json/bi": "^1.2.6",
     "@iconify-json/bx": "^1.2.2",
-    "@iconify-json/carbon": "^1.2.13",
-    "@iconify-json/circle-flags": "^1.2.8",
+    "@iconify-json/carbon": "^1.2.14",
+    "@iconify-json/circle-flags": "^1.2.10",
     "@iconify-json/ei": "^1.2.2",
     "@iconify-json/el": "^1.2.2",
     "@iconify-json/eos-icons": "^1.2.4",
     "@iconify-json/et": "^1.2.1",
     "@iconify-json/flowbite": "^1.2.7",
-    "@iconify-json/fluent": "^1.2.32",
+    "@iconify-json/fluent": "^1.2.33",
     "@iconify-json/fluent-emoji": "1.2.6",
     "@iconify-json/ic": "^1.2.4",
     "@iconify-json/icon-park-outline": "^1.2.4",
     "@iconify-json/la": "^1.2.1",
-    "@iconify-json/lucide": "^1.2.68",
-    "@iconify-json/material-symbols-light": "^1.2.40",
+    "@iconify-json/lucide": "^1.2.70",
+    "@iconify-json/material-symbols-light": "^1.2.42",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify-json/noto-v1": "^1.2.5",
-    "@iconify-json/octicon": "^1.2.14",
+    "@iconify-json/octicon": "^1.2.16",
     "@iconify-json/ph": "^1.2.2",
     "@iconify-json/simple-icons": "^1.2.54",
     "@iconify-json/streamline": "^1.2.5",
@@ -85,19 +85,19 @@
     "@iconify-json/streamline-freehand-color": "^1.2.2",
     "@iconify-json/system-uicons": "^1.2.4",
     "@iconify-json/uil": "^1.2.3",
-    "@iconify-json/vscode-icons": "^1.2.30",
-    "@iconify/json": "^2.2.392",
+    "@iconify-json/vscode-icons": "^1.2.32",
+    "@iconify/json": "^2.2.397",
     "@iconify/vue": "^5.0.0",
     "@playform/compress": "^0.2.0",
     "@playform/inline": "^0.1.2",
-    "@unocss/astro": "66.5.2",
-    "@unocss/preset-attributify": "66.5.2",
-    "@unocss/preset-typography": "66.5.2",
-    "@unocss/preset-uno": "66.5.2",
-    "@unocss/preset-web-fonts": "66.5.2",
-    "@unocss/preset-wind": "66.5.2",
-    "@unocss/reset": "66.5.2",
-    "@vite-pwa/astro": "^1.1.0",
+    "@unocss/astro": "66.5.4",
+    "@unocss/preset-attributify": "66.5.4",
+    "@unocss/preset-typography": "66.5.4",
+    "@unocss/preset-uno": "66.5.4",
+    "@unocss/preset-web-fonts": "66.5.4",
+    "@unocss/preset-wind": "66.5.4",
+    "@unocss/reset": "66.5.4",
+    "@vite-pwa/astro": "^1.1.1",
     "@vueuse/core": "^13.9.0",
     "astro-icon": "^1.1.5",
     "astro-meta-tags": "^0.4.0",
@@ -106,30 +106,30 @@
     "astro-remote": "^0.3.4",
     "dotenv": "^17.2.3",
     "swiper": "^12.0.2",
-    "unocss": "66.5.2",
+    "unocss": "66.5.4",
     "vue": "^3.5.22"
   },
   "devDependencies": {
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@types/gtag.js": "^0.0.20",
-    "@types/node": "^24.7.0",
-    "@typescript-eslint/eslint-plugin": "^8.46.0",
-    "@typescript-eslint/parser": "^8.46.0",
-    "@unocss/transformer-variant-group": "66.5.2",
+    "@types/node": "^24.8.1",
+    "@typescript-eslint/eslint-plugin": "^8.46.1",
+    "@typescript-eslint/parser": "^8.46.1",
+    "@unocss/transformer-variant-group": "66.5.4",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vue/compiler-sfc": "^3.5.22",
     "@vue/eslint-config-typescript": "^14.6.0",
-    "astro": "^5.14.1",
+    "astro": "^5.14.6",
     "conventional-changelog-conventionalcommits": "^9.1.0",
-    "eslint": "^9.37.0",
+    "eslint": "^9.38.0",
     "eslint-plugin-astro": "^1.3.1",
-    "eslint-plugin-vue": "^10.5.0",
+    "eslint-plugin-vue": "^10.5.1",
     "prettier": "^3.6.2",
     "prettier-plugin-astro": "^0.14.1",
-    "semantic-release": "^24.2.9",
+    "semantic-release": "^25.0.1",
     "unocss": "^0.65.0",
-    "vite": "^7.1.9"
+    "vite": "^7.1.11"
   },
   "packageManager": "pnpm@10.17.1",
   "pnpm": {

package/src/components/MainColors.vue

@@ -1,8 +1,30 @@
 <script setup lang="ts">
+import { ref } from 'vue';
 import { colors } from './../../uno-config/theme/colors';
 
 // Get color categories
 const colorCategories = Object.entries(colors);
+
+// Track copied state for visual feedback
+const copiedItem = ref<string | null>(null);
+
+const copyToClipboard = async (text: string, id: string) => {
+  try {
+    await navigator.clipboard.writeText(text);
+    copiedItem.value = id;
+    setTimeout(() => {
+      copiedItem.value = null;
+    }, 2000);
+  } catch (err) {
+    console.error('Failed to copy:', err);
+  }
+};
+
+const getColorClass = (category: string, name: string) => {
+  // Generate Tailwind/UnoCSS class name
+  const colorName = name === 'default' ? category : `${category}-${name}`;
+  return colorName;
+};
 </script>
 
 <template>
@@ -11,22 +33,82 @@ const colorCategories = Object.entries(colors);
       v-for="[category, shades] in colorCategories"
       :key="category"
     >
-      <h3 class="capitalize">
+      <h3 class="capitalize text-xl font-bold mb-4">
         {{ category }}
       </h3>
-      <div class="grid grid-cols-3 md:grid-cols-9">
+      <div class="grid grid-cols-2 md:grid-cols-4 xl:grid-cols-5 gap-x-6 gap-y-10">
         <div
           v-for="(value, name) in shades"
           :key="name"
-          class="mb-6"
+          class="group relative"
         >
-          <div
-            class="h-12 transition-all"
+          <!-- Color Swatch -->
+          <button
+            class="w-full h-10 rounded-lg shadow-md transition-all duration-200 hover:shadow-xl hover:scale-105 cursor-pointer relative overflow-hidden"
             :style="`background: ${value}`"
-          />
-          <div class="text-sm flex flex-col text-center font-mono text-slate-500">
-            <span>{{ name }}</span>
-            <span class="uppercase text-xs">{{ value }}</span>
+            :title="`Click to copy hex: ${value}`"
+            @click="copyToClipboard(value, `${category}-${name}-hex`)"
+          >
+            <!-- Copied indicator -->
+            <div
+              v-if="copiedItem === `${category}-${name}-hex`"
+              class="absolute inset-0 bg-black/50 flex items-center justify-center text-white font-bold text-sm"
+            >
+              ✓ Copied!
+            </div>
+          </button>
+
+          <!-- Color Info -->
+          <div class="mt-2 space-y-1">
+            <!-- Color Name -->
+            <div class="text-sm font-medium text-gray-700 text-center">
+              {{ name }}
+            </div>
+
+            <!-- Copy Buttons -->
+            <div class="flex gap-1 text-xs font-mono">
+              <!-- Copy Hex -->
+              <button
+                class="flex-1 px-2 py-1 bg-gray-100 hover:bg-gray-200 rounded transition-colors text-gray-600 hover:text-gray-900 relative"
+                :title="`Copy hex: ${value}`"
+                @click="copyToClipboard(value, `${category}-${name}-hex`)"
+              >
+                <span
+                  v-if="copiedItem === `${category}-${name}-hex`"
+                  class="text-green-600"
+                >✓</span>
+                <span
+                  v-else
+                  class="uppercase text-xs"
+                >{{ value }}</span>
+              </button>
+
+              <!-- Copy Class Name (text-*) -->
+              <button
+                class="flex-1 px-2 py-1 bg-blue-100 hover:bg-blue-200 rounded transition-colors text-blue-700 hover:text-blue-900 relative"
+                :title="`Copy class: text-${getColorClass(category, name)}`"
+                @click="copyToClipboard(`text-${getColorClass(category, name)}`, `${category}-${name}-class`)"
+              >
+                <span
+                  v-if="copiedItem === `${category}-${name}-class`"
+                  class="text-green-600"
+                >✓</span>
+                <span v-else>text-</span>
+              </button>
+
+              <!-- Copy Class Name (bg-*) -->
+              <button
+                class="flex-1 px-2 py-1 bg-purple-100 hover:bg-purple-200 rounded transition-colors text-purple-700 hover:text-purple-900 relative"
+                :title="`Copy class: bg-${getColorClass(category, name)}`"
+                @click="copyToClipboard(`bg-${getColorClass(category, name)}`, `${category}-${name}-bg`)"
+              >
+                <span
+                  v-if="copiedItem === `${category}-${name}-bg`"
+                  class="text-green-600"
+                >✓</span>
+                <span v-else>bg-</span>
+              </button>
+            </div>
           </div>
         </div>
       </div>

package/src/components/Modal.astro

@@ -1,11 +1,40 @@
 ---
-const { id, open } = Astro.props;
 import Button from '../components/Button.vue';
+
+interface Props {
+  id: string;
+  open?: string;
+  title?: string;
+  maxWidth?: string;
+  showXButton?: boolean;
+  showTrigger?: boolean;
+
+  // Action buttons
+  showActions?: boolean;
+  cancelText?: string;
+  confirmText?: string;
+  confirmPrimary?: boolean;
+}
+
+const {
+  id,
+  open = 'Open modal',
+  title,
+  maxWidth = '600px',
+  showXButton = true,
+  showTrigger = true,
+  showActions = false,
+  cancelText = 'Cancel',
+  confirmText = 'Confirm',
+  confirmPrimary = true,
+} = Astro.props;
 ---
 
-<style>
+<style define:vars={{ maxWidth }}>
   dialog {
-    @apply fixed top-0 left-0 right-0 bottom-0;
+    @apply fixed top-0 left-0 right-0 bottom-0 rounded-lg shadow-xl;
+    max-width: var(--maxWidth);
+    width: calc(100% - 2rem);
 
     &::backdrop {
       @apply bg-slate-medium/50 fixed;
@@ -15,20 +44,111 @@ import Button from '../components/Button.vue';
       left: 0px;
     }
   }
+
+  .modal-header {
+    @apply relative pb-4 mb-4 border-b border-gray-300;
+  }
+
+  .modal-close-x {
+    @apply absolute top-0 right-0 w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-200 transition-colors cursor-pointer border-0 bg-transparent;
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      width: 16px;
+      height: 2px;
+      background-color: #666;
+    }
+
+    &::before {
+      transform: rotate(45deg);
+    }
+
+    &::after {
+      transform: rotate(-45deg);
+    }
+
+    &:hover::before,
+    &:hover::after {
+      background-color: #000;
+    }
+  }
+
+  .modal-content {
+    @apply mb-4;
+  }
+
+  .modal-actions {
+    @apply flex gap-3 justify-end pt-4 border-t border-gray-300;
+  }
 </style>
 
-<Button
-  primary
-  onclick={`window.${id}.showModal()`}
-  >{open}</Button
->
+{showTrigger && (
+  <Button
+    primary
+    onclick={`window.${id}.showModal()`}
+    >{open}</Button
+  >
+)}
 
 <dialog
   id={id}
   class="p-6"
 >
-  <slot name="main" />
-  <form method="dialog">
-    <slot name="close" />
-  </form>
+  <div class="modal-header">
+    {title && <h2 class="text-2xl font-bold pr-8">{title}</h2>}
+    <slot name="header" />
+
+    {showXButton && (
+      <form method="dialog" class="inline">
+        <button
+          class="modal-close-x"
+          aria-label="Close"
+          type="submit"
+        />
+      </form>
+    )}
+  </div>
+
+  <div class="modal-content">
+    <slot name="main" />
+    <slot />
+  </div>
+
+  {showActions && (
+    <div class="modal-actions">
+      <slot name="actions">
+        <form method="dialog" class="contents">
+          <Button>{cancelText}</Button>
+        </form>
+        <Button primary={confirmPrimary} onclick={`document.getElementById('${id}').dispatchEvent(new CustomEvent('confirm', { detail: { id: '${id}' } }))`}>
+          {confirmText}
+        </Button>
+      </slot>
+    </div>
+  )}
+
+  {!showActions && (
+    <form method="dialog">
+      <slot name="close" />
+    </form>
+  )}
 </dialog>
+
+<script define:vars={{ id }}>
+  // Close on backdrop click
+  const dialog = document.getElementById(id);
+  dialog?.addEventListener('click', (e) => {
+    if (e.target === dialog) {
+      dialog.close();
+    }
+  });
+
+  // Close on Escape key
+  dialog?.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      dialog.close();
+    }
+  });
+</script>

package/src/components/SlimBanner.vue

@@ -1,73 +1,182 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
 
 const props = defineProps({
+  // Primary state (visible by default)
+  message: {
+    type: String,
+    default: 'We stand with our friends and colleagues in Ukraine. To support Ukraine in their time of need visit',
+  },
+  linkText: {
+    type: String,
+    default: 'this page',
+  },
+  linkUrl: {
+    type: String,
+    default: 'https://polo.blue/support-ukraine/',
+  },
+  linkTitle: {
+    type: String,
+    default: '',
+  },
+
+  // Toggle state (shows when close button is clicked)
+  toggleMessage: {
+    type: String,
+    default: '',
+  },
+  toggleBgClass: {
+    type: String,
+    default: 'bg-black',
+  },
+  toggleTextClass: {
+    type: String,
+    default: 'text-white',
+  },
+
+  // Close button
   showCloseButton: {
     type: Boolean,
     default: true,
-    required: false,
+  },
+  closeButtonAriaLabel: {
+    type: String,
+    default: 'Toggle',
+  },
+
+  // Show flag icon (Ukraine flag by default)
+  showIcon: {
+    type: Boolean,
+    default: false,
+  },
+  iconClass: {
+    type: String,
+    default: 'inline-block text-4xl w-6 h-3.5 min-w-[1.25rem] mr-3 bg-gradient-to-b stops-[#0057b7_50%,50%,#ffd700_100%]',
+  },
+
+  // LocalStorage persistence
+  persistClose: {
+    type: Boolean,
+    default: false,
+  },
+  storageKey: {
+    type: String,
+    default: 'slimbanner-closed',
+  },
+  // Expiration in days (0 = never expires)
+  expirationDays: {
+    type: Number,
+    default: 30,
   },
 });
+
 const isShow = ref(true);
+const isHidden = ref(false);
+
+// Check localStorage on mount
+onMounted(() => {
+  if (props.persistClose && typeof window !== 'undefined') {
+    const stored = localStorage.getItem(props.storageKey);
+    if (stored) {
+      try {
+        const data = JSON.parse(stored);
+        const now = new Date().getTime();
+
+        // Check if expired
+        if (props.expirationDays > 0 && data.expires && now > data.expires) {
+          // Expired, remove from storage
+          localStorage.removeItem(props.storageKey);
+        } else if (data.closed) {
+          // Still valid, keep hidden
+          isHidden.value = true;
+        }
+      } catch (e) {
+        // Invalid data, remove it
+        localStorage.removeItem(props.storageKey);
+      }
+    }
+  }
+});
+
 const toggleVisibility = () => {
   isShow.value = !isShow.value;
 };
+
+const closePermanently = () => {
+  isHidden.value = true;
+
+  if (props.persistClose && typeof window !== 'undefined') {
+    const data = {
+      closed: true,
+      timestamp: new Date().getTime(),
+      expires: props.expirationDays > 0
+        ? new Date().getTime() + (props.expirationDays * 24 * 60 * 60 * 1000)
+        : null,
+    };
+    localStorage.setItem(props.storageKey, JSON.stringify(data));
+  }
+};
 </script>
 
 <template>
-  <div
-    v-if="isShow"
-    data-pagefind-ignore
-    class="slimbanner"
-  >
-    <span
-      class="inline-block text-4xl w-6 h-3.5 min-w-[1.25rem] mr-3 bg-gradient-to-b stops-[#0057b7_50%,50%,#ffd700_100%]"
-    />
-    <span class="leading-none"
-      ><span
-        data-text="We stand with our friends and colleagues in Ukraine. To support Ukraine in their time of need visit "
-      />
-      <a
-        href="https://polo.blue/support-ukraine/"
-        target="_blank"
-        rel="noopener"
-        title="Support Ukraine"
-        class="underline underline-offset-2 hover:text-blue-wrc"
-        >this page</a
-      >.
-    </span>
-
-    <button
-      v-if="props.showCloseButton"
-      class="btn-close text-white"
-      aria-label="Toggle"
-      @click="toggleVisibility()"
+  <template v-if="!isHidden">
+    <div
+      v-if="isShow"
+      data-pagefind-ignore
+      class="slimbanner"
     >
-      <span class="close close-dark" />
-    </button>
-  </div>
-  <div
-    v-else
-    data-pagefind-ignore
-    class="px-4 sm:px-8 py-3 flex items-center justify-center text-xs sm:text-base leading-none text-white relative bg-black drop-shadow-md z-2"
-  >
-    <div class="tracking-widest leading-none">
-      <span data-text="RUSSIA IS A" />
-      <span
-        class="underline decoration-red-600 decoration-1 underline-offset-3"
-        data-text="TERRORIST"
-      />
-      <span data-text="STATE" />
+      <slot name="icon">
+        <span
+          v-if="props.showIcon"
+          :class="props.iconClass"
+        />
+      </slot>
+
+      <span class="leading-none inline-flex">
+        <slot>
+          <span :data-text="props.message"></span>
+          <a
+            v-if="props.linkUrl"
+            :href="props.linkUrl"
+            target="_blank"
+            rel="noopener"
+            :title="props.linkTitle || props.linkText"
+            class="underline underline-offset-2 hover:text-blue-wrc ml-1.5"
+            :data-text="props.linkText"
+          ></a>
+          <span v-if="props.linkUrl" data-text="."></span>
+        </slot>
+      </span>
+
+      <button
+        v-if="props.showCloseButton && (props.toggleMessage || props.persistClose)"
+        class="btn-close text-white"
+        :aria-label="props.closeButtonAriaLabel"
+        @click="props.persistClose ? closePermanently() : toggleVisibility()"
+      >
+        <span class="close close-dark" />
+      </button>
     </div>
-    <button
-      v-if="props.showCloseButton"
-      class="btn-close"
-      aria-label="Toggle"
-      @click="toggleVisibility()"
+    <div
+      v-else-if="props.toggleMessage"
+      data-pagefind-ignore
+      :class="`px-4 sm:px-8 py-3 flex items-center justify-center text-xs sm:text-base leading-none relative drop-shadow-md z-2 ${props.toggleBgClass} ${props.toggleTextClass}`"
     >
-      <span class="close close-light" />
-    </button>
-  </div>
+      <div class="tracking-widest leading-none">
+        <slot name="toggle">
+          {{ props.toggleMessage }}
+        </slot>
+      </div>
+      <button
+        v-if="props.showCloseButton"
+        class="btn-close"
+        :aria-label="props.closeButtonAriaLabel"
+        @click="props.persistClose ? closePermanently() : toggleVisibility()"
+      >
+        <span :class="props.toggleTextClass === 'text-white' ? 'close close-light' : 'close close-dark'" />
+      </button>
+    </div>
+  </template>
 </template>
 
 <style>

package/src/pages/components/modal.mdx

@@ -9,56 +9,204 @@ import { Icon } from 'astro-icon/components';
 
 # Modal
 
-Native modal window based on `<dialog>` tag with `::backdrop` CSS pseudo-element (pure CSS3 modal window).
-#
-**Documentation:**
+Native modal window based on `<dialog>` tag with `::backdrop` CSS pseudo-element. Features built-in X close button, action buttons, and flexible configuration.
 
+**Documentation:**
 - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
 - https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop
 
-## Modal window
+## Basic Modal with Title and X Button
+
+<div class="component-preview">
+     <Modal id="dialog1" open="Open modal" title="Modal Title">
+          <p>This modal has a title and built-in X close button in the top-right corner.</p>
+          <p>You can also close by clicking the backdrop or pressing Escape.</p>
+     </Modal>
+</div>
+
+```astro
+<Modal id="dialog1" open="Open modal" title="Modal Title">
+    <p>This modal has a title and built-in X close button in the top-right corner.</p>
+    <p>You can also close by clicking the backdrop or pressing Escape.</p>
+</Modal>
+```
 
+## Modal with Action Buttons
 
 <div class="component-preview">
-     <Modal id="dialog" open="Open modal">
-          <main slot="main">
-               <p>Some extra content you would like here</p>
-               <hr />
-          </main>
-          <Button primary slot="close" class="mt-4">Close</Button>
+     <Modal
+          id="dialog2"
+          open="Delete Item"
+          title="Confirm Delete"
+          showActions
+          cancelText="Cancel"
+          confirmText="Delete"
+     >
+          <p>Are you sure you want to delete this item? This action cannot be undone.</p>
      </Modal>
 </div>
 
-```js
-<Modal id="dialog" open="Open modal">
-    <main slot="main">
-        <p>Some extra content you would like here</p>
-        <hr />
-        <img width="60" height="80" src="/assets/logo.svg" alt="Astro logo">
-    </main>
-    <Button primary slot="close" class="mt-4">Close</Button>
+```astro
+<Modal
+     id="dialog2"
+     open="Delete Item"
+     title="Confirm Delete"
+     showActions
+     cancelText="Cancel"
+     confirmText="Delete"
+>
+     <p>Are you sure you want to delete this item? This action cannot be undone.</p>
 </Modal>
 ```
 
-## Modal with different close button
+## Modal with Custom Actions
 
 <div class="component-preview">
-     <Modal id="dialog2" open="Open modal">
-          <main slot="main">
-               <p>Some extra content you would like here</p>
-          </main>
-     <Button primary slot="close" class="mt-4"><Icon name="octicon:x-24" /></Button>
+     <Modal
+          id="dialog3"
+          open="Save Changes"
+          title="Save Document"
+          showActions
+     >
+          <p>Would you like to save your changes before closing?</p>
+
+          <div slot="actions" class="flex gap-3 justify-end">
+               <form method="dialog" class="contents">
+                    <Button>Don't Save</Button>
+               </form>
+               <form method="dialog" class="contents">
+                    <Button primary>Save</Button>
+               </form>
+          </div>
+     </Modal>
+</div>
+
+```astro
+<Modal
+     id="dialog3"
+     open="Save Changes"
+     title="Save Document"
+     showActions
+>
+     <p>Would you like to save your changes before closing?</p>
+
+     <div slot="actions" class="flex gap-3 justify-end">
+          <form method="dialog" class="contents">
+               <Button>Don't Save</Button>
+          </form>
+          <form method="dialog" class="contents">
+               <Button primary>Save</Button>
+          </form>
+     </div>
+</Modal>
+```
+
+## Modal with Custom Width
+
+<div class="component-preview">
+     <Modal
+          id="dialog4"
+          open="Wide Modal"
+          title="Large Content"
+          maxWidth="900px"
+     >
+          <p>This modal is wider than the default. Useful for forms or detailed content.</p>
+          <div class="grid grid-cols-2 gap-4 mt-4">
+               <div class="p-4 bg-gray-100 rounded">Column 1</div>
+               <div class="p-4 bg-gray-100 rounded">Column 2</div>
+          </div>
+     </Modal>
+</div>
+
+```astro
+<Modal
+     id="dialog4"
+     open="Wide Modal"
+     title="Large Content"
+     maxWidth="900px"
+>
+     <p>This modal is wider than the default. Useful for forms or detailed content.</p>
+</Modal>
+```
+
+## Modal without X Button (Legacy Style)
+
+<div class="component-preview">
+     <Modal id="dialog5" open="Open modal" title="Custom Close" showXButton={false}>
+          <p>This modal doesn't have the X button.</p>
+          <p>You need to provide your own close button.</p>
+          <Button primary slot="close" class="mt-4">Close Modal</Button>
      </Modal>
 </div>
 
-```js
-<Modal id="dialog2" open="Open modal">
-    <main slot="main">
-        <p>Some extra content you would like here</p>
-        <img width="60" height="80" src="/assets/logo.svg" alt="Astro logo">
-    </main>
+```astro
+<Modal id="dialog5" open="Open modal" title="Custom Close" showXButton={false}>
+     <p>This modal doesn't have the X button.</p>
+     <Button primary slot="close" class="mt-4">Close Modal</Button>
+</Modal>
+```
+
+## Modal with Custom Close Button (Icon)
+
+<div class="component-preview">
+     <Modal id="dialog6" open="Open modal" title="Icon Close" showXButton={false}>
+          <p>Some extra content you would like here</p>
+          <Button primary slot="close" class="mt-4"><Icon name="octicon:x-24" /></Button>
+     </Modal>
+</div>
+
+```astro
+<Modal id="dialog6" open="Open modal" title="Icon Close" showXButton={false}>
+     <p>Some extra content you would like here</p>
      <Button primary slot="close" class="mt-4"><Icon name="octicon:x-24" /></Button>
 </Modal>
 ```
 
+## Handling Confirm Events
+
+You can listen for the `confirm` event when using action buttons:
+
+```javascript
+document.getElementById('dialog2').addEventListener('confirm', (e) => {
+     console.log('Confirmed!', e.detail);
+     // Perform your action here
+     document.getElementById('dialog2').close();
+});
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `id` | string | required | Unique identifier for the modal |
+| `open` | string | `'Open modal'` | Text for the trigger button |
+| `title` | string | `undefined` | Modal title (shown in header) |
+| `maxWidth` | string | `'600px'` | Maximum width of the modal |
+| `showXButton` | boolean | `true` | Show X close button in top-right |
+| `showTrigger` | boolean | `true` | Show the trigger button |
+| `showActions` | boolean | `false` | Show action buttons footer |
+| `cancelText` | string | `'Cancel'` | Text for cancel button |
+| `confirmText` | string | `'Confirm'` | Text for confirm button |
+| `confirmPrimary` | boolean | `true` | Make confirm button primary style |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| `default` | Main modal content (alias for `main` slot) |
+| `main` | Main modal content |
+| `header` | Custom header content (replaces title) |
+| `actions` | Custom action buttons (when `showActions` is true) |
+| `close` | Custom close button (when `showActions` is false) |
+
+## Features
+
+- ✅ Built-in X close button in top-right corner
+- ✅ Click backdrop to close
+- ✅ Press Escape to close
+- ✅ Built-in action buttons (Cancel/Confirm)
+- ✅ Customizable width
+- ✅ TypeScript support
+- ✅ Fully accessible with ARIA labels
+
 

package/src/pages/components/slimbanner.mdx

@@ -6,29 +6,254 @@ import SlimBanner from '../../components/SlimBanner.vue'
 
 # SlimBanner
 
-SlimBanner - solidarity with Ukraine.
+A flexible banner component for announcements, alerts, or calls to action. Supports custom messages, links, icons, and toggle states.
+
+## Basic Example (Ukraine Solidarity)
 
 <div class="component-preview">
   <SlimBanner
     class="w-full drop-shadow"
     client:load
+    message="We stand with our friends and colleagues in Ukraine. To support Ukraine in their time of need visit"
+    linkText="this page"
+    linkUrl="https://polo.blue/support-ukraine/"
+    linkTitle="Support Ukraine"
+    showIcon
     showCloseButton
-    transition:name="slim-banner"
-    transition:persist
-    
+    toggleMessage="RUSSIA IS A TERRORIST STATE"
   />
 </div>
 
-```js
+```astro
 <SlimBanner
   class="w-full drop-shadow"
   client:load
+  message="We stand with our friends and colleagues in Ukraine. To support Ukraine in their time of need visit"
+  linkText="this page"
+  linkUrl="https://polo.blue/support-ukraine/"
+  linkTitle="Support Ukraine"
+  showIcon
+  showCloseButton
+  toggleMessage="RUSSIA IS A TERRORIST STATE"
+/>
+```
+
+## Simple Announcement
+
+<div class="component-preview">
+  <SlimBanner
+    class="w-full drop-shadow"
+    client:load
+    message="🎉 New features are now available!"
+    linkText="Learn more"
+    linkUrl="/updates"
+    showCloseButton={false}
+  />
+</div>
+
+```astro
+<SlimBanner
+  message="🎉 New features are now available!"
+  linkText="Learn more"
+  linkUrl="/updates"
+  showCloseButton={false}
+/>
+```
+
+## Custom Message with Link
+
+<div class="component-preview">
+  <SlimBanner
+    class="w-full drop-shadow"
+    client:load
+    message="Limited time offer! Get 50% off all products. "
+    linkText="Shop now"
+    linkUrl="/shop"
+    linkTitle="Visit our shop"
+    showCloseButton={false}
+  />
+</div>
+
+```astro
+<SlimBanner
+  message="Limited time offer! Get 50% off all products. "
+  linkText="Shop now"
+  linkUrl="/shop"
+  linkTitle="Visit our shop"
+  showCloseButton={false}
+/>
+```
+
+## With Toggle State
+
+<div class="component-preview">
+  <SlimBanner
+    class="w-full drop-shadow"
+    client:load
+    message="Join us at the annual car meet this weekend!"
+    linkText="See the lineup"
+    linkUrl="/events"
+    showCloseButton
+    toggleMessage="🏁 TORQUE IS EVERYTHING"
+    toggleBgClass="bg-red-700"
+    toggleTextClass="text-white"
+  />
+</div>
+
+```astro
+<SlimBanner
+  message="Join us at the annual car meet this weekend!"
+  linkText="See the lineup"
+  linkUrl="/events"
   showCloseButton
-  transition:name="slim-banner"
-  transition:persist
+  toggleMessage="🏁 TORQUE IS EVERYTHING"
+  toggleBgClass="bg-red-700"
+  toggleTextClass="text-white"
 />
 ```
 
+## Message Only (No Link)
+
+<div class="component-preview">
+  <SlimBanner
+    class="w-full drop-shadow"
+    client:load
+    message="Scheduled maintenance: The site will be down on Sunday, 3-5 AM EST."
+    linkUrl=""
+    showCloseButton={false}
+  />
+</div>
+
+```astro
+<SlimBanner
+  message="Scheduled maintenance: The site will be down on Sunday, 3-5 AM EST."
+  linkUrl=""
+  showCloseButton={false}
+/>
+```
+
+## Persistent Banner (LocalStorage)
+
+Close the banner permanently using localStorage. It will stay hidden even after page refresh.
+
+<div class="component-preview">
+  <SlimBanner
+    class="w-full drop-shadow"
+    client:load
+    message="🍪 This website uses cookies to enhance your experience."
+    linkText="Learn more"
+    linkUrl="/privacy"
+    showCloseButton
+    persistClose
+    storageKey="cookie-banner-closed"
+    expirationDays={90}
+  />
+</div>
+
+```astro
+<SlimBanner
+  message="🍪 This website uses cookies to enhance your experience."
+  linkText="Learn more"
+  linkUrl="/privacy"
+  showCloseButton
+  persistClose
+  storageKey="cookie-banner-closed"
+  expirationDays={90}
+/>
+```
+
+**Note:** Once you close this banner, it won't show again for 90 days (or until you clear localStorage).
+
+## Persistent with No Expiration
+
+<div class="component-preview">
+  <SlimBanner
+    class="w-full drop-shadow"
+    client:load
+    message="📢 Important: This is a one-time announcement."
+    linkUrl=""
+    showCloseButton
+    persistClose
+    storageKey="announcement-dismissed"
+    expirationDays={0}
+  />
+</div>
+
+```astro
+<SlimBanner
+  message="📢 Important: This is a one-time announcement."
+  linkUrl=""
+  showCloseButton
+  persistClose
+  storageKey="announcement-dismissed"
+  expirationDays={0}
+/>
+```
+
+**Tip:** Set `expirationDays={0}` to hide the banner forever once closed.
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `message` | String | Ukraine message | Main banner message text |
+| `linkText` | String | `'this page'` | Text for the link |
+| `linkUrl` | String | Ukraine URL | URL for the link (set to empty string for no link) |
+| `linkTitle` | String | `''` | Title attribute for the link |
+| `toggleMessage` | String | `''` | Message to show when close button is clicked (enables toggle) |
+| `toggleBgClass` | String | `'bg-black'` | Background class for toggle state |
+| `toggleTextClass` | String | `'text-white'` | Text color class for toggle state |
+| `showCloseButton` | Boolean | `true` | Show close/toggle button |
+| `closeButtonAriaLabel` | String | `'Toggle'` | Aria label for close button |
+| `showIcon` | Boolean | `false` | Show icon (Ukraine flag by default) |
+| `iconClass` | String | Ukraine flag CSS | Custom CSS class for icon |
+| `persistClose` | Boolean | `false` | Save close state to localStorage |
+| `storageKey` | String | `'slimbanner-closed'` | localStorage key for persistence |
+| `expirationDays` | Number | `30` | Days until localStorage expires (0 = never) |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| `default` | Override the entire message content |
+| `icon` | Override the icon/flag |
+| `toggle` | Override the toggle state content |
+
+## Using Slots
+
+```astro
+<SlimBanner client:load>
+  <strong slot="default">Custom content</strong> with <em>HTML markup</em>
+</SlimBanner>
+```
+
+## LocalStorage Management
+
+When using `persistClose={true}`, the close state is saved to localStorage. Here's how to manage it:
+
+### Clear specific banner:
+```javascript
+localStorage.removeItem('cookie-banner-closed');
+```
+
+### Clear all banners:
+```javascript
+// If using default key
+localStorage.removeItem('slimbanner-closed');
+
+// Or clear all by pattern
+Object.keys(localStorage)
+  .filter(key => key.includes('banner'))
+  .forEach(key => localStorage.removeItem(key));
+```
+
+### Check if banner is closed:
+```javascript
+const data = JSON.parse(localStorage.getItem('cookie-banner-closed'));
+console.log('Banner closed:', data?.closed);
+console.log('Expires at:', new Date(data?.expires));
+```
+
 ## uno.config.ts / shortcuts
 ```js
 ['slimbanner','px-4 sm:px-8  flex items-center justify-center text-xs sm:text-base leading-none relative bg-gray-100  z-2 px-4 py-3 sm:(text-base px-8) text-blue-darker print-hidden'],

package/src/pages/core/colors.mdx

@@ -5,6 +5,17 @@ layout: ../../layouts/MainLayout.astro
 import MainColors from '../../components/MainColors.vue';
 
 <h1>Colors</h1>
-<p>Base colors.</p>
+<p>Base colors for the design system.</p>
 
-<MainColors class="mt-8" />
+## How to use
+
+Click on any element to copy values to your clipboard:
+
+- **Color swatch** - Click the large color box to copy the hex value
+- **Hex button** - Click to copy the hex color code (e.g., `#0040c5`)
+- **text- button** - Click to copy the text color class (e.g., `text-brand-primary`)
+- **bg- button** - Click to copy the background color class (e.g., `bg-brand-primary`)
+
+A green checkmark (✓) will appear when copied successfully.
+
+<MainColors class="mt-8" client:load />

package/src/pages/core/grid.mdx

@@ -87,3 +87,107 @@ Template inspired by [Kevin Powell](https://www.youtube.com/kevinpowell)
   </section>
 </main>
 ```
+
+## Full-width variants
+
+Additional utility classes for more flexible full-width layouts.
+
+### Full-width with Flexbox
+
+Use `.full-width-flex` when you need flexbox layout across the full width instead of grid.
+
+<div class="component-preview" style="display: block">
+<main class="flow content-grid bg-white pt-8">
+  <h2>Full-width Flexbox Example</h2>
+  <p>The section below uses flexbox for horizontal layout across the full width.</p>
+
+  <section class="full-width-flex bg-primary text-white section-padding justify-center gap-8">
+    <div class="text-center">
+      <h3 class="text-2xl font-bold">Feature 1</h3>
+      <p>Flexbox layout</p>
+    </div>
+    <div class="text-center">
+      <h3 class="text-2xl font-bold">Feature 2</h3>
+      <p>Full width span</p>
+    </div>
+    <div class="text-center">
+      <h3 class="text-2xl font-bold">Feature 3</h3>
+      <p>Easy alignment</p>
+    </div>
+  </section>
+
+  <p>Back to regular content width.</p>
+</main>
+</div>
+
+```html
+<section class="full-width-flex bg-primary text-white section-padding justify-center gap-8">
+  <div class="text-center">
+    <h3 class="text-2xl font-bold">Feature 1</h3>
+    <p>Flexbox layout</p>
+  </div>
+  <div class="text-center">
+    <h3 class="text-2xl font-bold">Feature 2</h3>
+    <p>Full width span</p>
+  </div>
+  <div class="text-center">
+    <h3 class="text-2xl font-bold">Feature 3</h3>
+    <p>Easy alignment</p>
+  </div>
+</section>
+```
+
+### Full-width Uncontained
+
+Use `.full-width-uncontained` when you want a full-width section where children also span the full width (not constrained to content area).
+
+<div class="component-preview" style="display: block">
+<main class="flow content-grid bg-white pt-8">
+  <h2>Full-width Uncontained Example</h2>
+  <p>The section below has a full-width background and its children span the full width too.</p>
+
+  <section class="full-width-uncontained bg-gray-100 section-padding">
+    <h3 class="bg-primary text-white py-4 text-center">This heading spans the entire width</h3>
+    <p class="bg-blue-100 py-4 text-center">This paragraph also spans the entire width</p>
+  </section>
+
+  <p>Back to regular content width.</p>
+</main>
+</div>
+
+```html
+<section class="full-width-uncontained bg-gray-100 section-padding">
+  <h3 class="bg-primary text-white py-4 text-center">This heading spans the entire width</h3>
+  <p class="bg-blue-100 py-4 text-center">This paragraph also spans the entire width</p>
+</section>
+```
+
+### Full-width Block
+
+Use `.full-width-block` for simple block-level full-width containers without grid or flex layout.
+
+<div class="component-preview" style="display: block">
+<main class="flow content-grid bg-white pt-8">
+  <h2>Full-width Block Example</h2>
+  <p>The image below is wrapped in a full-width-block container.</p>
+
+  <div class="full-width-block bg-gray-200">
+    <img src="https://unsplash.it/1600/300" alt="Full width example" style="width: 100%; display: block;" />
+  </div>
+
+  <p>Back to regular content width.</p>
+</main>
+</div>
+
+```html
+<div class="full-width-block bg-gray-200">
+  <img src="https://unsplash.it/1600/300" alt="Full width example" style="width: 100%; display: block;" />
+</div>
+```
+
+### Comparison
+
+- **`.full-width`** - Grid layout with children constrained to content area (default behavior)
+- **`.full-width-flex`** - Flexbox layout across full width
+- **`.full-width-uncontained`** - Grid layout with children spanning full width
+- **`.full-width-block`** - Simple block container at full width

package/src/styles/base/grid.css

@@ -29,6 +29,28 @@
     display: grid;
     grid-template-columns: inherit;
   }
+
+  /* Variant: full-width with flexbox layout instead of grid */
+  > .full-width-flex {
+    grid-column: full-width;
+    display: flex;
+  }
+
+  /* Variant: full-width container where children span the full width (not constrained to content area) */
+  > .full-width-uncontained {
+    grid-column: full-width;
+    display: grid;
+    grid-template-columns: inherit;
+
+    > * {
+      grid-column: full-width;
+    }
+  }
+
+  /* Variant: full-width block (no grid/flex on container, children flow naturally at full width) */
+  > .full-width-block {
+    grid-column: full-width;
+  }
 }
 
 img.full-width {

package/src/utils/text.ts

@@ -1,10 +1,12 @@
 export const text2paragraphs = (text: string, firstLineBottomMargin: boolean = false) => {
-  // return '<p class="mb-2">' + text.split(/[\n\r]+/g).join('</p><p>') + '</p>'
+  // Normalize line endings: convert \r\n to \n, then remove any remaining \r
+  const normalizedText = text.replace(/\r\n/g, '\n').replace(/\r/g, '\n');
+
   let out =
     '<p' +
-    (firstLineBottomMargin ? 'class="mb-3"' : '') +
+    (firstLineBottomMargin ? ' class="mb-3"' : '') +
     '>' +
-    text.split('\n').join('</p><p>') +
+    normalizedText.split('\n').join('</p><p>') +
     '</p>';
   return out.split('<p></p><p>').join('<p class="mt-3">');
 };