npm - scb-wc - Versions diffs - 0.1.6 → 0.1.7 - Mend

scb-wc 0.1.6 → 0.1.7

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 (212) hide show

package/starters/blazor/dot-gitignore ADDED Viewed

@@ -0,0 +1,3 @@
+bin
+obj
+node_modules

package/starters/blazor/package.json ADDED Viewed

@@ -0,0 +1,14 @@
+{
+  "name": "__STARTER_NAME__",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "ui:install": "node -e \"const fs=require('fs'),p=require('path');const src=p.resolve('node_modules/__SCB_WC_PACKAGE_NAME__/mvc');if(!fs.existsSync(src)){console.error('Hittar inte '+src+'. Har du kört npm install?');process.exit(1);}const dst=p.resolve('wwwroot/ui');fs.rmSync(dst,{recursive:true,force:true});fs.mkdirSync('wwwroot',{recursive:true});fs.cpSync(src,dst,{recursive:true});console.log('Kopierade '+src+' → '+dst);\"",
+    "ui:blazor:interop": "node -e \"const fs=require('fs'),p=require('path');const src=p.resolve('node_modules/__SCB_WC_PACKAGE_NAME__/blazor');if(!fs.existsSync(src)){console.error('Hittar inte '+src+'. Har du kört npm install?');process.exit(1);}const csDst=p.resolve('ScbBlazor');const uiDst=p.resolve('wwwroot/ui');fs.mkdirSync(csDst,{recursive:true});fs.mkdirSync(uiDst,{recursive:true});fs.copyFileSync(p.join(src,'ScbBlazorInteropBase.cs'),p.join(csDst,'ScbBlazorInteropBase.cs'));fs.copyFileSync(p.join(src,'CustomEvents.cs'),p.join(csDst,'CustomEvents.cs'));fs.copyFileSync(p.join(src,'scb-blazor-bridge.js'),p.join(uiDst,'scb-blazor-bridge.js'));console.log('Kopierade Blazor-filer.');\"",
+    "ui:blazor:wrappers": "node -e \"const fs=require('fs'),p=require('path');const src=p.resolve('node_modules/__SCB_WC_PACKAGE_NAME__/blazor/wrappers');if(!fs.existsSync(src)){console.error('Hittar inte '+src+'. Har du kört npm install?');process.exit(1);}const dst=p.resolve('Components/Wrappers');fs.rmSync(dst,{recursive:true,force:true});fs.mkdirSync(p.dirname(dst),{recursive:true});fs.cpSync(src,dst,{recursive:true});console.log('Kopierade '+src+' → '+dst);\"",
+    "ui:setup": "npm run ui:install && npm run ui:blazor:interop && npm run ui:blazor:wrappers"
+  },
+  "dependencies": {
+    "__SCB_WC_PACKAGE_NAME__": "^__SCB_WC_VERSION__"
+  }
+}

package/starters/blazor/wwwroot/app.css ADDED Viewed

@@ -0,0 +1,54 @@
+:root {
+  background: var(--md-sys-color-background);
+  color: var(--md-sys-color-on-background);
+}
+html,
+body {
+  margin: 0;
+  font-family: var(--brand-font, Inter, sans-serif);
+  background: var(--md-sys-color-background);
+  color: var(--md-sys-color-on-background);
+}
+.starter-shell {
+  min-height: 100vh;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+}
+.starter-main {
+  width: min(1200px, calc(100% - 32px));
+  margin: 0 auto;
+}
+.hero,
+.panel {
+  display: grid;
+  gap: var(--spacing-5);
+  padding: var(--spacing-8);
+  border-radius: 24px;
+  background: var(--md-sys-color-surface-container-low);
+}
+.eyebrow {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+}
+.hero h1,
+.panel h2 {
+  margin: 0;
+}
+.lead {
+  margin: 0;
+  max-width: 65ch;
+}
+.actions {
+  display: flex;
+  gap: var(--spacing-4);
+  flex-wrap: wrap;
+}

