@elmethis/qwik 1.0.0-alpha.29 → 1.0.0-alpha.31

package/lib/style.css

@@ -1,4 +1,4 @@
-._elm-tabs_1fco0_1 {
+._elm-tabs_fka8s_1 {
   margin-block-start: var(--elmethis-margin-block-start);
   display: flex;
   flex-direction: column;
@@ -11,15 +11,20 @@
   background-color: var(--elmethis-color-surface-raised);
 }
 
-._tab-container_1fco0_14 {
+._tab-container_fka8s_14 {
   display: flex;
   flex-direction: row;
   border-bottom: solid 1px oklch(from var(--elmethis-color-primary) l c h / 30%);
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--elmethis-color-neutral-weak)
+    var(--elmethis-color-surface-base);
 }
 
-._tab_1fco0_14 {
+._tab_fka8s_14 {
   box-sizing: border-box;
   min-width: 6rem;
+  flex-shrink: 0;
   padding: 1rem;
   margin: 0;
   cursor: pointer;
@@ -34,7 +39,7 @@
   color: var(--elmethis-scoped-color, var(--elmethis-color-neutral));
   user-select: none;
 
-  &._active_1fco0_37 {
+  &._active_fka8s_42 {
     background-color: oklch(from var(--elmethis-color-primary) l c h / 5%);
     border-bottom-color: var(--elmethis-color-primary);
     cursor: default;
@@ -45,12 +50,12 @@
   }
 }
 
-._tab-content_1fco0_48 {
+._tab-content_fka8s_53 {
   width: 100%;
   margin: 0;
 }
 
-._tab-content-inner_1fco0_53 {
+._tab-content-inner_fka8s_58 {
   box-sizing: border-box;
   padding: 1em;
 }
@@ -1754,14 +1759,74 @@
     list-style-type: none;
   }
 }
-._elm-table_14qfo_1 {
+/* Non-scrolling frame: owns the outer spacing and pins the edge shadows so they
+   stay glued to the viewport edges while the table scrolls underneath. */
+._elm-table-frame_wl7v3_3 {
+  position: relative;
+  width: 100%;
   margin-block-start: var(--elmethis-margin-block-start);
+}
+
+._elm-table-frame_wl7v3_3::before,
+._elm-table-frame_wl7v3_3::after {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  width: 1.5rem;
+  z-index: 2;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 200ms;
+}
+
+._elm-table-frame_wl7v3_3::before {
+  inset-inline-start: 0;
+  background: linear-gradient(
+    to right,
+    oklch(from var(--elmethis-color-surface-sunken) l c h / 50%),
+    transparent
+  );
+}
+
+._elm-table-frame_wl7v3_3::after {
+  inset-inline-end: 0;
+  background: linear-gradient(
+    to left,
+    oklch(from var(--elmethis-color-surface-sunken) l c h / 50%),
+    transparent
+  );
+}
+
+/* Shadows are revealed only when there is content to scroll toward, set from the
+   scroll position in elm-table.tsx. */
+._elm-table-frame_wl7v3_3[data-overflow-start]::before {
+  opacity: 1;
+}
+
+._elm-table-frame_wl7v3_3[data-overflow-end]::after {
+  opacity: 1;
+}
+
+/* The actual scroller. Mirrors the house pattern from elm-code-block. */
+._elm-table-scroll_wl7v3_50 {
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--elmethis-color-primary-weak)
+    var(--elmethis-color-surface-base);
+}
+
+._elm-table-scroll_wl7v3_50:focus-visible {
+  outline: 2px solid var(--elmethis-color-primary);
+  outline-offset: 2px;
+}
+
+._elm-table_wl7v3_3 {
   border-collapse: collapse;
   border-spacing: 0;
   box-shadow: 0 0 0.125rem rgb(0 0 0 / 20%);
 }
 
-._caption_14qfo_8 {
+._caption_wl7v3_68 {
   position: relative;
   width: 100%;
   display: inline-flex;
@@ -1771,18 +1836,46 @@
   margin-block-end: 1rem;
 }
 
-._caption-inner_14qfo_18 {
+._caption-inner_wl7v3_78 {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   gap: 0.25rem;
 }
 
-._spacing_14qfo_25 {
+._spacing_wl7v3_85 {
   flex-grow: 1;
   height: 1px;
   background-color: rgb(128 128 128 / 20%);
 }
+
+/* Sticky label column. When the first column holds row headers, pin it so the
+   labels stay visible while the data columns scroll. The structural
+   `:first-child` selector targets the lead cell of every row regardless of
+   whether the caller threaded a `columnIndex` prop, and an opaque background
+   (matched to each row's stripe) keeps scrolled cells from bleeding through. */
+._sticky-row-header_wl7v3_96 :where(thead, tbody) tr > :first-child {
+  position: sticky;
+  inset-inline-start: 0;
+  z-index: 1;
+  box-shadow: 1px 0 0 oklch(from var(--elmethis-color-primary-weak) l c h / 50%);
+}
+
+._sticky-row-header_wl7v3_96 thead tr > :first-child {
+  background-color: var(--elmethis-color-surface-sunken);
+}
+
+._sticky-row-header_wl7v3_96 tbody tr:nth-child(odd) > :first-child {
+  background-color: var(--elmethis-color-surface-raised);
+}
+
+._sticky-row-header_wl7v3_96 tbody tr:nth-child(even) > :first-child {
+  background-color: var(--elmethis-color-surface-base);
+}
+
+._sticky-row-header_wl7v3_96 tbody tr:hover > :first-child {
+  background-color: var(--elmethis-color-surface-sunken);
+}
 ._elm-table-header_jhft7_1 {
   text-align: left;
   transition:

package/lib-types/components/containments/elm-tabs.stories.d.ts

@@ -6,6 +6,7 @@ type Story = StoryObj<ElmTabsProps>;
 export declare const Primary: Story;
 export declare const DefaultSelected: Story;
 export declare const Controlled: Story;
+export declare const Scrollable: Story;
 export declare const UncontrolledClickTest: Story;
 export declare const DefaultValueTest: Story;
 export declare const ControlledSignalTest: Story;

package/lib-types/components/media/elm-audio-player.stories.d.ts

@@ -9,3 +9,4 @@ export declare const ArtistOnly: Story;
 export declare const FilenameFallback: Story;
 export declare const BigSeekStep: Story;
 export declare const Errored: Story;
+export declare const Short: Story;

package/lib-types/components/table/elm-table.stories.d.ts

@@ -3,4 +3,11 @@ import { type ElmTableProps } from "./elm-table";
 declare const meta: Meta<ElmTableProps>;
 export default meta;
 type Story = StoryObj<ElmTableProps>;
+/**
+ * Wide table inside a narrow (mobile-sized) frame. The table scrolls
+ * horizontally, edge shadows hint at off-screen columns, and the row-header
+ * column stays pinned via `hasRowHeader`. The wrapper becomes a focusable,
+ * labeled scroll region while it overflows.
+ */
+export declare const ScrollableWithRowHeader: Story;
 export declare const Primary: Story;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elmethis/qwik",
-  "version": "1.0.0-alpha.29",
+  "version": "1.0.0-alpha.31",
   "publishConfig": {
     "access": "public"
   },
@@ -40,27 +40,29 @@
   "devDependencies": {
     "@eslint/js": "latest",
     "@qwik.dev/core": "2.0.0-beta.36",
-    "@storybook/addon-docs": "^10.4.4",
+    "@storybook/addon-docs": "^10.4.6",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "25.7.0",
     "@vitest/browser-playwright": "^4.1.8",
+    "@vitest/coverage-istanbul": "^4.1.8",
+    "@vitest/coverage-v8": "^4.1.8",
     "@vitest/ui": "^4.1.8",
     "concurrently": "^10.0.3",
-    "eslint": "10.4.1",
+    "eslint": "10.5.0",
     "eslint-plugin-qwik": "2.0.0-beta.37",
     "globals": "17.6.0",
-    "happy-dom": "^20.10.2",
+    "happy-dom": "^20.10.4",
     "np": "^11.2.1",
     "playwright": "^1.60.0",
     "prettier": "3.8.4",
-    "storybook": "^10.4.4",
+    "storybook": "^10.4.6",
     "storybook-framework-qwik": "0.6.2--canary.95.25602496384.0",
     "stylelint": "^17.13.0",
     "stylelint-config-css-modules": "^4.6.0",
     "stylelint-config-standard": "^40.0.0",
     "stylelint-value-no-unknown-custom-properties": "^6.1.1",
     "typescript": "5.9.3",
-    "typescript-eslint": "8.61.0",
+    "typescript-eslint": "8.61.1",
     "undici": "*",
     "vite": "^7",
     "vite-tsconfig-paths": "^6.1.1",
@@ -83,7 +85,7 @@
     "uuid": "^14.0.0",
     "zod": "^3",
     "zod-to-json-schema": "^3.25.2",
-    "@elmethis/core": "^0.13.0"
+    "@elmethis/core": "^0.14.0"
   },
   "peerDependencies": {
     "@qwik.dev/core": ">=2.0.0-beta.31"
@@ -102,10 +104,12 @@
     "start": "vite --open --mode ssr",
     "test": "pnpm run test.unit && pnpm run test.browser",
     "test.unit": "vitest --run",
+    "test.coverage": "vitest --run --coverage",
     "test.browser": "vitest --run --config vitest.browser.config.ts",
+    "test.coverage.browser": "vitest --run --coverage --config vitest.browser.config.ts",
     "test.build": "pnpm run build && pnpm run build-storybook",
-    "check": "concurrently -g \"pnpm:fmt.check\" \"pnpm:lint\" \"pnpm:lint.css\" \"pnpm:build.types\" \"pnpm:test.unit\"",
-    "check.ci": "concurrently -g \"pnpm:check\" \"pnpm:test.build\" \"pnpm:test.browser\"",
+    "check": "concurrently -g \"pnpm:fmt.check\" \"pnpm:lint\" \"pnpm:lint.css\" \"pnpm:build.types\"",
+    "check.ci": "concurrently -g \"pnpm:check\" \"pnpm:test.build\" \"pnpm:test.unit\" \"pnpm:test.browser\"",
     "qwik": "qwik"
   }
 }