qss 0.1.0 → 0.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a8e93da5bd3a65eb8804f5416a1a0315f23110bb6027703c71974b7fa4443d73
-  data.tar.gz: d00e38e05740739f64aff39d17f491558f76a0556ec71abaa7781c278059c60c
+  metadata.gz: 66150ff6d5d7310f9fcdff3e694f321c3dce50ae18503caccd2a0792e4cce86a
+  data.tar.gz: 74f4ce6e564e503a967c85f5629e4d474813d45b2c0cc54dbe7ae7ed011aba2e
 SHA512:
-  metadata.gz: dc74ce934ef4007d538d184b46822b89bbb3e6ee1c0a2ff90900ae69729434e5413dac0380c33976ae2ba43cf01a9a30e6b67140f4055fdadf758781b31f7be1
-  data.tar.gz: aa18e0742c0dfc5bb26067fed5dff96f52b28f0e495634b9aac87e1ead4ed60ae5124cae80b12f5b4fce43f44f2a06f7d8f71f2f7c8e99f0c68b3147f4799931
+  metadata.gz: 1cdb64154903050a037a49e30587269f3113350d35288c313c12861b1bcba106811e2d263d96a7cab490ef57268f96bf4d7c96a0868670eaa4a68a17365c3622
+  data.tar.gz: 0c19536b299d641009e3560372b8784bf7de5e6d7a10006a26640e818601253dbcd187b82919689354033ac93b1e72c88b80488686a15953fe5debfc7bb78d31

data/CHANGELOG.md