package/starters/html/README.md ADDED Viewed

@@ -0,0 +1,23 @@
+# __STARTER_NAME__
+Startapp för vanlig HTML, CSS och JavaScript med SCB Web Components.
+## Kom igång
+```sh
+npm install
+npm run dev
+```
+## Det här ingår
+- `scb-header`
+- `scb-footer`
+- `scb-grid`
+- `scb-button`
+- `scb-accordion`
+## Var ändrar jag?
+- `index.html`: dokumentets skal
+- `main.js`: komponentimports och sidans markup

package/starters/html/dot-gitignore ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ node_modules
2	+ dist

package/starters/html/index.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="sv">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SCB Starter HTML</title>
+    <script type="module" src="/main.js"></script>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>

package/starters/html/main.js ADDED Viewed

@@ -0,0 +1,135 @@
+import '__SCB_WC_PACKAGE_NAME__/scb-wc.css';
+import '__SCB_WC_PACKAGE_NAME__/scb-typography.css';
+import '__SCB_WC_PACKAGE_NAME__/scb-header';
+import '__SCB_WC_PACKAGE_NAME__/scb-header/scb-header-tab';
+import '__SCB_WC_PACKAGE_NAME__/scb-header/scb-header-utility';
+import '__SCB_WC_PACKAGE_NAME__/scb-footer';
+import '__SCB_WC_PACKAGE_NAME__/scb-footer/scb-footer-section';
+import '__SCB_WC_PACKAGE_NAME__/scb-link';
+import '__SCB_WC_PACKAGE_NAME__/scb-grid';
+import '__SCB_WC_PACKAGE_NAME__/scb-grid/scb-grid-item';
+import '__SCB_WC_PACKAGE_NAME__/scb-button';
+import '__SCB_WC_PACKAGE_NAME__/scb-card';
+import '__SCB_WC_PACKAGE_NAME__/scb-list';
+import '__SCB_WC_PACKAGE_NAME__/scb-list/scb-list-item';
+import '__SCB_WC_PACKAGE_NAME__/scb-checkbox';
+import '__SCB_WC_PACKAGE_NAME__/scb-select';
+import '__SCB_WC_PACKAGE_NAME__/scb-select/scb-select-option';
+import '__SCB_WC_PACKAGE_NAME__/scb-textfield';
+import '__SCB_WC_PACKAGE_NAME__/scb-accordion';
+import '__SCB_WC_PACKAGE_NAME__/scb-accordion/scb-accordion-item';
+document.querySelector('#app').innerHTML = `
+<!-- BASIC_TEMPLATE_HTML_START -->
+<scb-grid padding-inline="6" padding-block="2" row-gap="4">
+  <scb-grid-item col-span-compact="4" col-span-medium="8" col-span-expanded="12">
+    <scb-header
+      logo-href="/"
+      show-drawer="true"
+      show-search="true"
+      include-utility-in-menu="true"
+      search-placeholder="Sök"
+      menu-label="Meny"
+      menu-section-label="Navigering"
+    >
+      <scb-header-tab label="Produkter" href="#"></scb-header-tab>
+      <scb-header-tab label="Statistik" href="#" selected></scb-header-tab>
+      <scb-header-tab label="Dokumentation" href="#"></scb-header-tab>
+      <scb-header-utility label="Kontakt" href="#"></scb-header-utility>
+    </scb-header>
+  </scb-grid-item>
+  <scb-grid-item col-span-compact="4" col-span-medium="8" col-span-expanded="12">
+    <main>
+      <scb-grid row-gap="8" column-gap="7" align-items="start">
+        <scb-grid-item col-span-compact="4" col-span-medium="8" col-span-expanded="8">
+          <section>
+            <h1>Grundmall för HTML, CSS och JS</h1>
+            <p>För vanliga webbplatser och enklare lösningar utan ramverk.</p>
+            <p>Öppna Code-panelen nedanför storyn för att se koden.</p>
+            <scb-grid row-gap="10" cols-compact="1" cols-medium="1" cols-expanded="1">
+              <scb-grid-item col-span-compact="1" col-span-medium="1" col-span-expanded="1">
+                <scb-textfield
+                  label="Sökord"
+                  supporting-text="Skriv något enkelt för att komma igång."
+                ></scb-textfield>
+              </scb-grid-item>
+              <scb-grid-item col-span-compact="1" col-span-medium="1" col-span-expanded="1">
+                <scb-select
+                  label="Typ av innehåll"
+                  supporting-text="Välj det som passar sidan."
+                  placeholder="Välj ett alternativ"
+                >
+                  <scb-select-option value="nyhet" label="Nyhet"></scb-select-option>
+                  <scb-select-option value="rapport" label="Rapport"></scb-select-option>
+                  <scb-select-option value="tabell" label="Tabell"></scb-select-option>
+                </scb-select>
+              </scb-grid-item>
+              <scb-grid-item col-span-compact="1" col-span-medium="1" col-span-expanded="1">
+                <scb-checkbox
+                  label="Visa endast publicerat innehåll"
+                  checked
+                ></scb-checkbox>
+              </scb-grid-item>
+              <scb-grid-item col-span-compact="1" col-span-medium="1" col-span-expanded="1">
+                <scb-button label="Primär handling"></scb-button>
+                <scb-button variant="outlined" label="Sekundär handling" spacing-left="2"></scb-button>
+              </scb-grid-item>
+              <scb-grid-item col-span-compact="1" col-span-medium="1" col-span-expanded="1">
+                <scb-accordion>
+                  <scb-accordion-item
+                    title="Exempelavsnitt"
+                    supporting-text="Visa eller dölj mer information."
+                    open
+                  >
+                    Här kan du lägga sådant som inte behöver synas direkt från start.
+                  </scb-accordion-item>
+                </scb-accordion>
+              </scb-grid-item>
+            </scb-grid>
+          </section>
+        </scb-grid-item>
+        <scb-grid-item col-span-compact="4" col-span-medium="8" col-span-expanded="4">
+          <scb-card type="list" variant="filled" card-title="Kom igång">
+            <scb-list no-divider density="-4">
+              <scb-list-item
+                type="text"
+                label="Skapa mallen"
+                supporting-text="npx scb-wc init html my-app"
+              ></scb-list-item>
+              <scb-list-item
+                type="text"
+                label="När den passar"
+                supporting-text="För vanliga webbplatser och enklare lösningar utan ramverk."
+              ></scb-list-item>
+              <scb-list-item
+                type="text"
+                label="Nästa steg"
+                supporting-text="Byt först ut text, länkar och innehåll. Lägg sedan till fler komponenter när du behöver dem."
+              ></scb-list-item>
+            </scb-list>
+          </scb-card>
+        </scb-grid-item>
+      </scb-grid>
+    </main>
+  </scb-grid-item>
+</scb-grid>
+<scb-footer description="Statistikmyndigheten SCB förser samhället med statistik för beslutsfattande, debatt och forskning.">
+  <scb-footer-section title="Hitta snabbt">
+    <scb-link href="#">Kom igång</scb-link>
+    <scb-link href="#">Dokumentation</scb-link>
+  </scb-footer-section>
+  <scb-footer-section title="Kontakt">
+    <scb-link href="#">Kontakta oss</scb-link>
+    <scb-link href="#">Support</scb-link>
+  </scb-footer-section>
+</scb-footer>
+<!-- BASIC_TEMPLATE_HTML_END -->
+`;

