@bagelink/vue 1.15.360 → 1.15.362

package/src/components/lightbox/Lightbox.vue

@@ -255,12 +255,12 @@ transform: scale(0.95);
 }
 
 /* Adjust swiper navigation positioning */
-.bgl-lightbox-swiper :deep(.swi-ctrl) {
+.bgl-lightbox-swiper .swi-ctrl {
 padding: 0 1.5rem !important;
 }
 
 @media screen and (max-width: 900px) {
-.bgl-lightbox-swiper :deep(.swi-ctrl) {
+.bgl-lightbox-swiper .swi-ctrl {
 	padding: 0 1rem !important;
 }
 

package/src/form-flow/structure.ts

@@ -44,6 +44,8 @@ export interface FormStep {
 
 /** A directed edge between two steps with an optional SCIM condition. */
 export interface StepEdge {
+	/** Stable authoring key used to address localized presentation. */
+	key?: string | null
 	from: string
 	to: string
 	/** SCIM 2.0 filter over accumulated form data. Empty/undefined => always taken. */

package/src/styles/bagel.css

@@ -1,156 +1,5 @@
-/* No CSS cascade layers: the library relies on source order + `!important` on
-   utilities. Import order below is the priority order (later wins for equal
-   specificity). Consumers override plain utilities with normal CSS, and
-   override `!important` utilities by adding their own `!important`. */
-
-/* Icon fonts — must load via the main stylesheet (not only inside Icon.vue's
-   <style>), otherwise in Vite dev mode the @import is injected after other
-   rules and the browser ignores it, so Material/Font Awesome icons render as
-   raw ligature text. Keep these first so the @import rules stay valid. */
-/* Pin unused axes (opsz/GRAD); keep wght+FILL ranges the Icon component animates.
- * Shrinks the ~3.8MB full variable font — the page's biggest asset. */
-@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,100..700,0..1,0');
-@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css');
-
-/* Tokens — lowest priority, only custom properties */
-@import "theme.css";
-@import "dark.css";
-@import "./fonts/Ploni.css";
-
-/* Base / component styles (plain — utilities with !important win over these) */
-@import "inputs.css";
-@import "input-variants.css";
-@import "buttons.css";
-@import "scrollbar.css";
-@import "transitions.css";
-@import "motion.css";
-@import "loginCard.css";
-@import "app-layout.css";
-
-/* Utilities — highest priority (carry !important) */
-@import "base-colors.css";
-@import "layout.css";
-@import "mobilLayout.css";
-@import "xlLayout.css";
-@import "text.css";
-@import "colors.css";
-@import "mobileColors.css";
-@import "appearance.css";
-@import "gradients.css";
-@import "color-variants.css";
-
-/* Icon font-family bindings — mirrored from Icon.vue so icons work even when
-   that component's injected <style> is not yet present (e.g. Vite dev mode). */
-.bgl_icon-font {
-    font-family: 'Material Symbols Outlined', serif !important;
-}
-
-.bgl_icon-font.fa {
-    font-family: 'Font Awesome 6 Free', serif !important;
-}
-
-.bgl_icon-font.fa-brands {
-    font-family: 'Font Awesome 6 Brands', serif !important;
-}
-
-.bgl_icon-font.bgl_icon-round {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-    aspect-ratio: 1;
-    border-radius: 1000px;
-    line-height: 1;
-    box-sizing: border-box;
-}
-
-/* Reset / base element styles */
-:root {
-    --bgl-transition-ease: cubic-bezier(0.1, 0.5, 0.33, 1);
-    --bgl-transition-ease-in: cubic-bezier(0.1, 0.5, 0.33, 1);
-}
-
-.grid>* {
-    min-height: 0;
-}
-
-* {
-    box-sizing: border-box;
-}
-
-html {
-    text-size-adjust: 100%;
-    height: 100%;
-    background-attachment: scroll;
-}
-
-body {
-    margin: 0;
-    min-height: 100%;
-    background-color: var(--bgl-bg);
-    font-family: var(--bgl-font);
-    font-size: var(--bgl-font-size);
-    font-weight: 400;
-    line-height: 1.65;
-    width: auto;
-    height: auto;
-    color: var(--bgl-text-color);
-}
-
-a {
-    background-color: transparent;
-    cursor: pointer;
-    display: inline-block;
-    color: inherit;
-}
-
-a:active,
-a:hover {
-    outline: 0;
-}
-
-b,
-strong {
-    font-weight: bold;
-}
-
-hr {
-    box-sizing: content-box;
-}
-
-img,
-video,
-canvas,
-audio,
-iframe,
-embed,
-object {
-    max-width: 100%;
-    vertical-align: middle;
-    border: 0;
-}
-
-input,
-button,
-textarea,
-select {
-    font: inherit;
-}
-
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-    border: 0;
-    padding: 0;
-}
-
-@media screen and (max-width: 910px) {
-    body {
-        min-height: 100vh;
-        min-height: -webkit-fill-available;
-        height: -webkit-fill-available;
-    }
-
-    html {
-        height: -webkit-fill-available;
-    }
-}
+/* Backward-compatible full/admin stylesheet.
+   New public websites should import `@bagelink/vue/styles/core.css`.
+   Admin applications should import `@bagelink/vue/style.css`. */
+@import "core.css";
+@import "./fonts/admin.css";

package/vite.config.ts

@@ -1,12 +1,44 @@
 import { resolve } from 'node:path'
 // import { fileURLToPath, URL } from 'node:url'
 import vue from '@vitejs/plugin-vue'
-import { defineConfig } from 'vite'
+import { defineConfig, type Plugin } from 'vite'
 import dts from 'vite-plugin-dts'
 import tsconfigPaths from 'vite-tsconfig-paths'
 
 const indexDir = resolve(import.meta.dirname, 'src')
 
+function composeCssEntries(): Plugin {
+	return {
+		name: 'bagelink-compose-css-entries',
+		enforce: 'post',
+		generateBundle(_, bundle) {
+			const css = (fileName: string) => {
+				const asset = Object.values(bundle).find(
+					item => item.type === 'asset' && item.fileName === fileName,
+				)
+				if (!asset || asset.type !== 'asset')
+					throw new Error(`Missing CSS build artifact: ${fileName}`)
+				return typeof asset.source === 'string'
+					? asset.source
+					: new TextDecoder().decode(asset.source)
+			}
+
+			const components = css('index.css')
+			const core = css('core.css')
+			const adminFonts = css('admin.css')
+			const coreAsset = bundle['core.css']
+			const styleAsset = bundle['style.css']
+
+			if (coreAsset?.type !== 'asset' || styleAsset?.type !== 'asset')
+				throw new Error('Missing public CSS entry artifacts')
+
+			// Component styles load first; core utilities intentionally load last.
+			coreAsset.source = `${components}\n${core}`
+			styleAsset.source = `${components}\n${core}\n${adminFonts}`
+		},
+	}
+}
+
 export default defineConfig({
 	plugins: [
 		tsconfigPaths({ root: indexDir, }),
@@ -15,6 +47,7 @@ export default defineConfig({
 			entryRoot: indexDir,
 			copyDtsFiles: true,
 		}),
+		composeCssEntries(),
 	],
 	resolve: {
 		alias: {
@@ -31,12 +64,15 @@ export default defineConfig({
 		lib: {
 			entry: {
 				index: resolve(indexDir, 'index.ts'),
-				style: resolve(indexDir, 'style.ts'),
+				style: resolve(indexDir, 'styles/bagel.css'),
+				core: resolve(indexDir, 'styles/core.css'),
+				'fonts/admin': resolve(indexDir, 'styles/fonts/admin.css'),
+				'fonts/ploni': resolve(indexDir, 'styles/fonts/Ploni.css'),
 			},
 			formats: ['es', 'cjs'],
 			fileName: (module, entry) => `${entry}.${module === 'es' ? 'mjs' : module}`,
-			cssFileName: 'style',
 		},
+		cssCodeSplit: true,
 		rollupOptions: {
 			// external modules won't be bundled into your library
 			external: ['vue', 'vue-router', 'fsevents'], // not every external has a global

package/dist/style.cjs

@@ -1 +0,0 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});

package/dist/style.d.ts

@@ -1 +0,0 @@
-//# sourceMappingURL=style.d.ts.map

package/dist/style.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../src/style.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAA"}

package/src/style.ts

@@ -1 +0,0 @@
-import './styles/bagel.css'