fds-vue-core 2.1.4 → 2.1.6

package/src/main.ts

@@ -0,0 +1,7 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import './style.css'
+
+// Create and mount the Vue app
+const app = createApp(App)
+app.mount('#app')

package/src/slot-styles.css

@@ -0,0 +1,93 @@
+@import './tokens.css';
+
+/* Hide native clear button on search inputs */
+input[type='search']::-webkit-search-cancel-button {
+  display: none;
+}
+
+input[type='search']::-ms-clear {
+  display: none;
+}
+
+/* Styling FdsTable component */
+.fds-table-wrapper--bordered {
+  border: 1px solid var(--color-gray-100);
+  border-radius: var(--radius-lg);
+}
+
+/* Compact styling */
+.fds-table-wrapper.fds-table-wrapper--compact td,
+.fds-table-wrapper.fds-table-wrapper--compact th:not(.fds-table-head) {
+  padding: 0.5rem;
+}
+
+/* Base styles - works in both Vue scoped and standalone CSS */
+.fds-table-wrapper {
+  border-radius: var(--radius-lg);
+  overflow-x: auto;
+}
+
+/* Table styling - vanilla CSS version (for consuming repos) */
+.fds-table-wrapper table {
+  min-width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+.fds-table-wrapper thead {
+  background-color: var(--color-blue_t-100);
+}
+
+.fds-table-wrapper thead tr:first-child th:first-child {
+  border-radius: var(--radius-lg) 0 0 0;
+}
+
+.fds-table-wrapper thead tr:first-child th:last-child {
+  border-radius: 0 var(--radius-lg) 0 0;
+}
+
+.fds-table-wrapper tbody {
+  background-color: var(--color-white);
+}
+
+.fds-table-wrapper tbody tr {
+  border-bottom: 1px solid var(--color-blue-100);
+}
+
+.fds-table-wrapper tbody tr:last-child {
+  border-bottom: none;
+}
+
+.fds-table-wrapper td,
+.fds-table-wrapper th:not(.fds-table-head) {
+  padding: 1rem;
+}
+
+.fds-table-wrapper td,
+.fds-table-wrapper th {
+  text-align: left;
+  vertical-align: top;
+  white-space: normal;
+}
+
+/* Remove margin from last child */
+.mb-0-last-child > *:last-child {
+  margin-bottom: 0 !important;
+}
+
+/* Styling links in default slot of FdsBlockAlert */
+.fds-block-alert-slot .link {
+  @apply text-gray-900;
+}
+
+/* Styling FdsModal component */
+@media screen and (max-width: 480px) {
+  .fds-modal__inner {
+    width: calc(100% - 2rem);
+  }
+}
+
+/* Styling FdsTabsItem component */
+.fds-tabs-item--disabled {
+  @apply cursor-not-allowed pointer-events-none opacity-35 select-none;
+}

package/src/style.css

@@ -0,0 +1,89 @@
+/* Importera tokens från tokens.css - alla design tokens definieras där */
+@import './tokens.css';
+@import 'tailwindcss';
+
+@layer base {
+  html,
+  body,
+  #app {
+    font-family: var(--font-main);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+}
+
+@layer components {
+  h1,
+  .h1 {
+    @apply font-heading text-2xl sm:text-4xl lg:text-6xl font-extrabold mb-3 mt-0;
+  }
+  h2,
+  .h2 {
+    @apply font-heading text-xl sm:text-3xl font-extrabold mt-4 mb-2;
+  }
+  .h2--small {
+    @apply font-heading text-xl font-extrabold mt-4 mb-2;
+  }
+
+  h3,
+  .h3 {
+    @apply font-heading text-xl font-extrabold mt-4 mb-2;
+  }
+
+  .h3--small {
+    @apply font-heading text-lg font-extrabold mt-4 mb-2;
+  }
+  h1:focus,
+  h2:focus,
+  h3:focus {
+    @apply focus:outline-0;
+  }
+  .label {
+    @apply font-bold mb-2 tracking-wide;
+  }
+  p {
+    @apply mb-4;
+  }
+  li:not(:last-child) {
+    @apply mb-2;
+  }
+  .link,
+  .html a {
+    @apply text-blue-600 hover:text-blue-700 active:text-blue-800 underline focus-visible:outline-dashed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-blue-500;
+  }
+
+  .capitalize-first::first-letter {
+    text-transform: uppercase;
+  }
+}
+
+@layer utilities {
+  /** Override browser background color when autocomplete field */
+  input:not(input[type='checkbox'], input[type='radio']),
+  textarea {
+    box-shadow: 0 0 0 1000px #fff inset !important;
+  }
+  /** Style active router link in main nav */
+  .nav-items .router-link-active {
+    @apply bg-blue-100 text-blue-700 font-bold;
+  }
+
+  #navMenu select {
+    @apply focus-visible:outline-dashed focus-visible:outline-2! focus-visible:outline-offset-4! focus-visible:outline-white-solid! focus:border-transparent!;
+  }
+
+  fds-button.fds-button--primary .fds-button__el,
+  fds-button.fds-button--secondary .fds-button__el {
+    @apply md:min-w-[120px]!;
+  }
+
+  /* Reverse spin utility for spinners */
+  @keyframes spin-reverse {
+    to {
+      transform: rotate(-360deg);
+    }
+  }
+  .animate-spin-reverse {
+    animation: spin-reverse 1s linear infinite;
+  }
+}