package/starters/html/package.json ADDED Viewed

@@ -0,0 +1,16 @@
+{
+  "name": "__STARTER_NAME__",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "__SCB_WC_PACKAGE_NAME__": "^__SCB_WC_VERSION__"
+  },
+  "devDependencies": {
+    "vite": "^8.0.9"
+  }
+}

package/starters/react/README.md ADDED Viewed

@@ -0,0 +1,24 @@
+# __STARTER_NAME__
+Startapp för React med SCB Web Components.
+## Kom igång
+```sh
+npm install
+npm run dev
+```
+## Det här ingår
+- `scb-header`
+- `scb-footer`
+- `scb-grid`
+- `scb-button`
+- `scb-accordion`
+## Var ändrar jag?
+- `src/App.jsx`: sidans struktur och komponenter
+- `src/main.jsx`: imports och bootstrap
+- `src/app.css`: sidans egna stilar

package/starters/react/dot-gitignore ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ node_modules
2	+ dist

package/starters/react/index.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="sv">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SCB Starter React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/starters/react/package.json ADDED Viewed

@@ -0,0 +1,19 @@
+{
+  "name": "__STARTER_NAME__",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "__SCB_WC_PACKAGE_NAME__": "^__SCB_WC_VERSION__",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^5.0.4",
+    "vite": "^8.0.9"
+  }
+}

