@bro-code/crawl-space 2026.0.0 → 2026.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +12 -0
  2. package/dist/cjs/css.js +17 -0
  3. package/dist/esm/css.js +17 -0
  4. package/dist/types/css.d.ts +1 -1
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -155,6 +155,13 @@ crawl-space-button::part(button) {
155
155
  }
156
156
  ```
157
157
 
158
+ ### Small screens and touch
159
+
160
+ Two rules apply in every app, whatever the theme, and are not options:
161
+
162
+ - **Below 600px wide**, the dialog fills the screen: the full width, and the full height in `dvh`, so a phone's browser bars don't cut it off, with no border, rounded corners or shadow. Each tab still scrolls inside it. From 600px it is the card.
163
+ - **On touch input** (`(hover: none)`), the close button (48 by 48), the tabs, the Bug and Question toggle, the "Include these details" row and its checkbox (24px), Send, Try again and the Q&A questions are at least 48px tall, with at least 8px between neighbours. With a mouse they keep their smaller sizes.
164
+
158
165
  ## Setup per library
159
166
 
160
167
  The elements are plain custom elements. Tell a framework's template compiler they aren't its components:
@@ -238,6 +245,11 @@ MIT - see [LICENSE](./LICENSE).
238
245
 
239
246
  ## Changelog
240
247
 
248
+ ### [2026.1.0] - 2026-11-11
249
+
250
+ #### Changed
251
+ - Below 600px wide the dialog fills the screen (full width, `100dvh` tall, no border, radius or shadow), and on touch input (`(hover: none)`) its close button, tabs, Bug and Question toggle, details row and checkbox, Send, Try again and Q&A questions are at least 48px tall with at least 8px between them. Both apply in every app; a mouse keeps today's sizes.
252
+
241
253
  ### [2026.0.0] - 2026-11-04
242
254
 
243
255
  #### Added
package/dist/cjs/css.js CHANGED
@@ -101,4 +101,21 @@ h3 { margin: 0 0 8px; color: var(--cs-muted); font-size: 12px; font-weight: 600;
101
101
  details { border: 1px solid var(--cs-border); border-radius: 8px; background: var(--cs-surface); }
102
102
  summary { padding: 10px 12px; font-weight: 600; cursor: pointer; }
103
103
  details .text { padding: 0 12px 12px; }
104
+ @media (max-width: 599.98px) {
105
+ dialog { width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; border: none; border-radius: 0; box-shadow: none; }
106
+ }
107
+ @media (hover: none) {
108
+ header { padding: 8px 8px 0 20px; }
109
+ .close { width: 48px; height: 48px; }
110
+ .close svg { width: 20px; height: 20px; }
111
+ [role='tablist'] { gap: 8px; }
112
+ [role='tab'] { min-height: 48px; padding: 12px 14px; }
113
+ .kinds { gap: 8px; }
114
+ .kinds span { padding: 14px 18px; }
115
+ .details > label { min-height: 48px; gap: 12px; }
116
+ .details > label input { width: 24px; height: 24px; }
117
+ .primary { min-height: 48px; padding: 12px 24px; }
118
+ .secondary { min-height: 48px; padding: 12px 18px; }
119
+ summary { min-height: 48px; padding: 14px 12px; }
120
+ }
104
121
  `;