package/src/tokens.css

@@ -0,0 +1,252 @@
+/* Tailwind CSS v4 @theme - alla tokens för att fungera som Tailwind utilities */
+@theme {
+  --font-main: 'IBM-Plex-Sans', 'Arial', sans-serif;
+  --font-heading: 'Raleway', 'Arial', sans-serif;
+
+  --breakpoint-2xs: 320px;
+  --breakpoint-xs: 360px;
+  --breakpoint-sm: 480px;
+  --breakpoint-md: 588px;
+  --breakpoint-lg: 824px;
+  --breakpoint-xl: 920px;
+  --breakpoint-2xl: 964px;
+  --breakpoint-3xl: 1068px;
+  --breakpoint-4xl: 1268px;
+  --breakpoint-5xl: 1436px;
+
+  --color-blue-100: #ebf4ff;
+  --color-blue-200: #c7e4fd;
+  --color-blue-300: #9acbfe;
+  --color-blue-400: #71abf5;
+  --color-blue-500: #3b87dd;
+  --color-blue-600: #1d69c2;
+  --color-blue-700: #0c4899;
+  --color-blue-800: #0f3164;
+  --color-blue-900: #051a3b;
+
+  --color-red-100: #ffefef;
+  --color-red-200: #fed7d5;
+  --color-red-300: #feb3b0;
+  --color-red-400: #fd857e;
+  --color-red-500: #fd4c43;
+  --color-red-600: #e31c0d;
+  --color-red-700: #a41107;
+  --color-red-800: #750a03;
+  --color-red-900: #3e0301;
+
+  --color-gray-100: rgba(0, 0, 0, 0.0475);
+  --color-gray-200: rgba(0, 0, 0, 0.12);
+  --color-gray-300: rgba(0, 0, 0, 0.225);
+  --color-gray-400: rgba(0, 0, 0, 0.34);
+  --color-gray-500: rgba(0, 0, 0, 0.4625);
+  --color-gray-600: rgba(0, 0, 0, 0.59);
+  --color-gray-700: rgba(0, 0, 0, 0.7);
+  --color-gray-800: rgba(0, 0, 0, 0.795);
+  --color-gray-900: rgba(0, 0, 0, 0.895);
+
+  --color-white-100: rgba(255, 255, 255, 0.0475);
+  --color-white-200: rgba(255, 255, 255, 0.12);
+  --color-white-300: rgba(255, 255, 255, 0.225);
+  --color-white-400: rgba(255, 255, 255, 0.34);
+  --color-white-500: rgba(255, 255, 255, 0.4625);
+  --color-white-600: rgba(255, 255, 255, 0.59);
+  --color-white-700: rgba(255, 255, 255, 0.7);
+  --color-white-800: rgba(255, 255, 255, 0.795);
+  --color-white-900: rgba(255, 255, 255, 0.895);
+  --color-white-solid: #fff;
+
+  --color-yellow-100: #fff2c6;
+  --color-yellow-200: #ffe385;
+  --color-yellow-300: #ffd04a;
+  --color-yellow-400: #ffba20;
+  --color-yellow-500: #f99807;
+  --color-yellow-600: #d96f02;
+  --color-yellow-700: #b74e06;
+  --color-yellow-800: #943b0c;
+  --color-yellow-900: #7a310d;
+
+  --color-green-100: #e6facd;
+  --color-green-200: #cff5a1;
+  --color-green-300: #aeeb6b;
+  --color-green-400: #90dd3e;
+  --color-green-500: #70c31f;
+  --color-green-600: #559c14;
+  --color-green-700: #417714;
+  --color-green-800: #375e16;
+  --color-green-900: #305017;
+
+  --color-blue_t-100: rgba(12, 72, 153, 0.0475);
+  --color-blue_t-200: rgba(12, 72, 153, 0.12);
+  --color-blue_t-300: rgba(12, 72, 153, 0.225);
+
+  --text-6xl: 2rem;
+  --text-5xl: 1.75rem;
+  --text-4xl: 1.625rem;
+  --text-3xl: 1.5rem;
+  --text-2xl: 1.375rem;
+  --text-xl: 1.25rem;
+  --text-lg: 1.125rem;
+  --text-base: 1rem;
+
+  --drop-shadow-xl: 0 16px 32px rgba(12, 72, 153, 0.12);
+  --drop-shadow-lg: 0 12px 24px rgba(12, 72, 153, 0.12);
+  --drop-shadow-md: 0 8px 16px rgba(12, 72, 153, 0.12);
+  --drop-shadow-sm: 0 4px 8px rgba(12, 72, 153, 0.12);
+  --drop-shadow-xs: 0 2px 4px rgba(12, 72, 153, 0.12);
+
+  --shadow-xl: 0 16px 32px rgba(12, 72, 153, 0.12);
+  --shadow-lg: 0 12px 24px rgba(12, 72, 153, 0.12);
+  --shadow-md: 0 8px 16px rgba(12, 72, 153, 0.12);
+  --shadow-sm: 0 4px 8px rgba(12, 72, 153, 0.12);
+  --shadow-xs: 0 2px 4px rgba(12, 72, 153, 0.12);
+
+  --radius-full: 9999px;
+  --radius-3xl: 2rem;
+  --radius-2xl: 1rem;
+  --radius-xl: 0.75rem;
+  --radius-lg: 0.5rem;
+  --radius-md: 0.25rem;
+  --radius-sm: 0.125rem;
+  --radius-none: 0;
+
+  --tracking-wide: 0.002em;
+  --tracking-normal: 0;
+  --tracking-tight: -0.005em;
+
+  --spacing-lg: 1.5;
+  --spacing-md: 1.335;
+  --spacing-sm: 1.2;
+}
+
+/* CSS-variabler för tokens - kan användas direkt i CSS (bakåtkompatibilitet) */
+:root,
+:host {
+  --font-main: 'IBM-Plex-Sans', 'Arial', sans-serif;
+  --font-heading: 'Raleway', 'Arial', sans-serif;
+
+  /* Breakpoints som CSS-variabler */
+  --breakpoint-2xs: 320px;
+  --breakpoint-xs: 360px;
+  --breakpoint-sm: 480px;
+  --breakpoint-md: 588px;
+  --breakpoint-lg: 824px;
+  --breakpoint-xl: 920px;
+  --breakpoint-2xl: 964px;
+  --breakpoint-3xl: 1068px;
+  --breakpoint-4xl: 1268px;
+  --breakpoint-5xl: 1436px;
+
+  /* Colors */
+  --color-blue-100: #ebf4ff;
+  --color-blue-200: #c7e4fd;
+  --color-blue-300: #9acbfe;
+  --color-blue-400: #71abf5;
+  --color-blue-500: #3b87dd;
+  --color-blue-600: #1d69c2;
+  --color-blue-700: #0c4899;
+  --color-blue-800: #0f3164;
+  --color-blue-900: #051a3b;
+
+  --color-red-100: #ffefef;
+  --color-red-200: #fed7d5;
+  --color-red-300: #feb3b0;
+  --color-red-400: #fd857e;
+  --color-red-500: #fd4c43;
+  --color-red-600: #e31c0d;
+  --color-red-700: #a41107;
+  --color-red-800: #750a03;
+  --color-red-900: #3e0301;
+
+  --color-gray-100: rgba(0, 0, 0, 0.0475);
+  --color-gray-200: rgba(0, 0, 0, 0.12);
+  --color-gray-300: rgba(0, 0, 0, 0.225);
+  --color-gray-400: rgba(0, 0, 0, 0.34);
+  --color-gray-500: rgba(0, 0, 0, 0.4625);
+  --color-gray-600: rgba(0, 0, 0, 0.59);
+  --color-gray-700: rgba(0, 0, 0, 0.7);
+  --color-gray-800: rgba(0, 0, 0, 0.795);
+  --color-gray-900: rgba(0, 0, 0, 0.895);
+
+  --color-white-100: rgba(255, 255, 255, 0.0475);
+  --color-white-200: rgba(255, 255, 255, 0.12);
+  --color-white-300: rgba(255, 255, 255, 0.225);
+  --color-white-400: rgba(255, 255, 255, 0.34);
+  --color-white-500: rgba(255, 255, 255, 0.4625);
+  --color-white-600: rgba(255, 255, 255, 0.59);
+  --color-white-700: rgba(255, 255, 255, 0.7);
+  --color-white-800: rgba(255, 255, 255, 0.795);
+  --color-white-900: rgba(255, 255, 255, 0.895);
+  --color-white-solid: #fff;
+
+  --color-yellow-100: #fff2c6;
+  --color-yellow-200: #ffe385;
+  --color-yellow-300: #ffd04a;
+  --color-yellow-400: #ffba20;
+  --color-yellow-500: #f99807;
+  --color-yellow-600: #d96f02;
+  --color-yellow-700: #b74e06;
+  --color-yellow-800: #943b0c;
+  --color-yellow-900: #7a310d;
+
+  --color-green-100: #e6facd;
+  --color-green-200: #cff5a1;
+  --color-green-300: #aeeb6b;
+  --color-green-400: #90dd3e;
+  --color-green-500: #70c31f;
+  --color-green-600: #559c14;
+  --color-green-700: #417714;
+  --color-green-800: #375e16;
+  --color-green-900: #305017;
+
+  --color-blue_t-100: rgba(12, 72, 153, 0.0475);
+  --color-blue_t-200: rgba(12, 72, 153, 0.12);
+  --color-blue_t-300: rgba(12, 72, 153, 0.225);
+
+  /* Typography */
+  --text-6xl: 2rem;
+  --text-5xl: 1.75rem;
+  --text-4xl: 1.625rem;
+  --text-3xl: 1.5rem;
+  --text-2xl: 1.375rem;
+  --text-xl: 1.25rem;
+  --text-lg: 1.125rem;
+  --text-base: 1rem;
+
+  /* Shadows */
+  --drop-shadow-xl: 0 16px 32px rgba(12, 72, 153, 0.12);
+  --drop-shadow-lg: 0 12px 24px rgba(12, 72, 153, 0.12);
+  --drop-shadow-md: 0 8px 16px rgba(12, 72, 153, 0.12);
+  --drop-shadow-sm: 0 4px 8px rgba(12, 72, 153, 0.12);
+  --drop-shadow-xs: 0 2px 4px rgba(12, 72, 153, 0.12);
+
+  --shadow-xl: 0 16px 32px rgba(12, 72, 153, 0.12);
+  --shadow-lg: 0 12px 24px rgba(12, 72, 153, 0.12);
+  --shadow-md: 0 8px 16px rgba(12, 72, 153, 0.12);
+  --shadow-sm: 0 4px 8px rgba(12, 72, 153, 0.12);
+  --shadow-xs: 0 2px 4px rgba(12, 72, 153, 0.12);
+
+  /* Border radius */
+  --radius-full: 9999px;
+  --radius-3xl: 2rem;
+  --radius-2xl: 1rem;
+  --radius-xl: 0.75rem;
+  --radius-lg: 0.5rem;
+  --radius-md: 0.25rem;
+  --radius-sm: 0.125rem;
+  --radius-none: 0;
+
+  /* Letter spacing */
+  --tracking-wide: 0.002em;
+  --tracking-normal: 0;
+  --tracking-tight: -0.005em;
+
+  /* Spacing */
+  --spacing-lg: 1.5;
+  --spacing-md: 1.335;
+  --spacing-sm: 1.2;
+}
+
+/* Styling links in default slot of FdsBlockAlert */
+.alert-content .link {
+  @apply text-gray-900;
+}

package/dist/index.d.ts

@@ -1,2 +0,0 @@
-import './global-components'
-export {}