package/starters/react/src/App.jsx ADDED Viewed

@@ -0,0 +1,118 @@
+export default function App() {
+  return (
+    <>
+      {/* BASIC_TEMPLATE_REACT_START */}
+      <scb-grid padding-inline="6" padding-block="2" row-gap="4">
+        <scb-grid-item col-span-compact="4" col-span-medium="8" col-span-expanded="12">
+          <scb-header
+            logo-href="/"
+            show-drawer="true"
+            show-search="true"
+            include-utility-in-menu="true"
+            search-placeholder="Sök"
+            menu-label="Meny"
+            menu-section-label="Navigering"
+          >
+            <scb-header-tab label="Produkter" href="#"></scb-header-tab>
+            <scb-header-tab label="Statistik" href="#" selected></scb-header-tab>
+            <scb-header-tab label="Dokumentation" href="#"></scb-header-tab>
+            <scb-header-utility label="Kontakt" href="#"></scb-header-utility>
+          </scb-header>
+        </scb-grid-item>
+        <scb-grid-item col-span-compact="4" col-span-medium="8" col-span-expanded="12">
+          <main>
+            <scb-grid row-gap="8" column-gap="7" align-items="start">
+              <scb-grid-item col-span-compact="4" col-span-medium="8" col-span-expanded="8">
+                <section>
+                  <h1>Grundmall för React</h1>
+                  <p>För appar i React där du vill använda samma komponentbibliotek.</p>
+                  <p>Öppna Code-panelen nedanför storyn för att se koden.</p>
+                  <scb-grid row-gap="10" cols-compact="1" cols-medium="1" cols-expanded="1">
+                    <scb-grid-item col-span-compact="1" col-span-medium="1" col-span-expanded="1">
+                      <scb-textfield
+                        label="Sökord"
+                        supporting-text="Skriv något enkelt för att komma igång."
+                      ></scb-textfield>
+                    </scb-grid-item>
+                    <scb-grid-item col-span-compact="1" col-span-medium="1" col-span-expanded="1">
+                      <scb-select
+                        label="Typ av innehåll"
+                        supporting-text="Välj det som passar sidan."
+                        placeholder="Välj ett alternativ"
+                      >
+                        <scb-select-option value="nyhet" label="Nyhet"></scb-select-option>
+                        <scb-select-option value="rapport" label="Rapport"></scb-select-option>
+                        <scb-select-option value="tabell" label="Tabell"></scb-select-option>
+                      </scb-select>
+                    </scb-grid-item>
+                    <scb-grid-item col-span-compact="1" col-span-medium="1" col-span-expanded="1">
+                      <scb-checkbox
+                        label="Visa endast publicerat innehåll"
+                        checked
+                      ></scb-checkbox>
+                    </scb-grid-item>
+                    <scb-grid-item col-span-compact="1" col-span-medium="1" col-span-expanded="1">
+                      <scb-button label="Primär handling"></scb-button>
+                      <scb-button variant="outlined" label="Sekundär handling" spacing-left="2"></scb-button>
+                    </scb-grid-item>
+                    <scb-grid-item col-span-compact="1" col-span-medium="1" col-span-expanded="1">
+                      <scb-accordion>
+                        <scb-accordion-item
+                          title="Exempelavsnitt"
+                          supporting-text="Visa eller dölj mer information."
+                          open
+                        >
+                          Här kan du lägga sådant som inte behöver synas direkt från start.
+                        </scb-accordion-item>
+                      </scb-accordion>
+                    </scb-grid-item>
+                  </scb-grid>
+                </section>
+              </scb-grid-item>
+              <scb-grid-item col-span-compact="4" col-span-medium="8" col-span-expanded="4">
+                <scb-card type="list" variant="filled" card-title="Kom igång">
+                  <scb-list no-divider density="-4">
+                    <scb-list-item
+                      type="text"
+                      label="Skapa mallen"
+                      supporting-text="npx scb-wc init react my-react-app"
+                    ></scb-list-item>
+                    <scb-list-item
+                      type="text"
+                      label="När den passar"
+                      supporting-text="För appar i React där du vill använda samma komponentbibliotek."
+                    ></scb-list-item>
+                    <scb-list-item
+                      type="text"
+                      label="Nästa steg"
+                      supporting-text="Byt först ut text, länkar och innehåll. Lägg sedan till fler komponenter när du behöver dem."
+                    ></scb-list-item>
+                  </scb-list>
+                </scb-card>
+              </scb-grid-item>
+            </scb-grid>
+          </main>
+        </scb-grid-item>
+      </scb-grid>
+      <scb-footer description="Statistikmyndigheten SCB förser samhället med statistik för beslutsfattande, debatt och forskning.">
+        <scb-footer-section title="Hitta snabbt">
+          <scb-link href="#">Kom igång</scb-link>
+          <scb-link href="#">Dokumentation</scb-link>
+        </scb-footer-section>
+        <scb-footer-section title="Kontakt">
+          <scb-link href="#">Kontakta oss</scb-link>
+          <scb-link href="#">Support</scb-link>
+        </scb-footer-section>
+      </scb-footer>
+      {/* BASIC_TEMPLATE_REACT_END */}
+    </>
+  );
+}

