@cruglobal/cornerstone-components 0.1.0

package/dist/unbundled/skills/cornerstone/references/components/relative-time.md

@@ -0,0 +1,92 @@
+# Relative Time
+
+**Full documentation:** https://cruglobal.github.io/cornerstone-design-system/components/relative-time
+
+```html
+<!-- Cornerstone 3 release date 🎉 -->
+<cs-relative-time date="2025-12-02T00:00:00-05:00"></cs-relative-time>
+```
+
+Localization is handled by the browser's [`Intl.RelativeTimeFormat` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat). No language packs are required.
+
+The `date` attribute determines when the date/time is calculated from. It must be a string that [`Date.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse) can interpret or a [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object set via JavaScript.
+
+> **Info**
+>
+> <strong>Always use ISO 8601 date strings.</strong><br />
+> Ambiguous formats like `03/04/2020` can be read as March 4 or April 3 depending on the user's browser and locale. A valid [ISO 8601 date time string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse#Date_Time_String_Format) parses the same for every client.
+
+## Examples
+
+### Sync
+
+Use the `sync` attribute to update the displayed value automatically as time passes.
+
+```html
+<div class="relative-time-sync">
+  <cs-relative-time sync></cs-relative-time>
+</div>
+
+<script>
+  const container = document.querySelector('.relative-time-sync');
+  const relativeTime = container.querySelector('cs-relative-time');
+
+  relativeTime.date = new Date(new Date().getTime() - 60000);
+</script>
+```
+
+### Format
+
+You can change how the time is displayed using the `format` attribute. Note that some locales may display the same values for `narrow` and `short` formats.
+
+```html
+<cs-relative-time date="2025-12-02T00:00:00-05:00" format="narrow"></cs-relative-time><br />
+<cs-relative-time date="2025-12-02T00:00:00-05:00" format="short"></cs-relative-time><br />
+<cs-relative-time date="2025-12-02T00:00:00-05:00" format="long"></cs-relative-time>
+```
+
+### Localization
+
+Use the `lang` attribute to set the desired locale.
+
+```html
+English: <cs-relative-time date="2025-12-02T00:00:00-05:00" lang="en-US"></cs-relative-time><br />
+Chinese: <cs-relative-time date="2025-12-02T00:00:00-05:00" lang="zh-CN"></cs-relative-time><br />
+German: <cs-relative-time date="2025-12-02T00:00:00-05:00" lang="de"></cs-relative-time><br />
+Greek: <cs-relative-time date="2025-12-02T00:00:00-05:00" lang="el"></cs-relative-time><br />
+Russian: <cs-relative-time date="2025-12-02T00:00:00-05:00" lang="ru"></cs-relative-time>
+```
+
+## API
+
+### Importing
+
+If you're using the autoloader or a hosted project, components load on demand — no manual import
+needed. To cherry-pick this component, use one of the following snippets.
+
+**npm**
+
+```js
+import '@cruglobal/cornerstone-components/components/relative-time/relative-time.js';
+```
+
+**Self-Hosted**
+
+```js
+import './cornerstone/components/relative-time/relative-time.js';
+```
+
+**React**
+
+```js
+import CsRelativeTime from '@cruglobal/cornerstone-components/react/relative-time/index.js';
+```
+
+### Attributes & Properties
+
+| Property | Attribute | Description | Type | Default | Reflects |
+| --- | --- | --- | --- | --- | --- |
+| `date` | `date` | The date from which to calculate time from. If not set, the current date and time will be used. When passing a string, it's strongly recommended to use the ISO 8601 format to ensure timezones are handled correctly. To convert a date to this format in JavaScript, use [`date.toISOString()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString). | `Date \| string` | `new Date()` | — |
+| `format` | `format` | The formatting style to use. | `'long' \| 'short' \| 'narrow'` | `'long'` | — |
+| `numeric` | `numeric` | When `auto`, values such as "yesterday" and "tomorrow" will be shown when possible. When `always`, values such as "1 day ago" and "in 1 day" will be shown. | `'always' \| 'auto'` | `'auto'` | — |
+| `sync` | `sync` | Keep the displayed value up to date as time passes. | `boolean` | `false` | — |

