├── .browserslistrc ├── .changeset ├── README.md └── config.json ├── .eslintignore ├── .eslintrc.json ├── .github ├── ISSUE_TEMPLATE │ ├── a11y_report.md │ ├── bug_report.md │ ├── component_request.md │ └── feature_request.md ├── pull_request_template.md └── workflows │ ├── build.yml │ └── dependencies.yml ├── .gitignore ├── .gitpod.Dockerfile ├── .gitpod.yml ├── .husky ├── commit-msg ├── pre-commit └── prepare-commit-msg ├── .huskyrc ├── .lintstagedrc ├── .nvmrc ├── .prettierignore ├── .prettierrc.json ├── .releaserc ├── .storybook ├── main.js ├── preview.js ├── storybook-styles.css └── storybook.css ├── .yarn └── releases │ └── yarn-1.22.19.cjs ├── .yarnrc.yml ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── ENVIRONMENTS.md ├── LICENSE.md ├── README.md ├── commitlint.config.js ├── lefthook.yml ├── outline.config.js ├── outline.theme.css ├── package.json ├── packages ├── README.md ├── components │ ├── README.md │ ├── outline-core-accordion │ │ ├── docs │ │ │ └── outline-core-accordion.mdx │ │ ├── index.ts │ │ ├── package.json │ │ ├── src │ │ │ ├── config.ts │ │ │ ├── outline-core-accordion.css │ │ │ └── outline-core-accordion.ts │ │ └── tsconfig.build.json │ ├── outline-core-alert │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── docs │ │ │ └── outline-core-alert.mdx │ │ ├── index.html │ │ ├── index.ts │ │ ├── package.json │ │ ├── src │ │ │ ├── component.d.ts │ │ │ ├── config.ts │ │ │ ├── outline-core-alert.ts │ │ │ └── style │ │ │ │ ├── outline-core-alert.encapsulated.css │ │ │ │ ├── outline-core-alert.global.css │ │ │ │ └── outline-core-alert.vars.css │ │ ├── tsconfig.build.json │ │ └── vite.config.js │ ├── outline-core-breadcrumb │ │ ├── docs │ │ │ └── outline-core-breadcrumb.mdx │ │ ├── index.ts │ │ ├── package.json │ │ ├── src │ │ │ ├── config.ts │ │ │ ├── outline-core-breadcrumb.css │ │ │ └── outline-core-breadcrumb.ts │ │ └── tsconfig.build.json │ ├── outline-core-button │ │ ├── CHANGELOG.md │ │ ├── index.ts │ │ ├── package.json │ │ └── tsconfig.build.json │ ├── outline-core-card │ │ ├── docs │ │ │ └── outline-core-card.mdx │ │ ├── index.ts │ │ ├── package.json │ │ ├── src │ │ │ ├── config.ts │ │ │ ├── outline-core-card.css │ │ │ └── outline-core-card.ts │ │ └── tsconfig.build.json │ ├── outline-core-container │ │ ├── docs │ │ │ └── outline-core-container.mdx │ │ ├── index.ts │ │ ├── package.json │ │ ├── src │ │ │ ├── config.ts │ │ │ ├── outline-core-container.css │ │ │ └── outline-core-container.ts │ │ └── tsconfig.build.json │ ├── outline-core-form │ │ ├── docs │ │ │ └── outline-core-form.mdx │ │ ├── index.ts │ │ ├── package.json │ │ ├── src │ │ │ ├── config.ts │ │ │ ├── outline-core-form.css │ │ │ └── outline-core-form.ts │ │ └── tsconfig.build.json │ ├── outline-core-icon │ │ ├── docs │ │ │ └── outline-core-icon.mdx │ │ ├── index.ts │ │ ├── package.json │ │ ├── src │ │ │ ├── config.ts │ │ │ ├── outline-core-icon.css │ │ │ └── outline-core-icon.ts │ │ └── tsconfig.build.json │ ├── outline-core-image │ │ ├── docs │ │ │ └── outline-core-image.mdx │ │ ├── index.ts │ │ ├── package.json │ │ ├── src │ │ │ ├── config.ts │ │ │ ├── outline-core-image.css │ │ │ └── outline-core-image.ts │ │ └── tsconfig.build.json │ ├── outline-core-link │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── docs │ │ │ └── outline-core-link.mdx │ │ ├── index.html │ │ ├── index.ts │ │ ├── package.json │ │ ├── src │ │ │ ├── component.d.ts │ │ │ ├── config.ts │ │ │ ├── outline-core-link.ts │ │ │ └── style │ │ │ │ ├── outline-core-link.encapsulated.css │ │ │ │ ├── outline-core-link.global.css │ │ │ │ └── outline-core-link.vars.css │ │ ├── tsconfig.build.json │ │ ├── vite.config.js │ │ └── yarn.lock │ ├── outline-core-list │ │ ├── docs │ │ │ └── outline-core-list.mdx │ │ ├── index.ts │ │ ├── package.json │ │ ├── src │ │ │ ├── config.ts │ │ │ ├── outline-core-list.css │ │ │ └── outline-core-list.ts │ │ └── tsconfig.build.json │ ├── outline-core-modal │ │ ├── docs │ │ │ └── outline-core-modal.mdx │ │ ├── index.ts │ │ ├── package.json │ │ ├── src │ │ │ ├── config.ts │ │ │ ├── outline-core-modal.css │ │ │ └── outline-core-modal.ts │ │ └── tsconfig.build.json │ ├── outline-core-text │ │ ├── docs │ │ │ └── outline-core-text.mdx │ │ ├── index.ts │ │ ├── package.json │ │ ├── src │ │ │ ├── config.ts │ │ │ ├── outline-core-text.css │ │ │ └── outline-core-text.ts │ │ └── tsconfig.build.json │ └── outline-core-youtube │ │ ├── docs │ │ └── outline-core-youtube.mdx │ │ ├── index.ts │ │ ├── package.json │ │ ├── src │ │ ├── config.ts │ │ ├── outline-core-youtube.css │ │ └── outline-core-youtube.ts │ │ └── tsconfig.build.json ├── controllers │ ├── README.md │ └── adopted-stylesheets │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── index.html │ │ ├── index.ts │ │ ├── package.json │ │ ├── src │ │ └── adopted-stylesheets.ts │ │ ├── tsconfig.build.json │ │ └── vite.config.js ├── documentation │ ├── README.md │ └── outline-docs │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── index.ts │ │ ├── package.json │ │ ├── src │ │ ├── guides │ │ │ ├── development │ │ │ │ ├── component-development │ │ │ │ │ ├── 00-main.mdx │ │ │ │ │ ├── 01-component-structure.mdx │ │ │ │ │ ├── 03-styles.mdx │ │ │ │ │ ├── 04-controllers.mdx │ │ │ │ │ ├── 05-render.mdx │ │ │ │ │ ├── 06-properties.mdx │ │ │ │ │ ├── 07-slots.mdx │ │ │ │ │ ├── 08-lifecycle-methods.mdx │ │ │ │ │ ├── 09-events.mdx │ │ │ │ │ ├── 10-utility-functions.mdx │ │ │ │ │ └── 11-extending.mdx │ │ │ │ └── tooling │ │ │ │ │ ├── 01-tooling.mdx │ │ │ │ │ ├── 02-helpful-commands.mdx │ │ │ │ │ ├── 03-conventional-commits.mdx │ │ │ │ │ ├── 04-production-builds.mdx │ │ │ │ │ └── 06-changesets.mdx │ │ │ └── welcome │ │ │ │ ├── 00-welcome.mdx │ │ │ │ └── more-information │ │ │ │ ├── 99-additional-resources.mdx │ │ │ │ └── 99-contributing.mdx │ │ └── tokens │ │ │ ├── colors.mdx │ │ │ ├── spacing.mdx │ │ │ └── typefaces.mdx │ │ └── tsconfig.build.json ├── outline-core │ ├── CHANGELOG.md │ ├── index.html │ ├── index.ts │ ├── package.json │ ├── src │ │ └── README.md │ ├── tsconfig.build.json │ └── vite.config.js └── tools │ ├── README.md │ ├── outline-config │ ├── CHANGELOG.md │ ├── commitlint.config.js │ ├── index.ts │ ├── outline.config.js │ ├── package.json │ ├── postcss.config.js │ ├── svgo.config.js │ ├── tailwind.config.js │ └── tsconfig.build.json │ └── outline-tokens │ ├── CHANGELOG.md │ ├── README.md │ ├── config.json │ ├── package.json │ ├── tokens │ ├── color │ │ ├── base.json │ │ └── tailwind.json │ ├── fonts │ │ └── base.json │ ├── screens │ │ └── base.json │ └── spacing │ │ └── base.json │ └── yarn.lock ├── postcss.config.js ├── scripts ├── build.js ├── bundle.js ├── clean.js └── styles.js ├── svgo.config.js ├── tailwind.config.js ├── tsconfig.build.json ├── tsconfig.json ├── turbo.json └── yarn.lock /.browserslistrc: -------------------------------------------------------------------------------- 1 | last 2 Chrome major versions 2 | last 2 Firefox major versions 3 | last 2 Edge major versions 4 | last 2 Safari major versions 5 | last 2 iOS major versions 6 | last 2 ChromeAndroid versions 7 | last 2 FirefoxAndroid versions 8 | last 2 Samsung versions 9 | Firefox ESR 10 | -------------------------------------------------------------------------------- /.changeset/README.md: -------------------------------------------------------------------------------- 1 | # Changesets 2 | 3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works 4 | with multi-package repos, or single-package repos to help you version and publish your code. You can 5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets) 6 | 7 | We have a quick list of common questions to get you started engaging with this project in 8 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md) 9 | -------------------------------------------------------------------------------- /.changeset/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/@changesets/config@2.2.0/schema.json", 3 | "changelog": "@changesets/cli/changelog", 4 | "commit": false, 5 | "fixed": [], 6 | "linked": [], 7 | "access": "restricted", 8 | "baseBranch": "next", 9 | "updateInternalDependencies": "patch", 10 | "ignore": [ 11 | "@phase2/outline-core-accordion", 12 | "@phase2/outline-core-breadcrumb", 13 | "@phase2/outline-core-card", 14 | "@phase2/outline-core-container", 15 | "@phase2/outline-core-form", 16 | "@phase2/outline-core-icon", 17 | "@phase2/outline-core-image", 18 | "@phase2/outline-core-list", 19 | "@phase2/outline-core-modal", 20 | "@phase2/outline-core-text", 21 | "@phase2/outline-core-youtube" 22 | ] 23 | } 24 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | # Directories 2 | .changeset/ 3 | .history/ 4 | .husky/ 5 | .github/ 6 | .turbo/ 7 | .vscode/ 8 | .yarn/ 9 | docs/ 10 | dist/ 11 | build/ 12 | node_modules/ 13 | storybook-static/ 14 | 15 | # File Patterns 16 | scripts/*.js 17 | packages/tools/outline-config/* 18 | # This handles .js configurations in the root dir. 19 | *.js 20 | 21 | # Specific Files 22 | 23 | # Other 24 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "parser": "@typescript-eslint/parser", 4 | "parserOptions": { 5 | "project": "./tsconfig.json", 6 | "sourceType": "module" 7 | }, 8 | "plugins": ["@typescript-eslint", "lit"], 9 | "extends": [ 10 | "eslint:recommended", 11 | "plugin:@typescript-eslint/recommended", 12 | "plugin:lit/recommended" 13 | ], 14 | "env": { 15 | "browser": true, 16 | "es2021": true 17 | }, 18 | "rules": { 19 | "@typescript-eslint/no-unused-vars": [ 20 | "warn", 21 | { 22 | "argsIgnorePattern": "^_" 23 | } 24 | ], 25 | "@typescript-eslint/no-explicit-any": "error", 26 | "lit/no-invalid-html": "error" 27 | }, 28 | "overrides": [ 29 | { 30 | "files": ["*.ts"], 31 | "rules": { 32 | "@typescript-eslint/explicit-module-boundary-types": "off" 33 | } 34 | }, 35 | { 36 | "files": ["*.js"], 37 | "rules": { 38 | "@typescript-eslint/no-var-requires": "off" 39 | } 40 | } 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/a11y_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Accessibility Issue 3 | about: Create a report to help us improve accessibility. 4 | title: "[A11Y]: " 5 | labels: ["Type: Accessibility", "Requires Triage"] 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the accessiblity issue** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 16 | 1. Go to '...' 17 | 2. Click on '....' 18 | 3. Scroll down to '....' 19 | 4. See error 20 | 21 | **Expected behavior** 22 | A clear and concise description of what you expected to happen. 23 | 24 | **Screenshots** 25 | If applicable, add screenshots to help explain your problem. 26 | 27 | **Additional context** 28 | Add any other context about the problem here. 29 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug Report 3 | about: Create a bug report to help us improve an individual component, or the platform in general. 4 | title: "[Bug]: " 5 | labels: ["Type: Bug", "Requires Triage"] 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 16 | 1. Go to '...' 17 | 2. Click on '....' 18 | 3. Scroll down to '....' 19 | 4. See error 20 | 21 | **Expected behavior** 22 | A clear and concise description of what you expected to happen. 23 | 24 | **Screenshots** 25 | If applicable, add screenshots to help explain your problem. 26 | 27 | **Additional context** 28 | Add any other context about the problem here. 29 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/component_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Component Suggestion 3 | about: Suggest an idea for a new core component to be included in Outline. 4 | title: '[Feature]: ' 5 | labels: ["Type: Component Suggestion", "Requires Triage"] 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Please describe the component you would like to see included.** 11 | A clear and concise description of what the component is, and what it accomplishes/adds to Outline. 12 | 13 | **Samples of similar components** 14 | Please provide links to other platforms or articles that may demonstrate how this component should be built/structured. 15 | 16 | **Additional context** 17 | Add any other context or screenshots about the feature request here. 18 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature Request 3 | about: Suggest an idea, improvement or new feature for this project. Not to be used for new component suggestions. 4 | title: '[Feature]: ' 5 | labels: ["Type: Feature Request", "Requires Triage"] 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] Please link to an existing issue when possible. 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | ## Description 2 | 3 | Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change. 4 | 5 | Fixes # (issue) 6 | 7 | ## Type of change 8 | 9 | Please delete options that are not relevant. 10 | 11 | - [ ] Bug fix (non-breaking change which fixes an issue) 12 | - [ ] New feature (non-breaking change which adds functionality) 13 | - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) 14 | - [ ] This change requires a documentation update 15 | 16 | ## How Has This Been Tested? 17 | 18 | Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration 19 | 20 | - [ ] Visual Testing 21 | - [ ] Automated Testing 22 | - [ ] Accessibility Testing 23 | 24 | ## Checklist 25 | 26 | - [ ] My code follows the style guidelines of this project 27 | - [ ] I have performed a self-review of my own code 28 | - [ ] I have commented my code, particularly in hard-to-understand areas 29 | - [ ] I have made corresponding changes to the documentation 30 | - [ ] My changes generate no new warnings 31 | - [ ] I have added tests that prove my fix is effective or that my feature works 32 | - [ ] New and existing unit tests pass locally with my changes 33 | - [ ] Any dependent changes have been merged and published in downstream modules 34 | -------------------------------------------------------------------------------- /.github/workflows/dependencies.yml: -------------------------------------------------------------------------------- 1 | # Dependency Review Action 2 | # 3 | # This Action will scan dependency manifest files that change as part of a Pull Request, surfacing known-vulnerable versions of the packages declared or updated in the PR. Once installed, if the workflow run is marked as required, PRs introducing known-vulnerable packages will be blocked from merging. 4 | # 5 | # Source repository: https://github.com/actions/dependency-review-action 6 | # Public documentation: https://docs.github.com/en/code-security/supply-chain-security/understanding-your-software-supply-chain/about-dependency-review#dependency-review-enforcement 7 | name: 'Dependency Review' 8 | on: 9 | # Which branches to test on pull request. 10 | pull_request: 11 | branches: 12 | - main 13 | - next 14 | - dev 15 | - alpha 16 | - beta 17 | - rc 18 | - /^issue/ 19 | - /^task/ 20 | - /^feature/ 21 | - /^bug/ 22 | - /^test/ 23 | 24 | permissions: 25 | contents: read 26 | 27 | jobs: 28 | dependency-review: 29 | runs-on: ubuntu-latest 30 | steps: 31 | - name: 'Checkout Repository' 32 | uses: actions/checkout@v3 33 | 34 | - name: 'Dependency Review' 35 | uses: actions/dependency-review-action@v2 36 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Security related 2 | .aws 3 | .npmrc 4 | 5 | # General 6 | .env-local 7 | .hidden 8 | *~ 9 | *.sw[mnpcod] 10 | *.log 11 | *.tmp 12 | *.tmp.* 13 | log.txt 14 | 15 | # Yarn files 16 | .pnp.* 17 | .yarnrc.yml 18 | .yarn/* 19 | !.yarn/patches 20 | !.yarn/plugins 21 | !.yarn/releases 22 | !.yarn/sdks 23 | !.yarn/versions 24 | 25 | ## Types & Maps 26 | *.d.ts 27 | !component.d.ts 28 | *.d.ts.map 29 | *.js.map 30 | *.map 31 | *.map.* 32 | 33 | # Generated files 34 | dist/ 35 | *.lit.js 36 | dibuildst/** 37 | .next/** 38 | *.tsbuildinfo 39 | 40 | # Editor related 41 | .history/ 42 | .idea/ 43 | .vscode/ 44 | .sass-cache/ 45 | .versions/ 46 | *.sublime-project 47 | *.sublime-workspace 48 | 49 | # OS Files 50 | $RECYCLE.BIN/ 51 | .DS_Store 52 | Thumbs.db 53 | UserInterfaceState.xcuserstate 54 | 55 | # Tooling specific 56 | storybook-static/ 57 | node_modules/ 58 | 59 | # Other 60 | mutagen.yml.lock 61 | www/ 62 | .turbo 63 | .turbo-cookie 64 | 65 | # Outline specific 66 | custom-elements.json 67 | component-list.json 68 | resolved-outline-config.ts 69 | resolved-tailwind-config.ts 70 | safelist.txt 71 | *.lit.ts 72 | *.generated.css 73 | -------------------------------------------------------------------------------- /.gitpod.Dockerfile: -------------------------------------------------------------------------------- 1 | FROM gitpod/workspace-node-lts 2 | 3 | RUN sudo apt-get -qq update 4 | RUN sudo apt-get -qq install -y rsync 5 | 6 | # Install Playwright deps 7 | RUN npx playwright install-deps 8 | RUN npx playwright install 9 | -------------------------------------------------------------------------------- /.gitpod.yml: -------------------------------------------------------------------------------- 1 | image: 2 | file: .gitpod.Dockerfile 3 | 4 | tasks: 5 | - init: | 6 | nvm install 7 | yarn 8 | command: | 9 | yarn start 10 | 11 | vscode: 12 | extensions: 13 | - bradlc.vscode-tailwindcss 14 | - pranaygp.vscode-css-peek 15 | - runem.lit-plugin 16 | - unifiedjs.vscode-mdx 17 | - streetsidesoftware.code-spell-checker 18 | 19 | ports: 20 | # Used by Storybook 21 | - port: 6042 22 | onOpen: open-preview 23 | visibility: public 24 | -------------------------------------------------------------------------------- /.husky/commit-msg: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname -- "$0")/_/husky.sh" 3 | 4 | npx --no -- commitlint --edit ${1} 5 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | if [ "$LEFTHOOK" = "0" ]; then 4 | exit 0 5 | fi 6 | 7 | call_lefthook() 8 | { 9 | dir="$(git rev-parse --show-toplevel)" 10 | osArch=$(uname | tr '[:upper:]' '[:lower:]') 11 | cpuArch=$(uname -m | sed 's/aarch64/arm64/') 12 | 13 | if lefthook -h >/dev/null 2>&1 14 | then 15 | lefthook "$@" 16 | elif test -f "$dir/node_modules/lefthook/bin/index.js" 17 | then 18 | "$dir/node_modules/lefthook/bin/index.js" "$@" 19 | elif test -f "$dir/node_modules/@evilmartians/lefthook/bin/lefthook_${osArch}_${cpuArch}/lefthook" 20 | then 21 | "$dir/node_modules/@evilmartians/lefthook/bin/lefthook_${osArch}_${cpuArch}/lefthook" "$@" 22 | elif test -f "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook_${osArch}_${cpuArch}/lefthook" 23 | then 24 | "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook_${osArch}_${cpuArch}/lefthook" "$@" 25 | elif bundle exec lefthook -h >/dev/null 2>&1 26 | then 27 | bundle exec lefthook "$@" 28 | elif yarn lefthook -h >/dev/null 2>&1 29 | then 30 | yarn lefthook "$@" 31 | elif pnpm lefthook -h >/dev/null 2>&1 32 | then 33 | pnpm lefthook "$@" 34 | elif command -v npx >/dev/null 2>&1 35 | then 36 | npx lefthook "$@" 37 | elif swift package plugin lefthook >/dev/null 2>&1 38 | then 39 | swift package --disable-sandbox plugin lefthook "$@" 40 | else 41 | echo "Can't find lefthook in PATH" 42 | fi 43 | } 44 | 45 | call_lefthook run "pre-commit" "$@" 46 | -------------------------------------------------------------------------------- /.husky/prepare-commit-msg: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | if [ "$LEFTHOOK" = "0" ]; then 4 | exit 0 5 | fi 6 | 7 | call_lefthook() 8 | { 9 | dir="$(git rev-parse --show-toplevel)" 10 | osArch=$(uname | tr '[:upper:]' '[:lower:]') 11 | cpuArch=$(uname -m | sed 's/aarch64/arm64/') 12 | 13 | if lefthook -h >/dev/null 2>&1 14 | then 15 | lefthook "$@" 16 | elif test -f "$dir/node_modules/lefthook/bin/index.js" 17 | then 18 | "$dir/node_modules/lefthook/bin/index.js" "$@" 19 | elif test -f "$dir/node_modules/@evilmartians/lefthook/bin/lefthook_${osArch}_${cpuArch}/lefthook" 20 | then 21 | "$dir/node_modules/@evilmartians/lefthook/bin/lefthook_${osArch}_${cpuArch}/lefthook" "$@" 22 | elif test -f "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook_${osArch}_${cpuArch}/lefthook" 23 | then 24 | "$dir/node_modules/@evilmartians/lefthook-installer/bin/lefthook_${osArch}_${cpuArch}/lefthook" "$@" 25 | elif bundle exec lefthook -h >/dev/null 2>&1 26 | then 27 | bundle exec lefthook "$@" 28 | elif yarn lefthook -h >/dev/null 2>&1 29 | then 30 | yarn lefthook "$@" 31 | elif pnpm lefthook -h >/dev/null 2>&1 32 | then 33 | pnpm lefthook "$@" 34 | elif command -v npx >/dev/null 2>&1 35 | then 36 | npx lefthook "$@" 37 | elif swift package plugin lefthook >/dev/null 2>&1 38 | then 39 | swift package --disable-sandbox plugin lefthook "$@" 40 | else 41 | echo "Can't find lefthook in PATH" 42 | fi 43 | } 44 | 45 | call_lefthook run "prepare-commit-msg" "$@" 46 | -------------------------------------------------------------------------------- /.huskyrc: -------------------------------------------------------------------------------- 1 | { 2 | "hooks": { 3 | "pre-commit": "lint-staged", 4 | "commit-msg": "commitlint -E HUSKY_GIT_PARAMS" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /.lintstagedrc: -------------------------------------------------------------------------------- 1 | { 2 | "*.{ts,tsx,js}": [ 3 | "eslint --rule 'no-console: error' --fix", 4 | "prettier --write" 5 | ], 6 | "*.{json,md}": ["prettier --write"] 7 | } 8 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 20 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | changeset/ 2 | dist/ 3 | www/ 4 | dev/ 5 | loader/ 6 | storybook-static/ 7 | rollup.config.js 8 | custom-elements.json 9 | component-list.json 10 | resolved-outline-config.ts 11 | resolved-tailwind-config.ts 12 | packages/outline-storybook/config/storybook.main.css 13 | src/components.d.ts 14 | *.md 15 | *.mdx 16 | .history/ 17 | package-lock.json 18 | docs/ 19 | .gitlab-ci.yml 20 | .gitlab-ci/* 21 | *.lit.ts 22 | .github/ 23 | .octane-ci/ 24 | .bin/ 25 | .docksal/ 26 | .yarn/ 27 | project/ 28 | outline.theme.css 29 | **/vars-*.css 30 | *.d.ts 31 | *.global.scoped.css 32 | 33 | # Ignore all stories (Storybook) files: 34 | **/*.stories.ts 35 | storybook.main.css 36 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "bracketSpacing": true, 4 | "jsxSingleQuote": false, 5 | "quoteProps": "consistent", 6 | "printWidth": 80, 7 | "semi": true, 8 | "singleQuote": true, 9 | "tabWidth": 2, 10 | "trailingComma": "es5", 11 | "useTabs": false 12 | } 13 | -------------------------------------------------------------------------------- /.releaserc: -------------------------------------------------------------------------------- 1 | { 2 | "branches": [ 3 | "main", 4 | { 5 | "name": "next", 6 | "prerelease": true 7 | } 8 | ], 9 | "plugins": [ 10 | "@semantic-release/commit-analyzer", 11 | "@semantic-release/npm" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /.storybook/main.js: -------------------------------------------------------------------------------- 1 | import { dirname, join } from 'path'; 2 | 3 | module.exports = { 4 | stories: [ 5 | // Intentionally ordering welcome page first. 6 | '../packages/documentation/outline-docs/src/guides/welcome/00-welcome.mdx', 7 | '../packages/documentation/outline-docs/src/guides/welcome/more-information/*.mdx', 8 | // Tooling usage guides. 9 | '../packages/documentation/outline-docs/src/guides/development/tooling/**/*.mdx', 10 | // Component development guides. 11 | '../packages/documentation/outline-docs/src/guides/development/component-development/**/*.mdx', 12 | // Documentation stories. 13 | '../packages/documentation/outline-docs/src/guides/**/*.@(js|ts|mdx)', 14 | // Modern component stories. 15 | '../packages/**/docs/*.mdx', 16 | ], 17 | typescript: { 18 | check: false, 19 | checkOptions: {}, 20 | }, 21 | addons: [ 22 | { 23 | name: '@storybook/addon-essentials', 24 | }, 25 | ], 26 | features: { 27 | storyStoreV7: true, 28 | postcss: true, 29 | buildStoriesJson: true, 30 | modernInlineRender: false, 31 | }, 32 | framework: { 33 | name: getAbsolutePath('@storybook/web-components-vite'), 34 | options: {}, 35 | }, 36 | docs: { 37 | autodocs: true, 38 | defaultName: 'Documentation', // set to change the name of generated docs entries 39 | }, 40 | }; 41 | 42 | function getAbsolutePath(value) { 43 | return dirname(require.resolve(join(value, 'package.json'))); 44 | } 45 | -------------------------------------------------------------------------------- /.storybook/preview.js: -------------------------------------------------------------------------------- 1 | import './storybook-styles.css'; 2 | 3 | export const parameters = { 4 | actions: { 5 | argTypesRegex: '^on[A-Z].*', 6 | }, 7 | controls: { 8 | expanded: true, 9 | }, 10 | options: { 11 | storySort: { 12 | order: [ 13 | 'Welcome Guide', 14 | 'Coding Guide', 15 | 'Media', 16 | 'Navigation', 17 | 'Content', 18 | 'Templates', 19 | 'Pages', 20 | 'Utility Components', 21 | ], 22 | }, 23 | }, 24 | }; 25 | -------------------------------------------------------------------------------- /.storybook/storybook-styles.css: -------------------------------------------------------------------------------- 1 | @import './storybook.css'; 2 | 3 | body { 4 | color: #000; 5 | background: #fff; 6 | } 7 | 8 | /* @media (prefers-color-scheme: dark) { 9 | body { 10 | color: #fff; 11 | } 12 | } 13 | 14 | @media (prefers-color-scheme: light) { 15 | body { 16 | color: #000; 17 | } 18 | } */ 19 | /* 20 | * Due to the specificity of Storybook's styles any of 21 | * our overrides (probably) must include an !important declaration. 22 | */ 23 | 24 | .sbdocs-h1 { 25 | margin-bottom: var(--spacing-4) !important; 26 | border-style: none !important; 27 | font-family: var(--ff-display) !important; 28 | font-size: var(--fs-3xl) !important; 29 | line-height: var(--lh-3xl) !important; 30 | font-weight: var(--fw-black) !important; 31 | } 32 | 33 | .sbdocs-h2 { 34 | margin-bottom: var(--spacing-4) !important; 35 | border-style: none !important; 36 | font-family: var(--ff-display) !important; 37 | font-size: var(--fs-2xl) !important; 38 | line-height: var(--lh-2xl) !important; 39 | font-weight: var(--fw-semibold) !important; 40 | } 41 | 42 | .sbdocs-p { 43 | margin-top: 0 !important; 44 | } 45 | 46 | .sbdocs-wrapper { 47 | padding: var(--spacing-6) !important; 48 | box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); 49 | } 50 | /* Used to control the max-width / maximum width of the primary wrapper 51 | * in the Docs view in Storybook. 52 | */ 53 | .sbdocs .sbdocs-content { 54 | max-width: 1600px; 55 | } 56 | 57 | .docblock-source { 58 | margin: 0 !important; 59 | } 60 | -------------------------------------------------------------------------------- /.storybook/storybook.css: -------------------------------------------------------------------------------- 1 | @import url('https://rsms.me/inter/inter.css'); 2 | /* Outline */ 3 | @import '../outline.theme.css'; 4 | -------------------------------------------------------------------------------- /.yarnrc.yml: -------------------------------------------------------------------------------- 1 | nodeLinker: node-modules 2 | 3 | yarnPath: .yarn/releases/yarn-1.22.19.cjs 4 | -------------------------------------------------------------------------------- /ENVIRONMENTS.md: -------------------------------------------------------------------------------- 1 | # Outline Environments 2 | > This file lists any active environments where the latest Outline work can be tested. 3 | 4 | * https://outline.phase2tech.com/ -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # MIT License 2 | 3 | Copyright (c) 2024 Phase2 Technology 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /commitlint.config.js: -------------------------------------------------------------------------------- 1 | /** 2 | * This configuration file for commitlint extends the default configuration 3 | * provided by '@phase2/outline-config/commitlint.config'. 4 | * 5 | * The process of extending the configuration works in two steps: 6 | * 7 | * 1. Creating a Baseline Default: 8 | * The default configuration is a set of rules defined in 9 | * '@phase2/outline-config/commitlint.config'. These rules provide a 10 | * baseline standard for commit messages, ensuring consistency and 11 | * readability across all commits. 12 | * 13 | * 2. Allowing Project-Specific Alterations: 14 | * By extending the default configuration in this file, we allow for 15 | * project-specific alterations. This means that while the baseline rules 16 | * are followed, there is flexibility for the project to define its own 17 | * rules or override the default ones. This is done by adding or modifying 18 | * rules in this file. 19 | * 20 | * If a project decides it doesn't need the default configuration, it can 21 | * completely overwrite it by not extending '@phase2/outline-config/commitlint.config' 22 | * and defining its own rules from scratch. 23 | * 24 | * The use of the spread operator (...) before 'defaultConfig' ensures that 25 | * the rules from the default configuration are correctly imported and 26 | * applied in this file. 27 | */ 28 | const defaultConfig = require(`@phase2/outline-config/commitlint.config`); 29 | module.exports = { 30 | ...defaultConfig, 31 | }; 32 | -------------------------------------------------------------------------------- /lefthook.yml: -------------------------------------------------------------------------------- 1 | # EXAMPLE USAGE: 2 | # 3 | # Refer for explanation to following link: 4 | # https://github.com/evilmartians/lefthook/blob/master/docs/configuration.md 5 | # 6 | # pre-push: 7 | # commands: 8 | # packages-audit: 9 | # tags: frontend security 10 | # run: yarn audit 11 | # 12 | pre-commit: 13 | parallel: true 14 | commands: 15 | eslint: 16 | run: yarn lint:eslint 17 | # tsc: 18 | # run: yarn lint:tsc 19 | prettier: 20 | run: yarn lint:prettier 21 | -------------------------------------------------------------------------------- /outline.config.js: -------------------------------------------------------------------------------- 1 | const defaultConfig = require(`@phase2/outline-config/outline.config`); 2 | 3 | // Used to process PostCSS plugins against Storybook specific styles. 4 | const storybookPath = 'packages/documentation/outline-storybook/config'; 5 | const destBasePath = 'dist'; 6 | module.exports = { 7 | ...defaultConfig, 8 | css: { 9 | global: [ 10 | { 11 | src: `${storybookPath}/storybook.outline.css`, 12 | dest: `${storybookPath}/storybook.main.css`, 13 | }, 14 | ], 15 | fouc: { 16 | enabled: true, 17 | dest: `${destBasePath}/fouc.css`, 18 | }, 19 | }, 20 | }; 21 | -------------------------------------------------------------------------------- /packages/README.md: -------------------------------------------------------------------------------- 1 | # Packages 2 | 3 | > The `packages` directory is setup in an organized fashion to help organize more efficient package releases. 4 | 5 | ## Notes on directory structure 6 | 7 | The following describes how packages are organized. 8 | This is open for adjustment based on future needs. 9 | 10 | - Primary `outline-core-*` component packages live at the root of `packages/components`. 11 | - Dated packages to `packages/components/@deprecated`. 12 | - These packages are either completely deprecated or in need of an update for 2023 to our new `outline-core-*` format, and pass audits for a11y, and ensuring alignment with the (currently internal) Design Starter Kit. 13 | - Controller packages live in `packages/controllers`. 14 | - Deprecated controllers live in `packages/controllers/@deprecated`. 15 | - Documentation related packages and components live in `packages/documentation`. 16 | - Tooling related packages live in `packages/tools`. 17 | 18 | ## `yarn` workspaces 19 | 20 | Yarn workspaces are a feature of [Yarn](https://yarnpkg.com/) that allows you to manage multiple packages within a single top-level, root package. It provides a convenient way to work on interdependent packages, making it easier to develop and test changes across multiple packages simultaneously. For more information, you can refer to the [Yarn workspaces documentation](https://yarnpkg.com/features/workspaces). 21 | 22 | To define the workspaces in your project, you can use the `workspaces` field in your `package.json` file. This field should be an array of glob patterns that specify the directories containing your packages. 23 | 24 | Here is an example of how the current workspaces are set up: 25 | 26 | ```json 27 | "workspaces": [ 28 | "./packages/*", 29 | "./packages/components/*", 30 | "./packages/components/@deprecated/*", 31 | "./packages/documentation/*", 32 | "./packages/controllers/*", 33 | "./packages/controllers/@deprecated/*", 34 | "./packages/tools/*" 35 | ], 36 | ``` 37 | -------------------------------------------------------------------------------- /packages/components/README.md: -------------------------------------------------------------------------------- 1 | # `./packages/components` 2 | 3 | > This directory contains a collection of web components that can be used in your web applications. These components are built using LitElement and Lit2 Reactive Controllers, and are designed to be easy to use and highly customizable. 4 | -------------------------------------------------------------------------------- /packages/components/outline-core-accordion/docs/outline-core-accordion.mdx: -------------------------------------------------------------------------------- 1 | import { Meta } from '@storybook/addon-docs'; 2 | 3 | import '@phase2/outline-core-alert'; 4 | 5 | 17 | 18 | [![Latest version for outline-core-accordion](https://img.shields.io/npm/v/@phase2/outline-core-accordion)](https://www.npmjs.com/package/@phase2/outline-core-accordion) 19 | 20 | # `` `OutlineCoreAccordion` 21 | 22 | The `outline-core-accordion` component ... 23 | 24 | 25 | Documentation Status: @TODO 26 |