package/starters/react/src/main.jsx ADDED Viewed

@@ -0,0 +1,29 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import '__SCB_WC_PACKAGE_NAME__/scb-wc.css';
+import '__SCB_WC_PACKAGE_NAME__/scb-typography.css';
+import '__SCB_WC_PACKAGE_NAME__/scb-header';
+import '__SCB_WC_PACKAGE_NAME__/scb-header/scb-header-tab';
+import '__SCB_WC_PACKAGE_NAME__/scb-header/scb-header-utility';
+import '__SCB_WC_PACKAGE_NAME__/scb-footer';
+import '__SCB_WC_PACKAGE_NAME__/scb-footer/scb-footer-section';
+import '__SCB_WC_PACKAGE_NAME__/scb-link';
+import '__SCB_WC_PACKAGE_NAME__/scb-grid';
+import '__SCB_WC_PACKAGE_NAME__/scb-grid/scb-grid-item';
+import '__SCB_WC_PACKAGE_NAME__/scb-button';
+import '__SCB_WC_PACKAGE_NAME__/scb-card';
+import '__SCB_WC_PACKAGE_NAME__/scb-list';
+import '__SCB_WC_PACKAGE_NAME__/scb-list/scb-list-item';
+import '__SCB_WC_PACKAGE_NAME__/scb-checkbox';
+import '__SCB_WC_PACKAGE_NAME__/scb-select';
+import '__SCB_WC_PACKAGE_NAME__/scb-select/scb-select-option';
+import '__SCB_WC_PACKAGE_NAME__/scb-textfield';
+import '__SCB_WC_PACKAGE_NAME__/scb-accordion';
+import '__SCB_WC_PACKAGE_NAME__/scb-accordion/scb-accordion-item';
+import App from './App.jsx';
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/starters/react/vite.config.js ADDED Viewed

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+export default defineConfig({
+  plugins: [react()],
+});