package/dist/esm/css.js CHANGED
@@ -98,4 +98,21 @@ h3 { margin: 0 0 8px; color: var(--cs-muted); font-size: 12px; font-weight: 600;
98
98
  details { border: 1px solid var(--cs-border); border-radius: 8px; background: var(--cs-surface); }
99
99
  summary { padding: 10px 12px; font-weight: 600; cursor: pointer; }
100
100
  details .text { padding: 0 12px 12px; }
101
+ @media (max-width: 599.98px) {
102
+ dialog { width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; border: none; border-radius: 0; box-shadow: none; }
103
+ }
104
+ @media (hover: none) {
105
+ header { padding: 8px 8px 0 20px; }
106
+ .close { width: 48px; height: 48px; }
107
+ .close svg { width: 20px; height: 20px; }
108
+ [role='tablist'] { gap: 8px; }
109
+ [role='tab'] { min-height: 48px; padding: 12px 14px; }
110
+ .kinds { gap: 8px; }
111
+ .kinds span { padding: 14px 18px; }
112
+ .details > label { min-height: 48px; gap: 12px; }
113
+ .details > label input { width: 24px; height: 24px; }
114
+ .primary { min-height: 48px; padding: 12px 24px; }
115
+ .secondary { min-height: 48px; padding: 12px 18px; }
116
+ summary { min-height: 48px; padding: 14px 12px; }
117
+ }
101
118
  `;
package/dist/types/css.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  export declare const BUTTON_CSS = "\n:host { display: inline-block; }\n:host([hidden]) { display: none; }\n:host([floating]) { position: fixed; z-index: 2147483000; }\n:host([floating][data-position='bottom-right']) { right: 16px; bottom: 16px; }\n:host([floating][data-position='bottom-left']) { left: 16px; bottom: 16px; }\n:host([floating][data-position='top-right']) { right: 16px; top: 16px; }\n:host([floating][data-position='top-left']) { left: 16px; top: 16px; }\nbutton {\n padding: 9px 16px;\n border: none;\n border-radius: 8px;\n background: var(--cs-accent);\n color: var(--cs-accent-text);\n font: 600 14px/1.2 var(--cs-font);\n cursor: pointer;\n}\n:host([floating]) button { padding: 11px 18px; border-radius: 999px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); }\nbutton:hover { filter: brightness(1.1); }\nbutton:focus-visible { outline: 2px solid var(--cs-text); outline-offset: 2px; }\n";
2
- export declare const DIALOG_CSS = "\n:host { all: initial; }\n*, *::before, *::after { box-sizing: border-box; }\ndialog {\n width: min(560px, calc(100vw - 32px));\n max-height: min(720px, calc(100vh - 32px));\n padding: 0;\n border: 1px solid var(--cs-border);\n border-radius: 12px;\n background: var(--cs-background);\n color: var(--cs-text);\n font: 14px/1.45 var(--cs-font);\n box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);\n overflow: hidden;\n}\ndialog[open] { display: flex; flex-direction: column; }\ndialog::backdrop { background: rgba(0, 0, 0, 0.6); }\nbutton, input, textarea { font: inherit; color: inherit; }\nbutton { cursor: pointer; }\nbutton:disabled { cursor: default; opacity: 0.6; }\n:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 2px; }\nheader { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 12px 0 20px; }\nh2 { margin: 0; font-size: 18px; font-weight: 600; }\n.close { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: 8px; background: none; color: var(--cs-muted); }\n.close:hover { background: var(--cs-surface); color: var(--cs-text); }\n.close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }\n[role='tablist'] { display: flex; gap: 4px; padding: 8px 14px 0; border-bottom: 1px solid var(--cs-border); }\n[role='tab'] { margin-bottom: -1px; padding: 9px 10px; border: none; border-bottom: 2px solid transparent; background: none; color: var(--cs-muted); font-weight: 600; }\n[role='tab']:hover { color: var(--cs-text); }\n[role='tab'][aria-selected='true'] { border-bottom-color: var(--cs-accent); color: var(--cs-text); }\n[role='tabpanel'] { flex: 1 1 auto; min-height: 0; padding: 16px 20px 20px; overflow-y: auto; }\n[role='tabpanel'][hidden] { display: none; }\n.hidden-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n.kinds { display: inline-flex; gap: 3px; margin: 0 0 14px; padding: 3px; border: 1px solid var(--cs-border); border-radius: 8px; }\n.kinds label { position: relative; }\n.kinds input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }\n.kinds span { display: block; padding: 5px 14px; border-radius: 6px; color: var(--cs-muted); font-weight: 600; }\n.kinds input:checked + span { background: var(--cs-accent); color: var(--cs-accent-text); }\n.kinds input:focus-visible + span { outline: 2px solid var(--cs-accent); outline-offset: 2px; }\n.field-label { display: block; margin-bottom: 6px; font-weight: 600; }\ntextarea { display: block; width: 100%; min-height: 130px; padding: 10px 12px; border: 1px solid var(--cs-border); border-radius: 8px; background: var(--cs-surface); resize: vertical; }\ntextarea:focus-visible { outline-offset: 0; }\n.counter { margin-top: 4px; color: var(--cs-muted); font-size: 12px; text-align: right; }\n.details { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--cs-border); border-radius: 8px; background: var(--cs-surface); }\n.details label { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }\n.details input { width: 16px; height: 16px; margin: 0; accent-color: var(--cs-accent); }\n.details ul { margin: 8px 0 0; padding: 0; list-style: none; color: var(--cs-muted); font-size: 12px; }\n.details ul.off { opacity: 0.45; }\n.details li { overflow-wrap: anywhere; }\n.details .label { color: var(--cs-text); }\n.details li.editable { margin: 2px 0; }\n.details li.editable label { gap: 4px; font-weight: inherit; cursor: auto; }\n.details li.editable .label { flex: none; }\n.details li.editable input { flex: 1 1 auto; min-width: 0; width: auto; height: auto; padding: 2px 6px; border: 1px solid var(--cs-border); border-radius: 4px; background: var(--cs-background); color: var(--cs-text); font: inherit; }\n.details li.editable input:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 1px; }\n.details li.editable input:disabled { cursor: not-allowed; }\n.actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 16px; }\n.message { flex: 1; margin: 0; font-size: 13px; }\n.error { color: var(--cs-error); }\n.success { color: var(--cs-success); }\n.primary { padding: 9px 18px; border: none; border-radius: 8px; background: var(--cs-accent); color: var(--cs-accent-text); font-weight: 600; }\n.primary:hover:not(:disabled) { filter: brightness(1.1); }\n.secondary { padding: 6px 12px; border: 1px solid var(--cs-border); border-radius: 8px; background: none; }\nsection + section { margin-top: 18px; }\nh3 { margin: 0 0 8px; color: var(--cs-muted); font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }\n.list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }\n.item { padding: 10px 12px; border: 1px solid var(--cs-border); border-radius: 8px; background: var(--cs-surface); }\n.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 6px; color: var(--cs-muted); font-size: 12px; }\n.badge { padding: 1px 8px; border: 1px solid var(--cs-border); border-radius: 999px; color: var(--cs-text); }\n.badge.in_progress { border-color: var(--cs-accent); color: var(--cs-accent); }\n.badge.resolved { border-color: var(--cs-success); color: var(--cs-success); }\n.text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }\n.answer { margin-top: 8px; padding-left: 10px; border-left: 2px solid var(--cs-accent); }\n.answer-label { color: var(--cs-muted); font-size: 12px; font-weight: 600; }\n.note { margin: 0; color: var(--cs-muted); }\n.failed { display: flex; align-items: center; gap: 12px; }\ndetails { border: 1px solid var(--cs-border); border-radius: 8px; background: var(--cs-surface); }\nsummary { padding: 10px 12px; font-weight: 600; cursor: pointer; }\ndetails .text { padding: 0 12px 12px; }\n";
2
+ export declare const DIALOG_CSS = "\n:host { all: initial; }\n*, *::before, *::after { box-sizing: border-box; }\ndialog {\n width: min(560px, calc(100vw - 32px));\n max-height: min(720px, calc(100vh - 32px));\n padding: 0;\n border: 1px solid var(--cs-border);\n border-radius: 12px;\n background: var(--cs-background);\n color: var(--cs-text);\n font: 14px/1.45 var(--cs-font);\n box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);\n overflow: hidden;\n}\ndialog[open] { display: flex; flex-direction: column; }\ndialog::backdrop { background: rgba(0, 0, 0, 0.6); }\nbutton, input, textarea { font: inherit; color: inherit; }\nbutton { cursor: pointer; }\nbutton:disabled { cursor: default; opacity: 0.6; }\n:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 2px; }\nheader { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 12px 0 20px; }\nh2 { margin: 0; font-size: 18px; font-weight: 600; }\n.close { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: none; border-radius: 8px; background: none; color: var(--cs-muted); }\n.close:hover { background: var(--cs-surface); color: var(--cs-text); }\n.close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }\n[role='tablist'] { display: flex; gap: 4px; padding: 8px 14px 0; border-bottom: 1px solid var(--cs-border); }\n[role='tab'] { margin-bottom: -1px; padding: 9px 10px; border: none; border-bottom: 2px solid transparent; background: none; color: var(--cs-muted); font-weight: 600; }\n[role='tab']:hover { color: var(--cs-text); }\n[role='tab'][aria-selected='true'] { border-bottom-color: var(--cs-accent); color: var(--cs-text); }\n[role='tabpanel'] { flex: 1 1 auto; min-height: 0; padding: 16px 20px 20px; overflow-y: auto; }\n[role='tabpanel'][hidden] { display: none; }\n.hidden-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }\n.kinds { display: inline-flex; gap: 3px; margin: 0 0 14px; padding: 3px; border: 1px solid var(--cs-border); border-radius: 8px; }\n.kinds label { position: relative; }\n.kinds input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }\n.kinds span { display: block; padding: 5px 14px; border-radius: 6px; color: var(--cs-muted); font-weight: 600; }\n.kinds input:checked + span { background: var(--cs-accent); color: var(--cs-accent-text); }\n.kinds input:focus-visible + span { outline: 2px solid var(--cs-accent); outline-offset: 2px; }\n.field-label { display: block; margin-bottom: 6px; font-weight: 600; }\ntextarea { display: block; width: 100%; min-height: 130px; padding: 10px 12px; border: 1px solid var(--cs-border); border-radius: 8px; background: var(--cs-surface); resize: vertical; }\ntextarea:focus-visible { outline-offset: 0; }\n.counter { margin-top: 4px; color: var(--cs-muted); font-size: 12px; text-align: right; }\n.details { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--cs-border); border-radius: 8px; background: var(--cs-surface); }\n.details label { display: flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }\n.details input { width: 16px; height: 16px; margin: 0; accent-color: var(--cs-accent); }\n.details ul { margin: 8px 0 0; padding: 0; list-style: none; color: var(--cs-muted); font-size: 12px; }\n.details ul.off { opacity: 0.45; }\n.details li { overflow-wrap: anywhere; }\n.details .label { color: var(--cs-text); }\n.details li.editable { margin: 2px 0; }\n.details li.editable label { gap: 4px; font-weight: inherit; cursor: auto; }\n.details li.editable .label { flex: none; }\n.details li.editable input { flex: 1 1 auto; min-width: 0; width: auto; height: auto; padding: 2px 6px; border: 1px solid var(--cs-border); border-radius: 4px; background: var(--cs-background); color: var(--cs-text); font: inherit; }\n.details li.editable input:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 1px; }\n.details li.editable input:disabled { cursor: not-allowed; }\n.actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 16px; }\n.message { flex: 1; margin: 0; font-size: 13px; }\n.error { color: var(--cs-error); }\n.success { color: var(--cs-success); }\n.primary { padding: 9px 18px; border: none; border-radius: 8px; background: var(--cs-accent); color: var(--cs-accent-text); font-weight: 600; }\n.primary:hover:not(:disabled) { filter: brightness(1.1); }\n.secondary { padding: 6px 12px; border: 1px solid var(--cs-border); border-radius: 8px; background: none; }\nsection + section { margin-top: 18px; }\nh3 { margin: 0 0 8px; color: var(--cs-muted); font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }\n.list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }\n.item { padding: 10px 12px; border: 1px solid var(--cs-border); border-radius: 8px; background: var(--cs-surface); }\n.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 6px; color: var(--cs-muted); font-size: 12px; }\n.badge { padding: 1px 8px; border: 1px solid var(--cs-border); border-radius: 999px; color: var(--cs-text); }\n.badge.in_progress { border-color: var(--cs-accent); color: var(--cs-accent); }\n.badge.resolved { border-color: var(--cs-success); color: var(--cs-success); }\n.text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }\n.answer { margin-top: 8px; padding-left: 10px; border-left: 2px solid var(--cs-accent); }\n.answer-label { color: var(--cs-muted); font-size: 12px; font-weight: 600; }\n.note { margin: 0; color: var(--cs-muted); }\n.failed { display: flex; align-items: center; gap: 12px; }\ndetails { border: 1px solid var(--cs-border); border-radius: 8px; background: var(--cs-surface); }\nsummary { padding: 10px 12px; font-weight: 600; cursor: pointer; }\ndetails .text { padding: 0 12px 12px; }\n@media (max-width: 599.98px) {\n dialog { width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; border: none; border-radius: 0; box-shadow: none; }\n}\n@media (hover: none) {\n header { padding: 8px 8px 0 20px; }\n .close { width: 48px; height: 48px; }\n .close svg { width: 20px; height: 20px; }\n [role='tablist'] { gap: 8px; }\n [role='tab'] { min-height: 48px; padding: 12px 14px; }\n .kinds { gap: 8px; }\n .kinds span { padding: 14px 18px; }\n .details > label { min-height: 48px; gap: 12px; }\n .details > label input { width: 24px; height: 24px; }\n .primary { min-height: 48px; padding: 12px 24px; }\n .secondary { min-height: 48px; padding: 12px 18px; }\n summary { min-height: 48px; padding: 14px 12px; }\n}\n";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bro-code/crawl-space",
3
- "version": "2026.0.0",
3
+ "version": "2026.1.0",
4
4
  "type": "module",
5
5
  "description": "A help desk for any web app (bug reports, active issues, Q&A) as framework-free custom elements, themed, against a documented HTTP API.",
6
6
  "main": "./dist/cjs/index.js",