Merge branch 'main-1.x' into refactor/remove-unused-tokens

Author: thorbrink

component-design-tokens.json

@@ -1316,6 +1316,30 @@
     "requiredBy": [],
     "icon": "stacked_bar_chart"
   },
+  "scope": {
+    "$schema": "../../component-schema.json",
+    "apiVersion": 1,
+    "name": "Scope",
+    "slug": "scope",
+    "tokens": [
+      "base"
+    ],
+    "description": "The Scope component groups inner content styles and limits the scope of styles to prevent them from affecting other parts of the interface.",
+    "tags": [
+      "scope",
+      "limit",
+      "reduce",
+      "wrap",
+      "wrapper"
+    ],
+    "similarComponents": [
+      "container",
+      "section"
+    ],
+    "requires": [],
+    "requiredBy": [],
+    "icon": "arrow_and_edge"
+  },
   "segment": {
     "$schema": "../../component-schema.json",
     "apiVersion": 1,

composer.lock

@@ -1,7 +1,7 @@
 {
     "name": "@helsingborg-stad/styleguide",
     "appname": "styleguide",
-    "version": "2.202.4",
+    "version": "2.202.8",
     "description": "",
     "scripts": {
         "test": "jest --coverage --maxWorkers=$(node -e \"console.log(Math.max(1, Math.floor(require('os').cpus().length / 2)))\")",

package-lock.json

@@ -8,7 +8,6 @@ $_: "c-paper";
     ("border-color": tokens.get($_, "color--surface-border"),
         "border": tokens.use($_, "border-width", 1) solid tokens.get($_, "border-color"),
         "padding": 0,
-        "shadow": tokens.use($_, "shadow", 1),
         "background-color": tokens.get($_, "color--surface"),
         "color": tokens.get($_, "color--surface-contrast"),
     ),
@@ -24,7 +23,7 @@ $_: "c-paper";
     border-radius: tokens.use($_, "border-radius");
     corner-shape: tokens.get($_, "corner-shape");
     padding: tokens.get($_, "padding");
-    filter: tokens.get($_, "shadow");
+    filter: tokens.use($_, "shadow", 1);
 
     > :first-child {
         --inherit-margin-top: 0;

package.json

@@ -1,4 +1,4 @@
-@scope(['name' => 'a-unique-scope-id'])
+@scope(['name' => 'a-unique-scope-id', 'classList' => ['u-margin__bottom--2']])
     @button([
         'text' => 'Scope 1 - Button 1',
         'color' => 'primary',
@@ -18,7 +18,7 @@
     @endbutton
 @endscope
 
-@scope(['name' => 'a-unique-scope-id-2'])
+@scope(['name' => 'a-unique-scope-id-2', 'classList' => ['u-margin__bottom--2']])
     @button([
         'text' => 'Scope 2 - Button 1',
         'color' => 'primary',

source/components/paper/style.scss

@@ -65,6 +65,19 @@ Component mode starts when:
 2. window.styleguideCustomizeData exists, and
 3. window.styleguideDesignTokenLibrary exists and is valid
 
+Init mode is controlled by:
+- window.styleguideCustomizeInitMode = "onload" | "manual"
+
+Behavior:
+- onload: component customizer initializes automatically
+- manual: waits for click on [data-customize-init-fab]
+
+Styleguide default:
+- manual mode via views/layout/master.blade.php
+
+Theme / WP customizer usage:
+- set window.styleguideCustomizeInitMode = "onload" before loading design-builder script
+
 Payloads are injected in:
 - views/layout/master.blade.php
 
@@ -76,6 +89,11 @@ Payloads are produced by:
 Targets are discovered by:
 - [data-component]
 
+Targets are skipped when they are inside:
+- [data-customizable="false"]
+
+This excludes the marked component and all nested [data-component] descendants.
+
 Examples:
 - data-component="button"
 - data-component="typography"
@@ -302,13 +320,13 @@ If selection still feels wrong, verify nested markup and where data-component is
 
 ## Current limitations
 
-- Scope picker UI is not present; scope is inferred from selected target.
-- Component dropdown is component-first, scope retained from active target when possible.
+- Scope selector has a single General (all scopes) option plus detected named scopes per component context.
+- Component dropdown is component-first, with scope options based on where that component exists on the page.
 - Component-level mode focuses on direct editable targets marked with data-component.
+- Wrapper components used for scoping (scope/divider alias) are excluded from component customization.
 
 ## Suggested future improvements
 
-- Add explicit scope selector in panel
 - Add breadcrumb for selected target path (component + scope)
 - Add per-scope export/import
 - Add optional keyboard navigation for target picking

source/components/scope/examples/basic.blade.php

@@ -713,27 +713,8 @@
   pointer-events: none;
 }
 
-.db-component-tool__toggle {
-  pointer-events: auto;
-  margin-left: auto;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  padding: 0.45rem 0.8rem;
-  font-size: 0.8125rem;
-  font-family: inherit;
-  line-height: 1.4;
-  color: var(--color--surface-contrast, #2d2d2d);
-  background: var(--color--surface, #fff);
-  border: 1px solid var(--color--surface-border, #ccc);
-  border-radius: 999px;
-  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
-  cursor: pointer;
-}
-
 .db-component-tool__panel {
   pointer-events: auto;
-  margin-top: 0.75rem;
   max-height: min(70vh, 760px);
   overflow: auto;
   border: 1px solid var(--color--surface-border, #ccc);
@@ -866,9 +847,9 @@
     transform: translateY(-3px);
     transition: opacity 0.15s ease, transform 0.15s ease;
     max-width: calc(100% - 1rem);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    text-overflow: clip;
   }
 
   &:hover::after {