package/mvc/components/scb-vignette/scb-vignette.js DELETED Viewed

@@ -1,37 +0,0 @@
-import{_ as l,b as v,g as d,h as n,y as b}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as s}from"../../vendor/decorate.js";(function(){try{var c=typeof globalThis<"u"?globalThis:window;if(!c.__scb_ce_guard_installed__){c.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(e,o,a){try{customElements.get(e)||t(e,o,a)}catch(g){var r=String(g||"");if(r.indexOf("already been used")===-1&&r.indexOf("NotSupportedError")===-1)throw g}}}}catch{}})();var p,i=(p=class extends l{constructor(...t){super(...t),this.label="",this.variant="outline",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0}updated(t){super.updated(t),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&this.applySpacing()}mapSpacingToken(t){if(!t)return;const e=String(t).trim();if(e)return/^\d+$/.test(e)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(e,10)))})`:e}applySpacing(){const t=this.mapSpacingToken(this.spacing),e=this.mapSpacingToken(this.spacingTop)??t,o=this.mapSpacingToken(this.spacingBottom)??t,a=this.mapSpacingToken(this.spacingLeft),r=this.mapSpacingToken(this.spacingRight);e?this.style.setProperty("--scb-vignette-spacing-block-start",e):this.style.removeProperty("--scb-vignette-spacing-block-start"),o?this.style.setProperty("--scb-vignette-spacing-block-end",o):this.style.removeProperty("--scb-vignette-spacing-block-end"),a?this.style.setProperty("--scb-vignette-spacing-inline-start",a):this.style.removeProperty("--scb-vignette-spacing-inline-start"),r?this.style.setProperty("--scb-vignette-spacing-inline-end",r):this.style.removeProperty("--scb-vignette-spacing-inline-end")}render(){return b`
-      <div class="vignette">
-        <p>${this.label}</p>
-      </div>
-    `}},p.styles=v`
-    :host {
-      display: block;
-      margin-block-start: var(--scb-vignette-spacing-block-start, 0);
-      margin-block-end: var(--scb-vignette-spacing-block-end, 0);
-      margin-inline-start: var(--scb-vignette-spacing-inline-start, 0);
-      margin-inline-end: var(--scb-vignette-spacing-inline-end, 0);
-    }
-    .vignette {
-      --scb-vignette-color: var(--md-sys-color-on-surface, #0F0865);
-      padding: 3px 11px;
-      border-radius: 8px;
-      border: 1px solid var(--md-sys-color-outline);
-      width: fit-content;
-      color: var(--md-sys-color-on-surface);
-    }
-    :host([variant='filled']) .vignette {
-      background: color-mix(in srgb, var(--scb-vignette-color) 8%, transparent);
-      border: none;
-      color: var(--scb-vignette-color);
-    }
-    .vignette p {
-      font-size: 14px;
-      font-style: normal;
-      font-weight: 550;
-      line-height: 22px;
-      margin: 0;
-      color: var(--md-sys-color-on-surface);
-    }
-  `,p);s([n({type:String})],i.prototype,"label",void 0);s([n({type:String,reflect:!0})],i.prototype,"variant",void 0);s([n({type:String,reflect:!0})],i.prototype,"spacing",void 0);s([n({type:String,attribute:"spacing-top",reflect:!0})],i.prototype,"spacingTop",void 0);s([n({type:String,attribute:"spacing-bottom",reflect:!0})],i.prototype,"spacingBottom",void 0);s([n({type:String,attribute:"spacing-left",reflect:!0})],i.prototype,"spacingLeft",void 0);s([n({type:String,attribute:"spacing-right",reflect:!0})],i.prototype,"spacingRight",void 0);i=s([d("scb-vignette")],i);