This documentation is in need of completion as the component is built out.

27 | 31 | 32 |
33 | 34 | ## Introduction to the **`outline-core-accordion`** component 35 | 36 | 37 | ## Usage 38 | 39 | ## CSS Variables 40 | 41 | -------------------------------------------------------------------------------- /packages/components/outline-core-accordion/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Exports for the OutlineCoreAccordion component. 3 | * 4 | * Any export here is then available via the following import, 5 | * which should be available in the consuming application: 6 | * 7 | * @code 8 | * import { OutlineCoreAccordion } from '@phase2/outline-core-accordion'; 9 | * import { constantOne, constantTwo } from '@phase2/outline-core-accordion'; 10 | * import type { ThingType } from '@phase2/outline-core-accordion'; 11 | * @endcode 12 | * 13 | * Any of the above exports can be used in the consuming application 14 | * based on the contents of this file, and creativity of what functionality 15 | * you wish to expose to the consuming application(s). 16 | */ 17 | 18 | // Export the primary component. 19 | export { OutlineCoreAccordion } from './src/outline-core-accordion'; 20 | 21 | // Export any additional sub-components, variables and methods as required. 22 | -------------------------------------------------------------------------------- /packages/components/outline-core-accordion/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@phase2/outline-core-accordion", 3 | "private": true, 4 | "version": "0.0.0", 5 | "description": "The Outline Components for the image component", 6 | "keywords": [ 7 | "outline", 8 | "web-components", 9 | "design system", 10 | "image", 11 | "picture" 12 | ], 13 | "main": "index.ts", 14 | "types": "index.ts", 15 | "typings": "index.d.ts", 16 | "files": [ 17 | "/dist/", 18 | "/src/", 19 | "!/dist/tsconfig.build.tsbuildinfo" 20 | ], 21 | "author": "Phase2 Technology", 22 | "repository": { 23 | "type": "git", 24 | "url": "https://github.com/phase2/outline.git", 25 | "directory": "packages/outline-core-accordion" 26 | }, 27 | "homepage": "https://github.com/phase2/outline/tree/next/packages/components/outline-core-accordion", 28 | "license": "BSD-3-Clause", 29 | "scripts": { 30 | "build": "node ../../../scripts/build.js", 31 | "package": "yarn publish" 32 | }, 33 | "dependencies": { 34 | "lit": "^3.1.2" 35 | }, 36 | "publishConfig": { 37 | "access": "public" 38 | }, 39 | "exports": { 40 | ".": "./index.ts" 41 | }, 42 | "devDependencies": { 43 | "@phase2/outline-adopted-stylesheets-controller": "^1.0.4", 44 | "@phase2/outline-core": "^0.2.7" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /packages/components/outline-core-accordion/src/config.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Shared configuration for the `outline-core-accordion` component. 3 | */ 4 | -------------------------------------------------------------------------------- /packages/components/outline-core-accordion/src/outline-core-accordion.css: -------------------------------------------------------------------------------- 1 | /* 2 | Styles for `outline-core-accordion.css` 3 | 4 | === REMOVE BELOW THIS LINE (AFTER READING) === 5 | @todo: Extrapolate these comments/documentation to a more official location 6 | Add any component level, structural CSS for the `COMPONENT-NAME` component. 7 | This would be CSS that is targeted to this component only, 8 | and is dependent on the HTML structure of the component that 9 | is encapsulated in the component's Shadow DOM. 10 | --- 11 | Shoud the need arise to style the component based on slotted content 12 | with an unknown markup structure provided by the consuming application 13 | in the Light DOM via slots provided by the component, 14 | consider the following best practices: 15 | 16 | The root element of a `slot` should either be 17 | - Semantically expected tag at the top level 18 | - `outline-core-link` for instance requires (if slotted) an `a` tag as the root element of the slot. 19 | - `outline-core-button` also requires (if slotted) a `button` tag as the root element of the slot. 20 | - A custom element that provides its own styling and encapsulation 21 | - `outline-core-card` would be a component example that 22 | - Provides its own styling and encapsulation to handle functionality and responsive behaviors 23 | - And also either: 24 | - Instructs the consuming application to provide a custom element as the first level child of a `slot`, thus providing it's own styling. 25 | - Allows for slotted content to be styled by the consuming application 26 | 27 | Upcoming work will allow for the "styling by the consuming application" option to be more easily 28 | implemented in a standardized and simplified way. 29 | 30 | When updates to build tooling is in place, CSS would be added to an `COMPONENT-NAME.global.css` file, 31 | and then processed either to be loaded on the fly, or manually via a standard `*.global.css` file. 32 | === REMOVE ABOVE THIS LINE (AFTER YOU READ IT) === 33 | */ 34 | -------------------------------------------------------------------------------- /packages/components/outline-core-accordion/src/outline-core-accordion.ts: -------------------------------------------------------------------------------- 1 | import { html, TemplateResult, LitElement } from 'lit'; 2 | import { customElement } from 'lit/decorators.js'; 3 | 4 | // import componentStyles from './outline-core-accordion.css.lit'; 5 | 6 | /** The element name, reused throughout the codebase */ 7 | const componentName = 'outline-core-accordion'; 8 | 9 | /** 10 | * 11 | * The Outline Core Accordion component 12 | * 13 | * @element outline-core-accordion 14 | * @extends LitElement 15 | * @slot - The default slot for this element. 16 | * 17 | * @todo: Complete component. 18 | * @todo: Update `../docs/outline-core-accordion.mdx` to accurately document the component. 19 | * @todo: Run `yarn analyze` to generate README.md. 20 | * @todo: Update `package.json` to remove the `private` flag. 21 | * @todo: Update `.changeset/config.json` to remove this component from the `ignore` list. 22 | * @todo: Create PR for updated and completed component. 23 | */ 24 | @customElement(componentName) 25 | export class OutlineCoreAccordion extends LitElement { 26 | // static styles: CSSResultGroup = [componentStyles]; 27 | 28 | render(): TemplateResult { 29 | return html` `; 30 | } 31 | } 32 | 33 | /** 34 | * TypeScript declaration extends the HTMLElementTagNameMap interface, adding 35 | * the web component. This enhances type checking and autocompletion in IDEs. 36 | * @see {@link https://lit.dev/docs/components/defining/#typescript-typings | Providing good TypeScript typings} 37 | */ 38 | declare global { 39 | interface HTMLElementTagNameMap { 40 | [componentName]: OutlineCoreAccordion; 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /packages/components/outline-core-accordion/tsconfig.build.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "compilerOptions": { 4 | "rootDir": ".", 5 | "outDir": "./dist" 6 | }, 7 | "include": ["index.ts", "src/**/*", "tests/**/*"], 8 | "references": [{ "path": "../../outline-core/tsconfig.build.json" }] 9 | } 10 | -------------------------------------------------------------------------------- /packages/components/outline-core-alert/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # @phase2/outline-core-alert 2 | 3 | ## 0.0.4 4 | 5 | ### Patch Changes 6 | 7 | - Updated exports 8 | - Updated dependencies 9 | - @phase2/outline-adopted-stylesheets-controller@1.0.4 10 | 11 | ## 0.0.3 12 | 13 | ### Patch Changes 14 | 15 | - Dependency chain updates 16 | - Updated dependencies 17 | - @phase2/outline-adopted-stylesheets-controller@1.0.3 18 | 19 | ## 0.0.2 20 | 21 | ### Patch Changes 22 | 23 | - Release bump. 24 | 25 | ## 0.0.1 26 | 27 | ### Patch Changes 28 | 29 | - ce4612e: Updated releases 30 | 31 | ## 0.0.2 32 | 33 | ### Patch Changes 34 | 35 | - Updates to CSS usage 36 | 37 | ## 0.0.1 38 | 39 | ### Patch Changes 40 | 41 | - 3ce056db: Update and reorganization 42 | - b880f153: Cleaup and organization. 43 | - Updated dependencies [3ce056db] 44 | - Updated dependencies [b880f153] 45 | - @phase2/outline-core@0.2.6 46 | 47 | ## 0.0.1 48 | 49 | ### Patch Changes 50 | 51 | - 3ce056db: Update and reorganization 52 | - b880f153: Cleaup and organization. 53 | - Updated dependencies [3ce056db] 54 | - Updated dependencies [b880f153] 55 | - @phase2/outline-core@0.2.6 56 | -------------------------------------------------------------------------------- /packages/components/outline-core-alert/LICENSE.md: -------------------------------------------------------------------------------- 1 | # MIT License 2 | 3 | Copyright © 2024 Phase2 Technology 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /packages/components/outline-core-alert/README.md: -------------------------------------------------------------------------------- 1 | # outline-core-alert 2 | 3 | The Outline Core Alert component 4 | 5 | ## Properties 6 | 7 | | Property | Attribute | Type | Default | Description | 8 | |----------------------|------------------|-----------------------------------------------|---------|-----------------------------------------------| 9 | | `adoptedStylesheets` | | `AdoptedStylesheets` | | | 10 | | `debug` | | `boolean` | false | | 11 | | `isInteractive` | `is-interactive` | `boolean` | false | This is important context for screen readers. | 12 | | `status` | `status` | `"info" \| "warning" \| "error" \| "success"` | "info" | | 13 | 14 | ## Slots 15 | 16 | | Name | Description | 17 | |--------------|------------------------------------------------| 18 | | `default` | The alert contents. | 19 | | `header` | The header in the alert. | 20 | | `icon-end` | The icon to display at the end of the alert. | 21 | | `icon-start` | The icon to display at the start of the alert. | 22 | 23 | ## CSS Custom Properties 24 | 25 | | Property | Description | 26 | |----------------------------|--------------------------------------------------| 27 | | `--outline-alert--error` | background: The background color for the error alert. | 28 | | `--outline-alert--info` | background: The background color for the info alert. | 29 | | `--outline-alert--success` | background: The background color for the success alert. | 30 | | `--outline-alert--warning` | background: The background color for the warning alert. | 31 | -------------------------------------------------------------------------------- /packages/components/outline-core-alert/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 12 | 13 | Component Test Page 14 | 15 | 16 | 17 | 18 | Outline 23 | 24 | 25 | -------------------------------------------------------------------------------- /packages/components/outline-core-alert/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @file Exports for the OutlineCoreAlert component. 3 | * 4 | * Any export here is then available via the following import, 5 | * which should be available in the consuming application: 6 | * 7 | * @code 8 | * import { OutlineCoreAlert } from '@phase2/outline-core-alert'; 9 | * import { 10 | * CoreAlertStatusType, 11 | * OutlineCoreAlertInterface, 12 | * } from '@phase2/outline-core-alert'; 13 | * @endcode 14 | * 15 | * Any of the above exports can be used in the consuming application 16 | * based on the contents of this file, and creativity of what functionality 17 | * you wish to expose to the consuming application(s). 18 | */ 19 | 20 | // Export the primary component. 21 | export { OutlineCoreAlert } from './src/outline-core-alert'; 22 | 23 | export type { 24 | CoreAlertStatusType, 25 | OutlineCoreAlertInterface, 26 | } from './src/config'; 27 | 28 | export { coreAlertStatusTypes } from './src/config'; 29 | 30 | // Export any additional sub-components, variables and methods as required. 31 | -------------------------------------------------------------------------------- /packages/components/outline-core-alert/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@phase2/outline-core-alert", 3 | "version": "0.0.4", 4 | "description": "The Outline Components for the image component", 5 | "keywords": [ 6 | "outline", 7 | "web-components", 8 | "design system", 9 | "image", 10 | "picture" 11 | ], 12 | "engines": { 13 | "node": ">=20" 14 | }, 15 | "type": "module", 16 | "main": "dist/index.js", 17 | "types": "dist/src/outline-core-alert.d.ts", 18 | "files": [ 19 | "/dist/", 20 | "/src/", 21 | "/index.ts", 22 | "/README.md", 23 | "/LICENSE", 24 | "/CHANGELOG.md", 25 | "/package.json", 26 | "!/dist/tsconfig.build.tsbuildinfo" 27 | ], 28 | "author": "Phase2 Technology", 29 | "repository": { 30 | "type": "git", 31 | "url": "https://github.com/phase2/outline.git", 32 | "directory": "packages/outline-core-alert" 33 | }, 34 | "homepage": "https://github.com/phase2/outline/tree/next/packages/components/outline-core-alert", 35 | "license": "BSD-3-Clause", 36 | "scripts": { 37 | "build": "node ../../../scripts/bundle.js", 38 | "package": "yarn publish" 39 | }, 40 | "publishConfig": { 41 | "access": "public" 42 | }, 43 | "exports": { 44 | ".": { 45 | "import": "./index.ts", 46 | "require": "./dist/index.js", 47 | "default": "./dist/index.js" 48 | }, 49 | "./package.json": "./package.json" 50 | }, 51 | "dependencies": { 52 | "lit": "^3.1.2", 53 | "@phase2/outline-adopted-stylesheets-controller": "^1.0.4" 54 | }, 55 | "devDependencies": {} 56 | } 57 | -------------------------------------------------------------------------------- /packages/components/outline-core-alert/src/component.d.ts: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * @file 4 | * This is a TypeScript declaration file. It provides type checking and autocompletion 5 | * for TypeScript files. It can be used as a reference for future components. 6 | * 7 | * @see {@link https://www.typescriptlang.org/docs/handbook/modules.html#ambient-modules | TypeScript Ambient Modules} 8 | */ 9 | 10 | /** 11 | * This declaration is for importing CSS files as a string. 12 | * 13 | * This is made possible by the `?inline` query parameter in Vite, which allows 14 | * the CSS file to be imported as a string instead of being injected into a `