package/dist/unbundled/skills/cornerstone/references/components/resize-observer.md

@@ -0,0 +1,91 @@
+# Resize Observer
+
+**Full documentation:** https://cruglobal.github.io/cornerstone-design-system/components/resize-observer
+
+```html
+<div class="resize-observer-overview">
+  <cs-resize-observer>
+    <div class="box"><span class="dimensions">0 × 0</span></div>
+  </cs-resize-observer>
+  <small>Drag the box's bottom-right corner to resize it.</small>
+</div>
+
+<script>
+  const container = document.querySelector('.resize-observer-overview');
+  const dimensions = container.querySelector('.dimensions');
+  const resizeObserver = container.querySelector('cs-resize-observer');
+
+  resizeObserver.addEventListener('cs-resize', event => {
+    const { width, height } = event.detail.entries[0].contentRect;
+    dimensions.textContent = `${Math.round(width)} × ${Math.round(height)}`;
+  });
+</script>
+
+<style>
+  .resize-observer-overview .box {
+    display: flex;
+    resize: both;
+    overflow: auto;
+    width: 20rem;
+    height: 8rem;
+    min-width: 8rem;
+    min-height: 5rem;
+    align-items: center;
+    justify-content: center;
+    border: dashed 2px var(--cs-color-surface-border);
+    border-radius: var(--cs-border-radius-m);
+    font-size: 1.25rem;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .resize-observer-overview small {
+    display: block;
+    margin-block-start: var(--cs-space-s);
+  }
+</style>
+```
+
+The resize observer will report changes to the dimensions of the elements it wraps through the `cs-resize` event. When emitted, `event.detail.entries` holds a collection of [`ResizeObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry) objects describing the observed elements and their new dimensions.
+
+## API
+
+### Importing
+
+If you're using the autoloader or a hosted project, components load on demand — no manual import
+needed. To cherry-pick this component, use one of the following snippets.
+
+**npm**
+
+```js
+import '@cruglobal/cornerstone-components/components/resize-observer/resize-observer.js';
+```
+
+**Self-Hosted**
+
+```js
+import './cornerstone/components/resize-observer/resize-observer.js';
+```
+
+**React**
+
+```js
+import CsResizeObserver from '@cruglobal/cornerstone-components/react/resize-observer/index.js';
+```
+
+### Slots
+
+Valid slot names for this component (use exactly these — any other `slot` value is silently ignored and the element falls back to the default slot):
+
+- `(default)` — One or more elements to watch for resizing.
+
+### Attributes & Properties
+
+| Property | Attribute | Description | Type | Default | Reflects |
+| --- | --- | --- | --- | --- | --- |
+| `disabled` | `disabled` | Disables the observer. | `boolean` | `false` | Yes |
+
+### Events
+
+| Name | Description |
+| --- | --- |
+| `cs-resize` | Emitted when the element is resized. |

package/dist/unbundled/skills/cornerstone/references/components/scroller.md

@@ -0,0 +1,293 @@
+# Scroller
+
+**Full documentation:** https://cruglobal.github.io/cornerstone-design-system/components/scroller
+
+<style>
+  /* These widths exist to overflow the scroller — that is the whole demo — so they are deliberately
+     larger than any container and have no meaningful token. Defined once here rather than repeated
+     inline, which is the part rule 8 is about. */
+  .wide-content {
+    inline-size: 1200px;
+    padding: var(--cs-space-m);
+  }
+
+  .wider-content {
+    inline-size: 1500px;
+  }
+
+  .tall-scroller {
+    max-block-size: calc(var(--cs-space-5xl) * 3.75);
+  }
+</style>
+
+```html
+<cs-scroller id="scroller__overview">
+  <table>
+    <tr>
+      <th>Party Role</th>
+      <th>Combat Style</th>
+      <th>Group Size</th>
+      <th>Campaign Setting</th>
+      <th>Signature Traits</th>
+    </tr>
+    <tr>
+      <td>Warrior</td>
+      <td>Melee Tank</td>
+      <td>1-2</td>
+      <td>Forgotten Realms</td>
+      <td>Plate-armored swordmaster who taunts foes.</td>
+    </tr>
+    <tr>
+      <td>Rogue</td>
+      <td>Stealth Striker</td>
+      <td>1</td>
+      <td>Eberron</td>
+      <td>Shadowy lockpick with daggers and a secret gold stash.</td>
+    </tr>
+    <tr>
+      <td>Wizard</td>
+      <td>Spell Slinger</td>
+      <td>1</td>
+      <td>Greyhawk</td>
+      <td>Robe-clad mage hurling fireballs from a messy spellbook.</td>
+    </tr>
+    <tr>
+      <td>Cleric</td>
+      <td>Divine Support</td>
+      <td>1</td>
+      <td>Ravnica</td>
+      <td>Holy healer with a glowing amulet and sneaky ale habit.</td>
+    </tr>
+    <tr>
+      <td>Bard</td>
+      <td>Charisma King</td>
+      <td>1</td>
+      <td>Dragonlance</td>
+      <td>Lute-playing charmer with magical songs and bad puns.</td>
+    </tr>
+  </table>
+</cs-scroller>
+
+<style>
+  #scroller__overview {
+    table {
+      margin-block: 0;
+    }
+
+    th,
+    td {
+      white-space: nowrap;
+    }
+
+    th:nth-child(5),
+    td:nth-child(5) {
+      min-width: 50ch;
+      white-space: wrap;
+    }
+  }
+</style>
+```
+
+## Examples
+
+### Adding Content
+
+The scroller component automatically provides a scrollable container for any content that exceeds the available space. Add your content as children of the `<cs-scroller>` element, and it handles the rest.
+
+```html
+<cs-scroller>
+  <div class="wide-content">
+    <h3>Superhero Team Roles Guide</h3>
+    <div class="cs-grid cs-gap-l" style="--min-column-size: calc(var(--cs-space-4xl) * 4)">
+      <div>
+        <h4>Team Leaders</h4>
+        <p>
+          Charismatic captains like Captain America or Cyclops are the heart of any superteam, rallying everyone with
+          epic speeches and killer strategies. They’re the ones calling the shots in a cosmic showdown, keeping the
+          squad focused when Thanos or Magneto crashes the party.
+        </p>
+      </div>
+      <div>
+        <h4>Heavy Hitters</h4>
+        <p>
+          Powerhouses like Thor or Hulk bring the boom, smashing through villain lairs or alien armadas. Their job is to
+          land the big punches, but they gotta pace themselves to avoid stealing the spotlight from sneakier teammates.
+        </p>
+      </div>
+      <div>
+        <h4>Tech Geniuses</h4>
+        <p>
+          Brainiacs like Iron Man or Mr. Fantastic keep the team one step ahead with gadgets and gizmos. They’re
+          crafting quinjets or hacking evil AI, always ready with a snarky quip while saving the day from a computer
+          terminal.
+        </p>
+      </div>
+      <div>
+        <h4>Stealth Specialists</h4>
+        <p>
+          Ninja-like heroes like Black Widow or Nightcrawler slip through the shadows, gathering intel or pulling off
+          surprise attacks. They’re the glue that makes risky plans work, coordinating with the team to flip a losing
+          fight into a win.
+        </p>
+      </div>
+    </div>
+  </div>
+</cs-scroller>
+```
+
+### Orientation
+
+Set the `orientation` attribute to `vertical` and provide a height to create a vertical scroller.
+
+```html
+<cs-scroller orientation="vertical" class="tall-scroller">
+  <p>
+    Superhero movies are the ultimate popcorn-fueled thrill rides, turning comic book pages into cinematic
+    rollercoasters. Back in the early 2000s, films like X-Men and Spider-Man kicked open the door, proving tights and
+    teamwork could pack theaters. Those early flicks leaned on practical effects and heart—like Tobey Maguire’s earnest
+    web-slinger saving a train—making us believe a guy in spandex could be a hero. They weren’t perfect, but they set
+    the stage for the genre to become a cultural juggernaut.
+  </p>
+  <p>
+    By the 2010s, the Marvel Cinematic Universe turned superhero films into a shared saga, like a comic crossover event
+    on steroids. The Avengers in 2012 was a game-changer, tossing Iron Man’s snark, Thor’s hammer, and Cap’s shield into
+    one epic brawl. Directors learned to balance humor, heart, and explosions, while studios figured out how to make
+    every movie feel like a chapter in a bigger story. Even standalone hits like Wonder Woman brought fresh vibes, with
+    Gal Gadot’s lasso-wielding warrior stealing hearts and smashing box office records.
+  </p>
+  <p>
+    Today, superhero flicks are a global obsession, from Deadpool’s chimichanga-fueled chaos to Black Panther’s Wakandan
+    pride. They’re not just about powers—they’re about characters we root for, like Rocket Raccoon’s scrappy loyalty or
+    Harley Quinn’s wild energy. Fans dissect trailers like detectives, theorizing about multiverses and cameos, while
+    memes of sad Affleck or dancing Groot flood the internet. Whether it’s a gritty Joker origin or a cosmic Guardians
+    adventure, these movies keep us glued to our seats, dreaming of heroism and one-liners that’d make even Tony Stark
+    jealous.
+  </p>
+</cs-scroller>
+```
+
+### Without a Shadow
+
+Use the `without-shadow` attribute to remove the fading shadow effect at the edges of the scroller, which typically indicates more content is available.
+
+```html
+<cs-scroller without-shadow>
+  <div class="wider-content">
+    <p>
+      Gaming consoles are like time machines for nerds, zapping us from pixelated 2D adventures to jaw-dropping
+      cinematic worlds. Back in the ‘90s, the Super Nintendo was the cool kid on the block, using a 16-bit chip to pull
+      off tricks like Mode 7, which made Mario Kart’s tracks feel like they were zooming right at you. It was like
+      wizardry for a kid with a chunky controller, turning flat sprites into pseudo-3D races that had us yelling at our
+      TVs when we got hit by a red shell.
+    </p>
+    <p>
+      Fast-forward to today, and consoles like the PlayStation 5 and Xbox Series X are basically supercomputers in sleek
+      boxes. They’re packing enough power to make games look like Hollywood blockbusters, with lighting so real you can
+      practically feel the sun glare in Spider-Man: Miles Morales. These machines can handle massive open worlds, like
+      the sprawling lands of Elden Ring, without breaking a sweat, letting you swing swords or race cars while your
+      living room feels like a sci-fi movie set. It’s a far cry from the SNES days, but the vibe’s the same: pure,
+      controller-gripping fun.
+    </p>
+    <p>
+      What makes consoles the heart of gaming culture is how they bring everyone together, from casual players to
+      hardcore speedrunners. Whether it’s your uncle fumbling through Super Mario World in ‘92 or your best friend
+      screaming during a late-night Call of Duty match, consoles are the ultimate couch co-op machines. Modern systems
+      even let you stream your clutch Fortnite wins to the world or jump into crossplay with PC pals. From the
+      GameCube’s quirky handle to the Switch’s grab-and-go joy-cons, every console’s got its own personality, making
+      every era of gaming feel like a legendary chapter in a never-ending quest.
+    </p>
+  </div>
+</cs-scroller>
+```
+
+### Without a Scrollbar
+
+Use the `without-scrollbar` attribute to hide the scrollbar while maintaining scroll functionality. This creates a cleaner visual appearance but may reduce usability on content that needs a clear scrolling indicator.
+
+```html
+<cs-scroller without-scrollbar>
+  <div class="wider-content">
+    <p>
+      Dungeons & Dragons 5e is the blockbuster superhero flick of tabletop RPGs, turning every session into an epic
+      tavern brawl or dragon-slaying saga. Unlike the old 3.5e days, where you’d stack +30 bonuses like a mathlete on a
+      mission, 5e keeps things chill with skill checks capping around +11—like a +5 from your slick Charisma and +6 from
+      being a pro at persuasion. This means even a squad of scrappy kobolds can give your level 10 barbarian a bad day
+      if you roll poorly. It’s like the game’s saying, “Sure, you’re a hero, but don’t get cocky!”
+    </p>
+    <p>
+      The advantage and disadvantage system is 5e’s secret sauce, making every dice roll feel like a movie cliffhanger.
+      Instead of juggling a dozen modifiers, you just roll two d20s and take the better (or worse) one, which shakes out
+      to about a +5 or -5 vibe shift. It’s like your rogue’s got a lucky charm when sneaking past guards or a cursed
+      boot when dodging a fireball. This keeps the game’s flow snappy, so you’re not stuck crunching numbers when you
+      could be roleplaying a dramatic speech to charm a dragon or bluffing your way out of a bandit ambush.
+    </p>
+    <p>
+      5e’s world is built for storytelling, not just stat sheets, and that’s why it’s the king of game nights. The rules
+      are flexible enough for your DM to whip up a haunted forest crawl or a pirate ship heist without needing a PhD in
+      game design. Classes like the warlock let you make shady pacts with cosmic entities, while feats like Tavern
+      Brawler turn your monk into a bar-fighting legend who can knock out goblins with a chair. Whether you’re a newbie
+      rolling your first d20 or a veteran plotting a castle siege, 5e’s vibe is all about epic moments—like when your
+      party’s wizard crits on a fireball and you all cheer like you just won the Super Bowl.
+    </p>
+  </div>
+</cs-scroller>
+```
+
+> **Warning**
+>
+> <strong>Hiding the scrollbar can hurt accessibility.</strong><br />
+> People who rely on a visible scrollbar may not realize the content scrolls, or may struggle to control their position. Weigh that before turning it off.
+
+## API
+
+### Importing
+
+If you're using the autoloader or a hosted project, components load on demand — no manual import
+needed. To cherry-pick this component, use one of the following snippets.
+
+**npm**
+
+```js
+import '@cruglobal/cornerstone-components/components/scroller/scroller.js';
+```
+
+**Self-Hosted**
+
+```js
+import './cornerstone/components/scroller/scroller.js';
+```
+
+**React**
+
+```js
+import CsScroller from '@cruglobal/cornerstone-components/react/scroller/index.js';
+```
+
+### Slots
+
+Valid slot names for this component (use exactly these — any other `slot` value is silently ignored and the element falls back to the default slot):
+
+- `(default)` — The content to show inside the scroller.
+
+### Attributes & Properties
+
+| Property | Attribute | Description | Type | Default | Reflects |
+| --- | --- | --- | --- | --- | --- |
+| `orientation` | `orientation` | The scroller's orientation. | `'horizontal' \| 'vertical'` | `'horizontal'` | Yes |
+| `withoutScrollbar` | `without-scrollbar` | Removes the visible scrollbar. | `boolean` | `false` | Yes |
+| `withoutShadow` | `without-shadow` | Removes the shadows. | `boolean` | `false` | Yes |
+
+### CSS Custom Properties
+
+| Name | Description | Default |
+| --- | --- | --- |
+| `--shadow-color` | The base color of the shadow. | `var(--cs-color-surface-default)` |
+| `--shadow-size` | The size of the shadow. | `2rem` |
+
+### CSS Parts
+
+| Name | Description | CSS selector |
+| --- | --- | --- |
+| `content` | The container that wraps the slotted content. | `::part(content)` |
+| `end-shadow` | The scroll shadow shown at the end edge when more content is available, unless `without-shadow` is set. | `::part(end-shadow)` |
+| `start-shadow` | The scroll shadow shown at the start edge when more content is available, unless `without-shadow` is set. | `::part(start-shadow)` |