@@ -3,7 +3,18 @@
 All notable changes to the qss gem. The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/);
 versions follow [Semantic Versioning](https://semver.org/) (before 1.0, minor versions may break the API).
 
-## [0.1.0] - unreleased
+## [Unreleased]
+
+## [0.1.1] - 2026-10-05
+
+### Fixed
+- `contain-layout` and `qss-contain-layout` now have a rule (`contain: layout`) in `qss_core.css`. The README
+  documents the class for structural frames and the native auditor mandates it, but the stylesheet never defined it,
+  so a frame that satisfied the auditor received no containment. Anyone already using the class will now get layout
+  containment on those frames: check that absolutely and fixed-positioned descendants still position as expected.
+  Covered by a spec on the compiled stylesheet and by three checks in the browser render check (21 in total).
+
+## [0.1.0] - 2026-09-25
 
 First release, extracted from the Parapet project.
 

data/app/assets/javascripts/qss/qss-engine.js

@@ -60,6 +60,7 @@ const QSSEngine = (function() {
         'centered',
         'clickable',
         'contain',
+        'contain-layout',
         'contrast',
         'cover',
         'cursor-col-resize',

data/app/assets/stylesheets/qss/qss_core.css

@@ -71908,6 +71908,16 @@ html, body {
   object-fit: contain;
 }
 
+/* Layout containment for structural frames: the class the README documents and the native auditor mandates on
+   frames whose id names a structural word (header, nav, sidebar, ...). Both spellings the auditor accepts. */
+:is(#qss-canvas) .contain-layout {
+  contain: layout;
+}
+
+:is(#qss-canvas) .qss-contain-layout {
+  contain: layout;
+}
+
 :is(#qss-canvas) .cover {
   object-fit: cover;
 }

data/app/assets/stylesheets/qss/qss_core.scss

@@ -411,6 +411,11 @@ $qss-scope: if($qss-portal-root == "", $qss-anchor, "#{$qss-anchor}, #{$qss-port
 @include qss-dsl-boost(".grid") { display: grid; }
 @include qss-dsl-boost(".table-fixed") { table-layout: fixed; }
 @include qss-dsl-boost(".contain") { object-fit: contain; }
+
+/* Layout containment for structural frames: the class the README documents and the native auditor mandates on
+   frames whose id names a structural word (header, nav, sidebar, ...). Both spellings the auditor accepts. */
+@include qss-dsl-boost(".contain-layout")     { contain: layout; }
+@include qss-dsl-boost(".qss-contain-layout") { contain: layout; }
 @include qss-dsl-boost(".cover")   { object-fit: cover; }
 
 /* Visual Atmosphere */

data/config/grammar.yml

@@ -48,6 +48,7 @@ adjectives:
     - justify-between
     - grid
     - table-fixed
+    - contain-layout
     - w-full
     - h-full
     - w-f

data/exe/qss-core-render-check

@@ -30,6 +30,8 @@ HTML = <<~HTML
     <div id="vertical" class="qss vertical"></div>
     <div id="flex1" class="qss flex-1"></div>
     <div id="padded" class="qss p[4]"></div>
+    <div id="contained" class="qss contain-layout"></div>
+    <div id="contained-prefixed" class="qss qss-contain-layout"></div>
     <div id="host" class="qss host-static"></div>
     <div class="foreign"><div id="in-foreign" class="qss"></div></div>
     <div id="nearer-container" class="qss w[100] h[10]" style="container-type: inline-size"><div id="deep" class="qss"></div></div>
@@ -49,6 +51,9 @@ CHECKS = [
   [ "flex-1 beats the reset's flex-shrink",           "flex1",        "flex",           "1 1 0%" ],
   [ "p[N] beats the reset (4 units on a 1000px canvas)", "padded", "padding",           "4px" ],
   [ "a host app's plain class does not override structure", "host", "position",        "absolute" ],
+  [ "contain-layout gives layout containment",          "contained",          "contain",        "layout" ],
+  [ "qss-contain-layout gives layout containment",      "contained-prefixed", "contain",        "layout" ],
+  [ "a bare actor has no containment",                  "bare",               "contain",        "none" ],
   [ "foreign content is left alone",                  "in-foreign",   "position",       "static" ]
 ].freeze
 

data/lib/qss/qss_auditor.rb

@@ -25,6 +25,7 @@ module QSS
       'centered',
       'clickable',
       'contain',
+      'contain-layout',
       'contrast',
       'cover',
       'cursor-col-resize',
@@ -120,7 +121,7 @@ module QSS
 
     PAYLOAD_TAGS = ["p", "h1", "h2", "h3", "h4", "h5", "h6", "span", "label", "blockquote", "li"].freeze
 
-    ADJECTIVE_CATEGORIES = {"positional"=>["detached", "floating", "stuck", "absolute", "pos-x", "pos-y", "pos-r", "pos-b", "pos"], "flow_relative"=>["anchored", "relative"], "layout"=>["vertical", "horizontal", "centered", "v-mid", "h-mid", "v-start", "v-end", "h-start", "h-end", "spaced", "around", "evenly", "flex", "flex-col", "flex-row", "flex-wrap", "flex-nowrap", "flex-1", "flex-auto", "flex-none", "items-center", "justify-center", "justify-between", "grid", "table-fixed", "w-full", "h-full", "w-f", "h-f"], "typographic"=>["italic", "uppercase", "lowercase", "underline", "nowrap", "truncate", "font-mono", "font-sans", "font-medium", "font-bold", "font-black", "text-size", "leading", "tracking", "tracking-tighter", "tracking-wide", "tracking-wider", "tracking-widest", "icon-size"], "visual"=>["bg", "border", "border-t", "border-b", "border-l", "border-r", "rounded", "rounded-full", "shadow", "opacity", "blur", "bright", "contrast", "grayscale", "hue", "invert", "saturate", "sepia", "blend", "contain", "cover", "visible", "invisible", "bg-alpha", "border-alpha", "text-alpha"], "interactive"=>["clickable", "smooth", "busy", "ghost", "unselectable", "scroll-smooth", "scroll", "cursor-col-resize", "cursor-row-resize", "transition-all", "transition-colors", "transition-none", "ring", "resize", "outline-none"], "internal"=>["qss", "dev-border", "group", "foreign", "qss-legibility-override", "qss-ergonomic-override", "qss-payload-override", "qss-dampen-scaling", "qss-content-driven"]}.freeze
+    ADJECTIVE_CATEGORIES = {"positional"=>["detached", "floating", "stuck", "absolute", "pos-x", "pos-y", "pos-r", "pos-b", "pos"], "flow_relative"=>["anchored", "relative"], "layout"=>["vertical", "horizontal", "centered", "v-mid", "h-mid", "v-start", "v-end", "h-start", "h-end", "spaced", "around", "evenly", "flex", "flex-col", "flex-row", "flex-wrap", "flex-nowrap", "flex-1", "flex-auto", "flex-none", "items-center", "justify-center", "justify-between", "grid", "table-fixed", "contain-layout", "w-full", "h-full", "w-f", "h-f"], "typographic"=>["italic", "uppercase", "lowercase", "underline", "nowrap", "truncate", "font-mono", "font-sans", "font-medium", "font-bold", "font-black", "text-size", "leading", "tracking", "tracking-tighter", "tracking-wide", "tracking-wider", "tracking-widest", "icon-size"], "visual"=>["bg", "border", "border-t", "border-b", "border-l", "border-r", "rounded", "rounded-full", "shadow", "opacity", "blur", "bright", "contrast", "grayscale", "hue", "invert", "saturate", "sepia", "blend", "contain", "cover", "visible", "invisible", "bg-alpha", "border-alpha", "text-alpha"], "interactive"=>["clickable", "smooth", "busy", "ghost", "unselectable", "scroll-smooth", "scroll", "cursor-col-resize", "cursor-row-resize", "transition-all", "transition-colors", "transition-none", "ring", "resize", "outline-none"], "internal"=>["qss", "dev-border", "group", "foreign", "qss-legibility-override", "qss-ergonomic-override", "qss-payload-override", "qss-dampen-scaling", "qss-content-driven"]}.freeze
 
     ILLEGAL_COMBOS = [{"tag_in"=>"payload_tags", "forbid_category"=>"positional", "severity"=>"red", "message"=>"Protocol Violation: Payload tags (<tag>) cannot carry flow-breaking positional adjectives. Use a wrapping <div> Frame.", "escape_hatch"=>"qss-payload-override"}].freeze
 

data/lib/qss/version.rb

@@ -3,7 +3,7 @@
 module QSS
   # The gem's version. QSS::VERSION is the usual spelling; QSS::Version::STRING the same value.
   module Version
-    STRING = "0.1.0"
+    STRING = "0.1.1"
   end
 
   VERSION = Version::STRING

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: qss
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.1.1
 platform: ruby
 authors:
 - Kraig Fairhurst